/* FIXR Watcher One stylesheet for the whole console. Quiet surfaces; ink for primary actions; pine green only where something is live, armed or positive. The dark panels are reserved for computed summaries (worker status, previews, headline profit) so they read as the system talking back, in either theme. Theme: follows the system unless the viewer picks one, which sets data-theme on . The dark values live in one block, applied both by the media query (no explicit choice) and by [data-theme="dark"]. */ :root { color-scheme: light; --canvas: #f3f4f2; --surface: #fff; --surface-2: #f7f8f6; --ink: #14171a; --ink-2: #2b3035; --on-ink: #fff; --muted: #62696f; --faint: #8d949a; --line: #e3e5e1; --line-strong: #cfd3ce; --border-hover: #b7bcb6; --hover: rgba(20, 23, 26, .045); --row-hover: #fbfbfa; --chip: #eef0ed; --track: #f0f1ef; --glass: rgba(243, 244, 242, .86); --backdrop: rgba(20, 23, 26, .4); --accent: #0b6e4f; --accent-hover: #095b41; --accent-soft: #e3f1ea; --accent-border: rgba(11, 110, 79, .45); --focus-ring: rgba(11, 110, 79, .14); --signal: #2bc486; --amber: #9f5705; --amber-soft: #fcf0dc; --amber-ink: #6f3e04; --amber-border: #f1dcb8; --red: #bb3a30; --red-soft: #fbeae7; --red-ink: #8e2a22; --red-hover: #a3322a; --blue: #1f5c9e; --blue-soft: #e7eef7; --count: #f0a53a; --on-count: #1c1407; --dark: #16191c; --dark-2: #1f2327; --dark-line: #2f353a; --dark-muted: #9aa2a8; --dark-text: #e3e8eb; --dark-positive: #62dca6; --dark-negative: #ff9d93; --chart-gain: #138a60; --chart-loss: #bb3a30; --chart-cost: #c98a1b; --chart-grid: #eceeeb; --chart-axis: #b5bab4; /* Waterfall bars, one hue per service; validated as a set against --surface. */ --trace-fixr: #2a78d6; --trace-discord: #eb6834; --trace-push: #1baf7a; --radius-lg: 14px; --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(20, 23, 26, .04); --shadow-pop: 0 12px 32px -8px rgba(20, 23, 26, .18), 0 2px 6px rgba(20, 23, 26, .06); --rail: 248px; --strip: 52px; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --canvas: #121517; --surface: #191d20; --surface-2: #1f2427; --ink: #e9ecea; --ink-2: #c8cdca; --on-ink: #121517; --muted: #979ea3; --faint: #6d747a; --line: #2a3034; --line-strong: #3a4146; --border-hover: #4d555b; --hover: rgba(233, 236, 234, .06); --row-hover: #1c2124; --chip: #262c30; --track: #262c30; --glass: rgba(18, 21, 23, .82); --backdrop: rgba(0, 0, 0, .55); --accent: #45c290; --accent-hover: #6bd3a8; --accent-soft: #16302a; --accent-border: rgba(69, 194, 144, .45); --focus-ring: rgba(69, 194, 144, .22); --amber: #e3a44e; --amber-soft: #33270f; --amber-ink: #f1c989; --amber-border: #4d3a15; --red: #f08276; --red-soft: #3a1d1a; --red-ink: #f6b2aa; --red-hover: #d9665a; --blue: #86b5ea; --blue-soft: #182a3f; --count: #e9a84c; --on-count: #1c1407; --dark: #13211b; --dark-2: #1b2c24; --dark-line: #29392f; --dark-muted: #93a69b; --chart-gain: #3fb985; --chart-loss: #e8766a; --chart-cost: #d9a03a; --chart-grid: #262c30; --chart-axis: #454c52; /* Waterfall bars, stepped for the dark surface. */ --trace-fixr: #3987e5; --trace-discord: #d95926; --trace-push: #199e70; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 16px 40px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { color-scheme: dark; --canvas: #121517; --surface: #191d20; --surface-2: #1f2427; --ink: #e9ecea; --ink-2: #c8cdca; --on-ink: #121517; --muted: #979ea3; --faint: #6d747a; --line: #2a3034; --line-strong: #3a4146; --border-hover: #4d555b; --hover: rgba(233, 236, 234, .06); --row-hover: #1c2124; --chip: #262c30; --track: #262c30; --glass: rgba(18, 21, 23, .82); --backdrop: rgba(0, 0, 0, .55); --accent: #45c290; --accent-hover: #6bd3a8; --accent-soft: #16302a; --accent-border: rgba(69, 194, 144, .45); --focus-ring: rgba(69, 194, 144, .22); --amber: #e3a44e; --amber-soft: #33270f; --amber-ink: #f1c989; --amber-border: #4d3a15; --red: #f08276; --red-soft: #3a1d1a; --red-ink: #f6b2aa; --red-hover: #d9665a; --blue: #86b5ea; --blue-soft: #182a3f; --count: #e9a84c; --on-count: #1c1407; --dark: #13211b; --dark-2: #1b2c24; --dark-line: #29392f; --dark-muted: #93a69b; --chart-gain: #3fb985; --chart-loss: #e8766a; --chart-cost: #d9a03a; --chart-grid: #262c30; --chart-axis: #454c52; /* Waterfall bars, stepped for the dark surface. */ --trace-fixr: #3987e5; --trace-discord: #d95926; --trace-push: #199e70; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 16px 40px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35); } /* --- Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--canvas); color: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { background: var(--canvas); margin: 0; min-height: 100vh; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* No double-tap zoom, so taps land at once. */ a, button, label, summary, input, select, textarea { touch-action: manipulation; } h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-soft); } .data, .countdown, .strip-clock, .count-badge, time { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .skip-link { background: var(--ink); border-radius: 0 0 var(--radius-sm) 0; color: var(--on-ink); font-size: 14px; font-weight: 500; left: 0; padding: 10px 18px; position: fixed; top: 0; transform: translateY(-130%); transition: transform .15s ease; z-index: 60; } .skip-link:focus-visible { transform: none; } main#main-content:focus { outline: none; } /* --- Sidebar --------------------------------------------------------------- */ .rail { background: var(--canvas); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100vh; left: 0; padding: 18px 14px 16px; position: fixed; top: 0; width: var(--rail); z-index: 5; } .brand { align-items: center; display: flex; gap: 11px; padding: 2px 6px; } .brand-mark { align-items: center; background: var(--ink); border-radius: 9px; color: var(--on-ink); display: inline-flex; flex: none; font-size: 17px; font-weight: 700; height: 34px; justify-content: center; letter-spacing: -.02em; position: relative; width: 34px; } .brand-mark::after { background: var(--signal); border: 2px solid var(--canvas); border-radius: 50%; content: ""; height: 10px; position: absolute; right: -3px; top: -3px; width: 10px; } .brand strong, .brand small { display: block; } .brand strong { font-size: 15px; letter-spacing: -.01em; line-height: 1.2; } .brand small { color: var(--muted); font-size: 12.5px; } .rail nav { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; } .rail nav a { align-items: center; border-radius: 8px; color: var(--ink-2); display: flex; font-size: 14px; font-weight: 500; gap: 11px; padding: 8px 10px; } .rail nav svg { fill: none; flex: none; height: 18px; stroke: var(--faint); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; width: 18px; } .rail nav a:hover { background: var(--hover); color: var(--ink); } .rail nav a:hover svg { stroke: var(--ink-2); } .rail nav a[aria-current=page] { background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); color: var(--ink); font-weight: 600; } .rail nav a[aria-current=page] svg { stroke: var(--accent); } /* Awaiting-checkout count beside Control room: amber like the countdowns and the alert favicon, because it is the same "act on this now" signal. */ .nav-count { align-items: center; background: var(--count); border-radius: 999px; color: var(--on-count); display: inline-flex; font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 600; height: 20px; justify-content: center; line-height: 1; margin-left: auto; min-width: 20px; padding: 0 6px; } .nav-count[hidden] { display: none; } .nav-toggle .nav-count { margin-left: 2px; } .nav-count.bump { animation: nav-count-bump .45s cubic-bezier(.3, 1.6, .5, 1); } @keyframes nav-count-bump { 40% { transform: scale(1.25); } } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .nav-section { color: var(--faint); font-size: 12px; font-weight: 500; margin: 22px 10px 6px; } .rail-user { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: auto; padding: 14px 6px 0; } .avatar { align-items: center; background: var(--accent-soft); border-radius: 50%; color: var(--accent); display: inline-flex; font-size: 13px; font-weight: 600; height: 32px; justify-content: center; width: 32px; } .rail-user strong, .rail-user small { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-user small { color: var(--muted); font-size: 12px; } .rail-user form { margin: 0; } .text-button { background: transparent; border: 0; border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; padding: 5px 7px; } .text-button:hover { background: var(--hover); color: var(--ink); } /* --- Top strip ------------------------------------------------------------- */ .app-shell { margin-left: var(--rail); min-height: 100vh; } .mobile-bar { display: none; } .system-strip { align-items: center; backdrop-filter: saturate(1.4) blur(10px); background: var(--glass); border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-size: 13px; gap: 22px; height: var(--strip); padding: 0 40px; position: sticky; top: 0; z-index: 4; } .system-strip strong { color: var(--ink); font-weight: 500; } .strip-status { align-items: center; color: var(--ink-2); display: inline-flex; font-weight: 500; margin-right: auto; } .status-dot, .presence { background: var(--signal); border-radius: 50%; box-shadow: 0 0 0 3px rgba(43, 196, 134, .18); display: inline-block; height: 7px; margin-right: 9px; width: 7px; } .strip-status.paused { color: var(--red-ink); } .strip-status.paused .status-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(187, 58, 48, .18); } .strip-clock { color: var(--ink-2); min-width: 86px; } .live-toggle { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); color: var(--ink-2); display: inline-flex; font-size: 12.5px; font-weight: 500; gap: 7px; padding: 4px 11px 4px 9px; } .live-toggle:hover { border-color: var(--line-strong); } .live-toggle[hidden] { display: none; } .live-dot { background: var(--signal); border-radius: 50%; flex: none; height: 7px; width: 7px; } .live-toggle[data-live-state=live] .live-dot { animation: live-breathe 2.4s ease-in-out infinite; } .live-toggle[data-live-state=paused] { color: var(--muted); } .live-toggle[data-live-state=paused] .live-dot { background: var(--line-strong); } .live-toggle[data-live-state=stale] { color: var(--amber); } .live-toggle[data-live-state=stale] .live-dot { background: var(--amber); } @keyframes live-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 196, 134, .45); } 60% { box-shadow: 0 0 0 5px rgba(43, 196, 134, 0); } } .theme-toggle { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); display: inline-flex; height: 30px; justify-content: center; padding: 0; width: 30px; } .theme-toggle:hover { background: var(--hover); color: var(--ink); } .theme-toggle svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; width: 17px; } /* Bell: struck through while alerts are off, accent-coloured while on. */ .alerts-toggle[aria-pressed="true"] { color: var(--accent); } .alerts-toggle[aria-pressed="true"] .alerts-off-slash { display: none; } /* The icon shows the theme a click switches to. */ .theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: block; } :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .theme-icon-light { display: block; } :root:not([data-theme]) .theme-toggle .theme-icon-dark { display: none; } } .theme-toggle.floating { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); height: 36px; position: fixed; right: 20px; top: 20px; width: 36px; z-index: 10; } /* --- Toast messages -------------------------------------------------------- */ .messages { position: fixed; right: 24px; top: calc(var(--strip) + 14px); z-index: 10; } .message { align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); display: flex; font-size: 14px; gap: 12px; margin-bottom: 8px; max-width: 400px; padding: 12px 12px 12px 14px; } .message::before { background: var(--accent); border-radius: 50%; content: ""; flex: none; height: 8px; margin-top: 7px; width: 8px; } .message.error::before { background: var(--red); } .message.warning::before { background: var(--amber); } .message.info::before { background: var(--blue); } .message p { flex: 1; margin: 0; } .message.leaving { animation: message-out .28s ease-in forwards; } @keyframes message-out { to { opacity: 0; transform: translateX(12px); } } .message-dismiss { background: transparent; border: 0; border-radius: 6px; color: var(--faint); flex: none; font-size: 18px; height: 24px; line-height: 1; padding: 0; width: 24px; } .message-dismiss:hover { background: var(--surface-2); color: var(--ink); } /* --- Page structure -------------------------------------------------------- */ main#main-content { margin: 0 auto; max-width: 1440px; padding: 36px 40px 80px; } main#main-content.auth-shell { max-width: none; padding: 0; } .page-head { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 28px; } .page-head.narrow { max-width: 860px; } .page-head h1 { font-size: 30px; letter-spacing: -.028em; line-height: 1.15; margin: 0; } .page-head p { color: var(--muted); margin: 6px 0 0; max-width: 64ch; } .kicker { color: var(--muted); font-size: 13px; font-weight: 500; margin: 0 0 4px; } .head-metrics { display: flex; gap: 8px; } .head-metrics div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 128px; padding: 10px 14px; } .head-metrics strong, .head-metrics span { display: block; } .head-metrics strong { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; } .head-metrics span { color: var(--muted); font-size: 12.5px; } .head-actions { align-items: center; display: flex; gap: 8px; } .head-actions form { margin: 0; } .queue-panel, .action-panel, .recent-strip, .data-panel, .form-panel, .rule-ledger, .history-timeline, .log-filters, .collection-filters, .checkout-summary, .checkout-panel, .chart-card, .not-found-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .queue-panel, .action-panel, .recent-strip { padding: 22px 24px; } .section-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; } .section-head h2 { font-size: 16px; margin: 0; } .section-head p { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; } .section-head > a { color: var(--accent); font-size: 14px; font-weight: 500; white-space: nowrap; } .section-head > a:hover { text-decoration: underline; text-underline-offset: 3px; } .panel-heading { font-size: 18px; margin: 0 0 4px; } .panel-heading + p { color: var(--muted); font-size: 14px; margin: 0 0 20px; } .count-badge { background: var(--ink); border-radius: 999px; color: var(--on-ink); font-size: 13px; font-weight: 600; min-width: 28px; padding: 3px 10px; text-align: center; } /* --- Buttons & links ------------------------------------------------------- */ .button { align-items: center; border: 1px solid transparent; border-radius: 8px; display: inline-flex; font-size: 14px; font-weight: 500; gap: 8px; justify-content: center; line-height: 1.2; min-height: 38px; padding: 8px 15px; transition: background-color .12s ease, border-color .12s ease; white-space: nowrap; } .button.primary { background: var(--ink); color: var(--on-ink); } .button.primary:hover { background: var(--ink-2); } .button.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); } .button.secondary:hover { background: var(--surface-2); border-color: var(--border-hover); } .button.danger { background: var(--red); color: #fff; } .button.danger:hover { background: var(--red-hover); } .button.compact { font-size: 13px; min-height: 32px; padding: 5px 11px; } .button.full { width: 100%; } .button[disabled], .button:disabled { cursor: not-allowed; opacity: .5; } .danger-button { color: var(--red) !important; margin-right: auto; } .table-action, .form-link { color: var(--accent); font-size: 14px; font-weight: 500; } .table-action:hover, .form-link:hover { text-decoration: underline; text-underline-offset: 3px; } .form-link { display: inline-block; text-align: center; } .row-actions { align-items: center; display: flex; gap: 4px; justify-content: flex-end; } .row-actions form { margin: 0; } .row-actions > a:not(.button), .row-actions button:not(.button):not(.picker *) { background: none; border: 0; border-radius: 6px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding: 5px 8px; } .row-actions > a:not(.button):hover, .row-actions button:not(.button):not(.picker *):hover { background: var(--surface-2); color: var(--ink); } .row-actions .danger-link { color: var(--red) !important; } .row-actions .danger-link:hover { background: var(--red-soft) !important; } .row-actions button:disabled:not(.picker *) { cursor: not-allowed; opacity: .45; } /* A submitted form's button: a small spinner, and no second click. */ .is-busy { cursor: progress; pointer-events: none; } .button.is-busy { opacity: .75; } .is-busy::after { animation: busy-spin .7s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; content: ""; display: inline-block; flex: none; height: 12px; margin-left: 8px; vertical-align: -2px; width: 12px; } @keyframes busy-spin { to { transform: rotate(360deg); } } /* --- Confirmation dialog --------------------------------------------------- */ .confirm-dialog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); color: var(--ink); max-width: calc(100vw - 32px); padding: 24px; width: 420px; } .confirm-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); } .confirm-dialog[open] { animation: dialog-in .16s ease-out; } @keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } } .confirm-dialog h2 { font-size: 17px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; } .confirm-dialog p { color: var(--muted); font-size: 14px; margin: 8px 0 0; } .confirm-dialog p:empty { display: none; } .confirm-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; } /* --- Status pills ---------------------------------------------------------- */ .status { align-items: center; background: var(--chip); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 12px; font-weight: 500; gap: 6px; justify-self: start; line-height: 1.4; padding: 3px 10px 3px 8px; white-space: nowrap; } .status::before { background: currentColor; border-radius: 50%; content: ""; flex: none; height: 6px; width: 6px; } .status.active, .status.connected, .status.ok { background: var(--accent-soft); color: var(--accent); } .status.pending, .status.reconciling, .status.deferred { background: var(--amber-soft); color: var(--amber); } .status.failed, .status.invalid, .status.rejected, .status.network_error, .status.timeout { background: var(--red-soft); color: var(--red); } .status.purchased { background: var(--blue-soft); color: var(--blue); } .status.inactive, .status.cancelled, .status.written_off, .status.won { background: var(--surface-2); color: var(--ink-2); } .status.part_refunded, .status.refunded, .status.refund, .status.cancellation, .status.disputed { background: var(--amber-soft); color: var(--amber); } .status.charged_back, .status.lost { background: var(--red-soft); color: var(--red); } /* --- Dashboard ------------------------------------------------------------- */ .work-status { background: var(--dark); border-radius: var(--radius-lg); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 200px 240px; margin-bottom: 20px; overflow: hidden; } .work-status > div { align-content: center; border-left: 1px solid var(--dark-line); display: grid; gap: 2px; padding: 16px 22px; } .work-status > div:first-child { align-items: center; border-left: 0; column-gap: 14px; grid-template-columns: auto 1fr; } .work-status small { color: var(--dark-muted); font-size: 13px; grid-column: 2; } .work-status span { color: var(--dark-muted); font-size: 12.5px; } .work-status strong { font-weight: 500; } .work-status strong.data { font-size: 18px; letter-spacing: -.01em; } .pulse { animation: live-breathe 2.4s ease-in-out infinite; background: var(--signal) !important; border-radius: 50%; grid-row: 1 / 3; height: 10px; width: 10px; } .pulse.off-duty { animation: none; background: var(--dark-muted) !important; opacity: .6; } .pulse.paused { animation: none; background: var(--dark-negative) !important; } .command-head .automation-switch { align-self: center; margin-left: auto; } .control-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; } .timeline { margin-top: 12px; } .timeline-item { display: grid; grid-template-columns: 46px 18px 1fr; position: relative; } .timeline-item time { color: var(--muted); font-size: 13px; padding-top: 18px; } .timeline-pin { background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-soft); height: 10px; margin: 22px 0 0 2px; position: relative; width: 10px; z-index: 2; } .timeline-item::before { background: var(--line); bottom: 0; content: ""; left: 52px; position: absolute; top: 0; width: 2px; } .timeline-item:first-child::before { top: 22px; } .timeline-item:last-child::before { bottom: auto; height: 22px; } .timeline-item:only-child::before { display: none; } .timeline-body { border-bottom: 1px solid var(--line); padding: 14px 0 18px 10px; } .timeline-item:last-child .timeline-body { border-bottom: 0; } .item-line { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; } .item-line h2, .item-line h3 { font-size: 15.5px; margin: 0; } .item-line p, .timeline-body > p { color: var(--muted); font-size: 14px; margin: 3px 0; } .item-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 12px; } .countdown { color: var(--amber); font-size: 14px; font-weight: 600; } .countdown.elapsed { color: var(--red); } .countdown.urgent { align-items: center; color: var(--red); display: inline-flex; gap: 8px; } .countdown.urgent::before { animation: urgent-pulse 1.2s ease-in-out infinite; background: var(--red); border-radius: 50%; content: ""; flex: none; height: 7px; width: 7px; } @keyframes urgent-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 0%, transparent); } } .checkout-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* --- Hold cards ------------------------------------------------------------- A held reservation is a decision with a deadline, so it gets a card rather than a history row: the ring drains to the expiry, the money and the pay button sit together, and the card itself turns red for the last two minutes. */ .hold-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 20px; padding: 22px 24px; } .hold-list { display: grid; gap: 12px; margin-top: 14px; } .hold-card { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); column-gap: 16px; display: grid; grid-template-areas: "clock art main pay" "warn warn warn warn" "more more more more"; grid-template-columns: 76px 64px minmax(0, 1fr) auto; padding: 14px 16px 0; transition: border-color .2s ease; } .hold-card.urgent { animation: hold-alarm 1.6s ease-in-out infinite; border-color: var(--red); } .hold-card.elapsed { opacity: .6; } .hold-card.contested { border-color: var(--amber-border); } @keyframes hold-alarm { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent); } } .hold-clock { grid-area: clock; height: 76px; position: relative; width: 76px; } .hold-ring { height: 100%; transform: rotate(-90deg); width: 100%; } .hold-ring circle { fill: none; stroke-width: 5; } .hold-ring-track { stroke: var(--track); } .hold-ring-fill { stroke: var(--accent); stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s ease; } .hold-card.urgent .hold-ring-fill { stroke: var(--red); } .hold-clock-face { align-content: center; display: grid; inset: 0; position: absolute; text-align: center; } .hold-seconds { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } .hold-card.urgent .hold-seconds { color: var(--red); } .hold-clock-face small { color: var(--muted); font-size: 11px; } .hold-art { align-items: center; background: var(--chip); border-radius: var(--radius-sm); color: var(--muted); display: flex; font-size: 22px; font-weight: 600; grid-area: art; height: 64px; justify-content: center; overflow: hidden; width: 64px; } .hold-art img { height: 100%; object-fit: cover; width: 100%; } .hold-main { grid-area: main; min-width: 0; } .hold-main h3 { font-size: 16px; margin: 0; overflow-wrap: anywhere; } .hold-ticket { color: var(--ink-2); font-size: 14px; margin: 2px 0 8px; } .hold-ticket time { color: var(--muted); } .hold-facts { display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px 18px; margin: 0; } .hold-facts div { display: flex; gap: 6px; min-width: 0; } .hold-facts dt { color: var(--muted); } .hold-facts dd { font-weight: 500; margin: 0; overflow-wrap: anywhere; } .hold-facts dd span { color: var(--muted); font-weight: 400; } .hold-pay { display: grid; gap: 2px; grid-area: pay; justify-items: end; text-align: right; } .hold-pay small { color: var(--muted); font-size: 12px; } .hold-pay strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; } .hold-pay form { margin: 0; } .hold-pay-button { font-size: 15px; font-weight: 600; min-height: 44px; min-width: 132px; } .hold-warning { background: var(--amber-soft); border-radius: var(--radius-sm); color: var(--amber-ink); font-size: 13.5px; grid-area: warn; margin: 12px 0 0; padding: 9px 12px; } .hold-more { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; font-size: 13.5px; gap: 8px 18px; grid-area: more; margin-top: 14px; min-height: 42px; padding: 6px 0; } .hold-more form { margin: 0; } .hold-more .table-action { font-size: 13.5px; } .hold-ignore { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; margin-left: auto; padding: 4px 0; } .hold-ignore:hover:not(:disabled) { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .hold-ignore:disabled { cursor: not-allowed; opacity: .5; } .hold-released { color: var(--muted); font-size: 13.5px; margin: 10px 0; } .history-heading { font-size: 16px; margin: 16px 0 4px; } .empty-state { padding: 52px 20px; text-align: center; } .empty-state.roomy { padding: 76px 24px; } .empty-state h3 { font-size: 16px; margin: 16px 0 4px; } .empty-state h3:first-child { margin-top: 0; } .empty-state p { color: var(--muted); font-size: 14px; margin: 0 auto 18px; max-width: 46ch; } .radar { background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: inset 0 0 0 11px var(--surface), inset 0 0 0 12px var(--line); display: inline-block; height: 52px; width: 52px; } .action-list { margin: 14px 0 18px; } .action-list > a { align-items: flex-start; border-radius: var(--radius-sm); border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: 22px minmax(0, 1fr) auto; padding: 13px 4px; } .action-list > a:first-child { border-top: 0; } .action-list > a:hover strong { color: var(--accent); } .action-list strong { font-size: 14px; } .action-list p { color: var(--muted); font-size: 13px; margin: 2px 0 0; } .action-list time { color: var(--faint); font-size: 12px; padding-top: 2px; } .fault-mark { align-items: center; background: var(--red-soft); border-radius: 50%; color: var(--red); display: flex; font-size: 12px; font-weight: 700; height: 22px; justify-content: center; width: 22px; } .clear-state { color: var(--muted); font-size: 14px; padding: 30px 0 18px; text-align: center; } .clear-state span { align-items: center; background: var(--accent-soft); border-radius: 50%; color: var(--accent); display: inline-flex; font-size: 15px; font-weight: 600; height: 34px; justify-content: center; width: 34px; } .clear-state p { margin: 10px 0 0; } .recent-strip { margin-top: 20px; } .compact-table { margin-top: 12px; } .compact-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: 104px minmax(0, 1.5fr) minmax(0, 1fr) 150px 88px; margin: 0 -10px; padding: 11px 10px; } .compact-row:first-child { border-top: 0; } .compact-row:hover { background: var(--surface-2); border-radius: var(--radius-sm); } .compact-row strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compact-row time, .compact-row > span { color: var(--muted); font-size: 13.5px; } .compact-row .data { color: var(--ink); font-weight: 500; text-align: right; } .table-empty { color: var(--muted); font-size: 14px; margin: 0; padding: 48px 24px; text-align: center; } /* --- Tables ---------------------------------------------------------------- */ .data-panel { overflow: hidden; } .table-head, .table-row { align-items: center; display: grid; gap: 18px; padding: 12px 20px; } .table-head { background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 500; } .table-row { border-top: 1px solid var(--line); font-size: 14px; min-height: 64px; } .table-head + .table-row, .table-row:first-of-type { border-top: 0; } .table-row:hover { background: var(--row-hover); } .table-row strong, .table-row small { display: block; } .table-row strong { font-weight: 500; } .table-row small { color: var(--muted); font-size: 13px; margin-top: 2px; } .table-row > span { color: var(--ink-2); } .account-columns { grid-template-columns: minmax(0, 1.4fr) 150px 132px 92px 260px; } .log-columns { grid-template-columns: 118px minmax(0, 1.5fr) 118px 110px 80px 92px; } .log-columns > *:nth-child(5) { text-align: right; } .log-table code, .log-columns code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-family: var(--mono); font-size: 12px; justify-self: start; padding: 2px 6px; } .correlation-link { justify-self: start; } .correlation-link { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 2px 6px; text-decoration: none; } .correlation-link small { color: var(--accent) !important; font-size: 12px !important; margin: 0 !important; white-space: nowrap; } .table-row.linked:hover code, .correlation-link:focus-visible code { border-color: var(--accent); color: var(--accent); } /* The whole row opens its operation; the saved response stays its own control above the link. */ .table-row.linked { cursor: pointer; position: relative; } .row-link::after { content: ""; inset: 0; position: absolute; } .row-link:focus-visible { outline: none; } .table-row.linked:has(.row-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; } .table-row.linked details { position: relative; z-index: 1; } .operation-columns { color: inherit; grid-template-columns: 118px minmax(0, 1.4fr) 110px minmax(0, 1fr) 90px 92px; text-decoration: none; } .operation-columns > *:nth-child(5) { text-align: right; } .operation-failures { color: var(--red) !important; display: inline !important; } .operation-reached { display: flex; flex-wrap: wrap; gap: 6px; } .step-columns { grid-template-columns: 96px 124px minmax(0, 1fr) 110px 80px; min-height: 52px; } .step-columns > *:nth-child(5) { text-align: right; } .step-call { min-width: 0; overflow-wrap: anywhere; } .step-method { color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 600; margin-right: 4px; } .stage-tag { color: var(--muted) !important; font-size: 12.5px; font-weight: 500; } .operation-lane { margin-bottom: 16px; } .lane-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 14px 20px; } .lane-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0; } .lane-head small { color: var(--muted); display: block; font-size: 13px; margin-top: 2px; } .lane-reservation { align-items: center; background: var(--surface-2); border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 10px 20px; } .lane-reservation strong { display: block; font-size: 14px; font-weight: 500; } .lane-reservation small { color: var(--muted); display: block; font-size: 13px; margin-top: 2px; } .operation-lane > .table-head { border-top: 1px solid var(--line); } .trace.operation-id { margin: 0 0 16px; } .stage-filter-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; } .operation-pipeline { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; } .pipeline-stage { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; border-top: 3px solid var(--accent); color: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; text-decoration: none; } a.pipeline-stage:hover { background: var(--row-hover); } .pipeline-stage > span { color: var(--muted); font-size: 12.5px; font-weight: 500; } .pipeline-stage > strong { font-size: 15px; font-weight: 600; } .pipeline-stage > small { color: var(--muted); font-family: var(--mono); font-size: 12px; } .pipeline-stage.partial { border-top-color: var(--amber); } .pipeline-stage.failed { border-top-color: var(--red); } .pipeline-stage.skipped { border-style: dashed; border-top: 3px dashed var(--line); } .pipeline-stage.skipped > strong { color: var(--muted); font-weight: 500; } .pipeline-stage.selected { box-shadow: 0 0 0 2px var(--accent); } .trace-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .trace-toolbar .stage-filter-note { margin: 0; } .segmented a { border-radius: 7px; color: var(--muted); display: block; font-size: 14px; font-weight: 500; padding: 6px 14px; text-decoration: none; } .segmented a:hover { color: var(--ink); } .segmented a[aria-current="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(20, 23, 26, .1), 0 0 0 1px var(--hover); color: var(--ink); } .segmented a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Waterfall: one row per call, bars placed on the window's time axis. */ .waterfall { --wf-label: 340px; --wf-gutter: 64px; margin-bottom: 16px; } /* The operation fills one visible width; --wf-ratio widths hold the whole trace. */ .wf-scroll { container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; } .wf-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .wf-canvas { /* Never narrower than 420px a screen, so tick labels keep their room on phones. */ --wf-track: calc(max(100cqw - var(--wf-label) - var(--wf-gutter), 420px) * var(--wf-ratio)); width: calc(var(--wf-label) + var(--wf-track) + var(--wf-gutter)); } .wf-fixr { --c: var(--trace-fixr); } .wf-discord { --c: var(--trace-discord); } .wf-push { --c: var(--trace-push); } .wf-legend { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 13px; gap: 6px 18px; padding: 12px 20px; } .wf-legend > span { align-items: center; display: inline-flex; gap: 6px; } .wf-legend small { color: var(--muted); flex-basis: 100%; font-size: 12.5px; } .wf-swatch { background: var(--c); border-radius: 3px; display: inline-block; height: 10px; width: 14px; } .wf-swatch.failed, .wf-bar.failed { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 35%, var(--surface)) 3px 6px); } .wf-axis, .wf-group, .wf-row { display: grid; grid-template-columns: var(--wf-label) var(--wf-track); } .wf-axis { align-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; height: 34px; } .wf-axis strong { color: var(--ink); font-weight: 600; } .wf-label-col { align-items: center; align-self: stretch; background: var(--surface); box-shadow: 1px 0 0 var(--line); display: flex; gap: 8px; left: 0; min-width: 0; padding: 0 12px 0 20px; position: sticky; z-index: 2; } .wf-axis .wf-label-col { background: var(--surface-2); } .wf-row:hover .wf-label-col, .wf-row:focus-visible .wf-label-col { background: var(--row-hover); } .wf-row[aria-expanded="true"] .wf-label-col { background: var(--surface-2); } .wf-track { height: 100%; margin-right: var(--wf-gutter); position: relative; } .wf-tick { font-variant-numeric: tabular-nums; left: var(--x); position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .wf-tick:first-child { transform: translate(0, -50%); } .wf-tick.last { transform: translate(-100%, -50%); } .wf-body { position: relative; } .wf-gridlines { bottom: 0; left: var(--wf-label); pointer-events: none; position: absolute; top: 0; width: var(--wf-track); } .wf-gap { background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--chart-grid) 80%, transparent) 7px 8px); bottom: 0; left: var(--x); position: absolute; top: 0; width: var(--w); } .wf-gap > span { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-block; font-size: 12px; left: calc(var(--wf-label) + 24px); margin: 10px 0 0 24px; padding: 2px 10px; position: sticky; white-space: nowrap; } .wf-jumps { display: inline-flex; gap: 6px; margin-left: auto; } .wf-gridlines i { border-left: 1px solid var(--chart-grid); bottom: 0; left: var(--x); position: absolute; top: 0; } .wf-group { font-size: 13px; position: relative; } .wf-group .wf-label-col { padding-bottom: 4px; padding-top: 12px; } .wf-body > .wf-group:not(:first-of-type) { border-top: 1px solid var(--line); } .wf-body > .wf-row:last-of-type, .wf-body > .wf-detail:last-child { margin-bottom: 0; } .wf-group strong { font-weight: 600; white-space: nowrap; } .wf-group .status { font-size: 11.5px; padding: 1px 7px; } .wf-row { align-items: center; cursor: pointer; height: 30px; position: relative; } .wf-row:hover { background: var(--row-hover); } .wf-row:focus-visible { background: var(--row-hover); outline: 2px solid var(--accent); outline-offset: -2px; } .wf-row[aria-expanded="true"] { background: var(--surface-2); } .wf-row .step-method { flex: 0 0 40px; } .wf-name { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wf-bar { background: var(--c); border-radius: 4px; height: 12px; left: var(--x); min-width: 3px; position: absolute; top: 50%; transform: translateY(-50%); width: var(--w); } .wf-value { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; left: var(--x); margin-left: 8px; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; } .wf-value.before { margin-left: -8px; transform: translate(-100%, -50%); } .wf-failed { color: var(--red); font-weight: 600; } .wf-detail { background: var(--surface-2); box-sizing: border-box; left: 0; position: sticky; width: 100cqw; z-index: 3; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 4px 20px 12px; } .wf-detail .trace { background: var(--surface); } .wf-tooltip { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; max-width: 340px; padding: 8px 12px; pointer-events: none; position: fixed; z-index: 60; } .wf-tooltip strong { color: var(--ink); display: block; font-weight: 600; overflow-wrap: anywhere; } .wf-tooltip span { display: block; } .invite-columns { grid-template-columns: minmax(0, 1.3fr) 96px 96px 92px 132px; } .audit-columns { grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr) minmax(0, 1.4fr) 64px; } .audit-columns > * { min-width: 0; overflow-wrap: anywhere; } .audit-columns > code:last-child { justify-self: end; } .audit-detail small { margin: 0; } .audit-detail small + small { margin-top: 2px; } .audit-detail span { color: var(--ink-2); font-family: var(--mono); font-size: 12px; } .access-columns { grid-template-columns: minmax(0, 1.4fr) 130px 120px 260px; } .user-account-columns { grid-template-columns: minmax(0, 1.4fr) 140px 190px 152px; } .user-rule-columns { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr) 90px 104px 92px; } .user-reservation-columns { grid-template-columns: 148px minmax(0, 1.7fr) minmax(0, 1fr) 80px 130px 92px; } .ledger-columns { grid-template-columns: 96px minmax(0, 1.8fr) minmax(0, .8fr) 52px 92px 92px 100px 116px; } .inventory-columns { grid-template-columns: minmax(0, 1.8fr) 84px 110px 92px 128px 92px 116px 164px; } .pagination { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; gap: 16px; justify-content: space-between; margin-top: 12px; padding: 10px 14px; } .data-panel > .pagination, .queue-panel > .pagination { border-radius: 0; border-width: 1px 0 0; margin-top: 0; } .queue-panel > .pagination { margin: 12px -24px -22px; padding: 10px 24px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .pagination-range { color: var(--muted); font-size: 13px; margin: 0; } .pagination-range strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; } .pagination-controls { align-items: center; display: flex; gap: 10px; } .pagination-controls > strong { color: var(--muted); font-size: 13px; font-weight: 500; } .pagination-controls a, .pagination-controls span { border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; font-weight: 500; min-width: 76px; padding: 5px 10px; text-align: center; } .pagination-controls a:hover { background: var(--surface-2); } .pagination-controls span[aria-disabled="true"] { border-color: var(--line); color: var(--faint); } /* --- Forms ----------------------------------------------------------------- */ .form-panel { display: grid; gap: 48px; grid-template-columns: minmax(0, 640px) minmax(250px, 1fr); max-width: 1080px; padding: 32px; } .form-panel.single { grid-template-columns: minmax(0, 640px) minmax(260px, 1fr); max-width: none; } .form-stack { display: flex; flex-direction: column; gap: 18px; } .field label, .sale-form .field-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; } .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea, .log-filters input, .log-filters select, .filter-inline select, .generated-link input, .filter-field select, .filter-field input[type=date], .filter-field input[type=search], .filter-field input[type=text] { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 1px 1px rgba(20, 23, 26, .03); color: var(--ink); min-height: 40px; padding: 8px 12px; transition: border-color .12s ease, box-shadow .12s ease; width: 100%; } .field input:not([type=checkbox]):not([type=radio]):hover, .field select:hover, .field textarea:hover, .log-filters input:hover, .log-filters select:hover, .filter-field select:hover, .filter-field input[type=date]:hover, .filter-field input[type=search]:hover, .filter-field input[type=text]:hover { border-color: var(--border-hover); } .filter-field input[type=search] { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238d949a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.2' cy='6.2' r='4.2'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E") 12px center / 14px no-repeat; padding-left: 34px; } .field input:not([type=checkbox]):not([type=radio]):focus, .field select:focus, .field textarea:focus, .log-filters input:focus, .log-filters select:focus, .filter-inline select:focus, .generated-link input:focus, .filter-field select:focus, .filter-field input[type=date]:focus, .filter-field input[type=search]:focus, .filter-field input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; } .field textarea { min-height: 88px; resize: vertical; } .field select:not([multiple]), .log-filters select, .filter-inline select, .filter-field select:not([multiple]) { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2362696f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; padding-right: 34px; } .field input[type=checkbox], .field input[type=radio] { accent-color: var(--accent); height: 17px; margin: 0; width: 17px; } .field input[data-secret-stored="true"]::placeholder { color: var(--ink-2); opacity: 1; } .field small { color: var(--muted); display: block; font-size: 13px; margin-top: 6px; } .field .errorlist, .form-error .errorlist, .filter-field .errorlist { color: var(--red); font-size: 13px; list-style: none; margin: 6px 0 0; padding: 0; } .errorlist.nonfield, .form-error .errorlist { background: var(--red-soft); border-radius: 8px; color: var(--red-ink); font-size: 14px; list-style: none; margin: 0 0 18px; padding: 10px 14px; } .field-accounts ul, .field-weekdays > div { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .field-weekdays > div { grid-template-columns: repeat(4, minmax(0, 1fr)); } .field-accounts li, .field-weekdays > div > div { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; transition: border-color .12s ease, background-color .12s ease; } .field-accounts li:hover, .field-weekdays > div > div:hover { border-color: var(--border-hover); } .field-accounts li:has(input:checked), .field-weekdays > div > div:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } .field-weekdays > div > div label, .field-accounts li label { align-items: center; cursor: pointer; display: flex; font-weight: 500; gap: 9px; margin: 0; padding: 9px 11px; } .field-accounts select[multiple] { background: var(--surface-2); min-height: 176px; padding: 4px; } .field-accounts select[multiple] option { border-radius: 6px; color: var(--ink); margin: 1px 0; padding: 9px 11px; } .field-accounts select[multiple] option:checked { background: linear-gradient(var(--ink), var(--ink)); color: var(--on-ink); font-weight: 500; } .field .field-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; } .account-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .field .account-choice { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; display: flex; font-weight: 400; gap: 11px; margin: 0; min-width: 0; padding: 10px 12px; transition: border-color .12s ease, background-color .12s ease; } .account-choice:hover { border-color: var(--border-hover); } .account-choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } .account-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .account-choice input:focus-visible { outline: none; } .account-choice-text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .account-choice-text strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-choice-text small { color: var(--muted); font-size: 12.5px; margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-choice .status { flex: none; } .account-choices-empty { background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 14px; grid-column: 1 / -1; margin: 0; padding: 14px 16px; } .field-enabled { align-items: center; display: flex; gap: 10px; } .field-enabled label { margin: 0; order: 2; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .form-key { align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-size: 13px; gap: 8px; margin: -4px 0 0; padding-bottom: 18px; } .field-marker { border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 500; margin-left: 6px; padding: 1px 7px; vertical-align: 1px; } .form-key .field-marker { margin-left: 0; } .field-marker.required, .field-marker.contextual { background: var(--accent-soft); color: var(--accent); } .field-marker.optional { background: var(--chip); color: var(--muted); } [data-fixed-quantity][hidden] { display: none !important; } /* Contextual help: a "?" beside a label opens a fuller explanation with an example. */ .field-head { align-items: center; display: flex; gap: 8px; margin-bottom: 6px; } .field .field-head label, .field-head .field-label { margin-bottom: 0; } .help-toggle { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); cursor: pointer; display: inline-flex; flex: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; height: 20px; justify-content: center; padding: 0; position: relative; width: 20px; } /* A bigger touch target than the visible circle. */ .help-toggle::before { content: ""; inset: -10px; position: absolute; } .help-toggle:hover { border-color: var(--border-hover); color: var(--ink); } .help-toggle:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; } .help-toggle[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); } html:not(.js) .help-toggle { display: none; } .field-help { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent-border); border-radius: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-bottom: 10px; padding: 10px 12px; } .js .field-help:not(.is-open) { display: none; } /* An open panel is too cramped in half a grid; give its field the full row. */ .policy-fields > .field:has(> .field-help.is-open) { grid-column: 1 / -1; } .field-help p, .field-help ul, .field-help ol { margin: 8px 0 0; } .field-help > :first-child { margin-top: 0; } .field-help li + li { margin-top: 2px; } .field-help ul, .field-help ol { padding-left: 18px; } .field-help .help-example { color: var(--muted); } .field-help .help-example strong { color: var(--ink-2); font-weight: 600; } .security-note, .settings-actions { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); height: max-content; padding: 20px; } .security-note strong { font-size: 15px; } .security-note p, .settings-actions p { color: var(--muted); font-size: 14px; margin: 6px 0 0; } .settings-actions h2 { font-size: 15px; margin: 0; } .settings-actions form { margin-top: 14px; } .settings-actions hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } .settings-actions p + p { margin-top: 10px; } .secret-state { align-items: center; color: var(--accent) !important; display: flex !important; font-weight: 500; gap: 8px; } .secret-state span { background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-soft); height: 7px; margin-left: 3px; width: 7px; } .rule-editor .form-panel { max-width: none; } .rule-form-layout { grid-template-columns: minmax(0, 780px) minmax(280px, 1fr) !important; } .rule-form-flow, .settings-form-flow { min-width: 0; } .rule-form-section, .settings-form-section { border-top: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 180px minmax(0, 1fr); padding: 26px 0; } .form-key + .rule-form-section, .form-key + .errorlist + .rule-form-section { border-top: 0; } .settings-form-section:first-of-type { border-top: 0; padding-top: 0; } .rule-form-section header h2, .settings-form-section header h2 { font-size: 15px; line-height: 1.3; margin: 0; } .rule-form-section header p, .settings-form-section header p { color: var(--muted); font-size: 13px; margin: 5px 0 0; } .rule-form-fields, .settings-form-fields { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .policy-fields { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } .time-fields { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } .activation-section { padding-bottom: 6px; } .activation-help { color: var(--muted); display: block; font-size: 13px; margin-top: -12px; padding-left: 27px; } .settings-layout { grid-template-columns: minmax(0, 720px) minmax(250px, 1fr); max-width: 1120px; } .settings-save { border-top: 1px solid var(--line); margin-top: 0; padding-top: 22px; } .notification-choices { display: grid; gap: 8px; } .notification-choice { align-items: flex-start !important; } .notification-choice input { margin-top: 2px !important; } .notification-choice .account-choice-text small { white-space: normal; } .stage-field { border: 0; margin: 0; min-width: 0; padding: 0; } .stage-field legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; } .reminder-stages { display: flex; flex-wrap: wrap; gap: 8px; } .field .reminder-stage { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; display: inline-flex; font-weight: 400; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; transition: border-color .12s ease, background-color .12s ease; } .reminder-stage:hover { border-color: var(--border-hover); } .reminder-stage:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } .reminder-stage:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .reminder-stage input:focus-visible { outline: none; } .device-alerts { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; } .device-alerts p, .notify-note { color: var(--muted); font-size: 14px; margin: 0; } .device-alerts[data-state=on] p { color: var(--accent); font-weight: 500; } .device-list { display: grid; gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; } .device-list li { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; min-width: 0; } .device-list li > div { display: flex; flex-direction: column; min-width: 0; } .device-list strong { font-size: 14px; font-weight: 500; } .device-list small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; } .device-list .row-actions { flex: none; margin: -4px -8px 0 0; } .device-list form { margin: 0 !important; } .day-entry-grid { align-items: center; display: grid; gap: 8px 12px; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); } .day-entry-head { color: var(--muted); font-size: 12.5px; font-weight: 500; } .day-entry-row { display: contents; } .day-entry-row strong { font-size: 14px; font-weight: 500; } .day-entry-row[hidden] { display: none; } [data-entry-days-empty][hidden] { display: none; } .rule-preview-column { align-self: start; position: sticky; top: calc(var(--strip) + 20px); } .preview-box, .profit-preview { background: var(--dark); border-radius: var(--radius-lg); color: #fff; padding: 22px; } .preview-box { margin-bottom: 10px; } .preview-box .preview-problems ul { margin: 12px 0 0; } .preview-box .preview-problems li { display: grid; gap: 2px; justify-content: stretch; } .preview-box .preview-problems li span { color: var(--dark-muted); } .preview-overlap { background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); color: var(--amber-ink); font-size: 13.5px; margin: 14px 0 0; padding: 10px 12px; } .preview-overlap p { margin: 4px 0 0; } .preview-overlap a { color: inherit; text-decoration: underline; } .preview-box h3 { font-size: 17px; margin: 0 0 6px; } .preview-box > p, .preview-box > small { color: var(--dark-muted); display: block; font-size: 13.5px; margin: 0; } .preview-box > small { margin-top: 14px; } .preview-box ul { list-style: none; margin: 16px 0; padding: 0; } .preview-box li { border-top: 1px solid var(--dark-line); display: flex; font-size: 14px; gap: 12px; justify-content: space-between; padding: 9px 0; } .preview-box li strong { font-weight: 500; } .preview-box li span { color: var(--dark-muted); } .preview-total { border-top: 1px solid var(--dark-line); display: flex; font-size: 14px; gap: 12px; justify-content: space-between; padding: 9px 0; } .preview-total span { color: var(--dark-muted); } .sticky-actions { backdrop-filter: blur(10px); background: var(--glass); border-top: 1px solid var(--line); bottom: 0; margin: 16px -40px 0; padding: 14px 40px; position: sticky; z-index: 3; } /* --- Rules ----------------------------------------------------------------- */ .rule-ledger { overflow: hidden; } .rule-row { align-items: stretch; border-top: 1px solid var(--line); display: grid; grid-template-columns: 76px minmax(0, 1fr); } .rule-row:first-child { border-top: 0; } .rule-state { align-items: center; background: var(--surface-2); border-right: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; font-size: 12px; font-weight: 500; gap: 8px; justify-content: center; } .rule-state span { background: var(--line-strong); border-radius: 50%; height: 9px; width: 9px; } .rule-row.armed .rule-state { background: var(--accent-soft); color: var(--accent); } .rule-row.armed .rule-state span { background: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); } .rule-row.tripped .rule-state { background: var(--red-soft); color: var(--red); } .rule-row.tripped .rule-state span { background: var(--red); } .rule-row.snoozed .rule-state { background: var(--surface-2); color: var(--ink-2); } .rule-row.snoozed .rule-state span { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-2); } .rule-row.expired { opacity: .72; } .rule-row.expired .rule-state { background: var(--surface-2); color: var(--muted); } .rule-main { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 18px 20px 18px 24px; } .rule-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; } .rule-title { min-width: 0; } .rule-title h2 { font-size: 16.5px; margin: 0; overflow-wrap: anywhere; } .rule-main p { color: var(--muted); font-size: 13px; margin: 3px 0; } .rule-main .failure-detail, .rule-main .expiry-detail, .rule-main .snooze-detail { margin: 0; } .rule-owner { align-items: center; display: flex; gap: 6px; margin: 6px 0 0 !important; } .rule-owner strong { background: var(--chip); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 500; padding: 1px 8px; } .rule-owner.own strong { background: var(--accent-soft); color: var(--accent); } .rule-owner a { color: var(--accent); font-weight: 500; } .rule-scope { color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 13.5px; gap: 6px; list-style: none; margin: 0; padding: 0; } .rule-scope li { max-width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow-wrap: anywhere; padding: 3px 9px; } .rule-scope li span { color: var(--muted); margin-right: 6px; } .rule-facts { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding-top: 12px; } .rule-facts dt { color: var(--muted); font-size: 12px; } .rule-facts dd { font-size: 14.5px; font-variant-numeric: tabular-nums; font-weight: 500; margin: 2px 0 0; white-space: nowrap; } .rule-facts .wide dd { white-space: normal; } .rule-actions { flex: none; margin: -4px -8px 0 0; } .row-menu { position: relative; } .row-menu summary { border-radius: 6px; color: var(--ink-2); cursor: pointer; font-size: 11px; letter-spacing: 1px; list-style: none; padding: 7px 9px; } .row-menu summary::-webkit-details-marker { display: none; } .row-menu summary:hover, .row-menu[open] summary { background: var(--surface-2); color: var(--ink); } .row-menu-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgb(0 0 0 / .12); display: grid; min-width: 150px; padding: 4px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; } .row-menu-list form { margin: 0; } /* Panels clip their contents to their rounded corners; an open menu has to reach past them. */ .data-panel:has(.row-menu[open]), .rule-ledger:has(.row-menu[open]) { overflow: visible; } /* Pickers inside a menu keep their own buttons (see datetime-picker.js). */ .row-menu .row-menu-list a, .row-menu .row-menu-list button:not(.picker *) { background: none; border: 0; border-radius: 6px; color: var(--ink-2); display: block; font-size: 13.5px; font-weight: 500; padding: 8px 10px; text-align: left; width: 100%; } .row-menu .row-menu-list a:hover, .row-menu .row-menu-list button:not(.picker *):hover { background: var(--surface-2); color: var(--ink); } .row-menu-group { border-block: 1px solid var(--line); display: grid; gap: 4px; margin: 4px 0; padding: 6px 4px; } .row-menu-label { color: var(--muted); font-size: 12px; font-weight: 500; padding: 0 6px; } .row-menu .snooze-lengths { display: flex; gap: 2px; } .row-menu .snooze-lengths button { flex: 1; padding: 6px 8px; text-align: center; white-space: nowrap; width: auto; } .row-menu-group { min-width: 264px; } .row-menu .snooze-until { border-top: 1px solid var(--line); display: grid; gap: 6px; margin-top: 4px; padding-top: 8px; } .row-menu .snooze-when { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) 104px; padding: 0 2px; } .row-menu .snooze-when .picker-field { font-size: 13px; min-height: 36px; } .row-menu .row-menu-list button.snooze-submit { background: var(--ink); color: var(--on-ink); text-align: center; } .row-menu .row-menu-list button.snooze-submit:hover { background: var(--ink-2); color: var(--on-ink); } .row-menu-list .danger-link { color: var(--red); } .snooze-alerts summary { letter-spacing: normal; } .snooze-alerts .row-menu-group { border: 0; margin: 0; } .row-menu-list .danger-link:hover { background: var(--red-soft); } /* --- Reservations history -------------------------------------------------- */ .history-timeline { padding: 8px 28px; } .history-item { display: grid; grid-template-columns: 88px 22px 1fr; position: relative; } .history-time { padding: 18px 14px 0 0; text-align: right; } .history-time time, .history-time span { display: block; } .history-time time { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .history-time span { color: var(--faint); font-size: 12px; } .history-pin { background: var(--line-strong); border-radius: 50%; box-shadow: 0 0 0 4px var(--chip); height: 10px; margin: 25px 0 0 6px; position: relative; width: 10px; z-index: 2; } .history-item::before { background: var(--line); bottom: 0; content: ""; left: 98px; position: absolute; top: 0; width: 2px; } .history-item:first-child::before { top: 25px; } .history-item:last-child::before { bottom: auto; height: 25px; } .history-item:only-child::before { display: none; } .history-pin.active, .history-pin.purchased { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .history-pin.purchased { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); } .history-pin.failed, .history-pin.rejected, .history-pin.invalid { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); } .history-pin.pending, .history-pin.reconciling { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } .history-body { border-bottom: 1px solid var(--line); min-width: 0; padding: 16px 0 22px 12px; } .history-item:last-child .history-body { border-bottom: 0; } .history-facts { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: grid; font-size: 14px; gap: 12px 0; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 14px 0; padding: 12px 0; } .history-facts span { border-left: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; padding: 0 14px; } .history-facts span:first-child { border-left: 0; } .history-facts small { color: var(--muted); display: block; font-size: 12px; margin-bottom: 2px; } .failure-detail { background: var(--red-soft); border-radius: 8px; color: var(--red-ink); font-size: 14px; margin: 10px 0; padding: 10px 14px; } .expiry-detail, .snooze-detail { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; margin: 10px 0; padding: 10px 14px; } .history-body details { margin: 10px 0; } .history-body summary, .upstream-response summary { color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; width: max-content; } .history-body summary:hover, .upstream-response summary:hover { text-decoration: underline; text-underline-offset: 3px; } .trace { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; margin: 8px 0 0; padding: 6px 12px; } .trace div { display: grid; grid-template-columns: 140px 1fr; padding: 5px 0; } .trace dt { color: var(--muted); } .trace dd { font-family: var(--mono); font-size: 12.5px; margin: 0; overflow-wrap: anywhere; } .upstream-response { margin-top: 8px; } .upstream-response pre { background: var(--dark); border-radius: 8px; color: var(--dark-text); font-family: var(--mono); font-size: 12px; line-height: 1.5; margin: 8px 0 0; max-height: 260px; overflow: auto; padding: 12px 14px; tab-size: 2; white-space: pre-wrap; word-break: break-word; } .resale-line { align-items: center; border-top: 1px dashed var(--line-strong); display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 12px; } .resale-progress small { color: var(--muted); display: block; font-size: 12px; } .resale-progress strong { font-size: 15px; font-variant-numeric: tabular-nums; } .resale-progress.complete strong { color: var(--accent); } /* --- Filters --------------------------------------------------------------- */ .filter-inline { align-items: center; display: flex; gap: 10px; } .filter-notice { background: var(--amber-soft); border-radius: var(--radius); color: var(--amber-ink); font-size: 14px; margin: 0 0 16px; padding: 12px 16px; } .filter-notice p { margin: 0; } .filter-notice p + p { margin-top: 6px; } .log-filters { align-items: end; display: grid; gap: 14px; grid-template-columns: 170px 1fr 160px 1fr auto; margin-bottom: 18px; padding: 16px 18px; } .log-filters label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .log-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; } .collection-filters { align-items: start; display: grid; gap: 22px; grid-template-columns: 170px minmax(0, 1fr) auto; margin-bottom: 18px; padding: 18px 20px; } .filter-intro strong { font-size: 14.5px; } .filter-intro p { color: var(--muted); font-size: 13px; margin: 4px 0 0; } .filter-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); min-width: 0; } .filter-field { min-width: 0; } .filter-field label { display: block; font-size: 13px; font-weight: 500; line-height: 20px; margin-bottom: 6px; } .filter-field select[multiple] { background: var(--surface-2); min-height: 134px; padding: 4px; } .filter-field select[multiple] option { border-radius: 6px; padding: 7px 9px; } .filter-field select[multiple] option:checked { background: linear-gradient(var(--ink), var(--ink)); color: var(--on-ink); } .filter-field select[data-filter-multiselect][hidden] { display: none; } /* Until filter-multiselect.js swaps it for a dropdown, reserve the trigger's footprint instead of painting the open list box. */ .js .filter-field select[data-filter-multiselect]:not([data-dropdown-enhanced]) { height: 40px; min-height: 40px; overflow: hidden; visibility: hidden; } .filter-field small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 5px; } .filter-actions { align-self: start; display: flex; gap: 8px; margin-top: 26px; } .filter-multiselect { position: relative; } .filter-multiselect-trigger { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 1px 1px rgba(20, 23, 26, .03); display: flex; gap: 8px; min-height: 40px; padding: 8px 12px; text-align: left; transition: border-color .12s ease, box-shadow .12s ease; width: 100%; } .filter-multiselect-trigger:hover { border-color: var(--border-hover); } .filter-multiselect-trigger::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2362696f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") center / 12px no-repeat; content: ""; flex: none; height: 12px; margin-left: auto; transition: transform .15s ease; width: 12px; } .filter-multiselect.open .filter-multiselect-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-multiselect.open .filter-multiselect-trigger::after { transform: rotate(180deg); } .filter-multiselect-summary { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-multiselect[data-has-selection="true"] .filter-multiselect-summary { color: var(--ink); font-weight: 500; } .filter-multiselect-count { background: var(--ink); border-radius: 999px; color: var(--on-ink); flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 18px; min-width: 20px; padding: 0 6px; text-align: center; } .filter-multiselect-count[hidden] { display: none; } .filter-multiselect-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); left: 0; max-width: calc(100vw - 32px); min-width: 100%; overflow: hidden; position: absolute; top: calc(100% + 6px); width: max(100%, 300px); z-index: 40; } .filter-multiselect-menu[hidden] { display: none; } .filter-multiselect-menu:focus { outline: none; } .filter-multiselect-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 8px 8px 8px 14px; } .filter-multiselect-head span { color: var(--muted); font-size: 12.5px; font-weight: 500; } .filter-multiselect-clear { background: transparent; border: 0; border-radius: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; padding: 4px 8px; } .filter-multiselect-clear:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .filter-multiselect-clear:disabled { color: var(--faint); cursor: default; } .filter-multiselect-search { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238d949a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.2' cy='6.2' r='4.2'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E") 14px center / 14px no-repeat; border: 0; border-bottom: 1px solid var(--line); display: block; font-size: 14px; padding: 10px 14px 10px 36px; width: 100%; } .filter-multiselect-search:focus { outline: none; background-color: var(--surface-2); } .filter-multiselect-search::-webkit-search-cancel-button { -webkit-appearance: none; } .filter-multiselect-options { display: grid; gap: 1px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; } .filter-field .filter-multiselect-option, .filter-multiselect-option { align-items: center; border-radius: 7px; cursor: pointer; display: flex; font-size: 14px; font-weight: 400; gap: 11px; line-height: 1.3; margin: 0; padding: 8px 10px; position: relative; } .filter-multiselect-option[hidden] { display: none; } .filter-multiselect-option:hover { background: var(--surface-2); } .filter-multiselect-option:has(input:checked) { background: var(--accent-soft); } .filter-multiselect-option:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); } /* The real checkbox stays in the tab order and the accessibility tree; the drawn box beside it is what people see. */ .filter-multiselect-option input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; } .filter-multiselect-box { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 5px; flex: none; height: 17px; transition: background-color .1s ease, border-color .1s ease; width: 17px; } .filter-multiselect-option:hover .filter-multiselect-box { border-color: var(--border-hover); } .filter-multiselect-option input:checked + .filter-multiselect-box { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--accent); } .filter-multiselect-text { display: flex; flex-direction: column; min-width: 0; } .filter-multiselect-text strong { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-multiselect-text small { color: var(--muted); font-size: 12.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-multiselect-empty { color: var(--muted); font-size: 13px; margin: 0; padding: 16px 10px; text-align: center; } .filter-multiselect-empty[hidden] { display: none; } /* --- People ---------------------------------------------------------------- */ .split-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: 380px 1fr; } .split-layout .form-panel { display: block; padding: 24px; } .generated-link { background: var(--amber-soft); border-radius: var(--radius); padding: 14px 16px; } .generated-link p { color: var(--amber-ink); font-size: 13px; margin: 4px 0 10px; } .user-access { margin-top: 20px; } .user-detail-link { display: block; } .user-detail-link span { color: var(--accent); display: block; font-size: 12.5px; font-weight: 500; margin-top: 4px; } .user-detail-link:hover strong { color: var(--accent); } .user-operations-strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; } .user-operations-strip > div { border-left: 1px solid var(--line); padding: 16px 22px; } .user-operations-strip > div:first-child { border-left: 0; } .user-operations-strip span { color: var(--muted); display: block; font-size: 13px; } .user-operations-strip strong:not(.status) { display: block; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; } .user-operations-strip .status { margin-top: 8px; } .user-detail-section { margin-top: 20px; } .user-section-head { border-bottom: 1px solid var(--line); padding: 18px 20px; } .user-section-head + .table-head { border-top: 0; } /* --- Checkout -------------------------------------------------------------- */ .checkout-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 340px) minmax(0, 560px); } .checkout-summary, .checkout-panel { padding: 24px; } .checkout-summary dl { margin: 0 0 18px; } .checkout-summary dl div { border-top: 1px solid var(--line); padding: 12px 0; } .checkout-summary dl div:first-child { border-top: 0; padding-top: 0; } .checkout-summary dt { color: var(--muted); font-size: 12.5px; margin-bottom: 2px; } .checkout-summary dd { margin: 0; } .checkout-summary dd.data { font-size: 28px; font-weight: 600; letter-spacing: -.02em; } .checkout-message { color: var(--muted); font-size: 14px; margin: 0 0 16px; min-height: 1.4em; } .checkout-message:empty { display: none; } .checkout-message[data-tone] { border-radius: 8px; padding: 10px 14px; } .checkout-message[data-tone=error] { background: var(--red-soft); color: var(--red-ink); } .checkout-message[data-tone=warning] { background: var(--amber-soft); color: var(--amber-ink); } .checkout-message[data-tone=success] { background: var(--accent-soft); color: var(--accent-hover); } .checkout-element { margin-bottom: 20px; } .checkout-element:empty { margin: 0; } .checkout-panel .button + .button { margin-top: 8px; } .checkout-panel .button[hidden] { display: none; } /* The checkout queue: the hold being paid for, with the rest of the queue beside it. */ .queue-checkout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 580px) minmax(0, 340px); } .queue-step { display: grid; gap: 20px; } .queue-step-summary h2 { font-size: 22px; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; } .queue-step-when { color: var(--muted); font-size: 14px; margin: 2px 0 18px; } .queue-step-actions { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 16px; } .queue-step-actions form { margin: 0; } .queue-head { max-width: 940px; } /* Two by two, so the payment form starts nearer the top of the screen. */ .queue-step-summary dl { column-gap: 24px; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; } .queue-step-summary dl div:nth-child(2) { border-top: 0; padding-top: 0; } .queue-step-summary dd { overflow-wrap: anywhere; } .queue-notice p { color: var(--muted); font-size: 14px; margin: 0 0 18px; } .queue-notice p:last-child { margin-bottom: 0; } /* "Back to " can be long enough to need a second line. */ .queue-notice .button { overflow-wrap: anywhere; text-align: center; white-space: normal; } .queue-rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; } .queue-list { display: grid; gap: 2px; list-style: none; margin: 14px -10px 0; padding: 0; } .queue-entry { align-items: start; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 48px minmax(0, 1fr); padding: 10px; } .queue-entry.current { background: var(--accent-soft); } .queue-entry.paid, .queue-entry.gone, .queue-entry.elapsed { opacity: .65; } .queue-entry-mark { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 1px; } .queue-entry.paid .queue-entry-mark { color: var(--blue); } .queue-entry.gone .queue-entry-mark { color: var(--muted); } .queue-entry.urgent .queue-entry-clock { color: var(--red); } .queue-entry-main { display: grid; gap: 2px; min-width: 0; } .queue-entry-main > strong, .queue-entry-main > a { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .queue-entry-main > a { color: var(--ink); } .queue-entry-main > a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .queue-entry-main > span:not(.status) { color: var(--muted); font-size: 13px; } .queue-entry-main > .status { margin-top: 4px; white-space: normal; } .section-head:has(> .queue-start) { align-items: center; } .section-head > .queue-start { margin: 0 0 0 auto; } .section-head > .queue-start ~ .bulk-all { margin-left: 0; } /* --- Revenue --------------------------------------------------------------- */ .revenue-filters .filter-fields { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .revenue-filters.preset-range .field-start, .revenue-filters.preset-range .field-end { display: none; } .period-caption { align-items: baseline; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: 6px 14px; margin: 0 0 14px; } .period-caption strong { color: var(--ink); font-size: 16px; } .kpi-grid { background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; gap: 1px; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; } .kpi { background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; } .kpi > span { color: var(--muted); font-size: 13px; font-weight: 500; } .kpi > strong { font-size: 26px; letter-spacing: -.025em; line-height: 1.1; overflow-wrap: anywhere; } .kpi small { color: var(--muted); font-size: 12.5px; line-height: 1.4; } .kpi.hero { background: var(--dark); color: #fff; } .kpi.hero > span, .kpi.hero small { color: var(--dark-muted); } .kpi.hero > strong { color: var(--dark-positive); font-size: 38px; } .kpi.hero.loss > strong { color: var(--dark-negative); } .change { font-weight: 500; } .change.up { color: var(--accent); } .change.down { color: var(--red); } .kpi.hero .change.up { color: var(--dark-positive); } .kpi.hero .change.down { color: var(--dark-negative); } .chart-grid { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 20px; } .chart-card { grid-column: span 3; min-width: 0; padding: 20px 22px 18px; } .chart-card.wide { grid-column: 1 / -1; } .chart-card.third { grid-column: span 2; } .chart-card header h2 { font-size: 16px; margin: 0; } .chart-card header p { color: var(--muted); font-size: 13px; margin: 2px 0 14px; } .chart { min-height: 200px; width: 100%; } .chart svg { display: block; max-width: 100%; overflow: visible; } .chart-axis { fill: var(--faint); font-family: "Geist", system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; } .chart-value { fill: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; } .chart-hit { cursor: crosshair; outline: none; } .chart-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .chart-hit.active { fill: var(--hover); } .chart-bar { transition: opacity .12s ease; } .chart-legend { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 6px 8px; margin: -6px 0 10px; } .chart-legend .key { border-radius: 2px; display: inline-block; height: 3px; margin-left: 12px; width: 16px; } .chart-legend .key:first-child { margin-left: 0; } .chart-legend .key.revenue { background: var(--chart-gain); } .chart-legend .key.outgoings { background: var(--chart-cost); } .chart-tooltip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--ink); font-size: 13px; min-width: 160px; padding: 10px 12px; pointer-events: none; position: absolute; z-index: 50; } .chart-tooltip[hidden] { display: none; } .chart-tooltip-title { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 5px; } .chart-tooltip-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 14px auto 1fr; padding: 2px 0; } .chart-tooltip-row i { border-radius: 2px; height: 3px; width: 14px; } .chart-tooltip-row strong { font-variant-numeric: tabular-nums; font-weight: 600; } .chart-tooltip-row span { color: var(--muted); } .bar-list { display: grid; gap: 2px; } .bar-row { border-radius: 8px; display: grid; gap: 6px 12px; grid-template-columns: minmax(0, 1fr) auto; margin: 0 -8px; padding: 8px; } .bar-row:hover, .bar-row:focus-visible { background: var(--surface-2); } .bar-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-value { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; } .bar-value.negative { color: var(--red); } .bar-track { background: var(--track); border-radius: 999px; grid-column: 1 / -1; height: 6px; position: relative; } .bar-track i { background: var(--chart-gain); border-radius: 999px; height: 6px; left: 0; position: absolute; top: 0; } .bar-track.split::before { background: var(--line-strong); content: ""; height: 12px; left: 50%; position: absolute; top: -3px; width: 1px; } .bar-track.split i.gain { border-radius: 0 999px 999px 0; left: 50%; } .bar-track i.loss { background: var(--red); border-radius: 999px 0 0 999px; left: auto; right: 50%; } .bar-list-empty { color: var(--muted); font-size: 14px; margin: 20px 0; text-align: center; } .chart-table { padding: 0; } .chart-table summary { color: var(--accent); cursor: pointer; font-size: 14px; font-weight: 500; padding: 15px 22px; } .table-scroll { overflow-x: auto; } .chart-table table { border-collapse: collapse; font-size: 14px; width: 100%; } .chart-table th, .chart-table td { border-top: 1px solid var(--line); padding: 9px 22px; text-align: right; white-space: nowrap; } .chart-table th:first-child { text-align: left; } .chart-table thead th { background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 500; } .chart-table tbody th { font-weight: 500; } .chart-table td { font-variant-numeric: tabular-nums; } .chart-table .negative, .profit-cell.negative { color: var(--red); } .profit-cell.positive { color: var(--accent); } .revenue-section { margin-bottom: 20px; } .revenue-section-head { align-items: center; border-bottom: 1px solid var(--line); gap: 20px; padding: 18px 20px; } .revenue-section-head + .table-head { border-top: 0; } .stock-pointer { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 20px; padding: 16px 20px; } .stock-pointer h2 { font-size: 16px; margin: 0 0 2px; } .stock-pointer p { color: var(--muted); font-size: 14px; margin: 0; } .ledger-columns > .data { font-size: 14px; } .ledger-columns > .data small, .ledger-columns > span > small { color: var(--muted); display: block; font-family: inherit; font-size: 12px; } .passed { color: var(--amber); font-weight: 500; } .countdown { color: var(--ink-2); font-weight: 500; } .countdown.soon { color: var(--amber); } .countdown.passed { color: var(--muted); font-weight: 400; } .inventory-columns > div > .data { font-size: 14px; } .inventory-columns .row-actions form { display: contents; } /* Every action here is a real button: stack them at one width, lined up with the row. */ .inventory-columns > .row-actions { align-items: stretch; flex-direction: column; gap: 6px; margin-left: 0; } .row-detail { grid-column: 1 / -1; margin-top: -6px; } .row-detail summary { color: var(--muted); cursor: pointer; font-size: 13px; } .row-detail summary:hover { color: var(--ink); } .row-detail-body { display: grid; gap: 14px; padding: 12px 0 4px; } .inventory-sales { display: grid; font-size: 13.5px; gap: 4px; list-style: none; margin: 0; padding: 0; } .expected-price-form { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 10px; } .expected-price-form label { font-size: 13px; font-weight: 500; } .expected-price-form input { max-width: 120px; } .expected-price-form small { color: var(--muted); flex-basis: 100%; font-size: 12.5px; } /* --- Bulk selection -------------------------------------------------------- Tick rows, then act on them together from a bar that follows the reader down the list. The bar sits after the rows so it can stick to the bottom edge. */ .bulk-check { align-items: center; color: var(--muted); cursor: pointer; display: inline-flex; font-size: 13.5px; gap: 6px; } .bulk-check:hover { color: var(--ink); } .bulk-all { margin-left: auto; white-space: nowrap; } .bulk-check input, .bulk-cell input { accent-color: var(--accent); cursor: pointer; flex: none; height: 17px; margin: 0; width: 17px; } .bulk-check input:disabled { cursor: not-allowed; } .bulk-cell { align-items: flex-start; display: flex; gap: 12px; min-width: 0; } .table-head .bulk-cell { align-items: center; } .bulk-cell > div { min-width: 0; } .table-row.is-selected, .hold-card.is-selected { background: var(--accent-soft); } .bulk-bar { align-items: center; backdrop-filter: blur(10px); background: var(--glass); border-top: 1px solid var(--line); bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 12px 20px; position: sticky; z-index: 3; } .bulk-bar[hidden] { display: none; } /* hidden would make the panel its own scroller, and the bar would stop sticking. */ .data-panel[data-bulk] { overflow: clip; } .bulk-bar strong { font-size: 14px; font-weight: 600; margin-right: auto; } .bulk-bar form { margin: 0; } .hold-section .bulk-bar { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; } .bulk-quantities { border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 14px; margin: 0; padding: 14px 16px 16px; } .bulk-quantities legend { font-size: 14px; font-weight: 600; padding: 0 6px; } .form-note { background: var(--amber-soft); border-radius: var(--radius-sm); color: var(--amber-ink); font-size: 13.5px; margin: 0; padding: 9px 12px; } .segmented { background: var(--chip); border-radius: 9px; display: inline-flex; gap: 2px; padding: 3px; } .segmented label { cursor: pointer; margin: 0; position: relative; } .segmented input { opacity: 0; position: absolute; } .segmented span { border-radius: 7px; color: var(--muted); display: block; font-size: 14px; font-weight: 500; padding: 6px 14px; } .segmented label:hover span { color: var(--ink); } .segmented input:checked + span { background: var(--surface); box-shadow: 0 1px 2px rgba(20, 23, 26, .1), 0 0 0 1px var(--hover); color: var(--ink); } .segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } .profit-preview { height: max-content; position: sticky; top: calc(var(--strip) + 20px); } .profit-preview .kicker { color: #fff; font-size: 16px; font-weight: 600; margin: 0; } .profit-preview dl { margin: 12px 0 16px; } .profit-preview dl div { border-top: 1px solid var(--dark-line); display: flex; font-size: 14px; gap: 12px; justify-content: space-between; padding: 9px 0; } .profit-preview dt { color: var(--dark-muted); } .profit-preview dd { margin: 0; text-align: right; } .preview-math { background: var(--dark-2); border-radius: var(--radius); padding: 6px 14px; } .preview-math div { display: flex; justify-content: space-between; padding: 7px 0; } .preview-math span { color: var(--dark-muted); font-size: 14px; } .preview-math strong { font-size: 16px; font-weight: 500; } .preview-profit { border-top: 1px solid var(--dark-line); margin-top: 4px; padding-top: 12px !important; } .preview-profit strong { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.02em; } .preview-profit[data-sign=gain] strong { color: var(--dark-positive); } .preview-profit[data-sign=loss] strong { color: var(--dark-negative); } .preview-note { color: var(--dark-muted); font-size: 13px; margin: 12px 0 0; } /* --- Sign in and recovery -------------------------------------------------- */ .auth-shell { background: var(--canvas); display: grid; grid-template-columns: minmax(440px, 580px) 1fr; min-height: 100vh; } .auth-panel { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(32px, 6vw, 88px) 48px; position: relative; } .auth-brand { align-items: center; display: flex; gap: 11px; left: clamp(32px, 6vw, 88px); position: absolute; top: 36px; } .auth-brand .brand-mark::after { border-color: var(--surface); } .auth-brand strong, .auth-brand small { display: block; } .auth-brand strong { font-size: 15px; line-height: 1.2; } .auth-brand small { color: var(--muted); font-size: 12.5px; } .auth-copy > p:first-child { color: var(--accent); font-size: 14px; font-weight: 500; margin: 0; } .auth-copy h1 { font-size: 34px; letter-spacing: -.03em; line-height: 1.12; margin: 8px 0 10px; max-width: 18ch; } .auth-copy > p:last-child { color: var(--muted); margin: 0; max-width: 44ch; } .auth-form { margin-top: 30px; max-width: 420px; } .fine-print { color: var(--muted); font-size: 13px; margin-top: 28px; max-width: 420px; } .auth-visual { align-items: center; display: flex; justify-content: center; overflow: hidden; padding: 48px; } .stub { background: var(--dark); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(20, 23, 26, .45); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 150px; max-width: 560px; min-height: 260px; transform: rotate(-4deg); width: 100%; /* The punched notches either side of the tear line */ -webkit-mask: radial-gradient(circle 14px at calc(100% - 150px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at calc(100% - 150px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 14px at calc(100% - 150px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at calc(100% - 150px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; } .stub small { color: var(--dark-muted); display: block; font-size: 13px; } .stub-main { display: flex; flex-direction: column; padding: 32px 34px; } .stub-main strong { font-size: 44px; letter-spacing: -.035em; line-height: 1; margin-top: 6px; } .stub-main p { color: var(--dark-muted); font-size: 14px; margin: auto 0 0; max-width: 34ch; padding-top: 28px; } .stub-tear { background: repeating-linear-gradient(var(--dark-line) 0 6px, transparent 6px 12px) left / 1px 100% no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 24px; } .stub-tear strong { color: var(--dark-positive); font-size: 16px; margin-top: 4px; } /* --- Not found ------------------------------------------------------------- */ .not-found-panel { display: grid; grid-template-columns: 240px minmax(0, 1fr); margin-top: 6vh; max-width: 900px; min-height: 340px; overflow: hidden; } .not-found-signal { background: var(--dark); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 34px; } .not-found-signal strong { font-size: 84px; letter-spacing: -.06em; line-height: .9; } .not-found-signal span { color: var(--dark-muted); font-size: 14px; margin-top: 12px; } .not-found-signal i { background: repeating-linear-gradient(90deg, var(--dark-line) 0 6px, transparent 6px 12px); height: 1px; margin-top: 28px; width: 100%; } .not-found-copy { align-self: center; padding: 48px 52px; } .not-found-copy h1 { font-size: 28px; letter-spacing: -.025em; line-height: 1.15; margin: 0; } .not-found-copy > p { color: var(--muted); margin: 10px 0 24px; max-width: 48ch; } .not-found-actions { display: flex; flex-wrap: wrap; gap: 8px; } .not-found-auth { align-items: center; background: var(--canvas); display: flex; justify-content: center; min-height: 100vh; padding: 6vw; } .not-found-auth .not-found-panel { margin: 0; width: min(900px, 100%); } /* --- Mobile shell ---------------------------------------------------------- */ .nav-toggle { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); display: flex; font-size: 13.5px; font-weight: 500; gap: 8px; padding: 6px 11px; } .nav-toggle:hover { background: var(--surface-2); } .nav-toggle-bars { display: grid; gap: 3px; width: 14px; } .nav-toggle-bars i { background: currentColor; border-radius: 1px; display: block; height: 1.5px; width: 100%; } .nav-backdrop { background: var(--backdrop); inset: 0; position: fixed; z-index: 20; } .tab-bar { display: none; } .nav-backdrop[hidden] { display: none; } .install-app[hidden] { display: none; } .nav-back { align-items: center; color: var(--ink); display: flex; font-size: 15px; font-weight: 500; gap: 2px; margin-left: -8px; min-height: 40px; padding: 0 10px 0 4px; } .nav-back[hidden] { display: none; } .nav-back svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 22px; } .nav-back:not([hidden]) + .brand { display: none; } .strip-back { font-size: 13.5px; min-height: 32px; } .strip-back svg { height: 18px; width: 18px; } /* No browser chrome in the installed app, so page loads get their own indicator. */ .nav-progress { background: var(--accent); height: 2px; left: 0; opacity: 0; pointer-events: none; position: fixed; top: env(safe-area-inset-top, 0px); transform: scaleX(0); transform-origin: left; width: 100%; z-index: 50; } .nav-progress.active { animation: nav-progress 8s cubic-bezier(.1, .7, .2, 1) forwards; opacity: 1; } @keyframes nav-progress { from { transform: scaleX(0); } to { transform: scaleX(.92); } } /* --- Phone app ------------------------------------------------------------ */ .alert-setup { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); margin-bottom: 20px; padding: 16px 48px 16px 18px; position: relative; } .alert-setup[hidden], .alert-setup [hidden] { display: none; } .alert-setup strong { display: block; font-size: 15px; } .alert-setup p { color: var(--ink-2); font-size: 14px; margin: 4px 0 12px; } .alert-setup > div > p:last-child { margin-bottom: 0; } .alert-setup .message-dismiss { position: absolute; right: 10px; top: 10px; } .offline-shell { background: var(--canvas); display: grid; min-height: 100vh; padding: 24px 16px; place-items: center; } .offline-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); max-width: 380px; padding: 32px 24px; text-align: center; } .offline-panel .brand-mark { margin-bottom: 16px; } .offline-panel .brand-mark::after { display: none; } .offline-panel h1 { font-size: 22px; margin: 0 0 6px; } .offline-panel p { color: var(--muted); margin: 0 0 20px; } .offline-panel .button { border-radius: 12px; font-size: 16px; font-weight: 600; min-height: 52px; } /* Paying is the one action a hold exists for; make it hard to miss. */ .checkout-panel [data-confirm-payment] { font-size: 16px; font-weight: 600; min-height: 52px; } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 1250px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Intro, fields and buttons no longer fit on one row; stack them. */ .collection-filters { gap: 14px; grid-template-columns: minmax(0, 1fr); } .filter-intro p { display: inline; margin-left: 8px; } .filter-actions { margin-top: 0; } } /* Below this the fixed inventory columns no longer leave room for an actions column, so the actions move to their own line under the row. */ @media (max-width: 1400px) { .inventory-columns { grid-template-columns: minmax(0, 1.6fr) 80px 104px 84px 124px 88px 112px; } .inventory-columns > .row-actions { align-items: center; flex-direction: row; flex-wrap: wrap; grid-column: 1 / -1; justify-content: flex-start; } .table-head.inventory-columns > :last-child { display: none; } } @media (max-width: 1050px) { :root { --rail: 220px; } .control-grid { grid-template-columns: 1fr; } .action-panel { order: 2; } .account-columns { grid-template-columns: 1.4fr 140px 110px 80px; } .account-columns .row-actions { grid-column: 1 / -1; justify-content: flex-start; margin-left: -8px; } .history-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .history-facts span:nth-child(4) { border-left: 0; } .log-filters { grid-template-columns: 1fr 1fr; } .log-columns { grid-template-columns: 100px 1fr 100px 100px; } .audit-columns { grid-template-columns: 130px minmax(0, 1fr) 140px minmax(0, 1fr); } .audit-columns > :nth-child(5), .audit-columns > :nth-child(6) { grid-column: 1 / -1; } .log-columns > *:nth-child(5), .log-columns > *:nth-child(6) { display: none; } /* The correlation column is hidden here, so its link stays as an invisible layer over the row. */ .log-columns > .row-link { align-self: stretch; display: block; inset: 0; justify-self: stretch; position: absolute; } .log-columns > .row-link > * { display: none; } .split-layout { grid-template-columns: 1fr; } .auth-visual { display: none; } .auth-shell { grid-template-columns: 1fr; } .auth-panel { border-right: 0; min-height: 100vh; } /* minmax(0, …): a bare 1fr column grows to fit unbreakable content and pushes the page wider than the screen. */ .checkout-layout, .queue-checkout { grid-template-columns: minmax(0, 1fr); } .chart-grid { grid-template-columns: 1fr; } .chart-card, .chart-card.third { grid-column: 1 / -1; } .ledger-columns { grid-template-columns: 90px minmax(0, 1.6fr) 52px 92px 100px 116px; } .ledger-columns > :nth-child(3), .ledger-columns > :nth-child(6) { display: none; } .inventory-columns { grid-template-columns: minmax(0, 1.6fr) 80px 84px 124px 112px; } .inventory-columns > :nth-child(3), .inventory-columns > :nth-child(6) { display: none; } } /* Five inventory columns stop fitting well before the phone layout starts (the event name collapses to nothing), so inventory switches to stacked cards early. */ @media (max-width: 900px) { .table-head.inventory-columns { display: none; } .table-row.inventory-columns { align-items: start; gap: 8px 14px; grid-template-columns: 1fr auto; padding: 16px; } .inventory-columns > * { grid-column: 1; } .inventory-columns > .status { grid-column: 2; grid-row: 1; } .inventory-columns > :nth-child(3), .inventory-columns > :nth-child(6) { display: block; } } @media (max-width: 760px) { .hold-section { padding: 16px 14px; } .hold-card { grid-template-areas: "art main" "clock pay" "warn warn" "more more"; grid-template-columns: 64px minmax(0, 1fr); padding: 12px 12px 0; row-gap: 12px; } .hold-clock { height: 64px; width: 64px; } .hold-seconds { font-size: 15px; } .hold-pay { align-items: center; column-gap: 12px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; } .hold-pay small { grid-column: 1; } .hold-pay strong { grid-column: 1; margin: 0; } .hold-pay > a, .hold-pay > form { grid-column: 2; grid-row: 1 / 3; justify-self: stretch; } .hold-pay-button { min-height: 48px; width: 100%; } .hold-warning { margin-top: 0; } .hold-more { margin-top: 12px; } .section-head:has(> .queue-start) { flex-wrap: wrap; } .section-head > .queue-start { flex-basis: 100%; order: 5; } .section-head > .queue-start ~ .bulk-all { margin-left: auto; } .queue-start .button { min-height: 44px; width: 100%; } } @media (max-width: 760px) { :root { --strip: 44px; --tab-bar: 56px; --tab-bar-space: calc(var(--tab-bar) + env(safe-area-inset-bottom)); } .app-shell { margin-left: 0; } .rail { background: var(--surface); box-shadow: var(--shadow-pop); height: 100dvh; overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease; width: min(84vw, 300px); z-index: 30; } .brand-mark::after { border-color: var(--surface); } body.nav-open .rail { transform: none; } body.nav-open { overflow: hidden; } body.nav-open .nav-backdrop { animation: fade-in .22s ease; } .rail { overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); padding-top: calc(18px + env(safe-area-inset-top)); } .rail nav { margin-top: 26px; } /* The app bar holds the way back and the menu, so it stays in reach while reading. */ .mobile-bar { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; height: 56px; justify-content: space-between; padding: 8px 16px; position: sticky; top: 0; z-index: 5; } .system-strip { position: static; } .strip-back { display: none; } .mobile-bar .brand { padding: 0; } .mobile-bar .brand strong { font-size: 15px; } .mobile-bar .brand-mark { border-radius: 8px; font-size: 15px; height: 30px; width: 30px; } /* The More tab opens the menu on phones. */ .mobile-bar .nav-toggle { display: none; } .mobile-bar, .tab-bar, .rail nav, .system-strip { -webkit-user-select: none; user-select: none; } .mobile-bar a, .tab-bar a, .rail nav a { -webkit-touch-callout: none; } .tab-bar { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); background: var(--glass); border-top: 1px solid var(--line); bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); position: fixed; right: 0; transition: transform .2s ease; z-index: 15; } .tab-bar a, .tab-bar button { align-items: center; background: none; border: 0; color: var(--muted); display: flex; flex-direction: column; font-size: 11px; font-weight: 500; gap: 3px; height: var(--tab-bar); justify-content: center; letter-spacing: .01em; padding: 0; transition: color .12s ease, transform .1s ease; } .tab-bar a:active, .tab-bar button:active { transform: scale(.92); } .tab-bar [aria-current=page], .tab-bar [aria-expanded=true] { color: var(--ink); } .tab-icon { display: grid; height: 26px; place-items: center; position: relative; width: 44px; } .tab-bar [aria-current=page] .tab-icon { background: var(--accent-soft); border-radius: 999px; } .tab-bar svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 22px; } .tab-bar [aria-current=page] svg { stroke: var(--accent); stroke-width: 2; } .tab-bar .nav-count { font-size: 10.5px; height: 17px; left: 50%; min-width: 17px; padding: 0 5px; position: absolute; top: -4px; } body.keyboard-open .tab-bar { transform: translateY(100%); } body.keyboard-open { --tab-bar-space: 0px; } /* Taps answer at once, as there is no hover to preview them. */ .button:active:not(:disabled), .nav-back:active, .theme-toggle:active, .live-toggle:active { transform: scale(.97); } .button { transition: background-color .12s ease, border-color .12s ease, transform .1s ease; } a.table-row:active, .rail nav a:active { background: var(--hover); } /* iOS zooms into any field set below 16px when it takes focus. */ input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } .system-strip { gap: 12px; padding: 0 16px; } .strip-window { display: none; } .live-toggle span { display: none; } .live-toggle { padding: 6px 8px; } main#main-content { padding: 24px 16px calc(40px + var(--tab-bar-space)); } .messages { left: 16px; right: 16px; top: calc(56px + var(--strip) + 10px); } .message { max-width: none; } .page-head { align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; } .page-head h1 { font-size: 26px; } .page-head p { font-size: 14px; } .page-head .button { white-space: nowrap; } .head-metrics { width: 100%; } .head-metrics div { flex: 1; min-width: 0; } .head-actions { flex-wrap: wrap; } .work-status { grid-template-columns: 1fr 1fr; } .work-status > div { padding: 14px 16px; } .work-status > div:first-child { border-bottom: 1px solid var(--dark-line); grid-column: 1 / -1; } .work-status > div:nth-child(2) { border-left: 0; } .control-grid { gap: 16px; } .queue-panel, .action-panel, .recent-strip { padding: 18px; } .queue-panel > .pagination { margin: 12px -18px -18px; padding: 10px 18px; } .timeline-item { grid-template-columns: 40px 16px 1fr; } .timeline-item::before { left: 46px; } .compact-row { grid-template-columns: 76px 1fr auto; } .compact-row > span:nth-child(3), .compact-row > span:nth-child(5) { display: none; } .table-head { display: none !important; } .table-row, .account-columns, .log-columns, .audit-columns, .invite-columns, .access-columns, .user-account-columns, .user-rule-columns, .user-reservation-columns, .ledger-columns, .inventory-columns, .operation-columns, .step-columns { align-items: start; display: grid; gap: 8px 14px; grid-template-columns: 1fr auto; padding: 16px; } .table-row > * { grid-column: 1; } .table-row > .status { grid-column: 2; grid-row: 1; } .log-columns > *:nth-child(5), .log-columns > *:nth-child(6) { display: none; } .log-columns > .row-link { align-self: auto; display: inline-flex; justify-self: start; position: static; } .log-columns > .row-link > * { display: revert; } .operation-columns > *:nth-child(6), .step-columns > .stage-tag { display: none; } .operation-columns > *:nth-child(5), .step-columns > *:nth-child(5) { text-align: left; } .operation-pipeline { grid-template-columns: 1fr 1fr; } .waterfall { --wf-label: 150px; --wf-gutter: 16px; } .wf-jumps { margin-left: 0; } .wf-tick.minor { visibility: hidden; } .wf-label-col { padding: 0 8px 0 12px; } .wf-row .step-method { flex-basis: 34px; } .wf-value:not(:has(.wf-failed)) { display: none; } /* With the header row hidden, each sale becomes a card: event and profit on top, then a labelled grid of the remaining figures. */ .table-row.ledger-columns { grid-template-areas: "event event profit" "sold via qty" "price costs ." "actions actions actions"; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .ledger-columns > :nth-child(3), .ledger-columns > :nth-child(6) { display: block; } .ledger-columns > :nth-child(1) { grid-area: sold; } .ledger-columns > :nth-child(2) { grid-area: event; } .ledger-columns > :nth-child(3) { grid-area: via; } .ledger-columns > :nth-child(4) { grid-area: qty; } .ledger-columns > :nth-child(5) { grid-area: price; } .ledger-columns > :nth-child(6) { grid-area: costs; } .ledger-columns > .profit-cell { font-size: 16px; grid-area: profit; text-align: right; } .ledger-columns > .row-actions { grid-area: actions; } .ledger-columns > [data-label]::before { color: var(--muted); content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; margin-bottom: 2px; } .inventory-columns > :nth-child(3), .inventory-columns > :nth-child(6) { display: block; } .row-actions { justify-content: flex-start; margin-left: -8px; } .form-panel, .form-panel.single { display: block; padding: 20px; } .form-panel aside { margin-top: 24px; } .field-weekdays > div { grid-template-columns: 1fr 1fr; } .rule-form-section, .settings-form-section { display: block; padding: 22px 0; } .rule-form-section header, .settings-form-section header { margin-bottom: 16px; } .policy-fields, .time-fields { grid-template-columns: 1fr; } .rule-preview-column, .profit-preview { position: static; } .day-entry-grid { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); } .sticky-actions { bottom: var(--tab-bar-space); margin: 16px -16px 0; padding: 12px 16px; } .bulk-bar { bottom: var(--tab-bar-space); padding: 12px 16px; } .bulk-bar .button { min-height: 44px; } .rule-row { grid-template-columns: 56px minmax(0, 1fr); } .rule-main { padding: 16px; } .rule-facts { display: grid; gap: 10px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rule-facts .wide { grid-column: 1 / -1; } .history-timeline { padding: 4px 14px; } .history-item { grid-template-columns: 48px 18px 1fr; } .history-time { padding-right: 8px; } .history-time time { font-size: 14px; } .history-pin { margin-left: 3px; } .history-item::before { left: 55px; } .history-body { padding-left: 8px; } .history-facts { grid-template-columns: 1fr 1fr; } .history-facts span:nth-child(odd) { border-left: 0; } .history-facts span:nth-child(4) { border-left: 1px solid var(--line); } .trace div { display: block; } .log-filters { grid-template-columns: 1fr; } .collection-filters { display: block; } .filter-fields { grid-template-columns: 1fr !important; margin: 14px 0; } .filter-actions { margin-top: 0; } .filter-actions .button { flex: 1; } .filter-multiselect-menu { width: 100%; } .pagination { align-items: stretch; flex-direction: column; gap: 10px; } .pagination-controls { justify-content: space-between; } .split-layout { display: block; } .split-layout > * { margin-bottom: 16px; } .user-operations-strip { grid-template-columns: 1fr 1fr; } .user-operations-strip > div { padding: 14px 16px; } .user-operations-strip > div:nth-child(3) { border-left: 0; } .user-operations-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } .checkout-summary, .checkout-panel { padding: 18px; } .checkout-summary .countdown { font-size: 20px; } /* Kept in reach of the thumb while the card form scrolls past. */ .checkout-panel [data-confirm-payment] { border-radius: 12px; bottom: calc(12px + var(--tab-bar-space)); box-shadow: var(--shadow-pop); font-size: 17px; min-height: 56px; position: sticky; z-index: 3; } .checkout-panel [data-checkout-done] { min-height: 48px; } .item-actions .checkout-actions { width: 100%; } .queue-step-summary h2 { font-size: 20px; } .queue-step-actions .button { min-height: 44px; } .queue-step-actions .table-action, .queue-step-actions .hold-ignore { display: inline-flex; align-items: center; min-height: 44px; } .queue-notice .button { min-height: 48px; } .queue-rail { padding: 16px; } .queue-list { margin: 10px -8px 0; } .queue-entry { gap: 10px; grid-template-columns: 44px minmax(0, 1fr); padding: 10px 8px; } .queue-entry-main > a { padding: 4px 0; } .item-actions .checkout-actions .button { flex: 1; font-size: 15px; min-height: 48px; } .item-actions .checkout-actions .button.primary { font-weight: 600; } .timeline-item .countdown { font-size: 16px; } .system-strip:has(.install-app:not([hidden])) .strip-clock { display: none; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi.hero { grid-column: 1 / -1; } .kpi:last-child:nth-child(even) { grid-column: 1 / -1; } .kpi > strong { font-size: 22px; } .kpi.hero > strong { font-size: 32px; } .chart-card { padding: 16px 14px; } .revenue-section-head { align-items: flex-start; flex-direction: column; } .stock-pointer { align-items: flex-start; flex-direction: column; } .auth-panel { justify-content: flex-start; padding: 104px 20px 36px; } .auth-brand { left: 20px; top: 28px; } .auth-copy h1 { font-size: 28px; } .not-found-panel { display: block; margin-top: 2vh; min-height: 0; } .not-found-signal { min-height: 150px; padding: 24px; } .not-found-signal strong { font-size: 60px; } .not-found-copy { padding: 28px 22px 32px; } .not-found-copy h1 { font-size: 24px; } .not-found-actions .button { width: 100%; } .not-found-auth { padding: 16px; } } /* Installed app: clear the notch, and behave like an app rather than a web page. */ @media (display-mode: standalone) { .mobile-bar { height: auto; min-height: 56px; padding-top: max(8px, env(safe-area-inset-top)); } /* No rubber-banding past the app bar; pull-to-refresh (pwa.js) stands in for the browser's. */ html, body { overscroll-behavior-y: none; } } @media (display-mode: standalone) and (min-width: 761px) { main#main-content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } @media (display-mode: standalone) and (max-width: 760px) { .messages { top: calc(56px + env(safe-area-inset-top) + var(--strip) + 10px); } } .pull-refresh { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-pop); color: var(--muted); display: flex; height: 38px; justify-content: center; left: 50%; opacity: 0; pointer-events: none; position: fixed; top: calc(env(safe-area-inset-top) + 40px); transform: translate(-50%, 0); width: 38px; z-index: 25; } .pull-refresh.settling { transition: transform .25s ease, opacity .25s ease; } .pull-refresh.ready { color: var(--accent); } .pull-refresh svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 20px; } .pull-refresh.refreshing svg { animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in { from { opacity: 0; } } /* Rule editor: what to watch. */ .rule-editor [hidden] { display: none !important; } .target-search { position: relative; } .field .target-search input[type=search] { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238d949a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.2' cy='6.2' r='4.2'/%3E%3Cpath d='m9.5 9.5 3 3'/%3E%3C/svg%3E") 13px center / 15px no-repeat; font-size: 15px; min-height: 46px; padding-left: 38px; padding-right: 40px; } .target-spinner { animation: spin .7s linear infinite; border: 2px solid var(--line-strong); border-radius: 50%; border-top-color: var(--accent); height: 16px; position: absolute; right: 14px; top: 15px; width: 16px; } .target-results { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); left: 0; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; } .target-group { color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; margin: 8px 8px 4px; text-transform: uppercase; } .target-option { align-items: center; border-radius: var(--radius-sm); cursor: pointer; display: flex; gap: 11px; padding: 8px; } .target-option:hover, .target-option[aria-selected=true] { background: var(--hover); } .target-option[aria-selected=true] { box-shadow: inset 0 0 0 1px var(--accent-border); } .target-option-text, .target-card-text, .ticket-text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .target-option-text strong, .target-card-text strong, .ticket-text strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .target-option-text small, .target-card-text small, .ticket-text small { color: var(--muted); font-size: 12.5px; margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .target-thumb { background: var(--chip); border-radius: var(--radius-sm); flex: none; height: 40px; object-fit: cover; width: 40px; } .target-thumb.placeholder { align-items: center; color: var(--muted); display: inline-flex; font-weight: 600; justify-content: center; } .target-thumb.placeholder.kind-event { background: var(--accent-soft); color: var(--accent); } .target-thumb.placeholder.kind-venue { background: var(--blue-soft); color: var(--blue); } .target-empty { color: var(--muted); font-size: 14px; margin: 0; padding: 12px 10px; } .target-empty.inline { background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 12px 14px; } .target-empty[data-tone=error] { background: var(--red-soft); border-color: transparent; color: var(--red-ink); } .target-empty[data-tone=warning] { background: var(--amber-soft); border-color: var(--amber-border); border-style: solid; color: var(--amber-ink); } .pick-mode { border: 0; display: grid; gap: 8px; margin: 0 0 14px; padding: 0; } .pick-mode legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; } .field .pick-mode-choice { align-items: flex-start; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; display: flex; font-weight: 500; gap: 10px; margin: 0; padding: 10px 12px; } .pick-mode-choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } .pick-mode-choice input { margin-top: 2px !important; } .pick-mode-choice small { color: var(--muted); display: block; font-size: 12.5px; font-weight: 400; margin-top: 2px; } .target-card { align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); display: flex; gap: 12px; padding: 10px 12px; } .target-card .target-thumb { height: 52px; width: 52px; } .target-card-text strong { display: -webkit-box; font-size: 15.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; } /* Ticket names carry the entry time or release, so they wrap rather than truncate. */ .ticket-text strong, .ticket-text small { overflow-wrap: anywhere; white-space: normal; } .kind-chip { align-self: flex-start; background: var(--surface); border-radius: 999px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-bottom: 2px; padding: 1px 8px; text-transform: uppercase; } .kind-chip.kind-venue { color: var(--blue); } .kind-chip.kind-organiser { color: var(--ink-2); } .target-status { color: var(--muted); font-size: 13px; margin: 6px 0 0; } .target-status:empty { display: none; } .field small.target-hint { margin: 0 0 10px; } .target-event-list { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; } /* Ticket boards open under ticked events: let the page scroll rather than a box inside it. */ .target-event-list:has(.event-ticket-board:not([hidden])) { max-height: none; overflow: visible; } .field .target-event { padding: 8px 12px; } .target-event .target-thumb { height: 34px; width: 34px; } .target-event.is-missing { opacity: .7; } .target-event-item { display: flex; flex-direction: column; gap: 8px; } .event-ticket-board { border-left: 2px solid var(--accent-border); margin-left: 20px; padding: 2px 0 6px 14px; } .event-ticket-board .target-group { margin: 2px 0 0; } .target-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ticket-board { display: flex; flex-direction: column; gap: 8px; } .ticket-summary { background: var(--surface-2); border-radius: 8px; font-size: 13.5px; margin: 0; padding: 9px 12px; } .ticket-summary strong { font-weight: 600; } .ticket-picks { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; } .ticket-pick { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; display: flex; gap: 10px; padding: 6px 8px 6px 12px; transition: border-color .12s ease, background-color .12s ease; } .ticket-pick:hover { border-color: var(--border-hover); } .ticket-pick.is-picked { background: var(--accent-soft); border-color: var(--accent-border); } .ticket-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .field .ticket-pick-main { align-items: center; cursor: pointer; display: flex; flex: 1; font-weight: 400; gap: 10px; margin: 0; min-width: 0; padding: 4px 0; } .ticket-pick-main input:focus-visible { outline: none; } .ticket-rank { align-items: center; background: var(--accent); border-radius: 50%; color: var(--on-ink); display: inline-flex; flex: none; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; height: 22px; justify-content: center; width: 22px; } .ticket-state { border-radius: 999px; flex: none; font-size: 11.5px; font-weight: 500; padding: 2px 8px; white-space: nowrap; } .ticket-state.state-available { background: var(--accent-soft); color: var(--accent); } .ticket-pick.is-picked .ticket-state.state-available { background: var(--surface); } .ticket-state.state-sold_out, .ticket-state.state-ended { background: var(--red-soft); color: var(--red); } .ticket-state.state-upcoming { background: var(--amber-soft); color: var(--amber); } .ticket-state.state-locked, .ticket-state.state-missing { background: var(--chip); color: var(--muted); } .ticket-move { display: flex; flex: none; gap: 2px; } .ticket-move button { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; display: inline-flex; font-size: 15px; height: 32px; justify-content: center; padding: 0; width: 32px; } .ticket-move button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-hover); } .ticket-move button:disabled { cursor: default; opacity: .35; } .ticket-move button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .rule-target { align-items: center; color: var(--muted); display: flex; font-size: 13.5px; gap: 7px; margin: 2px 0 0; min-width: 0; } .rule-target > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rule-target .kind-chip { background: var(--chip); margin: 0; } @media (max-width: 760px) { .ticket-pick { flex-wrap: wrap; } .field .ticket-pick-main { flex-basis: 100%; } .ticket-pick .ticket-state { margin-left: 32px; } .ticket-move { margin-left: auto; } .ticket-move button { height: 40px; width: 40px; } } /* Moving between pages on a phone: the bars stay put and the page slides in, as an app would. */ @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .mobile-bar { view-transition-name: app-bar; } .tab-bar { view-transition-name: tab-bar; } ::view-transition-old(root) { animation: page-out .16s ease-in both; } ::view-transition-new(root) { animation: page-in .22s cubic-bezier(.2, .8, .2, 1) both; } } @keyframes page-out { to { opacity: 0; } } @keyframes page-in { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } } /* --- Workers ---------------------------------------------------------------- */ .worker-section { margin-bottom: 20px; } .worker-section .user-section-head h2 { font-size: 16px; margin: 0; } .worker-section .user-section-head p { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; } .worker-section .user-section-head.section-head { align-items: center; flex-wrap: wrap; } .worker-strip strong small, .concurrency-strip strong small { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; } .worker-strip small, .concurrency-strip small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 6px; } .worker-strip strong small, .concurrency-strip strong small { display: inline; } .worker-strip .status { font-size: 12px; } .concurrency-strip { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; } .worker-columns { grid-template-columns: minmax(0, 1.4fr) 120px 130px 140px 100px 140px; } .schedule-columns { align-items: start; grid-template-columns: minmax(0, 1.5fr) 110px minmax(0, 1.2fr) 90px 150px 150px; } .schedule-columns > .status { margin-top: 1px; } .task-columns { grid-template-columns: minmax(0, 1.4fr) 70px 100px 150px 150px minmax(0, 1fr); } .task-results { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; } .running-columns { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; } .running-columns > .data { text-align: right; } .cell-label { display: none; } .run-error { font-family: var(--mono); font-size: 12px !important; overflow-wrap: anywhere; } .worker-pair { align-items: start; display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .run-history { grid-column: 1 / -1; margin-top: -4px; } .run-history summary { color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; } .run-history ol { display: grid; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; } .run-history li { align-items: baseline; display: grid; font-size: 13px; gap: 12px; grid-template-columns: 64px 130px 72px minmax(0, 1fr); } .run-history li .status { font-size: 11.5px; justify-self: start; padding: 1px 7px; } .run-history li small { margin: 0; overflow-wrap: anywhere; } .concurrency-advice { display: grid; gap: 8px; list-style: none; margin: 0; padding: 16px 20px; } .concurrency-advice:empty { display: none; } .concurrency-advice li { border-radius: 8px; font-size: 14px; padding: 10px 14px; } .concurrency-advice li.warn { background: var(--amber-soft); color: var(--amber-ink); } .concurrency-advice li.info { background: var(--blue-soft); color: var(--blue); } .concurrency-advice li.ok { background: var(--accent-soft); color: var(--accent-hover); } .concurrency-advice li.neutral { background: var(--surface-2); color: var(--ink-2); } .concurrency-panel { max-width: none; scroll-margin-top: 80px; } .concurrency-panel .panel-heading + p { margin-bottom: 0; } .concurrency-panel input[type=number] { max-width: 180px; } @media (max-width: 1050px) { .worker-pair { gap: 0; grid-template-columns: 1fr; } .task-columns { grid-template-columns: minmax(0, 1.4fr) 60px 90px 140px 140px; } .task-columns > :nth-child(6) { display: none; } } @media (max-width: 760px) { .worker-columns, .schedule-columns, .task-columns, .running-columns { align-items: start; gap: 6px 14px; grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; } .worker-columns > *, .schedule-columns > *, .task-columns > * { grid-column: 1; } .worker-columns > .status, .schedule-columns > .status { grid-column: 2; grid-row: 1; } .task-columns > :nth-child(2) { grid-column: 2; grid-row: 1; } .task-columns > :nth-child(2)::after { content: " runs"; } .task-columns > :nth-child(6) { display: block; } .worker-columns > :nth-child(5), .worker-columns > :nth-child(6) { display: none; } .cell-label { color: var(--muted); display: inline; font-family: "Geist", system-ui, sans-serif; font-size: 12.5px; font-weight: 400; } .cell-label::after { content: ": "; } .schedule-columns > :nth-child(4) { display: block; } .schedule-columns > .run-history { grid-column: 1 / -1; } .run-history li { grid-template-columns: 60px auto minmax(0, 1fr); } .run-history li small { grid-column: 1 / -1; } .running-columns > .data { grid-column: 2; } .worker-section .user-section-head { padding: 14px 16px; } .concurrency-advice { padding: 14px 16px; } .concurrency-panel { scroll-margin-top: calc(var(--strip) + 12px); } } /* --- Inbox ----------------------------------------------------------------- Every alert kept for one person. Unread alerts carry an accent edge and a heavier title; acknowledged ones fade back, since they are kept for the record. */ .inbox-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; margin-bottom: 16px; } .inbox-toolbar .segmented a { white-space: nowrap; } /* .segmented span styles the radio variant's pills; a count is plain text inside a link. */ .segmented .inbox-tab-count { color: var(--faint); display: inline; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-left: 2px; padding: 0; } .segmented a[aria-current="true"] .inbox-tab-count { color: var(--muted); } .inbox-search { align-items: center; display: flex; flex: 1 1 auto; gap: 8px; justify-content: flex-end; margin: 0; } .inbox-search .filter-field select { min-width: 190px; } .inbox-query { width: min(300px, 100%); } .inbox-panel { overflow: clip; } .inbox-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; padding: 10px 20px; } .inbox-list { list-style: none; margin: 0; padding: 0; } .inbox-item { align-items: flex-start; border-top: 1px solid var(--line); display: grid; gap: 4px 14px; grid-template-columns: 17px minmax(0, 1fr) auto; padding: 16px 20px; position: relative; } .inbox-item:first-child { border-top: 0; } .inbox-item:hover { background: var(--row-hover); } .inbox-item.is-selected { background: var(--accent-soft); } .inbox-item > input { accent-color: var(--accent); cursor: pointer; height: 17px; margin: 2px 0 0; width: 17px; } .inbox-item.unread::before { background: var(--accent); border-radius: 0 3px 3px 0; bottom: 14px; content: ""; left: 0; position: absolute; top: 14px; width: 3px; } .inbox-body { min-width: 0; } .inbox-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 4px 10px; margin-bottom: 4px; } .inbox-unread-label { color: var(--accent); font-weight: 600; } .inbox-kind { background: var(--chip); border-radius: 999px; color: var(--ink-2); font-weight: 500; padding: 1px 8px; white-space: nowrap; } .inbox-kind.hold, .inbox-kind.reminder, .inbox-kind.transfer, .inbox-kind.unsold { background: var(--amber-soft); color: var(--amber); } .inbox-kind.lapsed, .inbox-kind.account, .inbox-kind.rule { background: var(--red-soft); color: var(--red); } .inbox-kind.purchased { background: var(--blue-soft); color: var(--blue); } .inbox-kind.summary, .inbox-kind.joined { background: var(--accent-soft); color: var(--accent); } .inbox-title { color: var(--ink); display: inline-block; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } .inbox-item.unread .inbox-title { font-weight: 650; } .inbox-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .inbox-body p { color: var(--ink-2); font-size: 14px; margin: 3px 0 0; overflow-wrap: anywhere; } .inbox-item.done .inbox-title, .inbox-item.done .inbox-body p { color: var(--muted); } .inbox-actions { flex-wrap: wrap; margin: -4px -8px 0 0; } .inbox-actions .inbox-acknowledge { color: var(--accent) !important; } .inbox-panel .pagination { border-radius: 0; border-width: 1px 0 0; } .inbox-views { display: flex; flex-wrap: wrap; gap: 8px 12px; } .inbox-event-filter { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 14px; gap: 6px 14px; justify-content: space-between; padding: 12px 20px; } .inbox-event-filter a:not(.form-link) { color: var(--ink); font-weight: 600; } .inbox-group + .inbox-group { border-top: 1px solid var(--line); } .inbox-group-head { align-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 12px 20px; } .inbox-group-head .target-thumb { height: 36px; width: 36px; } .inbox-group-head .target-thumb svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; } .inbox-group-title { flex: 1 1 auto; min-width: 0; } .inbox-group-title h3 { font-size: 15px; font-weight: 650; margin: 0; overflow-wrap: anywhere; } .inbox-group-title h3 a { color: var(--ink); text-decoration: none; } .inbox-group-title h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .inbox-group-title small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 2px; } .inbox-group-actions { flex: none; margin: 0; } .inbox-group-more { border-top: 1px solid var(--line); color: var(--accent); display: block; font-size: 13.5px; font-weight: 500; padding: 10px 20px 10px 52px; } .head-actions [data-settings-open] { gap: 6px; } .head-actions [data-settings-open] svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 15px; } /* Notification settings open over the inbox. The body scrolls, not the dialog, so a click on the scrollbar is never mistaken for one on the backdrop. */ .settings-dialog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); color: var(--ink); display: none; flex-direction: column; max-height: calc(100dvh - 48px); max-width: calc(100vw - 32px); overflow: hidden; padding: 0; width: 1040px; } .settings-dialog[open] { animation: dialog-in .16s ease-out; display: flex; } /* Back after one of its own actions: it never really left, so it does not animate in. */ .settings-dialog.returning[open] { animation: none; } /* Opened on load, the browser focuses the dialog itself; its frame is focus enough. */ .settings-dialog:focus { outline: none; } .settings-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); } .settings-dialog-head { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; flex: none; gap: 16px; justify-content: space-between; padding: 20px 24px; } .settings-dialog-head h2 { font-size: 19px; letter-spacing: -.015em; line-height: 1.3; margin: 0; } .settings-dialog-head p { color: var(--muted); font-size: 14px; margin: 4px 0 0; max-width: 70ch; } .settings-dialog-close { align-items: center; background: none; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; display: inline-flex; flex: none; height: 36px; justify-content: center; margin: -6px -8px 0 0; width: 36px; } .settings-dialog-close:hover { background: var(--hover); color: var(--ink); } .settings-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .settings-dialog-close svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 18px; } .settings-dialog .form-panel { border: 0; border-radius: 0; box-shadow: none; max-width: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 760px) { .inbox-toolbar { align-items: stretch; flex-direction: column; } .inbox-toolbar .segmented { align-self: flex-start; max-width: 100%; overflow-x: auto; } .inbox-search { flex-wrap: wrap; justify-content: flex-start; } .inbox-search .filter-field { flex: 1 1 140px; } .inbox-query { width: auto; } .inbox-search .filter-field select { min-width: 0; } .inbox-head, .inbox-item { padding-left: 16px; padding-right: 16px; } .inbox-group-head, .inbox-event-filter { padding-left: 16px; padding-right: 16px; } .inbox-group-head { flex-wrap: wrap; } .inbox-group-actions { margin-left: 48px; } .inbox-group-more { padding-left: 48px; } .inbox-item { grid-template-columns: 17px minmax(0, 1fr); } .inbox-actions { grid-column: 2; justify-content: flex-start; margin: 4px 0 0 -8px; } /* A full-screen sheet on phones. */ .settings-dialog { border: 0; border-radius: 0; height: 100dvh; margin: 0; max-height: none; max-width: none; width: 100vw; } .settings-dialog-head { padding: max(14px, env(safe-area-inset-top)) 16px 14px; } } /* --- Events: search, event pages, favourites and the watchlist ------------- */ .event-search { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; gap: 10px; margin-bottom: 20px; padding: 8px 8px 8px 16px; min-height: 56px; } /* No button to press: the spinner shows while the search as you type is on its way. */ .event-search .event-search-spinner { flex: none; margin-right: 8px; position: static; visibility: hidden; } .event-search.htmx-request .event-search-spinner { visibility: visible; } .event-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 4px var(--focus-ring); } .event-search > svg { fill: none; flex: none; height: 18px; stroke: var(--muted); stroke-linecap: round; stroke-width: 2; width: 18px; } .event-search input { background: none; border: 0; box-shadow: none; flex: 1; font-size: 15px; min-width: 0; outline: none; padding: 8px 0; } .event-results { margin-bottom: 20px; padding-bottom: 10px; } .event-results .target-group { margin: 12px 20px 4px; } .event-columns { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .event-panel-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 16px 20px 10px; } .event-panel-head h2 { font-size: 16px; margin: 0; } .event-panel-head p { color: var(--muted); font-size: 13px; margin: 2px 0 0; } .event-panel-head > a { color: var(--accent); font-size: 14px; font-weight: 500; white-space: nowrap; } .event-panel-head > a:hover { text-decoration: underline; text-underline-offset: 3px; } .count-chip { background: var(--chip); border-radius: 999px; color: var(--ink-2); flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; padding: 2px 9px; } .event-empty { color: var(--muted); font-size: 14px; margin: 0; padding: 4px 20px 18px; } .result-list { list-style: none; margin: 0; padding: 0 8px 8px; } .result-row { align-items: center; border-radius: var(--radius); display: flex; gap: 4px; padding-right: 6px; } .result-row:hover { background: var(--hover); } .result-row.is-paused .target-option-text { opacity: .6; } .result-link { align-items: center; border-radius: var(--radius); color: inherit; display: flex; flex: 1; gap: 12px; min-width: 0; padding: 9px 12px; } .result-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .result-link .kind-chip { background: var(--chip); margin-right: 4px; vertical-align: 1px; } .result-row .row-menu summary { padding: 7px 9px; } .star-form { margin: 0; } .star-button { align-items: center; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--faint); cursor: pointer; display: inline-flex; gap: 6px; justify-content: center; min-height: 36px; min-width: 36px; padding: 0 8px; } .star-button svg { fill: none; height: 18px; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.8; width: 18px; } .star-button:hover { background: var(--hover); color: var(--ink); } .star-button.is-starred { color: var(--count); } .star-button.is-starred svg { fill: currentColor; } .star-button.labelled { background: var(--surface); border-color: var(--line-strong); color: var(--ink); font-size: 14px; font-weight: 500; min-height: 38px; padding: 0 13px; } .star-button.labelled.is-starred svg { color: var(--count); } .event-past { border-top: 1px solid var(--line); padding: 10px 20px 12px; } .event-past summary { color: var(--muted); cursor: pointer; font-size: 13.5px; width: fit-content; } .event-past[open] summary { margin-bottom: 8px; } .event-past .result-list { padding: 0; } .event-past .table-row { padding-left: 0; padding-right: 0; } .event-hero { align-items: center; display: flex; gap: 18px; margin-bottom: 24px; } .target-thumb.large { border-radius: var(--radius); font-size: 26px; height: 76px; width: 76px; } .event-hero-text { flex: 1; min-width: 0; } .event-hero-text .kicker a { color: var(--muted); } .event-hero-text .kicker a:hover { color: var(--ink); } .event-hero-text h1 { font-size: 28px; letter-spacing: -.025em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; } .event-hero-text .event-hero-address { color: var(--ink-2); margin: 6px 0 0; } .event-hero-text > p:last-child { color: var(--muted); margin: 6px 0 0; } .event-hero-actions { flex-wrap: wrap; justify-content: flex-end; } .event-notice { margin: 0 0 16px; } .event-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .event-kpis .kpi.loss > strong { color: var(--red); } .event-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; } .event-main, .event-side { display: grid; gap: 20px; min-width: 0; } .ticket-columns { grid-template-columns: 44px minmax(0, 2.4fr) 80px minmax(0, 1.1fr) 150px; } label.table-row { cursor: pointer; font-weight: 400; margin: 0; } .ticket-columns > span:first-child input { margin: 0; } .holding-columns { grid-template-columns: minmax(0, 2.4fr) auto 90px 110px; } .holding-columns > span:last-child { text-align: right; } .event-form-actions { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 14px 20px; } .event-form-actions small { color: var(--muted); flex: 1; font-size: 12.5px; min-width: 200px; } .fact-list { margin: 0; padding: 0 20px 14px; } .fact-list div { border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 120px minmax(0, 1fr); padding: 9px 0; } .fact-list div:first-child { border-top: 0; } .fact-list dt { color: var(--muted); font-size: 13.5px; } .fact-list dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; } .fact-list dd small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 2px; } .fact-list dd a { color: var(--accent); } @media (max-width: 1100px) { .event-layout { grid-template-columns: minmax(0, 1fr); } .event-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .event-columns { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .event-hero { align-items: flex-start; flex-wrap: wrap; } .target-thumb.large { height: 56px; width: 56px; } .event-hero-text h1 { font-size: 22px; } .event-hero-actions { justify-content: flex-start; width: 100%; } .event-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .event-kpis .kpi:last-child { grid-column: 1 / -1; } .ticket-columns { grid-template-areas: "watch name state" "watch price yours"; grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 4px; } .ticket-columns > :nth-child(1) { grid-area: watch; } .ticket-columns > :nth-child(2) { grid-area: name; } .ticket-columns > :nth-child(3) { grid-area: price; } .ticket-columns > :nth-child(4) { grid-area: yours; text-align: right; } .ticket-columns > :nth-child(5) { grid-area: state; } .table-head.ticket-columns { display: none; } .holding-columns { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .holding-columns > span:nth-child(3) { text-align: left; } .fact-list div { grid-template-columns: 100px minmax(0, 1fr); } } /* --- Date and time pickers (datetime-picker.js) ------------------------------ */ .picker { display: block; min-width: 0; position: relative; } .picker-field { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 1px 1px rgba(20, 23, 26, .03); color: var(--ink); cursor: pointer; display: flex; font: inherit; font-size: 14.5px; gap: 8px; min-height: 40px; padding: 0 12px; text-align: left; transition: border-color .12s ease, box-shadow .12s ease; width: 100%; } .picker-field:hover { border-color: var(--border-hover); } .picker-field:focus-visible, .picker-field:focus-within, .picker-field[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; } .picker-field[aria-invalid="true"], .picker-field:has([aria-invalid="true"]) { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .picker-field:disabled, .picker-field:has(:disabled) { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } .picker-field svg { fill: none; flex: none; height: 16px; stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 16px; } .picker-field.empty .picker-text { color: var(--faint); } .picker-text { flex: 1; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-time { cursor: text; padding-right: 4px; } .picker-field.picker-time input.picker-time-text, .field .picker-field.picker-time input.picker-time-text, .field .picker-field.picker-time input.picker-time-text:hover, .field .picker-field.picker-time input.picker-time-text:focus { background: none; border: 0; box-shadow: none; color: inherit; flex: 1; font: inherit; font-variant-numeric: tabular-nums; min-height: 0; min-width: 0; outline: none; padding: 0; width: 100%; } .picker-time-toggle { align-items: center; background: none; border: 0; border-radius: 6px; cursor: pointer; display: flex; flex: none; height: 30px; justify-content: center; padding: 0; width: 30px; } .picker-time-toggle:hover, .picker-time-toggle[aria-expanded="true"] { background: var(--surface-2); } .picker-time-toggle:hover svg { stroke: var(--ink); } .picker-popover { background: var(--surface); font-size: 14px; font-weight: 400; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--ink); inset: auto; margin: 0; padding: 10px; position: fixed; width: 284px; } .picker-popover-time { width: auto; } .picker-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 6px; } .picker-title { font-size: 14px; font-weight: 600; } .picker-step { align-items: center; background: none; border: 0; border-radius: 7px; color: var(--ink-2); cursor: pointer; display: flex; height: 32px; justify-content: center; width: 32px; } .picker-step:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .picker-step:disabled { cursor: default; opacity: .35; } .picker-step svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; } .picker-days { display: grid; gap: 2px; } .picker-row { display: grid; gap: 2px; grid-template-columns: repeat(7, minmax(0, 1fr)); } .picker-weekday { color: var(--faint); font-size: 11.5px; font-weight: 500; padding: 4px 0; text-align: center; } .picker-day { aspect-ratio: 1; background: none; border: 0; border-radius: 8px; color: var(--ink); cursor: pointer; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; padding: 0; } .picker-day:hover:not(:disabled) { background: var(--surface-2); } .picker-day:focus-visible, .picker-option:focus-visible, .picker-link:focus-visible, .picker-step:focus-visible { box-shadow: 0 0 0 2px var(--accent); outline: none; } .picker-day.outside { color: var(--faint); } .picker-day.today { box-shadow: inset 0 0 0 1px var(--accent-border); color: var(--accent); font-weight: 600; } .picker-day[aria-selected="true"], .picker-option[aria-selected="true"] { background: var(--ink); box-shadow: none; color: var(--on-ink); font-weight: 600; } .picker-day:disabled { color: var(--line-strong); cursor: default; } .picker-footer { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; } .picker-link { background: none; border: 0; border-radius: 6px; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; padding: 4px 8px; } .picker-link:hover { background: var(--accent-soft); } .picker-columns { display: flex; gap: 6px; } .picker-column { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; } .picker-option { background: none; border: 0; border-radius: 7px; color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; padding: 7px 16px; } .picker-option:hover:not([aria-selected="true"]) { background: var(--surface-2); } @media (max-width: 640px) { .picker-popover { width: min(320px, calc(100vw - 16px)); } .picker-popover-time { width: auto; } .picker-option { padding: 9px 18px; } } /* Swipe actions (static/swipe-actions.js). A swiped row keeps its own box and background; its contents slide by --swipe-x and the tray fills the strip they leave. Buttons take the text colour of the surface, which reads on each tone in both themes. */ @media (pointer: coarse) { [data-swipe-row] { touch-action: pan-y; } } [data-swipe-row].is-swiped { overflow: hidden; position: relative; user-select: none; -webkit-user-select: none; } [data-swipe-row].is-swiped > :not(.swipe-tray) { transform: translateX(var(--swipe-x, 0px)); } [data-swipe-row].is-settling > :not(.swipe-tray) { transition: transform .22s cubic-bezier(.2, .8, .2, 1); } [data-swipe-row].is-settling > .swipe-tray { transition: width .22s cubic-bezier(.2, .8, .2, 1); } [data-swipe-row] > .swipe-tray { bottom: 0; display: flex; grid-area: auto; overflow: hidden; position: absolute; top: 0; width: 0; z-index: 2; } .swipe-tray[data-side="start"] { left: 0; } .swipe-tray[data-side="end"] { flex-direction: row-reverse; right: 0; } .swipe-action { align-items: center; background: var(--ink-2); border: 0; color: var(--surface); display: flex; flex: 1 1 0; font: inherit; font-size: 13px; font-weight: 600; justify-content: center; line-height: 1.2; min-width: 0; overflow: hidden; padding: 0 6px; text-align: center; transition: flex-grow .16s ease, padding .16s ease; } .swipe-action > span { flex: none; width: 76px; } .swipe-action[data-tone="go"] { background: var(--accent); } .swipe-action[data-tone="warn"] { background: var(--amber); } .swipe-action[data-tone="danger"] { background: var(--red); } .swipe-tray.is-full .swipe-action:not(:first-child) { flex-grow: 0; padding: 0; }