/* The trade check page's styles (release v2026.09.30.3, stream S4): linked by
   /is-this-trade-fair alone (server/src/seo/tradefair.ts headExtra), in the
   public sheet's components layer so the shell's utilities still win where
   they should. Tokens come from public.css. */
/* --- the trade check (W20, W45) ----------------------------------------------
   The form, the answer (VerdictCard without a verdict, two SideCards), the
   trade post maker and the saved checks. The page and the API render the
   answer with one function (tradefair.ts renderTradeResult). */
@layer components {
  .tc { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .tc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
  .tc-side { margin: 0; padding: 16px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: var(--shadow-1); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .tc-legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-faint); }
  .tc-legend + * { clear: both; }
  .tc-count { color: var(--pt-soft); }
  .tc-count:empty { display: none; }
  .tc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .tc-list:empty { display: none; }
  .tc-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-ctl); background: var(--pt-wash); }
  .tc-img { flex: none; width: 56px; height: 42px; border-radius: var(--radius-ctl); background: var(--pt-raise); border: 1px solid var(--pt-hairline); display: grid; place-items: center; overflow: hidden; }
  .tc-img img { max-width: 86%; max-height: 82%; object-fit: contain; }
  .tc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .tc-name { font-size: 14px; font-weight: 500; color: var(--pt-ink); overflow-wrap: anywhere; }
  .tc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .tc-opt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--pt-soft); }
  .tc-opt select, .tc-opt input { min-height: 44px; font-family: var(--font-mono); font-size: 14px; padding: 8px 10px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-ctl); background: var(--pt-surface); color: var(--pt-ink); }
  .tc-opt select:focus-visible, .tc-opt input:focus-visible { outline: none; border-color: var(--pt-copper); }
  .tc-phase select { min-width: 150px; }
  .tc-float input { width: 120px; }
  .tc-qty input { width: 76px; }
  .tc-phase select:has(option[value=""]:checked) { border-color: color-mix(in srgb, var(--pt-high) 55%, transparent); }
  .tc-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--pt-hairline); border-radius: 999px; background: transparent; color: var(--pt-faint); font-size: 18px; line-height: 1; cursor: pointer; }
  .tc-x:hover { color: var(--pt-ink); border-color: var(--pt-hairline-strong); }
  .tc-empty { margin: 0; font-size: 13px; color: var(--pt-faint); }
  .tc-add { position: relative; }
  .tc-add input { width: 100%; min-height: 48px; font-size: 15px; padding: 12px 18px; border: 1px solid var(--pt-hairline-strong); border-radius: 999px; background: color-mix(in srgb, var(--pt-steel) 7%, transparent); color: var(--pt-ink); }
  .tc-add input::placeholder { color: var(--pt-faint); }
  .tc-add input:focus-visible { outline: none; border-color: var(--pt-copper); }
  .tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tc-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 4px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9); max-height: min(60vh, 420px); overflow-y: auto; scrollbar-width: none; }
  .tc-sug::-webkit-scrollbar { display: none; }
  .tc-sug li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: var(--radius-ctl); cursor: pointer; font-size: 14px; color: var(--pt-soft); }
  .tc-sug li[aria-selected="true"], .tc-sug li:hover { background: color-mix(in srgb, var(--pt-copper) 12%, transparent); color: var(--pt-ink); }
  .tc-sug img { width: 40px; height: 30px; object-fit: contain; flex: none; }
  .tc-sug .tc-sug-msg { cursor: default; color: var(--pt-faint); }
  .tc-go { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tc-go-b { display: flex; flex-wrap: wrap; gap: 10px; }
  .tc-go .tc-go-main { min-height: 48px; padding-inline: 24px; font-size: 15px; }
  .tc-msg { margin: 0; font-size: 13px; color: var(--pt-soft); max-width: 72ch; }
  .tc-err { color: var(--pt-crit-bright); }

  .tp-maker { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + 12px); }
  .tp-maker[hidden] { display: none; }
  .tp-maker-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tp-maker-h h2 { margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); }
  .tp-maker-copy { margin: 0; font-size: 14px; color: var(--pt-soft); max-width: 72ch; }
  .tp-maker-l { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--pt-soft); }
  .tp-maker-l input { min-height: 48px; max-width: 520px; font-size: 15px; padding: 12px 14px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-ctl); background: var(--pt-wash); color: var(--pt-ink); }
  .tp-maker-l input:focus-visible { outline: none; border-color: var(--pt-copper); }
  .tp-maker-go { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

  /* The answer never lands under the sticky header (K6, tools-4). */
  .tc-out:empty { display: none; }
  .tc-res { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--header-h) + 12px); }
  .tc-res.stale { opacity: 0.55; }
  .tc-bal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
  .tc-bal .tc-diff { grid-column: 1 / -1; order: 3; }
  @media (min-width: 640px) {
    .tc-bal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
    .tc-bal .tc-diff { grid-column: auto; order: 0; text-align: center; }
    .tc-tot-get { text-align: right; align-items: flex-end; }
  }
  .tc-tot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .tc-tot-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 400; font-size: clamp(22px, 3.5vw, 30px); line-height: 1; letter-spacing: -0.01em; color: var(--pt-ink); }
  .tc-tot-s { font-family: var(--font-mono); font-size: 11px; color: var(--pt-faint); }
  .tc-diff { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pt-soft); text-wrap: balance; }
  .tc-diff b { font-family: var(--font-mono); font-weight: 400; color: var(--pt-ink); }
  .tc-diff.up b { color: var(--pt-ok); }
  .tc-diff.down b { color: var(--pt-crit-bright); }
  .tc-bar { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--pt-steel) 10%, transparent); }
  .tc-bar i { position: absolute; inset-block: 0; width: 100%; }
  .tc-bar-give { left: 0; transform-origin: left; background: color-mix(in srgb, var(--pt-steel) 45%, transparent); }
  .tc-bar-get { right: 0; transform-origin: right; background: var(--pt-verdigris-bright); }
  .tc-partial { margin: 0; font-size: 13px; color: var(--pt-high); }
  .tc-sides-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
  .tc-lines { display: flex; flex-direction: column; }
  .tc-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--pt-hairline); }
  .tc-line:first-child { border-top: 0; }
  .tc-line-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .tc-line-n { font-size: 13.5px; font-weight: 500; color: var(--pt-ink); overflow-wrap: anywhere; }
  .tc-line-n small { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--pt-faint); }
  .tc-line-s { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--pt-faint); overflow-wrap: anywhere; }
  .tc-line-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--pt-ink); text-align: right; white-space: nowrap; padding-top: 2px; }
  .tc-line-none { color: var(--pt-faint); }
  .tc-warn { font-family: var(--font-sans); font-size: 12.5px; color: var(--pt-high); }
  .tc-follow { margin-top: 4px; }
  .tc-follow .tc-follow-b { min-height: 36px; padding-inline: 12px; margin-left: -12px; font-size: 12.5px; }
  .tc-foot { padding: 10px 16px 14px; border-top: 1px solid var(--pt-hairline); font-size: 13px; color: var(--pt-soft); }
  .tc-foot p { margin: 4px 0; }
  .tc-none { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--pt-faint); }
  .tc-share { display: flex; flex-direction: column; gap: 8px; }
  .tc-share-b { display: flex; flex-wrap: wrap; gap: 10px; }
  .tc-share p { margin: 0; font-size: 13px; color: var(--pt-faint); max-width: 72ch; }
  .tc-savefoot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border: 1px dashed var(--pt-hairline-strong); border-radius: var(--radius-card); background: color-mix(in srgb, var(--pt-wash) 70%, transparent); }

  .tc-ext-a { display: flex; flex-wrap: wrap; gap: 10px; }
  .tc-ext-a .tc-ext-send { display: none; }
  @media (pointer: coarse) and (max-width: 820px) {
    .tc-ext-a a[data-umami-event="trade-check-ext"] { display: none; }
    .tc-ext-a .tc-ext-send { display: inline-flex; }
  }

  .tc-saved { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--header-h) + 12px); }
  .tc-saved[hidden] { display: none; }
  .tc-saved-jump { margin: 0; }
  .tc-saved-jump[hidden] { display: none; }
  .tc-saved-jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--pt-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pt-ink) 35%, transparent); text-underline-offset: 3px; }
  .tc-saved-h h2 { margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); }
  .tc-saved-h p { margin: 4px 0 0; font-size: 13px; color: var(--pt-faint); max-width: 72ch; }
  .tc-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .tc-sv { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .tc-sv-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-faint); }
  .tc-sv-sides { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .tc-sv-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .tc-sv-side .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pt-faint); }
  .tc-sv-items { display: flex; flex-wrap: wrap; gap: 6px; }
  .tc-sv-it { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 8px 4px 4px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-ctl); background: var(--pt-wash); font-size: 12.5px; color: var(--pt-soft); }
  .tc-sv-it img { width: 36px; height: 27px; object-fit: contain; flex: none; }
  .tc-sv-it span { overflow-wrap: anywhere; }
  .tc-sv-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tc-sv-val { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radius-ctl); background: var(--pt-wash); }
  .tc-sv-val .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pt-faint); }
  .tc-sv-val b { font-family: var(--font-mono); font-weight: 400; font-size: 15px; color: var(--pt-ink); }
  .tc-sv-val .s { font-size: 12.5px; color: var(--pt-soft); }
  .tc-sv-val .up { color: var(--pt-ok); }
  .tc-sv-val .down { color: var(--pt-crit-bright); }
  .tc-sv-a { display: flex; flex-wrap: wrap; gap: 10px; }
  .tc-sv-a .btn { min-height: 44px; }

  /* Worked pairs as image cards that fill the row. */
  .tc-pair { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; min-width: 0; transition: border-color 160ms var(--ease-soft); }
  .tc-pair:hover { border-color: var(--pt-hairline-strong); }
  .tc-pair-art { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .tc-pair-x { color: var(--pt-faint); flex: none; }
  .tc-pair-n { font-size: 14px; font-weight: 500; color: var(--pt-ink); overflow-wrap: anywhere; }
  .tc-pair-s { font-family: var(--font-mono); font-size: 11px; color: var(--pt-faint); }
  .tc-pair-go { margin-top: 4px; font-size: 13px; color: var(--pt-soft); }
  .tc-pair:hover .tc-pair-go { color: var(--pt-ink); }

  /* A phone: the first input on the first screen (W45, under y 300 at 390):
     a smaller title on this tool page, the status line and the lede after
     the tool. */
  @media (max-width: 639px) {
    .s4-tc .title-xl { font-size: 38px; }
    .s4-tc .status-line { display: none; }
    .s4-tc > .g-work { order: 0; }
    .s4-tc > .s4-tc-lede { order: 1; }
    .s4-tc > :not(.page-head):not(.g-work):not(.s4-tc-lede) { order: 2; }
    .tc-side { padding: 12px; }
    .tc-item { gap: 8px; padding: 8px; }
    .tc-float input { width: 100px; }
    .tc-qty input { width: 64px; }
    .tc-phase select { min-width: 0; max-width: 100%; }
    .tc-line { padding-inline: 12px; }
  }
}


/* A shared check (?give=...&get=...) arrives with its answer drawn by the
   server: on a phone the answer leads, above the filled form, so a friend's
   link opens on the numbers rather than on the form. Nothing scrolls on
   load: the page is cached by its address and is the same for everyone. */
@layer components {
  @media (max-width: 639px) {
    .tc > .tc-out-link { order: -1; }
  }
}