/*
 * Fieldguide × Zazz 0.5.4
 * Uses Zazz semantic roles, shared control metrics, native progress, button and
 * badge primitives. Works online with the pinned CSS kit; graceful offline
 * rendering is provided here and in the original legacy layout layer.
 * Documentation: https://www.zazz.sh/docs/getting-started/overview
 */
@layer variables, reset, vendors, legacy, zazz, overrides;
@layer variables {
  :root {
    /* Zazz semantic roles, with two-sided light-dark values for future theming. */
    --background: light-dark(#f7f8f4, #14251c);
    --foreground: light-dark(#20372a, #f1f5ee);
    --card: light-dark(#ffffff, #1d3327);
    --card-foreground: light-dark(#20372a, #f1f5ee);
    --primary: light-dark(#28563c, #96c49f);
    --primary-foreground: light-dark(#f7faf5, #193b2a);
    --secondary: light-dark(#eaf1e4, #2a4534);
    --secondary-foreground: light-dark(#2a5038, #e1f1dc);
    --muted: light-dark(#edf2eb, #263b2f);
    --muted-foreground: light-dark(#647468, #b6c8b9);
    --border: light-dark(#e2e9df, #385143);
    --ring: light-dark(#93b291, #9ac3a0);
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 17px;
    --radius-xl: 22px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;
    /* One rhythm for buttons, forms, selects and fields. */
    --ui-field-radius: var(--radius-md);
    --ui-field-block-size: 46px;
    --ui-field-padding: 15px;
    --ui-field-font-size: 13px;
    --ui-button-radius: var(--ui-field-radius);
    --ui-button-block-size: var(--ui-field-block-size);
    --ui-button-padding: var(--ui-field-padding);
    --ui-button-font-size: 13px;
    --ui-button-font-weight: 675;
    --ui-button-gap: 8px;
    --ui-button-icon-size: 18px;
    --ui-progress-track-background: #e0e9dc;
    --ui-progress-bar-background: #52795b;
    --ui-progress-block-size: 6px;
    --ui-progress-radius: 999px;
  }
}
@layer overrides {
  /* Single token surface controls the Fieldguide's historical classes. */
  :root {
    color-scheme: light;
    --bg:var(--background); --paper:var(--card); --ink:var(--foreground);
    --ink-2:#496253; --fieldguide-muted-text:#65786a; --line:var(--border);
    --green:var(--primary); --green-2:#38694a;
    --tint:#eaf2e6; --tint2:#f1f6ed; --lime:#e3edcd;
    --shadow:0 4px 18px rgba(33,65,42,.028);
    --radius:var(--radius-lg);
    --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --serif:Georgia,"Iowan Old Style", "Palatino Linotype",serif;
    --sidebar:246px;--max:1110px;
  }
  html { scroll-padding-top: 75px; }
  body { background:var(--background); color:var(--foreground); font-family:var(--sans); }
  :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--ring); outline-offset:3px;}
  .page-title{letter-spacing:-.045em; font-weight:600;}
  .page-intro{font-size:14px; line-height:1.75;}
  .eyebrow{font-size:10px;letter-spacing:.15em;color:#557b60}
  .sidebar{background:#fcfdf9;border-color:var(--border);padding-inline:20px}
  .brand{font-weight:780;letter-spacing:-.05em}
  .brand-mark{border-radius:11px;background:var(--primary);color:var(--primary-foreground)}
  .side-label{color:#99a99a}
  .side-link{border-radius:12px;transition:background-color .14s, color .14s}
  .side-link.active{background:var(--secondary); color:#2a593d}
  .side-link:hover{background:var(--muted)}
  .card,.detail-panel,.aside-card{border-color:var(--border);box-shadow:var(--shadow);background:var(--card);}
  .card.hoverable:hover{box-shadow:0 12px 32px rgba(27,55,35,.065);border-color:#c1d1bf}
  .badge-icon{background:#eff4ec;color:#668c6b;border-radius:12px}
  /* Apply Zazz .ui-button tokens and use native data variants for visual state. */
  .ui-button.btn{min-block-size:46px;min-inline-size:0;padding:10px 17px;border:1px solid transparent;border-radius:var(--ui-button-radius);font-family:var(--sans);font-size:13px;font-weight:675;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .15s,border-color .15s,transform .12s;text-align:center;text-decoration:none;cursor:pointer}
  .ui-button.btn[data-variant="primary"]{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);--ui-button-background:var(--primary);--ui-button-foreground:var(--primary-foreground)}
  .ui-button.btn[data-variant="primary"]:hover{background:#347049;color:white;border-color:#347049}
  .ui-button.btn[data-variant="muted"]{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--secondary);--ui-button-background:var(--secondary);--ui-button-foreground:var(--secondary-foreground)}
  .ui-button.btn[data-variant="muted"]:hover{background:#dfebd9;color:#224c34}
  .ui-button.btn[data-variant="outline"]{background:var(--card);color:#2c5b3e;border-color:#d8e5d5;--ui-button-background:var(--card);--ui-button-foreground:#2c5b3e;--ui-button-border-color:#d8e5d5}
  .ui-button.btn[data-variant="outline"]:hover{background:#f2f7ef;color:#2c5b3e;border-color:#bdd5b9}
  .ui-button.btn[data-variant="ghost"]{background:transparent;color:var(--primary);border-color:transparent;--ui-button-background:transparent;--ui-button-foreground:var(--primary)}
  .ui-button.btn[data-variant="ghost"]:hover{background:var(--muted);color:var(--foreground)}
  .ui-button.btn[data-size="sm"]{min-block-size:38px;padding:9px 13px;font-size:12px;border-radius:10px}
  .ui-button.btn.block{width:100%;}
  .ui-button.btn:disabled{opacity:.45;cursor:not-allowed}
  .icon-btn.ui-button{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;padding:0;border-radius:13px;background:white;border:1px solid var(--border);color:#41614b;display:grid;place-items:center;--ui-button-background:white;--ui-button-foreground:#41614b}
  .icon-btn.ui-button:hover{background:var(--secondary);color:#265236}
  /* Zazz badge primitive, preserving original status meanings. */
  .ui-badge.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 10px;background:#f2f5f0;color:#5d7563;border:1px solid transparent;font-size:11px;font-weight:650;line-height:1.25;white-space:normal}
  .ui-badge.pill.good{background:#e9f4e8;color:#346d46}
  .ui-badge.pill.warn{background:#fff4e4;color:#956b3e}
  .ui-badge.pill.dark{background:var(--primary);color:white}
  .ui-badge.pill.outline{border-color:var(--border);background:transparent}
  /* Zazz inputs and layout: keep dense filters readable on narrow screens. */
  .ui-input.form-input,.ui-input.form-select,.ui-input.form-textarea{border:1px solid #dae4d7;border-radius:var(--ui-field-radius);background:var(--card);color:var(--foreground);min-block-size:var(--ui-field-block-size);font-size:13px;padding:11px 14px;box-shadow:none;width:100%}
  .ui-input.form-textarea{min-height:95px;line-height:1.6}
  .ui-input.form-input:focus,.ui-input.form-select:focus,.ui-input.form-textarea:focus{border-color:#83a983;box-shadow:0 0 0 3px #99be9924}
  .searchbox .ui-input.form-input{padding-left:43px}
  .filter-row .ui-input.form-select{width:auto;max-width:100%}
  /* Native progress: Zazz component + cross-browser fallback when offline. */
  progress.ui-progress{display:block;box-sizing:border-box;inline-size:100%;block-size:var(--ui-progress-block-size);height:var(--ui-progress-block-size);margin:0;overflow:hidden;border:0;border-radius:var(--ui-progress-radius);appearance:none;background:var(--ui-progress-track-background);accent-color:var(--ui-progress-bar-background)}
  progress.ui-progress::-webkit-progress-bar{background:var(--ui-progress-track-background);border-radius:inherit}
  progress.ui-progress::-webkit-progress-value{background:var(--ui-progress-bar-background);border-radius:inherit}
  progress.ui-progress::-moz-progress-bar{background:var(--ui-progress-bar-background);border-radius:inherit}
  .sidebar-progress{margin:12px 0 8px!important}
  .meter .ui-progress{flex:1}
  .pillar-bar .ui-progress{min-width:100px}
  /* Explore segmentation follows Zazz's pill/variant approach without a JS dependency. */
  .segmented{padding:4px;border-radius:14px;background:#eaf0e7;gap:3px}
  .segment{border-radius:10px;min-height:43px;color:#708174;font-weight:650}
  .segment.active{background:white;color:var(--primary);box-shadow:0 2px 9px #25452d13}
  .chip{border-radius:999px;background:var(--card);border-color:var(--border);font-weight:650}
  .chip.active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
  /* Surface hierarchy / editorial tone */
  .hero{background:linear-gradient(115deg,#224735 0%,#28523e 60%,#345943 100%);border:1px solid #2e5943;border-radius:var(--radius-xl);box-shadow:0 11px 25px rgba(34,65,42,.06)}
  .hero .eyebrow{color:#d1e5c0}
  .hero .btn[data-variant="primary"]{background:#e5efcd;border-color:#e5efcd;color:#254734;--ui-button-background:#e5efcd;--ui-button-foreground:#254734}
  .hero .btn[data-variant="primary"]:hover{background:#f2f7de;color:#254734;border-color:#f2f7de}
  .hero .btn.hero-secondary{color:#f6f8ed;border-color:#96b5a16b;background:transparent;--ui-button-foreground:#f6f8ed}
  .hero .btn.hero-secondary:hover{background:#e8f3de1d;color:white;border-color:#bdceb1}
  .hero-stats .card{box-shadow:0 4px 16px #2e4d3210;border-color:#e4ebe1}
  .hero-stats .stat-value{font-weight:670;letter-spacing:-.045em}
  .intro-quote{background:#eef3e9}
  .activity-row:hover{background:#f8fbf7}
  .detail-hero,.scenario-head{border-radius:var(--radius-xl)}
  .completion-box{border-radius:14px}
  .tree-diagram{border-color:var(--border);border-radius:var(--radius-lg)}
  .tree-node{border-radius:13px}
  .tree-node:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
  .tree-summary{border-radius:14px;background:#edf5e9}
  .bottom-link{min-height:48px}
  .mobile-action{background:#ffffffee}
  /* WCAG: respect 44px minimum touch areas for primary navigation. */
  @media(max-width:690px){
    .mobile-head{background:#fcfdf9;border-color:var(--border)}
    .bottom-nav{background:#fffffff2;border-color:var(--border)}
    .bottom-link{min-height:51px}
    .page-wrap{padding-left:18px;padding-right:18px}
    .hero{border-radius:18px;padding:29px 24px}
    .hero h1{font-size:clamp(36px,9.4vw,44px)}
    .hero .hero-actions{display:flex;flex-wrap:wrap;gap:8px}
    .hero .hero-actions .ui-button.btn{min-block-size:45px;flex:1 1 auto}
    .ui-button.btn:not([data-size="sm"]){min-block-size:45px}
    .detail-hero,.scenario-head{border-radius:17px}
    .mobile-action .ui-button.btn{min-block-size:49px}
    .tree-diagram{border-radius:15px}
    .tree-node{min-height:65px}
    .segment{min-height:45px}
  }
  @media(min-width:376px) and (max-width:690px){.hero .hero-actions{flex-wrap:nowrap}.hero .hero-actions .ui-button.btn{flex:1 1 0;padding-inline:8px;font-size:12px;white-space:nowrap}}
  @media(max-width:375px){.page-wrap{padding-inline:13px}.hero{padding:24px 19px}.hero h1{font-size:35px}.hero-actions .ui-button.btn{font-size:12px}}
  @media(prefers-reduced-motion:reduce){.ui-button.btn,.card.hoverable{transition:none}}
}