/* Thready or Not — css/xstitch.css
   Cross-stitch screens. Theme variables only (SPEC.md "Themes contract")
   plus this module's own layout numbers. Loaded after css/themes.css.

   1. project screen: chart strip, current colour, tap button, key list
   2. sheets: chart, floss, fabric, pages, parking, colour editor
   3. import and photo
   -------------------------------------------------------------------------- */

/* The sections below are appended straight into #craft-body, so the shell's
   .craft-body rules (scrolling column, sticky bottom bar) already apply. */

.xs-h2 { font-size: 15px; margin: 0; }
.xs-h3 { font-size: 15px; margin: 0 0 4px; }

/* --------------------------------------------------------------------------
   1. The chart strip
   -------------------------------------------------------------------------- */

.xs-chart-card {
  padding: 0;
  overflow: hidden;
}

.xs-chart-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.xs-chart-wrap.xs-strip { height: 34vh; min-height: 170px; max-height: 320px; }
.xs-chart-wrap.xs-full { height: 58vh; min-height: 260px; }

.xs-chart {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

/* The permanent position readout (wave F): line 1 from the top-left, line 2
   from the centre arrows. It clears the 26-32 px left ruler. A system font,
   not the theme's display face: Press Start 2P would make "22 right · 88 up
   from centre" wider than a phone. */
.xs-coord {
  position: absolute;
  left: 36px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  max-width: calc(100% - 44px);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.94;
}
.xs-coord-grid { font-weight: 700; }
.xs-coord-centre { color: var(--text-muted); font-size: 11px; }
.xs-coord-grid:empty, .xs-coord-centre:empty { display: none; }
.xs-coord:has(.xs-coord-grid:empty) { display: none; }

.xs-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Image-only mode: the rendered PDF pages. */
.xs-page-frame {
  position: relative;
  height: 34vh;
  min-height: 170px;
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.xs-page-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.xs-page-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.xs-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}
.xs-page-nav {
  min-width: 44px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 18px;
}
.xs-page-nav[disabled] { opacity: 0.35; }
.xs-page-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   The current colour bar
   -------------------------------------------------------------------------- */

.xs-cb {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  /* Long keys (a 98-colour chart is a dozen screens) scroll the bar away;
     keep the current colour pinned while the key scrolls underneath. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}
.xs-cb-nav {
  flex: 0 0 auto;
  width: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 20px;
}
.xs-cb-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.xs-cb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xs-cb-code {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xs-cb-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The little floss swatch, used in the colour bar, key and floss list. */
.xs-swatch {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px;
  line-height: 1;
}
.xs-swatch-big {
  width: 72px;
  height: 72px;
  font-size: 26px;
  margin: 0 auto 10px;
  display: flex;
}

/* --------------------------------------------------------------------------
   The tap button and its live picture
   -------------------------------------------------------------------------- */

#xs-stitch-btn { min-height: max(34vh, 170px); }
.xs-live { z-index: 0; }

.xs-readout {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.xs-tap-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.xs-tap-actions .btn { min-width: 76px; }

/* --------------------------------------------------------------------------
   The colour key
   -------------------------------------------------------------------------- */

.xs-key-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.xs-sort button { font-size: 12px; padding: 5px 9px; }

.xs-key-list { margin-bottom: 8px; }

.xs-key-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
}
.xs-key-row.current { background: var(--surface-2); border-radius: var(--radius-sm); }
.xs-key-row.complete .xs-key-code { opacity: 0.6; }

.xs-key-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
  color: var(--text);
  padding: 2px;
}
.xs-key-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.xs-key-code {
  font-size: 14px;
  font-weight: 700;
  /* Floss names run long ("Mahogany Ultra Very Light"). One clipped line told
     you almost nothing, so let the name take two before it gives up. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  overflow: hidden;
}
.xs-key-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.xs-key-prog { margin-top: 2px; width: 100%; display: block; }
.xs-key-prog .bar { display: block; height: 5px; }
.xs-key-prog .bar-fill { display: block; height: 100%; }
.xs-key-tick { color: var(--success); font-weight: 700; flex: 0 0 auto; }

.xs-key-iso,
.xs-key-edit {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 15px;
}
.xs-key-iso.on { color: var(--text); background: var(--surface-2); }
.xs-key-have {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
}
.xs-key-have.on { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.xs-key-empty { margin: 4px 0 10px; font-size: 13px; }

/* --------------------------------------------------------------------------
   2. Sheets
   -------------------------------------------------------------------------- */

.xs-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.xs-tool-seg { flex: 1 1 auto; }
.xs-tool-seg button { font-size: 12px; padding: 6px 8px; }

/* Which layer the mark tools act on: crosses, backstitch, knots, fractionals.
   Only shown when the chart actually has more than one. */
.xs-layer-seg {
  width: 100%;
  margin-bottom: 8px;
  /* a direct child of the sheet's flex column, so it must refuse to shrink */
  flex: 0 0 auto;
}
.xs-layer-seg button {
  font-size: 11px;
  padding: 7px 3px;
  min-width: 0;
  flex: 1 1 0;
}
.xs-erase { min-height: 44px; padding: 6px 12px; }
.xs-erase.on { background: var(--danger); color: var(--primary-text); border-color: var(--danger); }

.xs-zoom {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.xs-zoom .btn { flex: 1 1 0; min-height: 44px; min-width: 0; padding-left: 4px; padding-right: 4px; }
.xs-zoom .xs-see-page,
.xs-zoom .xs-find-next { font-size: 18px; }

/* The full-screen page viewer (wave F, 04 #3 / #14). */
.sheet-xs-page .sheet-body { display: flex; flex-direction: column; }
.xs-pv-frame {
  position: relative;
  flex: 0 0 auto;
  height: 50vh;
  min-height: 240px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.xs-pv-frame:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.xs-pv-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.xs-pv-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.xs-pv-mark {
  position: absolute;
  box-sizing: border-box;
  border: 2.5px solid #e0245e;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.xs-pv-frame .xs-page-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xs-pv-bar { border-top: none; padding: 6px 0 0; }
.xs-pv-done { width: 100%; min-height: 44px; margin-top: 8px; }
.xs-pv-note { margin-top: 6px; }
.xs-thumb-region {
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.xs-page-frame .xs-expand { z-index: 1; }
.xs-hint { font-size: 12px; margin-top: 8px; }

.xs-two {
  display: flex;
  gap: 10px;
}
.xs-two > * { flex: 1 1 0; min-width: 0; }

.xs-size-box { margin-top: 4px; }
.xs-size-main {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 4px;
}
.xs-size-table { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.xs-size-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.xs-size-row:last-child { border-bottom: none; }

.xs-floss-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.xs-floss-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.xs-floss-total { margin-bottom: 8px; font-size: 13px; }
.xs-disclaimer { margin-top: 12px; font-size: 12px; }

.xs-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.xs-page-box { display: flex; flex-direction: column; gap: 4px; }
.xs-page-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.xs-thumb-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.xs-thumb-img img { max-width: 100%; max-height: 110px; display: block; }
.xs-thumb-label { font-size: 12px; text-align: center; }
.xs-thumb-done {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.xs-thumb-tick { min-height: 44px; font-size: 12px; padding: 4px 8px; }

.xs-park-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.xs-park-corner { font-size: 20px; flex: 0 0 auto; width: 26px; text-align: center; }
.xs-park-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.xs-copy-area {
  width: 100%;
  min-height: 200px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   3. Import and photo
   -------------------------------------------------------------------------- */

.xs-preview { margin-top: 12px; }
.xs-preview-card { padding: 12px; }

.xs-confidence {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.xs-conf-good { border-color: var(--success); color: var(--text); }
.xs-conf-ok { border-color: var(--accent-2); color: var(--text); }
.xs-conf-none { border-color: var(--danger); color: var(--text); }

.xs-key-preview { max-height: 46vh; overflow-y: auto; margin: 8px 0; }
.xs-preview-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.xs-preview-row.dropped { opacity: 0.4; text-decoration: line-through; }

.xs-warnings { margin: 8px 0; font-size: 12px; }
.xs-warn-list { margin: 4px 0 0 18px; padding: 0; color: var(--text-muted); }
.xs-warn-list li { margin: 2px 0; }

.xs-import-more { margin-top: 14px; }
.xs-import-note { margin-top: 12px; font-size: 12px; }

/* Storage footer in the Pages sheet: craftData size + BlobStore usage. */
.xs-storage {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.xs-storage-line {
  font-size: 12px;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.xs-storage .btn { margin-top: 8px; }
.xs-render-progress { margin: 8px 0; font-variant-numeric: tabular-nums; }

.xs-photo-preview {
  display: block;
  width: 100%;
  height: 30vh;
  min-height: 150px;
  margin: 10px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.xs-photo-readout {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
/* The grid-reader beta and the printable-chart options. */
.xs-beta-btn { margin-top: 10px; }
.xs-beta-box {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.xs-beta-box p { margin: 0 0 6px; }
.xs-beta-ok { font-weight: 700; }
.xs-print-estimate { margin: 10px 0 0; font-variant-numeric: tabular-nums; }

/* The crop frame over the decoded photo. Handles are 28 px so a thumb can
   grab them at 375 px wide; the visible corner mark inside is smaller. */
.xs-crop {
  position: relative;
  /* the sheet body is a flex column: without this the box (overflow:hidden,
     so min-height resolves to 0) collapses to its border. */
  flex: none;
  /* Shrink-wrapped to the photo: the frame is placed in percent of this
     box, so the box must be exactly the picture, with no letterbox bands
     beside a tall photo (object-fit: contain used to leave them). */
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 6px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.xs-crop img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 44vh;
  pointer-events: none;
}
.xs-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
  touch-action: none;
}
.xs-crop-h {
  position: absolute;
  width: 28px;
  height: 28px;
  touch-action: none;
  cursor: nwse-resize;
}
.xs-crop-h::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 3px;
  background: var(--primary);
  border: 2px solid var(--primary-text);
  box-shadow: var(--shadow);
}
/* Keyboard: the frame and each corner take focus (arrow keys nudge them),
   and the focus has to be visible over both the photo and the dimming. */
.xs-crop-box:focus { outline: none; }
.xs-crop-box:focus-visible {
  outline: 3px dashed var(--primary-text, #fff);
  outline-offset: -6px;
}
.xs-crop-h:focus { outline: none; }
.xs-crop-h:focus-visible::after {
  outline: 3px solid var(--primary-text, #fff);
  outline-offset: 2px;
  transform: scale(1.25);
}
.xs-crop-tl { left: -14px; top: -14px; }
.xs-crop-tr { right: -14px; top: -14px; cursor: nesw-resize; }
.xs-crop-bl { left: -14px; bottom: -14px; cursor: nesw-resize; }
.xs-crop-br { right: -14px; bottom: -14px; }

.xs-crop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.xs-crop-hint { font-size: 12px; font-variant-numeric: tabular-nums; }
.xs-crop-reset { flex: none; }

.xs-advanced { margin: 10px 0; }
.xs-advanced summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 700;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   4. Wave J: read a chart picture, and Row by row
   -------------------------------------------------------------------------- */

.xs-read-item { align-items: flex-start; text-align: left; }
.xs-read-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xs-read-item-sub { font-size: 12px; }
.xs-pic-card .btn { margin-top: 8px; }
.xs-pdfpic { margin-top: 4px; }

.xs-swatch-sm { width: 24px; height: 24px; font-size: 13px; }

/* status line: reading… / what was read / what went wrong */
.xs-read-status {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.xs-read-status.is-busy { color: var(--text-muted); font-weight: 400; }
.xs-read-status.is-bad { color: var(--danger); }

.xs-read-seg { flex: 0 0 auto; margin-bottom: 8px; }
.xs-read-seg button { flex: 1 1 0; font-size: 12px; }

.xs-read-frame {
  flex: 0 0 auto;
  height: 42vh;
  min-height: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
}
.xs-read-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.xs-read-canvas.picking { cursor: crosshair; }
.xs-read-canvas:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

.xs-read-results { margin-top: 10px; }
.xs-read-note { font-size: 12px; margin: 4px 0 8px; }
.xs-read-fail p { margin: 0 0 8px; }

/* the verdict line, coloured by how the counts came out */
.xs-verdict {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left-width: 5px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.xs-verdict-exact, .xs-verdict-close { border-color: var(--success); }
.xs-verdict-off { border-color: var(--danger); }
.xs-verdict-unchecked { border-color: var(--accent-2); }

.xs-unsure { font-size: 13px; margin: 0 0 8px; color: var(--text-muted); }
.xs-unsure.has-unsure { color: var(--text); }

.xs-count-wrap { margin: 4px 0 10px; overflow-x: auto; }
.xs-count-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.xs-count-table th, .xs-count-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.xs-count-table thead th { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.xs-count-table .num { text-align: right; white-space: nowrap; }
.xs-count-name { font-weight: 400; }
.xs-count-name .xs-swatch { margin-right: 6px; vertical-align: middle; }
.xs-count-label { font-weight: 700; }
.xs-count-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.xs-count-mark { text-align: right; white-space: nowrap; font-weight: 700; min-width: 44px; }
.xs-count-table tr.off .xs-count-mark { color: var(--danger); }
.xs-mark-ok { color: var(--success); }
.xs-mark-near { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.xs-count-in { width: 76px; min-height: 36px; text-align: right; }
.xs-fix { font-size: 11px; padding: 0; min-height: 0; }

.xs-unmatched {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.xs-um-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.xs-glyph {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.xs-um-text { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.xs-um-n { font-weight: 700; }
.xs-um-pick {
  flex: 0 1 52%;
  min-width: 0;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.xs-um-dmc { display: flex; gap: 8px; margin: 0 0 6px 46px; }
.xs-um-dmc input { flex: 1 1 auto; min-width: 0; }

.xs-rename-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }

.xs-read-adjust { flex: 0 0 auto; }
.xs-nudge { display: flex; flex-wrap: wrap; gap: 6px; }
.xs-nudge .btn { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 4px; font-size: 17px; }
.xs-nudge .xs-nudge-word { font-size: 13px; }
.xs-fabric-row { display: flex; align-items: center; gap: 8px; }
.xs-fabric-row .seg { flex: 1 1 auto; }
.xs-fabric-row .seg button { font-size: 12px; }
.xs-read-crop { margin: 8px 0; }
.xs-read-crop summary { cursor: pointer; padding: 8px 0; font-weight: 700; font-size: 14px; }

/* the project's banner for a chart read from a picture */
.xs-read-band {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  min-height: 44px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: none;
  border-top: 1px solid var(--border);
  border-left: 5px solid var(--accent-2);
}
.xs-read-band.xs-verdict-exact, .xs-read-band.xs-verdict-close { border-left-color: var(--success); }
.xs-read-band.xs-verdict-off { border-left-color: var(--danger); }
.xs-read-band-text { flex: 1 1 auto; min-width: 0; }
.xs-read-band-go { flex: 0 0 auto; font-size: 18px; color: var(--text-muted); }
.xs-read-band:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

/* Row by row */
.xs-tap-actions .xs-rows-btn { min-width: 0; font-size: 13px; padding-left: 10px; padding-right: 10px; }
.xs-row-opts { flex: 0 0 auto; margin-top: 0; }
.xs-row-opts summary { display: flex; flex-direction: column; gap: 2px; }
.xs-row-opts-sum { font-size: 12px; font-weight: 400; }
.xs-row-opts .seg button { font-size: 12px; }

.xs-row-cols {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 8px;
}
.xs-row-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}
.xs-row-col.on { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }

.xs-row-now {
  flex: 0 0 auto;
  padding: 12px;
  border-radius: var(--radius);
  border: 2px solid var(--primary);
  background: var(--surface);
  color: var(--text);
}
.xs-row-now.done { border-color: var(--success); }
.xs-row-now-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.xs-row-now-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.xs-row-now-sub { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.xs-runs { display: flex; flex-wrap: wrap; gap: 4px; }
.xs-run {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.xs-run-sw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}
.xs-run-skip { padding: 2px 8px; font-weight: 400; color: var(--text-muted); background: transparent; border-style: dashed; }
/* Counts are numbers: a system face keeps them compact under the pixel
   display themes (Press Start 2P is a full em per digit). */
.xs-run { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* readable at arm's length; a long row scrolls inside the card so Row done
   stays on screen */
.xs-runs-big { gap: 6px; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }
.xs-runs-big .xs-run { font-size: 20px; padding: 4px 10px 4px 4px; }
.xs-runs-big .xs-run-sw { width: 30px; height: 30px; font-size: 17px; }
.xs-runs-big .xs-run-skip { padding: 4px 10px; font-size: 16px; }

.xs-row-done { margin-top: 12px; min-height: 64px; font-size: 18px; }
.xs-row-done.is-done { font-size: 15px; }
.xs-row-nav { display: flex; gap: 8px; margin-top: 8px; }
.xs-row-nav .btn { flex: 1 1 0; min-height: 48px; min-width: 0; }
.xs-row-copy { flex: 0 0 auto; display: flex; gap: 8px; margin: 10px 0; }
.xs-row-copy .btn { flex: 1 1 0; min-height: 44px; min-width: 0; font-size: 13px; }

.xs-row-list {
  position: relative;          /* offsetTop of the rows is measured from here */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.xs-row-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.xs-row-item.current { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.xs-row-item.done { opacity: 0.62; }
.xs-row-item.done.current { opacity: 1; }
.xs-row-item-head { display: flex; align-items: baseline; gap: 10px; }
.xs-row-item-n { font-weight: 700; font-size: 14px; }
.xs-row-item-sub { font-size: 12px; color: var(--text-muted); flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.xs-row-more { min-height: 44px; }

/* --------------------------------------------------------------------------
   Wider screens: the chart gets more room, the key sits beside it.
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .xs-chart-wrap.xs-strip { height: 40vh; max-height: 420px; }
  .xs-chart-wrap.xs-full { height: 64vh; }
  .xs-page-frame { height: 40vh; max-height: 420px; }
  #xs-stitch-btn { min-height: 240px; }
  .xs-read-frame { height: 50vh; }
}

@media (max-height: 680px) {
  .xs-read-frame { height: 34vh; min-height: 170px; }
  .xs-row-done { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The chart and the live preview are canvases and never transitioned; what
     does move on this screen is the big button's press nudge. */
  .xs-chart, .xs-live { transition: none !important; }
  #xs-stitch-btn { transition: none; }
  #xs-stitch-btn.pressed { transform: none; }
}