/* ===========================================================================
   Le Parfumier: FLAG
   ---------------------------------------------------------------------------
   Visual system: "Encre et Verre", ink and glass.

   The neutrals carry a violet bias rather than a plain grey, after orris, the
   iris root that is perfumery's most expensive raw material. Iris is also the
   one interaction accent. Every saturated colour beyond that is semantic and
   reserved for risk: vermilion for confirmed, ochre for rumoured, moss for
   handled. On a calm ground a red pill reads across the room, which is the
   whole point of a watch tool.

   Type: Bodoni Moda, since the Didone is the typographic language of perfume
   labels, for the wordmark, the briefing numerals and panel titles. Archivo
   for interface text, the same grotesque as the leparfumier.com concepts.
   IBM Plex Mono for dates, codes, scores and file names.

   Themes: dark is the default. The bare :root block carries the complete dark
   palette and [data-theme="light"] carries the complete light one, applied only
   when the reader asks for it with the toggle. System preference is deliberately
   not consulted, because the shop wants this dark whatever the laptop is set to.
   No component declares a colour inside an attribute block.
   =========================================================================== */


/* Dark is the default. */
:root {
  --paper:        #131019;
  --paper-sunk:   #0c0a11;
  --surface:      #1b1724;
  --surface-2:    #221c2d;

  --ink:          #f1edf5;
  --ink-2:        #b6adc2;
  --ink-3:        #978da6;

  --rule:         #322b3e;
  --rule-soft:    #272134;

  --iris:         #c68ec3;
  --iris-wash:    rgba(198, 142, 195, 0.14);

  --vermilion:      #e9796b;
  --vermilion-wash: rgba(233, 121, 107, 0.14);
  --ochre:          #d9a83e;
  --ochre-wash:     rgba(217, 168, 62, 0.14);
  --moss:           #87be90;
  --moss-wash:      rgba(135, 190, 144, 0.14);

  --rail:         #0c0a11;
  --rail-2:       #171320;
  --rail-ink:     #efeaf4;
  --rail-ink-2:   #948aa2;
  --rail-rule:    #262031;
  --rail-accent:  #c68ec3;

  --shadow:       0 1px 2px rgba(0, 0, 0, 0.42), 0 16px 36px -22px rgba(0, 0, 0, 0.75);
  --shadow-lift:  0 2px 6px rgba(0, 0, 0, 0.48), 0 30px 60px -26px rgba(0, 0, 0, 0.85);

  --display: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --rail-w:  74px;
}

/* Light, only when the toggle asks for it. */
:root[data-theme="light"] {
  --paper:        #f0eef2;
  --paper-sunk:   #e6e2ea;
  --surface:      #ffffff;
  --surface-2:    #faf9fb;

  --ink:          #1a1622;
  --ink-2:        #4b4456;
  --ink-3:        #6f6780;

  --rule:         #dcd7e3;
  --rule-soft:    #ebe7ef;

  --iris:         #6d2e6b;
  --iris-wash:    rgba(109, 46, 107, 0.09);

  --vermilion:      #ae3226;
  --vermilion-wash: rgba(174, 50, 38, 0.09);
  --ochre:          #8b6708;
  --ochre-wash:     rgba(139, 103, 8, 0.11);
  --moss:           #3d6a47;
  --moss-wash:      rgba(61, 106, 71, 0.10);

  --rail:         #1a1622;
  --rail-2:       #241e2f;
  --rail-ink:     #efeaf4;
  --rail-ink-2:   #a096ae;
  --rail-rule:    #322a3f;
  --rail-accent:  #c68ec3;

  --shadow:       0 1px 2px rgba(26, 22, 34, 0.05), 0 14px 30px -20px rgba(26, 22, 34, 0.32);
  --shadow-lift:  0 2px 4px rgba(26, 22, 34, 0.06), 0 26px 50px -24px rgba(26, 22, 34, 0.40);
}

/* ---------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100vh; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

a { color: var(--iris); }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 1px; }

::selection { background: var(--iris-wash); color: var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.num { font-variant-numeric: tabular-nums; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------ lock gate --- */

.lock {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--rail);
  position: relative;
  overflow: hidden;
}
.lock::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side at 50% 32%, rgba(109, 46, 107, 0.34), transparent 70%),
    radial-gradient(closest-side at 62% 64%, rgba(174, 50, 38, 0.13), transparent 70%);
  animation: drift 24s ease-in-out infinite;
  pointer-events: none;
}
.lock-card {
  position: relative;
  width: 100%;
  max-width: 372px;
  padding: 46px 38px 34px;
  text-align: center;
  background: var(--rail-2);
  border: 1px solid var(--rail-rule);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  animation: rise 0.6s var(--ease) both;
}
.lock-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(198, 142, 195, 0.22);
  pointer-events: none;
}
.crest {
  width: 46px;
  height: 46px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--rail-ink);
  border: 1px solid rgba(198, 142, 195, 0.42);
  border-radius: 50%;
}
.lock-mark {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--rail-ink);
  margin-bottom: 12px;
  text-indent: 0.14em;
}
.lock-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rail-accent);
}
.lock-sub { font-size: 12.5px; color: var(--rail-ink-2); margin: 20px 0 26px; }

/* --- the welcome --------------------------------------------------------- */
/* The first thing anyone sees, so it earns a little more warmth than the rest
   of the tool. Everything here is restrained enough to still read as a serious
   instrument rather than a splash screen. */

.lock-welcome {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--rail-ink);
  margin: 22px 0 0;
}
.lock-welcome em {
  font-style: italic;
  color: var(--rail-accent);
}
.lock-hook {
  font-size: 13px;
  color: var(--rail-ink-2);
  margin: 9px 0 0;
}
.lock-stat {
  min-height: 16px;
  margin: 18px 0 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #7e7290;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lock-stat.in { opacity: 1; }
.lock-stat b { color: var(--rail-accent); font-weight: 500; }

/* Staggered entrance. Each piece arrives just behind the one above it, which
   reads as the page assembling itself rather than simply appearing. */
.reveal { animation: rise 0.55s var(--ease) both; }
.r1 { animation-delay: 0.05s; }
.r2 { animation-delay: 0.13s; }
.r3 { animation-delay: 0.20s; }
.r4 { animation-delay: 0.28s; }
.r5 { animation-delay: 0.36s; }
.r6 { animation-delay: 0.44s; }
.r7 { animation-delay: 0.52s; }

/* A slow sheen across the wordmark. Long period on purpose: noticed once, then
   forgotten, which is the difference between charm and a distraction. */
.lock-mark {
  background: linear-gradient(100deg,
    var(--rail-ink) 34%, #f4dcf2 47%, var(--rail-accent) 53%, var(--rail-ink) 66%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rise 0.55s var(--ease) both, sheen 7s ease-in-out 1.6s infinite;
}
@keyframes sheen {
  0%, 62%, 100% { background-position: 130% 0; }
  86%           { background-position: -30% 0; }
}

/* --- the verified moment ------------------------------------------------- */
.lock-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--rail-2);
  opacity: 0;
  pointer-events: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rail-accent);
}
.lock-card.verified .lock-done { opacity: 1; transition: opacity 0.25s ease; }
.lock-card.verified > .reveal,
.lock-card.verified > .crest,
.lock-card.verified > .lock-mark,
.lock-card.verified > .lock-title { opacity: 0; transition: opacity 0.2s ease; }
.lock-done svg { width: 54px; height: 54px; fill: none; overflow: visible; }
.lock-done .tick-ring {
  stroke: var(--rail-accent);
  stroke-width: 2;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}
.lock-done .tick-mark {
  stroke: var(--rail-accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.lock-card.verified .tick-ring { animation: draw 0.45s ease forwards; }
.lock-card.verified .tick-mark { animation: draw 0.3s ease 0.32s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The whole card lifts away once the tick has landed. */
.lock-card.wrong { animation: shake 0.34s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.lock.leaving { animation: liftOff 0.5s var(--ease) forwards; }
@keyframes liftOff {
  to { opacity: 0; transform: scale(1.04); }
}
.lock-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rail-rule);
  color: var(--rail-ink);
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.6em;
  text-align: center;
  text-indent: 0.6em;
  padding: 10px 0 12px;
  transition: border-color 0.2s;
}
.lock-input::placeholder { color: #4a4157; letter-spacing: 0.4em; }
.lock-input:focus { outline: none; border-bottom-color: var(--rail-accent); }
.lock-btn {
  width: 100%;
  margin-top: 26px;
  padding: 13px 20px;
  background: var(--rail-accent);
  color: #17121e;
  border: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.lock-btn:hover { filter: brightness(1.08); }
.lock-btn:active { transform: translateY(1px); }
.lock-error { min-height: 18px; margin: 14px 0 0; font-size: 11px; letter-spacing: 0.08em; color: #e9796b; }

/* ----------------------------------------------------------------- app --- */

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

/* ---------------------------------------------------------------- rail --- */

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0 16px;
  background: var(--rail);
  border-right: 1px solid var(--rail-rule);
  z-index: 30;
}
.rail-crest {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rail-ink);
  border: 1px solid rgba(198, 142, 195, 0.40);
  border-radius: 50%;
  flex: none;
}
.rail-mark {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--rail-ink-2);
  margin-bottom: 14px;
  text-indent: 0.24em;
}
.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 9px; }
.rail-btn {
  position: relative;
  width: 100%;
  padding: 11px 2px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--rail-ink-2);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.rail-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.rail-btn:hover { color: var(--rail-ink); background: rgba(255, 255, 255, 0.05); }
.rail-btn.active { color: var(--rail-ink); background: rgba(198, 142, 195, 0.14); }
.rail-btn.active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 22px;
  background: var(--rail-accent);
}
.rail-count {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 17px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  color: #17121e;
  background: #e9796b;
  border-radius: 999px;
}
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 0 9px; }
.rail-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--rail-rule);
  border-radius: 3px;
  color: var(--rail-ink-2);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.rail-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.rail-icon:hover { color: var(--rail-ink); border-color: var(--rail-accent); }
.rail-ver { font-family: var(--mono); font-size: 8.5px; color: #554a63; margin-top: 5px; }

/* -------------------------------------------------------------- canvas --- */

.canvas { min-width: 0; padding: 0 0 90px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 34px; }

.masthead { border-bottom: 1px solid var(--rule); background: var(--surface); }
.masthead-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 22px;
}
.wordmark { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1; margin: 0; }
.wordmark span {
  display: block;
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--iris);
  margin-top: 9px;
}
.masthead-meta { display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.masthead-meta b {
  display: block;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.masthead-meta .live { color: var(--moss); }
.masthead-meta .off { color: var(--ink-3); }

/* -------------------------------------------------------- briefing band --- */

.brief { background: var(--surface); border-bottom: 1px solid var(--rule); }
.brief-in {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
}
.stat { background: var(--surface); padding: 24px 22px 22px; min-width: 0; }
.stat-k { font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
/* Figures are set in the grotesque, not the Didone. Bodoni's hairlines thin out to
   nothing at screen sizes and all but vanish on the dark ground, and these numbers
   are the first thing anyone reads. Words keep the display face, numbers do not. */
.stat-v {
  display: block;
  font-family: var(--body);
  font-size: clamp(30px, 3.3vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.stat-v small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-left: 3px; }
.stat-n { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.stat.risk .stat-v { color: var(--vermilion); }
.stat.money .stat-v { font-size: clamp(24px, 2.5vw, 34px); }

/* --------------------------------------------------------------- panels --- */

.panel { animation: fade 0.35s var(--ease) both; }
.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 40px;
}
.panel-head h1 {
  font-family: var(--display);
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.panel-sub { max-width: 62ch; margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; }

.toolbar {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.field {
  height: 36px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-size: 12.5px;
  transition: border-color 0.18s;
}
.field:hover { border-color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }
select.field {
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 11px) 16px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field.grow { flex: 1; min-width: 190px; }
.toolbar-gap { flex: 1; }

.btn {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s, opacity 0.2s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.3; cursor: default; filter: none; }
.btn.quiet { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.btn.quiet:hover { color: var(--ink); border-color: var(--ink-3); filter: none; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.selectbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12.5px;
  color: var(--ink-2);
}
.checkline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--iris); cursor: pointer; }
.selectbar .count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------------------- fiches --- */

.fiches { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }

.fiche {
  position: relative;
  display: grid;
  grid-template-columns: 46px 106px minmax(0, 1fr) 236px;
  gap: 20px;
  padding: 20px 22px 20px 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s;
}
.fiche:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.fiche.is-confirmed { border-left-color: var(--vermilion); }
.fiche.is-rumored   { border-left-color: var(--ochre); }
.fiche.is-cleared   { border-left-color: var(--moss); }
.fiche.is-rejected { opacity: 0.48; }
.fiche.is-rejected:hover { opacity: 0.9; }

.fiche-rank { padding: 3px 0 0 16px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.rank-no { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.fiche-plate {
  align-self: start;
  aspect-ratio: 1;
  background-color: var(--paper-sunk);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}

.fiche-main { min-width: 0; }
.fiche-house { font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--iris); margin: 0 0 5px; }
.fiche-title { font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.25; margin: 0 0 12px; text-wrap: balance; }

.ledger { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ledger li { position: relative; padding-left: 62px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ledger .kind {
  position: absolute;
  left: 0;
  top: 2px;
  width: 50px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

.market {
  padding: 11px 13px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border-left: 2px solid var(--iris);
  border-radius: 0 2px 2px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.market b { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--iris); margin-bottom: 5px; }

.sources { display: flex; flex-wrap: wrap; gap: 6px; }
.sources a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.18s, color 0.18s;
}
.sources a::after { content: "\2197"; font-size: 10px; color: var(--ink-3); }
.sources a:hover { border-color: var(--iris); color: var(--iris); }

.why { margin-top: 11px; }
.why > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
}
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before { content: "+"; font-family: var(--mono); }
.why[open] > summary::before { content: "\2212"; }
.why > summary:hover { color: var(--iris); }
.why-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 11.5px; }
.why-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); vertical-align: top; }
.why-table td:last-child { width: 50px; text-align: right; font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.why-table tr.total td { border-bottom: none; border-top: 1px solid var(--rule); font-weight: 600; color: var(--ink); padding-top: 7px; }

.fiche-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
  padding-left: 20px;
  border-left: 1px solid var(--rule-soft);
  min-width: 0;
}
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill.confirmed { color: var(--vermilion); background: var(--vermilion-wash); border-color: var(--vermilion); }
.pill.rumored   { color: var(--ochre);     background: var(--ochre-wash);     border-color: var(--ochre); }
.pill.cleared   { color: var(--moss);      background: var(--moss-wash);      border-color: var(--moss); }

.age { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

.score { display: flex; flex-direction: column; gap: 6px; }
.score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.score-band { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.score-val { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.score-bar { height: 3px; background: var(--rule-soft); border-radius: 999px; overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 999px; }
.score.act   .score-band, .score.act   .score-val { color: var(--vermilion); }
.score.act   .score-bar i { background: var(--vermilion); }
.score.watch .score-band, .score.watch .score-val { color: var(--ochre); }
.score.watch .score-bar i { background: var(--ochre); }
.score.hold  .score-band { color: var(--ink-3); }
.score.hold  .score-bar i { background: var(--ink-3); }

.refprice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.refprice .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.refprice .k s { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: 0; text-transform: none; margin-top: 3px; text-decoration: none; }
.refprice .v { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }

.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dbtn {
  padding: 7px 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.dbtn:hover { color: var(--ink); border-color: var(--ink-3); }
/* A progression, left to right: agreed, then wanted, then done. Reject is the one
   off ramp and is the only red. */
.dbtn.on.accept  { color: var(--iris);      border-color: var(--iris);      background: var(--iris-wash); }
.dbtn.on.needbuy { color: var(--ochre);     border-color: var(--ochre);     background: var(--ochre-wash); }
.dbtn.on.ordered { color: var(--moss);      border-color: var(--moss);      background: var(--moss-wash); }
.dbtn.on.reject  { color: var(--vermilion); border-color: var(--vermilion); background: var(--vermilion-wash); }

/* Two rows now, because the verdict on the scan and what you are doing about it
   are separate questions. The second row sits tight under the first. */
.decide + .decide { margin-top: 5px; }
.decide-note {
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.decide-note.back { color: var(--ochre); font-weight: 600; }

/* The supplier's own filename, under the supplier name it belongs to. */
.fromfile {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

.qty-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--ink-3); }
.qty-row input {
  width: 64px;
  height: 32px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
}
.qty-row input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }
.qty-total { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; }
.qty-total small { display: block; font-family: var(--body); font-size: 9.5px; color: var(--ink-3); }

.note-toggle {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.note-toggle:hover { color: var(--iris); }
.note-box {
  width: 100%;
  min-height: 68px;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
}
.note-box:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }

/* --------------------------------------------------------------- houses --- */

.houses-note {
  padding: 14px 16px;
  margin-bottom: 22px;
  background: var(--iris-wash);
  border-left: 2px solid var(--iris);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
table.grid { width: 100%; border-collapse: collapse; min-width: 760px; }
table.grid th {
  padding: 12px 16px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.grid td { padding: 13px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; color: var(--ink-2); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr { transition: background 0.15s; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid .house { font-family: var(--display); font-size: 16px; color: var(--ink); font-weight: 500; }
table.grid .n { font-family: var(--mono); text-align: right; color: var(--ink); white-space: nowrap; }
.spread { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.spread-bar { flex: 1; height: 5px; background: var(--rule-soft); border-radius: 999px; overflow: hidden; display: flex; }
.spread-bar i { display: block; height: 100%; }
.spread-bar i.c { background: var(--vermilion); }
.spread-bar i.r { background: var(--ochre); }
.spread-key { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--iris);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- catalog --- */

.result-count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding: 14px 0; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.card-plate {
  aspect-ratio: 1;
  margin-bottom: 12px;
  background-color: var(--paper-sunk);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
}
.card-house { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--iris); margin: 0 0 4px; }
.card-title { font-size: 12.5px; line-height: 1.4; margin: 0 0 8px; color: var(--ink); }
.card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-price { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.card-state { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.card-flagged {
  display: inline-block;
  margin-top: 9px;
  padding: 2px 7px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
  border-radius: 999px;
}
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 34px 0 0; }
.pager .info { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------------------- method --- */

.prose {
  max-width: 68ch;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 34px 38px;
  box-shadow: var(--shadow);
}
.prose h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  margin: 30px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose p { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ol, .prose ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.prose li { margin-bottom: 5px; }
.scale-key { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.scale-key div { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--ink-2); }
.swatch { width: 26px; height: 5px; border-radius: 999px; flex: none; }
.swatch.act { background: var(--vermilion); }
.swatch.watch { background: var(--ochre); }
.swatch.hold { background: var(--ink-3); }

/* ---------------------------------------------------------- empty, toast --- */

.empty {
  padding: 60px 30px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  color: var(--ink-3);
  font-size: 13.5px;
}
.empty strong { display: block; font-family: var(--display); font-size: 19px; color: var(--ink-2); margin-bottom: 8px; font-weight: 500; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 12.5px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.toast.show { opacity: 1; transform: none; }
.toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); flex: none; }
.toast.warn .dot { background: var(--ochre); }

/* ---------------------------------------------------------------- modal --- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 10, 17, 0.62);
  animation: fade 0.2s ease both;
}
.modal-card {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px 32px 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
  animation: rise 0.32s var(--ease) both;
}
.modal-card.wide { max-width: 780px; }
.modal-card h2 { font-family: var(--display); font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.modal-sub { font-size: 12.5px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.55; }
.modal-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.modal-status { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; min-height: 17px; }
.text-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 13px;
}
.text-input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }
.file-input { height: auto; padding: 10px 12px; font-family: var(--body); font-size: 12.5px; cursor: pointer; }

.file-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.file-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.file-row .st { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.file-row .st.ok { color: var(--moss); }
.file-row .st.err { color: var(--vermilion); }

.report-note {
  padding: 11px 13px;
  margin: 18px 0 14px;
  background: var(--surface-2);
  border-left: 2px solid var(--ink-3);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.report-note.warn { border-left-color: var(--ochre); }
.report-block { border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 9px; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 14px; background: var(--surface-2); }
.report-title { font-size: 13px; color: var(--ink); line-height: 1.4; }
.report-house { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iris); margin-top: 3px; }
.report-state {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.report-state.found { color: var(--moss); border-color: var(--moss); background: var(--moss-wash); }
.report-state.missing { color: var(--ink-3); border-color: var(--rule); }
.report-sources { list-style: none; margin: 0; padding: 0; }
.report-sources li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--ink-2); }
.report-sources .f { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.report-sources .q { font-family: var(--mono); font-size: 11.5px; color: var(--moss); white-space: nowrap; }
.report-sources li > span:first-child { min-width: 0; }
/* The supplier's own line, verbatim. A wrong name match is invisible without it. */
.matched-line {
  display: block;
  margin-top: 5px;
  padding: 5px 8px;
  background: var(--paper-sunk);
  border-left: 2px solid var(--ochre);
  border-radius: 0 2px 2px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1180px) {
  .fiche { grid-template-columns: 42px 92px minmax(0, 1fr); }
  .fiche-side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
    border-left: none;
    border-top: 1px solid var(--rule-soft);
    padding-left: 22px;
    padding-top: 16px;
  }
  .fiche-side > * { flex: 1 1 190px; }
  .side-top { flex: 1 1 100%; }
  .brief-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Five figures never divide evenly into two or three columns, so the last one
     takes the leftover cell rather than leaving a bare gap beside it. */
  .brief-in .stat:last-child { grid-column: span 2; }
}

@media (max-width: 860px) {
  :root { --rail-w: 100%; }
  /* minmax(0, 1fr), not 1fr: a plain 1fr track takes its minimum from the widest
     item's max-content, so the horizontal section bar would stretch the column
     past the screen and scroll the whole page sideways. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    min-width: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-right: none;
    border-bottom: 1px solid var(--rail-rule);
  }
  .rail-crest { width: 30px; height: 30px; font-size: 12px; }
  .rail-mark { display: none; }
  /* The section list scrolls inside itself. Without min-width:0 a flex item refuses
     to shrink below its content, and the whole page ends up scrolling sideways. */
  .rail-nav { flex: 1 1 0%; min-width: 0; flex-direction: row; padding: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-btn { width: auto; flex: none; flex-direction: row; gap: 7px; padding: 8px 11px; white-space: nowrap; }
  .rail-btn.active::before { left: 0; right: 0; top: auto; bottom: -8px; width: auto; height: 2px; transform: none; }
  .rail-count { position: static; }
  .rail-foot { flex: none; flex-direction: row; margin-top: 0; margin-left: 0; width: auto; padding: 0; }
  .rail-ver { display: none; }
  .wrap { padding: 0 18px; }
  .brief-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 18px 16px; }
}

@media (max-width: 620px) {
  .fiche { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 16px 16px 0; gap: 14px; }
  .fiche-plate { display: none; }
  .fiche-rank { padding-left: 11px; }
  .fiche-side { padding-left: 0; }
  .brief-in { grid-template-columns: 1fr 1fr; }
  .stat-v { font-size: 28px; }
  .prose { padding: 24px 20px; }
  .catalog { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .masthead-meta { gap: 18px; }
}

/* ---------------------------------------------------------------- print --- */

@media print {
  .rail, .toolbar, .selectbar, .decide, .note-toggle, .btn, .modal, .toast, .why { display: none !important; }
  body { background: #fff; color: #000; }
  .app { grid-template-columns: 1fr; }
  .fiche { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .canvas { padding-bottom: 0; }
}