/* Shopkeeper "back office" theme (issue #60, mockup B).
   One stylesheet, no framework. Layout: dark sidebar + light work area,
   collapsing to a top bar under 860px. */

/* #226: single source of truth for the theme's accent green. Introduced
   surgically for the thumbnail hover treatment below — the many existing
   hard-coded #35b26f values elsewhere in this file are unrelated to this
   fix and are left as-is. */
:root { --accent: #35b26f; }

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: #f7f8fa; color: #232a33;
       font: 14px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, "DejaVu Sans Mono", monospace; }
a { color: #1e7a4c; }
h1 { font-size: 19px; margin: 14px 0 4px; }
h2 { font-size: 15px; margin: 22px 0 6px; }
h3 { font-size: 14px; margin: 0 0 4px; }
code { background: #eef1f4; border-radius: 4px; padding: 0 4px; font-size: .92em; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.side { background: #1c232e; color: #c8d0da; padding: 18px 0;
        display: flex; flex-direction: column; }
.side-foot { margin: 8px 18px 0; padding: 8px 0 2px; color: #6d7887; font-size: 11px;
             letter-spacing: .04em; border-top: 1px solid rgba(255,255,255,.09); }
.side-head { display: flex; align-items: center; justify-content: space-between;
             padding: 0 10px 14px 0; }
.side .brand { display: block; padding: 0 0 0 18px; color: #fff; text-decoration: none;
               font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.side .brand small { display: block; color: #6d7887; font-weight: 400; font-size: 11px;
                     letter-spacing: .08em; }
.side .toggle { flex: none; width: 24px; height: 24px; margin-right: 8px; padding: 0;
                display: flex; align-items: center; justify-content: center;
                background: transparent; border: 1px solid rgba(255,255,255,.14);
                border-radius: 6px; color: #c8d0da; cursor: pointer; }
.side .toggle:hover { background: #232c39; }
.side .toggle .chev { width: 14px; height: 14px; transition: transform .2s ease; }
.side nav a .nav-ic, .side nav .nav-logout button .nav-ic { width: 16px; height: 16px; flex: none; }
.side .dot { display: none; }
.side nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px;
              padding: 8px 18px; color: #c8d0da; text-decoration: none; font-size: 13.5px;
              white-space: nowrap; }
.side nav a:hover { background: #232c39; }
.side nav a.on { background: #2e3948; color: #fff; box-shadow: inset 3px 0 0 #35b26f; }
.side .n { font: 11px/1.6 ui-monospace, monospace; background: #2e3948; border-radius: 4px;
           min-width: 20px; text-align: center; padding: 0 5px; color: #9fb3c8; }
.side .n.hot { background: #35b26f; color: #08130c; font-weight: 700; }
.side .n.warn { background: #e8b931; color: #241a00; font-weight: 700; }
.side .sect { display: block; margin-top: 14px; padding: 6px 18px 2px; font-size: 10.5px;
              letter-spacing: .12em; color: #6d7887; text-transform: uppercase; }
.side nav a.ext { justify-content: flex-start; }
.side nav a.ext svg { width: .85em; height: .85em; flex: none; }
#sidenav .nav-logout button { all: unset; cursor: pointer; display: flex;
  align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 18px; color: #c8d0da; font-size: 13.5px; }
#sidenav .nav-logout button:hover { background: #232c39; }
.main { padding: 0 28px 28px; min-width: 0; }

@media (min-width: 861px) {
  html.nav-collapsed .shell { grid-template-columns: 56px 1fr; }
  html.nav-collapsed .side .brand { display: none; }
  html.nav-collapsed .side-head { justify-content: center; padding: 0 0 14px; }
  html.nav-collapsed .side .toggle .chev { transform: rotate(180deg); }
  html.nav-collapsed .side .label,
  html.nav-collapsed .side nav .nav-logout button .label,
  html.nav-collapsed .side .sect,
  html.nav-collapsed .side-foot { display: none; }
  html.nav-collapsed .side nav a,
  html.nav-collapsed .side nav .nav-logout button { justify-content: center; padding: 9px 0; position: relative; }
  html.nav-collapsed .side .n { display: none; }
  html.nav-collapsed .side .dot.hot { display: block; position: absolute; top: 8px; right: 14px;
      width: 7px; height: 7px; border-radius: 50%; background: #35b26f; }
}

/* ── pipeline status strip ─────────────────────────────────────────────── */
.strip { display: flex; align-items: center; gap: 8px; margin: 0 -28px 18px; padding: 8px 28px;
         background: #eef1f4; border-bottom: 1px solid #d5dae1; font-size: 12.5px;
         color: #55606d; flex-wrap: wrap; }
.strip b { color: #232a33; }
.strip .detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.strip .spacer { flex: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #98a2ae; flex: none; }
.dot.live { background: #35b26f; }
.dot.holding, .dot.waiting { background: #e0a930; }

/* ── shared bits ───────────────────────────────────────────────────────── */
.provenance { color: #55606d; font-size: 12.5px; }
.sub { color: #55606d; font-size: 12.5px; margin: 0 0 16px; }
.card { background: #fff; border: 1px solid #d5dae1; border-radius: 8px;
        padding: 14px 16px; margin: 12px 0; }
.card.live { border-color: #35b26f; background: #f4fbf7; }
@keyframes primary-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 61, 0)); }
  50% { filter: drop-shadow(0 0 5px rgba(255, 200, 61, .9)); }
}
@keyframes primary-sparkle {
  0%, 50%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  62% { opacity: 1; transform: scale(1) rotate(20deg); }
  74% { opacity: 0; transform: scale(.3) rotate(40deg); }
}
.callout { border: 1px solid #e0a930; background: #fdf6e3; border-radius: 8px;
           padding: 10px 16px; margin: 0 0 16px; }
/* posted items are read-only (#72): one calm banner states the rule once, a
   per-card badge is the quiet reminder. Editing happens on Facebook. */
.ro-banner { border: 1px solid #c7d4e5; background: #eef4fb; color: #33465e;
             border-radius: 8px; padding: 10px 16px; margin: 0 0 16px; }
.ro-banner b { color: #223; }
.badge { display: inline-block; background: #eef1f4; color: #445; border-radius: 999px;
         padding: 1px 9px; font-size: 11px; }
.pill { display: inline-block; font-weight: 700; font-size: 10.5px; line-height: 1.8;
        padding: 0 9px; border-radius: 999px; }
.pill.over { background: #fdf0d3; color: #8a6100; border: 1px solid #eed9a4; }
.pill.def { background: #e2f3ea; color: #1e7a4c; border: 1px solid #bfe3d0; }
.error { color: #b3261e; font-weight: 600; }
img.thumb { max-width: 150px; border-radius: 6px; margin: 2px; }
/* item page (#143): each photo spans the full column width, with big overlay
   buttons to rotate or remove it — sized for older eyes and fingers. */
.thumbs-full { display: flex; flex-direction: column; gap: 12px; }
.thumbs-full img.thumb { display: block; width: 100%; max-width: none; margin: 0; }
/* Reporting page (#74): scope tabs, totals bar, inline-cost P&L table. */
.rpt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.rpt-bar .spacer { flex: 1; }
.rpt-bar .tabs { display: inline-flex; border: 1px solid #c3cad3; border-radius: 7px; overflow: hidden; }
.rpt-bar .tab { padding: 6px 14px; color: #55606d; text-decoration: none; font-size: 13px;
                border-left: 1px solid #e4e8ed; }
.rpt-bar .tab:first-child { border-left: 0; }
.rpt-bar .tab.on { background: #2e3948; color: #fff; }
.btn-like { display: inline-block; font: 600 12.5px system-ui, sans-serif; padding: 7px 16px;
            border-radius: 6px; border: 1px solid #1e7a4c; background: #1e7a4c; color: #fff;
            text-decoration: none; }
.btn-like:hover { background: #176440; }
.rpt-totals { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
.rpt-totals span { color: #55606d; font-size: 13px; }
.rpt-totals b { color: #232a33; font-size: 15px; }
.pos { color: #1e7a4c; }
.neg { color: #b3261e; }
.rpt-scroll { overflow-x: auto; }
table.rpt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rpt th, table.rpt td { padding: 7px 10px; border-bottom: 1px solid #eef1f4; text-align: left;
                             white-space: nowrap; vertical-align: middle; }
table.rpt th { color: #55606d; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
table.rpt td.num, table.rpt th.num { text-align: right; }
table.rpt td.profit { font-weight: 700; }
table.rpt .thumbcell { width: 46px; }
img.rpt-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; display: block; }
input.cost { width: 84px; text-align: right; margin: 0; padding: 4px 8px; }
input.cost.err { border-color: #b3261e; background: #fbe4e2; }
table.rpt td.rpt-notes { white-space: normal; max-width: 260px; color: #55606d; }

/* Rejected Photos bulk grid (#78): the whole tile is the select target; a top
   toolbar acts on the selection. No per-photo checkboxes — a green ring + corner
   check badge shows what's picked. */
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            position: sticky; top: 0; z-index: 5; }
.bulk-bar .selcount { color: #55606d; font-size: 12.5px; }
.bulk-bar .spacer { flex: 1; }
.bulk-bar button { margin: 0; }
button.danger { background: #fff; color: #b3261e; border-color: #efc4c0; }
button.danger:hover { background: #fbe4e2; }

.status { display: flex; align-items: baseline; gap: 8px; }
.status .dot { align-self: center; background: #35b26f; }
.status.idle .dot { background: #98a2ae; }
.status.holding .dot, .status.waiting .dot { background: #e0a930; }

/* ── forms ─────────────────────────────────────────────────────────────── */
/* Every textual input type shares one look (#198) — password/email/etc. used
   to fall through to browser defaults because only [type=text] was listed. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=url], input:not([type]), textarea, select {
  width: 100%; font: 13.5px system-ui, sans-serif; padding: 7px 10px; margin: 4px 0 10px;
  border: 1px solid #c3cad3; border-radius: 6px; background: #fbfcfd; color: #232a33;
  text-transform: none; letter-spacing: normal; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible { outline: 2px solid #35b26f; outline-offset: 1px; }
button { font: 600 12.5px system-ui, sans-serif; padding: 7px 16px; border-radius: 6px;
         border: 1px solid #2e3948; background: #2e3948; color: #fff; cursor: pointer;
         margin-right: 8px; }
button:hover { background: #232c39; }
button.lite { background: #fff; color: #2e3948; border-color: #c3cad3; }
button.lite:hover { background: #eef1f4; }
button.go { background: #1e7a4c; border-color: #1e7a4c; }
button.go:hover { background: #176440; }
label { font-size: 13px; }
.field label, label.field { display: block; font-size: 11.5px; font-weight: 700; color: #55606d;
        margin: 12px 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.btnrow button, .btnrow select { margin: 0; }
.btnrow select { width: auto; }
.addrow { display: flex; gap: 8px; align-items: center; }
.addrow input { margin: 0; flex: 1; }
.addrow button { flex: none; margin: 0; }
/* Account / admin forms (#198) */
.form-narrow { max-width: 360px; }
.rowform { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.rowform input { margin: 0; width: 150px; }
.rowform button { margin: 0; }
label.chk { display: flex; align-items: center; gap: 7px; margin: 12px 0 2px; }
.ok { color: #1e7a4c; font-weight: 600; }

/* ── "Post to" target picker (#300) ────────────────────────────────────────
   Brand tiles, not checkboxes: the tile itself is the control. Every size is
   a token so Mom Mode scales the whole picker by resetting variables (it used
   to inherit a jumble of unrelated font sizes, which is what made it a mess).
   The real checkbox is clipped rather than display:none — it must still take
   focus and post its value. */
:root { --target-ic: 34px; --target-tile-w: 108px; --target-tile-min: 78px;
        --target-tile-pad: 12px 10px 10px; --target-gap: 10px;
        --target-name: 13px; --target-on: 22px; --target-tip: 13px; }
.targets { border: 0; padding: 0; margin: 14px 0 2px; min-width: 0; }
.targets legend { padding: 0; font-size: 11.5px; font-weight: 700; color: #55606d;
                  text-transform: uppercase; letter-spacing: .06em; }
/* Tiles hold their size on a roomy panel and narrow toward --target-tile-min
   before wrapping — flex wraps on the basis width, which split Mom Mode's big
   tiles into 2 + 1 even where three would have fit (#300). */
.target-grid { display: grid; gap: var(--target-gap); margin-top: 8px;
               grid-template-columns: repeat(auto-fit, minmax(var(--target-tile-min), 1fr)); }
.target-opt { position: relative; font-size: inherit; }
.target-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
                    pointer-events: none; }
.target-tile { position: relative; display: flex; flex-direction: column; align-items: center;
               justify-content: flex-start; gap: 8px; max-width: var(--target-tile-w);
               padding: var(--target-tile-pad); border: 2px solid #d5dae1; border-radius: 10px;
               background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.target-opt:hover .target-tile { border-color: #9aa4b1; }
.target-mark { display: flex; align-items: center; justify-content: center;
               width: var(--target-ic); height: var(--target-ic); }
.target-ic { width: 100%; height: 100%; display: block; }
.target-name { font-size: var(--target-name); font-weight: 700; line-height: 1.2;
               color: #232a33; text-align: center; }
.target-on { position: absolute; top: -1px; right: -1px; width: var(--target-on);
             height: var(--target-on); border-radius: 0 8px 0 10px; background: var(--accent);
             color: #fff; font-size: calc(var(--target-on) * .6); line-height: var(--target-on);
             text-align: center; opacity: 0; transition: opacity .12s; }
.target-opt input:checked + .target-tile { border-color: var(--accent); background: #f1faf4; }
.target-opt input:checked + .target-tile .target-on { opacity: 1; }
.target-opt input:focus-visible + .target-tile { outline: 3px solid var(--accent);
                                                 outline-offset: 2px; }
/* not connected: very dim, and say so on hover (#300) */
.target-opt.off .target-tile { cursor: not-allowed; background: #fbfcfd; border-color: #e8ecf1; }
.target-opt.off:hover .target-tile { border-color: #e8ecf1; }
.target-opt.off .target-mark { opacity: .22; filter: grayscale(1); }
.target-opt.off .target-name { opacity: .3; }
.target-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
              transform: translateX(-50%); background: #232a33; color: #fff; font-weight: 700;
              font-size: var(--target-tip); line-height: 1.2; white-space: nowrap;
              padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
              opacity: 0; pointer-events: none; transition: opacity .12s; }
.target-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px;
                     border: 7px solid transparent; border-top-color: #232a33; }
.target-opt.off:hover .target-tip, .target-opt.off:focus-within .target-tip { opacity: 1; }

/* ── config groups ─────────────────────────────────────────────────────── */
details.group { background: #fff; border: 2px solid #35b26f; border-radius: 8px;
                margin-bottom: 12px; }
details.group summary { list-style: none; display: flex; align-items: center; gap: 10px;
                        padding: 12px 16px; cursor: pointer; }
details.group summary::-webkit-details-marker { display: none; }
details.group summary::before { content: "▸"; color: #35b26f; font-size: 24px; flex: none;
                                width: 28px; line-height: 1; }
details.group[open] summary::before { content: "▾"; }
details.group[open] summary { border-bottom: 1px solid #e4e8ed; }
details.group summary b { font-size: 13.5px; }
details.group summary .hint { color: #8792a0; font-size: 12px; flex: 1; }
details.group .body { padding: 4px 16px 12px; }
/* setting rows: label column, control column, fixed Save column — the
   control and the button occupy different grid cells, so they can't overlap */
.setting { display: grid; grid-template-columns: 280px 1fr 84px; gap: 4px 16px;
           align-items: start; padding: 12px 0; border-bottom: 1px solid #eef1f4; }
.setting:last-child { border-bottom: 0; }
.setting form.edit { display: contents; }
.setting.list { grid-template-columns: 280px 1fr; }
.setting .lab b { display: block; font-size: 13px; }
.setting .lab small { color: #8792a0; font-size: 11.5px; line-height: 1.4; display: block; }
.setting .lab .pill { margin-top: 5px; }
.setting .lab form.reset { display: inline; margin-left: 6px; }
.setting .lab form.reset button { all: unset; color: #1e7a4c; text-decoration: underline;
                                  cursor: pointer; font-size: 11.5px; }
.setting input, .setting select, .setting textarea { margin: 0; }
.setting > form > button, .setting .save { width: 84px; margin: 0; padding: 7px 0; }
.setting .wide { grid-column: 2 / -1; }
.preview-card { grid-column: 2 / -1; border: 1px solid #ddd; border-radius: 8px;
                padding: 10px 14px; margin-top: 4px; background: #fbfcfd; }
.preview-card .cap { display: block; color: #667; font-size: .78em; letter-spacing: .04em;
                     margin-bottom: 6px; text-transform: uppercase; }
.preview-card .desc { color: #333; font-size: .92em; }
.preview-card .foot { color: #223; font-size: .92em; background: #fdf6e3;
                      border-left: 3px solid #e0a930; padding: 6px 10px; margin-top: 8px;
                      border-radius: 0 6px 6px 0; white-space: pre-wrap; }
.listrow { display: flex; justify-content: space-between; align-items: center; gap: 12px;
           padding: 7px 0; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.listrow:last-of-type { border-bottom: 0; }
.listrow form { margin: 0; }
.listrow button { margin: 0; padding: 3px 12px; font-size: 11.5px; }
.listrow .teaser { color: #8792a0; font-size: 12px; }
details.prompt summary.listrow { cursor: pointer; }
details.prompt summary::-webkit-details-marker { display: none; }
details.prompt summary::before { content: "▸"; color: #35b26f; font-size: 18px; flex: none;
                                 width: 24px; line-height: 1; margin-right: 4px; }
details.prompt[open] summary::before { content: "▾"; }
details.prompt .reveal { background: #eef1f4; border-left: 3px solid #35b26f; border-radius: 0 6px 6px 0;
                         padding: 8px 12px; margin: 4px 0 10px; font-size: 12.5px;
                         white-space: pre-wrap; color: #232a33; }
details.prompt .reveal .cap { display: block; color: #55606d; font-size: .8em;
                              letter-spacing: .04em; margin-bottom: 4px; }

/* ── button-styled link (Review Queue card "Open") ───────────────────────── */
a.btn { display: inline-block; font: 600 12.5px system-ui, sans-serif; padding: 7px 16px;
        border-radius: 6px; border: 1px solid #c3cad3; background: #fff; color: #2e3948;
        text-decoration: none; }
a.btn:hover { background: #eef1f4; }
a.btn.go { background: #1e7a4c; border-color: #1e7a4c; color: #fff; }
a.btn.go:hover { background: #176440; }

/* ── item page ─────────────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.panel { background: #fff; border: 1px solid #d5dae1; border-radius: 8px; padding: 16px; }
.comps { font-size: 12.5px; color: #55606d; background: #eef6f1; border: 1px solid #cfe6d9;
         border-radius: 6px; padding: 8px 12px; margin-top: 10px; }
.stub-wrap textarea { margin-bottom: 0; border-bottom-left-radius: 0;
                      border-bottom-right-radius: 0; display: block; }
.stub { display: block; text-transform: none; letter-spacing: normal;
        border: 1px dashed #d0b26a; border-top-style: dashed;
        background: #fdf8ec; padding: 8px 12px; margin: 0 0 10px; font-size: 12px;
        color: #776a4a; border-radius: 0 0 6px 6px; }
.stub .tag { display: inline-block; background: #e0a930; color: #fff; font-size: .78em;
             border-radius: 8px; padding: 1px 8px; margin-right: 8px; letter-spacing: .04em;
             text-transform: uppercase; }
.grid2 { display: grid; grid-template-columns: 160px 1fr; gap: 0 16px; }

/* ── reidentify live progress (#135) ───────────────────────────────────── */
.dim { opacity: .45; filter: saturate(.6); }        /* paired with `inert` */
.pill.run { background: #e3edfb; color: #23508f; border: 1px solid #bdd4f0; }
.ai-steps { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 7px; }
.ai-steps .step { display: flex; align-items: baseline; gap: 9px; font-size: 13px;
                  color: #98a2ae; }
.ai-steps .step .ic { width: 15px; text-align: center; flex: none; }
.ai-steps .step .t { margin-left: auto; font: 11.5px ui-monospace, monospace;
                     color: #98a2ae; padding-left: 9px; }
.ai-steps .step.done { color: #232a33; }
.ai-steps .step.done .ic { color: #1e7a4c; font-weight: 700; }
.ai-steps .step.active { color: #232a33; font-weight: 600; }
.ai-steps .step .detail { color: #55606d; font-weight: 400; }
.spin { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
        border: 2px solid #bdd4f0; border-top-color: #23508f;
        animation: spin 1s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.flash-ok { border: 1px solid #bfe3d0; background: #e2f3ea; color: #1e7a4c;
            border-radius: 7px; padding: 8px 12px; font-size: 13px; font-weight: 600;
            margin: 10px 0 4px; }
.flash-ok small { display: block; color: #37795a; font-weight: 400; margin-top: 2px; }
input.updated, textarea.updated { outline: 2px solid #7fcaa3; outline-offset: -1px;
                                  background: #f4fbf7; }

/* ── activity/event log ────────────────────────────────────────────────── */
table.events { width: 100%; border-collapse: collapse; font-size: .9em; background: #fff;
               border: 1px solid #d5dae1; border-radius: 8px; overflow: hidden; }
table.events td { padding: 5px 10px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
table.events td.t { white-space: nowrap; color: #55606d; }

/* ── responsive: sidebar becomes a top bar, columns stack ──────────────── */
@media (max-width: 860px) {
  .shell { display: block; }
  .side { padding: 10px 0 0; position: sticky; top: 0; z-index: 10; }
  .side .brand { padding: 2px 16px 8px; }
  .side nav { display: flex; overflow-x: auto; padding: 0 10px 10px;
              -webkit-overflow-scrolling: touch; }
  .side nav a, .side nav .nav-logout button { padding: 6px 10px; border-radius: 6px; }
  .side nav a.on { box-shadow: inset 0 -2px 0 #35b26f; }
  .side .sect { display: none; }
  .side-foot { display: none; }         /* no left-nav footer in the collapsed top bar */
  .side .toggle { display: none; }      /* icon-rail collapse is desktop-only (#109) */
  details.group summary .hint { display: none; }
  .main { padding: 0 16px 24px; }
  .strip { margin: 0 -16px 16px; padding: 8px 16px; }
  .strip .detail { max-width: 100%; }
  .setting { grid-template-columns: 1fr 84px; }
  .setting.list { grid-template-columns: 1fr; }
  .setting .lab { grid-column: 1 / -1; }
  .setting .wide, .preview-card { grid-column: 1 / -1; }
  .cols, .grid2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── posted page: notes + mark as sold (#67, mockup B) ─────────────────── */
[hidden] { display: none !important; }  /* survive display:flex on .confirm/.btnrow */
h2.split { border-bottom: 1px solid #d5dae1; padding-bottom: 4px; color: #55606d; }
.sticky { display: block; background: #fdf8ec; border: 1px dashed #d0b26a;
          border-radius: 6px; padding: 8px 12px; margin: 8px 0 10px; }
.sticky .cap { display: block; color: #a08a4f; font-size: 10.5px; font-weight: 700;
               letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.sticky textarea { border: 0; background: transparent; padding: 0; margin: 0;
                   font-size: 12.5px; color: #5c5137; resize: vertical; width: 100%; }
.sticky .hint { color: #b3a179; font-size: 10.5px; }
.confirm { border: 1px solid #e0a930; background: #fdf6e3; border-radius: 6px;
           padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px;
           align-items: center; font-size: 12.5px; margin-top: 10px; }
.confirm button { margin: 0; }
.pill.err { background: #fbe4e2; color: #b3261e; border: 1px solid #efc4c0; }
.sold-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
              background: #1c232e; color: #eef1f4; border-radius: 999px;
              padding: 9px 18px; font-size: 12.5px; z-index: 20;
              box-shadow: 0 8px 24px rgba(28,35,46,.35); max-width: min(92vw, 560px);
              animation: sold-rise .35s cubic-bezier(.2,.9,.3,1.1); }
@keyframes sold-rise { from { transform: translate(-50%, 110px); }
                       to { transform: translate(-50%, 0); } }

/* ── photo lightbox (#65) ──────────────────────────────────────────────── */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw;
                  max-height: 100vh; width: 100vw; height: 100vh; outline: none; }
dialog.lightbox::backdrop { background: rgba(18, 23, 30, .93); }
.lb-stage { position: fixed; inset: 0; display: flex; align-items: center;
            justify-content: center; overflow: hidden; touch-action: none; }
.lb-stage img { max-width: 100vw; max-height: 100vh; object-fit: contain;
                user-select: none; -webkit-user-drag: none; cursor: zoom-in;
                transform-origin: 0 0; touch-action: none; }
.lb-stage img.zoomed { cursor: grab; }
.lb-stage img.dragging { cursor: grabbing; }
.lb-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center;
          gap: 12px; padding: 10px 14px; color: #c8d0da; font-size: 12.5px;
          background: linear-gradient(rgba(18,23,30,.65), transparent); z-index: 2; }
.lb-bar .count { font-family: ui-monospace, monospace; }
.lb-bar .spacer { flex: 1; }
.lb-btn { all: unset; cursor: pointer; color: #e8edf3; width: 40px; height: 40px;
          display: flex; align-items: center; justify-content: center; border-radius: 8px;
          font-size: 21px; line-height: 1; box-sizing: border-box; }
.lb-btn:hover { background: rgba(255,255,255,.12); }
.lb-btn:focus-visible { outline: 2px solid #35b26f; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
          width: 46px; height: 72px; font-size: 26px; }
.lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; }
dialog.lightbox.single .lb-nav { display: none; }
.lb-hint { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center;
           color: #8fa0b3; font-size: 11.5px; z-index: 2; pointer-events: none; }
@media (max-width: 860px) { .lb-hint .desk { display: none; } }
@media (min-width: 861px) { .lb-hint .mob { display: none; } }

/* Notes modal (#169 follow-up): large type for legibility. */
dialog.modal { border: none; border-radius: 12px; padding: 0; width: min(560px, 92vw);
                box-shadow: 0 20px 50px rgba(20,24,31,.28); }
dialog.modal::backdrop { background: rgba(20,24,31,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 20px; border-bottom: 1px solid #d5dae1; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-close { border: none; background: #eef1f4; width: 44px; height: 44px; border-radius: 8px;
               font-size: 15px; cursor: pointer; color: #55606d; padding: 0; line-height: 1;
               display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 18px 20px; }
.modal-body textarea { width: 100%; min-height: 150px; font: 17px/1.5 system-ui, sans-serif;
                        padding: 12px 14px; border: 1px solid #d5dae1; border-radius: 8px;
                        resize: vertical; }
.modal-hint { margin: 8px 2px 0; font-size: 12.5px; color: #55606d; }
.modal-foot { padding: 14px 20px; border-top: 1px solid #d5dae1; display: flex;
              justify-content: flex-end; }
.modal-foot button { min-height: 44px; padding: 10px 18px; }

/* ── feedback widget (#70, mockup B) ───────────────────────────────────── */
/* The launcher floats over the page, so the work area reserves a strip at the
   bottom for it — otherwise it lands on top of the last row of buttons at full
   scroll (#300). Only when the widget is actually rendered. */
:root { --fab-clear: 88px; }
html.has-fab .main { padding-bottom: var(--fab-clear); }
.fb-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; margin: 0;
          box-shadow: 0 4px 14px rgba(0,0,0,.22); font-size: 13.5px; padding: 10px 18px; }
.fb-pop { position: fixed; right: 22px; bottom: 72px; z-index: 40; width: 320px;
          max-width: calc(100vw - 44px); margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.fb-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fb-pop-head b { font-size: 14px; }
.fb-x { all: unset; color: #8792a0; cursor: pointer; padding: 2px 6px; }
.fb-x:hover { color: #232a33; }
.fb-pop textarea { margin: 0 0 8px; }
.fb-pop input[type=text] { margin: 0 0 4px; }
.fb-pop .btnrow button { padding: 5px 12px; }
.fb-pop .hint { color: #8792a0; font-size: 11.5px; }

/* ── standardized page layout (#172, mockup "Airy") ─────────────────────────
   Shared top-to-bottom structure rendered by _layout.html's macros:
   strip → global notifications → page name → description → notes callout →
   collapsible sections. */

/* region wrapper gives every page the same measure and vertical rhythm */
.page { max-width: 1120px; }

/* global notifications — severity-colored banners shown on every page */
.gnotes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.gnote { display: flex; align-items: center; gap: 10px; padding: 10px 15px;
         border: 1px solid; border-left-width: 4px; border-radius: 8px;
         font-size: 13.5px; }
.gnote .gn-ic { flex: none; width: 18px; height: 18px; }
.gnote .gn-txt { flex: 1; }
.gnote a { font-weight: 600; white-space: nowrap; }
.gnote.warn { background: #fdf6e3; border-color: #e0a930; color: #6b5411; }
.gnote.warn a { color: #8a6100; }
.gnote.info { background: #eef4fb; border-color: #7fa8dc; color: #33465e; }
.gnote.good { background: #e2f3ea; border-color: #7fcaa3; color: #1e6a42; }

/* page header block: name + one-line description, with optional page-level
   actions on the right (e.g. Rejected Listings' Discard all, #230) */
.page-head { margin: 4px 0 0; display: flex; justify-content: space-between;
             align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.page-head .page-title { min-width: 0; }
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: .01em; }
.page-desc { color: #55606d; font-size: 13.5px; line-height: 1.55;
             margin: 5px 0 0; max-width: 74ch; }
.page-actions { flex: none; }
.page-actions button { margin: 8px 0 0; }

/* notes callout — always a callout; bullets when there is more than one */
.notes-callout { border: 1px solid #e0a930; border-left-width: 4px; background: #fdf6e3;
                 border-radius: 8px; padding: 11px 16px 12px; margin: 16px 0 0; }
.notes-callout .nc-cap { display: flex; align-items: center; gap: 7px; font-size: 10.5px;
                 font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                 color: #8a6d1f; margin: 0 0 6px; }
.notes-callout .nc-cap svg { width: 14px; height: 14px; }
.notes-callout ul { margin: 0; padding-left: 20px; }
.notes-callout li { margin: 3px 0; color: #5c4c22; font-size: 13.5px; line-height: 1.5; }
.notes-callout li:only-child { list-style: none; margin-left: -20px; }

/* the header block, notes, and first section share a consistent gap */
.sections { margin-top: 22px; }

/* collapsible sections — native <details>, chevron rotates on open */
details.section { border: 1px solid #d5dae1; border-radius: 10px; background: #fff;
                  margin: 0 0 14px; }
details.section > summary { list-style: none; cursor: pointer; display: flex;
                  align-items: center; gap: 12px; padding: 13px 16px; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary:hover { background: #fbfcfd; border-radius: 10px; }
details.section[open] > summary:hover { border-radius: 10px 10px 0 0; }
.sec-chev { flex: none; width: 9px; height: 9px; margin: 0 1px; border-right: 2.4px solid #35b26f;
            border-bottom: 2.4px solid #35b26f; transform: rotate(-45deg);
            transition: transform .18s ease; }
details.section[open] > summary .sec-chev { transform: rotate(45deg); }
details.section > summary h2 { margin: 0; font-size: 15px; color: #232a33; }
.sec-count { flex: none; font: 700 12px/1.6 ui-monospace, monospace; background: #eef1f4;
             color: #55606d; border-radius: 999px; padding: 1px 10px; }
.sec-count.hot { background: #35b26f; color: #08130c; }
.sec-count.zero { background: #eef1f4; color: #98a2ae; }
.sec-sub { flex: 1; color: #8792a0; font-size: 12.5px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
details.section[open] > summary { border-bottom: 1px solid #eef1f4; }
.section-body { padding: 6px 16px 16px; }
.section-body > .section-desc { color: #55606d; font-size: 12.5px; margin: 10px 0 2px;
             max-width: 82ch; line-height: 1.5; }
@media (max-width: 860px) {
  details.section > summary .sec-sub { display: none; }
}

/* Account page: username + upload token must be readable at arm's length (#220) */
.acct-cards { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 26px; }
.acct-card { background: #fff; border: 1.5px solid #d5dae1; border-radius: 14px;
             padding: 20px 26px; min-width: 280px; }
.acct-label { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #55606d;
              text-transform: uppercase; margin-bottom: 8px; }
.acct-value { font-size: 36px; font-weight: 800; }
.acct-admin { font-size: 15px; font-weight: 700; color: #55606d; vertical-align: middle;
              border: 1px solid #d5dae1; border-radius: 8px; padding: 2px 8px; }
.acct-token-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acct-token { font-size: 40px; font-weight: 700; letter-spacing: .22em;
              background: #eef1f4; border-radius: 10px; padding: 8px 18px; }
.acct-token-row .go { font-size: 16px; padding: 12px 20px; }
.acct-hint { font-size: 15px; color: #55606d; margin: 10px 0 0; }

/* Rejected Listings: discard-all + Discarded pager (#230). The discard-all
   button sits in the standardized page head's .page-actions slot (#172). */
button.danger[disabled] { opacity: .55; cursor: default; }
button.danger[disabled]:hover { background: #fff; }
.failed-warning { border: 1.5px solid #b3261e; background: #fbe4e2; color: #7a1a14;
                  border-radius: 8px; padding: 10px 14px; font-size: 13.5px;
                  margin: 0 0 12px; }
.failed-warning b { color: #b3261e; }
.discard-all-detail { margin: 0 0 8px; font-size: 14px; color: #232a33; }
.modal-foot.split { justify-content: space-between; }
button.danger-solid { background: #b3261e; border-color: #b3261e; color: #fff;
                      min-height: 44px; padding: 10px 18px; }
button.danger-solid:hover { background: #9c211a; }
.modal-foot.split .lite { min-height: 44px; padding: 10px 18px; }
.per-row { display: flex; justify-content: space-between; align-items: center;
           gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; }
.per-row label { color: #55606d; font-size: 12.5px; }
.per-row select { width: auto; margin: 0 0 0 4px; }
.per-form { display: flex; align-items: center; gap: 8px; }
.per-form button { margin: 0; padding: 5px 12px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px;
         margin-top: 18px; flex-wrap: wrap; }
.pager .gap { color: #55606d; padding: 0 2px; }
.pager a.btn, .pager .cur, .pager .off { min-width: 34px; text-align: center;
                                         padding: 7px 10px; }
.pager .cur { display: inline-block; font: 600 12.5px system-ui, sans-serif;
              border-radius: 6px; background: #1e7a4c; border: 1px solid #1e7a4c;
              color: #fff; }
.pager .off { display: inline-block; font: 600 12.5px system-ui, sans-serif;
              border-radius: 6px; border: 1px solid #e4e8ed; color: #98a2ae;
              background: #fff; }

/* Getting Started doc (#297): step screenshots and their captions. */
/* Portrait phone captures are far taller than they are wide, so max-width
   alone lets one screenshot swallow a whole step. Cap the height too and let
   the width follow, so no single shot dominates the section it illustrates. */
.gs-shot { display: block; max-width: 420px; width: auto; max-height: 460px;
  margin: 12px 0 2px; border: 1px solid #d5dae1; border-radius: 8px; }
.gs-cap { color: #8792a0; font-size: 11.5px; margin: 0 0 4px; }

/* Getting Started banner (#297): variant B — a dedicated accent card. */
.gs-card { display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  padding: 14px 16px; background: #f4fbf7; border: 1px solid #a9dcc3;
  border-left: 4px solid var(--accent); border-radius: 10px; }
.gs-card .gs-ic { flex: none; width: 30px; height: 30px; color: #1e7a4c; }
.gs-card .gs-body { flex: 1; min-width: 0; }
.gs-card b { display: block; font-size: 14.5px; color: #14432b; margin-bottom: 2px; }
.gs-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #38614c; }
.gs-card .gs-act { flex: none; display: flex; align-items: center; gap: 6px; }
.gs-card .gs-act form { margin: 0; }
.gs-card a.gs-btn { background: #1e7a4c; color: #fff; border: 1px solid #1e7a4c;
  border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.gs-card a.gs-btn:hover { background: #176440; }
.gs-card .gs-x { background: none; border: 0; color: inherit; opacity: .55;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 5px 7px; margin: 0;
  border-radius: 6px; }
.gs-card .gs-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
@media (max-width: 700px) {
  .gs-card { flex-wrap: wrap; }
  .gs-card .gs-act { width: 100%; justify-content: flex-end; }
}