/* ==========================================================================
   WeRefund — merchant dashboard, « à la Shop » (D81, Rico, 26/09/2026).
   One stylesheet for the ten merchant pages (dashboard-merchants*.html).

   Layout borrowed from the Shopify admin — black top bar with search, grey side navigation,
   white cards on a grey canvas, index tables — as in the approved mockup
   _preview-shop-merchants.html. Identity stays WeRefund: Talkto Font (D66), #2EF19C for fills
   only, #047857 for state text (D30), links in ink and underlined on hover (D30), no dark theme
   and no colour-scheme media query anywhere (D4). The rating is drawn in green squares, never stars
   (D38). No external resource.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #F1F1F1; }
body.ds {
  --ink: #0F1115;
  --body: #303030;
  --muted: #616161;
  --faint: #6E6E6E; /* WR-F005: 4.5:1 on the canvas #F1F1F1 (#8A8A8A was 3.06:1) — WCAG 1.4.3 */
  --line: #E3E3E3;
  --hair: #EBEBEB;
  --nav: #EBEBEB;
  --canvas: #F1F1F1;
  --card: #FFFFFF;
  --field: #FFFFFF;
  --green: #2EF19C;
  --green-soft: #DFFBEE;
  --green-ink: #047857;
  --amber-soft: #FFF1CC;
  --amber-ink: #8A5A00;
  --blue-soft: #E6EEFF;
  --blue-ink: #1F3FA6;
  --red-soft: #FDECEC;
  --red-ink: #B42318;
  --gray-soft: #F0F0F0;
  --r: 12px;
  --card-shadow: 0 1px 0 rgba(26,26,26,.07), 0 0 0 1px rgba(26,26,26,.07), 0 1px 3px rgba(26,26,26,.06);
  --pop-shadow: 0 0 0 1px rgba(26,26,26,.08), 0 16px 40px -12px rgba(26,26,26,.35);
  font-family: var(--font-text, "Talkto Font", system-ui, sans-serif);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
p { margin: 0; }
svg.ic { width: 18px; height: 18px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
code, .mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 700; }
.skip:focus { top: 10px; }
[hidden] { display: none !important; }

/* ---- top bar ------------------------------------------------------------------ */
.topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; align-items: center; height: 56px; padding: 0 12px; background: #1A1A1A; color: #E3E3E3; }
.brand { display: flex; align-items: center; gap: 10px; padding-left: 6px; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand span.disc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.brand img { width: 24px; height: 24px; }
.q { position: relative; justify-self: center; width: 100%; max-width: 560px; }
.q label { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: #303030; color: #A8A8A8; box-shadow: inset 0 0 0 1px #3D3D3D; cursor: text; }
.q label:focus-within { box-shadow: inset 0 0 0 1px #8A8A8A; }
.q input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #F4F4F4; outline: 0; }
.q input::placeholder { color: #A8A8A8; }
.q kbd { font: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: #3D3D3D; color: #CFCFCF; }
.tr { justify-self: end; display: flex; align-items: center; gap: 8px; }
.tbtn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #303030; border: 0; color: #E3E3E3; }
.tbtn:hover { background: #3D3D3D; }
.tbtn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #303030; }
.who { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 10px; border: 0; background: #303030; color: #fff; font-weight: 700; }
.who:hover { background: #3D3D3D; }
.who i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--green); color: var(--ink); font-style: normal; font-weight: 800; }
.anchor { position: relative; }

/* ---- popovers: notifications, account, search ------------------------------------------ */
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 380px; max-width: calc(100vw - 24px); border-radius: 14px; background: #fff; color: var(--body); box-shadow: var(--pop-shadow); overflow: hidden; }
.pop__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.pop__head h2 { margin: 0; font-size: 14px; color: var(--ink); font-weight: 800; }
.pop__head button { margin-left: auto; border: 0; background: none; padding: 4px 6px; border-radius: 6px; font-weight: 700; font-size: 12.5px; color: var(--muted); }
.pop__head button:hover { background: var(--gray-soft); color: var(--ink); }
.nlist { list-style: none; margin: 0; padding: 4px 0; max-height: min(460px, calc(100vh - 120px)); overflow-y: auto; }
.nlist a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; text-decoration: none; }
.nlist a:hover { background: #F7F7F7; text-decoration: none; }
.nlist .ni { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gray-soft); color: var(--ink); }
.nlist .ni svg { width: 16px; height: 16px; }
.nlist li.unread .ni { background: var(--green); }
.nlist b { display: block; color: var(--ink); font-weight: 700; }
.nlist span.t { display: block; color: var(--muted); font-size: 12.5px; }
.nlist time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.nlist li.unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--green-ink); vertical-align: 1px; }
.pop__foot { padding: 10px 14px; border-top: 1px solid var(--hair); color: var(--faint); font-size: 12px; }
.pop__foot a { color: var(--ink); font-weight: 700; }
.menu { width: 260px; }
.menu .who-card { padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.menu .who-card b { display: block; color: var(--ink); }
.menu .who-card span { color: var(--muted); font-size: 12.5px; }
.menu ul { list-style: none; margin: 0; padding: 6px; }
.menu li a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 8px; color: var(--body); font-weight: 600; text-decoration: none; }
.menu li a:hover { background: #F4F4F4; text-decoration: none; }
.menu li a svg { width: 16px; height: 16px; color: var(--muted); }
.menu li.sep { height: 1px; margin: 6px 4px; background: var(--hair); }
/* The store selector of the bar (WR-F018-d): one store per row, its name over its domain, its verification state
   on the right; the store of the page is marked. It appears only from two stores on. */
.menu--stores { width: 340px; }
.menu--stores li a { height: auto; min-height: 44px; padding: 6px 8px; }
.menu--stores li a[aria-current] { background: #F4F4F4; }
.menu--stores .st { display: grid; min-width: 0; }
.menu--stores .st b { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.menu--stores .st small { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.menu--stores .badge { flex: none; margin-left: auto; }
.qpop { left: 0; right: 0; width: auto; }
.qpop h3 { margin: 10px 14px 4px; font-size: 11.5px; letter-spacing: .02em; color: var(--faint); font-weight: 700; }
.qlist { list-style: none; margin: 0; padding: 0 0 6px; max-height: 380px; overflow-y: auto; }
.qlist a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--body); text-decoration: none; }
.qlist a:hover, .qlist a[aria-selected="true"] { background: #F4F4F4; text-decoration: none; }
.qlist a svg { width: 16px; height: 16px; color: var(--muted); }
.qlist a b { color: var(--ink); font-weight: 700; }
.qlist a span { color: var(--muted); font-size: 12.5px; }
.qempty { padding: 10px 14px 14px; color: var(--muted); }

/* ---- navigation ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.side { position: sticky; top: 56px; height: calc(100vh - 56px); display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--nav); overflow-y: auto; }
.side a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--body); font-weight: 600; text-decoration: none; }
.side a svg { color: #4A4A4A; }
.side a:hover { background: #E3E3E3; text-decoration: none; }
.side a[aria-current="page"] { background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 1px 0 rgba(26,26,26,.07); }
.side a .n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: #D4D4D4; color: var(--ink); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.side a .n--g { background: var(--green); }
/* --muted, not --faint: on the nav grey --faint is 4.28:1, --muted 5.2:1 (WR-F005, WCAG 1.4.3). */
.side h4 { margin: 16px 10px 6px; font-size: 11.5px; letter-spacing: .02em; color: var(--muted); font-weight: 700; }
.side .sp { margin-top: auto; }
.side a.side__alt { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* ---- content ------------------------------------------------------------------ */
.main { padding: 22px 28px 60px; min-width: 0; }
.page { max-width: 1060px; margin: 0 auto; }
.ph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ph h1 { margin: 0; font-size: 22px; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.ph .lede { flex: 1 0 100%; margin-top: -6px; color: var(--muted); }
.ph h1[tabindex="-1"]:focus { outline: none; }
.ph__sub { color: var(--muted); font-weight: 600; }
.ph .right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); }
.back:hover { background: #E3E3E3; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #E3E3E3; }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(26,26,26,.12); }
.b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 0; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.b:hover { text-decoration: none; }
.b--p { background: #303030; color: #fff; box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 rgba(255,255,255,.18); }
.b--p:hover { background: #1A1A1A; }
.b--s { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #D4D4D4, 0 1px 0 rgba(26,26,26,.07); }
.b--s:hover { background: #F7F7F7; }
.b--g { background: var(--green); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.b--d { background: #fff; color: var(--red-ink); box-shadow: inset 0 0 0 1px #F2C4C0; }
.b--d:hover { background: var(--red-soft); }
.b--t { background: transparent; color: var(--muted); padding: 0 8px; }
.b--t:hover { background: #EDEDED; color: var(--ink); }
.b svg { width: 16px; height: 16px; }
.b[aria-disabled="true"] { opacity: .45; }
.b.is-done .is-idle, .b:not(.is-done) .is-ok { display: none; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--card-shadow); min-width: 0; }
.card + .card, .grid + .card, .card + .grid, .grid + .grid, .card + .sech, .grid + .sech { margin-top: 16px; }
.grid > .card { margin-top: 0; }
.pad { padding: 16px; }
.ch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px 0; }
.ch h2, .ch h3 { margin: 0; font-size: 14px; color: var(--ink); font-weight: 800; }
.ch .more { margin-left: auto; font-weight: 700; color: var(--muted); text-decoration: none; font-size: 12.5px; }
.ch .more:hover { color: var(--ink); text-decoration: underline; }
.cs { margin: 4px 16px 0; color: var(--muted); }
.cb { padding: 12px 16px 16px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid--3 { grid-template-columns: 1.25fr 1fr; }
.sech { margin: 26px 2px 10px; font-size: 15px; color: var(--ink); font-weight: 800; }
.sech small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge svg { width: 13px; height: 13px; }
.badge--ok { background: var(--green-soft); color: var(--green-ink); }
.badge--att { background: var(--amber-soft); color: var(--amber-ink); }
.badge--info { background: var(--blue-soft); color: var(--blue-ink); }
.badge--mute { background: var(--gray-soft); color: var(--muted); }
.badge--new { background: var(--ink); color: #fff; }
.badge--bad { background: var(--red-soft); color: var(--red-ink); }

.note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.note svg { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--faint); }
.note b { color: var(--ink); font-weight: 700; }
.note + .note { margin-top: 6px; }
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #F7F7F7; color: var(--body); }
.callout svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--muted); }
.callout--ok { background: var(--green-soft); }
.callout--ok svg { color: var(--green-ink); }
.callout--att { background: var(--amber-soft); }
.callout--att svg { color: var(--amber-ink); }
.callout b { color: var(--ink); }

/* key/value lists (facts) */
.kv { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); margin: 0; }
.kv > div { display: contents; }
.kv dt, .kv dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--hair); }
.kv > div:first-child dt, .kv > div:first-child dd { border-top: 0; }
.kv dt { color: var(--muted); padding-right: 12px; }
.kv dd { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kv dd small { display: block; font-weight: 500; color: var(--muted); }
.kv--wide { grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); }

/* ---- setup guide ----------------------------------------------------------- */
.setup { display: grid; grid-template-columns: 1fr 230px; }
.setup__l { padding: 16px; }
.setup h2 { margin: 0; font-size: 14px; color: var(--ink); font-weight: 800; }
.setup p.s { margin: 2px 0 12px; color: var(--muted); }
.prog { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.prog i { position: relative; width: 120px; height: 6px; border-radius: 999px; background: #E3E3E3; }
.prog i::after { content: ""; position: absolute; inset: 0 var(--left, 40%) 0 0; border-radius: inherit; background: var(--ink); }
.tasks { list-style: none; margin: 12px 0 0; padding: 0; }
.tasks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.tasks li.open { background: #F7F7F7; }
.tasks .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.tasks .tick--done { background: var(--ink); color: var(--green); }
.tasks .tick--done svg { width: 12px; height: 12px; }
.tasks .tick--todo { border: 1.5px dashed #8A8A8A; }
.tasks .tick--opt { border: 1.5px solid #C9CDD2; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; }
.tasks b { color: var(--ink); font-weight: 700; }
.tasks li.done b { color: var(--muted); font-weight: 600; }
.tasks p { margin: 4px 0 10px; color: var(--muted); }
.setup__r { display: grid; place-items: center; background: linear-gradient(160deg, #F4FEF9, #E6FAF0); border-radius: 0 var(--r) var(--r) 0; }

/* ---- figures -------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 14px 16px; border-right: 1px solid var(--hair); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi span { display: block; color: var(--muted); font-weight: 600; border-bottom: 1px dashed #C9C9C9; width: max-content; max-width: 100%; }
.kpi b { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 20px; color: var(--ink); font-weight: 800; }
.kpi b em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green-ink); }
.kpi small { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }
.kpi svg.spark { display: block; width: 100%; height: 34px; margin-top: 8px; }

/* ---- verification ----------------------------------------------------------------- */
.state { display: flex; align-items: center; gap: 12px; padding: 16px; flex-wrap: wrap; }
.state__seal { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green); color: var(--ink); }
.state__seal svg { width: 22px; height: 22px; }
.state__seal--att { background: var(--amber-soft); color: var(--amber-ink); }
.state__seal--off { background: var(--gray-soft); color: var(--muted); }
.state b { display: block; font-size: 16px; color: var(--ink); font-weight: 800; }
.state small { color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0 16px 6px; }
.checks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); }
.checks li svg { width: 18px; height: 18px; color: var(--green-ink); flex: none; }
.checks li > span:last-child { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
.checks li.rec svg { color: var(--faint); }
.checks li.is-running svg { color: var(--faint); animation: ds-spin 1s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.cf { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--hair); flex-wrap: wrap; align-items: center; }
.states3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px 16px; }
.states3 > div { padding: 12px; border-radius: 10px; background: #F7F7F7; }
.states3 > div.is-now { background: var(--green-soft); }
.states3 b { display: block; color: var(--ink); margin-bottom: 2px; }
.states3 span { color: var(--muted); font-size: 12.5px; }
.paste { margin: 10px 16px 0; padding: 12px 14px; border-radius: 10px; background: #F7F7F7; color: var(--ink); font-size: 13px; line-height: 1.6; }
.paste b { font-weight: 800; }
.urls { list-style: none; margin: 8px 0 0; padding: 0; }
.urls li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--hair); }
.urls li b { color: var(--ink); display: block; }
.urls li span { color: var(--muted); font-size: 12.5px; }
.urls li .mono { color: var(--ink); font-size: 12.5px; }

/* timeline of events (history) */
.hist { list-style: none; margin: 8px 0 0; padding: 0 16px 14px; }
.hist li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
.hist li::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: -8px; width: 2px; background: var(--hair); }
.hist li:last-child::before { display: none; }
.hist i { width: 12px; height: 12px; margin: 4px 3px 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C9C9C9; }
.hist li.ok i { background: var(--green); box-shadow: none; }
.hist li.att i { background: #F5C451; box-shadow: none; }
.hist b { color: var(--ink); }
.hist span { display: block; color: var(--muted); font-size: 12.5px; }
.hist time { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ---- reviews ---------------------------------------------------------------------- */
.score { display: flex; align-items: center; gap: 14px; padding: 16px 16px 8px; }
.score big { font-size: 34px; line-height: 1; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.rsegs { display: flex; gap: 4px; }
.rsegs i { position: relative; width: 26px; height: 26px; border-radius: 7px; background: #E3E7EB; overflow: hidden; }
.rsegs i::after { content: ""; position: absolute; inset: 0; width: var(--f, 100%); background: var(--green); }
.rsegs i.o::after { width: 0; }
/* The share of the last segment, in steps of 5 %: a class, never a style attribute — the dashboards run under
   style-src 'self' (WR-F003, backend docs/DASHBOARDS.md § 1.6, rule 1). */
.rsegs i.f5 { --f: 5%; }
.rsegs i.f10 { --f: 10%; }
.rsegs i.f15 { --f: 15%; }
.rsegs i.f20 { --f: 20%; }
.rsegs i.f25 { --f: 25%; }
.rsegs i.f30 { --f: 30%; }
.rsegs i.f35 { --f: 35%; }
.rsegs i.f40 { --f: 40%; }
.rsegs i.f45 { --f: 45%; }
.rsegs i.f50 { --f: 50%; }
.rsegs i.f55 { --f: 55%; }
.rsegs i.f60 { --f: 60%; }
.rsegs i.f65 { --f: 65%; }
.rsegs i.f70 { --f: 70%; }
.rsegs i.f75 { --f: 75%; }
.rsegs i.f80 { --f: 80%; }
.rsegs i.f85 { --f: 85%; }
.rsegs i.f90 { --f: 90%; }
.rsegs i.f95 { --f: 95%; }
.rsegs--s i { width: 16px; height: 16px; border-radius: 5px; }
.score small { display: block; margin-top: 4px; color: var(--muted); }
.dist { list-style: none; margin: 4px 0 0; padding: 0 16px; }
.dist li { display: grid; grid-template-columns: 14px 1fr 44px; align-items: center; gap: 10px; padding: 3px 0; color: var(--muted); font-size: 12px; }
.dist li i { height: 7px; border-radius: 999px; background: #EDEDED; overflow: hidden; }
.dist li i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: inherit; }
.dist li span:last-child { text-align: right; }
.dist label { display: contents; cursor: pointer; }
.dist li:has(label) { margin: 0 -6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.dist li:has(label):hover { background: #F7F7F7; }
.dist li:has(input:checked) { background: #EDEDED; color: var(--ink); font-weight: 700; }
.dist li:has(input:focus-visible) { outline: 2px solid var(--green-ink); outline-offset: 1px; }
.measures { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 16px 16px; border-radius: 10px; background: #F7F7F7; }
.measures div { padding: 10px 12px; border-right: 1px solid #EBEBEB; }
.measures div:last-child { border-right: 0; }
.measures b { display: block; color: var(--ink); font-size: 16px; font-weight: 800; }
.measures span { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }
.rev { padding: 16px; border-top: 1px solid var(--hair); }
.rev:first-child { border-top: 0; }
.rev__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev__top .who2 { color: var(--ink); font-weight: 700; }
.rev__top .who2 small { color: var(--muted); font-weight: 500; }
.rev__top time { margin-left: auto; color: var(--faint); font-size: 12px; }
.rev h3 { margin: 8px 0 4px; font-size: 14.5px; color: var(--ink); font-weight: 800; }
.rev p.body { color: var(--body); max-width: 720px; }
.rev__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rev__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.reply { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: #F7F7F7; }
.reply b { display: block; color: var(--ink); font-size: 12.5px; }
.reply small { color: var(--faint); font-size: 12px; }
.replyform { margin-top: 12px; }
.replyform textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid #D4D4D4; border-radius: 10px; background: #fff; resize: vertical; }
.replyform .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* ---- index tables --------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; padding: 10px 12px 0; flex-wrap: wrap; }
.tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; color: var(--muted); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: #EBEBEB; color: var(--ink); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px 0; }
.toolbar .tabs { padding: 0; }
.toolbar .grow { flex: 1; }
.find { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #D4D4D4; background: #fff; min-width: 220px; }
.find svg { width: 15px; height: 15px; color: var(--faint); }
.find input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; height: 100%; }
.tablewrap { position: relative; overflow-x: auto; } /* relative: a visually hidden header must not escape the scroll box */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 12px; background: #F7F7F7; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #FAFAFA; }
tbody tr[data-href] { cursor: pointer; }
td.id { font-weight: 800; color: var(--ink); white-space: nowrap; }
td.id a { text-decoration: none; }
td.id a:hover { text-decoration: underline; }
td .sub { display: block; color: var(--faint); font-size: 12px; font-weight: 500; }
td.amt { font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
th.amt { text-align: right; }
td.nw { white-space: nowrap; }
.items { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.items svg.p { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.items b { color: var(--ink); font-weight: 700; display: block; line-height: 1.2; }
.msg { max-width: 230px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.turn--you { color: var(--ink); }
.turn--you::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.turn--them { color: var(--faint); }
td .b { height: 28px; }
td.act { text-align: right; white-space: nowrap; }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; color: var(--faint); font-size: 12px; border-top: 1px solid var(--hair); }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink); margin-bottom: 2px; }

/* ---- fees ------------------------------------------------------------------------- */
.lines { list-style: none; margin: 10px 16px 0; padding: 0; }
.lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.lines li b { color: var(--ink); text-align: right; }
.lines li.tot { border-bottom: 0; font-size: 15px; }
.lines li.tot b { font-size: 18px; font-weight: 800; }
.tiers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 16px 0; }
.tiers div { padding: 8px 6px; border-radius: 8px; background: #F7F7F7; text-align: center; }
.tiers b { display: block; color: var(--ink); font-weight: 800; }
.tiers span { color: var(--faint); font-size: 11px; }
.plan3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px 0; }
.plan3 div { padding: 12px; border-radius: 10px; background: #F7F7F7; }
.plan3 b { display: block; font-size: 20px; color: var(--ink); font-weight: 800; }
.plan3 span { color: var(--muted); font-size: 12.5px; }
.steps4 { list-style: none; margin: 10px 16px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: s; }
.steps4 li { padding: 10px 12px; border-radius: 10px; background: #F7F7F7; counter-increment: s; }
.steps4 li::before { content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; margin-bottom: 6px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; }
.steps4 b { display: block; color: var(--ink); }
.steps4 span { color: var(--muted); font-size: 12.5px; }

/* ---- banner ---------------------------------------------------------------------- */
.preview { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 12px 16px 0; padding: 18px; border-radius: 10px; background: repeating-linear-gradient(45deg, #FAFAFA 0 10px, #F4F4F4 10px 20px); }
.preview--dark { background: repeating-linear-gradient(45deg, #1F1F1F 0 10px, #242424 10px 20px); }
.wbadge { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E3E3E3, 0 6px 16px -10px rgba(26,26,26,.35); color: var(--ink); font-weight: 800; font-size: 13px; white-space: nowrap; }
.wbadge img { width: 24px; height: 24px; }
.wbadge .ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--ink); }
.wbadge .ok svg { width: 11px; height: 11px; }
.wbadge .vp { margin-left: 4px; color: var(--muted); font-weight: 600; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.wbadge--state { color: var(--amber-ink); }
.wscore { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E3E3E3; }
.wscore b { font-size: 20px; color: var(--ink); font-weight: 800; }
.wscore .rsegs i { width: 18px; height: 18px; border-radius: 5px; }
.wscore small { color: var(--muted); font-size: 11.5px; display: block; }
.snippet { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: #1A1A1A; color: #D4F9E6; overflow-x: auto; white-space: nowrap; }
.fmts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 0; }
.fmt { position: relative; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; border: 0; }
.fmt:hover { box-shadow: inset 0 0 0 1px #BDBDBD; }
.fmt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.fmt__art { display: grid; place-items: center; height: 92px; border-radius: 8px; background: repeating-linear-gradient(45deg, #FAFAFA 0 8px, #F4F4F4 8px 16px); overflow: hidden; }
.fmt b { color: var(--ink); font-size: 13px; }
.fmt span { color: var(--muted); font-size: 12px; }
.fmt__art .mini { transform-origin: center; }
.stage { display: grid; place-items: center; min-height: 170px; margin: 12px 16px 0; padding: 18px; border-radius: 10px; background: repeating-linear-gradient(45deg, #FAFAFA 0 10px, #F4F4F4 10px 20px); }
.stage--dark { background: repeating-linear-gradient(45deg, #1F1F1F 0 10px, #242424 10px 20px); }
.stage .nothing { color: var(--muted); font-size: 12.5px; text-align: center; max-width: 320px; }
.stage--dark .nothing { color: #A8A8A8; }
/* the formats, drawn in HTML */
.bn { display: inline-flex; align-items: center; gap: 10px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #E3E3E3; font-weight: 700; }
.bn--dark { background: #121212; color: #F4F4F4; box-shadow: 0 0 0 1px #333; }
.bn--dark small { color: #B5B5B5 !important; }
.bn img { width: 26px; height: 26px; }
.bn .wm { font-weight: 800; letter-spacing: -.01em; }
.bn .wm { display: inline-flex; align-items: center; gap: 6px; }
.bn__ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--ink); }
.bn__ok svg { width: 11px; height: 11px; }
.bn small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.bn .rsegs i { width: 14px; height: 14px; border-radius: 4px; }
.bn--lockup { padding: 10px 14px; }
.bn--inline { padding: 6px 12px 6px 8px; border-radius: 999px; }
.bn--card { display: grid; justify-items: start; gap: 6px; padding: 12px 14px; }
.bn--strip { width: 100%; justify-content: center; padding: 10px 14px; border-radius: 8px; }
.bn--tile { display: grid; place-items: center; gap: 4px; width: 150px; height: 150px; padding: 12px; text-align: center; }
.bn--tile big { font-size: 30px; font-weight: 800; line-height: 1; }
.bn--metrics { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; padding: 12px 16px; }
.bn--metrics b { display: block; font-size: 16px; }
.bn--product { padding: 6px 10px; border-radius: 8px; }
.cfg { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 12px 16px 0; }
.cfg label { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* ---- connections ------------------------------------------------------------------ */
.conn { list-style: none; margin: 8px 0 0; padding: 0; }
.conn li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.conn .logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: 900; color: #fff; font-size: 15px; flex: none; }
.conn .logo--mute { background: #E3E3E3; color: var(--ink); }
.conn div.nm { min-width: 0; flex: 1; }
.conn b { display: block; color: var(--ink); }
.conn small { color: var(--muted); }
.conn .acts { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.reads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 16px; }
.reads > div { padding: 12px; border-radius: 10px; background: #F7F7F7; }
.reads b { display: block; color: var(--ink); margin-bottom: 4px; }
.reads ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }

/* ---- forms ---------------------------------------------------------------------- */
.form { display: grid; gap: 12px; padding: 12px 16px 16px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.field > span em { font-style: normal; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #D4D4D4; border-radius: 8px; background: var(--field); }
.field textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: #8A8A8A; box-shadow: 0 0 0 3px rgba(4,120,87,.14); }
.field input[aria-invalid="true"] { border-color: var(--red-ink); box-shadow: 0 0 0 3px var(--red-soft); }
.field small { color: var(--muted); font-size: 12px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.fgrid .wide { grid-column: 1 / -1; }
.frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.frow .grow { flex: 1; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hair); }
.srow b { display: block; color: var(--ink); }
.srow span.d { display: block; color: var(--muted); font-size: 12.5px; }
.srow .v { color: var(--ink); font-weight: 600; }
.formulas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 0; }
.formula { position: relative; display: grid; gap: 2px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; cursor: pointer; }
.formula input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formula:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.formula:has(input:focus-visible) { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.formula b { color: var(--ink); font-size: 15px; }
.formula span { color: var(--muted); font-size: 12.5px; }
.formula .badge { justify-self: start; margin-top: 4px; }
.toggle { position: relative; display: inline-flex; flex: none; width: 36px; height: 20px; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle i { position: absolute; inset: 0; border-radius: 999px; background: #D4D4D4; transition: background .15s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.toggle input:checked + i { background: var(--ink); }
.toggle input:checked + i::after { transform: translateX(16px); }
.toggle input:disabled { pointer-events: none; }
.toggle input:disabled + i { opacity: .5; }
.toggle input:focus-visible + i { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.setgrid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.setnav { position: sticky; top: 78px; display: grid; gap: 2px; }
.setnav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--body); font-weight: 600; text-decoration: none; }
.setnav a:hover { background: #E3E3E3; text-decoration: none; }
.setsec { scroll-margin-top: 76px; }
/* Une demande ouverte par son ancre (#rr_…) ne passe pas sous la barre du haut, qui est collante. */
[id^="rr_"] { scroll-margin-top: 76px; }
.setsec + .setsec { margin-top: 16px; }

/* ---- request detail (Shopify order-detail layout) ------------------------------------------ */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.detail__side { display: grid; gap: 16px; }
.detail__side .card + .card, .detail__main > .card + .card { margin-top: 0; }
.detail__main { display: grid; gap: 16px; min-width: 0; }
.lineitems { list-style: none; margin: 8px 0 0; padding: 0; }
.lineitems li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--hair); }
.lineitems svg.p { width: 44px; height: 44px; border-radius: 9px; }
.lineitems b { display: block; color: var(--ink); }
.lineitems span { color: var(--muted); font-size: 12.5px; }
.lineitems .amt { color: var(--ink); font-weight: 700; text-align: right; white-space: nowrap; }
.lineitems li.off { opacity: .55; }
.reqtotal { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hair); font-weight: 700; color: var(--ink); }
.reqtotal span { color: var(--muted); font-weight: 600; }

/* the conversation: a vertical timeline of events and messages */
.tl { list-style: none; margin: 10px 0 0; padding: 0 16px; }
.ev { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.ev::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: -8px; width: 2px; background: var(--hair); }
.ev:last-child::before { display: none; }
.ev__rail { display: grid; justify-items: center; }
.ev__rail i { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C9C9C9; }
.ev.is-key .ev__rail i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gray-soft); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.av--store { border-radius: 9px; background: var(--ink); color: var(--green); }
.av--store svg { width: 16px; height: 16px; }
.ev__body { min-width: 0; }
.ev__body > p { color: var(--body); }
.ev__body > p b { color: var(--ink); }
.ev time { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.ev--msg .meta { display: flex; gap: 8px; align-items: baseline; }
.ev--msg .meta b { color: var(--ink); }
.ev--msg .meta time { display: inline; margin: 0; }
.bubble { margin-top: 4px; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: #F4F4F4; color: var(--ink); max-width: 560px; }
.ev--store .bubble { background: var(--green-soft); }
.media { display: grid; grid-template-columns: repeat(4, minmax(0, 88px)); gap: 6px; margin-top: 8px; }
.tile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #F4F4F4; box-shadow: inset 0 0 0 1px var(--hair); }
.tile > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; }
.tile__play svg { width: 12px; height: 12px; margin-left: 2px; }
.tile__dur { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10.5px; }
.addrbox { display: grid; gap: 2px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; max-width: 420px; }
.addrbox .l { color: var(--muted); font-size: 12px; font-weight: 700; }
.addrbox .co { color: var(--ink); font-weight: 800; }
.addrbox p { color: var(--ink); }
.addrbox small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; font-size: 12.5px; }
.pill svg { width: 13px; height: 13px; }

/* composer: saved replies, message, and the return address when accepting */
.composer { margin: 12px 16px 16px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px #D4D4D4; background: #fff; }
.saved { display: flex; flex-wrap: wrap; gap: 6px; }
.saved button { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: #F1F1F1; font-weight: 700; font-size: 12.5px; color: var(--body); }
.saved button:hover { background: #E3E3E3; color: var(--ink); }
.saved button:disabled { opacity: .45; cursor: default; }
.composer__acc { display: none; align-items: center; gap: 8px; margin-top: 10px; }
.composer.is-accept .composer__acc { display: flex; }
.composer textarea { display: block; width: 100%; min-height: 64px; margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: #F7F7F7; resize: vertical; }
.composer textarea:focus { outline: 0; box-shadow: 0 0 0 2px rgba(4,120,87,.25); }
.composer__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.composer__bar .grow { flex: 1; }
.composer .send-acc { display: none; }
.composer.is-accept .send-acc { display: inline; }
.composer.is-accept .send-rep { display: none; }
.addr { display: none; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.composer.is-accept .addr { display: grid; }
.addr__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.addr__head span { color: var(--ink); font-weight: 700; }
.addr__head em { font-style: normal; font-weight: 500; color: var(--muted); }
.addr__view { padding: 10px 12px; border-radius: 10px; background: #F7F7F7; color: var(--ink); }
.addr__view .co { font-weight: 800; }
.addr__form { display: none; }
.addr.is-editing .addr__form { display: grid; }
.addr.is-editing .addr__view { display: none; }
.addr > small { color: var(--muted); font-size: 12px; }
.addr > small a { color: var(--ink); font-weight: 700; }

/* the return shipment and its tracking view (D67, D69, D70) */
.ship__head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 0; }
.ship__mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); }
.ship__mark svg { width: 18px; height: 18px; }
.ship__head p { color: var(--muted); font-size: 12.5px; }
.ship__head h2 { margin: 1px 0 0; font-size: 14px; color: var(--ink); font-weight: 800; }
.ship__body { padding: 12px 16px 16px; }
.ship__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ship__bar .grow { flex: 1; }
.demo { margin-top: 12px; padding: 12px; border-radius: 12px; background: repeating-linear-gradient(45deg, #FBFBFB 0 10px, #F6F6F6 10px 20px); outline: 1px dashed #C9C9C9; outline-offset: -1px; }
.demo__k { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.demo p { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.carriers { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.carriers legend { padding: 0; margin-bottom: 6px; color: var(--ink); font-weight: 700; font-size: 12.5px; }
.carriers__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.carrier { position: relative; display: block; min-width: 0; }
.carrier input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.carrier__tile { display: grid; place-items: center; height: 56px; padding: 0 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.carrier:hover .carrier__tile { box-shadow: inset 0 0 0 1px #BDBDBD; }
.carrier input:checked + .carrier__tile { box-shadow: inset 0 0 0 2px var(--ink); }
.carrier input:focus-visible + .carrier__tile { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.brandlogo { display: block; width: auto; max-width: 100%; height: 26px; }
.brandlogo--ups { height: 38px; }
.brandlogo--usps { height: 18px; }
.brandlogo--dhl, .brandlogo--rm { height: 22px; }
.others { display: inline-flex; align-items: center; gap: 5px; color: var(--body); font-weight: 700; font-size: 13px; }
.others svg { width: 14px; height: 14px; }
.entry { display: none; margin-top: 10px; }
.entry.is-on { display: grid; gap: 8px; }
.entry .field { display: none; }
.entry[data-kind="number"] [data-field="number"], .entry[data-kind="url"] [data-field="url"] { display: grid; }
.entry .err { color: var(--red-ink); font-size: 12.5px; }
.track { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; overflow: hidden; }
.track__top { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.track__logo { display: grid; place-items: center; flex: none; min-width: 44px; }
.track__logo .brandlogo { height: 18px; }
.track__logo .brandlogo--ups { height: 28px; }
.track__logo .brandlogo--usps { height: 13px; }
.track__mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--gray-soft); color: var(--muted); }
.track__mark svg { width: 16px; height: 16px; }
.track__id { min-width: 0; }
.track__id b { display: block; color: var(--ink); overflow-wrap: anywhere; }
.track__id .mono { display: block; color: var(--muted); overflow-wrap: anywhere; white-space: normal; }
.route { position: relative; padding: 38px 13px 14px; }
.route__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.route__steps::before, .route__steps::after { content: ""; position: absolute; top: 5px; left: 12.5%; height: 2px; border-radius: 2px; }
.route__steps::before { right: 12.5%; background: var(--hair); }
.route__steps::after { width: calc(75% * var(--p)); background: var(--green); animation: ds-route-fill .9s ease both; }
.route__steps li { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0 4px; text-align: center; }
.route__steps i { display: block; width: 12px; height: 12px; margin-bottom: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C9C9C9; }
.route__steps li.is-done i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.route__steps b { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.route__steps li.is-done b { color: var(--ink); }
.route__steps span { font-size: 11.5px; line-height: 1.35; color: var(--faint); }
.route__truck { position: absolute; top: 4px; left: calc(13px + (100% - 26px) * (.125 + .75 * var(--p))); z-index: 2; display: grid; place-items: center; width: 32px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgba(25,28,26,.45); transform: translateX(-50%); animation: ds-route-drive .9s ease both; }
.route__truck::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 8px; height: 8px; border-radius: 1px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.route__truck svg { position: relative; z-index: 1; width: 18px; height: 18px; }
@keyframes ds-route-drive { from { left: calc(13px + (100% - 26px) * (.125 + .75 * var(--p0))); } }
@keyframes ds-route-fill { from { width: calc(75% * var(--p0)); } }
@media (prefers-reduced-motion: reduce) { .route__truck, .route__steps::after { animation: none; } }
.scans { list-style: none; margin: 0; padding: 4px 13px 10px; border-top: 1px solid var(--hair); }
.scans li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; color: var(--body); font-size: 12.5px; }
.scans li time { color: var(--faint); white-space: nowrap; }
.track__out { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 13px 12px; }
.track--blind .track__out { padding-top: 4px; }
.track__note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.track__note svg { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--faint); }
.mini { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px #D4D4D4; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mini:hover { background: #F4F4F4; text-decoration: none; }
.mini svg { width: 13px; height: 13px; }
.clock { display: flex; gap: 10px; align-items: flex-start; }
.clock svg { width: 18px; height: 18px; flex: none; color: var(--muted); margin-top: 1px; }
.clock b { display: block; color: var(--ink); }
.clock span { color: var(--muted); font-size: 12.5px; }

/* ---- dialogs (sheets) ------------------------------------------------------------------ */
dialog.sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--body); box-shadow: var(--pop-shadow); }
dialog.sheet::backdrop { background: rgba(15,17,21,.45); }
dialog.sheet--side { margin: 0 0 0 auto; width: min(560px, 100vw); height: 100vh; max-height: 100vh; border-radius: 0; }
.sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); background: #fff; }
.sheet__head p { color: var(--muted); font-size: 12.5px; }
.sheet__head h2 { margin: 1px 0 0; font-size: 16px; color: var(--ink); font-weight: 800; }
.sheet__head .x { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.sheet__head .x:hover { background: var(--gray-soft); color: var(--ink); }
.sheet__head .x svg { width: 16px; height: 16px; }
.sheet__body { padding: 14px 16px 18px; }
.sheet__body .card { box-shadow: inset 0 0 0 1px var(--line); }
.sheet__body h3 { margin: 16px 0 6px; font-size: 13px; color: var(--ink); font-weight: 800; }
.sheet__body h3:first-child { margin-top: 0; }
.choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: 6px; color: var(--ink); font-weight: 700; font-size: 12.5px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.choice input { margin: 0; accent-color: #0F1115; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.choice b { color: var(--ink); }
.choice span { display: block; color: var(--muted); font-size: 12px; }
.viewer { display: grid; place-items: center; aspect-ratio: 1; max-height: 60vh; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #F4F4F4; }
.viewer svg { width: 100%; height: 100%; }
.secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #1A1A1A; color: #D4F9E6; overflow-x: auto; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 12px; border-radius: 10px; background: #F7F7F7; }
.codes code { color: var(--ink); font-size: 13px; }

/* ---- toast ------------------------------------------------------------------------ */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; max-width: min(520px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 10px; background: #1A1A1A; color: #fff; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.foot { margin-top: 26px; color: var(--faint); font-size: 12px; text-align: center; }
.foot a { color: var(--muted); }

/* ---- the four generic states (WR-F004, backend docs/DASHBOARDS.md § 1.7) ------------------- */
/* Empty (.empty, above), loading, failed with a retry, and denied. HTMX's own indicator sheet is
   switched off on app.werefund.com (includeIndicatorStyles: false — the policy refuses any inline
   <style>), so the indicator is styled here: hidden until its request runs, and the zone that loads
   says so, never a blank. */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; color: var(--muted); }
.loading svg { width: 18px; height: 18px; animation: ds-spin 1s linear infinite; }
.failed { padding: 22px 16px; text-align: center; color: var(--muted); }
.failed b { display: block; color: var(--red-ink); margin-bottom: 2px; }
.failed .b { margin-top: 12px; }
.denied { padding: 26px 16px; text-align: center; color: var(--muted); }
.denied b { display: block; color: var(--ink); margin-bottom: 2px; }
.denied .b { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .loading svg { animation: none; } }

/* ---- narrower screens ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid, .grid--3 { grid-template-columns: 1fr; }
  .setup { grid-template-columns: 1fr; }
  .setup__r { display: none; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .brand b { display: none; }
  .who span { display: none; }
  .who { padding: 0 4px; }
  .shell { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .side { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 8px 10px; gap: 4px; }
  .side h4 { display: none; }
  .side .sp { margin-top: 0; }
  .side a { flex: none; }
  .main { padding: 16px 12px 40px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .measures { grid-template-columns: 1fr; }
  .measures div { border-right: 0; border-bottom: 1px solid #EBEBEB; }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .q kbd { display: none; }
  .states3, .plan3, .reads { grid-template-columns: 1fr; }
  .steps4 { grid-template-columns: 1fr 1fr; }
  .setgrid { grid-template-columns: minmax(0, 1fr); }
  .setnav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .setnav a { flex: none; background: #fff; box-shadow: var(--card-shadow); }
  .carriers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formulas { grid-template-columns: 1fr; }
  .kv, .kv--wide { grid-template-columns: minmax(0, 1fr); }
  .kv dd { border-top: 0; padding-top: 0; }
  .pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
  .find { min-width: 0; flex: 1; }
}
@media (max-width: 560px) {
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fmts { grid-template-columns: minmax(0, 1fr); }
  .media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route { padding-inline: 4px; }
  .route__truck { left: calc(4px + (100% - 8px) * (.125 + .75 * var(--p))); }
  .route__steps b { font-size: 11.5px; }
  .ph h1 { font-size: 19px; }
  .bn--metrics { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  @keyframes ds-route-drive { from { left: calc(4px + (100% - 8px) * (.125 + .75 * var(--p0))); } }
}

/* ==========================================================================
   Utilities (WR-F003-b): what the scripts used to write as style attributes,
   which the CSP of app.werefund.com refuses (style-src 'self', nothing inline).
   !important keeps the precedence an inline style had over every selector.
   ========================================================================== */
.u-mt0 { margin-top: 0 !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-mb12 { margin-bottom: 12px !important; }
.u-m0 { margin: 0 !important; }
.u-p0 { padding: 0 !important; }
.u-fs20 { font-size: 20px !important; }
.u-fs24 { font-size: 24px !important; }
.u-inline { display: inline !important; }
.u-ink { color: var(--ink) !important; }
.u-muted { color: var(--muted) !important; }
.u-fill { overflow-wrap: anywhere !important; min-width: 0 !important; flex: 1 !important; }
/* The truck of a tracking view stands on one of four steps: one class per step, the values the script wrote. */
.route { --p: 0.0000; --p0: 0.0000; }
.route--at1 { --p: 0.3333; }
.route--at2 { --p: 0.6667; }
.route--at3 { --p: 1.0000; }
.route--from1 { --p0: 0.3333; }
.route--from2 { --p0: 0.6667; }
.route--from3 { --p0: 1.0000; }