/* sections.css: what goes inside a section (A3b). Every class here is
 * .sc-*, set by public/js/sections/; the frame around it (.cs-card, the
 * title, Paper and Cards) is sheet.css (A3a). Colours are Kit's Clean
 * tokens only; every transition names a --duration and an --ease token.
 * Paper is the MPMB homage: grey fields, squarer boxes. Under 560 px of
 * sheet (.cs-sheet.is-narrow) every control is a 44 px target. */

.cs-section-body { container-type: inline-size; }

/* ---- shared pieces ---- */
.sc-lbl {
  display: block; margin: 0 0 2px; font-size: var(--text-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-note { margin: 6px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.sc-speed { white-space: nowrap; }
.sc-empty { margin: 4px 0; font-size: var(--text-sm); color: var(--text-muted); }
.sc-small { font-size: var(--text-xs); }
.sc-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sc-faint { color: var(--text-muted); }
.sc-h { margin: 0 0 4px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.sc-sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.sc-sub-block { margin-top: 8px; }
.sc-spacer { flex: 1; }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-text { margin: 4px 0; font-size: var(--text-sm); color: var(--text-muted); }
.sc-text b { color: var(--text); }
.sc-link.is-tag { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.sc-roll { font-weight: 600; color: var(--text); }
.sc-aside { font-style: italic; }
.sc-ul { margin: 4px 0; padding-left: 18px; font-size: var(--text-sm); color: var(--text-muted); }
.sc-quote { margin: 4px 0 4px 8px; padding-left: 8px; border-left: 2px solid var(--border); }
.sc-hr { border: 0; border-top: 1px solid var(--border); }
.sc-rules-table { margin: 4px 0; font-size: var(--text-xs); }

/* A derived number that explains itself: looks like text, taps like a button. */
.sc-num {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
  min-width: 1.6em; padding: 0 3px; border: 0; border-radius: 6px; background: none;
  color: inherit; font: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
span.sc-num { cursor: default; }
@media (hover: hover) { button.sc-num:hover { background: var(--surface-alt); } }
.sc-num.is-overridden { color: var(--accent-soft-text); background: var(--accent-soft); }
.sc-ovr { font-size: var(--text-xs); }
.sc-computed { font-size: var(--text-xs); font-weight: 400; color: inherit; }
.sc-num-sm { font-size: var(--text-xs); color: var(--text-muted); }

.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: var(--text-sm); white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.sc-btn.is-ghost { border-color: transparent; background: none; color: var(--link); }
.sc-btn:disabled { cursor: default; color: var(--text-muted); }
@media (hover: hover) { .sc-btn:not(:disabled):hover { background: var(--surface-alt); } }
.sc-btn.sc-toggle.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-soft-text); }
.sc-step { min-width: 30px; padding: 0 6px; font-family: var(--font-mono); }
.sc-rm { min-width: 30px; padding: 0 6px; color: var(--text-muted); border-color: transparent; background: none; }
.sc-link {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .sc-link:hover { color: var(--link); } }

.sc-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sc-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted);
  font: inherit; font-size: var(--text-xs); white-space: nowrap; max-width: 100%;
}
.sc-sub-block .sc-chip { white-space: normal; }
.sc-chip.is-danger { background: var(--danger-soft); color: var(--danger-soft-text); border-color: transparent; cursor: pointer; }
.sc-chip.is-accent { background: var(--accent-soft); color: var(--accent-soft-text); border-color: transparent; }
.sc-chip.is-warn { background: var(--warning-soft); color: var(--warning-soft-text); border-color: transparent; white-space: normal; }
.sc-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-soft-text); font-size: var(--text-xs); font-weight: 400;
  white-space: nowrap; vertical-align: middle;
}
.sc-tag.is-muted { background: var(--surface-alt); color: var(--text-muted); }
.sc-tag.is-warn { background: var(--warning-soft); color: var(--warning-soft-text); }

/* Fields: plain in Cards, grey and borderless in Paper. */
.sc-fld {
  width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm);
}
.sc-area { display: block; min-height: 44px; resize: vertical; line-height: 1.4; }
.sc-box {
  display: block; min-height: 32px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: var(--text-sm); overflow-wrap: break-word;
}
.cs-sheet.is-paper .sc-fld, .cs-sheet.is-paper .sc-box { background: var(--surface-alt); border-color: transparent; }
.sc-btn:focus-visible, .sc-num:focus-visible, .sc-fld:focus-visible, .sc-pip:focus-visible, .sc-row:focus-visible,
.sc-link:focus-visible, .sc-chip:focus-visible, .sc-eq:focus-visible { outline: none; box-shadow: var(--ring); }
.sc-text-field { display: block; margin-bottom: 6px; }

/* Bars: the fill is scaled with a transform (the only inline style). */
.sc-bar { display: block; height: 6px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: var(--surface-alt); }
.sc-bar i {
  display: block; height: 100%; background: var(--accent); transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-standard), background-color var(--duration) var(--ease-standard);
}
.cs-sheet.is-paper .sc-bar { background: var(--border); }
.sc-hpbar { height: 8px; margin: 6px 0 8px; }
.sc-hpbar i { background: var(--success); }
.sc-hpbar.is-low i { background: var(--danger); }

/* Pips and dots */
.sc-pips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.sc-pip {
  position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; flex: none;
}
.sc-pip::before {
  content: ""; position: absolute; inset: 1px; border: 1.5px solid var(--border-alt); border-radius: 4px; background: var(--surface);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.sc-pip.is-round::before { border-radius: 50%; }
.sc-pip.is-on::before { background: var(--accent); border-color: var(--accent); }
.sc-pip.is-ok.is-on::before { background: var(--success); border-color: var(--success); }
.sc-pip.is-fail.is-on::before { background: var(--danger); border-color: var(--danger); }
.sc-pip.is-big { width: 22px; height: 22px; }
.sc-dot {
  display: inline-block; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--border-alt); border-radius: 50%;
  vertical-align: middle;
}
.sc-dot.is-half { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border-color: var(--accent); }
.sc-dot.is-prof { background: var(--accent); border-color: var(--accent); }
.sc-dot.is-expert { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }

/* Lists of rows (saves, skills, senses, spells) */
.sc-list { margin: 0; padding: 0; list-style: none; }
.sc-list > li { border-bottom: 1px solid var(--border); }
.sc-list > li:last-child { border-bottom: 0; }
.sc-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 26px; padding: 2px 2px;
  border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left;
}
button.sc-row { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) { button.sc-row:hover { background: var(--surface-alt); } }
.sc-row-v { min-width: 2.4em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-row.is-overridden .sc-row-v { color: var(--accent-soft-text); }
.sc-row-name { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; }
/* A quarter-width section on Paper is ~184 px: the ability hint goes so
   names wrap between words, never inside one (phase A review; B·F2 kept
   this over the mockup's hint, R-A3b A3b-9). */
@container (max-width: 230px) { .sc-row-hint { display: none; } }
.sc-row-hint { margin-left: auto; padding-left: 6px; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.sc-row-name + .sc-row-hint { margin-left: 4px; }
/* A spell row (F-QA, QA-P-9): the name keeps its width, never drawn under
   the hint; the hint (a reaction's whole trigger) takes what is left and
   ends in an ellipsis, and the row wraps when the name and tags fill it. */
.sc-spell { flex-wrap: wrap; }
.sc-spell .sc-row-name { flex: 0 0 auto; max-width: 100%; }
.sc-spell .sc-row-hint { flex: 1 1 0; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* Tables */
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sc-table th {
  padding: 2px 4px 4px; text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-table td { padding: 3px 4px; border-top: 1px solid var(--border); vertical-align: middle; }
.sc-table .sc-c { text-align: center; }
.sc-table .sc-r { text-align: right; }
.sc-addrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- Character ---- */
.sc-ident { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.sc-ident-name { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sc-hero { margin: 0; font-size: var(--text-xl); font-weight: 700; overflow-wrap: break-word; }
.sc-ident-field { min-width: 0; }
/* F-QA (QA-P-28): the name, alignment, player and XP are fields. */
.sc-hero-fld { min-height: 40px; font-weight: 700; }
.sc-ident-xp { display: block; }
@container (max-width: 620px) {
  .sc-ident { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-ident-name { grid-column: span 2; grid-row: auto; }
}

/* ---- Ability scores ---- */
.sc-abil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 330px) { .sc-abil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 600px) { .sc-abil { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sc-ab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center;
}
.cs-sheet.is-paper .sc-ab { border-radius: var(--radius-sm); border-color: var(--border-alt); }
.sc-ab-key { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); }
.sc-ab-mod { font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; }
.sc-ab-score {
  min-width: 3em; padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-alt); font-size: var(--text-sm); font-weight: 600;
}

/* ---- Combat ---- */
.sc-vit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sc-vit.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 330px) { .sc-vit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0;
  padding: 6px 4px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
.cs-sheet.is-paper .sc-stat { border-radius: var(--radius-sm); border-color: var(--border-alt); }
.sc-stat-v { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; }
.sc-stat-k { max-width: 100%; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-muted); overflow-wrap: normal; }
.sc-unit { margin-top: -2px; font-size: var(--text-xs); color: var(--text-muted); }
.sc-stat.sc-shield {
  border: 0; background: var(--accent-soft); color: var(--accent-soft-text);
  clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%); padding-bottom: 12px;
}
.sc-shield .sc-stat-k { color: var(--accent-soft-text); }
.sc-hp { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.cs-sheet.is-paper .sc-hp { border-radius: var(--radius-sm); border-color: var(--border-alt); }
.sc-hp-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; justify-content: space-between; }
.sc-hp-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sc-hp-now .sc-lbl { flex-basis: 100%; }
.sc-hp-cur { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-hp-max { color: var(--text-muted); }
.sc-hp-ctl { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-amount { width: 4.5em; text-align: center; }
.sc-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container (max-width: 420px) { .sc-minis { grid-template-columns: minmax(0, 1fr); } }
.sc-ds { display: flex; align-items: center; gap: 4px; }
.sc-ds-k { min-width: 3.5em; font-size: var(--text-xs); color: var(--text-muted); }
.sc-conds { margin-top: 10px; }
.sc-add-cond { width: auto; min-height: 26px; padding: 2px 6px; font-size: var(--text-xs); }
.sc-exh { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sc-exh .sc-lbl { margin: 0 4px 0 0; }
.sc-exh-v { min-width: 1.5em; text-align: center; font-weight: 600; }

/* ---- Ammunition ---- */
.sc-ammo + .sc-ammo { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sc-ammo-top { display: flex; align-items: center; gap: 6px; }
.sc-ammo-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.sc-ammo-top { flex-wrap: wrap; }
@container (max-width: 200px) { .sc-ammo-name { flex-basis: 100%; } }
.sc-ammo-qty { min-width: 2em; text-align: center; font-family: var(--font-mono); font-size: var(--text-lg); }
.sc-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sc-ammo-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* ---- Limited features ---- */
.sc-uses { font-size: var(--text-xs); color: var(--text-muted); }
.sc-pips-line .sc-pips { flex-wrap: nowrap; }
.sc-pips-line .sc-num { align-items: center; }
.sc-show-narrow { display: none; }
@container (max-width: 420px) {
  .sc-limited th:last-child, .sc-limited td:last-child { display: none; }
  .sc-show-narrow { display: inline-block; }
}
.sc-pips-line { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; }

/* ---- Attacks ---- */
/* One grid for the header and every row (FB-B, item 9): the tracks are on
 * .sc-atks, in its em, and each row is a subgrid of them, so the header's
 * smaller font cannot narrow its columns; a row's cells share a first
 * baseline. */
.sc-atks {
  display: grid; grid-template-columns: minmax(0, 1fr) 4em minmax(0, 8em) minmax(0, 5.5em); column-gap: 6px;
  font-size: var(--text-sm);
}
.sc-atks > * { grid-column: 1 / -1; }
.sc-atk {
  display: grid; grid-template-columns: subgrid; row-gap: 2px;
  align-items: baseline; padding: 3px 0; border-top: 1px solid var(--border);
}
.sc-atk.is-head { border-top: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.sc-atk-name { min-width: 0; overflow-wrap: break-word; }
.sc-atk-hit { text-align: center; }
.sc-atk-hit .sc-fld { width: 4em; }
.sc-atk-dmg { min-width: 0; overflow-wrap: break-word; }
.sc-atk-rng { font-size: var(--text-xs); overflow-wrap: break-word; }
.sc-atk-note { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--text-muted); }
.sc-atk.is-manual .sc-atk-note { color: inherit; }
@container (max-width: 420px) {
  .sc-atks { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sc-atk-name { grid-column: 1 / -1; }
  .sc-atk.is-head { display: none; }
}

/* ---- Actions ---- */
.sc-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 420px) { .sc-acts { grid-template-columns: minmax(0, 1fr); } }
.sc-acts ul { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.sc-acts li { display: flex; flex-wrap: wrap; padding: 3px 0; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
.sc-acts .sc-row-hint { margin-left: auto; }

/* ---- Spellcasting and the spell sheet sections ---- */
.sc-cast + .sc-cast { margin-top: 10px; }
.sc-cast .sc-vit { margin-bottom: 8px; }
.sc-spell-level { margin-top: 6px; }
.sc-spell-head { display: flex; align-items: center; gap: 8px; }
.sc-spell-head .sc-lbl { flex: 1; margin: 0; }
.sc-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; font-size: var(--text-sm); }
.sc-slot-k { min-width: 5.5em; font-size: var(--text-xs); color: var(--text-muted); }
.sc-points { margin: 4px 0 8px; }
.sc-points-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-points-top .sc-lbl { flex: 1; margin: 0; }
.sc-points-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-pointsbar { height: 10px; border-radius: 5px; }
.sc-spells td:first-child, .sc-spells th:first-child { width: 26px; }
@container (max-width: 420px) { .sc-hide-narrow { display: none; } }

/* ---- Equipment ---- */
.sc-inv .sc-item { width: 100%; overflow-wrap: break-word; }
.sc-qty { width: 3.2em; padding: 2px; text-align: center; }
.sc-w { width: 4em; padding: 2px 4px; text-align: right; }
.sc-eq { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-coins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.sc-coin {
  display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center;
}
.sc-coin-k { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.sc-coin .sc-fld { min-height: 28px; padding: 2px; border: 0; background: none; text-align: center; font-weight: 600; }
.sc-load { margin-top: 8px; font-size: var(--text-xs); color: var(--text-muted); }
.sc-load .sc-num { color: var(--text); }

/* ---- Magic items ---- */
.sc-magic { padding: 6px 0; }
.sc-magic-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); }
.sc-charges { margin-top: 4px; }

/* ---- Features and the references ---- */
.sc-feat { padding: 6px 0; border-top: 1px solid var(--border); }
.sc-feat:first-child { border-top: 0; }
.sc-feat > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 26px; cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: 600;
}
.sc-feat > summary::-webkit-details-marker { display: none; }
.sc-feat > summary::before {
  content: "›"; display: inline-block; width: 10px; color: var(--text-muted);
  transition: transform var(--duration) var(--ease-standard);
}
.sc-feat[open] > summary::before { transform: rotate(90deg); }
.sc-feat-name { overflow-wrap: break-word; }
.sc-feat-body { padding-left: 14px; }
.sc-feat:not([open]) > .sc-feat-body { display: none; }
.sc-feat-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.sc-feat-edit { display: flex; gap: 6px; margin-bottom: 4px; }
.sc-ref { margin: 0; font-size: var(--text-sm); }
.sc-ref > div { padding: 4px 0; border-top: 1px solid var(--border); }
.sc-ref > div:first-child { border-top: 0; }
.sc-ref dt { font-weight: 600; }
.sc-ref dd { margin: 0; color: var(--text-muted); }

/* ---- 44 px targets on a phone and on any touch screen (PLAN D15, A3b-5) ---- */
.cs-sheet.is-touch .sc-btn, .cs-sheet.is-touch .sc-fld, .cs-sheet.is-touch button.sc-num,
.cs-sheet.is-touch .sc-chip.is-danger, .cs-sheet.is-touch .sc-eq, .cs-sheet.is-touch .sc-link {
  min-height: 44px; min-width: 44px;
}
.cs-sheet.is-touch .sc-link { display: inline-flex; align-items: center; }
.cs-sheet.is-touch .sc-row { min-height: 44px; }
.cs-sheet.is-touch .sc-pip, .cs-sheet.is-touch .sc-pip.is-big { width: 44px; height: 44px; }
.cs-sheet.is-touch .sc-pip::before { inset: 13px; }
.cs-sheet.is-touch .sc-pips { gap: 0; }
.cs-sheet.is-touch .sc-feat > summary { min-height: 44px; }
.cs-sheet.is-touch .sc-coin .sc-fld { min-width: 0; }
.cs-sheet.is-touch .sc-qty { width: 44px; }
.cs-sheet.is-touch .sc-w { width: 56px; }
.cs-sheet.is-touch .sc-eq { width: 44px; }

/* Hooks the tests and later items target; spacing only. */
.sc-mini-hd { min-width: 0; }
.sc-magic-list > li:first-child .sc-magic { padding-top: 0; }
.sc-xpbar, .sc-loadbar { height: 6px; }