/* bulk.tariffwolf.net — sign-in and app shell (B1). Same design as ad.tariffwolf.net.
 *
 * Tokens
 *   paper   #F6F7F4  page            ink     #18211E  text
 *   bond    #0D5449  customs-seal green (panel, primary action, focus)
 *   bond-2  #0A4239  panel depth     rule    #CFD8D4  hairlines, input borders
 *   muted   #56635E  secondary text  error   #A3281B
 * One typeface, Schibsted Grotesk (self-hosted, OFL), lining figures for codes.
 * The one memorable element is the HS code on the panel: its brackets draw
 * chapter, heading and subheading once, on load. Everything else stays quiet.
 */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F6F7F4;
  --ink: #18211E;
  --bond: #0D5449;
  --bond-2: #0A4239;
  --rule: #CFD8D4;
  --muted: #56635E;
  --error: #A3281B;
  --field: #FFFFFF;
  --on-bond: #F6F7F4;
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131A18;
    --ink: #E6ECE9;
    --bond: #3F9C8C;
    --bond-2: #0C2F29;
    --rule: #2E3B37;
    --muted: #9BA9A4;
    --error: #F08A7C;
    --field: #19221F;
    --on-bond: #0E1513;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.booting .signin { visibility: hidden; }
[hidden] { display: none !important; }

/* ---------- wordmark ---------- */
.mark {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.tm {
  font-size: 0.45em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.15em;
  letter-spacing: 0.02em;
}

/* ---------- sign-in layout ---------- */
.signin {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(380px, 5fr) 7fr;
}

.panel {
  background: var(--bond-2);
  color: #F6F7F4;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
@media (prefers-color-scheme: light) { .panel { background: var(--bond); } }

.code { margin: 0; }
.digits {
  font-weight: 600;
  font-size: clamp(44px, 4.3vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums proportional-nums;
  padding-bottom: 28px;
}
/* each level is an inline box; its rule is drawn along its own bottom edge and
   its name sits in the gap under that rule, so the nesting IS the diagram */
.lvl {
  display: inline-block;
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 3px;
}
.lvl.chap { padding-bottom: 14px; }
.lvl.head { padding-bottom: 44px; }
.lvl.sub  { padding-bottom: 44px; }
.lvl.hts  { padding-bottom: 44px; }
.lvl::after {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.86;
  font-variant-numeric: lining-nums proportional-nums;
}
.lvl.chap::after { content: "Chapter 61"; }
.lvl.head::after { content: "Heading 61.09"; }
.lvl.sub::after  { content: "Subheading 6109.10"; }
.lvl.hts::after  { content: "HTS 6109.10.00.12 \00b7  United States"; }

.panel-note {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.86;
}

/* the one moment of motion: the three rules draw in order, then their names appear */
@media (prefers-reduced-motion: no-preference) {
  .signin:not([hidden]) .lvl { animation: draw 520ms cubic-bezier(.2,.7,.2,1) both; }
  .signin:not([hidden]) .lvl::after { animation: name 360ms ease-out both; }
  .signin:not([hidden]) .lvl.chap { animation-delay: 150ms; }
  .signin:not([hidden]) .lvl.head { animation-delay: 450ms; }
  .signin:not([hidden]) .lvl.sub  { animation-delay: 750ms; }
  .signin:not([hidden]) .lvl.hts  { animation-delay: 1050ms; }
  .signin:not([hidden]) .lvl.chap::after { animation-delay: 520ms; }
  .signin:not([hidden]) .lvl.head::after { animation-delay: 820ms; }
  .signin:not([hidden]) .lvl.sub::after  { animation-delay: 1120ms; }
  .signin:not([hidden]) .lvl.hts::after  { animation-delay: 1420ms; }
}
@keyframes draw { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
@keyframes name { from { opacity: 0; transform: translateY(-4px); } to { opacity: 0.86; transform: none; } }

/* ---------- form ---------- */
.formside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(24px, 8vw, 120px);
}
.mark-small { display: none; margin-bottom: 40px; }

.form { width: 100%; max-width: 380px; }
.form h1 {
  margin: 0 0 32px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}
.field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.field input:hover { border-color: var(--muted); }
.field input:focus { outline: none; border-color: var(--bond); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bond) 28%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--error); }

.pw { position: relative; }
.pw input { padding-right: 72px; }
.reveal {
  position: absolute;
  top: 6px; right: 6px; bottom: 6px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bond);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.reveal:hover { background: color-mix(in srgb, var(--bond) 10%, transparent); }
.reveal:focus-visible { outline: 2px solid var(--bond); outline-offset: 0; }

.caps { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.err {
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--error);
  border-left: 3px solid var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
}

.primary {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--on-bond);
  background: var(--bond);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.primary:hover { filter: brightness(1.08); }
.primary:focus-visible { outline: 2px solid var(--bond); outline-offset: 3px; }
.primary[disabled] { cursor: progress; opacity: 0.75; }

.foot {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

.nojs { padding: 24px; }

/* ---------- narrow screens: the panel gives way to the form ---------- */
@media (max-width: 860px) {
  .signin { grid-template-columns: 1fr; }
  .panel { display: none; }
  .mark-small { display: block; color: var(--bond); }
  .formside { justify-content: flex-start; padding: max(32px, env(safe-area-inset-top)) 24px 40px; }
}

/* ---------- bulk additions (B1) ---------- */
.mark-sub { font-weight: 500; opacity: 0.8; margin-left: 0.2em; }

.lead { margin: -16px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.lead strong { color: var(--ink); font-weight: 600; }

.code-input {
  font-size: 24px !important;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums lining-nums;
}

.note {
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: 15px;
  border-left: 3px solid var(--bond);
  background: color-mix(in srgb, var(--bond) 8%, transparent);
}

.otp-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 20px;
  font-size: 15px;
}
.otp-links #b-back { margin-left: auto; }
.link {
  padding: 4px 0;
  font: inherit;
  font-weight: 600;
  color: var(--bond);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.link:focus-visible { outline: 2px solid var(--bond); outline-offset: 2px; }
.muted { color: var(--muted); }

/* ---------- app shell ---------- */
body.app { display: flex; flex-direction: column; min-height: 100%; }
body.app.booting { visibility: hidden; }
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: var(--bond);
  color: #F6F7F4;
}
@media (prefers-color-scheme: dark) { .topbar { background: var(--bond-2); } }
.topbar .dest { font-size: 14px; opacity: 0.86; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 15px; }
.ghost {
  height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #F6F7F4;
  background: transparent;
  border: 1px solid color-mix(in srgb, #F6F7F4 55%, transparent);
  border-radius: 4px;
  cursor: pointer;
}
.ghost:hover { background: color-mix(in srgb, #F6F7F4 12%, transparent); }
.ghost:focus-visible { outline: 2px solid #F6F7F4; outline-offset: 2px; }
.workspace { flex: 1; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px 16px; }
  .topbar .dest { order: 3; width: 100%; }
}