/* Lexend — self-hosted variable font (weights 100–900) */
@font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/lexend-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/lexend-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

  :root{
    --red:#d50000;        /* Te Whai Ao — Māori flag red */
    --red-deep:#a30000;   /* deeper red for text/hover on light backgrounds */
    --red-tint:#fdeaea;   /* light red wash for callouts */
    --red-bright:#ff5252; /* legible red accent on the dark anthracite blocks */
    --ink:#2D3031;        /* Te Korekore — near-black anthracite */
    --paper:#f4f6f7;
    --card:#ffffff;
    --line:#e3e7e9;
    --muted:#6b7278;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
  }

  /* ── Hero (full-bleed anthracite + blue accent bar) ── */
  header.hero{
    background:var(--ink);
    color:#fff;
    padding:2.6rem 1.5rem 2.1rem;
    text-align:center;
    border-bottom:4px solid var(--red);
  }
  header.hero h1{margin:0;font-size:2rem;font-weight:700;letter-spacing:.3px}
  header.hero p{margin:.6rem auto 0;max-width:660px;color:#c9ced1;font-size:1rem;font-weight:400}
  header.hero .kia{font-size:1.05rem;font-weight:600;margin-top:.9rem;color:var(--red-bright)}

  /* ── Sticky search toolbar ── */
  .toolbar{
    position:sticky;top:0;z-index:20;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    padding:.7rem 1rem;
  }
  .toolbar .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
  .search-wrap{position:relative;flex:1;min-width:220px}
  .search-wrap svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:var(--muted)}
  #q{
    width:100%;padding:.6rem .9rem .6rem 2.3rem;font-family:inherit;font-size:1rem;
    color:var(--ink);border:1.5px solid var(--line);border-radius:8px;background:#fbfcfc;
    outline:none;transition:border-color .15s,box-shadow .15s;
  }
  #q:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(213,0,0,.18)}
  #count{font-size:.82rem;color:var(--muted);white-space:nowrap;min-width:70px;text-align:right}
  .hint{font-size:.78rem;color:var(--muted);white-space:nowrap}
  .hint kbd{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:.05rem .35rem;font-family:inherit;font-size:.72rem}

  main{max-width:1100px;margin:0 auto;padding:1.4rem}

  /* ── Golden rules (info callout) ── */
  .rules{
    background:var(--red-tint);border:1px solid #f3c9c9;border-left:4px solid var(--red);
    border-radius:10px;padding:1rem 1.2rem;margin:0 0 1.4rem;break-inside:avoid;
  }
  .rules h2{margin:0 0 .5rem;color:var(--red-deep);font-size:1.05rem;font-weight:600}
  .rules ul{margin:.2rem 0 0;padding-left:1.2rem}
  .rules li{margin:.3rem 0;font-size:.92rem}
  .rules li::marker{color:var(--red)}
  .rules b{color:var(--ink)}

  /* ── Section dividers (H1 with blue accent bar) ── */
  .section-title{
    grid-column:1/-1;margin:1.7rem 0 .1rem;font-size:.82rem;font-weight:600;
    text-transform:uppercase;letter-spacing:2px;color:var(--ink);
    padding:.15rem 0 .15rem .7rem;border-left:5px solid var(--red);
  }

  /* ── Cards ── */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem}
  .card{
    background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);
    border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);break-inside:avoid;
  }
  .card h2{
    margin:0;padding:.7rem 1rem .55rem;font-size:1.02rem;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .card h2 .en{font-weight:400;color:var(--muted);font-size:.82rem}
  .card .body{padding:.35rem 1rem 1rem}

  table{width:100%;border-collapse:collapse;font-size:.9rem}
  td{padding:.34rem .25rem;vertical-align:top;border-bottom:1px solid #f0f2f3}
  tr:last-child td{border-bottom:none}
  td.mi{font-weight:600;color:var(--ink);white-space:nowrap;width:42%;cursor:pointer;border-radius:4px}
  td.mi:hover{color:var(--red-deep);background:var(--red-tint)}
  td.en{color:var(--muted)}
  td.say{color:var(--red);font-size:.82rem}
  .full td.mi{width:auto}
  .note{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}

  /* ── Proverbs (dark quote block) ── */
  .proverbs{margin-top:1.7rem;background:var(--ink);color:#eef0f1;border-radius:10px;padding:1.3rem 1.5rem;break-inside:avoid;border-left:5px solid var(--red)}
  .proverbs h2{margin:0 0 .8rem;color:var(--red-bright);font-size:1.1rem;font-weight:600}
  .proverbs blockquote{margin:0 0 1rem;border-left:3px solid var(--red);padding-left:1rem}
  .proverbs blockquote:last-child{margin-bottom:0}
  .proverbs .mi{font-weight:600;color:#fff}
  .proverbs .tr{color:#b9bec1;font-size:.9rem;margin-top:.15rem}

  /* ── No-results ── */
  #noresults{display:none;text-align:center;color:var(--muted);padding:2.5rem 1rem;font-size:1rem}

  footer{text-align:center;color:var(--muted);font-size:.8rem;padding:1.6rem 1rem 3rem}
  .badge{display:inline-block;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:1px;padding:.12rem .45rem;border-radius:4px;vertical-align:middle}

  /* ── Back to top ── */
  #btt{
    position:fixed;right:1.1rem;bottom:1.1rem;z-index:30;display:none;
    width:44px;height:44px;border:none;border-radius:50%;background:var(--red);color:#fff;
    cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);
    font-size:1.2rem;
  }
  #btt:hover{background:var(--red-deep)}

  /* ── Copy toast ── */
  #toast{
    position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:40;
    background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.85rem;
    opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.3);
  }

  @media print{
    .toolbar,#btt,#toast{display:none !important}
    header.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .card,.rules,.proverbs{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    main{max-width:none;padding:.4rem}.grid{gap:.6rem}body{font-size:11px;background:#fff}
  }