/* ─────────────────────────────────────────────────────────────────────────────
   RequestJapan.com — "Cockpit" design system (chosen 2026-07-29, replaces Hinomaru).
   Dense B2B ops console: dark sidebar, cool-gray canvas, white bordered
   panels, compact data tables, vermillion accent. Light theme only.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --bg:      #f4f5f7;
  --panel:   #ffffff;
  --wash:    #fafbfc;
  --line:    #e3e6ea;
  --line-2:  #d3d7dd;

  --ink:     #1a1d21;
  --sub:     #5f6670;
  --faint:   #969ca6;

  --side:      #15171b;
  --side-ink:  #c9ccd2;
  --side-mut:  #7a7f88;
  --side-hov:  #23262c;

  --red:      #d8442e;
  --red-deep: #b7331f;
  --red-soft: #fcebe4;
  --red-line: #f2c4b8;

  --ok-ink:  #177245; --ok-soft:  #e4f2ea; --ok-line: #bfdccc;
  --info-ink:#33527a; --info-soft:#e8eef6; --info-line:#c4d2e4;

  --r: 9px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* The wordmark is a mark, not body copy. Surfaces may change --font; this
     one is pinned so the logo is the same object on every page. */
  --font-brand: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --brand-ink:  #1a1d21;
}

* { 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; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
h1 { font-weight: 800; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
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: 5px; color: var(--sub); }

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

/* ── Brand ─────────────────────────────────────────────────────────────── */
/* Pinned, not inherited: font, weight, tracking and ink are all fixed so the
   mark is byte-identical on the Mercari-flat JP surface and the collector one.
   .sidebar .brandmark is more specific and still turns it white. */
.brandmark { display: inline-flex; align-items: center; gap: .5rem;
             font-family: var(--font-brand); font-weight: 800; font-size: 1rem;
             letter-spacing: -.02em; color: var(--brand-ink) !important; }
.brandmark .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.brandmark.brand-lg { font-size: 1.5rem; }
.brandmark.brand-lg .dot { width: 28px; height: 28px; }
.env-tag { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
           color: #fff; background: var(--red); padding: .14rem .5rem;
           border-radius: 4px; margin-left: .6rem; }

/* ── App shell: dark sidebar + main column ─────────────────────────────── */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh;
         /* The sidebar is sticky + 100vh, so on a page taller than the viewport its
            column would show bare canvas below it. Paint the column on the grid. */
         background: linear-gradient(to right, var(--side) 0 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; }
.sidebar .brandmark { color: #fff !important; padding: .3rem .5rem 1rem; flex-wrap: wrap;
                      row-gap: .35rem; font-size: .95rem; }
.sidebar .env-tag { margin-left: .35rem; font-size: .52rem; padding: .1rem .38rem; }
.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: 7px;
      font-weight: 600; font-size: .84rem; margin-bottom: 2px; color: var(--side-ink); }
.nv:hover { background: var(--side-hov); color: #fff; }
.nv.on { background: var(--red); color: #fff; }
.nv .n { margin-left: auto; background: #2c2f36; border-radius: 99px; padding: .02rem .5rem;
         font-size: .68rem; font-weight: 700; }
.nv.on .n { background: rgba(255,255,255,.25); }
.sidebar .foot { margin-top: auto; font-size: .72rem; color: var(--side-mut);
                 padding: .8rem .55rem .2rem; border-top: 1px solid #24272d; }
.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 #2c2f36; border-radius: 6px;
                  padding: .3rem .5rem; margin-bottom: .5rem; }

main.container { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.8rem 4rem; width: 100%; }
body.public main.container { max-width: 1080px; padding-top: 3rem; }

/* ── 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; }
.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; }
.card h2 { margin-top: 0; }
.card-narrow { max-width: 640px; }
/* Detail pages that stack narrow cards: keep every block on the same measure,
   including wide children like the claim thread. */
.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; }
@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 #eef0f3;
                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:hover td { background: var(--wash); }
table.list td a { font-weight: 700; }
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; color: var(--faint); font-size: .72rem; font-weight: 400; margin-top: .1rem; }
.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: 6px; flex-shrink: 0;
         display: flex; align-items: center; justify-content: center; }
.thumb svg { width: 17px; height: 17px; }
.rowflex { display: flex; align-items: center; gap: .8rem; }
.tint-0 { background: #efe9dc; color: #a08a5f; }
.tint-1 { background: #e6e0f0; color: #7a68a6; }
.tint-2 { background: #e0ebe4; color: #5d8a72; }
.tint-3 { background: #f2e0e0; color: #a66868; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* ── Badges: compact status chips ──────────────────────────────────────── */
.badge { display: inline-block; padding: .13rem .5rem; border-radius: 5px;
         font-size: .66rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
         background: #eef0f3; 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-executing, .badge-batched,
.badge-requires_payment { background: var(--red-soft); color: var(--red-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-lost, .badge-withdrawn, .badge-in_claim, .badge-held, .badge-failed,
.badge-refunded, .badge-resolved_refund { background: var(--red-soft); color: var(--red-deep);
                                          box-shadow: inset 0 0 0 1px var(--red-line); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-block; border: none; cursor: pointer; font: inherit; font-weight: 700;
       font-size: .84rem; line-height: 1.25; padding: .55rem 1.1rem; border-radius: 7px;
       background: var(--red); color: #fff; transition: background .15s ease; }
.btn:hover { background: var(--red-deep); color: #fff; }
.btn-brand { background: var(--red); }
.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(--red-deep); border: 1px solid var(--red-line); }
.btn-danger:hover { background: var(--red-soft); color: var(--red-deep); }
.btn-sm { padding: .35rem .8rem; font-size: .76rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
form.stacked label { display: block; font-weight: 600; margin: 1rem 0 .3rem; font-size: .8rem; }
form.stacked input[type=text], form.stacked input[type=email], form.stacked input[type=password],
form.stacked input[type=number], form.stacked input[type=datetime-local],
form.stacked textarea, form.stacked select {
  width: 100%; font: inherit; font-size: .86rem; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 7px; padding: .5rem .7rem; }
form.stacked input:focus, form.stacked textarea:focus, form.stacked select:focus {
  outline: 2px solid var(--red-line); border-color: var(--red); }
form.stacked input::placeholder, form.stacked textarea::placeholder { color: var(--faint); }
form.stacked textarea { min-height: 90px; resize: vertical; }
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: 7px; padding: .5rem .7rem; }
/* The whole .upload-zone is a <label>: clicking anywhere in it opens the
   picker, so the native control only adds untranslatable English chrome. */
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(--canvas);
  border: 1px solid var(--line-2); border-radius: 5px; padding: .28rem .7rem; margin-right: .7rem;
  cursor: pointer; }
form.stacked input[type=file]:hover::file-selector-button { border-color: var(--red); color: var(--red); }
form.stacked hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0 .4rem; }
form.stacked .hint { color: var(--faint); font-size: .74rem; margin-top: .3rem; }
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; }

/* ── Flash ─────────────────────────────────────────────────────────────── */
.flash { padding: .7rem 1.1rem; border-radius: 7px; margin-bottom: 1rem; font-size: .84rem;
         font-weight: 600; background: var(--ok-soft); color: var(--ok-ink);
         border: 1px solid var(--ok-line); }
.flash-alert { background: var(--red-soft); color: var(--red-deep); border-color: var(--red-line); }

/* ── 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; }

/* ── Content + right rail ──────────────────────────────────────────────── */
.rail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 1.2rem;
               align-items: start; }
@media (max-width: 1080px) { .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 #eef0f3;
             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(--red); }
.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; }
.rail .mrow { display: flex; justify-content: space-between; padding: .5rem 1rem;
              border-bottom: 1px solid #eef0f3; font-size: .78rem; }
.rail .mrow:last-child { border-bottom: none; }
.rail .mrow b { font-variant-numeric: tabular-nums; }

/* ── Auth pages ────────────────────────────────────────────────────────── */
body.auth { display: flex; flex-direction: column; align-items: center; justify-content: center;
            min-height: 100vh; padding: 3rem 1rem; box-sizing: border-box; gap: 1.1rem; }
.auth-langs { display: flex; justify-content: center; }
.auth-card { width: 384px; background: var(--panel); border: 1px solid var(--line);
             border-radius: 12px; padding: 2.2rem 2.2rem 2rem;
             box-shadow: 0 8px 28px rgba(20,22,26,.07); }
.auth-card .brandmark { margin-bottom: 1.4rem; }
.auth-card h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.auth-card .btn { width: 100%; margin-top: 1.3rem; text-align: center; }
.auth-card .aux { margin-top: 1rem; font-size: .78rem; color: var(--sub); text-align: center; }
.auth-card .aux a { color: var(--red); font-weight: 600; }
.auth-card .card { border: none; padding: 0; margin: 0; background: transparent; }

/* ── 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(--red-line); margin-bottom: .6rem; }

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

/* Click-to-select fields (invitation links, TOTP URI). Styled like an input so
   they don't fall back to raw browser chrome inside a Cockpit panel. */
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: 6px; padding: .34rem .55rem; cursor: pointer; }
input.copy:focus { outline: 2px solid var(--red-line); border-color: var(--red); color: var(--ink); }

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

/* Segmented control: one compact affordance where two full buttons would
   overflow. Shares the language switcher's shape so the nav reads as a set. */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px;
       border-radius: 999px; background: var(--wash); border: 1px solid var(--line);
       white-space: nowrap; }
.seg-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: .06em; color: var(--faint); padding: 0 .5rem 0 .6rem; }
.l-nav .seg a, .legal-head .seg a {
  font-size: .78rem; font-weight: 700; color: var(--sub); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .22rem .7rem;
  line-height: 1.5; }
.l-nav .seg a:hover, .legal-head .seg a:hover { color: var(--ink); border-color: var(--ink); }

/* ── 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 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 button:hover { color: var(--ink); }
.lang-switch button.on { background: var(--panel); color: var(--ink);
                         box-shadow: 0 1px 2px rgba(16, 18, 22, .08); }

/* Inside the dark sidebar the same control inverts. */
.lang-switch-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1);
                    width: 100%; justify-content: center; }
.lang-switch-dark button { color: var(--side-mut); }
.lang-switch-dark button:hover { color: #fff; }
.lang-switch-dark button.on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }

/* ── 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); }
.hero { text-align: center; padding: 11vh 1rem 2.5rem; }
.hero .brandmark { margin-bottom: 1.4rem; }
.hero p.tagline { max-width: 460px; margin: 1rem auto 2rem; color: var(--sub); font-size: 1rem; }
.hero h1, h1.display { font-size: 2rem; font-weight: 800; }

/* ── Negotiation thread ────────────────────────────────────────────────── */
.thread { display: flex; flex-direction: column; gap: .6rem; }
.thread .msg { max-width: 78%; padding: .65rem .9rem; border-radius: 9px; font-size: .84rem;
               background: var(--bg); border: 1px solid var(--line); }
.thread .msg.mine { align-self: flex-end; background: var(--red-soft); border-color: var(--red-line); }
.thread .msg .price { font-weight: 800; }
.thread .muted { margin-top: .12rem; font-size: .68rem; }

/* ── 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); }
@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(--red);
                       color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
                       padding: .18rem .5rem; border-radius: 4px; }
.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; }

/* ── Market prices (price-transparency pages) ──────────────────────────── */
.market-hero { text-align: center; padding: 2.8rem 1rem 2.2rem; background: var(--panel);
               border: 1px solid var(--line); border-radius: var(--r); }
.market-hero .big-price { font-size: 2.7rem; font-weight: 800; line-height: 1.05;
                          letter-spacing: -.02em; }
.market-hero .approx { color: var(--sub); font-size: 1rem; margin-top: .3rem; }
.market-hero .basis { color: var(--faint); font-size: .76rem; margin-top: .6rem; }

.price-band { max-width: 460px; margin: 1.6rem auto 0; }
.price-band .band-track { position: relative; height: 5px; background: #eef0f3; border-radius: 3px; }
.price-band .band-fill { position: absolute; top: 0; bottom: 0; background: var(--red-line);
  border-radius: 3px; }
.price-band .band-dot { position: absolute; top: 50%; width: 11px; height: 11px;
  background: var(--red); border-radius: 50%; transform: translate(-50%, -50%); }
.price-band .band-labels { display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .76rem; color: var(--sub); }
.price-band .band-labels b { color: var(--ink); font-weight: 700; }

.market-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; }
@media (min-width: 900px) { .market-cards { grid-template-columns: repeat(3, 1fr); } }
.market-card { display: block; color: inherit; text-decoration: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.3rem;
  transition: border-color .15s; }
.market-card:hover { border-color: var(--faint); }
.market-card .cat { font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); margin-bottom: .6rem; }
.market-card .avg { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.market-card .approx { color: var(--sub); font-size: .82rem; margin-top: .1rem; }
.market-card .range { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--sub); display: flex; justify-content: space-between; }
.market-card .count { margin-top: .4rem; font-size: .7rem; color: var(--faint); }

.market-context { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem 1.2rem; font-size: .82rem; margin: 1.4rem 0 .4rem; }
.market-context .mc-title { font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); margin-bottom: .4rem; }
.market-context .mc-price { font-size: 1.15rem; font-weight: 800; }
.market-context .mc-range { color: var(--sub); margin-top: .15rem; }
.market-context a { color: var(--red); text-decoration: none; font-weight: 600; }

/* ── Two-column form pages ─────────────────────────────────────────────── */
.form-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(260px, 1fr);
  gap: 1.4rem; align-items: start; }
@media (max-width: 980px) { .form-layout { grid-template-columns: 1fr; } }
.form-aside { position: sticky; top: 1.2rem; }
.how-it-works { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; }
.how-it-works ol { list-style: none; margin: .8rem 0 0; padding: 0; counter-reset: step; }
.how-it-works li { counter-increment: step; display: grid;
  grid-template-columns: 26px 1fr; gap: .1rem .7rem; padding: .7rem 0;
  border-bottom: 1px solid #eef0f3; font-size: .82rem; }
.how-it-works li:last-child { border-bottom: none; }
.how-it-works li::before { content: counter(step); grid-row: 1 / 3;
  font-size: 1.05rem; font-weight: 800; color: var(--red); line-height: 1.4; }
.how-it-works li b { font-weight: 700; }
.how-it-works li span { color: var(--sub); font-size: .76rem; grid-column: 2; }

/* legacy helpers kept for public pages */
nav.topbar { display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem; height: 58px;
             background: var(--panel); border-bottom: 1px solid var(--line);
             position: sticky; top: 0; z-index: 50; }
nav.topbar .brand-wrap { display: flex; align-items: center; margin-right: .6rem; }
nav.topbar a.nav-link { color: var(--sub); font-weight: 600; font-size: .86rem; padding: 1.15rem 0;
                        border-bottom: 2px solid transparent; }
nav.topbar a.nav-link:hover { color: var(--ink); }
nav.topbar a.nav-link.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }
nav.topbar .spacer { flex: 1; }
nav.topbar .who { font-size: .8rem; color: var(--sub); }
nav.topbar form { margin: 0; }
nav.topbar select { font: inherit; font-size: .8rem; color: var(--ink); background: var(--panel);
                    border: 1px solid var(--line-2); border-radius: 7px; padding: .3rem .7rem; }
.change-link { color: var(--red); font-size: .8rem; font-weight: 600; }

/* ── Company avatars (logo or tinted initial) ──────────────────────────── */
.avatar { border-radius: 6px; 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: 5px; }

/* ── 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 #eef0f3; }
dl.kv dt { border-bottom: 1px solid #eef0f3; }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: none; }
dl.kv dd.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
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: 7px;
                  border: 1px solid var(--line); }
.photo-grid-sm { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }

/* ── Misc components restored ──────────────────────────────────────────── */
.pill-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.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; }
.accent-bar { height: 3px; background: var(--red); border-radius: 2px; width: 34px;
              margin-bottom: 1rem; }
.auth-head-center { text-align: left; }
.upload-zone { border: 1px dashed var(--line-2); border-radius: 7px; padding: .8rem 1rem;
               background: var(--wash); font-size: .8rem; color: var(--sub); }

/* ── Public landing ────────────────────────────────────────────────────── */
/* The public pages are edge-to-edge: the coloured bands (nav, hero, alternate
   sections, footer) must reach the viewport edge, not stop at the app shell's
   1240px column. The negative margins below only cancel the container's own
   padding — on a screen wider than the container they would still leave a
   white gutter, so the container itself is unconstrained on these pages. */
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; }
.l-nav { display: flex; align-items: center; gap: 1.1rem; padding: .8rem 2.4rem;
         background: var(--panel); border-bottom: 1px solid var(--line);
         position: sticky; top: 0; z-index: 40; }
/* Section anchors are the first thing to give when the labels are English or
   French rather than Japanese — the same links live in the footer. */
@media (max-width: 1240px) { .l-nav > a[href^="#"] { display: none; } }
@media (max-width: 1000px) { .l-nav .seg-label { display: none; } }
.l-nav a { font-weight: 600; font-size: .86rem; color: var(--sub); white-space: nowrap; }
.l-nav a:hover { color: var(--ink); }
.l-nav .btn { color: #fff; } .l-nav .btn-secondary { color: var(--ink); }
.l-spacer { flex: 1; }
.l-langs { font-size: .78rem; color: var(--faint); }
.l-langs a { color: var(--sub); font-weight: 600; }
.l-hero { text-align: center; padding: 4.5rem 1.5rem 3rem; background: var(--panel);
          border-bottom: 1px solid var(--line); }
.l-hero h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; max-width: 760px;
             margin: 0 auto; line-height: 1.15; }
.l-sub { color: var(--sub); font-size: 1.05rem; max-width: 640px; margin: 1rem auto 1.8rem; }
.l-ctas .btn { margin: 0 .3rem; }
.l-stats { display: flex; justify-content: center; gap: 3.2rem; margin-top: 2.6rem; }
.l-stats b { display: block; font-size: 1.7rem; font-weight: 800; }
.l-stats span { font-size: .7rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .09em; color: var(--sub); }
.l-sec { max-width: 1080px; margin: 0 auto; padding: 3.4rem 1.8rem; }
.l-sec-alt { max-width: none; background: var(--panel); border-top: 1px solid var(--line);
             border-bottom: 1px solid var(--line); }
.l-sec-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.l-sec-head { text-align: center; margin-bottom: 2.2rem; }
.l-sec-head h2 { font-size: 1.55rem; margin: .2rem 0; }
.l-sec-head p { color: var(--sub); max-width: 640px; margin: .5rem auto 0; }
.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-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
          padding: 1.3rem 1.4rem; }
.l-sec-alt .l-step { background: var(--bg); }
.l-num { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff;
         font-weight: 800; display: flex; align-items: center; justify-content: center;
         margin-bottom: .8rem; }
.l-step b { font-size: .95rem; }
.l-step p, .l-col p, .l-trust-card p { color: var(--sub); font-size: .84rem; margin: .4rem 0 0; }
.l-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .l-cols { grid-template-columns: 1fr; } }
.l-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
         padding: 1.3rem 1.4rem; }
.l-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .l-trust { grid-template-columns: repeat(2, 1fr); } }
.l-trust-card { border-top: 3px solid var(--red); background: var(--panel);
                border-left: 1px solid var(--line); border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r);
                padding: 1.2rem 1.3rem; }
.l-faq { max-width: 720px; margin: 0 auto; }
.l-faq details { background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
                 padding: .9rem 1.2rem; margin-bottom: .6rem; }
.l-faq summary { font-weight: 700; cursor: pointer; font-size: .9rem; }
.l-faq p { color: var(--sub); font-size: .85rem; margin: .6rem 0 0; }
.l-cta-band { background: var(--red); color: #fff; text-align: center; padding: 3.2rem 1.5rem; }
.l-cta-band h2 { color: #fff; font-size: 1.6rem; margin: 0 0 .4rem; }
.l-cta-band p { opacity: .9; margin: 0 0 1.4rem; }
.l-foot { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem 2.4rem;
          background: var(--panel); border-top: 1px solid var(--line); font-size: .82rem; }
.l-foot a { color: var(--sub); font-weight: 600; white-space: nowrap; }
.l-foot { flex-wrap: wrap; row-gap: .6rem; }
/* When a page brings its own auth-card (e.g. the wider register form), the
   layout's wrapper collapses to avoid a double frame. */
.auth-card:has(> .auth-card) { background: transparent; border: none; box-shadow: none;
                               padding: 0; width: auto; }

/* ── 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); }
/* Declared after the three rows so it overrides their padding shorthand: the
   band spans the viewport, its contents stay inside the 1240px column. */
.l-nav, .l-foot, .legal-head { padding-inline: max(2.4rem, calc((100% - 1240px) / 2)); }
/* .legal-page is a flex column, so an auto-margin child shrinks to its content
   instead of filling its max-width — width:100% is what makes the column real. */
.legal-body { width: 100%; max-width: 780px; margin: 0 auto; padding: 2.6rem 1.8rem 3rem; }
.public-body { width: 100%; max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.4rem 4rem; }
.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 { color: var(--red); 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(--red-soft); border: 1px solid var(--red-line); border-radius: var(--r);
              padding: .9rem 1.1rem; font-size: .8rem; color: var(--red-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 #eef0f3; 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; }
.claim-thread .msg { max-width: 82%; }
.claim-msg-buyer { align-self: flex-start; }
.claim-msg-seller { align-self: flex-end; background: var(--red-soft); border-color: var(--red-line); }
.claim-msg-platform { align-self: center; max-width: 92%; background: var(--info-soft);
                      border-color: var(--info-line); }
.claim-msg-internal { background: #fff8e5; border-color: #e8d9a8; }
.claim-thread .msg p { margin: .2rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   The shop floor is the primary context: a phone, one hand, standing up.
   Below 860px the dark sidebar is replaced by a top app bar and a fixed
   bottom tab bar, both rendered from the same nav_items list.
   ══════════════════════════════════════════════════════════════════════════ */

.appbar, .tabbar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 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: #fff;
  }
  .appbar .brandmark { color: #fff !important; font-size: .9rem; margin: 0; }

  /* Secondary destinations + language + logout, behind one tap. <details> so
     it works with Turbo without any JS to re-bind. */
  .appmenu { position: relative; }
  .appmenu > summary {
    list-style: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
    padding: .45rem .6rem; border-radius: 8px; color: #fff;
    background: rgba(255, 255, 255, .1);
    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: rgba(255, 255, 255, .2); }
  .appmenu-sheet {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
    min-width: 15rem; padding: .7rem; border-radius: 12px;
    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: 8px; 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; font-size: 1.15rem; line-height: 1; }
  .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(--red); }
  .tab-dot { position: absolute; top: -2px; right: -6px; width: 7px; height: 7px;
             border-radius: 50%; background: var(--red); }

  /* Room for the fixed bar, plus a thumb's worth of slack. */
  main.container { padding: 1rem 1rem 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; }
  .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, .market-cards { grid-template-columns: 1fr; }
  .l-stats { display: grid; grid-template-columns: repeat(3, 1fr);
             gap: 1.2rem .6rem; text-align: center; }
  .l-stats b { font-size: 1.35rem; }
  .l-nav { flex-wrap: wrap; row-gap: .6rem; padding: .8rem 1rem; }
  .l-hero { padding: 3rem 1.1rem 2rem; }
  .display, .hero h1 { font-size: 1.7rem; }
  .legal-page { margin: 0; }
  .landing { margin: -1rem -1rem 0; }
  .legal-head { flex-wrap: wrap; row-gap: .6rem; padding: .8rem 1rem; }
  .legal-body { padding: 1.8rem 1.1rem 2.4rem; }
  .l-foot { padding: 1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }

  /* Tables become cards: a 6-column table on a 390px screen is unreadable
     however you scroll it. Each cell carries its header via data-label. */
  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 #f1f2f4; padding: .5rem .8rem;
    text-align: right; }
  table.list td:last-child { border-bottom: none; }

  /* The first cell is the card's subject — give it the weight of a heading
     instead of squeezing it into a right-aligned label/value row. */
  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); }

  /* Action cells have no header, and render nothing when the action does not
     apply — an empty row with a divider. */
  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; }

  /* iOS zooms the whole page when a focused input is under 16px. */
  form.stacked input, form.stacked textarea, form.stacked select { font-size: 16px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .thread li { max-width: 100%; }
}

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

/* Installed as a home-screen app: no browser chrome, so pull the app bar down
   past the status bar and keep the tab bar clear of the home indicator. */
@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; }
}

@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: #fff; text-decoration: none; }
  .apptitle { font-size: .92rem; font-weight: 700; color: #fff;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Native <details> markers look like a debug view next to a styled FAQ. */
  .l-faq summary { list-style: none; }
  .l-faq summary::-webkit-details-marker { display: none; }
  .l-faq summary::after { content: "+"; float: right; font-weight: 700; color: var(--red); }
  .l-faq details[open] summary::after { content: "–"; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Collector layer — public pages only.

   The buyers are card and hobby shops; the goods are collectibles. The
   cockpit stays a cockpit once you are signed in — this layer only touches
   the pages a stranger sees, and borrows the one visual cue everyone in this
   trade reads instantly: the holo foil of a rare card.

   Deliberately generic foil, not any publisher's palette or wordmark — the
   platform sells to shops that trade Pokémon, it is not licensed by them.
   ───────────────────────────────────────────────────────────────────────── */
: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));
  /* Foil for text. Starts on the brand vermillion so a headline number still
     reads as ours rather than as a generic rainbow. */
  --holo-ink: linear-gradient(100deg, #c0351f 0%, #e0642c 30%, #b0489a 62%, #3f7fd8 100%);
}

/* ── Hero: an aurora behind the type, a foil edge under it ─────────────── */
.l-hero { position: relative; overflow: hidden; border-bottom: none; }
.l-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 150%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 55% at 18% 30%, rgba(216, 68, 46, .13), transparent 70%),
    radial-gradient(38% 50% at 82% 22%, rgba(160, 107, 255, .13), transparent 70%),
    radial-gradient(46% 60% at 55% 88%, rgba(63, 201, 255, .11), transparent 72%);
}
.l-hero > * { position: relative; z-index: 1; }
/* The foil strip reads as the edge of a card, and separates hero from body. */
.l-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                 height: 3px; background: var(--holo); z-index: 2; }

/* Big numbers pick up the foil instead of sitting flat black. */
.landing .l-stats b { background: var(--holo-ink); -webkit-background-clip: text;
                      background-clip: text; color: transparent; }

/* ── Cards that behave like cards ──────────────────────────────────────── */
.l-step, .l-trust-card, .market-card, .l-col {
  position: relative; overflow: hidden; border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Foil cap along the top edge — the trust cards already had a red one. */
.l-step::before, .market-card::before, .l-col::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--holo); opacity: .85;
}
.l-trust-card { border-top-width: 3px; border-top-style: solid; border-image: var(--holo) 1; }

/* The shine sweep: a diagonal highlight that crosses the card once on hover,
   the way a foil catches the light when you tilt it. It is an animation, not
   a transition, so it passes and clears instead of parking a tinted half-card
   under the cursor for as long as the pointer rests there. */
@keyframes foil-sweep {
  0%   { opacity: 0;   transform: translateX(-75%); }
  22%  { opacity: .95; }
  100% { opacity: 0;   transform: translateX(75%); }
}
.l-step::after, .l-trust-card::after, .market-card::after, .l-col::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%,
                              transparent 62%), var(--holo-soft);
}
.l-step:hover, .l-trust-card:hover, .market-card:hover, .l-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -12px rgba(26, 29, 33, .28);
}
.l-step:hover::after, .l-trust-card:hover::after,
.market-card:hover::after, .l-col:hover::after { animation: foil-sweep .8s ease-out; }
.market-card:hover { border-color: var(--line-2); }
.market-card > * { position: relative; z-index: 1; }

/* Step numbers read as energy pips rather than plain bullets. */
.l-num { box-shadow: 0 0 0 4px rgba(216, 68, 46, .12), 0 3px 8px -2px rgba(216, 68, 46, .5); }

/* ── Closing band: deeper, with a foil hairline ────────────────────────── */
.l-cta-band { position: relative;
              background: linear-gradient(118deg, var(--red-deep) 0%, var(--red) 48%, #a0364f 100%); }
.l-cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
                      height: 3px; background: var(--holo); }

/* The market price hero is the page a collector lands on from search. */
.market-hero { position: relative; overflow: hidden; border-radius: 12px; }
.market-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
                       height: 3px; background: var(--holo); opacity: .85; }
.market-hero .big-price { background: var(--holo-ink); -webkit-background-clip: text;
                          background-clip: text; color: transparent; }

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

/* ─────────────────────────────────────────────────────────────────────────────
   JP surface — the seller side (body.jp, set by the public layout).

   A Japanese shop's reference for "an online marketplace that is safe to sign
   up to" is Mercari, and Mercari is the opposite of the collector layer above:
   flat white, 4px corners, red reserved strictly for actions, Hiragino, no
   ornament at all. Foil on that page would read as a consumer-grade gimmick to
   exactly the audience we most need to look boring and trustworthy to.

   Borrowed from Mercari: white page, ink #333 / sub #666, 4px radius, 15px
   body, Hiragino. NOT borrowed: their red. The vermillion is the one thing
   that has to be identical on both surfaces — it is in the logo mark, the
   favicon, the invoice PDFs and every transactional email, and a seller who
   sees one red on the landing and another on an invoice sees two companies.
   ───────────────────────────────────────────────────────────────────────── */
body.jp {
  --bg:      #ffffff;
  --panel:   #ffffff;
  --wash:    #fafafa;
  --line:    #eeeeee;
  --line-2:  #dddddd;

  --ink:     #333333;
  --sub:     #666666;
  --faint:   #888888;

  --r: 4px;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
          "Helvetica Neue", Arial, sans-serif;

  font-size: 15px;
}

/* No foil, no aurora, no lift. The JP page earns trust by being plain. */
body.jp .l-hero::before,
body.jp .l-hero::after,
body.jp .l-step::before, body.jp .l-col::before, body.jp .market-card::before,
body.jp .market-hero::before,
body.jp .l-cta-band::before,
body.jp .l-step::after, body.jp .l-trust-card::after,
body.jp .market-card::after, body.jp .l-col::after { display: none; }
body.jp .l-step:hover, body.jp .l-trust-card:hover,
body.jp .market-card:hover, body.jp .l-col:hover { transform: none; box-shadow: none; }
body.jp .l-step, body.jp .l-trust-card, body.jp .l-col,
body.jp .market-card, body.jp .market-hero { border-radius: 4px; }
body.jp .l-trust-card { border: 1px solid var(--line-2); border-top: 2px solid var(--red);
                        border-image: none; }
body.jp .l-num { box-shadow: none; }

/* Solid brand red, not a gradient — Mercari never tints a numeral. */
body.jp .l-stats b, body.jp .market-hero .big-price {
  background: none; -webkit-text-fill-color: currentColor; color: var(--red); }
body.jp .l-cta-band { background: var(--red); }

/* Swiss-plain type: smaller headings, normal tracking, no display weight. */
body.jp .l-hero { padding: 3.4rem 1.5rem 2.6rem; border-bottom: 1px solid var(--line); }
body.jp .display { font-size: 2rem; font-weight: 700; letter-spacing: normal; }
body.jp .l-sec-head h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: normal; }
body.jp .kicker { letter-spacing: .08em; }
body.jp .l-sub { font-size: 1rem; }

/* Sections separate with a hairline instead of a grey block. */
body.jp .l-sec-alt { background: var(--panel); }
body.jp .l-sec + .l-sec, body.jp .l-sec-alt { border-top: 1px solid var(--line); }
body.jp .l-step, body.jp .l-sec-alt .l-step, body.jp .l-col,
body.jp .l-faq details { background: var(--wash); border-color: var(--line-2); }

/* Buttons: 4px, bold, red for the action and outlined for everything else. */
body.jp .btn { border-radius: 4px; font-weight: 700; }
body.jp .btn-secondary { border-color: var(--line-2); }
body.jp .lang-switch button { border-radius: 4px; }

/* The signup form is where the seller commits — it must not look like a
   different company from the page that sent them there. Mercari's own forms
   are a plain card on a faint grey field, square-ish corners, no shadow. */
body.auth.jp { background: #f7f7f7; }
body.auth.jp .auth-card { border-radius: 4px; box-shadow: none; border-color: var(--line-2); }

/* A submit button held disabled until the form is complete has to look
   unavailable, or it reads as a broken button rather than a pending one. */
.btn[disabled], .btn[disabled]:hover { opacity: .45; cursor: not-allowed;
                                       background: var(--red); color: #fff; }
.btn-secondary[disabled], .btn-secondary[disabled]:hover { background: var(--panel); color: var(--ink); }

/* A long address — "prenom.nom@boutique-de-cartes-dijon.example" — is wider
   than a 216px sidebar or a 15rem menu sheet, and was pushing the panel out
   of shape rather than wrapping. Truncate it and keep the full value in the
   title attribute, so hovering (or a screen reader) still gets all of it. */
.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; }

/* ── Modal prompt ──────────────────────────────────────────────────────── */
/* Used for data the account cannot operate without — today only the buyer's
   delivery address. Deliberately not a dialog element: this must render
   identically with JavaScript off, where "later" is simply unavailable. */
.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: 12px; 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; }
@media (max-width: 560px) { .modal-card { padding: 1.2rem 1.1rem; } }

/* Phone: a narrow country-code select welded to the number input, so the two
   read as one field rather than two unrelated controls. */
.phone-field { display: flex; gap: 0; }
/* Just wide enough for a flag and the longest code (+81) plus the native
   select arrow — it is a prefix, not a field in its own right. */
.phone-field select { flex: 0 0 6.3rem; padding-left: .55rem; padding-right: .2rem;
                      border-radius: 7px 0 0 7px; border-right: none; }
.phone-field input { flex: 1 1 auto; min-width: 0; border-radius: 0 7px 7px 0; }

/* The 1240px cap is right for a page that owns the whole viewport, but inside
   the shell the sidebar has already taken 216px, so the column ends up
   centred in what is left with a wide dead gutter on either side — on a
   2200px screen, ~370px of empty canvas each side of a dense table. Give the
   app column a cap of its own: wide enough to use a large monitor, bounded so
   a table row does not become a 3000px line nobody can scan. */
.shell main.container { max-width: 1680px; padding-left: 2rem; padding-right: 2rem; }
@media (min-width: 1900px) {
  /* Past this width the two-column dashboards have room for a real split
     rather than a narrow rail squeezed against the edge. */
  .shell main.container { padding-left: 2.6rem; padding-right: 2.6rem; }
}

/* The prompt has no "later", so it must never be a dead end: signing out is
   always one click away from inside it. */
.modal-escape { margin: 1rem 0 0; text-align: center; }
.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); }

/* 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: 8px; line-height: 0; }
.totp-qr svg { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .totp-enrol { flex-direction: column; } }