/* Kitchenboard — public site, account pages, onboarding, pairing screens.
   Uses the shared tokens (cream / deep bark / clay / eucalypt). */

.site-body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.site-wrap { width: min(100% - 40px, 1040px); margin: 0 auto; }
.site-narrow { width: min(100% - 40px, 560px); margin: 0 auto; }

.site-header { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; }
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.site-header .brand .word { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 10px 18px; align-items: center; font-size: 15px; flex-wrap: wrap; }
.site-nav a { white-space: nowrap; }
@media (max-width: 520px) { .site-header { padding: 16px 0; } .site-nav { gap: 8px 14px; font-size: 14px; } .site-nav .btn { padding: 9px 14px; font-size: 14px; } }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav .btn { color: var(--accent-ink); }
.site-nav .btn:hover { color: var(--accent-ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--accent-hover); }
.btn.secondary { background: var(--bg-raised); color: var(--ink); border-color: var(--rule); }
.btn.secondary:hover { border-color: var(--ink-faint); }
.btn.quiet { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn.danger { background: transparent; color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.btn.block { width: 100%; }
.btn.google { background: var(--bg-raised); color: var(--ink); border-color: var(--rule); }
.btn.google:hover { background: var(--bg-raised); border-color: var(--ink-faint); }
.btn.google svg { width: 18px; height: 18px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Texture and washes: a faint dot grid over the whole page that fades out
   down the screen, and two soft colour washes behind the hero (clay high
   right, eucalypt low left). Both use the theme's own ink and accents, so
   they stay quiet in dark mode too. */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 9%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.45) 45vh, transparent 95vh);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.45) 45vh, transparent 95vh);
}
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }
.hero { padding: 48px 0 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -60px -10vw -40px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 55% at 88% 18%, color-mix(in oklab, var(--gold-500) 16%, transparent), transparent 70%),
    radial-gradient(34% 50% at 8% 92%, color-mix(in oklab, var(--sage-500) 15%, transparent), transparent 72%);
}
.section h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--gold-500); margin-bottom: 14px; opacity: .85; }
.prose h1::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--gold-500); margin-bottom: 14px; }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 5.2vw, 58px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 18px; text-wrap: balance; }
.hero p.lede { font-size: 20px; color: var(--ink-soft); margin: 0 0 22px; max-width: 34ch; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .fine { font-size: 13px; color: var(--ink-faint); margin-top: 12px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 24px; } }

.board-demo { border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); background-image: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in oklab, var(--ink) 5%, transparent) 27px 28px); background-position: 0 42px; transform: rotate(-0.6deg); padding: 18px 20px; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; box-shadow: 0 1px 0 rgba(50,44,34,.04), 0 18px 40px -26px rgba(50,44,34,.4); }
.board-demo .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.board-demo .row { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-demo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sage-500); }
.board-demo .dot.clay { background: var(--gold-500); }
.board-demo .dot.sand { background: #D9B75C; }
.board-demo .muted { color: var(--ink-faint); }
@media (max-width: 560px) { .board-demo { grid-template-columns: 1fr; } .board-demo .col:nth-child(3) { display: none; } }

.section { padding: 36px 0; }
.section h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; text-wrap: balance; }
.section p { max-width: 62ch; color: var(--ink-soft); margin: 0 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; position: relative; }
.card::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--sage-500), var(--gold-500)); opacity: .55; }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 6px; }
.card p { font-size: 15px; margin: 0; }
.steps-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: st; }
.steps-list li { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--rule-soft); border-radius: 10px; counter-increment: st; }
.steps-list li::before { content: counter(st); font-family: var(--font-display); font-size: 20px; color: var(--accent); line-height: 1; padding-top: 2px; grid-column: 1; grid-row: 1 / span 2; }
.steps-list > li > b { display: block; grid-column: 2; }
.steps-list span { color: var(--ink-soft); font-size: 15px; grid-column: 2; }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 22px; }
.price { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.price > :is(.btn, form):last-child { margin-top: auto; }
.price.hi { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.price .name { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.price .amount { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.price .amount small { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.price ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.price li { margin-bottom: 4px; }

.site-footer { margin-top: auto; padding: 24px 0 36px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.site-footer a { color: var(--ink-faint); }

/* Prose pages (privacy, terms, guides) */
.prose { max-width: 66ch; }
.prose h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.5vw, 44px); line-height: 1.1; margin: 24px 0 8px; letter-spacing: -0.015em; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose .updated { font-size: 13px; color: var(--ink-faint); margin-bottom: 18px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }

/* Auth / onboarding cards */
.auth-card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 16px; padding: 28px 28px 24px; margin: 28px auto; box-shadow: 0 18px 40px -30px rgba(50,44,34,.45); }
.auth-card h1 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -0.01em; }
.auth-card .sub { color: var(--ink-soft); margin: 0 0 20px; font-size: 15.5px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form select, .form textarea {
  font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface-input); color: var(--ink); width: 100%; box-sizing: border-box; }
.form input:focus, .form select:focus { border-color: var(--accent); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.form .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form .hint { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.form .actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 13px; margin: 16px 0; }
.btn.google svg { flex: none; }
.auth-card > .sub:last-child { margin-bottom: 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.flash { padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.flash.error { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.flash.ok { background: color-mix(in oklab, var(--sage-500) 16%, var(--bg-raised)); color: var(--ink); border: 1px solid color-mix(in oklab, var(--sage-500) 35%, transparent); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches label { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatches label:has(input:checked) { border-color: var(--ink); }
.swatches input { position: absolute; opacity: 0; width: 0; height: 0; }
.code-input { font-family: var(--font-mono); font-size: 26px !important; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.choice-list { display: grid; gap: 8px; }
.choice-list label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface-input); cursor: pointer; font-weight: 500; }
.choice-list label:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface-input)); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; }

/* Settings tables (displays, household) */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 6px; border-bottom: 1px solid var(--rule); }
.tbl td { padding: 10px 6px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tbl form { display: inline; }
.tag { display: inline-block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--plum-50); color: var(--ink-soft); }
.tag.ok { background: var(--sage-50); color: var(--sage-700); }
.tag.warn { background: var(--gold-50); color: var(--gold-700); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface-input); }
.panel { background: var(--parchment-50); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 26px; margin-bottom: 22px; }
.panel h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 12px; font-weight: 600; }
.panel p { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.mono { font-family: var(--font-mono); font-size: 13px; word-break: break-all; }

/* TV pairing + plan screens */
.tv-body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); min-height: 100vh; display: grid; place-items: center; }
.tv-pair { text-align: center; padding: 6vh 6vw; max-width: 1100px; }
.tv-pair .brand { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); }
.tv-pair h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.1; margin: 4vh 0 2vh; letter-spacing: -0.015em; }
.tv-pair .code { font-family: var(--font-mono); font-size: clamp(44px, 8.5vw, 150px); letter-spacing: .14em; text-indent: .14em; font-weight: 700; margin: 2vh 0; color: var(--accent); white-space: nowrap; }
.tv-pair .rotate { font-size: clamp(13px, 1.3vw, 18px); color: var(--ink-faint); margin-top: 1vh; font-variant-numeric: tabular-nums; }
.tv-pair .how { font-size: clamp(18px, 2vw, 28px); color: var(--ink-soft); max-width: 40ch; margin: 0 auto; }
.tv-pair .how b { color: var(--ink); }
.tv-pair .state { margin-top: 3vh; font-size: clamp(15px, 1.6vw, 22px); color: var(--ink-faint); }
.tv-pair .qr { margin: 2vh auto 0; width: clamp(120px, 14vw, 200px); background: #fff; padding: 10px; border-radius: 10px; border: 1px solid var(--rule); }

/* Maker credit: borrows the footer's own fine print; the domain is a bold link at the same size. */
.site-footer .credit { display: inline-flex; align-items: center; gap: 0.35em; }
.site-footer .credit .cc-mark { flex: none; width: 1em; height: 1em; }
.site-footer .credit a { color: inherit; font-weight: 700; text-decoration-color: var(--rule); }
.site-footer .credit a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
@media (max-width: 560px) { .site-footer .credit { flex-basis: 100%; } }

/* Links inside prose and explanatory copy stay visibly links; buttons are excluded. */
.prose a:not(.btn), .auth-card :is(p, .hint, .steps-list) a:not(.btn), .cfg-main :is(.desc, .body, p, .cfg-hint) a:not(.btn), .m-settings-lede a { text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); text-underline-offset: 2px; }
.page-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1; margin: 8px 0 12px; letter-spacing: -0.015em; }
.page-title::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--gold-500); margin-bottom: 14px; }
.board-demo > div { min-width: 0; }
@media (max-width: 720px) { .hero::before { inset: -40px 0 -20px; } }
@media (max-width: 560px) { .site-footer > span:first-child { flex-basis: 100%; } }