/* ============================================================
   Oil, Visualized  ·  css/glossary.css
   glossary.html only — toolbar, filter chips, legend, and the
   clause cards. Loaded after base.css.
   ============================================================ */

/* ---- hero helper notes ---- */
.howto{margin-top:1.3rem;max-width:64ch;font-size:.95rem;line-height:1.6;color:#3a372f;border-left:2px solid var(--hair-2);padding-left:.9rem}
.howto + .howto{margin-top:.8rem}
.howto b{font-weight:500;color:var(--ink)}

/* ============ TOOLBAR ============ */
.toolbar{position:sticky;top:var(--headh);z-index:50;background:color-mix(in srgb, var(--paper) 93%, transparent);backdrop-filter:blur(6px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:.85rem 0;margin-top:1.9rem}
.toolbar-inner{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}
.searchbox{position:relative;flex:1 1 240px;min-width:200px;max-width:360px}
.searchbox input{width:100%;font-family:var(--body);font-size:.95rem;padding:.6rem 2.1rem .6rem 2.2rem;border:1px solid var(--hair-2);border-radius:24px;background:var(--paper);color:var(--ink)}
.searchbox svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;pointer-events:none}
.searchbox .clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--muted);font-size:1.1rem;line-height:1;padding:.2rem .35rem;border-radius:50%}
.searchbox .clear:hover{color:var(--ink)}
.chips{display:flex;gap:.35rem;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--hair-2);background:var(--paper);color:var(--muted);padding:.44rem .78rem;border-radius:20px;cursor:pointer;transition:all .15s;white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.count{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.03em;margin-left:auto;white-space:nowrap}

/* ---- phones: the toolbar is sticky, so its height is height the reader
   never gets back. Wrapped chips ran it to three rows and ~200px. Two
   fixed rows instead — search + count, then one swipeable chip strip,
   same pattern the header nav already uses. ~95px. ---- */
@media(max-width:720px){
  .toolbar{padding:.6rem 0;margin-top:1.5rem}
  .toolbar-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"search count"
                        "chips  chips";
    gap:.55rem .7rem;
    align-items:center;
  }
  .searchbox{grid-area:search;flex:none;min-width:0;max-width:none}
  .searchbox input{font-size:.92rem;padding:.52rem 2rem .52rem 2.1rem}
  .count{grid-area:count;margin-left:0;justify-self:end;font-size:.64rem}
  .chips{grid-area:chips;min-width:0;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .chip{font-size:.63rem;padding:.4rem .68rem}
}

/* ============ LEGEND ============ */
.legend-row{display:grid;grid-template-columns:1fr;gap:.5rem;margin:1.4rem 0 .2rem;font-size:.86rem;color:var(--muted)}
@media(min-width:820px){.legend-row{grid-template-columns:repeat(4,1fr);gap:.9rem}}
.legend-row .lg{display:flex;align-items:flex-start;gap:.5rem;line-height:1.45}
.legend-row .sw{flex:0 0 auto;width:11px;height:11px;border-radius:3px;margin-top:.42rem}
.sw.know{background:var(--know)}
.sw.for{background:var(--forc)}
.sw.confirm{background:var(--confirm)}
.sw.flag{background:var(--flag)}

/* ============ CATEGORY SECTIONS ============ */
.gcat{padding:clamp(1.9rem,4vw,2.7rem) 0;border-top:1px solid var(--hair)}
.gcat:first-of-type{border-top:0}
.gcat-head{margin-bottom:1.3rem}
.gcat-head .top{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.gcat h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.1rem+.8vw,1.75rem);letter-spacing:-.015em}
.gcat .gcat-count{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.gcat .gcat-sub{color:var(--muted);font-size:.95rem;margin-top:.25rem;max-width:66ch}
.gcat.hide,.gcard.hide{display:none !important}

.card-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.card-grid{grid-template-columns:1fr 1fr}}

.gcard{border:1px solid var(--hair);border-radius:var(--radius-lg);background:var(--paper);padding:1.15rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.gcard.know{border-left:4px solid var(--know)}
.gcard.for{border-left:4px solid var(--forc)}
.gcard.confirm{border-left:4px solid var(--confirm)}
.gcard.flag{border-left:4px solid var(--flag)}
.gcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem}
.gcard .num{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.06em}
.gcard h3{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.28;margin-top:.12rem}
.badge{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:.28rem .62rem;white-space:nowrap}
.badge.know{background:var(--know-bg);color:var(--know)}
.badge.for{background:var(--forc-bg);color:var(--forc)}
.badge.confirm{background:var(--confirm-bg);color:var(--confirm)}
.badge.flag{background:var(--flag-bg);color:var(--flag)}

.gcard .def{font-size:.97rem;color:#2a2823}
.gcard .row{font-size:.89rem;line-height:1.55;border-left:2px solid var(--hair-2);padding-left:.75rem;color:#4a473e}
.gcard .row b{font-weight:600;color:var(--ink)}
.gcard .row.op{border-left-color:var(--surface)}
.gcard .base{font-family:var(--mono);font-size:.71rem;line-height:1.5;color:var(--muted);letter-spacing:.01em}
.gcard .see{font-family:var(--mono);font-size:.7rem;color:var(--survey);text-decoration:none;display:inline-block;margin-top:.1rem}
.gcard .see:hover{text-decoration:underline}

.empty{padding:3.5rem 1rem;text-align:center;color:var(--muted);font-size:.98rem}