/* Comfort Curators "Night" — ported from comfortcurators/host DESIGN.md. True black canvas, iOS systemGray surfaces, Apple off-white ink, platinum as the only accent (no gold in the dark UI). Change tokens, not rules. */ :root { --font-display: "Fraunces", Georgia, serif; --font-editorial: "Newsreader", Georgia, serif; --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif; --canvas: #000000; --surface: #1c1c1e; --data-1: #3987e5; --surface-high: #2c2c2e; --surface-higher: #3a3a3c; --border: rgba(255, 255, 255, 0.08); --hairline: rgba(255, 255, 255, 0.06); --ink: #f5f5f7; --ink-soft: rgba(245, 245, 247, 0.72); --muted: rgba(245, 245, 247, 0.56); --ink-mute: rgba(245, 245, 247, 0.45); --pewter-hi: #c8c6bd; --platinum: #c7c7cc; --platinum-soft: #dcdce0; --platinum-hover: #a1a1a6; --danger: #ff6961; --radius: 1rem; --radius-lg: 1.5rem; --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.5); --ease: cubic-bezier(0.16, 1, 0.3, 1); --on-accent: #000000; --ok: #30d158; --warn: #ffd60a; --selection: rgba(255, 255, 255, 0.16); --lift: rgba(255, 255, 255, 0.18); --nav-glass: rgba(0, 0, 0, 0.92); --tabbar: rgba(12, 12, 14, 0.94); color-scheme: dark; } /* "Day": the same system in light. Follows the phone unless the host picks one under Account → Appearance (data-theme on ). */ :root[data-theme="light"] { --canvas: #f5f5f7; --surface: #ffffff; --data-1: #2a78d6; --surface-high: #f0f0f3; --surface-higher: #e4e4e9; --border: rgba(0, 0, 0, 0.09); --hairline: rgba(0, 0, 0, 0.06); --ink: #1d1d1f; --ink-soft: rgba(29, 29, 31, 0.76); --muted: rgba(29, 29, 31, 0.58); --ink-mute: rgba(29, 29, 31, 0.46); --pewter-hi: #6e6b62; --platinum: #1d1d1f; --platinum-soft: #3a3a3c; --platinum-hover: #3a3a3c; --danger: #d70015; --on-accent: #ffffff; --ok: #1a7f37; --warn: #9a6700; --selection: rgba(0, 0, 0, 0.12); --lift: rgba(0, 0, 0, 0.18); --nav-glass: rgba(245, 245, 247, 0.92); --tabbar: rgba(255, 255, 255, 0.94); --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --canvas: #f5f5f7; --surface: #ffffff; --data-1: #2a78d6; --surface-high: #f0f0f3; --surface-higher: #e4e4e9; --border: rgba(0, 0, 0, 0.09); --hairline: rgba(0, 0, 0, 0.06); --ink: #1d1d1f; --ink-soft: rgba(29, 29, 31, 0.76); --muted: rgba(29, 29, 31, 0.58); --ink-mute: rgba(29, 29, 31, 0.46); --pewter-hi: #6e6b62; --platinum: #1d1d1f; --platinum-soft: #3a3a3c; --platinum-hover: #3a3a3c; --danger: #d70015; --on-accent: #ffffff; --ok: #1a7f37; --warn: #9a6700; --selection: rgba(0, 0, 0, 0.12); --lift: rgba(0, 0, 0, 0.18); --nav-glass: rgba(245, 245, 247, 0.92); --tabbar: rgba(255, 255, 255, 0.94); --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08); color-scheme: light; } } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { background: var(--canvas); color: var(--ink); font-family: var(--font-ui); } body { margin: 0; min-height: 100dvh; font-size: 15px; line-height: 1.55; } ::selection { background: var(--selection); } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--platinum); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ── Nav: glass bar ── */ .top-nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 0.9rem 1.5rem; background: color-mix(in srgb, var(--canvas) 60%, transparent); -webkit-backdrop-filter: blur(40px) saturate(185%); backdrop-filter: blur(40px) saturate(185%); border-bottom: 1px solid var(--hairline); } .top-nav-tabs { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; } .top-nav-tabs::-webkit-scrollbar { display: none; } .top-nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; white-space: nowrap; transition: color 0.25s var(--ease); } .top-nav a:hover, .top-nav a[aria-current="page"], .top-nav a.active { color: var(--ink); } .top-nav-user { display: flex; align-items: center; gap: 0.9rem; font-size: 0.82rem; white-space: nowrap; } .user-email { color: var(--ink-mute); } /* ── Layout & type ── */ main { max-width: 960px; margin: 0 auto; padding: 3rem 1.5rem 5rem; } h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.07; letter-spacing: -0.014em; margin: 0 0 1.5rem; } h2 { font-family: var(--font-display); font-weight: 420; letter-spacing: -0.01em; } .greeting, .hint, .summary { font-family: var(--font-editorial); font-weight: 380; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); margin: -0.75rem 0 2rem; } .hint, .summary { font-size: 1rem; margin: 0 0 1.25rem; } a { color: var(--ink); } /* The signature eyebrow: letterspaced classical caps. */ .label-caps, .status-card h2, .draft-kind, .auth-form label, .inbox-property, .property-id, .device-kind { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--platinum); } /* ── Forms ── */ form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; } input, select, textarea { background: var(--surface); border: 1.5px solid var(--border); color: var(--ink); padding: 0.75rem 1rem; border-radius: var(--radius); font: inherit; font-size: 0.9rem; transition: border-color 0.25s var(--ease); } input::placeholder, textarea::placeholder { color: var(--ink-mute); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(199, 199, 204, 0.5); } textarea { width: 100%; min-height: 7rem; box-sizing: border-box; } button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--platinum); color: var(--on-accent); border: none; padding: 0.75rem 1.5rem; border-radius: 999px; font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: transform 0.3s var(--ease), background 0.25s var(--ease); } button:hover { background: var(--platinum-soft); transform: scale(1.02); } button:active { transform: scale(0.98); } button:disabled { opacity: 0.4; cursor: default; transform: none; } .draft-actions button + button { background: var(--surface-high); color: var(--ink); } .draft-actions button + button:hover { background: var(--surface-higher); } .link-button { background: none; color: var(--muted); padding: 0.25rem 0; border-radius: 0; font-size: 0.82rem; font-weight: 400; text-align: left; } .link-button:hover { background: none; color: var(--ink); transform: none; } .status { color: var(--muted); font-size: 0.85rem; min-height: 1.2em; } .error { color: var(--danger); } /* ── Auth ── */ .auth-page { max-width: 380px; margin: 0 auto; padding: 5rem 1.5rem 3rem; } .auth-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; } .auth-form label { margin-top: 0.75rem; } .auth-form button { margin-top: 1rem; } .auth-links { margin-top: 1.75rem; font-size: 0.85rem; color: var(--muted); } .auth-links a { color: var(--ink-soft); } /* ── Cards: iOS grouped surfaces ── */ .status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .status-card, .draft-card, .feed-url, .answer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-soft); } .status-card h2 { margin: 0 0 0.75rem; } .stat { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0; font-variant-numeric: tabular-nums; } /* ── Lists: inset rows with hairlines ── */ .inbox-list, .draft-list, .property-list, .device-list { list-style: none; padding: 0; margin: 0 0 2rem; } .inbox-row, .property-row, .device-row { padding: 1rem 0; border-bottom: 1px solid var(--hairline); } .property-row, .device-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; } .property-name, .device-name { font-weight: 500; } .property-city, .device-vendor, .device-address { color: var(--muted); font-size: 0.88rem; } .inbox-property { margin-top: 0.35rem; } .draft-card { margin-bottom: 1rem; } .draft-target { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; } .draft-body { white-space: pre-wrap; margin: 0.9rem 0 1.1rem; font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.6; } .draft-actions { display: flex; gap: 0.6rem; } .curator-page h2 { font-size: 1.35rem; margin: 2.5rem 0 1rem; } .feed-url { margin-top: 1.25rem; } .feed-url code { display: block; word-break: break-all; margin-bottom: 0.75rem; color: var(--ink-soft); } .answer { white-space: pre-wrap; margin-top: 1.25rem; font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.65; } .thinking { margin-top: 1rem; color: var(--muted); } .thinking summary { cursor: pointer; font-size: 0.85rem; } .thinking pre { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); padding: 1rem 1.25rem; border-radius: var(--radius); margin-top: 0.6rem; font-size: 0.82rem; } @media (max-width: 640px) { .top-nav { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.75rem 1rem; } .top-nav-user { justify-content: flex-end; } main { padding: 2rem 1rem 4rem; } .auth-page { padding-top: 3rem; } form > * { flex: 1 1 100%; } } /* ── Simple app pieces ── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; margin: 0 0 1rem; box-shadow: var(--shadow-soft); } .panel p { margin: 0.5rem 0 1rem; color: var(--ink-soft); } .panel .label-caps { margin-bottom: 0.25rem; } .stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .page-head h1 { margin: 0; } /* Listing read from a share link */ .listing { margin: 0.5rem 0 1.5rem; } .photo-strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .photo-strip::-webkit-scrollbar { display: none; } .photo-strip img { flex: 0 0 auto; width: min(78vw, 340px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface); scroll-snap-align: start; } .listing .facts { margin: 0.75rem 0 0.15rem; color: var(--ink); } .listing .hint { margin: 0.15rem 0; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; } .chips span { padding: 0.3rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; color: var(--ink-soft); background: var(--surface); } details.more { border-top: 1px solid var(--border); } details.more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none; color: var(--ink); font-weight: 500; } details.more summary::-webkit-details-marker { display: none; } details.more summary::after { content: "›"; margin-left: auto; color: var(--muted); transition: transform 0.2s; } details.more[open] summary::after { transform: rotate(90deg); } details.panel.more { border-top: 1px solid var(--border); padding-top: 0; padding-bottom: 0; } details.panel.more[open] { padding-bottom: 1rem; } .prewrap { white-space: pre-wrap; } ul.plain { list-style: none; padding: 0; margin: 0 0 0.75rem; } ul.plain li { padding: 0.35rem 0; color: var(--ink-soft); } .listing-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .listing-actions a.link-button { display: inline-flex; align-items: center; } /* Curator chat */ .suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1.25rem; } button.suggestion { width: auto; min-height: 44px; padding: 0.55rem 0.9rem; border-radius: 999px; text-align: left; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); font-weight: 400; font-size: 0.92rem; } button.suggestion:hover { background: var(--surface-high); color: var(--ink); } .thread { display: flex; flex-direction: column; gap: 0.9rem; margin: 0.5rem 0 1rem; } .msg { max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; } .msg.mine { align-self: flex-end; max-width: 85%; background: var(--surface-high); color: var(--ink); padding: 0.6rem 0.95rem; border-radius: 1.2rem 1.2rem 0.35rem 1.2rem; white-space: pre-wrap; } .msg.curator { align-self: stretch; color: var(--ink); } .md p { margin: 0 0 0.7rem; } .md ul, .md ol { margin: 0 0 0.7rem; padding-left: 1.25rem; } .md li { margin: 0.2rem 0; } .md h3.md-h { font-size: 1.05rem; margin: 0.9rem 0 0.4rem; } .md strong { color: var(--ink); font-weight: 600; } .md a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .md code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--surface); padding: 0.05rem 0.3rem; border-radius: 0.35rem; } .md pre.md-code { background: var(--surface); border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.75rem; overflow-x: auto; font-size: 0.85rem; } .md blockquote { margin: 0 0 0.7rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--surface-higher); background: var(--surface); border-radius: 0 0.8rem 0.8rem 0; color: var(--ink-soft); } .md-table { overflow-x: auto; margin: 0 0 0.8rem; -webkit-overflow-scrolling: touch; } .md-table table { border-collapse: collapse; font-size: 0.88rem; min-width: 100%; } .md-table th, .md-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .md-table th { color: var(--muted); font-weight: 500; } details.steps { margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); } details.steps summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; } details.steps ul { margin: 0.2rem 0 0; padding-left: 1.1rem; } details.steps li.failed { text-decoration: line-through; opacity: 0.6; } .sources { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .sources a { font-size: 0.78rem; color: var(--ink-soft); text-decoration: none; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg.working { color: var(--muted); } .working-line { display: flex; align-items: center; gap: 0.3rem; } ul.live-steps { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.85rem; } ul.live-steps li { padding: 0.15rem 0 0.15rem 1.2rem; position: relative; } ul.live-steps li::before { content: "○"; position: absolute; left: 0; } ul.live-steps li.done::before { content: "✓"; color: var(--ink-soft); } ul.live-steps li.failed { opacity: 0.55; } ul.live-steps li.failed::before { content: "×"; } .dots { display: inline-flex; gap: 4px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: 0.2s; } .dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } } .composer { position: sticky; bottom: 0.75rem; z-index: 20; display: flex; gap: 0.5rem; align-items: flex-end; background: rgba(20, 20, 22, 0.92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--border); border-radius: 1.6rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem; margin-bottom: 2rem; } .composer textarea { flex: 1; min-height: 44px; max-height: 9rem; resize: none; border: 0; background: transparent; padding: 0.65rem 0; field-sizing: content; color: var(--ink); } .composer textarea:focus { outline: none; } .composer button { width: 44px !important; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; flex: 0 0 auto; } .composer button:disabled { opacity: 0.35; } ul.memory-list { list-style: none; padding: 0; margin: 0 0 0.75rem; } ul.memory-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .memory-text { color: var(--ink); } .memory-meta { grid-row: 2; font-size: 0.78rem; color: var(--muted); } .memory-meta a { color: var(--muted); } ul.memory-list .link-button { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: auto !important; } .memory-add { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .memory-add input { flex: 1; } .memory-add button { width: auto !important; padding: 0 1rem; } @media (max-width: 820px) { .composer { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); } } /* WiFi & devices */ ol.steps { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; color: var(--ink-soft); } ol.steps li { padding: 0.3rem 0; } .panel.found { border-color: var(--accent, #c7c7cc); } .code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; font-size: 1.8rem; margin: 0.25rem 0; } .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; } .device-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .device-card.on { background: var(--surface-high); border-color: var(--lift); } .device-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; } .device-head .device-name { font-weight: 500; color: var(--ink); } .device-head .device-state { color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .device-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .device-controls button.toggle { width: auto; flex: 1 1 auto; min-height: 44px; padding: 0 1rem; } .device-card.on .device-controls button.toggle { background: var(--ink); color: var(--on-accent); } .stepper { display: flex; align-items: center; gap: 0.5rem; } .stepper button { width: 44px !important; min-height: 44px; padding: 0; background: var(--surface-high); color: var(--ink); font-size: 1.25rem; } .stepper span { min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; } input.slider { width: 100%; min-height: 32px; accent-color: var(--platinum); background: none; border: 0; padding: 0; } .row-actions { display: flex; justify-content: flex-end; margin: 0.6rem 0 0; } .big { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink) !important; margin: 0.25rem 0 1rem !important; } button.secondary { background: var(--surface-high); color: var(--ink); } button.secondary:hover { background: var(--surface-higher); } .property-list a { text-decoration: none; color: inherit; display: block; } .property-list .property-row { align-items: center; } .chevron { margin-left: auto; color: var(--ink-mute); font-size: 1.3rem; } .back { display: inline-block; color: var(--muted); font-size: 0.85rem; margin-bottom: 1.25rem; } a:has(.back) { text-decoration: none; } code.copy { display: block; word-break: break-all; user-select: all; font-size: 0.82rem; background: var(--canvas); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin: 0.25rem 0 0.75rem; color: var(--ink-soft); } .property-page h2 { font-size: 1.35rem; margin: 2.5rem 0 0.5rem; } .property-row .link-button { margin-left: auto; } /* ── Footer (after superhostos00: Legal · Compliance · Company · Social) ── */ .site-footer { border-top: 1px solid var(--hairline); padding: 2.5rem 1.5rem 2rem; max-width: 960px; margin: 3rem auto 0; font-size: 0.85rem; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .footer-brand { max-width: 22rem; color: var(--muted); } .footer-brand p { margin: 0.25rem 0; } .footer-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); } .footer-small { font-size: 0.75rem; color: var(--ink-mute); } .footer-google { margin-top: 1rem; min-height: 1px; } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 2rem; } .footer-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .footer-col .label-caps { margin-bottom: 0.25rem; } .footer-col a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; } .footer-col a:hover { color: var(--ink); } .footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-mute); } @media (max-width: 640px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .site-footer { padding: 2rem 1rem 1.5rem; } } /* ── iPhone first, then Android flagships ────────────────────────────── Tabs sit at the bottom where the thumb is; every edge clears the notch / Dynamic Island and the home indicator; inputs are 16px so iOS Safari never zooms on focus; tap targets are at least 44px. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overscroll-behavior-y: none; } input, select, textarea { font-size: 16px; min-height: 44px; box-sizing: border-box; } button { min-height: 44px; } .link-button { min-height: 44px; } @media (max-width: 820px) { .top-nav { position: sticky; top: 0; flex-direction: row; align-items: center; gap: 0.75rem; padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) calc(env(safe-area-inset-right, 0px) + 1rem) 0.6rem calc(env(safe-area-inset-left, 0px) + 1rem); background: var(--nav-glass); -webkit-backdrop-filter: none; backdrop-filter: none; } .top-nav-user { margin-left: auto; min-width: 0; gap: 0.75rem; } .top-nav-user .user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55vw; } .top-nav-user a { display: inline-flex; align-items: center; min-height: 44px; } .top-nav-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0.35rem calc(env(safe-area-inset-right, 0px) + 0.5rem) calc(env(safe-area-inset-bottom, 0px) + 0.35rem) calc(env(safe-area-inset-left, 0px) + 0.5rem); background: var(--tabbar); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid var(--border); } .top-nav-tabs a { display: flex; align-items: center; justify-content: center; min-height: 50px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 12px; } .top-nav-tabs a[aria-current="page"] { color: var(--ink); background: var(--surface); } main { padding: 1.5rem calc(env(safe-area-inset-right, 0px) + 1rem) 2rem calc(env(safe-area-inset-left, 0px) + 1rem); } .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem); } body:has(.top-nav-tabs) { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); } h1 { font-size: 2rem; } .page-head button { padding: 0.6rem 1.1rem; } .row-actions button, .panel > button, .stack button { width: 100%; } .auth-page { padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1.25rem 2rem; } } /* Rules & compliance, nearby market */ .rules p, .market p { margin: 0; } .rules .facts, .market .facts { color: var(--ink); } a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border-radius: 999px; background: var(--platinum); color: var(--on-accent); font-weight: 600; text-decoration: none; } a.button:hover { background: var(--platinum-hover); } ul.rule-list { list-style: none; padding: 0; margin: 0.5rem 0 0; } ul.rule-list li { padding: 0.65rem 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 0.25rem; } ul.rule-list li:last-child { border-bottom: 0; } .rule-head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; } .rule-status { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-higher); color: var(--ink-soft); white-space: nowrap; } .rule-status.met { background: rgba(48, 209, 88, 0.16); color: var(--ok); } .rule-status.todo { background: rgba(255, 105, 97, 0.16); color: var(--danger); } .rule-status.check { background: rgba(255, 214, 10, 0.16); color: var(--warn); } .rule-action { color: var(--ink); } .rule-action::before { content: "→ "; color: var(--muted); } .market-median { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); } .market-median .hint { font-family: var(--font-ui); font-size: 0.85rem; margin-left: 0.4rem; } ul.comp-list { list-style: none; padding: 0; margin: 0.5rem 0 0; } ul.comp-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); } ul.comp-list li a { overflow-wrap: anywhere; } ul.comp-list .comp-price { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } ul.comp-list .hint { grid-column: 1 / -1; } .md a.md-img { display: block; margin: 0.5rem 0; } .md a.md-img img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); } /* Why each step was taken; the ways the Curator has learned */ .live-steps .why, details.steps .why { display: block; font-size: 0.78rem; color: var(--ink-mute); } ul.ways li { grid-template-columns: minmax(0, 1fr); } ul.ways .memory-meta { grid-row: auto; } ul.memory-list .memory-text, ul.memory-list .memory-meta { overflow-wrap: anywhere; min-width: 0; } ul.ways li.dead .memory-text { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--ink-mute); } /* Account, help, supplies, regions, more */ .row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .status.ok { color: var(--ok); } .warn { color: var(--warn); } .how-to { font-size: 0.85rem; color: var(--muted); text-decoration: underline; margin-left: 0.25rem; } .page-head .how-to { align-self: center; } .toggle-row { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); } .toggle-row input { width: 22px; height: 22px; flex: none; margin-top: 0.15rem; } ul.more-list { list-style: none; padding: 0; margin: 1rem 0; } ul.more-list li a { display: grid; gap: 0.15rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); } ul.more-list li a::after { content: "›"; position: absolute; right: 1.25rem; color: var(--muted); } ul.supply-list { list-style: none; padding: 0; margin: 1rem 0; } ul.supply-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--border); display: grid; gap: 0.2rem; } ul.supply-list li p { margin: 0; } ul.supply-list li.low strong::before { content: "● "; color: var(--warn); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .field { display: grid; gap: 0.25rem; } .add-line { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: 0.5rem; } input.qty { width: 4.5rem; text-align: right; } .add-line button { width: auto !important; padding: 0 1rem; } .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .stat-row > div { display: grid; gap: 0.1rem; } .stat { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); } .guide ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; color: var(--ink-soft); } .guide h2 { margin: 0; font-size: 1.25rem; } .help-page .chips a { text-decoration: none; } section[id], form[id] { scroll-margin-top: 5rem; } ul.more-list li { position: relative; } .segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; background: var(--surface-high); border-radius: 999px; padding: 0.25rem; } .segmented button { background: transparent !important; color: var(--ink-soft) !important; min-height: 40px; border-radius: 999px; } .segmented button.active { background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--shadow-soft); } /* Reach more guests: platform rows open to their steps. */ .channel-list li { border-top: 1px solid var(--line, rgba(127,127,127,.2)); padding: 10px 0; } .channel-list li:first-child { border-top: 0; } .link-row { width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .hint.ok { color: var(--ok); } fieldset.stack { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; padding: 12px; margin: 0; } fieldset legend { padding: 0 6px; font-weight: 600; } /* Government console */ .segmented.tabs-row { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; margin: 12px 0; } .segmented.tabs-row button { min-width: 0; } .segmented.tabs-row.four { grid-template-columns: repeat(4, 1fr); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid-2 > * { min-width: 0; } .grid-2 input { width: 100%; box-sizing: border-box; } .chip-check { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 999px; } .sub-row { padding-left: 12px; } .scan-button { display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; } .scan-button.busy { opacity: .6; pointer-events: none; } .hint.warn { color: var(--warn); } .row-between.gap { gap: 8px; } .row-between.gap input { flex: 1; min-width: 0; } .sub-block { padding-left: 12px; border-left: 2px solid var(--line, rgba(127,127,127,.25)); } .doc-row { padding: 6px 0; } /* Console tabs: one scrolling row, never wrapping. */ .segmented.tab-strip { display: flex; overflow-x: auto; scrollbar-width: none; margin: 12px 0; -webkit-overflow-scrolling: touch; } .segmented.tab-strip::-webkit-scrollbar { display: none; } .segmented.tab-strip button { flex: 0 0 auto; } .segmented button { white-space: nowrap; } ul.plain li.inner-card, .inner-card { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 14px; padding: 12px 14px; margin: 10px 0; overflow-wrap: break-word; } .inner-card .row-between > .hint { white-space: nowrap; flex-shrink: 0; margin-left: 8px; } p.ok { color: var(--ok); } details.more-fields > summary { cursor: pointer; padding: 8px 0; color: var(--ink-soft); font-weight: 600; } details.more-fields[open] > summary { margin-bottom: 6px; } /* Government map + charts */ .gov-map { height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(127,127,127,.25)); margin: 8px 0; } .map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: var(--ink-soft); } .map-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--dot); } .bars { width: 100%; height: auto; display: block; } .bars .bar { fill: var(--data-1); cursor: pointer; } .bars .bar.dim { opacity: .45; } .bars .axis { stroke: var(--ink-mute); stroke-width: 1; } .bars text { fill: var(--ink-soft); font-size: 11px; font-family: inherit; } .bars text.value { fill: var(--ink); font-weight: 600; } .chart-caption { min-height: 1.4em; color: var(--ink); font-weight: 600; } .hidden { display: none !important; } .alarm-banner { border: 2px solid var(--danger); } .alarm-banner strong { color: var(--danger); } .hint.danger, p.danger { color: var(--danger); font-weight: 600; }