:root { --gap: .6rem; }
body { max-width: none; }
main { padding: 0 1rem 3rem; }

/* top bar */
.topbar { display:flex; align-items:center; gap:1rem; padding:.5rem 1rem;
  border-bottom:1px solid var(--pico-muted-border-color); position:sticky; top:0;
  background:var(--pico-background-color); z-index:10; flex-wrap:wrap; }
.topbar nav { display:flex; gap:.4rem; }
.topbar nav a { padding:.2rem .6rem; border-radius:.4rem; text-decoration:none; }
.topbar nav a.on { background:var(--pico-primary-background); color:#fff; }
.topbar .right { margin-left:auto; display:flex; gap:.8rem; align-items:center; font-size:.85rem; }
.mini, a.mini { font-size:.8rem; }
.muted { color:var(--pico-muted-color); }
.mono { font-family:var(--pico-font-family-monospace); font-size:.82em; }

/* badges + chips */
.badge { display:inline-block; padding:.05rem .45rem; border-radius:1rem; font-size:.72rem;
  font-weight:600; color:#fff; vertical-align:middle; }
.b-auto{background:#2a9d5c} .b-open{background:#d98a00} .b-confirmed{background:#2b6cb0}
.b-none{background:#777}
.chips { display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0 1rem; }
.chip { padding:.25rem .7rem; border-radius:1rem; text-decoration:none;
  border:1px solid var(--pico-muted-border-color); font-size:.85rem; }
.chip.on { outline:2px solid var(--pico-primary); }
.s-auto{color:#2a9d5c} .s-open{color:#d98a00} .s-confirmed{color:#2b6cb0} .s-none{color:#777}

/* filters */
.filters { display:flex; gap:.5rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.filters select, .filters input { margin:0; width:auto; }
.filters input[type=search] { min-width:16rem; }

/* overview table */
table.grid { font-size:.9rem; }
table.grid td { vertical-align:top; }
table.grid td.num, table.grid th.num { text-align:right; white-space:nowrap; }
.docs { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.doc { font-size:.72rem; padding:.05rem .4rem; border-radius:.3rem;
  border:1px solid var(--pico-muted-border-color); text-decoration:none; white-space:nowrap; }
.doc.pri { border-color:#2b6cb0; color:#2b6cb0; font-weight:600; }
.doc.more { border-style:dashed; color:var(--pico-muted-color); }

/* cross-locale coverage */
.loc-chip { font-size:.72rem; padding:.05rem .4rem; border-radius:.7rem; white-space:nowrap;
  border:1px solid var(--pico-muted-border-color); }
.loc-chip.full { color:#2a9d5c; border-color:#2a9d5c; }
.loc-chip.part { color:#d98a00; border-color:#d98a00; }
.loc-chip.solo { color:var(--pico-muted-color); }
table.loc-table td:first-child { white-space:nowrap; }

/* inbox — master/detail; JS sets .inbox height so the two panes scroll on their
   own and navigating the queue never reloads (keeps scroll position).
   Without JS (or on mobile) height is unset and everything just flows. */
.inbox { display:grid; grid-template-columns: 20rem 1fr; gap:1rem; }
.queue { border-right:1px solid var(--pico-muted-border-color); padding-right:.6rem;
  overflow-y:auto; min-height:0; }
.panel { overflow-y:auto; min-height:0; padding-right:.4rem; }
.qhead { font-weight:600; padding:.3rem 0; }
.qgroup { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600;
  color:var(--pico-muted-color); margin:.9rem 0 .25rem; }
.qgroup:first-child { margin-top:.3rem; }
.qitem { display:flex; gap:.4rem; align-items:center; padding:.35rem .4rem; border-radius:.4rem;
  text-decoration:none; font-size:.85rem; }
.qitem .qname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qitem.on { background:var(--pico-primary-background); color:#fff; }
.qitem.on .muted { color:#dbe7f5; }

/* instruction hint on uncertain (review) matches */
.hint { font-size:.83rem; margin:.4rem 0; padding:.45rem .6rem; border-radius:.35rem;
  border-left:3px solid var(--pico-primary);
  background:var(--pico-card-sectioning-background-color); }

.panel-head { display:flex; align-items:center; gap:1rem; }
.panel-head h2 { margin:0; }
.cols { display:grid; grid-template-columns: 1fr 1.3fr; gap:1.2rem; margin-top:1rem; }
.shopimg { max-width:100%; max-height:220px; object-fit:contain; background:#fff; border-radius:.4rem; }
table.kv td { padding:.2rem .5rem .2rem 0; font-size:.85rem; border:0; }
.lbl { font-weight:600; margin:.8rem 0 .3rem; }

.ref { border:1px solid var(--pico-muted-border-color); border-radius:.5rem; padding:.6rem; }
.ref.none { color:var(--pico-muted-color); font-style:italic; }
.ref-head { display:flex; gap:.6rem; align-items:center; }
.ref-head img { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:.3rem; }
.ref-name { font-weight:600; }
.suggest, .alts, .searchbox { margin-top:.6rem; }
.actions { margin-top:.5rem; }
.alts ol { margin:0; padding-left:1.2rem; }
button.link { background:none; border:0; color:var(--pico-primary); padding:0; width:auto;
  text-decoration:underline; cursor:pointer; }
.rowbtns { margin-top:.6rem; }

/* search */
.srch { margin:0; }
.results { list-style:none; margin:.3rem 0 0; padding:0; max-height:16rem; overflow:auto; }
.results li { display:flex; gap:.5rem; align-items:center; padding:.25rem .3rem;
  border-bottom:1px solid var(--pico-muted-border-color); font-size:.85rem; }
.results li button { margin:0; padding:.1rem .5rem; width:auto; font-size:.78rem; }
.results li .nm { flex:1; }

/* collapsible shop attributes */
details.attrs { margin-top:.6rem; }
details.attrs summary { cursor:pointer; color:var(--pico-primary); font-size:.85rem;
  padding:.3rem 0; user-select:none; }
details.attrs[open] summary { margin-bottom:.3rem; }
details.attrs table.kv { margin-top:0; }

/* decision actions grouped in the panel */
.none-row { margin-top:.8rem; padding-top:.6rem;
  border-top:1px solid var(--pico-muted-border-color); }
.none-btn { width:auto; }

/* reference preview (review-before-confirm) */
.candidate.on { margin:.8rem 0; padding:.7rem; border:2px solid var(--pico-primary);
  border-radius:.5rem; background:var(--pico-card-sectioning-background-color); }
.candidate.on .lbl:first-child { margin-top:0; }

/* pager */
.pager { display:flex; gap:.6rem; align-items:center; margin:.6rem 0; }
.pager .pg { padding:.25rem .7rem; border-radius:.4rem; text-decoration:none;
  border:1px solid var(--pico-muted-border-color); font-size:.85rem; }
.pager .pg.cur { border:0; color:var(--pico-muted-color); }
.pager .pg.disabled { opacity:.4; }

/* demoted detail actions: unlink (destructive, red) + revert override */
.subactions { display:flex; flex-wrap:wrap; gap:1.3rem; align-items:center;
  margin:.9rem 0 .2rem; padding-top:.6rem;
  border-top:1px solid var(--pico-muted-border-color); }
.btn-unlink, .btn-reset { background:none; border:0; padding:0; width:auto; cursor:pointer;
  font-size:.82rem; text-decoration:underline; }
.btn-unlink { color:#c0392b; }
.btn-reset { color:var(--pico-muted-color); }

.events { font-size:.82rem; }
.done { font-size:1.2rem; }

button.primary { background:var(--pico-primary); }
@media (max-width: 800px){
  .inbox{grid-template-columns:1fr} .cols{grid-template-columns:1fr}
  .inbox .panel{order:1} .inbox .queue{order:2}
  .queue{border-right:0;border-top:1px solid var(--pico-muted-border-color);padding:.6rem 0 0} }