/* DataSteak · /sic — the SIC code lookup.
   ===========================================================================
   Built on the tokens in datasteak.css. No colours, radii or shadows are
   typed here: a hex code in a page stylesheet is a thing that stops matching
   the rest of the site the first time the palette moves.

   GRID, NOT PROSE. Julius, 5 Oct: "this needs to be a grid, rather long text".
   731 codes as a list of paragraphs is unreadable and unscannable; as a dense
   grid of cards it can be swept with the eye, which is what somebody looking
   for their code is actually doing.
   =========================================================================== */

/* ------------------------------------------------------------------ hero */
.sic-hero .top{max-width:860px}
.sic-hero h1{margin:.2em 0 .35em}
.sic-hero .lede{color:var(--ink-2);font-size:1.12rem;line-height:1.6;margin:0 0 28px}

/* The search box. One field, one button, full width on a phone.
   font-size:16px on the input is not a style choice: iOS Safari zooms the
   whole page in when a focused input is smaller than that, and the zoom does
   not come back out. */
.sic-search{display:flex;gap:10px;margin:0 0 22px;max-width:640px}
.sic-search input{
  flex:1;min-width:0;padding:14px 16px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.sic-search input::placeholder{color:var(--ink-4)}
.sic-search input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.sic-search .btn{flex:0 0 auto;padding-inline:22px}

.sic-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;color:var(--ink-3);font-size:.92rem}
.sic-facts strong{color:var(--ink);font-weight:600}

/* -------------------------------------------------------------- sections */
/* auto-fill with a minimum, so 21 tiles reflow from 4 across to 1 without a
   single breakpoint. minmax(0,1fr) rather than minmax(240px,1fr) in the track
   so a long section name cannot push the grid wider than its container. */
.sic-secs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.sic-sec{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:2px 14px;align-items:start;
  padding:16px 18px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.sic-sec:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.sic-sec.on{border-color:var(--red);background:var(--red-tint)}
.sic-sec .sk{
  grid-row:1/3;align-self:center;
  font:600 1.05rem/1 var(--mono);color:var(--red);
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--red-soft);border-radius:10px;
}
.sic-sec .sn2{font-weight:600;font-size:.95rem;line-height:1.3;color:var(--ink)}
.sic-sec .sm{font-size:.82rem;color:var(--ink-3)}

/* ------------------------------------------------------------ result bar */
.sic-resbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
.sic-resh{margin:0;font-size:1.35rem;letter-spacing:-.01em}
.sic-resm{margin:4px 0 0;color:var(--ink-3);font-size:.9rem}
.sic-clear{
  flex:0 0 auto;font-size:.9rem;color:var(--ink-2);text-decoration:none;
  padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;
}
.sic-clear:hover{border-color:var(--ink-3);color:var(--ink)}

/* ----------------------------------------------------------- the code grid */
.sic-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sic-card{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 16px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.sic-card:hover{border-color:var(--red);box-shadow:var(--sh-sm)}
.sic-card .cc{font:500 .9rem/1 var(--mono);color:var(--red);letter-spacing:.02em}
.sic-card .cn{font-weight:550;font-size:.95rem;line-height:1.35;color:var(--ink)}
/* The matched activity, shown only on a search. This is the page explaining
   why a code came back when the word is nowhere in its official title. */
.sic-card .cmatch{
  font-size:.84rem;line-height:1.4;color:var(--ink-2);
  padding:6px 9px;background:var(--bronze-soft);border-radius:8px;
}
.sic-card .cf{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding-top:6px;
  font-size:.82rem;color:var(--ink-3)}
.sic-card .cnum{font-variant-numeric:tabular-nums}
/* The administrative codes read differently because they ARE different, and a
   visitor who lands on 99999 should see that before reading a word. */
.sic-card.admin{background:var(--bg-grey)}
.sic-card.admin .cc{color:var(--ink-3)}

/* ---------------------------------------------------------------- paging */
.sic-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0 0}
.sic-pager a,.sic-pager span{
  min-width:40px;padding:9px 12px;text-align:center;font-size:.9rem;
  border:1px solid var(--line-2);border-radius:10px;text-decoration:none;color:var(--ink-2);
}
.sic-pager a:hover{border-color:var(--ink-3);color:var(--ink)}
.sic-pager .on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

/* ------------------------------------------------------------- code page */
.sic-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem;color:var(--ink-3);margin:0 0 22px}
.sic-crumb a{color:var(--ink-2);text-decoration:none}
.sic-crumb a:hover{color:var(--red);text-decoration:underline}
.sic-crumb strong{color:var(--ink);font-family:var(--mono);font-weight:500}

.sic-codetop{max-width:820px;margin:0 0 34px}
.sic-bigcode{
  display:inline-block;font:600 1.5rem/1 var(--mono);color:var(--red);
  padding:10px 16px;background:var(--red-soft);border-radius:var(--r-sm);margin:0 0 16px;
}
.sic-codetop h1{margin:0;font-size:2.1rem;line-height:1.15;letter-spacing:-.02em}
.sic-admin-note{
  margin:18px 0 0;padding:14px 16px;background:var(--bronze-soft);
  border-radius:var(--r-sm);color:var(--ink-2);font-size:.95rem;line-height:1.55;
}

.sic-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sic-stat{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
}
.sic-stat .sv{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.sic-stat .sl{font-size:.92rem;font-weight:550;color:var(--ink-2)}
/* The footnote on each figure. These exist because on_register and
   primary_count genuinely measure different things and a page that shows both
   without saying so is inviting somebody to add them up. */
.sic-stat .sn{font-size:.8rem;line-height:1.4;color:var(--ink-4)}

/* The activities. A wrapped list of chips rather than a bulleted column:
   86210 has 8, some codes have over 50, and a single column of 50 bullets is a
   scroll rather than a glance. */
.sic-acts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sic-acts li{
  padding:8px 13px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;font-size:.9rem;color:var(--ink-2);
}

.sic-next{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sic-nextc{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
a.sic-nextc:hover{border-color:var(--red);box-shadow:var(--sh-sm)}
.sic-nextc.static{background:var(--bg-grey);border-style:dashed}
/* The card that is actually a product, 6 Oct 2026. It sits in a row of up to
   four and the other three are navigation, so without this it reads as one
   more place to click rather than the thing the visitor came for. A left
   edge and a tinted ground, not a button: the row should still scan as a row. */
a.sic-nextc.has{background:var(--red-tint);border-color:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}
a.sic-nextc.has:hover{border-color:var(--red)}
.sic-nextc.has .nk{color:var(--red)}
.sic-nextc.has .nm{color:var(--ink-2);font-weight:550;font-variant-numeric:tabular-nums}
.sic-nextc .nk{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);font-weight:600}
.sic-nextc .nv{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.3}
.sic-nextc .nm{font-size:.85rem;color:var(--ink-3);line-height:1.45}

/* -------------------------------------------------------------- sources */
.sic-src{display:grid;gap:24px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.sic-src h3{margin:0 0 10px;font-size:1.1rem}
.sic-src p{margin:0 0 10px;color:var(--ink-2);font-size:.94rem;line-height:1.6;max-width:70ch}
.sic-srcl{display:flex;flex-direction:column;gap:8px}
.sic-srcl a{
  padding:11px 15px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:.92rem;
}
.sic-srcl a:hover{border-color:var(--red);color:var(--red)}

/* ---------------------------------------------------------------- empty */
.sic-empty{max-width:620px;padding:36px 0}
.sic-empty h1,.sic-empty h3{margin:0 0 12px}
.sic-empty p{margin:0 0 12px;color:var(--ink-2);line-height:1.6}
.sic-empty .btn{margin-top:10px}

@media(max-width:860px){
  .sic-src{grid-template-columns:1fr}
  .sic-codetop h1{font-size:1.65rem}
  .sic-resbar{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .sic-search{flex-direction:column}
  .sic-search .btn{width:100%}
  .sic-grid,.sic-secs{grid-template-columns:1fr}
}

/* NO prefers-color-scheme BLOCK, and that is on purpose. The --dark-* tokens
   in datasteak.css exist for .section.dark, a deliberately dark band on a
   light page. Nothing on this site responds to the operating system theme, so
   adding it here would make /sic the only page that flips, against a header
   and footer that would not flip with it. If a real dark mode is ever added it
   belongs in datasteak.css for every page at once, not in one page's file. */