/* Valek Parts dashboard. Tokens first; dark mode follows the system. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #15181d;
  --muted: #5b6472;
  --faint: #98a1ad;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --ok: #15803d;      --ok-bg: #e7f6ec;
  --warn: #a16207;    --warn-bg: #fdf4dc;
  --bad: #b42318;     --bad-bg: #fdecea;
  --info: #1d4ed8;    --info-bg: #e8effd;
  --mute-bg: #eef0f3;
  --c-ebay: #2563eb;
  --c-telegram_channel: #0891b2;
  --c-avito: #7c3aed;
  --c-kleinanzeigen: #16a34a;
  --c-other: #64748b;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1e222a;
    --border: #2a2f39;
    --text: #e8eaee;
    --muted: #a2aab6;
    --faint: #6b7380;
    --accent: #6b95ff;
    --accent-text: #0f1115;
    --ok: #4ade80;      --ok-bg: rgba(74, 222, 128, .13);
    --warn: #fbbf24;    --warn-bg: rgba(251, 191, 36, .13);
    --bad: #f87171;     --bad-bg: rgba(248, 113, 113, .13);
    --info: #8fb0ff;    --info-bg: rgba(122, 162, 255, .15);
    --mute-bg: #232731;
    --c-ebay: #6b95ff;
    --c-telegram_channel: #22c3dd;
    --c-avito: #a78bfa;
    --c-kleinanzeigen: #4ade80;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 10px; font-weight: 650; }
h3 { font-size: 14px; margin: 0; font-weight: 650; }
small { font-size: 12px; }
.sub { color: var(--muted); font-size: 12.5px; }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.warn-text { color: var(--warn); }

/* The copy button after a part number (app.js copies it): an icon, ✓ for a moment once copied. It takes no more
   height than the text beside it; on touch screens the button is a thumb-sized 32px all the same. */
.copy-num {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.5'/%3E%3Cpath d='M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2'/%3E%3C/svg%3E");
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin: -3px 0 -3px 2px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; vertical-align: middle;
}
.copy-num::before { content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
@media (hover: hover) { .copy-num:hover { color: var(--accent); border-color: var(--border); background: var(--surface-2); } }
.copy-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.copy-num.copied { color: var(--ok); border-color: transparent; background: var(--ok-bg);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.copy-num.copy-failed { color: var(--bad); background: var(--bad-bg); }
@media (pointer: coarse) { .copy-num { width: 32px; height: 32px; margin: -8px 0 -8px 2px; } .copy-num::before { width: 15px; height: 15px; } }

/* Header */
header.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.top-in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.logo {
  width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center;
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 14px;
}
.env { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px;
       background: var(--warn-bg); color: var(--warn); }
nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
nav a { color: var(--muted); padding: 6px 11px; border-radius: 8px; white-space: nowrap; font-weight: 550; }
nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
nav a.on { background: var(--surface-2); color: var(--text); }
.top-right { margin-left: auto; }
.demo-switch {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
}
.demo-switch.on { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-bg); }
.demo-switch:hover { text-decoration: none; }

main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 40px; }
main.wide { max-width: none; padding: 12px 16px 16px; }
main > section, main > .two, main > form, main > .table-wrap, main > nav.pills { margin-bottom: 18px; }
footer { text-align: center; color: var(--faint); font-size: 12px; padding: 8px 16px 28px; }
.page-head { margin: 4px 0 16px; }

/* Cards and grids */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 16px; box-shadow: var(--shadow); }
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.two > * { margin: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
       padding: 14px 16px; color: var(--text); box-shadow: var(--shadow); display: block; }
a.kpi:hover { border-color: var(--accent); text-decoration: none; }
.kpi-label { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.kpi-value { font-size: 28px; font-weight: 680; letter-spacing: -.02em; margin: 4px 0 2px; }
.kpi-value small { font-size: 14px; color: var(--muted); font-weight: 600; }
.kpi-sub { color: var(--muted); font-size: 12.5px; }
.kpi.warn .kpi-value { color: var(--warn); }

/* Alert */
.alert { background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
         border-radius: var(--radius); padding: 14px 16px; }
.alert h2 { color: var(--bad); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.alert header p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center;
           padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--bad) 18%, transparent); }
.rows .what { color: var(--text); }
.rows .actions, td.go .acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.more { display: inline-block; margin-top: 8px; font-weight: 550; }

/* Platforms */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.platform header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-other); display: inline-block; flex: none; }
.p-ebay .dot { background: var(--c-ebay); }
.p-telegram_channel .dot { background: var(--c-telegram_channel); }
.p-avito .dot { background: var(--c-avito); }
.p-kleinanzeigen .dot { background: var(--c-kleinanzeigen); }
.big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.big small { font-size: 12.5px; color: var(--muted); font-weight: 550; margin-left: 6px; letter-spacing: 0; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 4px; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar.warn span { background: var(--warn); }
.bar.bad span { background: var(--bad); }
.facts { list-style: none; margin: 10px 0 0; padding: 0; }
.facts li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.facts li span, .facts li a { color: var(--muted); }
.dac7 { margin-top: 8px; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.dac7.warn { background: var(--warn-bg); color: var(--warn); }
.dac7.bad { background: var(--bad-bg); color: var(--bad); }

/* Chart */
.chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 11px; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke: var(--c-other); }
.chart .end { fill: var(--c-other); }
.chart .p-ebay { stroke: var(--c-ebay); }             .chart circle.p-ebay { fill: var(--c-ebay); }
.chart .p-telegram_channel { stroke: var(--c-telegram_channel); } .chart circle.p-telegram_channel { fill: var(--c-telegram_channel); }
.chart .p-avito { stroke: var(--c-avito); }           .chart circle.p-avito { fill: var(--c-avito); }
.chart .p-kleinanzeigen { stroke: var(--c-kleinanzeigen); } .chart circle.p-kleinanzeigen { fill: var(--c-kleinanzeigen); }
.chart circle { stroke: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item b { color: var(--text); }

/* To-do summary */
.todo-list { display: flex; flex-direction: column; }
.todo-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px;
            border-top: 1px solid var(--border); color: var(--text); }
.todo-row:first-child { border-top: 0; }
.todo-row:hover { background: var(--surface-2); text-decoration: none; }
.todo-row > div { display: flex; flex-direction: column; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
         background: var(--mute-bg); color: var(--text); font-size: 12px; font-weight: 650; }
.alert .count { background: var(--bad); color: #fff; }
.count.zero { background: var(--ok-bg); color: var(--ok); }

/* Filters */
.filters { display: flex; flex-direction: column; gap: 8px;
           background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.filters details > summary { display: none; }
input, select {
  height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; width: 100%; min-width: 0;
}
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 0; border-color: var(--accent); }
.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 12px;
       border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
       font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px;
     border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.num { text-align: right; white-space: nowrap; }
th.pc { text-align: center; }
th.pc span { display: block; color: var(--text); }
th.pc small { color: var(--faint); font-weight: 500; }
td.pc { text-align: center; white-space: nowrap; }
td.ph { width: 60px; }
td.price { font-weight: 600; }
td.what { color: var(--muted); }
td.place { color: var(--text); min-width: 110px; }

.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px;
        font-weight: 550; white-space: nowrap; border: 1px solid transparent; }
a.chip:hover { text-decoration: none; filter: brightness(.97); border-color: currentColor; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.muted { background: var(--mute-bg); color: var(--muted); }
.chip.faint { color: var(--faint); border: 1px dashed var(--border); }
.chip.none { color: var(--faint); padding: 0 4px; }

.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); display: block; }
.thumb.ph { display: grid; place-items: center; font-size: 10.5px; font-weight: 750; color: var(--faint);
            border: 1px dashed var(--border); background: transparent; letter-spacing: .02em; }
.thumb.lg { width: 140px; height: 140px; font-size: 22px; border-radius: 12px; }

.part .ref { font-weight: 650; font-size: 12.5px; }
.part .where { display: none; }
.part .name { font-weight: 560; margin: 1px 0; }
.badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
.badge.demo { color: var(--warn); background: var(--warn-bg); }

/* To-do page */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
        background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.pill b { color: var(--warn); }
.pill.zero b { color: var(--ok); }
.pill:hover { border-color: var(--accent); text-decoration: none; }
.todo-section { scroll-margin-top: 70px; }
.todo-section header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.todo-section header h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.todo-section header .btn { margin-left: auto; }
.todo-section.done { opacity: .75; }
.todo-section.done h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }

/* One part */
.back { display: inline-block; margin-bottom: 12px; font-weight: 550; }
.item-head { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 20px; margin-bottom: 18px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.gallery a:first-child { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); }
.gallery a:first-child img { aspect-ratio: 4 / 3; }
.no-photo { grid-column: 1 / -1; display: grid; place-items: center; padding: 24px; border: 1px dashed var(--border);
            border-radius: var(--radius); color: var(--muted); }
.ref-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.big-ref { font-weight: 700; color: var(--muted); }
.facts-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 14px 0; }
.facts-grid dt { color: var(--muted); }
.facts-grid dd { margin: 0; }
.cta { display: flex; gap: 8px; }
.cta .btn { height: 36px; background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-size: 14px; }
.plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.plat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.plat b { margin-right: auto; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline .ev { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 7px 0 7px 14px; position: relative;
                border-left: 2px solid var(--border); }
.timeline .ev::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
                        background: var(--surface); border: 2px solid var(--faint); }
.timeline .ev.sold::before, .timeline .ev.listed::before { border-color: var(--ok); }
.timeline .ev.undo::before, .timeline .ev.ended::before { border-color: var(--warn); }
.timeline time { color: var(--muted); font-size: 12.5px; }
.empty-state { text-align: center; padding: 48px 16px; color: var(--muted); background: var(--surface);
               border: 1px dashed var(--border); border-radius: var(--radius); }
.empty-state h1 { color: var(--text); }

/* Narrower windows: the place goes under the part's name */
@media (max-width: 1100px) {
  th.place, td.place { display: none; }
  .part .where { display: block; }
  td { padding: 9px 10px; }
}

/* Phones: tables become cards, filters fold away */
@media (max-width: 760px) {
  .top-in { gap: 10px; flex-wrap: wrap; padding: 8px 12px; }
  .brand span:not(.logo):not(.env) { display: none; }
  nav { order: 3; width: 100%; }
  main { padding: 14px 12px 32px; }
  .two, .item-head { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr; padding-top: 8px; }
  .filters details > summary { display: list-item; cursor: pointer; color: var(--muted); font-weight: 550; padding: 2px 0; }
  .rows li { grid-template-columns: 1fr; gap: 6px; }
  .rows .actions { justify-content: flex-start; }

  table.matrix thead { display: none; }
  table.matrix, table.matrix tbody, table.cards, table.cards tbody { display: block; }
  table.matrix tr, table.cards tr {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px;
    border-bottom: 1px solid var(--border);
  }
  table.matrix tbody tr:last-child, table.cards tbody tr:last-child { border-bottom: 0; }
  table.matrix td, table.cards td { display: block; border: 0; padding: 0; background: transparent !important; }
  table.matrix td.place, table.cards td.place { display: none; }
  td.ph { grid-row: span 2; width: auto; }
  td.main { grid-column: 2; }
  td.price { grid-column: 3; grid-row: 1; text-align: right; }
  td.what { grid-column: 1 / -1; }
  td.pc { grid-column: 1 / -1; display: flex !important; justify-content: space-between; align-items: center;
          text-align: left; padding: 3px 0 !important; border-top: 1px dashed var(--border) !important; }
  td.pc::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; }
  td.go { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px !important; }
  .timeline .ev { grid-template-columns: 1fr; gap: 0; }
  .kpi-value { font-size: 24px; }
}

/* Online: who is logged in, and the login page */
.logout { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; color: var(--muted); font-size: 12.5px; }
.logout button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px;
  padding: 3px 10px; font: inherit; cursor: pointer; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; max-width: 26rem; width: 100%; display: grid; gap: 12px; box-shadow: var(--shadow); }
.login-card p { margin: 0; color: var(--muted); }
.login-card .login-msg { color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 8px 10px; }
.login-button { min-height: 44px; }
.login-card .login-alt { font-size: 13px; }

/* The drafts page (web/drafts.py) */
.d-progress { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.d-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
table.drafts td { vertical-align: top; }
table.drafts .d-title { display: block; width: 100%; min-width: 260px; margin-top: 6px; }
table.drafts .d-price { width: 84px; }
table.drafts .d-ship { min-width: 150px; }
table.drafts .d-bad { border-color: var(--bad); }
table.drafts tr.d-refused { background: var(--warn-bg); }
table.drafts img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.d-body { white-space: pre-wrap; max-width: 620px; margin: 6px 0; }
.bad-text { color: var(--bad); }
.warn-text { color: var(--warn); }
.d-work > .table-wrap { margin-bottom: 18px; }
.d-all-label { display: none; }
.d-why:empty { display: none; }

/* Phones: each draft is a card like the stock table's (sheet.css, .card): the photo, the part and the tick on top, the
   title across, price and shipping on one line, what happened to it under them. The bar with the button stays at the
   bottom of the screen. Fields are 16px so iOS doesn't zoom into them, and what he taps is 44px. */
@media (max-width: 760px) {
  .d-progress { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .d-work { display: flex; flex-direction: column; }
  .d-work > .table-wrap { margin-bottom: 0; }
  .d-wrap { overflow: visible; background: none; border: 0; border-radius: 0; }

  .d-bar { order: 1; position: sticky; bottom: 0; z-index: 6; gap: 8px; margin: 10px -12px 0;
           padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); }
  .d-bar #d-note { order: -1; flex: 0 0 100%; font-size: 13.5px; color: var(--text); }
  .d-bar #d-note.bad-text { color: var(--bad); }
  .d-bar #d-note:empty { display: none; }
  .d-bar #d-note .btn { height: 40px; margin-left: 8px; }
  .d-bar .chip { height: auto; padding: 4px 9px; white-space: normal; }
  #d-bulk-ship { display: none; flex: 1 1 100%; height: 44px; font-size: 16px; }   /* shown once a row is ticked (drafts.js) */
  .d-bar.d-some #d-bulk-ship { display: block; }
  #d-post { flex: 1 1 100%; height: 48px; font-size: 16px; }

  .d-tap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; cursor: pointer; }
  .d-tap input { flex: none; width: 24px; height: 24px; padding: 0; accent-color: var(--accent); }
  .d-all-label { display: inline; }
  table.drafts, table.drafts thead, table.drafts tbody { display: block; }
  table.drafts thead tr { display: flex; justify-content: flex-end; padding: 0 11px 4px; }
  table.drafts th { display: none; padding: 0; border: 0; background: none; font-size: 13.5px; }
  table.drafts th:first-child { display: block; }

  table.drafts tbody { display: grid; gap: 10px; }
  table.drafts tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 10px;
                          background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  table.drafts tbody tr[hidden] { display: none; }
  table.drafts tbody tr.d-refused { background: var(--warn-bg); border-color: var(--warn); }
  table.drafts td { display: block; min-width: 0; padding: 0; border: 0; background: transparent !important; }
  table.drafts td.ph { order: 1; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; background: var(--mute-bg) !important; }
  table.drafts img { display: block; width: 64px; height: 64px; border-radius: 8px; }
  table.drafts td.main, table.drafts td.d-state { display: contents; }   /* their pieces are placed on the card one by one */
  table.drafts .d-part { order: 2; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  table.drafts td.d-pick { order: 3; flex: 0 0 44px; }
  table.drafts td.d-pick:empty, table.drafts td.d-shipping:empty { display: none; }
  table.drafts .d-title { order: 4; flex: 0 0 100%; min-width: 0; height: 44px; margin-top: 0; font-size: 16px; }
  table.drafts td.d-money { order: 5; flex: 0 0 auto; }
  table.drafts .d-price { width: 96px; height: 44px; font-size: 16px; }
  table.drafts td.d-shipping { order: 6; flex: 1 1 140px; }
  table.drafts .d-ship { min-width: 0; height: 44px; font-size: 16px; }
  /* The last line, always a line of its own (::after ends the one before): «Текст» on the left, where the ad stands and
     «Убрать» on the right. An open text takes the whole width. */
  table.drafts tbody tr::after { content: ""; order: 7; flex: 0 0 100%; height: 0; }
  table.drafts details { order: 8; flex: 1 1 auto; min-width: 0; }
  table.drafts details[open] { flex-basis: 100%; }
  table.drafts summary { line-height: 44px; color: var(--accent); cursor: pointer; }
  table.drafts td.d-state > .chip, table.drafts td.d-state > a { order: 9; align-self: center; }
  table.drafts td.d-state > .btn { order: 10; height: 44px; padding: 0 14px; font-size: 14px; }
  table.drafts td.d-state > .sub { order: 11; flex: 0 0 100%; font-size: 13.5px; }
}