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

   Every class is prefixed `sw-` so nothing here can reach the crochet screens.
   Shared pieces (.card, .list, .list-item, .check, .chip, .pill, .btn, .bar,
   .stitch-btn, .bottombar, .bar-btn) come from css/app.css and are only
   *extended* here, never redefined. */

/* --------------------------------------------------------------------------
   1. Progress strip
   -------------------------------------------------------------------------- */

.sw-progress {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.sw-progress .bar { margin: 0; }
.sw-progress-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. The step card
   -------------------------------------------------------------------------- */

.sw-step-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 34vh;
  overflow: hidden;
}
.sw-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sw-step-n {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text);
}
.sw-step-section {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 'card 2 of 3': one printed step on several cards (Wave E). Secondary to
   the printed "STEP n" beside it. */
.sw-card-chip {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.sw-card-chip[hidden] { display: none; }
.sw-step-text {
  font-size: 17px;
  line-height: 1.45;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sw-step-card.sw-empty .sw-step-text { color: var(--text-muted); font-size: 15px; }

.sw-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  margin-top: -4px;
}
.sw-sa {
  background: none;
  border: none;
  padding: 0 4px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: underline;
  font-variant-numeric: tabular-nums;
}
.sw-page-chip { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   3. The Step done button
   -------------------------------------------------------------------------- */

.sw-step-btn {
  /* The step text needs the room the crochet number does not. */
  min-height: max(26vh, 150px);
  gap: 6px;
}
.sw-step-mark {
  font-family: var(--font-display);
  font-size: min(18vw, 84px);
  line-height: 1;
}
.sw-step-btn .stitch-hint { font-size: 12px; opacity: 0.8; }
.sw-step-btn[disabled] { opacity: 0.5; box-shadow: var(--shadow); }

.sw-back {
  align-self: center;
  margin-top: -4px;
}

/* --------------------------------------------------------------------------
   4. Quilt block counters
   -------------------------------------------------------------------------- */

.sw-units { display: flex; flex-direction: column; gap: var(--gap); }
.sw-units:empty { display: none; }

.sw-unit {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.sw-unit:active { transform: translateY(1px); }
.sw-unit-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.sw-unit-count {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sw-unit .bar { margin-top: 4px; }
.sw-unit-pct {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. The mini rows
   -------------------------------------------------------------------------- */

.sw-mini { padding: 4px 8px; }
.sw-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 4px 4px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.sw-mini-row:last-child { border-bottom: none; }
.sw-mini-icon { flex: 0 0 auto; font-size: 18px; }
.sw-mini-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mini-go { flex: 0 0 auto; color: var(--text-muted); font-size: 18px; }

/* --------------------------------------------------------------------------
   6. Sheets
   -------------------------------------------------------------------------- */

.sw-sheet-head { margin: 0 0 8px; font-weight: 700; }

.sw-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 2px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sw-cut-all { min-height: 44px; font-size: 13px; }

.sw-section-head {
  margin: 12px 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}

/* Steps sheet */
.sw-step-jump {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  min-height: 40px;
  padding: 2px 0;
}
.sw-step-row-n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 26px;
}
.sw-step-row-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.sw-step-row.current { background: var(--surface-2); border-radius: var(--radius-sm); }
.sw-step-row.current .sw-step-row-n { color: var(--text); }

/* Cutting sheet */
.sw-count-chip {
  flex: 0 0 auto;
  min-width: 56px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.sw-cut-row.done .sw-count-chip {
  background: var(--success);
  border-color: var(--success);
  color: var(--primary-text);
}
.sw-cut-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  min-height: 40px;
}
.sw-cut-name { font-weight: 700; }
.sw-cut-sub { font-size: 12px; color: var(--text-muted); }
.sw-fold, .sw-kind { flex: 0 0 auto; font-size: 11px; }

/* Notions sheet */
.sw-add-row { display: flex; gap: 8px; margin-top: 10px; }
.sw-add-row input { flex: 1 1 auto; min-width: 0; }
.sw-copy-area { min-height: 160px; width: 100%; }

/* Seam allowance sheet */
.sw-sa-big {
  font-family: var(--font-display);
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--text);
}

/* Size sheet */
.sw-size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-size-chip { cursor: pointer; min-height: 44px; padding: 4px 14px; font-size: 14px; }
.sw-size-chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.sw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sw-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sw-table th, .sw-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: right;
}
.sw-table thead th { color: var(--text-muted); font-weight: 800; }
.sw-table tbody th { text-align: left; font-weight: 700; }
.sw-table tr:last-child th, .sw-table tr:last-child td { border-bottom: none; }
.sw-table th.on, .sw-table td.on {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}
.sw-alt { min-height: 90px; width: 100%; }

/* Fabric sheet */
.sw-fabric-row { padding: 10px 12px; }
.sw-fabric-name { font-weight: 800; margin-bottom: 6px; }
.sw-fabric-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-fabric-amounts .chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.sw-fabric-raw { font-size: 13px; }
.sw-fabric-grouped { margin: 6px 0 0; }

/* "What you need": the chosen size pulled out of the grouped table. */
.sw-fabric-mine {
  padding: 10px 12px;
  border-color: var(--accent-2);
}
.sw-fabric-mine-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sw-fabric-mine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
}
.sw-fabric-mine-size {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--text);
}
.sw-fabric-mine-amount {
  flex: 0 0 auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sw-fabric-mine-at {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
  word-break: break-word;
}

/* Machine sheet */
.sw-preset {
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-height: 40px;
}

/* --------------------------------------------------------------------------
   7. Import sheet
   -------------------------------------------------------------------------- */

.sw-paste { margin-top: 12px; }
.sw-paste > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text-muted);
}
.sw-paste-area { width: 100%; min-height: 140px; margin-bottom: 8px; }

.sw-review { margin-top: 12px; }
.sw-review-row .item-text { display: flex; flex-direction: column; gap: 2px; }
.sw-review-label { font-weight: 800; }
.sw-review-count { font-size: 12px; color: var(--text-muted); }
.sw-review-row.sw-empty-row { opacity: 0.5; }
.sw-para-action { padding-top: 2px; padding-bottom: 2px; }
.sw-para-action .linkish { text-align: left; }

/* --------------------------------------------------------------------------
   7b. Paragraph picker ("Make steps from paragraphs")
   -------------------------------------------------------------------------- */

.sw-para-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 10px 0 2px;
}
.sw-para-count {
  flex: 1 1 100%;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
}
.sw-para-bar .linkish {
  flex: 0 0 auto;
  min-height: 40px;
  font-size: 13px;
  white-space: nowrap;
}

.sw-para-list .sw-para-row { align-items: flex-start; gap: 10px; }
.sw-para-row.on { background: var(--surface-2); border-radius: var(--radius-sm); }
.sw-para-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}
.sw-para-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sw-para-text {
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  padding: 2px 0;
  word-break: break-word;
}
.sw-para-row:not(.on) .sw-para-text { color: var(--text-muted); }
.sw-para-tools { display: flex; gap: 8px; margin-top: 4px; }
.sw-para-tool {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}
.sw-para-tool:disabled { opacity: 0.35; }
.sw-para-tool.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.sw-para-split {
  margin-top: 6px;
  border-left: 2px solid var(--accent-2);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sw-para-split-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.sw-para-split-opt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
  font-size: 13px;
  min-height: 40px;
  padding: 2px 0;
  word-break: break-word;
}
.sw-para-split-mark { flex: 0 0 auto; color: var(--text); font-weight: 800; }
.sw-para-split-text { flex: 1 1 auto; min-width: 0; }

.sw-warnings { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sw-warning {
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Page images: the chip, the viewer and the thumbnails
   -------------------------------------------------------------------------- */

/* The chip is a button when the page image is there, plain text when it is not. */
.sw-page {
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.sw-page:not(.sw-page-plain) {
  border-color: var(--accent-2);
  color: var(--text);
  font-weight: 700;
}
.sw-page.sw-page-plain {
  opacity: 1;
  cursor: default;
  color: var(--text-muted);
}

.sw-page-frame {
  position: relative;
  width: 100%;
  height: 56vh;
  max-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;                 /* the pinch/drag gesture is ours */
  cursor: grab;
}
.sw-page-frame.zoomed { cursor: grabbing; }
.sw-page-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  background: #fff;                   /* a PDF page is paper, in every theme */
}
.sw-page-empty { padding: 16px; text-align: center; }

.sw-pagebar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.sw-page-nav {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}
.sw-page-nav[disabled] { opacity: 0.35; }
.sw-page-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sw-page-back { margin-top: 8px; }

.sw-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.sw-page-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.sw-thumb-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  color: var(--text-muted);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.sw-thumb-img img { max-width: 100%; max-height: 110px; display: block; }
.sw-thumb-label { font-size: 12px; font-weight: 700; }

/* Import sheet: the opt-in row and the render progress */
.sw-pages-row .sw-review-count { white-space: normal; }
.sw-page-progress { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sw-page-progress .bar { margin: 0; }

/* --------------------------------------------------------------------------
   10. The 2D cutting table and the step ring (research §B.4.6)
   -------------------------------------------------------------------------- */

.sw-cuttable {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
}
.sw-cuttable[hidden] { display: none; }
.sw-ct { width: 100%; height: auto; display: block; }
.sw-ct-bg {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1;
}
.sw-ct-fill {
  fill: var(--accent-2);
  transition: width 260ms ease;
}
.sw-ct-name {
  font-size: 8px;
  font-weight: 700;
  fill: var(--text-muted);
}
.sw-ct-piece.done .sw-ct-name { fill: var(--primary-text); }

/* The step number keeps its ring company on the left; the section stays right. */
.sw-step-head { justify-content: flex-start; align-items: center; }
.sw-step-section { margin-left: auto; }
.sw-step-ring { width: 30px; height: 30px; flex: 0 0 auto; margin-left: 6px; }
.sw-ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 2.5;
}
.sw-ring-arc {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 260ms ease;
}
.sw-ring-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  fill: var(--text);
}

/* --------------------------------------------------------------------------
   11. Wave F: split / merge, the optional group, cut counters, shopping list
   -------------------------------------------------------------------------- */

/* The step card's own split link, under a long card's text. */
.sw-card-split {
  align-self: flex-start;
  flex: 0 0 auto;
  min-height: 36px;
  font-size: 13px;
}
.sw-card-split[hidden] { display: none; }

/* The step list: ✂ per row, and its panel. */
.sw-step-row { align-items: center; }
.sw-step-tool { min-height: 40px; min-width: 40px; margin-left: 2px; }
.sw-step-tools-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 6px 8px;
  padding: 4px 0 6px 10px;
  border-left: 2px solid var(--accent-2);
}
.sw-step-tools-panel .sw-merge { margin-top: 6px; }
.sw-merge-next { margin: 2px 0 0; word-break: break-word; }

/* Optional extras: collapsed, after the construction, never counted. */
.sw-optional {
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px 6px;
}
.sw-optional-head {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-muted);
}
.sw-optional[open] .sw-optional-head { color: var(--text); }
.sw-optional-hint { margin: 0 0 4px; }

/* Cutting rows: − and the "2 of 4 cut" chip side by side. */
.sw-cut-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.sw-cut-minus {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}
.sw-cut-minus:disabled { opacity: 0.35; }
.sw-count-chip { min-width: 84px; white-space: nowrap; font-size: 13px; }
.sw-count-big { border-style: dashed; }
.sw-cut-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  opacity: 0.85;
}
.sw-cut-row .sw-cut-text { min-width: 0; word-break: break-word; }

.sw-cutcount-readout {
  font-family: var(--font-display);
  font-size: 30px;
  margin: 0 0 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sw-cutcount-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.sw-cutcount-btn { min-height: 48px; font-size: 16px; font-weight: 800; }
.sw-cutcount-ends { display: flex; gap: 6px; margin-top: 6px; }
.sw-cutcount-ends .btn { flex: 1 1 0; min-height: 44px; }

/* Cutting layout pages */
.sw-layouts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
}
.sw-layouts-label { font-size: 13px; font-weight: 800; color: var(--text-muted); }
.sw-layouts-hint { margin-top: 0; }

/* Shopping list toggles and preview */
.sw-shop-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.sw-shop-preview { margin-top: 4px; }
.sw-shop-preview > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text-muted);
}
.sw-shop-lines { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.45; }
.sw-shop-lines li { word-break: break-word; }

/* Seam allowance at the point of use */
.sw-step-meta { flex-wrap: wrap; }
.sw-sa.sw-sa-alt { color: var(--text); text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; }
.sw-sa-reminder { padding: 10px 12px; margin-bottom: 10px; border-color: var(--accent-2); }
.sw-sa-reminder p { margin: 4px 0 0; }

/* --------------------------------------------------------------------------
   8. Wider screens and reduced motion
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
  .sw-step-card { max-height: none; }
  .sw-step-btn { min-height: 200px; }
  .sw-step-mark { font-size: 72px; }
}

@media (min-width: 700px) {
  .sw-page-frame { height: 62vh; max-height: 700px; }
}

/* --------------------------------------------------------------------------
   Touch targets and scroll affordances
   -------------------------------------------------------------------------- */

/* Everything you tap is at least 44px tall. */
.sw-count-chip,
.sw-page,
.sw-cut-text,
.sw-step-jump,
.sw-cuttable { min-height: 44px; }

/* A long step scrolls inside its card. Without a cue the text just stops at
   the card edge and reads as if the pattern were truncated. These shadows
   only show while there is more to scroll to (the `local` layers cover them
   at each end). */
.sw-step-text {
  background:
    linear-gradient(var(--surface) 40%, rgba(0, 0, 0, 0)) top / 100% 16px no-repeat local,
    linear-gradient(rgba(0, 0, 0, 0), var(--surface) 60%) bottom / 100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--border), rgba(0, 0, 0, 0)) top / 100% 8px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--border), rgba(0, 0, 0, 0)) bottom / 100% 8px no-repeat scroll;
}

@media (prefers-reduced-motion: reduce) {
  .sw-unit:active { transform: none; }
  .sw-step-btn { transition: none; }
  .sw-step-btn.pressed { transform: none; }
  /* The cutting table jumps straight to the new fill. */
  .sw-ct-fill, .sw-ring-arc { transition: none; }
}