/* ============================================================================
   cityhonestly design system
   ----------------------------------------------------------------------------
   Token values are ported verbatim from references/design-system.html, which
   the written specification names as the source of truth: "Where this file and
   the written specification differ, this file wins."

   One file on purpose. `stylesheet_link_tag :app` emits a <link> per top-level
   stylesheet in alphabetical order, so splitting this would make the cascade
   depend on filenames. fonts.css stays separate because @font-face is
   order-independent.
   ============================================================================ */

/* ============================================================
   TOKENS — light is the base. Every token defined here first.
   A colour whose only definition lives inside a media query is
   the classic unreadable-page bug.
   ============================================================ */
:root{
  /* grounds and ink */
  --ground:#FBFCFB; --surface:#FFFFFF; --surface-2:#EFF4F1; --surface-3:#E4ECE8;
  --ink:#0F231E; --ink-soft:#465C56; --ink-faint:#78908A;
  --rule:#D9E4DF; --rule-soft:#E9F0ED;

  /* accent — jade. the only interface colour. */
  --accent:#12463C; --accent-hover:#0B2E28; --accent-on:#FFFFFF;
  --accent-tint:#E6EFEB;

  /* secondary — turmeric. marks disclosure, never action. */
  --gold:#9C6A0E; --gold-tint:#FBF3E1; --gold-line:#E8D5A6;

  /* semantic — separate from accent, by design */
  --ok:#1E6B4F;  --ok-tint:#E4F1EA;
  --warn:#9C6A0E; --warn-tint:#FBF3E1;
  --stale:#7A6E86; --stale-tint:#EFEBF3;

  /* the ten city accents — DATA ENCODING, not decoration */
  --c-bangkok:#C8871B; --c-chiang-mai:#9A5B2E; --c-singapore:#A8478A;
  --c-kuala-lumpur:#B8912E; --c-ho-chi-minh:#B03A2E; --c-bali:#C9683F;
  --c-phuket:#1F7A8C; --c-pattaya:#7A4FA3; --c-hua-hin:#6E8B3D;
  --c-koh-samui:#12A08C;

  /* type */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* scale — wide contrast on purpose */
  --t-display:clamp(40px,6.2vw,68px);
  --t-h1:clamp(30px,4vw,44px);
  --t-h2:26px; --t-h3:19px;
  --t-body:18px; --t-small:15px; --t-micro:12.5px;

  /* space, radius, shadow */
  --s1:4px; --s2:8px; --s3:12px; --s4:20px; --s5:32px; --s6:52px; --s7:84px;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(15,35,30,.05),0 10px 28px -14px rgba(15,35,30,.16);
  --measure:66ch;

  color-scheme:light;
}

/* The dark palette, defined once and applied to both dark states below. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B1512; --surface:#111F1B; --surface-2:#182B26; --surface-3:#20372F;
    --ink:#E7F0EC; --ink-soft:#A5BBB4; --ink-faint:#7A928B;
    --rule:#26403A; --rule-soft:#1C302B;
    --accent:#7FCBB6; --accent-hover:#9FE0CC; --accent-on:#08120F;
    --accent-tint:#16302A;
    --gold:#E2AC55; --gold-tint:#2A2113; --gold-line:#4A3A1D;
    --ok:#63C79C; --ok-tint:#122A21;
    --warn:#E2AC55; --warn-tint:#2A2113;
    --stale:#B0A3C4; --stale-tint:#241F2B;
    --c-bangkok:#E2AC55; --c-chiang-mai:#C79463; --c-singapore:#D08FBB;
    --c-kuala-lumpur:#DDBB63; --c-ho-chi-minh:#DD8272; --c-bali:#E59B79;
    --c-phuket:#6FB5C4; --c-pattaya:#B98FD4; --c-hua-hin:#A9C46E;
    --c-koh-samui:#66D3C2;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1512; --surface:#111F1B; --surface-2:#182B26; --surface-3:#20372F;
  --ink:#E7F0EC; --ink-soft:#A5BBB4; --ink-faint:#7A928B;
  --rule:#26403A; --rule-soft:#1C302B;
  --accent:#7FCBB6; --accent-hover:#9FE0CC; --accent-on:#08120F;
  --accent-tint:#16302A;
  --gold:#E2AC55; --gold-tint:#2A2113; --gold-line:#4A3A1D;
  --ok:#63C79C; --ok-tint:#122A21;
  --warn:#E2AC55; --warn-tint:#2A2113;
  --stale:#B0A3C4; --stale-tint:#241F2B;
  --c-bangkok:#E2AC55; --c-chiang-mai:#C79463; --c-singapore:#D08FBB;
  --c-kuala-lumpur:#DDBB63; --c-ho-chi-minh:#DD8272; --c-bali:#E59B79;
  --c-phuket:#6FB5C4; --c-pattaya:#B98FD4; --c-hua-hin:#A9C46E;
  --c-koh-samui:#66D3C2;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
     font-family:var(--sans);font-size:var(--t-body);line-height:1.65;
     -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.14;letter-spacing:-.015em;
            text-wrap:balance;margin:0}
p{max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:3px}
img{max-width:100%;height:auto}

/* Every interactive element has a designed focus state, not the browser default. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

/* prefers-reduced-motion DISABLES motion. Not reduces — disables. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
           background:var(--accent);color:var(--accent-on);
           padding:var(--s3) var(--s4);border-radius:0 0 var(--r-sm) 0;
           font-size:var(--t-small);font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
                 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT — section, don't compress
   ============================================================ */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.section{padding-top:var(--s7)}
.section:last-child{padding-bottom:var(--s7)}

.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);
          padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
/* Structural numbering. The eleven book sections are a fixed sequence every
   guide shares, so the numbers are true, not decorative. */
.sec-num{font-family:var(--mono);font-size:var(--t-small);font-weight:600;
         color:var(--accent);font-variant-numeric:tabular-nums}
.sec-head h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);margin:var(--s5) 0 var(--s3)}

.eyebrow{font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;
         text-transform:uppercase;color:var(--ink-faint)}
.lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink-soft);
      max-width:var(--measure);margin:0}
.note{font-size:var(--t-small);color:var(--ink-soft);max-width:var(--measure)}
.prose{font-family:var(--serif);max-width:var(--measure)}

/* Full-bleed alternating ground. Each block gets one job and its own ground. */
.bleed{background:var(--surface-2);border-block:1px solid var(--rule);
       margin-top:var(--s7);padding:var(--s6) 0}
.bleed .wrap{padding-inline:var(--s4)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}

/* ============================================================
   SITE HEADER / FOOTER
   ============================================================ */
.masthead{border-bottom:1px solid var(--rule);background:var(--ground);
          position:sticky;top:0;z-index:40}
.masthead .wrap{display:flex;align-items:center;gap:var(--s4);
                min-height:60px;flex-wrap:wrap}
.wordmark{font-weight:700;font-size:17px;letter-spacing:-.02em;
          color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--accent)}
.masthead nav{display:flex;gap:var(--s4);flex-wrap:wrap;
              font-size:var(--t-small);font-weight:600}
.masthead nav a{color:var(--ink-soft);text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--accent)}
.masthead .spacer{margin-left:auto}
.masthead-tools{display:flex;align-items:center;gap:var(--s3)}

.site-footer{margin-top:var(--s7);border-top:1px solid var(--rule);
             padding:var(--s5) 0 var(--s6);
             font-size:var(--t-small);color:var(--ink-faint)}
.site-footer p{max-width:none}
.site-footer a{color:var(--ink-soft)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);
              margin-bottom:var(--s3);padding:0;list-style:none}

/* Language switcher — visible on every page, resolves to the equivalent page. */
.lang-switch{display:flex;gap:2px;align-items:center;
             border:1px solid var(--rule);border-radius:999px;padding:3px;
             background:var(--surface)}
.lang-switch a,.lang-switch span{font-size:var(--t-micro);font-weight:700;
             letter-spacing:.06em;text-transform:uppercase;
             padding:4px 10px;border-radius:999px;text-decoration:none;
             color:var(--ink-soft);white-space:nowrap}
.lang-switch [aria-current="true"]{background:var(--accent);color:var(--accent-on)}

/* Theme toggle — three states: explicit light, explicit dark, system default. */
.theme-toggle{display:flex;gap:2px;background:var(--surface);
              border:1px solid var(--rule);border-radius:999px;padding:3px}
.theme-toggle button{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
              border:0;background:transparent;color:var(--ink-soft);
              padding:4px 10px;border-radius:999px;cursor:pointer;line-height:1.4}
.theme-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--s7) 0 var(--s6)}
.display{font-size:var(--t-display);font-weight:700;margin:var(--s4) 0 var(--s4);
         line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.display em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:21px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
              margin-top:var(--s5)}

/* ============================================================
   BUTTONS — jade marks what you can act on, and nothing else
   ============================================================ */
.btn{display:inline-block;font-family:var(--sans);font-size:var(--t-small);font-weight:600;
     padding:11px 22px;border-radius:var(--r-sm);border:1px solid transparent;
     cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;
     text-align:center}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent)}

/* ============================================================
   THE CHECK CHIP — the most important component on the site.
   Deliberate disclosure, never a warning. Never red, never an
   alert icon, never apologetic. Always paired with its word,
   so nothing is conveyed by colour alone.
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
      font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      padding:4px 10px;border-radius:999px;border:1px solid transparent;
      white-space:nowrap}
.chip-check{background:var(--gold-tint);color:var(--gold);border-color:var(--gold-line)}
.chip-ok{background:var(--ok-tint);color:var(--ok);border-color:currentColor}
.chip-stale{background:var(--stale-tint);color:var(--stale);border-color:currentColor}

/* ============================================================
   THE FACT LINE — no figure appears on the site without a date
   ============================================================ */
.fact{border-left:3px solid var(--accent);background:var(--surface);
      padding:var(--s3) var(--s4);border-radius:0 var(--r) var(--r) 0;
      margin-bottom:var(--s3);max-width:var(--measure)}
.fact .claim{font-family:var(--serif);font-size:17px;line-height:1.5}
.fact .val{font-family:var(--mono);font-weight:600;color:var(--ink);
           font-variant-numeric:tabular-nums}
.fact .meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s2);
            font-size:var(--t-micro);color:var(--ink-faint);align-items:center}
.fact .meta a{color:var(--ink-faint)}

/* ============================================================
   CITY CARDS — the accent is a rail, never a background fill.
   Ten background colours on one page is chaos; ten 4px rails
   is a system.
   ============================================================ */
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.city{background:var(--surface);border:1px solid var(--rule);
      border-left:4px solid var(--rail);border-radius:var(--r);
      padding:var(--s3) var(--s4);text-decoration:none;color:inherit;display:block;
      transition:border-color .15s}
a.city:hover{border-color:var(--rule);border-left-color:var(--rail);box-shadow:var(--shadow)}
.city b{display:block;font-size:17px;font-weight:700}
.city span{display:block;font-family:var(--mono);font-size:var(--t-micro);
           color:var(--rail);font-weight:600;margin-top:2px}
.city em{display:block;font-style:normal;font-size:var(--t-small);
         color:var(--ink-soft);margin-top:var(--s2)}

/* ============================================================
   THE BAND TABLE — scrolls inside its own container so the page
   body never scrolls sideways. Tabular numerals throughout.
   ============================================================ */
.tbox{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);
      background:var(--surface);box-shadow:var(--shadow);
      -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:620px;
      font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:var(--t-small);color:var(--ink-soft);
        padding:var(--s3) var(--s3) 0}
thead th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
         font-weight:700;color:var(--ink-faint);background:var(--surface-2);
         padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule);white-space:nowrap}
tbody td,tbody th{padding:var(--s3);border-bottom:1px solid var(--rule-soft);
                  vertical-align:top;text-align:left}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.num,th.num{font-family:var(--mono);white-space:nowrap}
/* Band colour as a left rail rather than a filled cell. */
th.band,td.band{white-space:nowrap;font-weight:600;
                border-left:4px solid var(--rail);padding-left:var(--s3)}

/* ============================================================
   PRICING
   ============================================================ */
.price-card{background:var(--surface);border:1px solid var(--rule);
            border-radius:var(--r);padding:var(--s4);display:flex;
            flex-direction:column;gap:var(--s2)}
.price-card.is-feature{border-color:var(--accent);box-shadow:var(--shadow)}
.price-card h3{margin:0;font-size:var(--t-h3)}
.price-card .amount{font-family:var(--mono);font-size:28px;font-weight:600;
                    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-card .amount small{font-size:var(--t-micro);font-weight:400;
                          color:var(--ink-faint);letter-spacing:0}
.price-card p{font-size:var(--t-small);color:var(--ink-soft);margin:0;flex:1}
.price-card .btn{margin-top:var(--s3)}

/* ============================================================
   MOTION — restrained to the point of near-invisibility, and
   always from a VISIBLE resting state so first paint and the
   page thumbnail are never blank.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:reveal linear both;animation-timeline:view();
            animation-range:entry 0% entry 40%}
    @keyframes reveal{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
  }
}

/* ============================================================
   FRENCH — every component is tested at French string lengths,
   which run 15–20% longer than English.
   ============================================================ */
:lang(fr) .display{max-width:18ch}

/* ============================================================
   STYLEGUIDE — only used by the /design-system page
   ============================================================ */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.sw{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sw i{display:block;height:56px}
.sw b{display:block;font-size:var(--t-micro);font-weight:600;padding:var(--s2) var(--s3) 0}
.sw code{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
         padding:0 var(--s3) var(--s2)}

.spec{border-left:3px solid var(--rule);padding-left:var(--s4);margin-bottom:var(--s5)}
.spec .label{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
             color:var(--ink-faint);font-weight:700;margin-bottom:var(--s2)}
.serif-demo{font-family:var(--serif);font-size:var(--t-body);max-width:var(--measure)}

/* ============================================================
   LEGAL PAGES — long prose, read rather than scanned
   ============================================================ */
/* A document, not a dashboard: one reading column centred in the viewport.
   The rest of the site is left-aligned because grids, tables and card decks
   fill the width. A page that is nothing but prose has nothing to fill it
   with, so constraining the text inside a 1120px container just pins it to
   the left edge with half the screen empty. Here the CONTAINER is the
   measure, and everything inside fills it. */
.legal{max-width:calc(var(--measure) + var(--s5) * 2);margin-inline:auto}
.legal .prose,
.legal .prose p,
.legal .prose li,
.legal .prose ul,
.legal .lede,
.legal .legal-summary,
.legal dl{max-width:none}

.legal .prose h2{font-family:var(--sans);font-size:var(--t-h3);
                 margin:var(--s6) 0 var(--s3)}
.legal .prose h3{font-size:17px;margin:var(--s5) 0 var(--s2)}
.legal .prose p,.legal .prose li{font-family:var(--serif);font-size:17px;
                                 line-height:1.65}
.legal .prose ul{padding-left:var(--s4)}

/* The masthead stays full width; only the document column narrows. */
.legal .hero{padding-bottom:0}
.legal .display{max-width:none}
/* The summary box already separates the title from the body; the first
   heading does not need another 52px on top of it. */
.legal .prose > h2:first-child{margin-top:var(--s5)}
.legal .prose li{margin-bottom:var(--s2)}
.legal .prose strong{font-weight:600}
.legal dl{margin:var(--s4) 0}
.legal dt{font-family:var(--sans);font-size:var(--t-small);font-weight:700;
          letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);
          margin-top:var(--s3)}
.legal dd{font-family:var(--serif);font-size:17px;margin:2px 0 0}

/* An unconfirmed company detail must be impossible to miss in review. */
.pending{background:var(--gold-tint);color:var(--gold);
         border:1px dashed var(--gold-line);border-radius:var(--r-sm);
         padding:1px 6px;font-family:var(--mono);font-size:13px;font-weight:600}

/* The summary that opens each legal page: the honest one-paragraph version. */
.legal-summary{border-left:3px solid var(--accent);background:var(--surface);
               padding:var(--s4);border-radius:0 var(--r) var(--r) 0;
               margin:var(--s5) 0}
.legal-summary p{font-family:var(--sans);font-size:var(--t-small);margin:0}
.legal-summary p + p{margin-top:var(--s2)}