:root {
  color-scheme: light;

  --bg:      #ffffff;
  --panel:   #ffffff;
  --wash:    #f6f9fc;
  --line:    #e3e8ee;
  --line-2:  #cfd7df;

  --tint:     #eef0f3;
  --tint-hov: #f5f6f8;
  --tint-row: #fbfcfd;

  --locked:   var(--tint);

  --ink:     #0a2540;
  --sub:     #425466;
  --faint:   #627489;

  --side:      #ffffff;
  --side-ink:  #425466;
  --side-mut:  #8898aa;
  --side-hov:  #f6f9fc;

  --accent:      #635bff;
  --accent-deep: #4f46e5;
  --accent-soft: #eeedff;
  --accent-line: #c7c3ff;

  --brand-navy:  #0a2540;

  --ok-ink:  #0e7a4a; --ok-soft:  #d7f7c2; --ok-line: #a6eb99;
  --info-ink:#0055bc; --info-soft:#d6ecff; --info-line:#a4c9f5;

  --bad-ink: #df1b41;

  --shadow:    0 2px 5px -1px rgba(50, 50, 93, .25), 0 1px 3px -1px rgba(0, 0, 0, .3);
  --shadow-lg: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3);

  --r-xs:      4px;
  --r-sm:      6px;
  --r-control: 7px;
  --r:         9px;
  --r-lg:     12px;
  --r-xl:      8px;

  --shell: 1180px;

  --gutter: 1.8rem;
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;

  --font-display: var(--font);

  --font-brand: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-ink:  #0a2540;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
       font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;

       line-break: strict; }

:where(html.imgfade) img:where(:not(.is-loaded)) { opacity: 0; }
:where(html.imgfade) img { transition: opacity .36s ease-out; }

@media (prefers-reduced-motion: reduce) {
  :where(html.imgfade) img:where(:not(.is-loaded)) { opacity: 1; }
  :where(html.imgfade) img { transition: none; }
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1 { font-weight: 800; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; margin: 0; }

.page-head h1, .shell .page-head h1 { font-size: 1.45rem; }
h2 { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
h3 { font-size: .7rem; font-weight: 700; margin: 0 0 .9rem; text-transform: uppercase;
     letter-spacing: .12em; color: var(--sub); }
code { font-size: .82em; background: var(--bg); padding: .12em .4em; border-radius: var(--r-xs); color: var(--sub); }

.kicker { color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .16em;
          text-transform: uppercase; margin-bottom: .5rem; }

.brandmark { display: inline-flex; align-items: baseline; gap: .5rem;
             font-family: var(--font-brand); font-weight: 800; font-size: 1.28rem;
             letter-spacing: -.035em; color: var(--brand-ink) !important; }
.brandmark .brand-word { font-family: var(--font-brand); font-weight: 800;
                         letter-spacing: -.035em; line-height: 1; }

.brandmark .brand-dot { color: var(--accent); margin-left: -.04em; }

.sidebar .brandmark, .appbar .brandmark { color: var(--brand-ink) !important; }
.sidebar .brandmark .brand-dot, .appbar .brandmark .brand-dot { color: var(--accent); }
.brandmark.brand-lg { font-size: 2.1rem; }

.l-nav > .brandmark { font-size: 1.5rem; }

.brandmark .env-tag { align-self: center; }
.env-tag { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
           color: #fff; background: var(--accent); padding: .14rem .5rem;
           border-radius: var(--r-xs); margin-left: .6rem; }

/* ── App shell: light sidebar + main column ────────────────────────────── */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh;

         background: linear-gradient(to right, var(--side) 0 215px, var(--line) 215px 216px,
                                     transparent 216px); }
.sidebar { background: var(--side); color: var(--side-ink); padding: 1rem .8rem;
           display: flex; flex-direction: column; position: sticky; top: 0;
           height: 100vh; overflow-y: auto; border-right: 1px solid var(--line); }
.sidebar .brandmark { padding: .3rem .5rem 1rem; flex-wrap: wrap;
                      row-gap: .35rem; font-size: .95rem; }

.sidebar .env-tag, .appbar .env-tag {
  margin-left: .4rem; font-size: .54rem; padding: .12rem .42rem; letter-spacing: .1em; }
.sidebar .env-tag { background: var(--accent-soft); color: var(--accent-deep); }
.appbar .env-tag { background: var(--accent-soft); color: var(--accent-deep); }
.sidebar h5 { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
              color: var(--side-mut); padding: .9rem .55rem .35rem; margin: 0; font-weight: 700; }
.nv { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: var(--r-control);
      font-weight: 600; font-size: .84rem; margin-bottom: 2px; color: var(--side-ink); }
.nv:hover { background: var(--side-hov); color: var(--ink); }

.nv.on { background: var(--accent-soft); color: var(--accent-deep); }
.nv .n { margin-left: auto; background: var(--tint); color: var(--sub); border-radius: 99px;
         padding: .02rem .5rem; font-size: .68rem; font-weight: 700; }
.nv.on .n { background: #fff; color: var(--accent-deep); }
/* Requests published since this person last opened the feed. */
.nv .n.is-new, .nv.on .n.is-new { background: var(--bad-ink); color: #fff; }

.ico { flex: none; display: block; }

.nv .ico, .appmenu-link .ico { margin-top: -1px; }
.sidebar .foot { margin-top: auto; font-size: .72rem; color: var(--side-mut);
                 padding: .8rem .55rem .2rem; border-top: 1px solid var(--line); }
.sidebar .foot b { color: var(--side-ink); display: block; font-size: .76rem; }
.sidebar .foot form { margin-top: .6rem; }
.sidebar .foot .lang-switch { margin-top: .7rem; }
.sidebar .foot .lang-switch form { margin-top: 0; }
.sidebar select { width: 100%; font: inherit; font-size: .76rem; color: var(--side-ink);
                  background: var(--side-hov); border: 1px solid var(--line); border-radius: var(--r-sm);
                  padding: .3rem .5rem; margin-bottom: .5rem; }

/* The page's own padding is published as well as set: anything that has to
   run the full width — the band below — gives exactly this much back, and the
   two cannot drift as the padding changes with the width. Every rule that
   sets this padding sets the pair with it. */
main.container { --pad-x: 1.8rem; --pad-t: 1.4rem;
                 max-width: 1240px; margin: 0 auto; padding: var(--pad-t) var(--pad-x) 4rem;
                 width: 100%; }

/* ── The standing band ─────────────────────────────────────────────────────
   One sentence across the top of a page, above its title: what has to be done
   before anything under it matters, or what has happened to the page being
   read. It gives back the container's own padding so it runs the full width
   as a masthead does, rather than sitting in the page as one more card among
   the cards — which is what it did as a hint beside the button, below the
   rail, below the fold on a phone, and unread. */
.page-band { margin: 0 calc(-1 * var(--pad-x)) 1.3rem; padding: .75rem var(--pad-x);
             background: var(--bad-ink); color: #fff;
             font-size: .85rem; font-weight: 600; line-height: 1.45; }
/* Flush with the top of the page when it is the first thing on it; under a
   flash when there is one, because two things cannot both be first. */
main.container > .page-band:first-child,
main.container > #flashes:first-child:not(:has(*)) + .page-band { margin-top: calc(-1 * var(--pad-t)); }
/* Nothing is owed and nothing is due — a record of what happened, not a
   demand. It keeps the width and loses the alarm. */
.page-band-quiet { background: var(--sub); }

/* ── Page header (toolbar row) ─────────────────────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between;
             gap: 1.5rem; margin-bottom: 1.2rem; }
.page-head .sub { color: var(--sub); font-size: .85rem; margin: .3rem 0 0; }

.page-head .actions { flex-shrink: 0; display: flex; align-items: stretch; gap: .5rem; }
.page-head .actions form { margin: 0; display: flex; }
.page-head .actions .btn { white-space: nowrap; }

.page-head .actions:has(.publish-cta) { align-items: center; }

.publish-cta { display: flex; align-items: center; gap: .7rem; }

.bubble-side { position: relative; flex: 0 1 auto; width: 16rem; min-width: 0; margin: 0;
             background: var(--accent-soft); border: 1px solid var(--accent-line);
             border-radius: var(--r); padding: .55rem .7rem;
             color: var(--accent-deep); font-size: .78rem; line-height: 1.45;
             font-weight: 600; text-align: left; }

.bubble-side::before, .bubble-side::after { content: ""; position: absolute;
             top: 50%; transform: translateY(-50%);
             border: 7px solid transparent; border-right: 0; }
.bubble-side::before { left: 100%; border-left-color: var(--accent-line); }
.bubble-side::after { left: calc(100% - 1px);
             border-width: 6px; border-right: 0; border-left-color: var(--accent-soft); }
.page-head .kicker { margin-bottom: .2rem; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
        padding: 1.4rem 1.6rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; }
.card-narrow { max-width: 640px; }

.col-narrow { max-width: 640px; }
.col-narrow .card, .col-narrow .card-narrow { max-width: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }

.grid-2[hidden] { display: none; }
/* Settings: the logo, and its picker beside it. */
.logo-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.logo-row-body { min-width: 0; flex: 1; }
form.stacked .logo-row-body label { margin-top: .7rem; }
/* The tile is the preview, so it keeps its size while the picture inside it
   changes — and it is round-cornered like the avatar it stands in for. */
.logo-tile { flex: 0 0 auto; display: inline-flex; }
.logo-tile .avatar { display: inline-flex; }
/* The picker is a zone, not a browser control: one line, the whole width, and
   it reads as the app rather than as the operating system. */
form.stacked .logo-zone { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                          margin-top: .3rem; cursor: pointer;
                          transition: border-color .15s, background .15s; }
form.stacked .logo-zone > svg { flex: 0 0 auto; color: var(--sub); }
form.stacked .logo-zone:hover { border-color: var(--accent); background: var(--panel); }
form.stacked .logo-zone:focus-within { border-color: var(--accent);
                                       box-shadow: 0 0 0 3px var(--accent-soft); }
.logo-picked { min-width: 0; font-size: .8rem; color: var(--ink); font-weight: 500;
               overflow-wrap: anywhere; }
.logo-picked[hidden] { display: none; }
.logo-picked.is-bad { color: var(--bad-ink); font-weight: 600; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; gap: .2rem; } }
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Data tables: boxed dense panels ───────────────────────────────────── */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel);
             border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.list th { text-align: left; font-size: .62rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .09em; color: var(--sub); padding: .55rem 1rem;
                background: var(--wash); border-bottom: 1px solid var(--line);
                white-space: nowrap; }
table.list td { padding: .7rem 1rem; border-bottom: 1px solid var(--line);
                vertical-align: middle; font-size: .84rem; }
table.list td:not(:first-child) { white-space: nowrap; }
table.list tr:last-child td { border-bottom: none; }

table.list tr.is-last td { border-bottom: none; }
table.list tr:hover td { background: var(--wash); }

table.list tr.is-live td, table.list tr.is-live:hover td { background: var(--accent-soft); }
table.list td a { font-weight: 700; }
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }

table.list th.cell-act, table.list td.cell-act { text-align: center; }

.cell-sub { display: block; color: var(--faint); font-size: .72rem; font-weight: 400;
            margin-top: .1rem; white-space: normal; }
.cell-sub[hidden] { display: none; }

.cell-form { display: inline; }
.cell-form-row { display: flex; gap: .4rem; align-items: center; }
.cell-form-row input { flex: 1 1 8rem; min-width: 0; }
.cell-form-row button { flex: none; }
.cell-link { background: none; border: 0; padding: 0; margin: 0; font: inherit;
             font-weight: 700; color: var(--accent-deep); cursor: pointer;
             text-align: left; }
.cell-link:hover { text-decoration: underline; }

.count-link { color: var(--accent-deep); text-decoration: underline;
              text-underline-offset: 2px; white-space: nowrap; }
.count-link:hover { color: var(--accent); }
.card table.list { border: none; border-radius: 0; }
.card table.list td { padding: .6rem 1rem .6rem 0; }

/* thumbnails in lists */
.thumb { width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
         display: flex; align-items: center; justify-content: center; }
.thumb svg { width: 17px; height: 17px; }
/* The request and order lists on both sides: the picture is read first. The
   negative margin gives back what it adds over the 38px tile, so it grows into
   the cell's padding and the row keeps its height. */
.thumb.thumb-lg { width: 60px; height: 60px; margin-block: -11px; }
.rowflex { display: flex; align-items: center; gap: .8rem; }

.tint-0 { background: var(--tint);        color: var(--sub); }
.tint-1 { background: var(--accent-soft); color: var(--accent-deep); }
.tint-2 { background: var(--ok-soft);     color: var(--ok-ink); }
.tint-3 { background: var(--info-soft);   color: var(--info-ink); }

/* A real card scan sits on nothing: no white plate, and not the tile's tint
   either — a scan has its own transparent corners and its own colour, and any
   backdrop behind it reads as a box drawn around the card. The tint stays for
   the category drawing, which is a flat glyph and needs one. */
.thumb.thumb-plate { background: none; }

/* The one figure the whole request turns on: a seller reads it first and
   decides on it, and a buyer who leaves it low is answered by nobody. It is
   set apart rather than shouted at — the accent rule and tint the form uses
   for anything it wants read, and a bigger box because the number is short
   and worth seeing. */
.budget-field { background: var(--accent-soft); border-left: 3px solid var(--accent);
                border-radius: var(--r-control); padding: .7rem .9rem .85rem; }
form.stacked .budget-field > label { margin-top: 0; }
form.stacked .budget-field > input { font-size: 1.05rem; font-weight: 600;
                                     padding-block: .5rem; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }

.thumb img.thumb-fit { object-fit: contain; }

/* ── Badges: compact status chips ──────────────────────────────────────── */
.badge { display: inline-block; padding: .13rem .5rem; border-radius: var(--r-xs);
         font-size: .66rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
         background: var(--tint); color: var(--sub); }
.badge-open, .badge-active, .badge-approved, .badge-escrowed, .badge-paid,
.badge-succeeded, .badge-fulfilled { background: var(--ok-soft); color: var(--ok-ink); }
.badge-exclusive, .badge-shortlisted, .badge-pending, .badge-awaiting_payment,
.badge-applied, .badge-draft, .badge-under_review, .badge-queued,
.badge-requires_payment { background: var(--accent-soft); color: var(--accent-deep); }
.badge-shipped, .badge-delivered, .badge-awarded, .badge-accepted, .badge-closed,
.badge-processing, .badge-resolved_partial { background: var(--info-soft); color: var(--info-ink); }
.badge-cancelled, .badge-expired, .badge-rejected, .badge-suspended, .badge-declined,
.badge-disconnected,
.badge-lost, .badge-withdrawn, .badge-in_claim, .badge-held, .badge-failed,
.badge-refunded, .badge-resolved_refund { background: var(--accent-soft); color: var(--accent-deep);
                                          box-shadow: inset 0 0 0 1px var(--accent-line); }

.state { display: inline-flex; align-items: center; gap: .45rem;
         font-size: .78rem; font-weight: 700; letter-spacing: .03em;
         white-space: nowrap; vertical-align: middle; color: var(--sub); }

.state::before { content: ""; width: 10px; height: 10px; border-radius: 50%;
                 background: var(--line-2); flex: 0 0 auto; }
.state-live::before  { background: var(--info-ink); }

.state-live.state-open::before { background: var(--ok-ink); }
.state-won   { color: var(--ok-ink); }
.state-won::before   { background: var(--ok-ink); }
.state-alert { color: var(--bad-ink); }
.state-alert::before { background: var(--bad-ink); }

.state-todo { color: var(--accent-deep); }
.state-todo::before { background: var(--accent-deep); }

.pick-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick-set legend { padding: 0; font-weight: 600; font-size: .8rem; }
.pick-grid { display: grid; gap: .4rem;
             grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

.pick, form.stacked .pick {
        display: flex; align-items: center; gap: .5rem; margin: 0;
        padding: .5rem .6rem; font-weight: 500; font-size: .82rem;
        border: 1px solid var(--line-2); border-radius: var(--r-control);
        background: var(--panel); cursor: pointer;
        transition: border-color .12s ease, background .12s ease; }
.pick:hover { border-color: var(--accent-line); }

.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.pick input { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.pick.is-muted { opacity: .5; cursor: not-allowed; }
.pick.is-muted:hover { border-color: var(--line-2); }
.pick-note:empty { display: none; }

.qty-mark { font-weight: 800; font-size: .95em; color: var(--accent-deep);
            font-variant-numeric: tabular-nums; white-space: nowrap;
            margin-left: .15rem; letter-spacing: .01em; }

.countdown { font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700;
             color: var(--sub); white-space: nowrap; letter-spacing: .01em; }
.countdown.is-urgent { color: var(--bad-ink); }

.countdown.is-over { color: var(--faint); font-weight: 500; }

.state-with-countdown { display: inline-flex; align-items: center; gap: .45rem;
                        flex-wrap: wrap; }

.state-with-countdown.is-stacked { flex-direction: column; align-items: flex-start;
                        gap: .15rem; }

.state-with-countdown.is-stacked > .countdown { margin-left: calc(10px + .45rem); }

.state-with-countdown.is-stacked > .labelled-clock { margin-left: calc(10px + .45rem); }

/* The label sits in the chip's own type, so the clock reads as one line
   under the status text instead of a heading pushing the time below it. */
.labelled-clock { font-size: .78rem; letter-spacing: .03em; white-space: nowrap; }
.labelled-clock > .countdown { font-size: inherit; }

.state-with-countdown.is-stacked > .claim-until { margin-left: calc(10px + .45rem); font-size: .85em; }

.labelled-clock:has(.countdown.is-over) > .labelled-clock-label { display: none; }

.pill-row:has(.state-with-countdown.is-stacked) { align-items: flex-start; }

.btn { display: inline-block; border: 1px solid transparent; cursor: pointer;
       font: inherit; font-weight: 700;
       font-size: .84rem; line-height: 1.25; padding: .55rem 1.1rem; border-radius: var(--r-control);
       background: var(--accent); color: #fff;

       transition: background .15s ease, border-color .15s ease, color .15s ease; }

.btn:hover { background: var(--brand-navy); color: #fff; }

.btn-secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); }
.btn-secondary:hover { background: var(--wash); color: var(--ink); border-color: var(--faint); }
.btn-danger { background: var(--panel); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.btn-danger:hover { background: var(--accent-soft); color: var(--accent-deep); }
.btn-sm { padding: .35rem .8rem; font-size: .76rem; }

.btn-cta { padding: .78rem 1.45rem; font-size: .92rem; border-radius: 999px;
           box-shadow: none; }
.btn-cta::after { content: ""; display: inline-block; vertical-align: -1px;
  width: 15px; height: 12px; margin-left: .85rem;
  background: no-repeat center / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }

.actions-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: .5rem;
               margin-top: 1rem; }
.actions-row form { margin: 0; display: flex; }
.actions-row .btn { white-space: nowrap; }

.page-head .pill-row { margin-bottom: 0; }

hr.rule { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }

.panel-head { display: flex; align-items: center; justify-content: space-between;
              gap: .55rem; flex-wrap: wrap; }

.panel-head .badge, .panel-head .state { text-transform: none; letter-spacing: 0; }
.setup-body { color: var(--sub); font-size: .84rem; line-height: 1.55; margin: 0; }
.setup-points { margin: .45rem 0 0; padding-left: 1.1rem; color: var(--sub);
                font-size: .82rem; line-height: 1.65; }

.setup-status { color: var(--sub); font-size: .76rem; line-height: 1.45;
                margin: .6rem 0 0; }
.setup-status[hidden] { display: none; }

form.stacked { --field-pad: .5rem .7rem; --field-fs: .86rem;
               --field-min-h: 90px; --label-gap: 1rem; }

form.stacked.form-compact { --field-pad: .34rem .5rem; --field-fs: .8rem;
                            --label-gap: .7rem; }

form.stacked label { display: block; font-weight: 600;
                     margin: var(--label-gap) 0 .3rem; font-size: .8rem; }

form.stacked input:where(:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button])),
form.stacked textarea, form.stacked select {
  width: 100%; font: inherit; font-size: var(--field-fs); color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--r-control); padding: var(--field-pad); }
form.stacked input:focus, form.stacked textarea:focus, form.stacked select:focus {
  outline: 2px solid var(--accent-line); border-color: var(--accent); }
form.stacked input::placeholder, form.stacked textarea::placeholder { color: var(--faint); }

form.stacked input:autofill,
form.stacked select:autofill,
form.stacked textarea:autofill {
  box-shadow: inset 0 0 0 100px var(--accent-soft);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink); }
form.stacked input:-webkit-autofill,
form.stacked select:-webkit-autofill,
form.stacked textarea:-webkit-autofill {
  box-shadow: inset 0 0 0 100px var(--accent-soft);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink); }

form.stacked .field_with_errors { display: contents; }
form.stacked .field_with_errors input,
form.stacked .field_with_errors textarea,
form.stacked .field_with_errors select,
form.stacked input.is-invalid, form.stacked textarea.is-invalid, form.stacked select.is-invalid {
  border-color: var(--accent); background: var(--accent-soft); }
form.stacked .field_with_errors label { color: var(--accent-deep); }

.req { color: var(--accent); font-weight: 700; }

.pw { display: grid; --pw-eye-w: 2.5rem; }
/* The field and its eye share one cell, so the eye is centred on the field
   itself: anything a browser extension slips in after the input takes a row
   of its own instead of stretching the box the eye is centred in. */
.pw > input, .pw > .pw-eye { grid-area: 1 / 1; }

.pw input { display: block; }
form.stacked .pw input { padding-right: var(--pw-eye-w); }

.pw-eye { justify-self: end; align-self: stretch; width: var(--pw-eye-w);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--faint); border-radius: 0 var(--r-control) var(--r-control) 0; }
.pw-eye:hover { color: var(--ink); }

.pw-eye:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; color: var(--ink); }

.pw-eye[aria-pressed="true"] { color: var(--accent); }

.pw-eye svg[hidden] { display: none; }

form.stacked textarea { display: block; min-height: var(--field-min-h); resize: vertical; }

form.stacked input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .15s; }
form.stacked input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
form.stacked input[type=file] { width: 100%; font: inherit; font-size: .82rem; color: var(--sub);
  background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r-control); padding: .5rem .7rem; }

form.stacked .upload-zone input[type=file] { position: absolute; width: 1px; height: 1px;
                                             opacity: 0; pointer-events: none; }
form.stacked input[type=file]::file-selector-button {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-xs); padding: .28rem .7rem; margin-right: .7rem;
  cursor: pointer; }
form.stacked input[type=file]:hover::file-selector-button { border-color: var(--accent); color: var(--accent); }
form.stacked hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0 .4rem; }

.hint { color: var(--faint); font-size: .74rem; line-height: 1.5; }

.hint.standalone { font-size: .8rem; margin: -.4rem 0 1.2rem; max-width: 60ch; }
/* Only the spacing is about being under a field. */
form.stacked .hint { margin-top: .3rem; }

.hint.export-note { margin: .9rem 0 0; max-width: 62ch; }
/* What the form refused, under the field it refused: red, after .hint. */
.hint.field-error { color: var(--bad-ink); }

.export-star { color: var(--accent); font-weight: 700; }
dl.kv dt .export-star { margin-left: .15rem; }
.export-mark { margin: .9rem 0 0; max-width: 62ch; font-size: .78rem;
               line-height: 1.55; color: var(--sub); }
.export-mark .export-star { margin-right: .3rem; }

.fh-ask { display: inline-flex; align-items: center; justify-content: center;
          width: 1.05rem; height: 1.05rem; margin-left: .35rem; padding: 0;
          vertical-align: baseline; border: 1px solid var(--line-2);
          border-radius: 50%; background: var(--panel); color: var(--sub);
          font: 700 .68rem/1 inherit; cursor: pointer; }
.fh-ask:hover  { border-color: var(--accent); color: var(--accent); }
.fh-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fh-ask[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft);
                                color: var(--accent-deep); }
.fh-ask[hidden] { display: none; }
a.fh-ask { text-decoration: none; }
/* The roles popup on Team: a small table, readable at phone width too. */
dialog.sheet table.list.roles-help { display: table; width: 100%; margin-top: .8rem; border: 0; }
dialog.sheet table.list.roles-help tbody { display: table-row-group; }
dialog.sheet table.list.roles-help tr,
dialog.sheet table.list.roles-help tr:has(> th) { display: table-row; border: 0; margin: 0; padding: 0; background: none; }
dialog.sheet table.list.roles-help th,
dialog.sheet table.list.roles-help tr:first-child th,
dialog.sheet table.list.roles-help td { display: table-cell; width: auto; padding: .75rem .6rem; font-size: .95rem;
                                        text-align: left; border-bottom: 1px solid var(--line); }
dialog.sheet table.list.roles-help .num { text-align: center; }
dialog.sheet table.list.roles-help td::before { display: none; }
.roles-yes { color: var(--ok-ink); font-weight: 700; font-size: 1.15rem; }
.roles-no { color: var(--line-2); font-size: 1.15rem; }
dialog.sheet.sheet-wide { width: min(640px, calc(100% - 2.4rem)); }
@media (max-width: 560px) {
  dialog.sheet table.list.roles-help th, dialog.sheet table.list.roles-help td {
    padding: .55rem .25rem; font-size: .78rem; letter-spacing: 0; }
  dialog.sheet table.list.roles-help tr:first-child th { font-size: .62rem; white-space: normal; }
  dialog.sheet table.list.roles-help td:first-child { font-weight: 500; }
}

.fh-note { display: block; margin-top: .4rem; max-width: 60ch;
           font-weight: 400; }
.fh-note[hidden] { display: none; }

:is(label, h2, h3):has(> .fh), :is(label, h2, h3):has(> span > .fh) { position: relative; }
.fh:has(> .fh-ask:not([hidden])) > .fh-note {
  position: absolute; left: 0; top: calc(100% + .35rem); z-index: 40; margin: 0;
  width: max-content; max-width: min(24rem, 100%); padding: .6rem .8rem;
  border: 1px solid var(--info-line); border-radius: var(--r-control);
  background: var(--info-soft); color: var(--info-ink);
  box-shadow: 0 8px 24px -12px rgba(16, 18, 22, .35);
  font-size: .76rem; line-height: 1.5; letter-spacing: normal; text-transform: none; white-space: normal; }
/* A note opened by hovering is a glance, not a panel: the pointer passes
   through it. It hangs over the next row of the form, and while it could
   take the pointer, moving on to the field below meant hovering the note —
   which kept it open, over the very field being reached for. A note opened
   by pressing the (?) is not [hidden] and keeps the pointer as before. */
.fh:hover > .fh-note[hidden], .fh:focus-within > .fh-note[hidden] { display: block; pointer-events: none; }
/* A label set against the right edge of its column keeps its (?) there too, so
   the panel opens under the button that asked for it rather than a column
   away — and reads left to right, whatever the label above it does. */
form.stacked .cell-total label .fh:has(> .fh-ask:not([hidden])) > .fh-note,
form.stacked .ol-price > .ol-label .fh:has(> .fh-ask:not([hidden])) > .fh-note {
  left: auto; right: 0; text-align: left; }
form.stacked .grid-2 { gap: 0 1.2rem; }
form.stacked .grid-2 > div > label:first-child { margin-top: 1rem; }
.grid-2 .span-2 { grid-column: 1 / -1; }
/* A tall card on the left, and the next two stacked beside it. */
@media (min-width: 781px) { .grid-2 > .span-rows { grid-row: span 2; } }

/* The card's printed number, whether it is graded and the grade asked for are
   three answers to one question, so they share a line. Six columns underneath:
   an ordinary field takes three, one of these takes two, a spanning field
   takes the lot. Under 781px .grid-2 is already a single column and none of
   this applies — which is the point, three selects side by side on a phone is
   three unreadable selects.
   When one of the three is hidden — there is no minimum grade to give when
   nothing is graded — the other two take half each rather than leaving a
   hole. Not where the minimum condition is paired with the grade: there the
   two take turns in the same slot, one of them is always hidden and the row
   is always three wide, so widening on a hidden one would wrap it. */
@media (min-width: 781px) {
  .grid-2.spec-grid { grid-template-columns: repeat(6, 1fr); }
  .grid-2.spec-grid > * { grid-column: span 3; }
  .grid-2.spec-grid > .span-2 { grid-column: 1 / -1; }
  .grid-2.spec-grid > .third { grid-column: span 2; }
  .grid-2.spec-grid:not(.spec-grid-paired):has(> .third[hidden]) > .third { grid-column: span 3; }
  /* The game, the set and the language of a single card: one question, one
     row. Its own class, not .third — the rule above widens a .third when one
     of ITS trio is hidden, and none of these three ever is. */
  .grid-2.spec-grid > .trio { grid-column: span 2; }
}

/* ── Flash ─────────────────────────────────────────────────────────────── */
.flash { padding: .7rem 1.1rem; border-radius: var(--r-control); margin-bottom: 1rem; font-size: .84rem;
         font-weight: 600; background: var(--ok-soft); color: var(--ok-ink);
         border: 1px solid var(--ok-line); }
.flash-undoable { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.flash-undo-form { margin: 0; flex: none; }
.flash-undo { background: none; border: 0; padding: 0; font: inherit; color: inherit;
              text-decoration: underline; cursor: pointer; }
.flash-alert { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-line); }

.flash-info { background: var(--info-soft); color: var(--info-ink);
              border-color: var(--info-line); }

.flash-todo { background: var(--accent-soft); color: var(--accent-deep);
              border-color: var(--accent-line);
              display: flex; align-items: center; justify-content: space-between;
              gap: .7rem 1.2rem; flex-wrap: wrap; }

.export-standout .export-invite { display: block; margin-top: .3rem; font-weight: 400; }

.flash-close { position: absolute; top: .45rem; right: .5rem;
               background: none; border: 0; padding: .1rem .35rem;
               font: inherit; font-size: 1.15rem; line-height: 1; color: inherit;
               opacity: .55; cursor: pointer; border-radius: var(--r-xs); }
.flash-close:hover { opacity: 1; background: rgba(255, 255, 255, .55); }
.flash:has(.flash-close) { position: relative; padding-right: 2.4rem; }
.flash-todo > span { flex: 1 1 22rem; min-width: 0; }
.flash-todo-action { flex: 0 0 auto; margin: 0; }

/* ── KPI cards (stats) ─────────────────────────────────────────────────── */
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
             gap: .9rem; margin-bottom: 1.2rem; }
.stats-bar .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
                   padding: .8rem 1rem; }
.stats-bar .num { font-size: 1.5rem; font-weight: 800; line-height: 1.2;
                  font-variant-numeric: tabular-nums; }
.stats-bar .label { font-size: .64rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .08em; color: var(--sub); margin-top: .05rem; }
.stats-bar .sub-metric { font-size: .72rem; color: var(--faint); margin-top: .3rem; }
.stats-bar a.stat-filter { color: inherit; text-decoration: none; }
.stats-bar a.stat-filter:hover .label { color: var(--ink); }
.stats-bar a.stat-filter.on .num,
.stats-bar a.stat-filter.on .label { color: var(--accent); }

/* ── Content + right rail ──────────────────────────────────────────────── */
.rail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 1.2rem;
               align-items: start; }

@media (max-width: 1259px) { .rail-layout { grid-template-columns: 1fr; } }
.rail .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
               margin-bottom: 1rem; overflow: hidden; }
.rail .panel-head { display: flex; align-items: center; justify-content: space-between;
                    padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.rail .panel-head b { font-size: .8rem; }
.rail .panel-head span { font-size: .68rem; color: var(--sub); }
.rail .row { display: flex; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line);
             font-size: .74rem; align-items: flex-start; }
.rail .row:last-child { border-bottom: none; }
.rail .row .dot2 { width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem;
                   flex-shrink: 0; background: var(--accent); }
.rail .row .dot2.g { background: var(--ok-ink); } .rail .row .dot2.b { background: var(--info-ink); }
.rail .row b { font-size: .76rem; display: block; }
.rail .row .tm { color: var(--faint); font-size: .66rem; margin-left: auto; white-space: nowrap; }

body.auth { display: flex; flex-direction: column; align-items: center;
            justify-content: flex-start; min-height: 100vh; min-height: 100dvh;
            padding: 2rem 1rem; box-sizing: border-box; gap: 1.1rem; }
.auth-card { margin-top: auto; }
.auth-langs { display: flex; justify-content: center; margin-bottom: auto; }

.auth-top { width: min(384px, 100%); display: flex; }
body.auth:has(.auth-card-wide) .auth-top { width: min(580px, 100%); }
body.auth:has(.auth-split) .auth-top { width: min(914px, 100%); }
.auth-back { display: inline-flex; align-items: center; gap: .5rem;
             min-height: 44px; padding: .3rem .1rem;
             font-size: .84rem; font-weight: 600; color: var(--sub); }
.auth-back:hover { color: var(--accent); }

.auth-back-arrow { width: 15px; height: 12px; flex: 0 0 auto;
  background: no-repeat center / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425466' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5m6 6-6-6 6-6'/%3E%3C/svg%3E");
  transition: transform .15s ease; }
.auth-back:hover .auth-back-arrow { transform: translateX(-2px); }

.auth-card { width: min(384px, 100%); box-sizing: border-box;
             background: var(--panel); border: 1px solid var(--line);
             border-radius: var(--r-lg); padding: 2.2rem 2.2rem 2rem;

             box-shadow: var(--shadow); }
.auth-card-wide { width: min(520px, 100%); }
.auth-card .brandmark { margin-bottom: 1.4rem; }

.auth-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1rem; }
.auth-card-wide .auth-title { font-size: 1.35rem; margin-bottom: .5rem; }
.auth-card .btn { width: 100%; margin-top: 1.3rem; text-align: center; }

.auth-sub { color: var(--faint); font-size: .84rem; font-weight: 400; line-height: 1.5; margin: 0; }
.auth-card .aux { margin-top: 1rem; font-size: .78rem; color: var(--sub); text-align: center; }
.auth-card .aux a { color: var(--accent); font-weight: 600; }
.auth-card .card { border: none; padding: 0; margin: 0; background: transparent; box-shadow: none; }

/* ── Empty states ──────────────────────────────────────────────────────── */
.empty { text-align: center; color: var(--faint); padding: 3.2rem 1rem; font-size: .88rem;
         background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty .dot-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
                   background: var(--accent-line); margin-bottom: .6rem; }

.empty-note { color: var(--faint); font-size: .84rem; line-height: 1.55; margin: 0; }

.pager { display: flex; align-items: center; justify-content: space-between;
         gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: 1rem; }
.pager-status { margin: 0; font-size: .78rem; color: var(--sub);
                font-variant-numeric: tabular-nums; }
.pager-controls { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.pager-numbers { display: flex; align-items: center; gap: .3rem; }
.pager-btn { min-width: 2rem; height: 2rem; padding: 0 .55rem; cursor: pointer;
             background: var(--panel); color: var(--ink);
             border: 1px solid var(--line-2); border-radius: var(--r-xs);
             font: inherit; font-size: .78rem; font-weight: 700;
             font-variant-numeric: tabular-nums; }
.pager-btn:hover:not(:disabled) { border-color: var(--accent-line); }
.pager-btn:disabled { color: var(--faint); cursor: default; }
.pager-btn.on { background: var(--accent-soft); color: var(--accent-deep);
                border-color: var(--accent-line); }
.pager-step { font-weight: 600; color: var(--sub); }
.pager-gap { color: var(--faint); font-size: .78rem; padding: 0 .1rem; }

code.wrap { word-break: break-all; overflow-wrap: anywhere; }

input.copy { width: 100%; font: inherit; font-size: .76rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             color: var(--sub); background: var(--wash); border: 1px solid var(--line-2);
             border-radius: var(--r-sm); padding: .34rem .55rem; cursor: pointer; }
input.copy:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); color: var(--ink); }

.rail .row-link { text-decoration: none; color: inherit; }
.rail .row-link:hover { background: var(--wash); }
.rail .dot2.r { background: var(--accent); }

/* ── Language switcher (every page) ────────────────────────────────────── */
.lang-switch { display: inline-flex; flex-wrap: nowrap; white-space: nowrap;
               gap: 2px; padding: 2px; border-radius: 999px;
               background: var(--wash); border: 1px solid var(--line); }
.lang-switch-form { display: inline; margin: 0; }
.lang-switch a, .lang-switch button { font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
                      color: var(--sub); background: transparent; border: none; cursor: pointer;
                      padding: .22rem .6rem; border-radius: 999px; line-height: 1.5; }
.lang-switch a:hover, .lang-switch button:hover { color: var(--ink); }
.lang-switch a.on, .lang-switch button.on { background: var(--panel); color: var(--ink);
                                             box-shadow: 0 1px 2px rgba(16, 18, 22, .08); }
.lang-switch a { display: inline-block; text-decoration: none; }

.lang-switch-dark { width: 100%; justify-content: center; }

/* ── Filters, misc ─────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter-row a { font-size: .78rem; font-weight: 600; color: var(--sub); background: var(--panel);
                border: 1px solid var(--line); padding: .3rem .85rem; border-radius: 999px; }
.filter-row a.on, .filter-row a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.muted { color: var(--faint); }
h1.display { font-size: 2rem; font-weight: 800; }

.negotiation h3 { margin-bottom: .8rem; }

.thread { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.thread .msg { max-width: 80%; padding: .4rem .62rem .45rem; border-radius: var(--r); font-size: .8rem;
               line-height: 1.5; background: var(--panel); border: 1px solid var(--line);

               border-bottom-left-radius: var(--r-xs); }
.thread .msg.mine { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line);
                    border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r-xs); }

.thread .msg-who { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .15rem;
                   font-size: .62rem; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--sub); }
.thread .msg-who time { font-weight: 400; letter-spacing: 0; text-transform: none;
                        color: var(--faint); font-variant-numeric: tabular-nums; }

.thread .msg-counter { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
                       padding-bottom: .28rem; margin-bottom: .28rem;
                       border-bottom: 1px solid var(--line); }

.thread .msg.mine .msg-counter { border-bottom-color: var(--accent-line); }

.thread .msg .price { display: inline-flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: baseline; }

.thread .msg .price { font-weight: 800; font-variant-numeric: tabular-nums; }
.thread .msg .price .muted { font-weight: 600; font-size: .74rem; }
.thread .msg-body { white-space: pre-line; }

.intent-row { max-height: 26rem; overflow-y: auto; }

.btn.is-submitting { position: relative; padding-left: 2.1rem; cursor: progress; opacity: .85; }
.btn.is-submitting::before {
  content: ""; position: absolute; left: .85rem; top: 50%; width: .8rem; height: .8rem;
  margin-top: -.4rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-submitting::before { animation-duration: 2.4s; } }

/* Over the whole page while a form that takes a real wait is in flight — see
   submitting_controller. Navy rather than black, because it is the brand fill
   the closing band already uses, and above a dialog's own top layer so that a
   second submit from inside a sheet is covered too. */
.doing { position: fixed; inset: 0; z-index: 2147483000;
         background: rgba(10, 37, 64, .72); backdrop-filter: blur(2px);
         display: flex; align-items: center; justify-content: center; }
.doing-box { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.doing-spin { width: 34px; height: 34px; border-radius: 50%;
              border: 2px solid rgba(255, 255, 255, .28); border-top-color: #fff;
              animation: spin .8s linear infinite; }
.doing-say { margin: 0; color: #fff; font-weight: 600; font-size: .95rem;
             text-align: center; max-width: 22rem; padding: 0 1.1rem; }
/* The spinner is doing a real job, so it stays — it just stops racing. */
@media (prefers-reduced-motion: reduce) { .doing-spin { animation-duration: 2.4s; } }

/* The pay button, and the way out under it rather than beside it. */
.deal-actions { margin-top: 1.3rem; display: flex; flex-direction: column;
                align-items: stretch; gap: .55rem; }
.deal-actions form { margin: 0; }
.btn-wide { width: 100%; text-align: center; padding-top: .62rem; padding-bottom: .62rem;
            font-size: .95rem; }
.deal-actions .btn-quiet { width: 100%; }

.stripe-due { margin: .9rem 0 0; padding: .8rem 1rem; background: var(--wash);
              border: 1px solid var(--line); border-radius: var(--r); }
.stripe-due-why { margin: 0 0 .6rem; font-size: .82rem; color: var(--ink); font-weight: 600; }
.stripe-due-list { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.7; }
.stripe-due-key { margin-left: .4rem; font-size: .7rem; color: var(--faint);
                  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.list-switch { display: flex; gap: .3rem; margin: -.4rem 0 1.2rem; }
.list-switch-tab { display: inline-flex; align-items: center; gap: .4rem;
                   padding: .3rem .7rem; border-radius: 999px; font-size: .78rem;
                   color: var(--sub); text-decoration: none; border: 1px solid transparent; }
.list-switch-tab:hover { background: var(--wash); color: var(--ink); }
.list-switch-tab.on { background: var(--wash); border-color: var(--line); color: var(--ink);
                      font-weight: 700; }
.list-switch-tab .n { font-size: .7rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.hint-sides { color: var(--ink); }
.hint-sides:empty { display: none; }

.btn-estimate { background: none; border: 0; display: block;
                padding: .2rem 0; margin: 0 0 .2rem; font: inherit;
                font-size: .74rem; color: var(--accent); text-decoration: underline;
                text-underline-offset: 2px; cursor: pointer; }
.btn-estimate:hover { color: var(--accent-deep); }
.btn-estimate[hidden] { display: none; }

.talk-state { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: var(--r);
              font-size: .8rem; line-height: 1.5; color: var(--sub);
              background: var(--wash); border: 1px solid var(--line); }
.talk-state-accepted, .talk-state-waiting { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.talk-state a { color: inherit; }

/* Nothing to send until the other side moves, and the way out of that. */
.awaiting-note { margin: .9rem 0 .2rem; font-size: .8rem; color: var(--sub); }

.thread .msg-intent { font-weight: 600; }
.thread .msg-intent + .msg-body { margin-top: .3rem; }

.msg-machine { margin-top: .35rem; font-size: .72rem; color: var(--faint); }

.msg-machine > summary { cursor: pointer; list-style: none;
                         text-decoration: underline; text-underline-offset: 2px; }
.msg-machine > summary:hover { color: var(--sub); }
.msg-machine > summary::-webkit-details-marker { display: none; }
.msg-machine > summary::before { content: "↳ "; }

.msg-untranslated { margin: .35rem 0 0; }
.msg-original { margin: .3rem 0 0; padding-left: .6rem;
                border-left: 2px solid var(--line); white-space: pre-line;
                color: var(--sub); }

.intent-row { border: 0; padding: 0; margin: 0 0 .9rem; display: flex;
              flex-wrap: wrap; gap: .4rem; align-items: center; }
.intent-row > legend { float: left; width: 100%; padding: 0; margin-bottom: .4rem;
                       font-size: .68rem; font-weight: 700; letter-spacing: .06em;
                       text-transform: uppercase; color: var(--sub); }

.intent-row .intent-chip { display: flex; margin: 0; }
.intent-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.intent-chip > span { display: inline-block; padding: .32rem .62rem; font-size: .74rem;
                      line-height: 1.35;
                      border: 1px solid var(--line); border-radius: 999px;
                      background: var(--panel); cursor: pointer; }
.intent-chip input:checked + span { background: var(--accent-soft);
                                    border-color: var(--accent-line); font-weight: 600; }
.intent-chip input:focus-visible + span { outline: 2px solid var(--accent);
                                          outline-offset: 2px; }

.offer-photos { margin-top: .9rem; display: flex; gap: .5rem; align-items: flex-start; }

.offer-body { display: grid; grid-template-columns: minmax(0, 1fr);
              gap: 1.1rem; align-items: start; }
.offer-body:has(.offer-photos) { grid-template-columns: minmax(0, 1fr) 10rem; }
.offer-body > * { min-width: 0; }
.offer-body .offer-photos { margin-top: 0; flex-direction: column; }
.offer-body .offer-photo-lead { max-width: none; width: 100%; }
.offer-body .offer-photo-rest { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
                                width: 100%; }
@media (max-width: 620px) { .offer-body:has(.offer-photos) { grid-template-columns: 1fr; } }
.offer-photo-lead { flex: 1 1 auto; min-width: 0; max-width: 320px; display: block; }
.offer-photo-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                        border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.offer-photo-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
                    gap: .4rem; flex: 1 1 40%; align-content: flex-start; }
.offer-photo-rest img { width: 100%; aspect-ratio: 1; object-fit: cover;
                        border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); }
@media (max-width: 620px) { .offer-photos { flex-direction: column; }
                            .offer-photo-lead { max-width: none; } }

.choices-line { margin: -.4rem 0 1.1rem; max-width: 78ch; font-size: .78rem;
                line-height: 1.6; color: var(--sub); }

.choices-line-strong { color: var(--ink); font-weight: 600; }

.card.offer { border-color: var(--line-2);
              border-left: 3px solid var(--line-2); }
.card.offer.is-best { border-left-color: var(--ok-ink); }
.card.offer.is-shortlisted { border-left-color: var(--accent); }

.offer-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                 gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .offer-columns { grid-template-columns: 1fr; gap: 1.1rem; } }
.offer-main { min-width: 0; }
.offer-talk { min-width: 0; }
.offer-talk > turbo-frame { display: block; }

.offer-columns > .offer-talk { border-left: 1px solid var(--line-2); padding-left: 1.6rem; }
@media (max-width: 900px) {
  .offer-columns > .offer-talk { border-left: 0; padding-left: 0;
                                 border-top: 1px solid var(--line-2); padding-top: 1.1rem; }
}
/* In half the width, who and how much stop competing for one line. */
.offer-columns .offer-head { flex-direction: column; align-items: stretch; gap: .9rem; }
.offer-columns .offer-price { align-items: flex-start; text-align: left; }

.offer-talk .negotiation { background: color-mix(in srgb, var(--wash) 76%, var(--line-2));
                           border: 1px solid var(--line-2);
                           border-radius: var(--r-lg); padding: .8rem .85rem .9rem; }
.offer-talk .negotiation h3 { font-size: .66rem; font-weight: 700; letter-spacing: .06em;
                              text-transform: uppercase; color: var(--sub); margin-bottom: .55rem; }
.thread-count { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; margin-left: .2rem;
                border-radius: 999px; background: var(--panel); color: var(--ink);
                font-size: .66rem; line-height: 1.2rem; text-align: center;
                letter-spacing: 0; }

.thread-scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
                 padding-right: .3rem; }
.offer-talk .msg { max-width: 88%; }
.offer-talk .offer-counter { margin-top: .9rem; padding-top: .9rem; }
.offer-talk .grid-2 { grid-template-columns: 1fr; gap: .8rem; }

.offer-talk .write-more { display: block; }

.offer-talk .negotiation + .offer-counter { border-top: 0; margin-top: .8rem; padding-top: 0; }

.btn-quiet { background: none; border: 0; padding: .35rem .2rem; font: inherit;
             font-size: .78rem; color: var(--sub); text-decoration: underline;
             text-underline-offset: 2px; cursor: pointer; }
.btn-quiet:hover { color: var(--danger-ink, var(--ink)); }
/* Declining an offer is a real choice, so it reads as one: red, not a faint link. */
.btn-decline { background: var(--panel); color: var(--bad-ink); border-color: var(--bad-ink); }
.btn-decline:hover { background: var(--bad-ink); color: #fff; }
/* A row's bin: light grey until pointed at. */
.btn-bin { background: none; border: 0; padding: .3rem; line-height: 0; cursor: pointer;
           color: var(--faint); opacity: .6; border-radius: 6px; }
.btn-bin:hover, .btn-bin:focus-visible { color: var(--sub); opacity: 1; background: var(--tint); }
.offer-actions { align-items: center; }

.write-more { margin-top: .9rem; }
.write-more > summary { cursor: pointer; font-size: .78rem; color: var(--sub);
                        list-style: none; width: fit-content; }
.write-more > summary::-webkit-details-marker { display: none; }
.write-more > summary::before { content: "+ "; font-weight: 700; }
.write-more[open] > summary::before { content: "− "; }
.write-more > summary:hover { color: var(--ink); }
.write-more textarea, .write-more input[type="text"] { margin-top: .5rem; }

.offer-msg-label { margin: 1.1rem 0 .1rem; font-size: .68rem; font-weight: 700;
                   letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.offer-msg-label + .offer-msg { margin-top: 0; }

/* A heading that is a link should not look like one until you reach for it. */
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

/* ── Deal showcase cards ───────────────────────────────────────────────── */
.deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.deal-grid-4 { grid-template-columns: repeat(4, 1fr); }

.market-more { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; }

.deal-card-again-form { margin: 0; padding: .7rem .8rem .8rem; border-top: 1px solid var(--line); }
.deal-card-again { width: 100%; }
@media (max-width: 900px) { .deal-grid-4 { grid-template-columns: repeat(2, 1fr); } }
.deal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
             overflow: hidden; font-size: .82rem; }
.deal-card-img { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center;
                 justify-content: center; }
.deal-card-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.deal-card-img svg { width: 30px; height: 30px; opacity: .55; }
.deal-card-img .sold { position: absolute; top: .5rem; left: .5rem; background: var(--accent);
                       color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
                       padding: .18rem .5rem; border-radius: var(--r-xs); }
.deal-card-title { font-weight: 700; padding: .7rem .9rem .1rem; line-height: 1.35; }
.deal-card-price { padding: .25rem .9rem 0; font-weight: 800; font-size: .95rem; }
.deal-card-price .muted { font-weight: 500; font-size: .74rem; }
.deal-card-meta { padding: .15rem .9rem .8rem; color: var(--faint); font-size: .7rem; }

/* ── Two-column form pages ─────────────────────────────────────────────── */
.form-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(260px, 1fr);
  gap: 1.4rem; align-items: start; }
/* Where the aside keeps one width and the form takes all the rest. */
.form-layout-wide { grid-template-columns: minmax(0, 1fr) 320px; }
.form-layout-wide > .card-narrow { max-width: none; }
/* On a wide screen the aside can afford more of it; on a wider one, more again. */
@media (min-width: 1280px) { .form-layout-wide { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (min-width: 1600px) { .form-layout-wide { grid-template-columns: minmax(0, 1fr) 480px; } }
@media (max-width: 980px) { .form-layout { grid-template-columns: 1fr; } }
.form-aside { position: sticky; top: 1.2rem; }

/* The freight: who carries it, what it costs, what the goods come to — closed
   off with a rule, because what follows is about the offer, not the price. */
.ship-block { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.total-block { padding: .2rem 0 1.1rem; }
form.stacked .ship-block select { max-width: 16rem; padding-block: .34rem; }
/* The carrier stands where the condition above it does: set in from the
   form's edge by the width of a row's tick box and its gap, as .ol-cond is. */
.ship-block > div:first-child { padding-left: 1.4rem; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
                   gap: 1.4rem; align-items: start; }

.settings-layout > .card:first-child  { grid-column: 2; grid-row: 1; }
.settings-layout > .card:nth-child(2) { grid-column: 1; grid-row: 1; }

@media (min-width: 1181px) {
  .settings-layout { gap: 2.6rem; grid-template-columns: minmax(0, 1fr) 360px; }
  .settings-layout > .card-narrow { max-width: none; }
  .shell .settings-layout > .card:first-child { border-left: 1px solid var(--line);
                                                padding-left: 2.6rem; border-bottom: none; }
  .shell .settings-layout > .card:nth-child(2) { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 980px) { .settings-layout { grid-template-columns: 1fr; }

                            .settings-layout > .card:first-child,
                            .settings-layout > .card:nth-child(2) { grid-column: 1; grid-row: auto; } }

.how-it-works { --hiw-paper: var(--wash);
  background: var(--hiw-paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.3rem 1.45rem 1.4rem; }
.how-it-works .kicker { font-size: .64rem; letter-spacing: .14em; color: var(--faint);
  margin-bottom: 1rem; }
.how-it-works ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.how-it-works li { position: relative; counter-increment: step;
  padding: 0 0 1.3rem 2.55rem; }
.how-it-works li:last-child { padding-bottom: 0; }

.how-it-works li::after { content: ""; position: absolute; left: 10px; top: 0;
  bottom: 0; width: 2px; border-radius: 2px; background: var(--line); }
.how-it-works li:last-child::after { display: none; }

.how-it-works li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; z-index: 1;
  background: var(--brand-navy); border: 0; color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--hiw-paper); }

.how-it-works li b { display: block; font-size: .875rem; font-weight: 600;
  letter-spacing: -.006em; line-height: 1.3; margin-bottom: .3rem; color: var(--ink); }

.how-it-works li span { display: block; color: var(--sub); font-size: .775rem;
  line-height: 1.65; text-wrap: pretty; }
.change-link { color: var(--accent); font-size: .8rem; font-weight: 600; }

/* ── The same buyer's other open requests, folded under an offer form ──────
   A section of the form, not a card sitting inside one. A padded box here
   takes ~3rem off every row nested in it while they still use the wide
   template above 600px, and the item column gets squeezed off the edge. */
/* It carries the rule that closes the list instead of sitting under one: the
   last row above it gives its own up. */
.also-wanted { padding-top: 0; margin: 0; border-bottom: 1px solid var(--line); }
/* The list above it closes right onto the fold: it is the next thing to
   read, not a footnote sitting well below the rows. */
.offer-lines-form:has(+ .also-wanted) { margin-bottom: .5rem; }
.offer-lines-form:has(+ .also-wanted) .ol-row:last-child { border-bottom: 0; }
/* Every block in the fold closes on the next one's top rule, and the last on
   the fold's own: a row keeping its bottom rule here draws a second hairline
   a margin below the first. */
.also-wanted .ol-row:last-child { border-bottom: 0; }
.also-wanted details.is-locked > summary { cursor: default; }
.also-wanted summary { cursor: pointer; color: var(--accent-deep); font-size: .875rem;
  font-weight: 600; list-style: none; display: block; padding: .5rem .7rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-control); }
.also-wanted summary::-webkit-details-marker { display: none; }
.also-wanted summary::before { content: "+ "; font-weight: 700; }
.also-wanted details[open] summary::before { content: "\2013 "; }
.also-wanted details[open] summary { margin-bottom: .5rem; }
.also-wanted > details > .hint { margin: 0 0 .9rem; }
.also-wanted .offer-lines-form:last-child { margin-bottom: 0; }

/* ── Company avatars (logo or tinted initial) ──────────────────────────── */
.avatar { border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; display: inline-flex;
          align-items: center; justify-content: center; vertical-align: middle; }
.avatar-fallback { font-weight: 800; }
.sidebar .avatar { border-radius: var(--r-xs); }

/* ── Key-value definition lists ────────────────────────────────────────── */
dl.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; margin: 0; }
dl.kv dt { color: var(--sub); font-size: .8rem; padding: .42rem 1.2rem .42rem 0; }
dl.kv dd { margin: 0; padding: .42rem 0; font-size: .84rem; border-bottom: 1px solid var(--line); }
dl.kv dt { border-bottom: 1px solid var(--line); }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: none; }

dl.kv dd { text-align: right; }
dl.kv dd.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

dl.kv dd.num-left { text-align: left; }

/* Yen, then the buyer's money in a column of its own: a fixed width keeps
   both columns lined up from row to row. */
.fx-own { display: inline-block; min-width: 8.5rem; margin-left: 1.2rem; text-align: right;
          color: var(--sub); font-weight: 400; }

.seller-cancel .radio-row {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 400; margin: .1rem 0;
}
.seller-cancel .radio-row input { width: auto; margin: 0; }

dl.kv.kv-facts dd,
dl.kv.kv-facts dd.num { text-align: left; }

dl.kv dd .kv-note { display: block; font-size: .72rem; color: var(--faint); font-weight: 400; }
dl.refund-breakdown dd.muted { font-weight: 400; }
.refund-preview:not(:empty) { margin: .8rem 0 .2rem; }
dl.kv dd > p:first-child { margin-top: 0; }
dl.kv dd > p:last-child { margin-bottom: 0; }
dl.kv .kv-total { font-weight: 800; font-size: .92rem; }

/* ── Photo grids on offers ─────────────────────────────────────────────── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
              gap: .6rem; margin: .7rem 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-control);
                  border: 1px solid var(--line); }
.photo-grid-sm { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }

.photo-picked { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
                gap: .4rem; width: 100%; margin: .2rem 0 .1rem; }

.photo-picked[hidden] { display: none; }
.photo-picked img { width: 100%; aspect-ratio: 1; object-fit: cover;
                    border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); }
.photo-pick { position: relative; display: block; }
.photo-remove { position: absolute; top: -.35rem; right: -.35rem; width: 1.4rem; height: 1.4rem;
                padding: 0; border: 0; border-radius: 50%; cursor: pointer;
                background: var(--ink); color: #fff; font-size: .9rem; line-height: 1.4rem; }
.photo-summary { width: 100%; font-size: .74rem; color: var(--sub); font-variant-numeric: tabular-nums; }

/* ── Misc components restored ──────────────────────────────────────────── */
.pill-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }

.track { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
         padding: 1.3rem 1.5rem 1.25rem; margin-bottom: 1.1rem; }
.track ol { list-style: none; margin: 0; padding: 0;
            display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .9rem; }
.track li { position: relative; padding-top: 1.45rem; min-width: 0; }
.track li::before { content: ""; position: absolute; left: 0; right: 0; top: 9px;
                    height: 2px; border-radius: 2px; background: var(--line); }
.track li:last-child::before { content: none; }

.track li.done::before { background: var(--accent); }
.track-pip { position: absolute; left: 0; top: 3px; z-index: 1; display: block;
             width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
             background: var(--panel); border: 2px solid var(--line-2); }
.track li.done .track-pip { background: var(--accent); border-color: var(--accent); }
.track li.current .track-pip { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.track-label { display: block; font-size: .8rem; font-weight: 600; line-height: 1.3;
               color: var(--sub); }
.track li.current .track-label { color: var(--ink); }
.track li.upcoming .track-label { color: var(--faint); }

.track-say { display: block; margin-top: .3rem; font-size: .72rem; line-height: 1.5;
             color: var(--faint); text-wrap: pretty; }
.track-halt { margin: .95rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
              color: var(--accent-deep); font-size: .8rem; font-weight: 700; }
.track-halted .track-pip { background: var(--panel); border-color: var(--line); }
.track-halted li::before { background: var(--line); }
.track-halted .track-label { color: var(--faint); }

.offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; }
.offer-who { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.offer-who strong { display: block; font-size: .92rem; line-height: 1.35; }
.offer-rating { color: var(--sub); font-size: .76rem; }
.offer-rating .star { color: var(--accent); }
.offer-who .pill-row { margin: .4rem 0 0; }
.offer-price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
               text-align: right; font-variant-numeric: tabular-nums; }
.offer-price-label { font-size: .62rem; font-weight: 700; letter-spacing: .09em;
                     text-transform: uppercase; color: var(--faint); }
.offer-total { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }

.offer-total-jpy { font-size: .8rem; font-weight: 600; color: var(--sub);
                   font-variant-numeric: tabular-nums; margin-top: -.1rem; }
.offer-split { font-size: .76rem; color: var(--sub); }

.offer-unit, .offer-carrier { font-size: .72rem; color: var(--faint); }
.offer-msg { margin: .85rem 0 0; font-size: .86rem; }

.offer-quote { margin: .95rem 0 0; padding: .05rem 0 .05rem .75rem;
               border-left: 2px solid var(--line); }
.offer-quote .offer-msg { margin: 0; white-space: pre-line; }

.offer-quote .msg-original { border-left: 0; padding-left: 0; }
.offer-actions { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.offer-actions form { margin: 0; }
.offer-charge { margin: 1.1rem 0 0; max-width: 78ch; font-size: .78rem; color: var(--sub); }
.offer-charge + .offer-actions { margin-top: .6rem; }

.badge-best { background: var(--ok-soft); color: var(--ok-ink); }

/* An offer for part of a list. Information, not a fault: blue. */
.badge-partial { background: var(--info-soft); color: var(--info-ink); }

/* One offer answering several of the buyer's requests. It reaches beyond the
   page it is read on, so it says so where the other badges are. */
.badge-across { background: var(--info-soft); color: var(--info-ink); }
.offer-across { margin: .35rem 0 0; font-size: .78rem; color: var(--sub); line-height: 1.5; }
.offer-across a { color: inherit; }
.offer-across-warn { color: var(--ink); font-weight: 500; }

.more-mark { font-weight: 500; font-size: .85em; color: var(--faint);
             white-space: nowrap; letter-spacing: 0; }
h1 .more-mark { font-size: .5em; vertical-align: .18em; }
/* On the feed the count is part of what the row is offering, so it is read at
   the size of the title it follows. */
.feed-list .more-mark { font-size: 1em; }

.offer-lines { list-style: none; margin: .9rem 0 0; padding: 0; font-size: .78rem;
               border-top: 1px solid var(--line); }
.offer-lines li { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 1rem; padding: .38rem 0; border-bottom: 1px solid var(--line); }
.offer-lines .ol-name { min-width: 0; color: var(--ink); }
.offer-lines .num { white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums;
                    color: var(--ink); font-weight: 600; }
.offer-lines li.is-missing, .offer-lines li.is-missing .ol-name { color: var(--faint); }
.offer-lines li.is-missing > span:last-child { white-space: nowrap; font-size: .72rem; }
.ol-count { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The condition the seller states for the line: "Near mint", "PSA 10". */
.ol-cond-said { display: block; font-size: .74rem; color: var(--faint); }
.offer-missing { margin: .6rem 0 0; font-size: .76rem; color: var(--faint); }

/* The items table of a request. One name line, one faint facts line. */
.request-items { margin: .4rem 0 1.8rem; }
.request-items .ri-item { display: flex; align-items: center; gap: .75rem; }
/* The frame follows the picture: fixed height, the width its own ratio gives. */
.request-items .ri-pic { flex: none; height: 4.5rem; border: 1px solid var(--line); border-radius: 6px;
                         background: #fff; overflow: hidden; }
.request-items .ri-pic img { display: block; height: 100%; width: auto; max-width: 8rem; object-fit: contain; }
.request-items .ri-name { font-weight: 600; font-size: .84rem; color: var(--ink); }
.request-items .cell-sub { margin-top: .12rem; }
.request-items .ri-note { white-space: normal; }
.request-items .ri-unit { color: var(--faint); font-size: .72rem; font-weight: 400; }
.request-items + .hint.standalone { margin-top: .8rem; }
/* The seller's "shipped together" note, close under its table. */
.request-items + .hint.list-note { margin-top: -1.2rem; }
.list-add { margin: -.8rem 0 2rem; }
.hint.standalone a { color: var(--accent); text-decoration: underline; }
.page-head .sub a { color: var(--accent); }

.rest-choice { margin: 1rem 0 0; padding: .75rem .9rem; border-radius: var(--r-control);
               background: var(--tint); font-size: .78rem; }
.rest-choice .rest-check, form .rest-choice .rest-check {
  display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600;
  font-size: .8rem; color: var(--ink); cursor: pointer; }
.rest-check input { margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.rest-when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
             margin: .55rem 0 0 1.45rem; }
.rest-label { color: var(--sub); }
.rest-when .dw-choice { margin: 0; }
.rest-when .dw-chip { padding: .22rem .65rem; font-size: .72rem; }
.rest-off { margin: .45rem 0 0 1.45rem; color: var(--faint); font-size: .72rem; }
.rest-choice:has(input[name="republish"]:not(:checked)) .rest-when { opacity: .4; pointer-events: none; }
/* In the accept popup: what accepting means, then the button. */
dialog.sheet .rest-choice { margin: .9rem 0 0; }
.sheet-lead { margin: .6rem 0 0; color: var(--sub); }
.sheet-note { margin: .9rem 0 0; font-size: .78rem; color: var(--sub); }
.sheet-actions { margin: 1rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* An order's items, indented under the goods line and spanning the list. */
dl.kv dd.kv-lines { grid-column: 1 / -1; padding: 0 0 .2rem .9rem; text-align: left; }
dl.kv dd.kv-lines .offer-lines { margin: 0; border-top: 0; }
dl.kv dd.kv-lines .offer-lines li { padding: .28rem 0; }
dl.kv dd.kv-lines .offer-lines li:last-child { border-bottom: 0; }
dl.kv dd.kv-lines .ol-name, dl.kv dd.kv-lines .num { color: var(--sub); font-weight: 400; }

/* The seller's rows for a list: a table of inputs, column names said once. */
.offer-lines-form { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.offer-lines-form legend { padding: 0; font-weight: 600; font-size: .8rem; }
.offer-lines-form > .hint { margin: .2rem 0 .7rem; }
.ol-grid { border-top: 1px solid var(--line); }
/* One shape for an item wherever it is read — the request being answered, the
   rest of its list, or one of the buyer's other requests: what it is, what it
   has to be in, then the boxes that answer it, each saying what it asks. */
/* The same column gap as .grid-2 below, so a row's price box and the freight
   box under it stand in one column. */
/* The price box needs about a dozen characters; everything else a row has to
   say — the card's name, what condition was asked for, what it is worth —
   lives in the first column, so it takes what is left rather than half. At
   1fr 1fr the title of a Japanese card wrapped mid-word with a third of the
   price column standing empty beside it. */
.ol-row { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: .5rem 1.2rem; align-items: start;
          padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ol-row > .ol-item { grid-column: 1; }
form.stacked .ol-item { display: flex; align-items: flex-start; gap: .55rem; margin: 0;
                        font-weight: 400; font-size: .8rem; cursor: pointer; }
/* Level with the middle of the picture beside it, not with the middle of the
   whole line, which the text under the title makes taller. */
.ol-item input { margin: calc((3.2rem - 13px) / 2) 0 0; accent-color: var(--accent);
                 flex: 0 0 auto; align-self: flex-start; }
.ol-title { display: block; font-weight: 600; color: var(--ink); text-wrap: balance; }
/* What the buyer asked and what they will pay, read against what is being
   answered: green while the answer clears them, red the moment it does not. */
.ol-row .cell-sub.ol-check { color: var(--ok-ink); }
.ol-row .cell-sub.ol-check.is-short { color: var(--bad-ink); }
/* Takes the figure beside it into the price box: a link in a row of text, not
   a button competing with the one that sends the offer — but loud, because the
   figure it puts there is what the buyer will pay and the box rarely holds it.
   Red and bold whenever it is offered at all. */
.ol-use { background: none; border: 0; padding: 0; margin-left: .45rem; font: inherit;
          font-size: .72rem; font-weight: 700; color: var(--bad-ink);
          text-decoration: underline; cursor: pointer; }
.ol-use:hover { color: var(--bad-ink); text-decoration-thickness: 2px; }
/* The buyer's ceiling, under the total it applies to. A line of its own with
   a rule down its left edge, so it reads as a verdict on the figure above
   rather than another hint: green while the offer fits, red when it does not,
   and the amounts inside it carry the weight. */
.budget-cap { margin: .5rem 0 0; padding: .4rem 0 .4rem .6rem; font-size: .74rem;
              line-height: 1.45; color: var(--faint);
              border-left: 2px solid var(--ok-line); }
.budget-cap:empty { display: none; }
.budget-cap b { font-weight: 600; color: var(--ok-ink); white-space: nowrap; }
.budget-cap.is-short { border-left-color: var(--bad-ink); }
.budget-cap.is-short b { color: var(--bad-ink); }
/* The card itself, beside the box that takes it. */
.ol-pic { flex: none; height: 3.2rem; width: 2.3rem; border: 1px solid var(--line);
          border-radius: 6px; background: #fff; overflow: hidden; }
.ol-pic img { display: block; height: 100%; width: 100%; object-fit: contain; }
/* A real photograph opens large: the badge says so before the cursor does. */
.ol-pic.is-zoom { position: relative; cursor: zoom-in; transition: border-color .15s, box-shadow .15s; }
.ol-pic.is-zoom:hover, .ol-pic.is-zoom:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ol-pic.is-zoom::after { content: ""; position: absolute; right: .15rem; bottom: .15rem; width: 1rem; height: 1rem;
                         border-radius: 50%; background: var(--ink) center / .6rem no-repeat;
                         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5M10 7v6M7 10h6'/%3E%3C/svg%3E"); }
form.stacked .ol-label { display: block; font-weight: 600; font-size: .8rem;
                         margin: var(--label-gap) 0 .3rem; }
/* The figure being asked for sits on the right of the row, whatever else the
   row holds on its left. */
.ol-qty, .ol-price { min-width: 0; }
/* Explicit rows, not auto-placement: the price is emitted before the quantity
   so that a row without one still reads item-then-price, and named rows keep
   the quantity under the item rather than opening a third row with a hole in
   it beside the price. */
.ol-qty { grid-column: 1; grid-row: 2; }
.ol-price { grid-column: 2; grid-row: 1 / span 2; }
/* The price starts level with the item it answers, so the two read as one line.
   It is set against the right edge of the column, with its name over it — the
   freight and the total, which add these figures up, stand in the same place
   at the foot of the form.
   A MEASURE, not a proportion: these boxes sit in two different columns — a
   row's price column is 14rem, the freight's half of a .grid-2 is wider — so
   one percentage gave two widths and the four boxes never shared a left edge.
   Wide enough for five yen digits and the spinner beside them; at 33% a
   four-figure sum was clipped. */
form.stacked .ol-price > .ol-label { margin-top: 0; }
form.stacked .ol-price > .ol-label,
form.stacked .cell-total label { text-align: right; }
form.stacked .ol-price > input,
form.stacked .cell-total input { width: 6rem; display: block; margin-left: auto; }

.ol-fixed { font-size: .82rem; color: var(--sub); font-variant-numeric: tabular-nums; }
/* Unticked: still posted, not part of the offer. */
.ol-row.is-off .ol-qty, .ol-row.is-off .ol-price, .ol-row.is-off .ol-cond { opacity: .35; }

/* Under the item, not under the form: set in from the row's edge by the width
   of the tick box and its gap, so it starts where the picture above it does.
   Same measure as the carrier row, for the same reason. */
.ol-cond { grid-column: 1 / -1; padding: 0 0 0 1.4rem; }
.cond-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
form.stacked .cond-pick label { flex: 0 0 100%; }
/* The condition is named over its boxes, as every other field on the form is,
   and stands close to them. */
.ol-cond .cond-pick { gap: .2rem .5rem; }
form.stacked .ol-cond .cond-pick label { flex: 0 0 100%; font-weight: 600; font-size: .8rem;
                         color: var(--ink); margin: 0; }
form.stacked .cond-pick select { width: auto; flex: 1 1 9rem; max-width: 14rem; }
/* Three short answers on one line: the condition, and a graded card's grader
   and grade beside it. Each is a word or a figure, so each box is small. */
form.stacked .ol-cond .cond-pick select { flex: 0 0 10rem; max-width: 10rem;
                                          padding-block: .34rem; }
form.stacked .ol-cond .cond-grade select { flex: 0 0 7rem; max-width: 7rem; }
/* The grader and the grade, only while "Graded" is chosen — no script: the
   select says which option is checked and the row reads it. */
.cond-grade { display: none; }
.cond-pick:has(option[value="graded"]:checked) .cond-grade { display: contents; }
.ol-row.is-off .ol-title { color: var(--faint); }
.ol-row.is-sole input[type=checkbox] { opacity: .55; cursor: default; }

@media (max-width: 780px) {
  /* One column, at the width .grid-2 gives up its own: below it the freight
     box is full width, and a price box still in a half column would be half
     as wide as the figure it has to line up with. */
  .ol-row { grid-template-columns: 1fr; }
  .ol-qty, .ol-price { grid-column: 1; grid-row: auto; }
  .ol-cond { padding-left: 1.4rem; }
  form.stacked .ol-price > input,
  form.stacked .cell-total input { width: 60%; }
  form.stacked .ol-price > .ol-label { margin-top: var(--label-gap); }
}

@media (max-width: 600px) {
  .ol-qty:has(.ol-fixed) { display: none; }
  /* A phone has no room for three boxes at their desk width, and a grade
     belongs beside its grader: the pair wraps together, not one at a time.
     A select is sized by its widest option, which in French and Japanese is
     wider than any cap: it is allowed to take the line and let the grade pair
     wrap under it. */
  form.stacked .ol-cond .cond-pick select { flex: 0 1 7.5rem; max-width: 100%; min-width: 0; }
  form.stacked .ol-cond .cond-grade select { flex: 0 1 5rem; max-width: 5rem; }
  .ol-cond .cond-pick:has(option[value="graded"]:checked) .cond-grade {
    display: flex; gap: .5rem; flex: 0 1 auto; }
}

.offer-counter { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

form.stacked.offer-counter { --field-pad: .34rem .5rem; --field-fs: .8rem;
                             --field-min-h: 3.8rem; --label-gap: .6rem; }

.offer-counter input[type="number"] { max-width: 12rem; }

.polish-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem;
              margin: .55rem 0 .2rem; }
.btn-polish { flex: 0 0 auto; padding: .4rem .8rem; font: inherit; font-size: .78rem;
              font-weight: 600; color: var(--ink); background: #fff; cursor: pointer;
              border: 1px solid var(--line); border-radius: 999px;

              transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn-polish::before { content: "✦"; margin-right: .4rem; color: var(--accent); }
.btn-polish:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
.btn-polish:disabled { opacity: .6; cursor: progress; }

.polish-waiting .btn-polish:disabled { cursor: default; }
.polish-note { flex: 1 1 15rem; min-width: 0; font-size: .72rem; line-height: 1.45;
               color: var(--sub); }
.polish-status { flex: 1 1 100%; font-size: .74rem; color: var(--accent); }
.polish-status[hidden] { display: none; }

@keyframes polish-flash {
  from { background: rgba(99, 91, 255, .12); border-color: var(--accent-line); }
  to   { background: #fff; }
}
.is-polished { animation: polish-flash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .is-polished { animation: none; } }

.lookup-off .card-lookup-hint { display: none; }
.card-name-row { display: flex; gap: .5rem; }
.card-name-row > input { min-width: 0; }
.card-name-row > input:first-child { flex: 1 1 auto; }
.card-name-row .card-ref { flex: 0 0 9.5rem; }
.lookup-off .card-ref { display: none; }
/* The box of a display, under its set, when we hold a photo of it. */
.set-preview { margin-top: .5rem; }
.set-preview img { display: block; max-width: 10rem; max-height: 10rem; object-fit: contain;
                   border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* The set list, searchable — set_picker_controller. The real <select> stays in
   the form, out of sight; a button that reads like a field opens a list with a
   search box and each set's logo. */
form.stacked select.set-picker-native {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0;
  pointer-events: none; clip-path: inset(50%); }
.set-picker { position: relative; }
.set-picker-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.55rem;
  font: inherit; font-size: var(--field-fs); color: var(--ink); text-align: left;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-control);
  padding: var(--field-pad); cursor: pointer; }
.set-picker-btn:hover { border-color: var(--faint); }
.set-picker-btn:focus-visible, .set-picker-btn[aria-expanded="true"] {
  outline: 2px solid var(--accent-line); border-color: var(--accent); }
.set-picker-btn:disabled { background: var(--locked); color: var(--sub); cursor: default; }
.set-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-picker-caret { flex: none; width: 1rem; height: 1rem; color: var(--sub); transition: transform .15s ease-out; }
.set-picker-btn[aria-expanded="true"] .set-picker-caret { transform: rotate(180deg); }

.set-picker-panel {
  position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0;
  width: max(100%, 24rem); max-width: calc(100vw - 2rem);
  padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3); }
.set-picker-panel[hidden] { display: none; }
form.stacked .set-picker-search { margin-bottom: .4rem; }
.set-picker-list { list-style: none; margin: 0; padding: 0; max-height: 19rem; overflow-y: auto;
  overscroll-behavior: contain; }
.set-picker-list li {
  display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem; border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink); cursor: pointer; line-height: 1.3; }
.set-picker-list li .set-picker-logo { width: 4rem; height: 1.7rem; }
.set-picker-list li.is-active { background: var(--accent-soft); }
.set-picker-list li[aria-selected="true"] { font-weight: 600; }
.set-picker-list li[aria-selected="true"]::after {
  content: ""; flex: none; margin-left: auto; width: .95rem; height: .95rem;
  background: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.set-picker-text { min-width: 0; }
.set-picker-empty { margin: .6rem .55rem .4rem; font-size: .85rem; color: var(--sub); }
.set-picker-empty[hidden] { display: none; }

form.stacked input.is-filled-for-you {
  background: var(--locked); color: var(--sub); cursor: default; }
form.stacked input.is-filled-for-you:focus { outline-color: var(--line-2); border-color: var(--line-2); }

.card-status { margin: .5rem 0 0; font-size: .76rem; color: var(--sub); line-height: 1.45; }
.card-status[hidden] { display: none; }

.card-count { margin: .5rem 0 0; font-size: .7rem; font-weight: 700; color: var(--faint);
              text-transform: uppercase; letter-spacing: .05em; }
.card-count[hidden] { display: none; }

.card-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: .5rem; margin-top: .5rem; max-height: 340px; overflow-y: auto;
                overscroll-behavior: contain; padding-right: .2rem; }
.card-results:empty { display: none; }
.card-hit { display: flex; flex-direction: column; gap: .2rem; padding: .4rem;
            background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
            cursor: pointer; text-align: left; font: inherit; color: var(--ink);
            transition: border-color .14s ease, transform .14s ease; }
.card-hit:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.card-hit img, .card-hit-blank { width: 100%; aspect-ratio: 63 / 88; border-radius: var(--r-xs);
                                 object-fit: cover; background: var(--wash); display: block; }
/* A catalogue row with no scan behind it: the tile keeps the card's shape
   and draws one, so a hit without a picture still reads as a card. */
.card-hit-blank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898aa' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.8' width='14' height='18.4' rx='2'/%3E%3Cpath d='M8 17.2l2.9-3.4 2.1 2.4 2-2.2 2 3.2z'/%3E%3Ccircle cx='14.4' cy='8.2' r='1.3'/%3E%3C/svg%3E");
                  background-repeat: no-repeat; background-position: center;
                  background-size: 54%; }
.card-hit-name { font-size: .72rem; font-weight: 700; line-height: 1.25;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-hit-meta { font-size: .62rem; color: var(--faint); text-transform: uppercase;
                 letter-spacing: .04em; }

.card-more { display: block; width: 100%; margin-top: .5rem; padding: .55rem;
             background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
             font: inherit; font-size: .78rem; font-weight: 700; color: var(--accent);
             cursor: pointer; transition: border-color .14s ease; }
.card-more:hover { border-color: var(--accent-line); }
.card-more[hidden] { display: none; }
.card-more-done, .card-more-done:hover { color: var(--faint); font-weight: 600;
                                         cursor: default; border-color: var(--line); }

/* Six, three to a row, fit without scrolling; the cap only matters once you
   ask for more. */
.card-results { max-height: 660px; }

.card-browse { display: flex; gap: .7rem; align-items: flex-start; margin-top: .5rem;
               container-type: inline-size; }
/* Six to a row once there is room for six at a readable size — a wide screen
   — and three to a row below that. */
@container (min-width: 640px) {
  .card-results { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.card-browse[hidden] { display: none; }
.card-browse .card-results { flex: 1 1 auto; min-width: 0; margin-top: 0; }

.card-preview { display: flex; gap: .9rem; margin: .7rem 0 1.1rem; padding: .8rem;
                background: var(--wash); border: 1px solid var(--line); border-radius: var(--r); }
.card-preview[hidden] { display: none; }
.card-preview img { width: 84px; border-radius: var(--r-sm); align-self: flex-start;
                    box-shadow: 0 6px 16px -8px rgba(20, 22, 26, .5); }
.card-preview-body { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.card-preview-body > b { font-size: .92rem; }
.card-preview-body > span { font-size: .76rem; color: var(--sub); }
.card-preview-body .btn { margin-top: .3rem; }

/* A field the schema does not apply to this request type is gone, not greyed. */
[data-spec-fields-target="field"][hidden] { display: none; }

.dw-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dw-choice { display: inline-flex; position: relative; }
.dw-choice input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.dw-chip { font: inherit; font-size: .74rem; padding: .3rem .8rem; border-radius: 999px;
           border: 1px solid var(--line-2); background: var(--panel); color: var(--sub);
           cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.dw-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.dw-choice input:checked + .dw-chip { border-color: var(--accent); color: var(--accent-deep);
                                      font-weight: 700; }
.dw-choice input:focus-visible + .dw-chip { outline: 2px solid var(--accent);
                                            outline-offset: 2px; }

.picker-lead { color: var(--sub); font-size: .95rem; max-width: 56ch; margin: -.4rem 0 1.4rem; }

.cat-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 1.1rem; align-items: stretch; }
@media (max-width: 1000px) { .cat-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cat-picker { grid-template-columns: minmax(0, 1fr); } }

.cat-card { display: flex; flex-direction: column; overflow: hidden;
            background: var(--panel); border: 1px solid var(--line);
            border-radius: var(--r); text-decoration: none; color: var(--ink);
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--accent-line);
                  box-shadow: 0 14px 30px -14px rgba(20, 22, 26, .28); color: var(--ink); }
.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cat-art { display: block; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.cat-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* The foil sweep the collector layer uses elsewhere, on hover only. */
.cat-art::after { content: ""; position: absolute; inset: 0; opacity: 0;
                  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
                  transition: opacity .2s ease, transform .5s ease; transform: translateX(-30%); }
.cat-card:hover .cat-art::after { opacity: 1; transform: translateX(30%); }

.cat-body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.cat-body > b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.cat-blurb { color: var(--sub); font-size: .8rem; line-height: 1.5; }
.cat-go { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
          font-size: .78rem; font-weight: 700; color: var(--accent); }
.cat-go::after { content: " →"; transition: margin-left .16s ease; }
.cat-card:hover .cat-go::after { margin-left: .2rem; }

.market-head { margin: 2.2rem 0 .3rem; font-size: 1.05rem; padding-top: 1.4rem;
               border-top: 1px solid var(--line); }
.market-head:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.market-sub { max-width: 46rem; font-size: .82rem; margin: 0 0 1.1rem; }

.figure { background: var(--wash); padding: 1rem 1.2rem; }

.request-columns-alone { display: block; }
.request-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
                   gap: 1.6rem; align-items: start; margin-bottom: 1.4rem; }
.request-columns > * { min-width: 0; }
@media (max-width: 900px) { .request-columns { grid-template-columns: 1fr; gap: 1.1rem; } }
.request-facts .kv { margin: 0; }
.request-item .card-preview { margin-top: 0; }
.request-item .request-note { margin-top: 1.1rem; }
/* A wide screen: the item column widens and the card, box and photos fill it. */
@media (min-width: 1260px) {
  .request-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2.2rem; }
  .request-item .card-preview { flex-direction: column; align-items: stretch; gap: .7rem; padding: 1rem; }
  .request-item .card-preview img { width: 100%; max-width: 20rem; align-self: center; }
  .request-item .card-preview-body > b { font-size: 1.05rem; }
  .request-item .card-preview-body > span { font-size: .84rem; }
  .request-item .set-preview img { max-width: 100%; max-height: 22rem; }
  .request-item .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.request-head { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
                gap: 1.5rem; align-items: start; margin-bottom: 1.4rem; }
.request-head > * { min-width: 0; }

.request-head:has(.request-art) {
  grid-template-columns: minmax(0, 15rem) minmax(0, 20rem) minmax(0, 1fr); }

.request-head.is-list:has(.request-art) {
  grid-template-columns: minmax(0, 11.25rem) minmax(0, 20rem) minmax(0, 1fr); }
@media (max-width: 900px) {
  .request-head, .request-head:has(.request-art),
  .request-head.is-list:has(.request-art) { grid-template-columns: 1fr; gap: 1.1rem; }
  .request-head.is-list .request-art { max-width: 11.25rem; }
}
.request-head .kv { margin: 0; }
/* The terms, in the panel the seller's copy of this screen has always used. */
.request-kv { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r);
              padding: .9rem 1.1rem; }

dl.kv.request-kv { grid-template-columns: 1fr; }
dl.kv.request-kv dt { padding: .55rem 0 .1rem; border-bottom: 0; }
dl.kv.request-kv dd { padding: 0 0 .55rem; }
dl.kv.request-kv dt:first-of-type { padding-top: 0; }

.request-art .card-preview { flex-direction: column; align-items: stretch;
                             margin: 0; gap: .6rem; }
.request-art .card-preview img { width: 100%; }

.request-art-category { background: var(--wash); border: 1px solid var(--line);
                        border-radius: var(--r); padding: .8rem; }
.request-art-category img { display: block; width: 100%; }

.spec-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
/* In the head the chips are a column, and the grid owns the spacing. */
.request-tags .spec-row { margin: 0; }
.spec { display: inline-flex; align-items: baseline; gap: .45rem; background: var(--wash);
        border: 1px solid var(--line); border-radius: var(--r-control);
        padding: .32rem .7rem; font-size: .84rem; }
.spec b { color: var(--sub); font-weight: 700; font-size: .68rem;
          letter-spacing: .1em; text-transform: uppercase; }

.request-note { margin: 1.2rem 0 1.5rem; max-width: 640px; }

.request-head .request-note { grid-column: 1 / -1; margin: 0; }
.request-note h3 { margin-bottom: .4rem; }
.request-note p { font-size: .86rem; line-height: 1.65; color: var(--sub); margin: 0 0 .6rem; }
.request-note p:last-child { margin-bottom: 0; }

.showcase-strip { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
                  padding: 1.1rem 1.3rem 1.3rem; margin-bottom: 1.2rem; }
.showcase-strip h3 { margin-bottom: .9rem; }

.upload-zone { border: 1px dashed var(--line-2); border-radius: var(--r-control); padding: .8rem 1rem;
               background: var(--wash); font-size: .8rem; color: var(--sub); }

.upload-prompt { display: inline-flex; align-items: center; gap: .45rem; }
/* An author display rule beats the UA's [hidden], so the attribute the
   controllers set would otherwise do nothing at all. */
.upload-prompt[hidden] { display: none; }
.upload-prompt svg { flex: 0 0 auto; }

form.stacked input[readonly] {
  -webkit-appearance: none; appearance: none;
  background: var(--locked); color: var(--sub);
  border-color: var(--line-2); cursor: default; opacity: 1; }
form.stacked input[readonly]:focus { border-color: var(--line-2); box-shadow: none;
  outline-color: var(--line-2); }
/* The spinner is a control, and there is nothing left to step. */
form.stacked input[readonly]::-webkit-outer-spin-button,
form.stacked input[readonly]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

form.stacked input[readonly].is-invalid,
form.stacked .field_with_errors input[readonly] {
  background: var(--locked); border-color: var(--accent); }

.curtain { display: none; }
.is-loading .curtain {
  display: flex; position: fixed; inset: 0; z-index: 999;
  align-items: center; justify-content: center; background: var(--bg);
}

.is-loading main.container { visibility: hidden; }
.is-loaded .curtain { opacity: 0; pointer-events: none; transition: opacity .45s ease; }

.curtain-mark { display: flex; flex-direction: column; align-items: center; gap: 1.9rem; }
.curtain-mark .brandmark { opacity: 0; animation: curtain-word .7s .15s ease-out forwards; }

.curtain-sun { position: relative; display: block; width: 96px; height: 96px; }
.curtain-sun svg { position: absolute; inset: 0; width: 100%; height: 100%;
                   transform: rotate(-125deg); }

.curtain-enso {
  stroke: var(--accent); stroke-width: 4.5;
  stroke-dasharray: 232 251.3; stroke-dashoffset: 251.3;
  animation: curtain-draw 2.6s cubic-bezier(.5, .05, .3, 1) infinite;
}

.curtain-sun i {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 1.5px solid var(--accent-line); opacity: 0;
  animation: curtain-ripple 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
.curtain-sun i:nth-of-type(2) { animation-delay: 1.3s; }
/* The hinomaru at the centre, breathing. */
.curtain-sun::after {
  content: ""; position: absolute; inset: 37%; border-radius: 50%;
  background: var(--accent); animation: curtain-breathe 2.6s ease-in-out infinite;
}
@keyframes curtain-draw {
  0%   { stroke-dashoffset: 251.3; opacity: .25; }
  55%  { stroke-dashoffset: 19.3;  opacity: 1; }
  80%  { stroke-dashoffset: 19.3;  opacity: 1; }
  100% { stroke-dashoffset: 19.3;  opacity: 0; }
}
@keyframes curtain-ripple {
  0%   { transform: scale(.9); opacity: 0; }
  25%  { opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes curtain-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.8); opacity: .7; }
}
@keyframes curtain-word { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .curtain-sun i { display: none; }
  .curtain-enso { animation: none; stroke-dashoffset: 19.3; opacity: .55; }
  .curtain-sun::after, .curtain-mark .brandmark { animation: none; opacity: 1; }
  .is-loaded .curtain { transition: none; }
}

main.container:has(> .landing),
main.container:has(> .legal-page) { max-width: none; padding: 0; }
main.container:has(> .landing) > .landing { margin: 0; }
main.container:has(> .legal-page) > .legal-page { margin: 0; min-height: 100vh; }

.landing { margin: -1.4rem -1.8rem 0; background: var(--bg); }

.l-nav { display: flex; align-items: center; gap: 1.4rem; padding: .9rem 2.4rem;
         background: color-mix(in srgb, var(--bg) 88%, transparent);
         -webkit-backdrop-filter: saturate(180%) blur(10px);
         backdrop-filter: saturate(180%) blur(10px);
         border-bottom: 1px solid transparent;
         position: sticky; top: 0; z-index: 40; }

.l-nav > .btn { border-radius: 999px; padding: .42rem .95rem; font-size: .8rem; }
.l-nav > .btn-secondary { color: var(--accent-deep); border-color: var(--accent-line); }
.l-nav > .btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent-line);
                                color: var(--accent-deep); }

@media (max-width: 1100px) { .l-nav > a[href^="#"] { display: none; } }

.l-nav a:not(.btn) { font-weight: 500; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.l-nav a:not(.btn):hover { color: var(--accent); }
.l-spacer { flex: 1; }

.l-hero { --hero-dark: #0b0d10;
          position: relative; overflow: hidden; max-width: none; margin: 0;
          padding: 5.2rem 0 4.6rem; text-align: left;
          background: var(--hero-dark); border-bottom: none; }
.l-hero h1 { color: #fff; }
.l-hero .l-sub { color: rgb(255 255 255 / .8); }
.l-hero-say { position: relative; z-index: 1;
              max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

.l-hero-say > * { max-width: 32rem; }

.l-hero h1 { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
             letter-spacing: -.04em; line-height: 1.04; margin: 0; max-width: 12.5em; }
.l-sub { color: var(--sub); font-size: 1.22rem; line-height: 1.5; max-width: 30rem;
         margin: 1.4rem 0 1.8rem; letter-spacing: -.012em; font-weight: 400; }

.l-hero-art { position: absolute; margin: 0; pointer-events: none;
              top: 0; bottom: 0;
              right: calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter));
              width: min(72%, calc(var(--shell) * .66)); }

.l-hero-art img { display: block; width: 100%; height: 100%;
                  object-fit: cover; object-position: right center;

                  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%),
                                      linear-gradient(180deg, #000 80%, transparent 100%);
                  -webkit-mask-composite: source-in;
                  mask-image: linear-gradient(90deg, #000 84%, transparent 100%),
                              linear-gradient(180deg, #000 80%, transparent 100%);
                  mask-composite: intersect; }
.l-hero-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 7%,
                              color-mix(in srgb, var(--bg) 55%, transparent) 19%,
                              transparent 33%); }

@media (max-width: 940px) {
  .l-hero { padding: 2.6rem 0 2.8rem; }

  body:not(.jp) .l-hero { padding-top: 3.4rem; }

  .l-hero h1 { font-size: 2.2rem; line-height: 1.08; max-width: none; }
  .l-sub { margin-top: 1.1rem; font-size: 1.08rem; }
  .l-hero-say > * { max-width: none; }

  .l-hero-art { position: absolute; top: 0; bottom: auto; right: auto; left: 0;
                width: 100vw; margin-left: calc(50% - 50vw); }
  .l-hero-art img { height: auto; object-fit: contain; object-position: center top;

                    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
                    mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }

  .l-hero-art::after { display: none; }
  .l-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--hero-dark) 22%, transparent) 0%,
                color-mix(in srgb, var(--hero-dark) 40%, transparent) 14%,
                color-mix(in srgb, var(--hero-dark) 94%, transparent) 30%,
                var(--hero-dark) 45%); }
}

.l-hero .kicker { font-size: .95rem; letter-spacing: .11em; margin-bottom: .7rem; }
body.jp .l-hero .kicker { font-size: 1rem; letter-spacing: .04em; }


.l-trade { display: inline-block; text-align: center; text-wrap: balance;
           margin: 0 0 1.4rem; padding: .45rem 1.1rem; border-radius: 999px;
           border: 1px solid var(--accent-line); background: var(--accent-soft);
           color: var(--accent-deep); font-size: .8rem; font-weight: 600;
           line-height: 1.5; }
.l-ctas { margin: 0; }
.l-ctas .btn { margin: 0 .5rem 0 0; }

.l-assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.1rem 1.1rem; margin: 2.4rem 0 0; padding: 0; list-style: none;
            max-width: 35rem; }

.l-assure li { display: flex; align-items: center; gap: .55rem;
               font-size: .8rem; line-height: 1.35; color: var(--sub);
               text-wrap: balance; background: var(--panel); border: 1px solid var(--line);
               border-radius: 999px; padding: .3rem .95rem .3rem .3rem; box-shadow: var(--shadow); }
.l-assure .ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
                 background: var(--wash) no-repeat center / 16px; display: block; }

@media (max-width: 560px) { .l-assure { display: flex; flex-wrap: wrap; gap: .6rem; } .l-assure li { text-wrap: nowrap; } }
.l-assure li:nth-child(1) .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 4.5 5.6v5.7c0 4.6 3.1 8.4 7.5 9.9 4.4-1.5 7.5-5.3 7.5-9.9V5.6z'/%3E%3Cpath d='m8.9 12 2.1 2.1 4.1-4.4'/%3E%3C/svg%3E"); }
.l-assure li:nth-child(2) .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.4' width='16' height='10.4' rx='2'/%3E%3Cpath d='M7.8 10.4V7.6a4.2 4.2 0 0 1 8.4 0v2.8'/%3E%3Cpath d='M12 14.6v2'/%3E%3C/svg%3E"); }
.l-assure li:nth-child(3) .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 7.6 12 3.2l8.8 4.4v8.8L12 20.8l-8.8-4.4z'/%3E%3Cpath d='m3.2 7.6 8.8 4.4 8.8-4.4M12 12v8.8'/%3E%3C/svg%3E"); }

/* Photo hero (23 Sep): the shop photograph fills the dark hero edge to edge,
   a dark veil over its left part carries the white words, and the menu stays
   white and opaque above it. Placed after the .l-assure rules so it wins at
   equal specificity. */
@media (min-width: 941px) {
  .l-nav { background: var(--bg); border-bottom-color: var(--line); }
  .l-hero { padding: 6rem 0 6.5rem; }
  .l-hero-art { inset: 0; width: auto; }
  .l-hero-art img { object-position: right center; -webkit-mask-image: none; mask-image: none; }
  .l-hero-art::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-dark) 88%, transparent) 0,
                color-mix(in srgb, var(--hero-dark) 60%, transparent) 42%, transparent 65%); }
  .l-assure { display: flex; flex-direction: column; gap: .95rem; margin-top: 2.2rem; }
  .l-assure li { background: none; border: 0; box-shadow: none; padding: 0;
                 font-size: 1rem; color: #fff; text-wrap: nowrap; }
  .l-assure .ico { width: 28px; height: 28px; border-radius: 0;
                   background-color: transparent; background-size: 24px; filter: invert(1); }
}

.l-sec { max-width: var(--shell); margin: 0 auto; padding: 5rem var(--gutter); }

.l-sec-alt { max-width: none; background: var(--wash);
             border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.l-sec-alt > * { max-width: var(--shell); margin-left: auto; margin-right: auto; }

.l-sec-head { text-align: left; margin-bottom: 2.6rem; }
.l-sec-head h2 { max-width: 40rem; }
.l-sec-head .kicker { font-size: .92rem; letter-spacing: 0; text-transform: none;
                      font-weight: 600; color: var(--accent); margin-bottom: .6rem; }
.l-sec-head h2 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700;
                 letter-spacing: -.035em; line-height: 1.1; margin: .2rem 0; text-wrap: balance; }
.l-sec-head p { color: var(--sub); font-size: 1.06rem; line-height: 1.55; max-width: 36rem;
                margin: .9rem 0 0; }
@media (max-width: 700px) { .l-sec-head h2 { font-size: 1.6rem; } }

.l-steps.with-art::before { display: none; }
.l-steps.with-art .l-step { padding: 0; overflow: hidden; }
.l-step-art { display: block; border-bottom: 1px solid var(--line); position: relative; }
.l-step-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.l-step-body { display: block; padding: .95rem 1.15rem 1.15rem; }
.l-step-body b { font-size: .95rem; }
.l-step-body p { color: var(--sub); font-size: .84rem; margin: .4rem 0 0; }

.l-steps.with-art .l-step::before { display: none; }
.l-steps.with-art .l-step { box-shadow: var(--shadow); }

.l-steps.with-art .l-step::after { display: none; }
.l-steps.with-art { counter-reset: step; }
.l-steps.with-art .l-step { counter-increment: step; transition: opacity .35s ease; }
.l-steps.with-art .l-step-art img { transition: filter .45s ease, opacity .45s ease; }
.l-steps.with-art .l-step-art::after { content: "0" counter(step); position: absolute; left: .8rem; top: .7rem;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .5rem; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; font-size: .72rem; letter-spacing: .05em; line-height: 1;
  background: var(--brand-navy); color: #fff; border: 1.5px solid transparent;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease, background-color .25s ease; }
/* Any hover inside the strip surfaces every badge — the row becomes a timeline. */
.l-steps.with-art:has(.l-step:hover, .l-step:focus-within) .l-step-art::after { opacity: 1; transform: none; }
/* Done: the cards before the hovered one. */
.l-steps.with-art .l-step:has(~ .l-step:hover, ~ .l-step:focus-within) .l-step-art img { filter: grayscale(1) contrast(.92); opacity: .82; }
.l-steps.with-art .l-step:has(~ .l-step:hover, ~ .l-step:focus-within) .l-step-art::after { content: "✓"; background: var(--accent); font-size: .8rem; }
/* To come: the cards after it. */
.l-steps.with-art .l-step:hover ~ .l-step, .l-steps.with-art .l-step:focus-within ~ .l-step { opacity: .5; }
.l-steps.with-art .l-step:hover ~ .l-step .l-step-art::after, .l-steps.with-art .l-step:focus-within ~ .l-step .l-step-art::after {
  background: rgba(255, 255, 255, .55); color: var(--brand-navy); border-color: var(--brand-navy); backdrop-filter: blur(3px); }

.l-steps.with-art .l-step-body b { transition: color .2s ease; }
.l-steps.with-art .l-step:hover .l-step-body b, .l-steps.with-art .l-step:focus-within .l-step-body b { color: var(--accent-deep); }
.l-steps.with-art .l-step:hover, .l-steps.with-art .l-step:focus-within { box-shadow: var(--shadow-lg); }

@supports (animation-timeline: view()) {
  @keyframes step-arrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .l-steps.with-art .l-step { animation: step-arrive linear backwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .l-steps.with-art .l-step:nth-child(2) { animation-range: entry 10% entry 65%; }
  .l-steps.with-art .l-step:nth-child(3) { animation-range: entry 20% entry 75%; }
  .l-steps.with-art .l-step:nth-child(4) { animation-range: entry 30% entry 85%; }
}
@media (prefers-reduced-motion: reduce) {
  .l-steps.with-art .l-step, .l-steps.with-art .l-step-art img, .l-steps.with-art .l-step-art::after { transition: none; animation: none; }
}

.cats-rows { display: grid; gap: 1.2rem; }
.cats-note { color: var(--faint); font-size: .74rem; line-height: 1.5; margin: 1.4rem 0 0; max-width: 60rem; }

.cat-row { display: grid; grid-template-columns: auto 1.5fr 1fr; align-items: center; column-gap: 2.5rem;
           background: var(--wash); border-radius: 12px; padding: 2rem 2.5rem; }
.cat-row:nth-child(even) { grid-template-columns: 1fr 1.5fr auto; }
.cat-row:nth-child(even) .cat-pic { order: 0; }
.cat-row:nth-child(even) .cat-txt { order: 1; }
.cat-row:nth-child(even) .cat-num { order: 2; }
.cat-pic { display: flex; justify-content: center; }
.cat-pic img { display: block; width: 100%; max-width: 20rem; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
               mix-blend-mode: multiply; filter: contrast(1.06) brightness(1.03); }

.cat-num { font-family: "Oswald", var(--font-display); font-size: 17rem; font-weight: 700;
           letter-spacing: -.06em; line-height: .8; color: var(--accent); margin: -.4rem 0; }
.cat-txt h3 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
              text-transform: none; color: var(--ink); margin: 0 0 .6rem; }
.cat-txt p { color: var(--sub); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; max-width: 28rem; }
.cat-txt a { color: var(--accent-deep); font-weight: 600; font-size: .95rem; text-decoration: none; }
.cat-txt a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .cat-row, .cat-row:nth-child(even) { grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 1rem; padding: 1.25rem; }
  .cat-pic, .cat-row:nth-child(even) .cat-pic { order: 0; grid-column: 1 / -1; }
  .cat-num, .cat-row:nth-child(even) .cat-num { order: 1; font-size: 5.6rem; margin: 0; }
  .cat-txt, .cat-row:nth-child(even) .cat-txt { order: 2; }
  .cat-txt h3 { font-size: 1.6rem; }
  .cat-pic img { max-width: 15rem; }
}
.l-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .l-steps { grid-template-columns: repeat(2, 1fr); } }
.l-steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .l-steps.three { grid-template-columns: 1fr; } }
.l-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
          padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.l-sec-alt .l-step { background: var(--panel); }

.l-step b { font-size: .98rem; }
.l-step p, .l-col p, .l-trust-card p { color: var(--sub); font-size: .86rem;
                                       line-height: 1.62; margin: .45rem 0 0; }
.l-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .l-cols { grid-template-columns: 1fr; } }
.l-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
         padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }

.l-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .l-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .l-trust { grid-template-columns: 1fr; } }

.l-trust-card { background: var(--panel); border: 1px solid var(--line);
                border-radius: var(--r-xl); padding: 1.6rem 1.5rem 1.6rem; text-align: left;
                box-shadow: var(--shadow); }
.l-trust-card b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.l-trust-card::before { content: ""; display: block; width: 44px; height: 44px;
  margin: 0 0 1rem; border-radius: 10px;
  background: var(--accent-soft) no-repeat center / 24px; }
.l-trust-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.4 4.4 5.5v5.9c0 4.7 3.1 8.6 7.6 10.2 4.5-1.6 7.6-5.5 7.6-10.2V5.5z'/%3E%3Cpath d='M12 8.4c-1.2 1.6-2 2.7-2 3.8a2 2 0 0 0 4 0c0-1.1-.8-2.2-2-3.8z'/%3E%3C/svg%3E"); }
.l-trust-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8.6h17.2L18.9 4H5.1z'/%3E%3Cpath d='M4.6 8.6V20h14.8V8.6'/%3E%3Cpath d='M9.4 20v-5.4h5.2V20'/%3E%3Cpath d='M3.4 8.6c0 1.4 1 2.4 2.2 2.4s2.2-1 2.2-2.4c0 1.4 1 2.4 2.2 2.4s2.2-1 2.2-2.4c0 1.4 1 2.4 2.2 2.4s2.2-1 2.2-2.4c0 1.4 1 2.4 2.2 2.4s2.2-1 2.2-2.4'/%3E%3C/svg%3E"); }
.l-trust-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a3 3 0 0 1 3-3h6.4a3 3 0 0 1 3 3v2.6a3 3 0 0 1-3 3H8l-3.4 2.6v-2.6H6a3 3 0 0 1-3-3z'/%3E%3Cpath d='M17.6 9.2h.4a3 3 0 0 1 3 3v2.6a3 3 0 0 1-3 3h-.6L14 20.4v-2.6'/%3E%3C/svg%3E"); }
.l-trust-card:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 2.8h8L19 8.2v13H5.6z'/%3E%3Cpath d='M13.6 2.8v5.4H19'/%3E%3Cpath d='M8.4 12.2h1.8m2.4 0h3.6M8.4 16.2h1.8m2.4 0h3.6'/%3E%3C/svg%3E"); }

/* Testimonials: the quote, then the verdict, then who said it. */

/* ── FAQ: a centred head over a plain list, on both landings ──────────── */
.l-faq { margin: 0; }

.l-faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
                 padding: 1.05rem .2rem; margin: 0; }
.l-faq details:first-child { border-top: 1px solid var(--line); }
.l-faq summary { font-weight: 600; cursor: pointer; font-size: 1rem; letter-spacing: -.01em;
                 list-style: none; display: flex; align-items: center; gap: 1rem; }
.l-faq summary::-webkit-details-marker { display: none; }

.l-faq summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 13px; height: 13px;
  background: no-repeat center / 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.l-faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.l-faq p { color: var(--sub); font-size: .92rem; line-height: 1.65; margin: .7rem 0 0; max-width: 46rem; }

.l-cta-band { max-width: var(--shell); margin: 1rem auto 3.4rem; padding: 0 var(--gutter);
              background: none; color: inherit; text-align: left; }

.l-cta-inner { text-align: center; background: var(--brand-navy); border-radius: var(--r-lg);
               padding: 3.4rem 2.6rem; }
.l-cta-inner > div { max-width: 40rem; margin: 0 auto; }
.l-cta-band h2 { font-family: var(--font-display); color: #fff; font-size: 2.1rem;
                 font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 .6rem; }
.l-cta-band p { opacity: 1; color: rgba(255, 255, 255, .72); font-size: 1.02rem; margin: 0 0 1.6rem; }
.l-cta-inner .btn-cta { background: #fff; color: var(--brand-navy); }
.l-cta-inner .btn-cta:hover { background: var(--accent-soft); color: var(--brand-navy); }
.l-cta-inner .btn-cta::after { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }
@media (max-width: 820px) {
  .l-cta-inner { padding: 2rem 1.4rem; }
}

.l-foot { display: grid; grid-template-columns: minmax(15rem, 23rem) minmax(0, 1fr);
          align-items: start; gap: 2rem 3rem;
          max-width: var(--shell); margin: 0 auto; padding: 3rem var(--gutter) 2.6rem;
          border-top: 1px solid var(--line); font-size: .86rem; }
.l-foot a { color: var(--sub); font-weight: 500; }
.l-foot a:hover { color: var(--accent); }
.l-foot .brandmark { font-size: 1.6rem; }
.l-foot-brand p { color: var(--sub); font-size: .82rem; line-height: 1.65;
                  margin: .75rem 0 0; max-width: 26em; text-wrap: pretty; }
.l-foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end;
                gap: .7rem 1.7rem; }
/* The base rule: small print on one side, language on the other. */
.l-foot-base { grid-column: 1 / -1; display: flex; align-items: center;
               justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
               border-top: 1px solid var(--line); padding-top: 1.4rem; }
.l-foot-base small { color: var(--faint); font-size: .78rem; }

.l-foot .lang-switch { flex: 0 0 auto; width: auto; justify-self: start; }

@media (max-width: 900px) {
  .l-foot { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding-top: 2.4rem; }

  .l-foot-links { justify-content: flex-start; flex-direction: column; gap: .95rem; }
  .l-foot-base { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}

.auth-card:has(> .auth-card), .auth-card:has(> .auth-split) {
  background: transparent; border: none; box-shadow: none; padding: 0; width: auto; }

.auth-split { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 310px);
              gap: 1.5rem; align-items: start; }
.auth-card-wide { width: min(580px, 100%); }

.auth-aside { display: flex; flex-direction: column; gap: 1rem; }
.auth-aside .l-trade { margin: 0; align-self: flex-start; font-size: .76rem; padding: .4rem .85rem; }

.auth-aside .how-it-works { --hiw-paper: var(--panel); }

.auth-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
              padding: .1rem .2rem; }
.auth-facts b { display: block; font-size: 1.05rem; font-weight: 800;
                background: var(--holo-ink); -webkit-background-clip: text;
                background-clip: text; color: transparent; }
.auth-facts span { font-size: .6rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .07em; color: var(--sub); line-height: 1.3;
                   display: block; margin-top: .15rem; }
/* Flat surface: the foil is the one thing the JP layer removes everywhere. */
body.jp .auth-facts b { background: none; color: var(--accent); }

@media (max-width: 980px) {
  .auth-split { grid-template-columns: minmax(0, 580px); }
  .auth-aside { order: 2; }
  .auth-facts { padding-bottom: .4rem; }

  body.auth:has(.auth-split) .auth-top { width: min(580px, 100%); }
}

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal-page { margin: -1.4rem -1.8rem 0; display: flex; flex-direction: column;
              min-height: calc(100vh - 1.4rem); }
.legal-page > .l-foot { margin-top: auto; }
.legal-head { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 2.4rem;
              background: var(--panel); border-bottom: 1px solid var(--line); }

.legal-head > .btn { border-radius: 999px; padding: .42rem .95rem; font-size: .8rem; }
.legal-head > .btn-secondary { color: var(--accent-deep); border-color: var(--accent-line); }
.legal-head > .btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent-line);
                                     color: var(--accent-deep); }

.l-nav, .legal-head {
  padding-inline: calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter)); }

.legal-body { width: 100%; max-width: 780px; margin: 0 auto; padding: 2.6rem 1.8rem 3rem; }

.legal-facts { display: grid; grid-template-columns: 12.5rem 1fr; gap: 0;
               margin: 1.6rem 0 2.2rem; font-size: .9rem; }
.legal-facts dt { padding: .8rem 1.2rem .8rem 0; font-weight: 700; color: var(--ink);
                  border-top: 1px solid var(--line); }
.legal-facts dd { margin: 0; padding: .8rem 0; color: var(--sub); line-height: 1.7;
                  border-top: 1px solid var(--line); }
@media (max-width: 620px) {
  .legal-facts { grid-template-columns: 1fr; }
  .legal-facts dt { padding-bottom: .1rem; border-bottom: 0; }
  .legal-facts dd { padding-top: .1rem; border-top: 0; padding-bottom: 1rem; }
}

.legal-body h1 { font-size: 1.8rem; margin: .2rem 0 .5rem; }
.legal-body h2 { font-size: 1rem; margin: 2rem 0 .5rem; }

.legal-body p, .legal-body li { color: var(--sub); font-size: .88rem; line-height: 1.7; }
.legal-body ul { padding-left: 1.1rem; }
.legal-body li { margin-bottom: .3rem; }
.legal-body b { color: var(--ink); }

.legal-body a:not(.btn) { color: var(--accent); font-weight: 600; }
.legal-meta { font-size: .78rem !important; color: var(--faint) !important; margin: 0 0 1.6rem; }
.legal-operator { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
                  padding: 1rem 1.2rem; font-size: .82rem; color: var(--sub); line-height: 1.7;
                  margin-bottom: 1.8rem; }
.legal-operator b { display: block; font-size: .66rem; text-transform: uppercase;
                    letter-spacing: .12em; color: var(--faint); margin-bottom: .3rem; }
.legal-note { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r);
              padding: .9rem 1.1rem; font-size: .8rem; color: var(--accent-deep); margin-bottom: 1.6rem; }
.legal-table { width: 100%; border-collapse: collapse; margin: .8rem 0 1rem; font-size: .82rem; }
.legal-table th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
                  color: var(--sub); padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--line-2); }
.legal-table td { padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line); color: var(--sub); }

/* ── Claim conversation ────────────────────────────────────────────────── */
.claim-thread { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
                padding: 1.2rem 1.4rem; margin-bottom: 1.1rem; }
.claim-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
@media (max-width: 560px) { .claim-head { flex-direction: column; gap: .5rem; } }
.claim-thread .msg { max-width: 82%; }
.claim-msg-buyer { align-self: flex-start; }
.claim-msg-seller { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); }
.claim-msg-platform { align-self: center; max-width: 92%; background: var(--info-soft);
                      border-color: var(--info-line); }

.claim-msg-internal { background: var(--wash); border-color: var(--line-2);
                      border-left: 3px solid var(--accent); }
.claim-thread .msg p { margin: .2rem 0 0; }

.appbar, .tabbar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
           align-content: start; background: none; }
  .sidebar { display: none; }

  .appbar {
    display: flex; align-items: center; gap: .6rem;
    position: sticky; top: 0; z-index: 40;
    padding: .55rem 1rem calc(.55rem);
    padding-top: calc(.55rem + env(safe-area-inset-top));
    background: var(--side); color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .appbar .brandmark { font-size: .9rem; margin: 0; }

  .appmenu { position: relative; }
  .appmenu > summary {
    list-style: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
    padding: .45rem .6rem; border-radius: var(--r); color: var(--ink);
    background: var(--tint);
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .appmenu > summary::-webkit-details-marker { display: none; }
  .appmenu[open] > summary { background: var(--accent-soft); color: var(--accent-deep); }
  .appmenu-sheet {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
    min-width: 15rem; padding: .7rem; border-radius: var(--r-lg);
    background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(16, 18, 22, .18); color: var(--ink);
  }
  .appmenu-who { font-size: .74rem; color: var(--faint); padding: .1rem .4rem .5rem;
                 border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
  .appmenu-link { display: flex; align-items: center; gap: .6rem; min-height: 44px;
                  padding: .4rem; border-radius: var(--r); color: var(--ink);
                  text-decoration: none; font-size: .88rem; font-weight: 600; }
  .appmenu-link:hover { background: var(--wash); }
  .appmenu-sheet .lang-switch { width: 100%; justify-content: center; margin-top: .5rem; }
  .appmenu-sheet form { margin: 0; }
  .appmenu-sheet .btn { width: 100%; }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: .15rem; min-height: 56px; padding: .4rem .2rem;
         color: var(--faint); text-decoration: none; }
  .tab-icon { position: relative; line-height: 0; }
  .tab-label { font-size: .62rem; font-weight: 700; letter-spacing: .01em;
               max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  .tab-dot { position: absolute; top: -2px; right: -6px; width: 7px; height: 7px;
             border-radius: 50%; background: var(--accent); }

  /* Room for the fixed bar, plus a thumb's worth of slack. */
  main.container { --pad-x: 1rem; --pad-t: 1rem;
                   padding: var(--pad-t) var(--pad-x) calc(5.5rem + env(safe-area-inset-bottom)); }

  /* Three KPI tiles should fit one row on a phone, not 2 + an orphan. */
  .stats-bar { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .55rem; }
  .stats-bar .stat { padding: .6rem .7rem; }
  .stats-bar .num { font-size: 1.15rem; }

  .page-head { flex-direction: column; align-items: flex-start; gap: .7rem; }

  .shell .page-head h1 { font-size: 1.25rem; }
  .page-head .actions { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
  .page-head .actions form { margin: 0; }

  .grid-2, .form-layout, .rail-layout { grid-template-columns: 1fr; }
  .card { padding: 1rem; }
  .card-narrow, .col-narrow { max-width: none; }
  .deal-grid { grid-template-columns: repeat(2, 1fr); }
  .l-steps,
.l-trust,
.l-cols { grid-template-columns: 1fr; }
  /* The phone gutter, set once — every band reads --gutter. */
  .landing, .legal-page { --gutter: 1.1rem; }
  .l-nav { flex-wrap: wrap; row-gap: .6rem; padding-block: .8rem; }

  .l-hero { padding-inline: 0; }
  .display { font-size: 1.7rem; }
  .legal-page { margin: 0; }
  .landing { margin: -1rem -1rem 0; }
  .legal-head { flex-wrap: wrap; row-gap: .6rem; padding-block: .8rem; }
  .legal-body { padding: 1.8rem var(--gutter) 2.4rem; }
  .l-foot { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

  .l-nav > .lang-switch, .legal-head > .lang-switch { display: none; }

  .l-nav > .nav-cta, .legal-head > .nav-cta { display: none; }

  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead, table.list tr:first-child th { display: none; }
  table.list tr {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
    margin-bottom: .7rem; padding: .3rem .2rem; }
  table.list td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border: none; border-bottom: 1px solid var(--line); padding: .5rem .8rem;
    text-align: right;

    white-space: normal; }
  table.list td:last-child { border-bottom: none; }
  /* A label with its clock is wider than a phone's card cell, which still
     does not wrap (td:not(:first-child) outranks the rule above); the clock
     drops under the label instead. */
  .state-with-countdown.is-stacked > .labelled-clock { white-space: normal; }

  table.list td:first-child {
    display: block; text-align: left; font-size: .95rem; font-weight: 700;
    padding: .7rem .8rem .55rem; }
  table.list td:first-child::before { display: none; }
  table.list td:first-child a { color: inherit; text-decoration: none; }

  /* Zebra striping belongs to a table, not to a list of cards. */
  table.list tr:nth-child(even), table.list tr:nth-child(odd) { background: var(--panel); }
  table.list tr.is-live { background: var(--accent-soft); border-color: var(--accent-line); }

  table.list td:not([data-label]):not(:has(*)) { display: none; }
  table.list td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--sub); }
  table.list td:empty { display: none; }
  table.list td.num { text-align: right; }

  table.list td.cell-act { text-align: center; }

  table.list.request-items { border: 0; border-radius: 0; background: transparent;
                             border-top: 1px solid var(--line); }
  table.list.request-items tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                                column-gap: 1rem; margin: 0; padding: .55rem 0;
                                border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  table.list.request-items td { border: 0; padding: .1rem 0; font-size: .8rem; }
  table.list.request-items td:first-child { grid-column: 1 / -1; font-size: .84rem; padding: 0 0 .15rem; }
  table.list.request-items td.num { justify-content: flex-start; gap: .4rem; }
  table.list.request-items td.num:nth-child(3) { justify-content: flex-end; grid-column: 3; }
  table.list.request-items td.cell-act { grid-column: 1 / -1; text-align: left; }

  input:not([type=hidden]), select, textarea { font-size: 16px !important; }

  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }

  .lang-switch { align-items: stretch; }
  .lang-switch .lang-switch-form { display: inline-flex; }
  .lang-switch a, .lang-switch button, .l-nav > a, .l-foot > a, .auth-card .brandmark {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .lang-switch a, .lang-switch button { padding-inline: 1.1rem; font-size: .78rem; }
  .thread li { max-width: 100%; }
}

@media (max-width: 420px) {
  .deal-grid { grid-template-columns: 1fr; }
  .tab-label { font-size: .58rem; }
}

@media (display-mode: standalone) {
  .appbar { padding-top: calc(.55rem + env(safe-area-inset-top)); }
  body { overscroll-behavior-y: none; }
}

/* Respect the OS setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Mobile refinements ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* The header row of a stacked table would otherwise render as an empty card. */
  table.list tr:has(> th) { display: none; }

  /* Secondary content belongs after the work on a phone. */
  .rail-layout > div { display: flex; flex-direction: column; }
  .order-last-on-mobile { order: 99; margin-top: 1.4rem; }

  /* A dl with a long value reads better stacked than squeezed into 2 columns. */
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { padding: .5rem 0 .1rem; border-bottom: none; font-size: .72rem;
             text-transform: uppercase; letter-spacing: .06em; }
  dl.kv dd { padding: 0 0 .55rem; }
  dl.kv dd.num { text-align: left; }
  dl.kv dt:last-of-type { border-bottom: none; }

  /* Tap targets in the negotiation thread and pill rows. */
  .pill-row { row-gap: .4rem; }
  .filter-row a { min-height: 38px; display: inline-flex; align-items: center; }

  .track { padding: 1rem 1rem .9rem; }
  .track ol { gap: .45rem; }
  .track li { padding-top: 1.2rem; }
  .track li::before { top: 7px; }
  .track-pip { width: 12px; height: 12px; top: 2px; }
  .track-label { font-size: .68rem; }
  .track li:not(.current) .track-say { display: none; }
  .track-say { font-size: .66rem; margin-top: .25rem; }
  .track-halt { font-size: .78rem; margin-top: .8rem; padding-top: .7rem; }

  .offer-head { flex-direction: column; gap: .8rem; }
  .offer-price { align-items: flex-start; text-align: left; }
  .offer-actions .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 860px) {
  .appback { display: flex; align-items: center; justify-content: center;
             min-width: 44px; min-height: 44px; margin-left: -.4rem;
             font-size: 1.6rem; line-height: 1; color: var(--ink); text-decoration: none; }
  .apptitle { font-size: .92rem; font-weight: 700; color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .l-faq summary { min-height: 44px; }
}

:root {
  --holo: linear-gradient(115deg, #ffcf5c 0%, #ff6f9c 22%, #a06bff 45%,
                                  #3fc9ff 66%, #48e39b 84%, #ffcf5c 100%);
  --holo-soft: linear-gradient(115deg, rgba(255,207,92,.16), rgba(255,111,156,.16),
                               rgba(160,107,255,.16), rgba(63,201,255,.16), rgba(72,227,155,.16));

  --holo-ink: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 55%, #e08a4a 100%);
}

/* ── Cards that behave like cards ──────────────────────────────────────── */

@keyframes foil-sweep {
  0%   { opacity: 0;   transform: translateX(-75%); }
  22%  { opacity: .95; }
  100% { opacity: 0;   transform: translateX(75%); }
}

/* The market price hero is the page a collector lands on from search. */

/* Reduced motion: keep the foil, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .l-step,
.l-trust-card,
.l-col { transition: none; }
  .l-step:hover,
.l-trust-card:hover,
.l-col:hover { transform: none; }
  .l-step::after,
.l-trust-card::after,
.l-col::after { display: none; }
}

body.jp {
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
          "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
}

body.jp .shell { font-size: 15.5px; }
body.jp h1, body.jp h2, body.jp .shell h1, body.jp .shell h2 { letter-spacing: normal; }
body.jp .shell h3 { letter-spacing: .08em; }

body.jp .l-hero h1, body.jp .l-sec-head h2, body.jp .l-cta-band h2,
body.jp .display, body.jp .brandmark:not(:has(.brand-word)) {
  font-family: var(--font); letter-spacing: normal; font-weight: 700; }

body.jp .l-hero h1 { font-size: 2.4rem; line-height: 1.3; max-width: 13.5em; }
body.jp .l-sec-head h2 { font-size: 1.7rem; }
body.jp .l-cta-band h2 { font-size: 1.6rem; }
body.jp .kicker { letter-spacing: .08em; }
body.jp .l-sub { font-size: 1.05rem; letter-spacing: normal; }
body.jp .l-assure li { font-size: .76rem; line-height: 1.45; }

body.jp .brandmark, body.jp .brandmark .brand-word { font-family: var(--font-brand); }

body.jp .turbo-progress-bar { background: var(--accent); animation: none; box-shadow: none; }

.btn[disabled], .btn[disabled]:hover,
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
                                       opacity: 1; cursor: not-allowed; box-shadow: none;
                                       background: var(--wash); color: var(--faint);
                                       border: 1px solid var(--line); }
.btn-secondary[disabled], .btn-secondary[disabled]:hover,
.btn-secondary[aria-disabled="true"], .btn-secondary[aria-disabled="true"]:hover { background: var(--wash); color: var(--faint); }

.sidebar .foot b, .sidebar .foot .who, .appmenu-who {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; min-width: 0;
}
/* The avatar must not shrink to make room for a long name — the name gives. */
.sidebar .foot .rowflex { min-width: 0; }
.sidebar .foot .rowflex > b { min-width: 0; }
/* The name line starts after the 24px avatar and its .5rem gap; the user line starts where the name does. */
.sidebar .foot .who { padding-left: calc(24px + .5rem); }
/* Buyer: a larger tile, with the name and the user stacked beside it. */
.sidebar .foot .foot-id { display: flex; align-items: center; gap: .7rem; min-width: 0; margin-bottom: .3rem; }
.sidebar .foot .foot-id .avatar { border-radius: var(--r-sm); }
.foot-id-text { min-width: 0; line-height: 1.25; }
.sidebar .foot .foot-id b { font-size: .95rem; font-weight: 800; }
.sidebar .foot .foot-id .who { padding-left: 0; font-size: .84rem; }

.modal-scrim { position: fixed; inset: 0; z-index: 90; display: flex;
               align-items: center; justify-content: center; padding: 1.2rem;
               background: rgba(16, 18, 22, .55); }
.modal-card { background: var(--panel); border-radius: var(--r-lg); width: 100%; max-width: 440px;
              padding: 1.6rem 1.7rem; box-shadow: 0 18px 48px rgba(16, 18, 22, .3);
              max-height: 92vh; overflow-y: auto; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }
.modal-actions .btn { width: auto; margin: 0; }

dialog.sheet {
  position: fixed; inset: 0; margin: auto; z-index: 95;
  border: 0; color: var(--ink); background: var(--panel);
  border-radius: var(--r-lg); padding: 1.6rem 1.7rem;
  width: min(460px, calc(100% - 2.4rem));
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 18px 48px rgba(16, 18, 22, .3);
}
dialog.sheet::backdrop { background: rgba(16, 18, 22, .55); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sheet-head h2 { margin: 0 0 .2rem; font-size: 1.05rem; }

.sheet-close { background: none; border: 0; padding: .1rem .3rem; margin: -.2rem -.4rem 0 0;
               font: inherit; font-size: 1.15rem; line-height: 1; color: var(--sub);
               cursor: pointer; border-radius: var(--r-xs); }
.sheet-close:hover { color: var(--ink); background: var(--tint-hov); }
@media (max-width: 560px) { dialog.sheet { padding: 1.2rem 1.1rem; } }

dialog.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
                  margin: 0; padding: 0; border: 0; background: rgba(8, 10, 14, .95);
                  align-items: center; justify-content: center; }
dialog.lightbox[open] { display: flex; }
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox img { width: auto; height: auto; aspect-ratio: auto; object-fit: contain;
                      max-width: calc(100% - 7rem); max-height: calc(100% - 4rem);
                      border: 0; border-radius: var(--r-control); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; border: 0; border-radius: 50%; width: 2.75rem; height: 2.75rem;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 1.8rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .24); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  dialog.lightbox img { max-width: 100%; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; transform: none; }
}
@media (max-width: 560px) { .modal-card { padding: 1.2rem 1.1rem; } }

.wizard-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.wizard-count { font-size: .72rem; font-weight: 600; color: var(--faint);
                letter-spacing: .02em; white-space: nowrap; }
.wizard-pips { display: flex; gap: .3rem; margin: .5rem 0 .9rem; }
.wizard-pips span { height: 3px; flex: 1; border-radius: 2px; background: var(--line); }
.wizard-pips span.on { background: var(--accent); }

.phone-field { display: flex; gap: 0; }

.phone-field select { flex: 0 0 6.3rem; padding-left: .55rem; padding-right: .2rem;
                      border-radius: var(--r-control) 0 0 var(--r-control); border-right: none; }
.phone-field input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--r-control) var(--r-control) 0; }

.shell main.container { --pad-x: 2rem; max-width: 1680px;
                        padding-left: var(--pad-x); padding-right: var(--pad-x); }
@media (min-width: 1900px) {
  .shell main.container { --pad-x: 2.6rem; padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

.modal-actions { align-items: center; }
.modal-escape { margin: 0; margin-right: auto; }
.linklike { background: none; border: none; padding: 0; font: inherit;
            font-size: .78rem; color: var(--faint); cursor: pointer;
            text-decoration: underline; }
.linklike:hover { color: var(--sub); }
/* "Not interested" under a feed row's action, on its own line. */
.feed-dismiss { display: block; margin: .35rem 0 0; }
table.list td.cell-act:has(.feed-dismiss) { white-space: nowrap; }

/* TOTP enrolment: the QR is the primary path, the typed secret the fallback. */
.totp-enrol { display: flex; gap: 1.4rem; align-items: flex-start; margin: 1.2rem 0 1.6rem; }
.totp-qr { flex: 0 0 auto; background: #fff; padding: .6rem; border: 1px solid var(--line);
           border-radius: var(--r); line-height: 0; }
.totp-qr svg { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .totp-enrol { flex-direction: column; } }
/* In the settings side column there is no room beside the QR code. */
.settings-layout .totp-enrol { flex-direction: column; }

.turbo-progress-bar {
  height: 3px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-drift 1.6s linear infinite;

  box-shadow: 0 0 8px -1px rgba(99, 91, 255, .45);
}

@keyframes holo-drift {
  from { background-position:   0% 0; }
  to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar { animation: none; }
}

.popup-body {
  display: grid; place-items: center; min-height: 100vh; margin: 0;
  padding: 1.5rem; background: var(--bg); color: var(--ink);
  font-family: var(--font);
}
.popup-card {
  max-width: 30rem; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 2rem 1.6rem;
}
.popup-h { font-size: 1.15rem; margin: .9rem 0 .4rem; }
.popup-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }

.popup-spinner {
  width: 2rem; height: 2rem; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: popup-spin .8s linear infinite;
}
@keyframes popup-spin { to { transform: rotate(360deg); } }

.popup-actions { visibility: hidden; }
.popup-stuck .popup-actions, [data-controller~="stripe-launch"] .popup-actions { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .popup-spinner { animation-duration: 3s; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A form element that only exists to be targeted by form= attributes. */
.contents { display: contents; }

@media (min-width: 861px) {

  /* The condition glossary is four definitions, not a one-line hint. Beside
     the grading it sits in the form's narrowest cell, the last of three,
     where the 100%-of-label cap made it 164px wide and 368px tall. Opened
     leftward under its button, at a width it can be read at. Below 861px the
     cell is the whole row and the cap already fits. */
  form.stacked .third:has(select[name="buying_request[condition_min]"]) > label .fh:has(> .fh-ask:not([hidden])) > .fh-note {
    left: auto; right: 0; width: 22rem; max-width: 22rem; }

  .shell {
    --bg:     #ffffff;
    --panel:  #ffffff;
    --wash:   #ffffff;
    --line:   #e3e8ee;
    --r:      0px;

    grid-template-columns: 244px minmax(0, 1fr);

    background: #ffffff;
  }

  .shell { font-size: 14.5px; }

  /* ── The margin (ex-sidebar) ───────────────────────────────────────── */
  .shell .sidebar { background: #ffffff; color: var(--sub);
                    border-right: 1px solid var(--line); padding: 1.5rem 1rem; }

  .shell .sidebar .brandmark { color: var(--brand-ink) !important;
                               font-size: 1.6rem; gap: .55rem;
                               padding: .2rem .5rem 1.7rem; }
  .shell .sidebar h5 { color: var(--faint); padding: 1.2rem .6rem .4rem; }

  .shell .nv { border-radius: 0; border-left: 2px solid transparent;
               padding: .5rem .7rem; font-size: .88rem; color: var(--sub); }
  .shell .nv:hover { background: var(--tint-hov); color: var(--ink); }
  .shell .nv.on { background: transparent; color: var(--brand-navy);
                  border-left-color: var(--accent); font-weight: 800; }
  .shell .nv .n { background: var(--tint); color: var(--sub); }
  .shell .nv.on .n { background: var(--accent-soft); color: var(--accent-deep); }

  .shell .sidebar .foot { border-top: 1px solid var(--line); color: var(--sub); }
  .shell .sidebar .foot b { color: var(--ink); }
  .shell .sidebar select { color: var(--ink); background: #fff;
                           border: 1px solid var(--line); }

  .shell .sidebar .lang-switch-dark { background: var(--tint); border-color: var(--line); }
  .shell .sidebar .lang-switch-dark a,
  .shell .sidebar .lang-switch-dark button { color: var(--sub); }
  .shell .sidebar .lang-switch-dark a:hover,
  .shell .sidebar .lang-switch-dark button:hover { color: var(--ink); }
  .shell .sidebar .lang-switch-dark a.on,
  .shell .sidebar .lang-switch-dark button.on { background: #fff; color: var(--ink);
                                                box-shadow: 0 1px 2px rgba(16, 18, 22, .10); }

  /* ── The sheet ─────────────────────────────────────────────────────── */
  .shell main.container { --pad-t: 2.6rem; padding-top: var(--pad-t); padding-bottom: 5rem; }
  .shell h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; }
  .shell h3 { letter-spacing: .16em; font-size: .66rem; color: var(--faint); }
  .shell .page-head { margin-bottom: 2.2rem; padding-bottom: 1.1rem;
                      border-bottom: 1px solid var(--line); }

  .shell .card { border: none; border-radius: 0; padding: 0 0 2rem;
                 margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .shell .card:last-child, .shell .card.team-list { border-bottom: none; }

  .shell .card.offer { border-top: 1px solid var(--line-2); border-bottom: 0;
                       padding: 1.6rem 0; margin-bottom: 0; }
  .shell .card.offer:last-of-type { border-bottom: 1px solid var(--line-2); margin-bottom: 2rem; }
  /* The sheet has no boxes, so it has no shadows either. */
  .shell .card { box-shadow: none; }

  .shell .track { border: none; border-radius: 0; padding: .2rem 0 1.8rem;
                  margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .shell .track-halt { border-top: none; padding-top: 0; margin-top: 1rem; }
  .shell .grid-2 { gap: 3rem; }
  .shell .grid-2 > .card { border-bottom: none; padding-bottom: 0; }

  /* ── Tables, set rather than boxed ─────────────────────────────────── */
  .shell table.list { border: none; border-radius: 0; }
  .shell table.list th { background: transparent; color: var(--ink);
                         border-bottom: 1px solid var(--ink);
                         padding: 0 1rem .5rem 0; font-size: .6rem; }
  .shell table.list td { padding: .95rem 1rem .95rem 0;
                         border-bottom: 1px solid var(--line); font-size: .9rem; }
  .shell table.list tr:last-child td,
  .shell table.list tr.is-last td { border-bottom: 1px solid var(--line); }
  .shell table.list tr:hover td { background: var(--tint-row); }
  .shell table.list tr.is-live td, .shell table.list tr.is-live:hover td { background: var(--accent-soft); }

  .shell table.list:has(tr.is-live) td:first-child,
  .shell table.list:has(tr.is-live) th:first-child { padding-left: .8rem; }
  .shell .cell-sub { font-size: .74rem; }

  /* ── KPI row: bare figures between two rules ───────────────────────── */
  .shell .stats-bar { gap: 0; margin-bottom: 2.2rem;
                      border-top: 1px solid var(--line);
                      border-bottom: 1px solid var(--line); }
  .shell .stats-bar .stat { border: none; border-right: 1px solid var(--line);
                            border-radius: 0; padding: 1.1rem 1.4rem; }
  .shell .stats-bar .stat:last-child { border-right: none; }
  .shell .stats-bar .num { font-size: 2rem; letter-spacing: -.03em; }
  .shell .stats-bar .label { color: var(--faint); font-size: .62rem; }

  .shell .rail .panel { border: none; border-radius: 0; margin-bottom: 2rem; }
  .shell .rail .panel-head { padding: 0 0 .5rem; border-bottom: 1px solid var(--ink); }
  .shell .rail .row { padding: .7rem 0; }

  .shell .thumb { border-radius: 2px; }
  .shell .badge { border-radius: 3px; }
  .shell .btn { border-radius: var(--r-xs); }
}

@media (min-width: 981px) {
  .shell .settings-layout { gap: 3rem; }
  .shell .settings-layout > .card { border-bottom: none; padding-bottom: 0; }
}

@media (min-width: 1260px) {
  .shell .rail-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; }
}

@media (max-width: 860px) {
  .intent-row, .thread-scroll { max-height: none; overflow-y: visible; }
}

.waybill-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 1rem; max-width: 34rem; }
.waybill-head h3 { margin: 0; }
.waybill { display: grid; margin: .7rem 0 0; max-width: 34rem; }
/* The shipment card under it keeps to the same measure, so both end on
   one edge rather than the form running past the address above it. */
.shipment-card > * { max-width: 34rem; }
.waybill-row { display: grid; grid-template-columns: minmax(94px, 8.5rem) 1fr auto;
               align-items: baseline; gap: .3rem 1rem;
               padding: .58rem 0; border-bottom: 1px solid var(--line); }
.waybill-row:last-child { border-bottom: none; }
.waybill dt { margin: 0; color: var(--sub); font-size: .74rem; line-height: 1.6; }
.waybill dd { margin: 0; min-width: 0; }
.waybill-v { font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.45;
             overflow-wrap: anywhere; user-select: all; }

.waybill-v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                  letter-spacing: .06em; font-variant-numeric: tabular-nums;
                  font-size: .98rem; }

.waybill-alt { display: block; font-size: .78rem; font-weight: 400; color: var(--sub);
               margin-top: .12rem; }
.waybill-missing { font-size: .92rem; font-weight: 600; color: var(--accent-deep); }
.waybill-warn { margin: .9rem 0 0; font-size: .78rem; line-height: 1.55;
                color: var(--accent-deep); background: var(--accent-soft);
                border: 1px solid var(--accent-line); border-radius: var(--r-sm);
                padding: .5rem .7rem; }

.waybill-copy { font: inherit; font-size: .7rem; font-weight: 600; line-height: 1;
                color: var(--sub); background: var(--wash);
                border: 1px solid var(--line-2); border-radius: var(--r-sm);
                padding: .34rem .5rem; cursor: pointer; white-space: nowrap; }
.waybill-copy:hover { color: var(--ink); border-color: var(--faint); }
.waybill-copy.is-copied { color: var(--ok-ink); border-color: var(--ok-line);
                          background: var(--ok-soft); }

@media (max-width: 560px) {
  .waybill-row { grid-template-columns: 1fr auto; }
  .waybill dt { grid-column: 1 / -1; }
}

form.stacked .agreed-value, .agreed-value {
  margin: 0 0 .9rem; font-size: .92rem; font-weight: 600; color: var(--ink);
}

.payout-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
               margin: 1.1rem 0 0; }
.payout-amount { font-weight: 600; font-variant-numeric: tabular-nums; }

.payout-why { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5;
              color: var(--accent-deep); }

.payout-note { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--sub); }

.feed-locked { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
               margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--r);
               background: var(--accent-soft); border: 1px solid var(--accent-line); }

.feed-locked b { font-size: .88rem; color: var(--accent-deep); flex: 1 1 100%; }
.feed-locked span { font-size: .82rem; line-height: 1.5; color: var(--ink); flex: 1 1 22rem; }