/* Source D'Amour component library v1, night register (revised 2026-07-30)
   Reads tokens.css. Every class here is specified in brand/sda-design-legend-v1.md
   and its 2026-07-30 addendum.
   Banned at the class level: gradients, pill radii, hover scale over 1.05,
   boxed text content, emoji chips, autoplay anything.

   Cascade rule, learned the hard way: no generic descendant selector in this
   file or in public.css may set `color` on a bare `a`. A rule like
   `.some-band a { color: X }` is (0,1,1) and outranks `.sda-btn--primary`
   (0,1,0), which is how a night concept once shipped buttons with invisible
   labels. Every button variant below is element-qualified for the same reason,
   and band contexts name the classes they recolour instead of reaching for the
   element. tests/e2e/test_s40_night_register.py pins this structurally. */

/* ---------- Base ---------- */
.sda body, .sda {
  background: var(--sda-paper);
  color: var(--sda-ink);
  font-family: var(--sda-sans);
  font-size: var(--sda-body);
  line-height: var(--sda-lh-body);
}
.sda .prose { font-family: var(--sda-serif); max-width: var(--sda-measure); }
.sda h1, .sda h2, .sda h3 { font-family: var(--sda-serif); font-weight: 600; margin: 0; text-wrap: balance; }
.sda h1 { font-size: var(--sda-h1); line-height: var(--sda-lh-h1); letter-spacing: var(--sda-ls-h1); }
.sda h2 { font-size: var(--sda-h2); line-height: var(--sda-lh-h2); letter-spacing: var(--sda-ls-h2); }
.sda h3 { font-size: var(--sda-h3); line-height: var(--sda-lh-h3); }
.sda :focus-visible { outline: var(--sda-focus); outline-offset: var(--sda-focus-offset); }

/* ---------- Buttons (4 tiers; color moves, size never does) ---------- */
.sda-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--sda-btn-h); padding: 0 1.7rem;
  font-family: var(--sda-sans); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  border-radius: var(--sda-radius);
  transition: background-color var(--sda-t-press) ease-out,
              border-color var(--sda-t-press) ease-out,
              color var(--sda-t-press) ease-out;
}
.sda-btn:active { transform: translateY(1px); }
/* Element-qualified on purpose. These are (0,1,1) so a stray descendant rule
   at the same specificity cannot silently take the label colour away, and the
   pair is spelled out rather than written as a bare class so the guard cannot
   be lost to a later tidy-up. Primary is now the cream-on-night solid the
   concept ships; its hover is lifted verdigris with an espresso label. */
a.sda-btn--primary, button.sda-btn--primary,
.sda-btn--primary { background: var(--sda-ink); color: var(--sda-paper); border: 1px solid var(--sda-ink); }
a.sda-btn--primary:hover, button.sda-btn--primary:hover,
.sda-btn--primary:hover { background: var(--sda-verdigris); border-color: var(--sda-verdigris); color: var(--sda-night); }
a.sda-btn--secondary, button.sda-btn--secondary,
.sda-btn--secondary { background: transparent; color: var(--sda-ink); border: var(--sda-edge); }
a.sda-btn--secondary:hover, button.sda-btn--secondary:hover,
.sda-btn--secondary:hover { background: var(--sda-ink); color: var(--sda-paper); border-color: var(--sda-ink); }
.sda-btn--small { height: var(--sda-btn-h-small); padding: 0 1.2rem; font-size: 0.88rem; }
a.sda-btn--night, button.sda-btn--night,
.sda-btn--night { background: transparent; color: var(--sda-night-ink); border: 1px solid var(--sda-night-ink); }
a.sda-btn--night:hover, button.sda-btn--night:hover,
.sda-btn--night:hover { background: var(--sda-night-ink); color: var(--sda-night); }
/* The inverse of primary, and the only button that belongs on a cream band:
   the page ground pressed into the mat. A --night button there would be cream
   on cream, which is the invisible-label failure in its purest form. */
a.sda-btn--dark, button.sda-btn--dark,
.sda-btn--dark { background: var(--sda-paper); color: var(--sda-mat); border: 1px solid var(--sda-paper); }
a.sda-btn--dark:hover, button.sda-btn--dark:hover,
.sda-btn--dark:hover { background: var(--sda-mat-ink); border-color: var(--sda-mat-ink); }
/* Tertiary: accent text link with offset underline */
.sda-link-tertiary {
  color: var(--sda-verdigris); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--sda-t-press) ease-out;
}
.sda-link-tertiary:hover { border-bottom-color: var(--sda-verdigris); }
/* A tertiary control that is a real <button> is something a thumb has to hit,
   not something an eye has to read. Bare, it measured 66x20 on the bag page,
   which is where a customer at the booth removes a piece they changed their
   mind about. Anchors keep their inline text-link geometry; only the buttons
   grow, so the visual tier is unchanged.

   The chrome reset is not tidying. A <button> carries the browser's own grey
   box and border, and this tier was never meant to have one; at 20px tall that
   read as a faint artifact and at 44px it reads as a mis-styled box hard
   against the edge of the screen. The three sides are zeroed individually so
   the tier's own transparent bottom border, which is what the hover underline
   animates, survives. */
button.sda-link-tertiary {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; background: none; font: inherit; cursor: pointer;
  border-top: 0; border-right: 0; border-left: 0;
  color: var(--sda-verdigris);
}
/* Inline text link: underline draws in from the left */
.sda-link {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--sda-verdigris), var(--sda-verdigris));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--sda-t-link) ease-out;
}
.sda-link:hover { background-size: 100% 1px; }

/* ---------- Photo frame (the cardinal rule: contain, never distort/crop) ----------
   The cardinal rule is unchanged and was never in question: nothing here crops.
   What changed on 2026-07-31 is the colour of the space `contain` leaves over.

   The frame used to be a cream mat, and cream on a night page is a light
   source. Eleven of the sixteen published photographs were shot at exactly the
   frame ratio and got no mat at all; the five landscape ones got 21% to 40% of
   the tile as a bright slab. So the device meant to make a photograph look
   like a print was invisible on two thirds of the collection and was the
   loudest thing on the page for the rest. That is the "white boundary, like we
   zoomed out and filled the space with white" Logan reported.

   Filling with the deepest ground solves both ends at once: a photograph that
   fits its frame is edge to edge, and one that does not simply sits in the
   dark. Nothing is cropped, and nothing announces what was left over. The
   float shadow stays, because that is what still reads as a mounted print. */
.sda-frame {
  aspect-ratio: var(--sda-frame-ratio);
  /* Transparent, not a named ground. Any fixed colour is right in one place
     and a bar somewhere else: the deepest ground disappears on the hero band
     and turns into broadcast letterboxing on the page and inside a card, which
     is exactly what a fixed CREAM did in the other direction. Transparent
     makes the rule true by construction wherever a frame is put, and the faint
     cream ring inside --sda-mat-shadow still draws its edge so it reads as a
     mounted print rather than as nothing. */
  background: transparent;
  border: 0;
  border-radius: var(--sda-radius);
  box-shadow: var(--sda-mat-shadow);
  padding: 0;
  overflow: hidden;
  display: block;
}
/* Descendant, not child: a responsive image arrives wrapped in <picture>, and
   `picture` is display:contents so the <img> is still the frame's layout box.
   The frame never holds more than one image plus a chip, so widening the
   selector costs nothing. */
/* No outline. It was a DARK hairline, drawn to separate the photograph from
   the cream it sat on; with the ground now darker than any photograph it would
   be a black line on black, visible only where a light-backed shot meets it,
   which is the one place it would look like a rendering artifact. */
.sda-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sda-frame picture { display: contents; }
/* Featured/editorial variant. Legend adjudication 1 gave this slot a NIGHT mat
   while the page was paper; with the page itself night, a night mat is a photo
   with no mat at all. The distinction survives as a deeper float rather than a
   second colour. `--night` is kept as an alias so no template breaks. */
.sda-frame--feature, .sda-frame--night { background: var(--sda-frame-ground); box-shadow: var(--sda-mat-shadow-lift); }
.sda-frame--square { aspect-ratio: 1 / 1; }
/* Editorial band variant: the bench photography is landscape, and the house
   rule is contain-never-crop, so the frame changes shape rather than the
   photograph losing its edges. */
.sda-frame--wide { aspect-ratio: 4 / 3; }
/* Editorial slots ONLY (human-picked crop): */
.sda-frame--cover img { object-fit: cover; }

/* ---------- Product card ----------
   One object, not a photograph with type loose underneath it (Logan,
   2026-07-31). The panel carries the whole tile, the photograph bleeds to its
   edge, and the description, price and control sit on the panel below. The
   card used to be a bare flex column on the page ground, which meant a long
   name and a short name produced two different shapes in the same row. */
.sda-card {
  display: flex; flex-direction: column;
  background: var(--sda-panel); border: var(--sda-rule);
  border-radius: var(--sda-radius); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--sda-t-press) ease-out;
}
.sda-card:hover { border-color: color-mix(in srgb, var(--sda-ink) 30%, transparent); }
/* The frame gives up its own radius and float here: it is no longer a print on
   the page, it is the top of a card, and a rounded shadowed rectangle inside a
   rounded bordered rectangle is the box-inside-a-box the treatment exists to
   avoid. The card's own `overflow: hidden` rounds the photograph's top corners.

   It needs no ground of its own: the frame is transparent, so a landscape
   shot's letterbox is already card and a tall one's pillarbox is too. This
   briefly set --sda-panel here instead, which was right for a card and wrong
   everywhere else, and is what led to making the frame transparent. */
.sda-card .sda-frame { position: relative; border-radius: 0; box-shadow: none; }
.sda-card__meta { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0.95rem 0; }
.sda-card__name { font-family: var(--sda-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.sda-card__stone { font-family: var(--sda-sans); font-size: 0.82rem; color: var(--sda-ink-soft); }
/* Two lines, then it stops. A clamp rather than a server-side truncation so
   the tile and the piece page can never disagree about the same stone, and so
   every tile in a row is the same height whatever the writer did. */
.sda-card__desc {
  margin-top: 0.35rem; font-family: var(--sda-sans); font-size: 0.84rem;
  line-height: 1.5; color: var(--sda-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sda-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem; margin-top: 0.5rem; }
.sda-card__edition, .sda-card__gone { font-family: var(--sda-sans); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--sda-ink-faint); }
/* Pushed to the bottom so every control in a row lines up even where the names
   above them wrap to different depths. */
.sda-card__cta { margin: 0.9rem 0.95rem 0.95rem; margin-top: auto; width: calc(100% - 1.9rem); }
.sda-price { font-family: var(--sda-sans); font-variant-numeric: tabular-nums lining-nums; font-size: 1rem; }
/* The alternate angle stacks on the primary in EVERY environment, not only
   where the hover move runs. Its placement is layout, not motion: on a touch
   device, or under reduced motion, a second in-flow image would otherwise sit
   under the first inside a fixed-ratio frame. */
/* `inset: 0` is correct again now that the frame carries no padding: the
   offsets resolve against the padding box, which is the whole frame. While
   there was a 10px mat this had to be `inset: var(--sda-mat-pad)` with the
   size spelled out, or the crossfade looked like the print growing by 10px on
   every side. The size is still spelled out rather than left to the inset
   pair, because an absolutely positioned element with left, right AND width
   set ignores `right`, and an `img` is a replaced element whose `width: auto`
   falls back to its intrinsic size rather than stretching between offsets. */
.sda-card .sda-frame img.alt {
  position: absolute; inset: 0; opacity: 0;
  width: 100%; height: 100%;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sda-card .sda-frame img {
    transition: transform var(--sda-t-hover-in) var(--sda-ease-lift),
                filter var(--sda-t-hover-in) var(--sda-ease-lift);
  }
  .sda-card:hover .sda-frame img {
    transform: scale(1.025); filter: brightness(1.03) contrast(1.02);
    transition-duration: var(--sda-t-hover-out);
  }
  /* House move when an alternate photo exists: crossfade beats any transform */
  .sda-card .sda-frame img.alt { transition: opacity 450ms ease; }
  .sda-card:hover .sda-frame img.alt { opacity: 1; }
}

/* ---------- Chips (stamped, hairline, one per card max, no emoji) ---------- */
.sda-chip {
  display: inline-block; padding: 0.18rem 0.55rem;
  font-family: var(--sda-sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--sda-radius);
  background: transparent;
}
.sda-chip--sold { color: var(--sda-oxblood); }
.sda-chip--hold { color: var(--sda-verdigris); }
.sda-chip--new { color: var(--sda-ink); }
.sda-chip--new::before { content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; margin-right: 0.4rem; vertical-align: 1px; }
.sda-chip--mine { color: var(--sda-verdigris); font-variant: small-caps; text-transform: none; letter-spacing: 0.06em; }
/* A chip on a card sits ON the mat, so it carries the page ground with it
   rather than inheriting the cream underneath and vanishing. */
.sda-card .sda-chip { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--sda-paper); }

/* ---------- Forms ---------- */
.sda-field { display: flex; flex-direction: column; gap: 0.35rem; }
/* The tracked uppercase is for a FIELD NAME: "Name", "Email", "Message", two
   or three words naming the box underneath. It is not a treatment any run of
   text can take. Two escapes from it are specified below: a label that wraps
   its own control, and `.sda-label--prose` for a label that is a sentence. */
.sda-field label { font-family: var(--sda-sans); font-size: var(--sda-label);
  font-weight: 500; letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-ink-soft); }
/* A label that is a whole sentence rather than a field name, sitting above its
   own control ("Anything else you want us to know"). Letterspaced uppercase
   over a sentence stops reading as a label and starts shouting a line of copy,
   and --sda-ink-soft on night reads as a disabled field. Reading case, body
   size, full-strength cream. */
.sda-field label.sda-label--prose { font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--sda-ink); }
/* A field on a night page has to look like a well you can type into, not a
   painted rectangle. The ground drops to --sda-well, the edge is the cream
   hairline, and the placeholder is the faint ink rather than the browser's
   default grey, which on this ground is invisible. Preferences, hello, inquire
   and checkout are all this one rule. */
.sda-input, .sda-textarea, .sda-select {
  font-family: var(--sda-sans); font-size: 1rem; color: var(--sda-ink);
  background: var(--sda-well); border: var(--sda-edge);
  border-radius: var(--sda-radius); padding: 0.7rem 0.9rem;
}
.sda-input::placeholder, .sda-textarea::placeholder { color: var(--sda-ink-faint); opacity: 1; }
.sda-input:hover, .sda-textarea:hover, .sda-select:hover { border-color: var(--sda-ink-soft); }
.sda-input:focus, .sda-textarea:focus, .sda-select:focus { outline: var(--sda-focus); outline-offset: 1px; }
/* Options are painted by the platform from the control's own colours; without
   these two the open dropdown is white-on-white on Windows Chrome. */
.sda-select option { background: var(--sda-well); color: var(--sda-ink); }
.sda-field--error .sda-input { border-color: var(--sda-oxblood); }
/* Option groups: hairline-ruled sections, never boxes (text is never boxed). */
fieldset.sda-field { border: 0; padding: 1rem 0 0; margin: 0; border-top: var(--sda-rule); }
fieldset.sda-field legend { float: left; width: 100%; padding: 0; margin: 0 0 0.5rem;
  font-family: var(--sda-serif); font-size: 1.1rem; color: var(--sda-ink);
  text-transform: none; letter-spacing: normal; }
/* A label that WRAPS its own control is never a field name: it is the line of
   prose beside a checkbox or a radio, or the caption over a paired input (the
   price range on /my/preferences). Left on the uppercase Hanken treatment it
   shouts, and it carries --sda-ink-soft, which on night reads as a disabled
   field.
   Scoped to the form and not to a fieldset, which is the bug this once was:
   /hello's consent line ("Yes, send me a catalogue when something matches this
   list.") sits in a plain `.sda-field` div and the pause row on
   /my/preferences sits straight in the form, so neither was reached and both
   rendered tracked-uppercase. The shape of the markup decides, not which
   container it happens to be in. */
.sda-form > label:has(> .sda-input), .sda-field > label:has(> .sda-input) {
  text-transform: none; letter-spacing: normal;
  font-weight: 400; font-size: 1rem; color: var(--sda-ink); display: flex;
  flex-direction: column; gap: 0.35rem; clear: both; margin-top: 0.6rem; }
.sda-form label:has(input[type="checkbox"]), .sda-form label:has(input[type="radio"]),
.sda-field label:has(input[type="checkbox"]), .sda-field label:has(input[type="radio"]) {
  font-family: var(--sda-sans); text-transform: none; letter-spacing: normal;
  font-weight: 400; font-size: 1rem;
  color: var(--sda-ink); display: flex; align-items: center; gap: 0.55rem; clear: both; }
.sda-form input[type="checkbox"], .sda-form input[type="radio"] { accent-color: var(--sda-verdigris); }
.sda-field__error { font-size: var(--sda-caption); color: var(--sda-oxblood); }
.sda-field__ok { font-size: var(--sda-caption); color: var(--sda-verdigris); }
.sda-reassure { font-family: var(--sda-serif); font-style: italic; font-size: var(--sda-caption); color: var(--sda-ink-soft); }

/* ---------- Section furniture ---------- */
.sda-eyebrow { font-family: var(--sda-sans); font-size: var(--sda-label); font-weight: 500;
  letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-verdigris); margin: 0 0 1rem; }
.sda-rule { border: 0; border-top: var(--sda-rule); margin: var(--sda-space-5) 0; }
.sda-fleuron { display: flex; justify-content: center; margin: var(--sda-space-5) 0; }
.sda-fleuron svg, .sda-fleuron img { width: 22px; opacity: 0.4; }  /* the enso, once per page max */
.sda-caption { font-family: var(--sda-serif); font-style: italic;
  font-size: var(--sda-caption); line-height: var(--sda-lh-caption); color: var(--sda-ink-soft); }
.sda-pullquote { font-family: var(--sda-serif); font-size: var(--sda-h3); line-height: 1.35;
  max-width: var(--sda-measure-lead); border-left: 2px solid var(--sda-verdigris); padding-left: 1.2rem; }
/* Provenance dossier (piece pages): the auction-catalog block */
.sda-dossier { border-top: var(--sda-rule); border-bottom: var(--sda-rule);
  padding: 1rem 0; font-family: var(--sda-serif); font-size: var(--sda-small);
  font-feature-settings: "onum"; }
.sda-dossier dt { font-family: var(--sda-sans); font-size: var(--sda-label); letter-spacing: var(--sda-ls-label);
  text-transform: uppercase; color: var(--sda-ink-soft); }
.sda-dossier dd { margin: 0.1rem 0 0.7rem; }

/* ---------- Scroll reveal (rationed: story blocks + grid containers only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sda-reveal { opacity: 0; transform: translateY(14px); }
  .sda-reveal.is-in { opacity: 1; transform: none;
    transition: opacity var(--sda-t-reveal) var(--sda-ease-settle),
                transform var(--sda-t-reveal) var(--sda-ease-settle); }
}

/* ---------- The signature moment (enso settles in, once per session) ----------
   True stroke draw-on needs a stroked centerline asset (future). Until then:
   a conic wipe that follows the circle reads as the mark being drawn. */
@media (prefers-reduced-motion: no-preference) {
  .sda-mark-draw { animation: sda-mark-wipe var(--sda-t-mark) ease-out both; }
  @supports (mask: conic-gradient(#000 50%, transparent 0)) {
    .sda-mark-draw { animation: sda-mark-sweep var(--sda-t-mark) ease-out both; }
  }
  @keyframes sda-mark-wipe { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
  @keyframes sda-mark-sweep {
    from { mask: conic-gradient(from -80deg, #000 0deg, transparent 2deg); }
    30%  { mask: conic-gradient(from -80deg, #000 108deg, transparent 110deg); }
    to   { mask: conic-gradient(from -80deg, #000 360deg, transparent 360deg); }
  }
}

/* line sheet */
.sheet-wrap { padding-top: var(--sda-space-band); padding-bottom: var(--sda-space-band); }
.sheet-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sda-space-4); }
.sheet-head .sda-caption { margin: var(--sda-space-3) 0 0; }
.sheet-buyer-label { margin: -0.4rem 0 var(--sda-space-2); color: var(--sda-ink-soft); }
.sheet-card { padding: var(--sda-space-3); border: var(--sda-hairline); gap: var(--sda-space-3); }
.sheet-card .sda-frame { box-shadow: none; }
.sheet-card__meta { display: flex; flex-direction: column; gap: 0.2rem; }
.sheet-card__sku { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--sda-label); letter-spacing: 0.06em; color: var(--sda-ink-soft); }
.sheet-card__provenance { font-family: var(--sda-serif); font-size: var(--sda-caption); font-style: italic; color: var(--sda-ink-soft); }
.sheet-card__price { margin-top: var(--sda-space-2); }
.sheet-footer { margin: var(--sda-space-5) 0 0; }
@media (max-width: 560px) { .sheet-head { align-items: flex-start; flex-direction: column; } }

/* Combobox (future public use)
 * Documentation-only mirror of the internal combobox class contract
 * (static/sda/combobox.css). Internal pages load combobox.css directly;
 * this .sda-scoped block is NOT loaded by any internal page and exists so a
 * later public rollout has the class contract in the legend home. Uncomment
 * and tune against --sda-* tokens before shipping publicly.
 *
 * .sda .sda-cbx { position: relative; }
 * .sda select.sda-cbx__native { position: absolute; width: 1px; height: 1px;
 *   padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
 *   clip-path: inset(50%); white-space: nowrap; border: 0; }
 * .sda .sda-cbx__control { position: relative; }
 * .sda input.sda-cbx__input { width: 100%; background: var(--sda-paper, #fff);
 *   border: var(--sda-hairline); border-radius: 0.5rem;
 *   padding: 0.625rem 2rem 0.625rem 0.75rem; color: var(--sda-ink); }
 * .sda input.sda-cbx__input:focus { outline: 2px solid var(--sda-verdigris); }
 * .sda .sda-cbx__caret { position: absolute; right: 0.65rem; top: 50%;
 *   transform: translateY(-50%); pointer-events: none; color: var(--sda-ink-soft); }
 * .sda ul.sda-cbx__list { position: absolute; z-index: 60; left: 0; right: 0;
 *   margin-top: 4px; max-height: 16rem; overflow-y: auto;
 *   background: var(--sda-paper); border: var(--sda-hairline);
 *   border-radius: 0.5rem; padding: 4px; list-style: none; }
 * .sda ul.sda-cbx__list[hidden] { display: none; }
 * .sda .sda-cbx__opt { padding: 0.4rem 0.6rem; border-radius: 0.375rem; cursor: pointer; }
 * .sda .sda-cbx__opt.is-active, .sda .sda-cbx__opt:hover { background: var(--sda-wash); }
 * .sda .sda-cbx__opt[aria-disabled="true"] { color: var(--sda-ink-soft); cursor: default; }
 */