/* GENERATED from frontend-category.html by build-theme.mjs. Do not edit.
   This is the template's OWN css. The rules it shares with every other template
   live in shared.inc.css and are enqueued before this one. */
/* ============================================================
     END SHARED BLOCK. Everything below belongs to this template.
     ============================================================ */

  /* ---------- term header ---------- */
  /* .crumb moved to shared.inc.css on 2026-09-08; the search template needs it too. */
  .termtop{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:5px 0 0}
  /* The term name is this page's title, so it takes the page-title step — the same
     one "Harker Email Library" takes on the homepage. Setting it a step lower made
     the whole ramp span 1.9:1 where the homepage spans 2.36:1, which reads as a flat
     hierarchy because it is one: the page simply had no type at title scale. */
  .termtop h1{margin:0;font-size:var(--t-page);font-weight:700;letter-spacing:-.02em;line-height:1.1}
  .termcount{margin:5px 0 0;font-size:var(--t-note);color:var(--ink-3);font-variant-numeric:tabular-nums}
  .termdesc{margin:9px 0 0;font-size:var(--t-note);color:var(--ink-2);max-width:66ch;line-height:1.6}

  /* Sibling terms under the same parent. A facet the visitor is standing inside,
     so the current one is a marked span, not a link to itself. */
  .sibs{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 0}
  .sib{
    border:1px solid var(--line-2);border-radius:20px;background:var(--surface);
    color:var(--ink-2);font-size:var(--t-ui);font-weight:600;
    padding:0 13px;min-height:34px;display:inline-flex;align-items:center;gap:6px;
    transition:background .14s ease,color .14s ease,border-color .14s ease;
  }
  .sib .n{font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
  a.sib:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--surface-2)}
  a.sib:hover .n{color:var(--accent-ink)}
  a.sib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sib.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;cursor:default}
  .sib.on .n{color:rgba(255,255,255,.82)}

  /* ---------- section bands ---------- */
  .bandhead h2{margin:0;font-size:var(--t-ui);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}

  /* ---------- year jump ---------- */
  .years{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;align-items:center}
  .years .lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:3px}
  .yrtog{
    border:1px solid transparent;border-radius:5px;background:none;color:var(--ink-2);
    font:inherit;font-size:var(--t-ui);font-weight:600;font-variant-numeric:tabular-nums;
    padding:0 10px;min-height:32px;display:inline-flex;align-items:center;cursor:pointer;
    transition:background .14s ease,color .14s ease,border-color .14s ease;
  }
  .yrtog:hover{border-color:var(--line-2);background:var(--surface);color:var(--ink)}
  .yrtog[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
  .yrtog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ---------- dense rows ---------- */
  /* No thumbnail. At the width a row allows, a scaled email render is unreadable and a
     colored rectangle standing in for one is decoration pretending to be data — every
     Harker masthead is the same green, so it would distinguish nothing. The preview
     lives one click away in the modal, at a size where it means something. */
  .rows{border-top:1px solid var(--line);margin:0}
  .row{
    display:flex;align-items:center;gap:14px;
    padding:0 6px;min-height:52px;border-bottom:1px solid var(--line);
    transition:background .12s ease;
  }
  .row:hover{background:var(--surface)}
  .rowmain{
    display:flex;align-items:center;gap:14px;flex:1;min-width:0;
    padding:8px 0;cursor:pointer;color:inherit;
  }
  /* Inset here, unlike every other ring, and deliberately: a row spans the full
     content width, so an outset ring would overflow into the rows above and below.
     Safe because a row has no accent fill — the ring lands on --surface or --bg at
     8.33:1, which is the failure mode the .modes rule above had and this does not. */
  .rowmain:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:5px}
  .row .date{
    width:112px;flex:none;font-size:var(--t-label);font-weight:600;color:var(--ink-3);
    font-variant-numeric:tabular-nums;letter-spacing:.02em;
  }
  .row .date.soon{color:var(--urgent)}
  .row .date.ahead{color:var(--when)}
  .row .ttl{
    flex:1;min-width:0;font-size:var(--t-row);font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .rowmain:hover .ttl{color:var(--accent-ink)}
  .row .tag{
    flex:none;font-size:var(--t-label);color:var(--ink-3);
    max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .row .vcount{flex:none;font-size:var(--t-label);font-weight:600;color:var(--when)}
  .rowcopy{
    flex:none;background:none;border:1px solid transparent;border-radius:5px;
    color:var(--ink-3);font:inherit;font-size:var(--t-label);font-weight:600;
    padding:0 11px;min-height:34px;cursor:pointer;
    transition:background .12s ease,color .12s ease,border-color .12s ease;
  }
  .row:hover .rowcopy{border-color:var(--line-2);color:var(--ink-2)}
  .rowcopy:hover{background:var(--accent-fill) !important;border-color:var(--accent-fill) !important;color:#fff !important}
  .rowcopy:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--line-2);color:var(--ink-2)}
  .rowcopy:disabled{opacity:.5;cursor:default}
  .rowcopy.done{color:var(--accent-ink);border-color:var(--line-2)}
  .rowcopy.err{color:var(--urgent);border-color:var(--line-2)}

  /* ---------- pagination ---------- */
  /* .pager moved to shared.inc.css on 2026-09-08; search and the date archive
     paginate too, and they load home.css. #pageNote is category-only, so it stays. */
  .pagenote{margin:11px 0 0;font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}

  /* ---------- parent term: child breakdown ---------- */
  .kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:0 0 4px}
  .kid{
    display:flex;align-items:center;gap:9px;padding:0 13px;min-height:44px;
    border:1px solid var(--line);border-radius:5px;background:var(--surface);
    transition:border-color .14s ease,background .14s ease;
  }
  .kid:hover{border-color:var(--accent);background:var(--surface-2)}
  /* Same 4.39:1 failure as .mo:hover .c on the homepage. */
  .kid:hover .c{color:var(--accent-ink)}
  .kid:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .kid .k{font-size:var(--t-row);font-weight:600;color:var(--ink);min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kid:hover .k{color:var(--accent-ink)}
  .kid .c{margin-left:auto;flex:none;font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}

  .empty{
    margin:14px 0 0;padding:15px 17px;border:1px solid var(--line);border-radius:5px;
    background:var(--surface);color:var(--ink-2);font-size:var(--t-note);line-height:1.6;
  }
  .empty b{color:var(--ink);font-weight:600}
  @media (max-width:760px){
    /* The row collapses to two lines rather than truncating the title to nothing.
       Copy moves under the title and keeps its 34px target. */
    .row{align-items:flex-start;padding:9px 6px}
    .rowmain{flex-wrap:wrap;gap:3px 12px;align-items:baseline}
    .row .date{width:auto;order:2}
    .row .ttl{order:1;flex:1 1 100%;white-space:normal;line-height:1.35}
    .row .tag{order:3;max-width:none}
    .row .vcount{order:4}
  }
  @media (max-width:460px){
    .kids{grid-template-columns:1fr}
  }