/* Studio v2 (plan F6): the rules of WP-A, the coins list. Shared tokens stay in studio.css. */

/* the row's status and its one next action, side by side on a desktop, under the facts on a phone */
table.coins .stage-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
table.coins .row-act a[data-next], table.coins .row-act button[data-next] {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  white-space: nowrap; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); }
table.coins .row-act a[data-next]:hover, table.coins .row-act button[data-next]:hover {
  background: var(--soft); border-color: color-mix(in srgb, var(--muted) 50%, var(--rule)); }
table.coins .row-act [data-wait] { font-size: 12.5px; }
@media (pointer: coarse) { table.coins .row-act a[data-next], table.coins .row-act button[data-next] { min-height: 40px; } }

/* the status chip's tone from the server (statusview.js chipOf: wait, act, done, warn): a person's move is plain ink
   with an accent dot (red is for what failed), the machine at work blue, done green, failed or refused red */
table.coins .stage-tag.tone-attention { color: var(--ink); background: var(--chip); }
table.coins .stage-tag.tone-attention::before { background: var(--accent); opacity: 1; }
table.coins .stage-tag.tone-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }

/* the name; an unidentified coin says so, quietly */
.coin-text .title-line > a.unidentified { color: var(--ink2); font-weight: 500; }

/* the long attribution behind the row's expansion: what the identification rests on is its summary */
.coin-text .row-more { margin-top: 3px; font-size: 12.5px; color: var(--ink2); }
.coin-text .row-more > summary { display: inline-flex; gap: 6px; color: var(--muted); }
.coin-text .row-more > summary::before { width: 5px; height: 5px; }
.coin-text .row-more .id-mark { color: var(--ink2); }
.coin-text .row-more .id-mark.id-confirmed, .coin-text .row-more .id-mark.id-reviewed { color: var(--ok); }
.coin-text .row-more .id-mark.id-proposed { color: var(--warn); }
.coin-text .row-more .id-mark.id-low { font-weight: 600; }
.coin-text .row-more-list { margin: 4px 0 2px; padding-left: 16px; display: grid; gap: 2px; white-space: normal; }

/* a picture: round on black, the pictures' own surround (a picture without its fit too, at the safe scale: never a square) */
.coin-cell .thumb:not(.none), .coin-cell .thumb:not(.none) .zoom { background: #000; }
/* a side without a picture: the empty disc says why */
.coin-cell .thumb.none { position: relative; margin: 0; }      /* not the "No coin matches" line's margin (.panel .none) */
.coin-cell .thumb.none { background: color-mix(in srgb, var(--muted) 12%, var(--panel)); }     /* light in light, dark in dark */
.coin-cell .thumb.none .disc { position: absolute; inset: 19%; width: auto; border-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.coin-cell .thumb.none .ph-word { position: relative; max-width: 70%; text-align: center; font-size: 11px; line-height: 1.2; color: var(--ink2); }
.thumbs.both .thumb.none .ph-word { font-size: 10.5px; }
@media (max-width: 640px) { .coin-cell .thumb.none .ph-word { font-size: 10px; } }

/* each group's rule, under the tabs */
.group-rule { margin: -4px 2px 10px; }

@media (max-width: 640px) {
  table.coins td.stage-col { padding-left: 88px; }
}

/* a grade chip with its flag ("Earlier scans") wraps inside the row on a phone, never past its edge */
.coin-text .facts-line > .tipped { flex-wrap: wrap; max-width: 100%; }

/* the grade estimate inside the row's expansion (v0.1.40: never on the row itself): "Uncalibrated" first, its chip */
.coin-text .row-more-list .row-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.coin-text .row-more-list .row-grade .tipped { flex-wrap: wrap; max-width: 100%; }

/* one Scan coin on the Coins page: the page's own big button (its notices and its chooser sit under it); the nav's,
   which presses the page's while this page is open, steps aside (outside review of v0.1.39, finding 8) */
body:has(#quickcoin) #navscan { display: none; }

/* ---- the three views of the list (owner 2026-10-28, SPEC 1-4): Grid, List, Tree ---- */

/* the toolbar in three groups (the owner's second review of the grid, 2026-10-29, item E): Coins, the search and Scan
   coin, the one filled button; the workflow filters; the view on the left and the display on the right, quieter */
.coins-head { align-items: center; gap: 10px 16px; flex-wrap: nowrap; margin: 0 0 14px; }
.coins-head h1 { margin: 0; flex: none; }
.coins-head .search { flex: 1 1 auto; min-width: 0; }
.coins-head .search input { width: 100%; box-sizing: border-box; height: 44px; padding-left: 34px; font-size: 15px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237d8591' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 12px 50%; }
.coins-head .scan-start { flex: none; }
.coins-head #quickcoin { height: 44px; }
.coins-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 16px; }
.coins-tools .list-tools { margin: 0; }
/* the workflow filters: the five groups, Filters at the row's end */
.list-tools.list-groups { gap: 8px 12px; }
/* the six primary states as chips (the design's Components: rounded, the count beside the words, a zero one quieter) */
.list-groups .groups { display: flex; flex-wrap: wrap; gap: 8px; }
.list-groups .fchip { font: inherit; font-size: 13.5px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--rule); background: transparent;
  color: var(--ink2); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.list-groups .fchip:hover:not(.on) { background: var(--soft); color: var(--ink); }
.list-groups .fchip .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.list-groups .fchip.on { background: var(--chip); color: var(--ink); border-color: var(--muted); }
.list-groups .fchip.on .n { color: var(--ink); }
.list-groups .fchip[data-zero] { color: var(--muted); }
.list-groups .list-filters { margin-left: auto; }
.list-groups .list-filters[open] { flex: 1 1 100%; margin-left: 0; }
.list-groups .list-filters > summary { color: var(--ink2); }
.coins-tools .group-rule { margin: -4px 2px 0; }
.coins-tools .group-rule[hidden] { display: none; }
/* the view on the left, the display on the right: no box around them, smaller words, so the filters and Scan coin lead */
.list-tools.list-facets { justify-content: space-between; gap: 8px 16px; margin-top: 0; }
.list-facets .display { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; min-width: 0; }
.list-facets .seg { background: transparent; border-color: transparent; padding: 0; gap: 0; }
.list-facets .seg button { padding: 4px 9px; font-size: 12.5px; color: var(--muted); border-radius: 7px; }
.list-facets .seg button:hover:not(.on) { color: var(--ink); background: var(--soft); }
.list-facets .seg button.on { background: var(--soft); color: var(--ink); box-shadow: none; font-weight: 500; }
.list-facets .sort select { padding: 4px 26px 4px 8px; font-size: 12.5px; color: var(--ink2); background-color: transparent; border-color: transparent; }
.list-facets .sort select:hover { border-color: var(--rule); }
.list-tools .seg.layouts { flex: none; }
.list-tools .seg.layouts button { display: inline-flex; align-items: center; gap: 6px; }
.list-tools .seg.layouts svg { width: 15px; height: 15px; flex: none; display: block; }
.list-tools .seg.sizes button { display: inline-flex; align-items: center; padding: 5px 7px; }
.list-tools .seg.sizes svg { width: 14px; height: 14px; display: block; }
.seg button[hidden], .list-tools .seg[hidden] { display: none; }
@media (max-width: 760px) { .list-tools .seg.layouts .lbl { display: none; } }
@media (max-width: 640px) {
  .coins-head { flex-wrap: wrap; }
  .coins-head h1 { flex: 1 1 auto; font-size: 24px; }
  .coins-head .scan-start { width: auto; justify-items: end; }
  .coins-head .scan-start #quickcoin { width: auto; height: 40px; padding: 8px 16px; font-size: 15px; }
  .coins-head .search { order: 3; flex: 1 1 100%; }
  .coins-head .search input { height: 40px; }
  /* a phone: the view, the side and the look on one row, the sort and the size on the next (fewer rows) */
  .list-tools.list-facets { justify-content: flex-start; gap: 6px 8px; }
  .list-facets .display { display: contents; }
  .list-tools.list-facets .sort { margin-left: -2px; }
  .list-facets .seg.sizes { margin-left: auto; }
  .list-facets .seg button { padding: 4px 7px; }
  .list-groups .list-filters { margin-left: 0; }
  /* the workflow filters on a phone: every tab in sight (review of v0.1.43, finding 5: the strip was cut after "Needs
     scanning 22", with a bare "To"): a group holding no coin steps aside unless chosen, the rest wrap to a second row */
  .list-groups .groups { gap: 6px; }
  .list-groups .fchip { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .list-groups .fchip[data-zero]:not(.on) { display: none; }
}

/* the grid (the owner's reviews of 2026-10-29): a quiet card per coin, the columns filling the page at the person's size
   (coingrid.js gridCols, by the grid's own width: Comfortable five across on a desktop, Compact seven, Large three);
   in each card the picture round on one dark disc and two lines under it */
.coins-box[data-layout="grid"], .coins-box[data-layout="tree"] { margin-top: 0; }
.grid-box { container-type: inline-size; }
.coin-grid { --pad: 8px; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coin-grid[data-size="s"] { --pad: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coin-grid[data-size="l"] { --pad: 10px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 440px) {
  .coin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coin-grid[data-size="s"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coin-grid[data-size="l"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 640px) {
  .coin-grid { --pad: 11px; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coin-grid[data-size="s"] { --pad: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .coin-grid[data-size="l"] { --pad: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  .coin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .coin-grid[data-size="s"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .coin-grid[data-size="l"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.coin-grid > li { min-width: 0; display: flex; }
.coin-grid > li.has-merge { flex-direction: column; gap: 4px; }
.coin-grid .tile-merge { font-size: 12px; padding: 4px 8px; align-self: stretch; }
/* the card: a quiet panel, no border (a hairline in the light theme only), its padding the coin's breathing room */
.coin-grid .tile { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: var(--pad);
  padding-bottom: calc(var(--pad) - 1px); color: var(--ink); text-decoration: none; border-radius: 12px; background: var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent); transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coin-grid .tile { box-shadow: none; } }
:root[data-theme="dark"] .coin-grid .tile { box-shadow: none; }
@media (hover: hover) { .coin-grid .tile:hover { background: color-mix(in srgb, var(--panel) 93%, var(--ink)); } }
.coin-grid .tile:focus { outline: none; }
.coin-grid .tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the picture: round on the dark disc the pictures' own black surround merges into, inset by the card's padding (a
   picture without its fit is drawn at the safe scale, round all the same: coinlist.js NO_FIT_SCALE); never re-toned */
.coin-grid .tile-face { position: relative; display: block; }
.coin-grid .tile-pic { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #000; }
.coin-grid .tile-pic img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .coin-grid .tile { transition: none; } }
/* the other face on hover or focus, on a desktop only (never on touch): drawn on the first hover (coingrid.js), shown
   once loaded */
.coin-grid .tile-back, .coin-grid .tile-mark-back { display: none; }
@media (hover: hover) and (pointer: fine) {
  .coin-grid .tile-back { display: grid; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
  .coin-grid .tile:hover .tile-back[data-ready], .coin-grid .tile:focus-visible .tile-back[data-ready] { opacity: 1; }
  .coin-grid .tile-mark-back { display: block; opacity: 0; }
  .coin-grid .tile:is(:hover, :focus-visible):has(.tile-back[data-ready]) .tile-mark-back { opacity: 1; }
  .coin-grid .tile:is(:hover, :focus-visible):has(.tile-back[data-ready]) .tile-mark:not(.tile-mark-back) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .coin-grid .tile-back { transition: none; } }
/* coin triage: a phone photo (nothing scanned yet) fills its disc, its phone mark top left: never a scan's picture */
.coin-grid .tile-pic.phone img, table.coins .thumb[data-look="phone"] img { object-fit: cover; }
/* a side without a picture: the empty disc says why */
.coin-grid .tile-pic.none { background: color-mix(in srgb, var(--muted) 12%, var(--panel)); }
.coin-grid .tile-pic.none .disc { position: absolute; inset: 22%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--muted) 70%, transparent); }
.coin-grid .tile-pic.none .ph-word { position: relative; max-width: 64%; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--ink2); }
.coin-grid[data-size="s"] .tile-pic.none .ph-word { font-size: 10px; }
/* "Relief, no colour measured": a crossed droplet top left, outside the coin, on its own disc */
.coin-grid .tile-mark { position: absolute; top: 0; left: 0; width: 16px; height: 16px; padding: 1.5px; border-radius: 50%; color: var(--ink2);
  background: var(--panel); box-sizing: border-box; }
.coin-grid .tile-mark svg, .relief-mark svg { width: 100%; height: 100%; display: block; }
/* the two lines under the picture: the name (and "Proposed" when it is one), then what the coin needs beside its mark,
   the arrow when it is this person's to do; one line each, the words cut with "…" before the arrow gives way (the whole
   words in the card's aria-label and the lines' titles) */
.coin-grid .tile-cap { display: grid; gap: 2px; padding: 0 2px; min-width: 0; margin-top: auto; }
.coin-grid .cap-name, .coin-grid .cap-status { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.35; }
.coin-grid .cap-name { font-size: .8125rem; font-weight: 500; color: var(--ink); }
.coin-grid .cap-name.unidentified { color: var(--ink2); font-weight: 400; }
.coin-grid .cap-text, .coin-grid .cap-words { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* "Proposed" beside the name, never more than about a third of the line (review of v0.1.43, finding 2): the name keeps
   the width; it says it short ("Prop.", "AI") but on a Large card, its whole words in the title and the card's label */
.coin-grid .cap-text { flex: 0 1 auto; }
.coin-grid .cap-q { flex: 0 0 auto; max-width: 36%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .6875rem;
  font-weight: 500; color: var(--warn); }
.coin-grid .cap-q .q-long { display: none; }
.coin-grid[data-size="l"] .cap-q .q-long { display: inline; }
.coin-grid[data-size="l"] .cap-q .q-short { display: none; }
.coin-grid .cap-status { font-size: .75rem; color: var(--ink2); gap: 5px; }
/* a flagged coin: its reason's few words, then what it needs, both whole: the line wraps to a second rather than cut
   either (review of v0.1.43, finding 1); the server's whole words in the title and the card's label */
.coin-grid .cap-status.flagged { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.coin-grid .cap-status.flagged > * { vertical-align: middle; }
.coin-grid .cap-status.flagged .cap-mark.mark-flag { display: inline-grid; margin-right: 5px; }
.coin-grid .cap-status.flagged .cap-words { white-space: normal; overflow: visible; }
.coin-grid .cap-status.flagged .cap-go { margin-left: 4px; }
.coin-grid .cap-flag { font-weight: 600; color: var(--bad); }
.coin-grid .cap-sep { color: var(--muted); }
.coin-grid .cap-status.act, .coin-grid .cap-status.flagged { color: var(--ink); }
.coin-grid .cap-go { flex: none; color: var(--ink2); margin-left: -1px; }
@media (hover: hover) { .coin-grid .tile:hover .cap-status.act .cap-words { text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); } }
/* the record's short id: the picture's top right corner, outside the round coin (the relief mark has the top left) */
.coin-grid .tile-ref { position: absolute; top: 0; right: 0; font: 500 .625rem/1 var(--mono); color: var(--ink2); letter-spacing: .03em;
  pointer-events: none; }
/* the status mark: the group's colour (the machine at work blue, a scan to do amber, a review violet, a report to finish
   teal, done green), red for a coin a person must see. Colour only reinforces the words beside it (owner's review,
   item 2): the machine at work is a ring, a coin a person must see a larger red disc with a white "!" */
.coin-grid .cap-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; background: var(--muted); }
.cap-mark.mark-processing { background: transparent; box-shadow: inset 0 0 0 2px var(--focus); }
.cap-mark.mark-scanning { background: var(--warn); }
.cap-mark.mark-review { background: var(--violet); }
.cap-mark.mark-report { background: var(--teal); }
.cap-mark.mark-done { background: var(--ok); }
.coin-grid .cap-mark.mark-flag { width: 13px; height: 13px; background: var(--bad); box-shadow: none; display: grid; place-items: center; }
.coin-grid .cap-mark.mark-flag::after { content: "!"; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
:root { --violet: #6c4fc4; --teal: #13808a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --violet: #a48df0; --teal: #45b9c3; } }
:root[data-theme="dark"] { --violet: #a48df0; --teal: #45b9c3; }
/* Compact: smaller words; Large: larger */
.coin-grid[data-size="s"] .tile { gap: 6px; border-radius: 10px; }
.coin-grid[data-size="s"] .cap-name { font-size: .75rem; }
.coin-grid[data-size="s"] .cap-status { font-size: .6875rem; gap: 4px; }
.coin-grid[data-size="s"] .tile-ref { font-size: .625rem; }
/* a Compact card's corner is too small for the id beside the round coin: a thin strip above the picture holds it */
.coin-grid[data-size="s"] .tile-face { padding-top: 12px; }
.coin-grid[data-size="s"] .cap-q { font-size: .6875rem; }
.coin-grid[data-size="s"] .tile-mark { width: 13px; height: 13px; }
.coin-grid[data-size="s"] .cap-mark.mark-flag { width: 11px; height: 11px; }
.coin-grid[data-size="s"] .cap-mark.mark-flag::after { font-size: 8.5px; }
.coin-grid[data-size="l"] .tile { gap: 10px; }
.coin-grid[data-size="l"] .cap-name { font-size: .90625rem; }
.coin-grid[data-size="l"] .cap-status { font-size: .8125rem; }
.coin-grid[data-size="l"] .tile-ref { font-size: .6875rem; }
/* a phone: no caption under 11 px, the id at 10 px in --ink2 (review of v0.1.43, finding 3), in rem so the person's
   text size counts; Compact's three narrow columns let both lines wrap to a second, so the words are read, not cut */
@container (max-width: 439px) {
  .coin-grid:not([data-size="l"]) .cap-name { font-size: .75rem; }
  .coin-grid:not([data-size="l"]) .cap-status { font-size: .6875rem; gap: 4px; }
  .coin-grid:not([data-size="l"]) .tile-ref { font-size: .625rem; }
  .coin-grid[data-size="s"] .cap-name { font-size: .6875rem; }
  .coin-grid[data-size="s"] .tile-pic.none .ph-word { font-size: .625rem; }
  .coin-grid[data-size="s"] :is(.cap-name, .cap-status) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    white-space: normal; overflow-wrap: anywhere; }
  .coin-grid[data-size="s"] :is(.cap-name, .cap-status) > * { vertical-align: middle; }
  .coin-grid[data-size="s"] :is(.cap-text, .cap-words) { white-space: normal; overflow: visible; }
  .coin-grid[data-size="s"] .cap-status .cap-mark { display: inline-grid; margin-right: 4px; }
  /* a flagged coin's reason and what it needs, both whole: up to four lines there */
  .coin-grid[data-size="s"] .cap-status.flagged { -webkit-line-clamp: 4; }
  .coin-grid[data-size="s"] .cap-q { margin-left: 4px; max-width: none; }
  .coin-grid[data-size="s"] .cap-go { margin-left: 3px; }
  .coin-grid .tile-mark { width: 13px; height: 13px; }
}

/* the List, for comparison (Studio v0.1.45, the design's Coins · List): the picture beside the identity, the ID, the
   measurements in aligned columns (each with its source word, a discrepancy's small amber mark), the grade estimate, the
   status and one action; the details behind each row's own disclosure. A phone: the picture, the identity and the
   status, the measurements in a row of their own, the action beside */
.coins-box[data-layout="list"] { padding: 4px 8px 8px; }
.coins-box[data-layout="list"], .coins-box[data-layout="list"] #coinrows { min-width: 0; }
.rows-scroll { overflow-x: auto; max-width: 100%; }
/* fixed columns, so every row's values line up; the coin's column takes the rest (scrolls inside its box under 1000 px) */
table.coins.rows { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
table.coins.rows th.disc-col { width: 28px; }
table.coins.rows th.pic-col { width: 62px; }
table.coins.rows th.id-col { width: 116px; }
table.coins.rows th.num { width: 116px; }
table.coins.rows th.num + th.num { width: 88px; }
table.coins.rows th.metal { width: 116px; }
table.coins.rows th.gr { width: 144px; }
table.coins.rows th.st-col { width: 184px; }
table.coins.rows th.go-col { width: 92px; }
table.coins.rows td { overflow: hidden; }
table.coins.rows td.metal .v { overflow: hidden; text-overflow: ellipsis; }
table.coins.rows th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 12px 7px 10px; border-bottom: 1px solid var(--rule);
  white-space: nowrap; }
table.coins.rows td { padding: 10px 7px; vertical-align: middle; border-bottom: 1px solid var(--rule); }
table.coins.rows tr.rw:has(+ tr.rw-more:not([hidden])) td { border-bottom-color: transparent; }
table.coins.rows tbody tr.rw:hover { background: color-mix(in srgb, var(--panel) 95%, var(--ink)); }
table.coins.rows tr.rw.open, table.coins.rows tr.rw-more { background: color-mix(in srgb, var(--panel) 97%, var(--ink)); }
table.coins.rows .num, table.coins.rows td.m.num { text-align: right; }
table.coins.rows td.disc-col { padding-left: 0; padding-right: 0; }
table.coins.rows td.pic-col, table.coins.rows th.pic-col { padding-left: 2px; padding-right: 4px; }
table.coins.rows td.go-col { text-align: right; white-space: nowrap; }
table.coins.rows .disc { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; }
table.coins.rows .disc:hover { background: var(--soft); color: var(--ink); }
table.coins.rows .disc svg { transition: transform .12s ease; }
table.coins.rows .disc[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { table.coins.rows .disc svg { transition: none; } }
/* the identity: the tile's short name and "Proposed" (dashed: not settled yet), the short attribution under it */
table.coins.rows .idn { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
table.coins.rows .idn a { color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.coins.rows .idn a:hover { text-decoration: underline; text-underline-offset: 2px; }
table.coins.rows .idn a.unidentified { color: var(--ink2); font-weight: 400; }
table.coins.rows .pill { flex: none; font-size: 11.5px; line-height: 18px; padding: 0 7px; border-radius: 9px; border: 1px dashed var(--muted); color: var(--ink2);
  font-weight: 400; }
table.coins.rows .sub { display: block; margin-top: 1px; font-size: 13px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.coins.rows .id-ph { display: none; }
table.coins.rows .sid { display: block; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a measurement: the value, its source under it; a dash and the muted source when the coin has none */
table.coins.rows td.m .v { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.coins.rows td.m .v.nil { color: var(--muted); }
table.coins.rows .src { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
table.coins.rows .dev { color: var(--warn); font-weight: 500; }
table.coins.rows .nre { display: block; font-size: 13px; line-height: 1.3; color: var(--ink2); white-space: nowrap; }
/* the status: the primary state, its tone (a flag amber with its triangle, the machine quiet, finished green), its why */
table.coins.rows .st { display: block; font-weight: 500; white-space: nowrap; }
table.coins.rows .st.act { color: var(--act); }
table.coins.rows .st.warn { color: var(--warn); }
table.coins.rows .st.idle { color: var(--idle); font-weight: 400; }
table.coins.rows .st.ok { color: var(--ok); }
table.coins.rows .st svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
table.coins.rows .why { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.coins.rows .why.flag { color: var(--warn); }
table.coins.rows .why svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
:root { --act: #1f5fae; --idle: #5c6470; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --act: #8bbcf5; --idle: #a8afba; } }
:root[data-theme="dark"] { --act: #8bbcf5; --idle: #a8afba; }
/* the one action: a quiet secondary button */
table.coins.rows .row-act a[data-next], table.coins.rows .row-act button[data-next] {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap;
  text-decoration: none; color: var(--ink); background: transparent; border: 1px solid var(--rule); }
table.coins.rows .row-act a[data-next]:hover, table.coins.rows .row-act button[data-next]:hover { background: var(--soft); }
table.coins.rows .row-act [data-wait] { font-size: 12px; }
/* the details: what the row shortens, in a few labelled columns */
table.coins.rows tr.rw-more td { padding: 0 12px 16px 98px; }
.row-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; font-size: 13px; color: var(--ink2); max-width: 1100px; }
.row-details dt { color: var(--muted); font-size: 12px; }
.row-details dd { margin: 0; overflow-wrap: anywhere; }
.row-details .row-grade { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* the pictures: 52 px for one face, 2 x 44 px for both */
table.coins.rows .thumbs { display: flex; gap: 4px; }
table.coins.rows .pic { position: relative; display: block; flex: none; }
table.coins.rows .coin-cell .thumb { width: 52px; height: 52px; }
table.coins.rows .coin-cell .thumbs.both .thumb { width: 44px; height: 44px; }
table.coins.rows .thumb:not(.none) { background: #000; }
table.coins.rows .thumb.none { position: relative; margin: 0; background: color-mix(in srgb, var(--muted) 12%, var(--panel)); }
table.coins.rows .thumb.none .disc { position: absolute; inset: 16%; width: auto; border-color: color-mix(in srgb, var(--muted) 70%, transparent); }
table.coins.rows .thumb.none .ph-word { position: relative; max-width: 70%; text-align: center; font-size: 8.5px; line-height: 1.2; color: var(--ink2); }
table.coins.rows .relief-mark { position: absolute; right: -3px; bottom: -2px; width: 15px; height: 15px; padding: 1.5px; border-radius: 50%;
  color: var(--ink2); background: var(--panel); z-index: 2; }
@media (max-width: 760px) {
  .coins-box[data-layout="list"] { padding: 0 4px; }
  table.coins.rows, table.coins.rows tbody { display: block; min-width: 0; }
  table.coins.rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.coins.rows tbody tr.rw { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    grid-template-areas: "pic coin coin coin" "pic dia wt gr" "disc st st go"; column-gap: 10px; row-gap: 6px; padding: 12px 4px;
    border-bottom: 1px solid var(--rule); align-items: start; }
  table.coins.rows tbody tr.rw > td { padding: 0; border: 0; min-width: 0; max-width: none; width: auto; }
  table.coins.rows td.pic-col { grid-area: pic; }
  table.coins.rows td.coin-col { grid-area: coin; }
  table.coins.rows td.m.dia { grid-area: dia; }
  table.coins.rows td.m.wt { grid-area: wt; }
  table.coins.rows td.m.gr { grid-area: gr; }
  table.coins.rows td.m, table.coins.rows td.m.num { text-align: left; }
  table.coins.rows td.m .src { white-space: normal; }
  table.coins.rows td.id-col, table.coins.rows td.m.metal { display: none; }
  table.coins.rows td.st-col { grid-area: st; }
  table.coins.rows td.disc-col { grid-area: disc; justify-self: center; }
  table.coins.rows td.go-col { grid-area: go; align-self: center; text-align: right; }
  table.coins.rows .id-ph { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.coins.rows .sub { max-width: none; font-size: 12.5px; }
  table.coins.rows .why { max-width: none; white-space: normal; }
  table.coins.rows .st { display: inline; margin-right: 6px; }
  table.coins.rows .why { display: inline; }
  table.coins.rows td.m .v, table.coins.rows .nre { font-size: 13px; }
  table.coins.rows .src { font-size: 11.5px; }
  table.coins.rows tr.rw-more { display: block; }
  table.coins.rows tr.rw-more[hidden] { display: none; }
  table.coins.rows tr.rw-more td { display: block; padding: 0 6px 14px 64px; }
  .row-details { grid-template-columns: minmax(0, 1fr); }
  table.coins.rows .row-act a[data-next], table.coins.rows .row-act button[data-next] { height: 36px; }
}

/* the coins page: wide enough for the List's columns and five cards across (the design's 1280 px content) */
body:has(#coinrows) main { max-width: 1320px; }

/* a date said with its calendar or its source under a card's status (the Tree's cards: "1277 AH (AD 1860–61)") */
.coin-grid .cap-date { display: block; min-width: 0; font-size: .75rem; line-height: 1.35; color: var(--ink2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* the Tree orders by the coins' dates: no sort to choose there */
body:has(#coinrows[data-layout="tree"]) .list-facets .sort { display: none; }