/* ============================================================================
   TB-CLASSIC-V1 — Home style profile (light, TB canonical rules)
   Scope: body.tb-demo-classic  ·  D11 (0px)  ·  no shadows on surfaces
   Tokens mirror app/tailwindcss/input.css (:is(html.tb-modern,...)) — NOT global.

   Kanoniset säännöt (locked), joita tämä profiili noudattaa:
     ui.card.straight-corner · ui.card.no-shadow · ui.button.no-filled
     ui.color.red-accent (V3: deliberate TB wine-red in active nav, action
       links and a small brand kicker; gold reserved for award/ranking) · ui.touch.min44
     ui.a11y.focus-visible · ui.form.contract · ui.region.present
     ui.gutter.16-24-32 (16/24/32 px reunaväli, tavoitestandardi)
   ========================================================================== */
body.tb-demo-classic {
    --tb-canvas: #f5f5f5;
    --tb-surface: #ffffff;
    --tb-ink: #202020;
    --tb-muted: #666666;
    --tb-accent: #991d22; /* TB wine red — V3 authorized: active nav, action links, brand kicker */
    --tb-line: #949494;   /* olennainen rakenteellinen raja (~3.03:1) */
    --tb-line-soft: #a9a9a9; /* ei-kriittinen erotin */
    --tb-gold: #8f6f1f;   /* canonical award/ranking gold — RESERVED, no general accent (V3) */
    --tb-radius: 0px;
    background: var(--tb-canvas);
    color: var(--tb-ink);
    font-family: var(--lab-sans, "Segoe UI", Candara, sans-serif);
    overflow-wrap: break-word; /* estä pitkän sanan aiheuttama vaakavieritys */
}
body.tb-demo-classic .tb-skip { position: absolute; left: -9999px; }
body.tb-demo-classic .tb-skip:focus { left: 8px; top: 8px; background: var(--tb-surface); border: 1px solid var(--tb-ink); padding: 8px; z-index: 100; }

/* D11: square everywhere; no surface shadow */
body.tb-demo-classic *,
body.tb-demo-classic *::before,
body.tb-demo-classic *::after { border-radius: 0 !important; box-shadow: none !important; }

body.tb-demo-classic .tb-header {
    border-bottom: 1px solid var(--tb-line);
    background: var(--tb-surface);
    display: grid; gap: 12px 16px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 12px 16px;
    position: sticky; top: 0; z-index: 40;
}
body.tb-demo-classic .tb-brand { font-family: var(--lab-font, Georgia, serif); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--tb-ink); }
body.tb-demo-classic .tb-brand:hover { color: var(--tb-ink); }
body.tb-demo-classic .tb-search { display: flex; gap: 8px; min-width: 0; }
body.tb-demo-classic .tb-search__input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--tb-line); background: var(--tb-surface); color: var(--tb-ink); font: inherit; }
body.tb-demo-classic .tb-nav { display: flex; flex-wrap: wrap; gap: 4px; }
body.tb-demo-classic .tb-nav__item { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--tb-ink); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
body.tb-demo-classic .tb-nav__item:hover { background: var(--tb-canvas); color: var(--tb-ink); }
/* Selected nav state: neutraali ink + alleviivaus (ei punaista aksenttia) */
body.tb-demo-classic .tb-nav__item.is-active { color: var(--tb-accent); font-weight: 700; border-bottom: 2px solid var(--tb-accent); }

/* Outlined buttons (ui.button.no-filled): primary = black border/text/white bg */
body.tb-demo-classic .tb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--tb-ink); background: var(--tb-surface); color: var(--tb-ink); text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
body.tb-demo-classic .tb-btn--primary { border-color: var(--tb-ink); color: var(--tb-ink); }
body.tb-demo-classic .tb-btn--secondary { border-color: var(--tb-line-soft); color: var(--tb-muted); }
body.tb-demo-classic .tb-btn:hover { background: var(--tb-canvas); } /* ei punaista hover-tehostetta */

body.tb-demo-classic .tb-main { max-width: 1680px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 32px; }
body.tb-demo-classic .tb-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tb-accent); margin: 0; }
body.tb-demo-classic .tb-hero { border: 1px solid var(--tb-line); background: var(--tb-surface); padding: 24px; }
body.tb-demo-classic .tb-hero__h { font-family: var(--lab-font, Georgia, serif); font-weight: 500; font-size: 36px; line-height: 1.15; margin: 8px 0; }
body.tb-demo-classic .tb-hero__lede { color: var(--tb-ink); max-width: 60ch; margin: 0 0 16px; }
body.tb-demo-classic .tb-actions { display: flex; flex-wrap: wrap; gap: 12px; }

body.tb-demo-classic .tb-section { display: grid; gap: 16px; }
body.tb-demo-classic .tb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--tb-line); padding-bottom: 8px; }
body.tb-demo-classic .tb-section__h { font-family: var(--lab-font, Georgia, serif); font-size: 24px; margin: 0; }
body.tb-demo-classic .tb-muted { color: var(--tb-muted); margin: 0; }
body.tb-demo-classic .tb-link { color: var(--tb-accent); font-size: 13px; }

body.tb-demo-classic .tb-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
body.tb-demo-classic .tb-card { border: 1px solid var(--tb-line); background: var(--tb-surface); padding: 16px; display: grid; gap: 12px; position: relative; }
body.tb-demo-classic .tb-card__head { padding-right: 72px; }
body.tb-demo-classic .tb-card__region { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tb-muted); margin: 0; }
body.tb-demo-classic .tb-card__title { font-family: var(--lab-font, Georgia, serif); font-size: 20px; margin: 2px 0; }
body.tb-demo-classic .tb-card__cuvee { color: var(--tb-muted); margin: 0; }
/* Wine type: neutral informational marker (NOT the gold award/ranking channel). */
body.tb-demo-classic .tb-type { position: absolute; top: 16px; right: 16px; border: 1px solid var(--tb-line-soft); background: var(--tb-surface); color: var(--tb-muted); padding: 3px 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
body.tb-demo-classic .tb-card__note { border-left: 2px solid var(--tb-line); background: var(--tb-canvas); padding: 8px 12px; margin: 0; }
body.tb-demo-classic .tb-card--skeleton { min-height: 132px; background: repeating-linear-gradient(90deg, #eee 0 12px, #f6f6f6 12px 24px); border-color: var(--tb-line-soft); }
body.tb-demo-classic .tb-state { border: 1px solid var(--tb-line); background: var(--tb-surface); padding: 20px; color: var(--tb-muted); margin: 0; }
body.tb-demo-classic .tb-state--error { border-color: var(--tb-accent); color: var(--tb-accent); }

/* Ranking table: full width fits 4 cols @375 (min-content < 343px) → allowed by §12.
   overflow-wrap: anywhere prevents horizontal overflow (TB: top10000-mobile). */
body.tb-demo-classic .tb-table { width: 100%; border-collapse: collapse; background: var(--tb-surface); border: 1px solid var(--tb-line); }
body.tb-demo-classic .tb-table th, body.tb-demo-classic .tb-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--tb-line); vertical-align: top; overflow-wrap: anywhere; }
body.tb-demo-classic .tb-table th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tb-muted); }
body.tb-demo-classic .tb-rank__name { font-family: var(--lab-font, Georgia, serif); font-size: 16px; display: block; }
body.tb-demo-classic .tb-rank__region { font-size: 11px; color: var(--tb-muted); }

body.tb-demo-classic .tb-membership { border: 1px solid var(--tb-line); background: var(--tb-surface); padding: 24px; display: grid; gap: 12px; }
body.tb-demo-classic .tb-membership__h { font-family: var(--lab-font, Georgia, serif); font-size: 26px; margin: 0; }
body.tb-demo-classic .tb-membership__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.tb-demo-classic .tb-membership__list li { padding-left: 16px; position: relative; }
body.tb-demo-classic .tb-membership__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--tb-ink); }

body.tb-demo-classic .tb-footer { border-top: 1px solid var(--tb-line); background: var(--tb-surface); padding: 24px 16px 40px; }
body.tb-demo-classic .tb-footer__brand { font-family: var(--lab-font, Georgia, serif); text-transform: uppercase; letter-spacing: 0.12em; }
body.tb-demo-classic .tb-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 0; margin: 12px 0; }
body.tb-demo-classic .tb-footer__links a { color: var(--tb-ink); }
body.tb-demo-classic .tb-footer__links a:hover { color: var(--tb-ink); }
body.tb-demo-classic .tb-footer__legal { color: var(--tb-muted); }

/* Focus visibility (ui.a11y.focus-visible) — neutraali ink-rengas, ei punaista */
body.tb-demo-classic a:focus-visible, body.tb-demo-classic button:focus-visible, body.tb-demo-classic input:focus-visible { outline: 3px solid var(--tb-ink); outline-offset: 2px; }

/* Responsive: 1 / 2 / 3 columns. Breakpoints 767/768 and 1199/1200.
   Reunaväli 16 / 24 / 32 px (ui.gutter.16-24-32). */
@media (min-width: 768px) {
    body.tb-demo-classic .tb-cards { grid-template-columns: repeat(2, 1fr); }
    body.tb-demo-classic .tb-header { padding: 12px 24px; }
    body.tb-demo-classic .tb-main { padding: 24px 24px 64px; }
    body.tb-demo-classic .tb-footer { padding: 24px 24px 40px; }
}
/* Tablet: the real (long) Tastingbook nav labels get their own row so the 1fr
   search column cannot collapse and let the nav paint over the Search button. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.tb-demo-classic .tb-header { grid-template-columns: auto 1fr; grid-template-areas: "brand search" "nav nav"; }
    body.tb-demo-classic .tb-brand { grid-area: brand; }
    body.tb-demo-classic .tb-search { grid-area: search; min-width: 0; }
    body.tb-demo-classic .tb-nav { grid-area: nav; }
}
@media (min-width: 1200px) {
    body.tb-demo-classic .tb-cards { grid-template-columns: repeat(3, 1fr); }
    body.tb-demo-classic .tb-header { padding: 12px 32px; }
    body.tb-demo-classic .tb-main { padding: 32px 32px 64px; }
    body.tb-demo-classic .tb-footer { padding: 24px 32px 40px; }
}
@media (max-width: 767px) {
    body.tb-demo-classic .tb-header { grid-template-columns: 1fr; }
    body.tb-demo-classic .tb-nav { overflow-x: auto; }
}