/* nnh-system.css — Claude Design system, palette rebound to live NNH values.
   Source: handoff/styles.css. Spec selectors verbatim below; bridge rules
   at the end apply the same design to existing live class names. */
/* ============================================================
   Native New Hampshire — design tokens
   Breakpoints (used in @media below, mirrored here as reference):
   --bp-tablet: 960px   --bp-phone: 720px
   ============================================================ */
:root{
  /* Brand palette — the only colors in the system */
  --blue:#29597F;        /* hero bands, CTA band */
  --blue-deep:#22334A;   /* topbar, footer, primary buttons, body ink */
  --blue-deeper:#182739; /* primary button hover */
  --sky:#1F6FA8;         /* links, active nav */
  --sky-dark:#174F78;    /* link hover */
  --sky-tint:#E9F2F8;    /* info chips, tints */
  --sky-soft:#C9DAEA;    /* text on blue */
  --amber:#F5A93B;       /* stars, logo mountain, gold CTA on blue */
  --gold:#B8791E;        /* charm text, "locals know" ink */
  --gold-tint:#FDF3E0;   /* charm boxes */
  --gold-line:#F0DDB8;   /* charm borders */
  --coral:#E8862E;       /* primary CTA, squiggles, active underline */
  --coral-dark:#D1751F;  /* CTA hover */
  --green:#3E7A34; --green-tint:#EAF3E6; --green-line:#CBE2C2;
  --red:#A65D4E; --red-tint:#FBEAE6;
  --paper:#FAF6EE;       /* page background */
  --white:#FFFFFF;
  --ink:#22334A; --ink-head:#1C2B40; --ink-body:#3B4C64; --ink-mid:#42546E; --ink-soft:#5C6B82;
  --hairline-color:#EAE2D3; --field-line:#D8CFBC;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;

  /* Layout measurements (desktop) */
  --content-width:1180px;      /* boxed content column */
  --container-pad:32px;        /* container side padding */
  --sidebar-width:224px;       /* dashboard sidebar */
  --gutter:36px;               /* sidebar ↔ main gap */
  --section-stack:24px;        /* vertical gap between stacked containers */
  --banner-h:280px;            /* profile banner desktop (1180×280) */
  --banner-h-phone:220px;      /* profile banner phone (390×220) */

  /* Borders, radii, shadows */
  --bw-hairline:1px; --bw-strong:1.5px;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --shadow-card:0 4px 12px rgba(34,48,60,.06);
  --shadow-btn:0 2px 6px rgba(18,75,112,.25);
  --shadow-cta:0 2px 6px rgba(254,104,71,.3);
  --shadow-pop:0 12px 32px rgba(15,32,52,.25);

  /* Type scale: size / line-height. Headings: Bricolage Grotesque. Body: Public Sans. */
  --fs-display:32px; --lh-display:1.2;
  --fs-h1:26px; --lh-h1:1.25;
  --fs-h2:19px; --lh-h2:1.3;
  --fs-h3:16px; --lh-h3:1.35;
  --fs-body:14.5px; --lh-body:1.65;
  --fs-small:13px; --lh-small:1.55;
  --fs-micro:11px; --lh-micro:1.4;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) "Public Sans",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Bricolage Grotesque",sans-serif;color:var(--ink-head);margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:800;letter-spacing:-0.3px}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:800}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700}
p{margin:0 0 var(--sp-3)}
a{color:var(--sky);text-decoration:none}
a:hover{color:var(--sky-dark);text-decoration:underline}

/* Chrome */
.topbar{background:var(--blue-deep);color:var(--sky-soft);font-size:12.5px;display:flex;justify-content:space-between;align-items:center;padding:8px var(--container-pad);gap:16px}
.topbar a{color:var(--sky-soft)}
.topbar-links{display:flex;gap:20px}
.mainnav{background:var(--white);border-bottom:var(--bw-hairline) solid var(--hairline-color)}
.mainnav-inner{max-width:var(--content-width);margin:0 auto;padding:0 var(--container-pad);display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px}
.brand:hover{text-decoration:none;color:var(--ink)}
.navlinks{display:flex;gap:22px;font-size:14.5px;font-weight:600}
.navlinks a{color:var(--ink-mid);padding:20px 0}
.navlinks a:hover{color:var(--ink);text-decoration:none}
.navlinks a.is-active{color:var(--sky);border-bottom:2px solid var(--coral)}
.container{max-width:var(--content-width);margin:0 auto;padding:0 var(--container-pad)}
.nnh-page .page{padding:var(--sp-7) 0 var(--sp-9)}
.stack>*+*{margin-top:var(--section-stack)}
.footer{background:var(--blue-deep);color:var(--sky-soft);padding:var(--sp-9) var(--container-pad) 28px;margin-top:var(--sp-10)}
.footer a{color:var(--sky-soft)}
.footer-bottom{border-top:1px solid color-mix(in srgb, var(--sky-soft) 30%, var(--blue-deep));padding-top:var(--sp-5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;max-width:var(--content-width);margin:0 auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1 "Public Sans",sans-serif;padding:12px 22px;border-radius:var(--r-pill);border:var(--bw-strong) solid transparent;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:0.45;pointer-events:none}
.btn-primary{background:var(--blue-deep);color:var(--white);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--blue-deeper);color:var(--white)}
.btn-cta{background:var(--coral);color:var(--white);box-shadow:var(--shadow-cta)}
.btn-cta:hover{background:var(--coral-dark);color:var(--white)}
.btn-gold{background:var(--amber);color:var(--ink)}
.btn-gold:hover{background:color-mix(in srgb, var(--amber) 92%, #000);color:var(--ink)}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--field-line);font-weight:600}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-danger-quiet{background:var(--white);color:var(--red);border-color:color-mix(in srgb, var(--red) 30%, #FFF);font-weight:600}
.btn-danger-quiet:hover{background:var(--red-tint)}
.btn-sm{padding:8px 16px;font-size:12.5px}

/* Forms */
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--ink-soft);margin-top:5px}
.field .hint-charm{font-size:12px;font-style:italic;color:var(--gold);margin-top:5px}
.input,.select,.textarea{width:100%;border:var(--bw-hairline) solid var(--field-line);border-radius:var(--r-md);padding:11px 14px;font:400 14px/1.5 "Public Sans",sans-serif;color:var(--ink);background:color-mix(in srgb, var(--paper) 20%, var(--white))}
.select{font-weight:600;background:var(--white)}
.textarea{min-height:96px;resize:vertical;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--coral);outline-offset:1px}
.input.is-error,.textarea.is-error{border-color:var(--red);background:var(--red-tint)}
.error-text{font-size:12px;color:var(--red);font-weight:600;margin-top:5px}
.input:disabled,.select:disabled,.textarea:disabled{opacity:0.5;background:var(--hairline-color)}

/* Cards & containers */
.card{background:var(--white);border:var(--bw-hairline) solid var(--hairline-color);border-radius:var(--r-lg);padding:22px 24px}
.card:hover.card-link{border-color:var(--coral);box-shadow:var(--shadow-card)}
.card-charm{background:var(--gold-tint);border:var(--bw-hairline) solid var(--gold-line);border-radius:var(--r-md);padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--gold)}
.card-dashed{border:var(--bw-strong) dashed var(--field-line);border-radius:var(--r-lg);padding:18px 20px}
.squiggle{display:block;margin-top:6px}

/* Badges */
.badge{display:inline-block;font:800 var(--fs-micro)/var(--lh-micro) "Public Sans",sans-serif;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill)}
.badge-green{background:var(--green-tint);color:var(--green)}
.badge-blue{background:var(--sky-tint);color:var(--sky)}
.badge-gold{background:var(--gold-tint);color:var(--gold)}
.badge-gray{background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));color:var(--ink-soft)}
.badge-coral{background:var(--coral);color:var(--white)}

/* Notices */
.notice{border-radius:var(--r-md);padding:14px 18px;font-size:13.5px;line-height:1.6;border:var(--bw-hairline) solid}
.notice-info{background:var(--sky-tint);border-color:var(--sky-soft);color:var(--ink-body)}
.notice-success{background:var(--green-tint);border-color:var(--green-line);color:var(--green)}
.notice-charm{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold)}
.notice-error{background:var(--red-tint);border-color:color-mix(in srgb, var(--red) 30%, #FFF);color:var(--red)}

/* Tabs */
.tabs{display:flex;background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));border-radius:var(--r-pill);padding:3px;gap:2px;width:max-content}
.tab{border:0;background:transparent;color:var(--ink-mid);font:700 12.5px/1 "Public Sans",sans-serif;padding:7px 16px;border-radius:var(--r-pill);cursor:pointer}
.tab.is-active{background:var(--blue-deep);color:var(--white)}
.tab:focus-visible{outline:2px solid var(--coral)}

/* Table */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font:800 10.5px/1.4 "Public Sans",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);padding:10px 12px;border-bottom:var(--bw-hairline) solid color-mix(in srgb, var(--hairline-color) 60%, var(--white))}
.table td{padding:13px 12px;border-bottom:var(--bw-hairline) solid color-mix(in srgb, var(--hairline-color) 35%, var(--white));color:var(--ink-body);vertical-align:middle}
.table tr:hover td{background:color-mix(in srgb, var(--paper) 55%, var(--white))}

/* Dashboard shell */
.dash{display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:var(--gutter);align-items:start}
.sidenav{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.sidenav-links{display:flex;flex-direction:column;gap:2px}
.sidenav-links a{color:var(--ink-mid);font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--r-md)}
.sidenav-links a:hover{background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));color:var(--ink);text-decoration:none}
.sidenav-links a.is-active{background:var(--blue-deep);color:var(--white);font-weight:700}
.sidenav-links a.subnav{font-size:13px;padding:8px 14px 8px 28px}
.sidenav-links a.subnav.is-active{background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat .label{font:800 10.5px/1.4 "Public Sans",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.stat .value{font-family:"Bricolage Grotesque",sans-serif;font-size:28px;font-weight:800;color:var(--ink-head);margin-top:6px}

/* Profile banner: 1180×280 desktop / 390×220 phone; image fills, focal point owner-set */
.banner{height:var(--banner-h);border-radius:16px;overflow:hidden;background:repeating-linear-gradient(45deg,color-mix(in srgb, var(--hairline-color) 45%, var(--paper)),color-mix(in srgb, var(--hairline-color) 45%, var(--paper)) 10px,#EDE6D6 10px,#EDE6D6 20px);display:grid;place-items:center;color:var(--ink-soft);font-size:13px}
.banner img{width:100%;height:100%;object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%)}

/* Breakpoints */
@media (max-width:960px){
  .navlinks,.topbar-links{display:none}
  header.nnh-site nav.nnh-menu{display:none}
  .nnh-topbar .links{display:none}
  .dash{grid-template-columns:1fr}
  .sidenav{position:static}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr !important}
}
@media (max-width:720px){
  :root{--container-pad:20px;--section-stack:20px}
  .banner{height:var(--banner-h-phone)}
  .stat-grid{grid-template-columns:1fr}
}

/* ===== BRIDGE: spec design -> live markup classes ===== */
.nnh-topbar a{color:var(--sky-soft)}
.nnh-topbar .links{display:flex;gap:20px}
header.nnh-site{background:var(--white);border-bottom:var(--bw-hairline) solid var(--hairline-color)}
header.nnh-site .wrap.nav{max-width:var(--content-width);margin:0 auto;padding:0 var(--container-pad);display:flex;align-items:center;gap:28px;height:64px}
header.nnh-site .logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px}
header.nnh-site .logo:hover{text-decoration:none;color:var(--ink)}
header.nnh-site nav.nnh-menu{display:flex;gap:22px;font-size:14.5px;font-weight:600}
header.nnh-site nav.nnh-menu a{color:var(--ink-mid);padding:20px 0}
header.nnh-site nav.nnh-menu a:hover{color:var(--ink);text-decoration:none}
header.nnh-site nav.nnh-menu a.on{color:var(--sky);border-bottom:2px solid var(--coral)}
.nnh-footer{background:var(--blue-deep);color:var(--sky-soft);padding:var(--sp-9) var(--container-pad) 28px;margin-top:0}
.nnh-footer a{color:var(--sky-soft)}
.nnh-footer .foot-bottom{border-top:1px solid color-mix(in srgb, var(--sky-soft) 30%, var(--blue-deep));padding-top:var(--sp-5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;max-width:var(--content-width);margin:0 auto}
.nnh-btn:hover{text-decoration:none}
.nnh-btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.nnh-btn:active{transform:translateY(1px)}
.nnh-btn[disabled],.btn.is-disabled{opacity:0.45;pointer-events:none}
.nnh-btn.primary{background:var(--blue-deep);color:var(--white);box-shadow:var(--shadow-btn)}
.nnh-btn.primary:hover{background:var(--blue-deeper);color:var(--white)}
.nnh-btn.cta, header.nnh-site .cta{background:var(--coral);color:var(--white);box-shadow:var(--shadow-cta)}
.nnh-btn.cta:hover, header.nnh-site .cta:hover{background:var(--coral-dark);color:var(--white)}
.nnh-btn.ghost{background:var(--white);color:var(--ink);border-color:var(--field-line);font-weight:600}
.nnh-btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.nnh-btn.sm{padding:8px 16px;font-size:12.5px}
.nnh-profile .sidecard:hover.card-link, .nnh-profile .fcard:hover.card-link, .nnh-ownerdash .odcard:hover.card-link, .nnh-ownerdash .fcard:hover.card-link{border-color:var(--coral);box-shadow:var(--shadow-card)}
.localnote, .nnh-charm{background:var(--gold-tint);border:var(--bw-hairline) solid var(--gold-line);border-radius:var(--r-md);padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--gold)}
.nnh-table th{text-align:left;font:800 10.5px/1.4 "Public Sans",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);padding:10px 12px;border-bottom:var(--bw-hairline) solid color-mix(in srgb, var(--hairline-color) 60%, var(--white))}
.nnh-table td{padding:13px 12px;border-bottom:var(--bw-hairline) solid color-mix(in srgb, var(--hairline-color) 35%, var(--white));color:var(--ink-body);vertical-align:middle}
.nnh-table tr:hover td{background:color-mix(in srgb, var(--paper) 55%, var(--white))}
.nnh-ownerdash .odnav-item{color:var(--ink-mid);font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--r-md)}
.nnh-ownerdash .odnav-item:hover{background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));color:var(--ink);text-decoration:none}
.nnh-ownerdash .odnav-item.on{background:var(--blue-deep);color:var(--white);font-weight:700}
.nnh-ownerdash .odsubnav-item{font-size:13px;padding:8px 14px 8px 28px}
.nnh-ownerdash .odsubnav-item.on{background:color-mix(in srgb, var(--hairline-color) 45%, var(--paper));color:var(--ink)}
/* (removed 0.43.2: a mangled copy of the 960px mobile nav-hide had escaped
   its media query and was hiding the live navigation at every width) */