/* ========================= Base tokens ========================= */ :root { --muted: #6b7280; --border: #e5e7eb; --brand-bg-1: #1a2440; --brand-bg-2: #0c1224; --brand-bg-3: #0a0f1f; --header-h: 0px; /* JS will set this to .header height */ } /* Lock page when modal is open (JS toggles .modal-open on & ) */ html.modal-open, body.modal-open { height: 100%; overflow: hidden; } body.modal-open { position: fixed; left: 0; right: 0; width: 100%; } /* ========================= Global ========================= */ * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; line-height: 1.4; color: #111; background: #fff; } button, input, select, textarea { font: inherit; } /* ========================= Header ========================= */ .header { background: radial-gradient(1200px 400px at -10% -80%, var(--brand-bg-1) 0%, var(--brand-bg-2) 45%, var(--brand-bg-3) 100%); color: #fff; border-radius: 12px; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(10, 15, 31, .25); } .header .container { max-width: 1100px; margin: 0 auto; padding: 14px 18px; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; } .brand { min-width: 0; } .brand svg { display: block; height: 40px; width: auto; } @media (min-width: 900px) { .brand svg { height: 44px; } } /* Account strip */ .account { display: flex; align-items: center; gap: 10px; min-width: 0; } .user-email { color: rgba(255, 255, 255, .85); font-size: .9rem; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-small { padding: .35rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); flex-shrink: 0; } .btn-small:hover { background: rgba(255, 255, 255, .14); } .btn-small:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } @media (max-width: 560px) { .user-email { display: none; } .brand svg { height: 36px; } } /* ========================= Forms & buttons ========================= */ /* Inputs: keep all text-like fields consistent */ input[type=text], input[type=url], input[type=email], input[type=tel], input[type=password], textarea, select { width: 100%; padding: .55rem .7rem; border: 1px solid #ccc; border-radius: 8px; background: #fff; /* Normalize odd platform defaults */ -webkit-appearance: none; appearance: none; } input:invalid { border-color: #ef4444; } /* Tone down Safari/Chrome autofill yellow so the field still looks like others */ input:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #111; } button { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fafafa; cursor: pointer; position: relative; } button.primary { background: #0ea5e9; color: #fff; border-color: #0ea5e9; } button:active { transform: scale(0.98); } button.loading { color: transparent; pointer-events: none; opacity: .8; } button.loading::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnspin .8s linear infinite; } @keyframes btnspin { to { transform: rotate(360deg); } } button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; } button:disabled { opacity: .55; cursor: not-allowed; } /* ========================= Utilities ========================= */ .row { display: flex; gap: .5rem; flex-wrap: wrap; } .muted { color: var(--muted); font-size: .9em; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .right { text-align: right; } section { margin-block-end: 1rem; } .panel-title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #374151; } /* ========================= Cards & chips ========================= */ .card { border: 1px solid rgba(0, 0, 0, .08); border-radius: .8rem; padding: .8rem; } .chip { display: flex; gap: .5rem; align-items: center; padding: .4rem .6rem; border: 1px solid rgba(0, 0, 0, .08); border-radius: .6rem; } .chip .label { color: var(--muted); font-size: .9rem; } /* Help card */ .help-card { background: #fafafa; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); width: 100%; max-width: 100%; } .help-card code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; white-space: normal; word-break: break-word; } .help-card svg { width: 14px; height: 14px; vertical-align: -2px; stroke: currentColor; } .help-list { margin: 0; padding-left: 18px; line-height: 1.45; } .help-list li { margin: 4px 0; } .help-title { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.95rem; color: #374151; } /* ========================= Create section grid ========================= */ #create-section.with-help { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; } @media (min-width: 1000px) { #create-section.with-help { grid-template-columns: minmax(420px, 640px) 1fr; } #create-section .create-main { max-width: 640px; width: 100%; } } #create-section.with-help .create-main, #create-section.with-help #create-help { min-width: 0; } /* ========================= Table ========================= */ .table-compact { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-compact table { width: 100%; border-collapse: collapse; } .table-compact th, .table-compact td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; text-align: left; } .table-compact th { color: #555; font-weight: 600; } .table-compact th:last-child, .table-compact td:last-child { text-align: right; } .truncate { display: inline-block; max-width: clamp(180px, 40vw, 420px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* mobile scroll affordances */ @media (max-width: 760px) { .table-compact table { min-width: 720px; } .table-compact::after, .table-compact::before { content: ""; position: absolute; top: 0; height: 100%; width: 28px; pointer-events: none; transition: opacity .2s; opacity: 0; } .table-compact::after { right: 0; background: linear-gradient(to left, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); } .table-compact::before { left: 0; background: linear-gradient(to right, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); } .table-compact.is-scrollable:not(.at-end)::after { opacity: 1; } .table-compact.is-scrollable:not(.at-start)::before { opacity: 1; } .table-compact .scroll-hint { position: absolute; right: 12px; bottom: 8px; background: rgba(17, 17, 17, .78); color: #fff; padding: 6px 10px; border-radius: 999px; font-size: 12px; line-height: 1; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; } .table-compact .scroll-hint.show { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .table-compact .scroll-hint { transition: none; } } /* Icon buttons */ .icon-btn { border: none; background: transparent; padding: 6px; margin: 0 2px; cursor: pointer; border-radius: 8px; } .icon-btn:hover { background: #f2f2f2; } .icon-btn:active { transform: scale(0.92); background: #eee; } .icon-btn.loading { opacity: 0.5; pointer-events: none; } .icon-btn svg { width: 18px; height: 18px; display: block; } /* ========================= Modal (header-aware, body scrolls) ========================= */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; /* small gutter so card never touches edges */ } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); } /* Card: capped to *visual* viewport height (URL bar/keyboard aware) */ .modal-card { position: relative; z-index: 1; width: min(92vw, 680px); max-height: calc(100dvh - 24px); /* 24px = 12px padding * 2 from .modal */ display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); overflow: hidden; /* keep corners clean while body scrolls */ container-type: inline-size; } /* Fallback for browsers without dvh support */ @supports not (height: 100dvh) { .modal-card { max-height: calc(100vh - 24px); } } /* Close button */ .modal-close { position: absolute; right: 10px; top: 8px; border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; } /* Scrolling region */ .modal-body { flex: 1 1 auto; min-height: 0; /* critical for flex overflow */ overflow: auto; /* this scrolls, not the page */ -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */ overscroll-behavior: contain; /* prevent scroll chaining to page */ padding: 18px; /* internal spacing */ } /* Labels inside modals */ .modal-body .label { color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* Sticky actions: always visible at the bottom of the card */ .modal-actions { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 10px 18px 16px; position: sticky; bottom: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 45%, #fff 100%); } /* ========================= Edit/Create forms ========================= */ .edit-form { display: grid; grid-template-columns: 1fr; gap: 14px; } .edit-form .form-field { display: flex; flex-direction: column; gap: 6px; } .edit-form .label { color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .edit-form textarea { min-height: 120px; resize: vertical; } /* ========================= Footer (marketing style) ========================= */ footer { background: radial-gradient(1200px 400px at -10% 180%, #121a33 0%, #0b1123 45%, #090e1c 100%); color: rgba(255, 255, 255, .85); border-radius: 12px; margin-top: 2rem; box-shadow: 0 6px 24px rgba(10, 15, 31, .18); } footer .container { max-width: 1100px; margin: 0 auto; padding: 14px 18px; } footer .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } footer .mini { font-size: .9rem; } footer a.muted { color: var(--muted); text-decoration: none; } footer a.muted:hover { text-decoration: underline; } /* ========================= Session toast ========================= */ .session-expired { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 2000; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-size: 14px; } /* Notes + Tips in the info create/edit modal */ .two-col-info { display: grid; grid-template-columns: 1fr; /* default: stack */ gap: 14px; } .two-col-info>* { min-width: 0; } /* allow children to shrink */ /* When the MODAL is wide enough, go side-by-side */ @container (min-width: 640px) { .two-col-info { grid-template-columns: 1fr 1fr; align-items: start; } } /* Info modal: Notes + Tips layout - default: stack (1 column) - when the MODAL (not the page) is ≥640px wide: 2 columns */ .modal-card .two-col-info { display: grid; grid-template-columns: 1fr; /* stack by default */ gap: 14px; } .modal-card .two-col-info>* { min-width: 0; } /* container query against the modal card (must have container-type) */ @container (min-width: 640px) { .modal-card .two-col-info { grid-template-columns: 1fr 1fr; /* go side-by-side */ align-items: start; } } /* === Unified button system (drop-in) === */ /* Base (applies to .btn and legacy *-btn classes) */ .btn, a.btn, .primary-btn, .secondary-btn, .warning-btn, .danger-btn { display: inline-block; padding: .5rem .75rem; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s; } /* Focus (match your global focus-visible rule for