/* The foundations library and its cards. A card is self-contained (.fcard with data-field), so any page that links
   this sheet can show one. Each field draws in one of the figure colours, as coloured-pencil hatching behind an
   ink icon. */
[data-field="math"] { --field:var(--fig-purple); }
[data-field="stats"] { --field:var(--fig-red); }
[data-field="phys"] { --field:var(--fig-blue); }
[data-field="chem"] { --field:color-mix(in srgb, var(--fig-red) 50%, var(--fig-purple)); }
[data-field="bio"] { --field:var(--fig-green); }
[data-field="cs"] { --field:var(--fig-gray); }
[data-field="eng"] { --field:var(--fig-orange); }
[data-field="earth"] { --field:color-mix(in srgb, var(--fig-green) 45%, var(--fig-blue)); }

.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* The icon: an ink line drawing centred on a patch of hatching in the field's colour. */
.wash { position:relative; flex:none; display:grid; place-items:center; width:44px; height:44px; color:var(--fg); }
.wash::before { content:""; position:absolute; inset:6px; border-radius:46% 54% 43% 57% / 55% 42% 58% 45%;
  background:repeating-linear-gradient(-48deg, color-mix(in srgb, var(--field, var(--muted)) 55%, transparent) 0 1.4px, transparent 1.4px 4px); }
.ficon { position:relative; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* The card. */
.fcard { position:relative; display:grid; grid-template-columns:44px minmax(0, 1fr); grid-template-rows:auto 1fr auto; gap:0 12px;
  background:var(--card); border-radius:10px; padding:14px 18px 12px 14px; box-shadow:var(--shadow); transition:box-shadow .15s;
  content-visibility:auto; contain-intrinsic-size:auto 170px; }
.fcard:hover { box-shadow:var(--lift); }
.fcard:has(a:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
.fcard h3 { align-self:center; margin:0; font:700 1.04rem/1.3 var(--sans); letter-spacing:-.005em; text-wrap:balance; }
.fcard h3 a { color:inherit; text-decoration:none; outline:none; }
.fcard h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.fcard p { grid-column:1 / -1; margin:8px 0 0 4px; color:var(--muted); font-size:.9rem; line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.fcard .tags { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; list-style:none;
  margin:12px 0 0 4px; padding:9px 0 0; border-top:1px solid var(--line); font:500 .72rem/1.6 var(--mono); color:var(--muted); }
.fcard .tags .topic { color:var(--fg); }
.results.grouped .fcard .tags .topic { display:none; }
.fcard .tags .state { margin:0 0 0 auto; }
.fcard .tags .unwritten { font-style:italic; }
.fcard.unwritten { background:transparent; box-shadow:none; border:1.5px dashed var(--line); }
.fcard.unwritten:hover { border-color:var(--muted); }
.fcard mark { background:var(--mark); color:inherit; border-radius:2px; padding:0 1px; }

/* Depth: four rising steps, filled to the foundation's band. */
.depth { display:inline-flex; align-items:center; gap:7px; }
.steps { display:inline-flex; align-items:flex-end; gap:2px; height:10px; }
.steps i { width:3px; border-radius:1px; background:var(--line); }
.steps i:nth-child(1) { height:4px; } .steps i:nth-child(2) { height:6px; } .steps i:nth-child(3) { height:8px; } .steps i:nth-child(4) { height:10px; }
.depth[data-depth=start] i:nth-child(-n+1), .depth[data-depth=building] i:nth-child(-n+2),
.depth[data-depth=further] i:nth-child(-n+3), .depth[data-depth=specialist] i { background:var(--fg); }

/* Search. */
.library .search { display:flex; align-items:center; gap:4px; height:54px; padding:0 14px 0 8px; margin:0 0 18px;
  background:var(--card); border:1.5px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.library .search:focus-within { border-color:var(--accent); }
.library .search label { flex:1; min-width:0; display:flex; align-items:center; gap:6px; height:100%; color:var(--muted); cursor:text; }
.library .search .ficon { width:22px; height:22px; margin:0 6px; }
.library .search input { flex:1; min-width:0; height:100%; padding:0; border:0; background:none; color:var(--fg); font:500 1.08rem var(--sans); outline:none; }
.library .search input::placeholder { color:var(--muted); opacity:1; }
.library .search input::-webkit-search-cancel-button { cursor:pointer; }
.library kbd { flex:none; font:500 .78rem/1 var(--mono); color:var(--muted); padding:4px 7px; border:1.5px solid var(--line); border-radius:6px; }

/* Fields: eight drawer fronts. */
.fields { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 14px; }
.fields .field { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 14px 8px 6px; border:1.5px solid transparent;
  border-radius:10px; background:var(--card); box-shadow:var(--shadow); text-align:left; font:600 .95rem/1.2 var(--sans); }
.fields .field:hover { border-color:var(--line); }
.fields .field[aria-pressed=true] { border-color:var(--fg); box-shadow:none; }
.fields .field.none:not([aria-pressed=true]) { opacity:.55; box-shadow:none; }
.fields .field .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library .n { font:500 .76rem/1 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }

/* Topics within the chosen field. */
.topics-bar { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:0 0 6px; }
.topics-bar[hidden] { display:none; }
.topics { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; }
.topics.folded { max-height:calc(2 * var(--chip) + 6px); overflow:hidden; }
.topics-bar { --chip:30px; }
.topics button, .more-topics { height:var(--chip); padding:0 12px; border:1.5px solid var(--line); border-radius:99px; background:none; font-size:.86rem; white-space:nowrap; }
.topics button .n { margin-left:4px; }
.topics button[aria-pressed=true] { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.topics button[aria-pressed=true] .n { color:inherit; opacity:.75; }
.topics button.none:not([aria-pressed=true]) { opacity:.5; }
.more-topics { border-color:var(--fg); font-weight:700; }

/* Depth and progress, the count and the way back to everything. */
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:12px 0 4px; }
.picks { display:flex; gap:8px 10px; min-width:0; }
.pick { display:inline-flex; align-items:center; gap:2px; padding:0 4px 0 12px; border:1.5px solid var(--line); border-radius:99px; font-size:.86rem; color:var(--muted); }
.pick:focus-within { border-color:var(--accent); }
.pick select { border:0; background:none; padding:5px 6px; font-size:.86rem; font-weight:600; color:var(--fg); cursor:pointer; outline:none; }
.filters .count { margin:0 0 0 auto; font:500 .8rem/1.4 var(--mono); color:var(--muted); }
.filters .clear { padding:4px 12px; font-size:.84rem; }

/* Results, grouped by field and topic while browsing. */
.results { min-height:40vh; }
.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.results > .cards:first-child { margin-top:18px; }
.group-field { display:flex; align-items:center; gap:10px; margin:44px 0 0; font:800 1.6rem/1.1 var(--sans); letter-spacing:-.025em; }
.results > .group-field:first-child { margin-top:22px; }
.group-field .wash { margin-left:-6px; }
.group-topic { display:flex; align-items:baseline; gap:10px; margin:26px 0 12px; font:700 1.02rem/1.3 var(--sans); }
.group-topic::after { content:""; flex:1; align-self:center; border-bottom:1px solid var(--line); }
.group-topic a { color:var(--fg); text-decoration:none; }
.group-topic a:hover { color:var(--accent); text-decoration:underline; }
.more { display:flex; justify-content:center; margin:24px 0 0; }
.more[hidden] { display:none; }
.empty { display:grid; justify-items:start; gap:4px; max-width:34em; margin:28px 0 0; padding:24px 26px; background:var(--card); border-radius:10px; box-shadow:var(--shadow); }
.empty p { margin:0; color:var(--muted); }
.empty .says { color:var(--fg); font-weight:700; font-size:1.08rem; }
.empty button { margin-top:12px; }

@media (max-width:960px) { .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) {
  .library .search { height:50px; margin-bottom:12px; }
  .library kbd { display:none; }
  /* Fields and topics each scroll sideways in one row, running to the screen's edges. */
  .fields, .topics { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 4px; scroll-padding-inline:var(--gutter); }
  .fields::-webkit-scrollbar, .topics::-webkit-scrollbar { display:none; }
  .fields { gap:8px; margin-bottom:8px; }
  .fields .field { flex:none; padding:4px 12px 4px 2px; font-size:.9rem; }
  .fields .field .wash { width:36px; height:36px; }
  .fields .field .ficon { width:22px; height:22px; }
  .topics.folded { max-height:none; }
  .topics-bar .more-topics { display:none; }
  .picks { flex:1 1 100%; }
  .pick { flex:1 1 0; min-width:0; padding-left:6px; }
  .pick > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .pick select { flex:1; min-width:0; width:100%; text-overflow:ellipsis; }
  .filters .count { margin:0; flex:1; }
  .cards { grid-template-columns:1fr; gap:10px; }
  .fcard { padding:12px 14px 10px 10px; }
  .group-field { font-size:1.35rem; margin-top:34px; }
}
@media (prefers-reduced-motion: reduce) { .fcard { transition:none; } }