/* Relica: the bracelet designer (/custom). Loaded after site.css, which brings the tokens, the two
   faces, the buttons, the fields, the entrance sheet, the toast and the focus ring.

   The page is an app, not a document: one fixed frame the height of the screen, and nothing
   scrolls but the list of stones and whatever is open over it. Two layouts:

     a phone, upright      the bracelet on top, the stones in a sheet under it that folds away,
                           the total and the order button along the bottom
     anything wider,       the bracelet on the left with the total under it, the stones in a
     or a phone on its side column on the right

   Everything is in rem, so the wide tier's root ramp (site.css, from 1500) carries the whole tool
   up with it on a big screen. Palette and faces are the site's: burgundy, blush, espresso, white;
   Melodrama for a heading, the grotesk for everything the hand touches. Only transform, opacity
   and clip-path move. */

.cu-root { height: 100%; overflow: hidden; scroll-behavior: auto; }
.cu-body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  --cu-pad: 0.75rem;
  --cu-picker: clamp(20rem, 36vw, 31rem);
}
.cu-body button, .cu-body input, .cu-body textarea { font-family: var(--grotesk); }
/* An app, not a document: a long press on a stone or a quick second tap on a card selected its
   words and opened the phone's copy menu over the tool. Nothing is selectable or held for a menu
   but the fields a visitor types into. */
.cu-body, .cu-body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cu-body input, .cu-body textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.cu-body img { -webkit-user-drag: none; }
.cu-body button { cursor: pointer; }
/* Zero specificity: any class that names a colour wins over it. */
:where(.cu-body) button { color: inherit; }
.cu-body button:disabled { cursor: default; }
.cu-body svg { flex: none; }
.cu-noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--s6); text-align: center; font-family: var(--text); font-size: 1.25rem; background: var(--white); }

.cu-app {
  position: fixed;
  inset: 0;
  display: grid;
  /* minmax(0, ...) on the column too: an auto column takes the width of the longest unbroken
     line inside it. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  color: var(--ink);
  opacity: 0;
}
/* The tool is drawn under the sheet, and shown as the sheet lifts. If the script never runs the
   inline driver still lifts the sheet, and this goes with it. */
.cu-live .cu-app, html:not(.has-js) .cu-app { opacity: 1; transition: opacity 0.4s ease; }

.cu-body [data-ico], .cu-ico { display: inline-grid; place-items: center; flex: none; }
.cu-body [data-ico] svg, .cu-ico svg { width: 1.25rem; height: 1.25rem; }

/* ---------------------------------------------------------------- the bar */
.cu-bar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding-inline: max(0.5rem, env(safe-area-inset-left)) max(0.5rem, env(safe-area-inset-right));
  background: var(--white);
  border-block-end: 1px solid var(--hair);
}
.cu-bar__back, .cu-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.cu-bar__back { justify-self: start; }
.cu-bar__brand { display: block; width: 6.4rem; color: var(--ink); line-height: 0; }
.cu-bar__brand svg { width: 100%; height: auto; }
.cu-bar__acts { display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; min-width: 0; }
.cu-tool--word { padding-inline: 0.75rem; border: 1px solid var(--hair-strong); }
.cu-tool--word [data-ico] { color: var(--burgundy); }
.cu-tool.is-busy [data-ico] { animation: cuTurn 0.9s linear infinite; }
@keyframes cuTurn { to { rotate: 1turn; } }
.cu-lang { margin-inline-end: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .cu-bar__back:hover, .cu-tool:hover { background: var(--surface); }
}
@media (max-width: 559px) {
  .cu-tool--word { position: relative; padding-inline: 0; border: 0; }
  .cu-tool--word > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cu-bar__brand { width: 5.6rem; }
}
@media (min-width: 900px) { .cu-bar { padding-inline: 1.25rem; } .cu-bar__brand { width: 7.25rem; } }

/* ---------------------------------------------------------------- the frame */
.cu-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "stage" "picker" "dock";
  min-height: 0;
}
.cu-stage { grid-area: stage; }
.cu-picker { grid-area: picker; }
.cu-dock { grid-area: dock; }

@media (orientation: landscape) and (max-height: 560px) { .cu-body { --cu-picker: clamp(17rem, 42vw, 24rem); } .cu-bar { height: 3rem; } }

/* ---------------------------------------------------------------- the stage */
.cu-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--white); }
.cu-stage__canvas { position: absolute; inset: 0; }
.cu-canvas { display: block; touch-action: none; cursor: grab; outline-offset: -3px; user-select: none; -webkit-user-select: none; }
.cu-canvas.is-over { cursor: pointer; }
.cu-canvas.is-grabbing { cursor: grabbing; }

/* Under the empty ring: custom.js writes where the ring is (--ring-y, --ring-r) as the view
   settles, so the words never sit on the cord whatever size the stage is. */
.cu-stage__hint {
  position: absolute;
  inset-inline: var(--cu-pad);
  top: calc(var(--ring-y, 50%) + var(--ring-r, 6rem) + 0.9rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--dim);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.35s ease, translate 0.35s var(--ease);
}
.cu-stage__hint [data-ico] { color: var(--burgundy); animation: cuNudge 2.4s var(--ease) infinite; }
.cu-stage__hint.is-off { opacity: 0; translate: 0 0.5rem; }
@keyframes cuNudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 0.3rem; } }
.cu-stage__closed {
  position: absolute;
  z-index: 2;
  inset-inline: calc(var(--cu-pad) + 3.25rem);
  top: var(--cu-pad);
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--espresso);
  color: var(--blush);
  font-size: 0.8rem;
  text-align: center;
}

/* The three round buttons sit in the stage's corners, the one place a round bracelet never is:
   Undo top left, Start over top right, and Centre bottom left, only while the view is off. */
.cu-round {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  background: var(--white);
  transition: opacity 0.25s ease, scale 0.25s var(--ease);
}
.cu-round:disabled { opacity: 0; pointer-events: none; scale: 0.8; }
.cu-round:not(:disabled):active { scale: 0.94; }
.cu-round--undo { top: var(--cu-pad); left: var(--cu-pad); }
.cu-round--clear { top: var(--cu-pad); right: var(--cu-pad); }
.cu-round--home { bottom: var(--cu-pad); left: var(--cu-pad); opacity: 0; scale: 0.8; pointer-events: none; }
.cu-round--home.is-on { opacity: 1; scale: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .cu-round:not(:disabled):hover, .cu-size:hover { background: var(--surface); } }

/* The selected bead's own bar, under the bracelet. */
.cu-sel {
  position: absolute;
  inset-inline: var(--cu-pad);
  bottom: var(--cu-pad);
  z-index: 4;
  display: flex;
  align-items: center;
  /* Centred by its margins, not by half its own width: left: 50% would leave it only half the
     stage to be as wide as it needs. */
  width: fit-content;
  /* Clear of the round buttons in the corners. */
  max-width: calc(100% - 2 * var(--cu-pad) - 6.5rem);
  margin-inline: auto;
  border-radius: 2rem;
  opacity: 0;
  translate: 0 0.75rem;
  pointer-events: none;
  transition: opacity 0.22s ease, translate 0.28s var(--ease), scale 0.2s var(--ease);
}
.cu-sel { gap: 0.15rem; padding: 0.25rem 0.3rem 0.25rem 0.95rem; background: var(--espresso); color: var(--white); box-shadow: var(--shadow); }
.cu-sel.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
/* A bead low on the ring would be under the bar: the bar goes to the top instead. */
.cu-sel.is-top { top: var(--cu-pad); bottom: auto; translate: 0 -0.75rem; }
.cu-sel.is-top.is-on { translate: 0 0; }
.cu-app.is-dragging .cu-sel { opacity: 0; pointer-events: none; }
.cu-sel__name { min-width: 0; margin-inline-end: 0.35rem; overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.cu-sel__b {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  height: 2.5rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 2rem;
  background: rgb(255 255 255 / 0.12);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cu-sel__b [data-ico] svg { width: 1.05rem; height: 1.05rem; }
.cu-sel__b:focus-visible { outline-color: var(--white); }
@media (hover: hover) and (pointer: fine) { .cu-sel__b:hover { background: rgb(255 255 255 / 0.22); } }
@media (max-width: 479px) { .cu-sel__name { display: none; } .cu-sel { padding-inline-start: 0.3rem; } .cu-sel__b { padding-inline: 0.7rem; } }

/* The bin, in the bottom right corner while a bead is in the hand: where a right thumb already is
   on a phone, the one corner a round bracelet leaves free, and clear of Centre (bottom left) and
   the selected bead's bar (hidden while a bead is carried). It pops up as the drag starts, opens
   its lid, fills and says "let go" as a bead comes over it, and swallows the bead let go there
   (custom-canvas.js flies the bead in). The words show only over the can: anywhere else on a
   phone they would sit on the bottom of the ring. */
.cu-bin {
  position: absolute;
  /* In from the corner far enough for the ring that breathes out of the can. */
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.cu-bin__word {
  padding: 0.45rem 0.75rem;
  border-radius: 2rem;
  background: var(--espresso);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  translate: 0.75rem 0;
  transition: opacity 0.2s ease, translate 0.32s var(--ease), background-color 0.2s ease;
}
.cu-bin__can {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 1.5px dashed var(--burgundy);
  border-radius: 50%;
  background: var(--white);
  color: var(--burgundy);
  box-shadow: var(--shadow);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.18s ease, scale 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* A soft ring that breathes out of the can while it waits, so a thumb finds it. */
.cu-bin__can::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--burgundy); opacity: 0; pointer-events: none; }
.cu-bin.is-open .cu-bin__can::after { animation: cuBinPulse 1.4s var(--ease) 0.3s infinite; }
@keyframes cuBinPulse { 0% { opacity: 0.45; scale: 1; } 100% { opacity: 0; scale: 1.55; } }
.cu-bin__can [data-ico] svg { width: 1.6rem; height: 1.6rem; overflow: visible; }
/* Hinged at its right end: a positive turn lifts the left end clear of the rim. v0.5.4 turned it
   the other way, which pushed the lid down into the can, so it looked shut when it should open. */
.cu-bin__lid { transform-box: fill-box; transform-origin: 85% 100%; transition: rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.3s var(--ease); }

.cu-bin.is-open .cu-bin__can { opacity: 1; scale: 1; }
/* See-through while a bead is over it: the bead is drawn on the canvas under the can, and is seen
   going in rather than vanishing behind it. */
.cu-bin.is-over .cu-bin__can { scale: 1.22; border-style: solid; background: rgb(110 31 42 / 0.14); }
.cu-bin.is-over .cu-bin__can::after { animation: none; }
.cu-bin.is-over .cu-bin__word { opacity: 1; translate: 0 0; }
.cu-bin.is-over .cu-bin__lid { rotate: 32deg; translate: 0 -0.12rem; }
/* Let go over it: the bead flies in, the lid snaps shut, the can gulps and goes. */
/* The lid stays up until the bead is in (440ms), then shuts, and the can gulps. */
.cu-bin.is-eat .cu-bin__can { opacity: 1; border-style: solid; animation: cuBinGulp 0.76s var(--ease) both; }
.cu-bin.is-eat .cu-bin__lid { rotate: 32deg; translate: 0 -0.12rem; animation: cuBinLid 0.76s both; }
@keyframes cuBinGulp {
  0%, 56% { scale: 1.22; rotate: 0deg; background: rgb(110 31 42 / 0.14); color: var(--burgundy); }
  66% { scale: 0.88; rotate: -8deg; background: var(--burgundy); color: var(--white); }
  78% { scale: 1.1; rotate: 6deg; }
  90% { scale: 0.98; rotate: -2deg; }
  100% { scale: 1; rotate: 0deg; background: var(--burgundy); color: var(--white); }
}
@keyframes cuBinLid { 0%, 54% { rotate: 32deg; translate: 0 -0.12rem; } 64% { rotate: -5deg; translate: 0 0; } 100% { rotate: 0deg; translate: 0 0; } }
@media (max-width: 479px) {
  .cu-bin__can { width: 3.5rem; height: 3.5rem; }
  .cu-bin__word { font-size: 0.66rem; padding-inline: 0.65rem; }
}

/* ---------------------------------------------------------------- the stones */
.cu-picker {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--white);
  border-block-start: 1px solid var(--hair);
}
.cu-picker__grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 2.25rem;
  padding: 0.5rem 0 0;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  touch-action: none;
}
.cu-picker__bar { position: absolute; top: 0.4rem; left: 50%; width: 2.5rem; height: 0.22rem; border-radius: 1rem; background: var(--hair-strong); translate: -50% 0; }
.cu-picker__chev svg { width: 1rem; height: 1rem; transition: rotate 0.3s var(--ease); }
.cu-app.is-folded .cu-picker__chev svg { rotate: 180deg; }
.cu-picker__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  height: clamp(14rem, 39dvh, 25rem);
}
.cu-app.is-folded .cu-picker__body { display: none; }

.cu-picker__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem var(--cu-pad) 0.5rem; }
@media (min-width: 900px) { .cu-picker__head { padding-block-start: var(--cu-pad); } }
.cu-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 8.5rem;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.3rem 0 0.7rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  color: var(--dim);
}
.cu-search:focus-within { border-color: var(--ink); color: var(--ink); }
.cu-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  /* Sixteen pixels, or a phone zooms the page when the field is touched. */
  font-size: 1rem;
  font-weight: 600;
  appearance: none;
}
.cu-search input::placeholder { color: var(--dim); opacity: 1; }
.cu-search input::-webkit-search-cancel-button { display: none; }
.cu-search button { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; }
.cu-search button svg { width: 1rem; height: 1rem; }

.cu-sizes { display: flex; flex: none; border: 1px solid var(--hair-strong); border-radius: var(--radius); overflow: hidden; }
.cu-sizes[hidden] { display: none; }
.cu-sizes__b {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  min-width: 2.5rem;
  height: 2.75rem;
  padding: 0 0.3rem;
  border: 0;
  border-inline-start: 1px solid var(--hair);
  background: none;
  font-variant-numeric: tabular-nums;
}
.cu-sizes__b:first-child { border-inline-start: 0; }
.cu-sizes__b b { font-size: 0.95rem; font-weight: 700; }
.cu-sizes__b small { color: var(--dim); font-size: 0.62rem; font-weight: 700; }
.cu-sizes__b[aria-pressed="true"] { background: var(--espresso); color: var(--white); }
.cu-sizes__b[aria-pressed="true"] small { color: var(--blush); }
.cu-sizes__b:disabled { opacity: 0.3; }
.cu-sizes__b:focus-visible { outline-offset: -3px; }

.cu-chips {
  display: flex;
  gap: 0.4rem;
  padding: 0 var(--cu-pad) 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block-end: 1px solid var(--hair);
}
.cu-chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cu-chips { flex-wrap: wrap; overflow: visible; } }
.cu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  height: 2.25rem;
  padding: 0 0.8rem;
  border: 1px solid var(--hair-strong);
  border-radius: 2rem;
  background: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.cu-chip__dot { width: 1.2rem; height: 1.2rem; margin-inline-start: -0.3rem; border-radius: 50%; object-fit: contain; }
.cu-chip[aria-selected="true"] { border-color: var(--espresso); background: var(--espresso); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .cu-chip:not([aria-selected="true"]):hover { background: var(--surface); } }

.cu-grid-wrap { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--cu-pad); padding-block-end: calc(var(--cu-pad) + 0.5rem); }
.cu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr)); gap: 0.5rem; }
@media (min-width: 900px) { .cu-grid { grid-template-columns: repeat(auto-fill, minmax(5.9rem, 1fr)); gap: 0.6rem; } }
.cu-none, .cu-fail { margin: 0; padding: 2rem 1rem; color: var(--dim); text-align: center; }
.cu-fail { display: grid; justify-items: center; gap: 0.9rem; }
.cu-fail[hidden], .cu-none[hidden] { display: none; }
.cu-fail p { margin: 0; }

.cu-card { position: relative; min-width: 0; }
.cu-card__add {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 100%;
  height: 100%;
  padding: 0.45rem 0.3rem 0.5rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-tile);
  background: var(--white);
  text-align: center;
  transition: border-color 0.2s ease;
}
.cu-card.is-used .cu-card__add { border-color: var(--burgundy); }
.cu-card__pic { display: block; width: 100%; max-width: 4.25rem; aspect-ratio: 1; opacity: 0; transition: opacity 0.3s ease, scale 0.25s var(--ease); }
.cu-card__pic.is-in { opacity: 1; }
.cu-card__pic img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cu-card__name {
  display: -webkit-box;
  min-height: 2.3em;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cu-card__meta { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.35rem; color: var(--dim); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.cu-card__meta b { color: var(--ink); font-weight: 700; }
.cu-card__n {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  min-width: 1.35rem;
  padding: 0.1rem 0.3rem;
  border-radius: 1rem;
  background: var(--burgundy);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
}
.cu-card__info {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
}
.cu-card__info svg { width: 1rem; height: 1rem; }
.cu-card__add.is-tapped .cu-card__pic { animation: cuTap 0.32s var(--ease); }
@keyframes cuTap { 40% { scale: 0.82; } }
@media (hover: hover) and (pointer: fine) {
  .cu-card__add:hover { border-color: var(--hair-strong); }
  .cu-card__add:hover .cu-card__pic { scale: 1.08; }
  .cu-card__info:hover { color: var(--burgundy); }
}

/* The wide layout: the stones are a column of their own and never fold. After the rules above,
   because it undoes three of them. */
@media (min-width: 900px), (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
  .cu-main {
    grid-template-columns: minmax(0, 1fr) var(--cu-picker);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage picker" "dock picker";
  }
  .cu-picker { grid-template-rows: minmax(0, 1fr); border-inline-start: 1px solid var(--hair); border-block-start: 0; }
  .cu-picker__grip { display: none; }
  .cu-app.is-folded .cu-picker__body { display: grid; }
  .cu-picker__body { height: auto; }
}

/* ---------------------------------------------------------------- the total */
.cu-dock {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem max(var(--cu-pad), env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) max(var(--cu-pad), env(safe-area-inset-left));
  background: var(--white);
  border-block-start: 1px solid var(--hair);
}
/* The size, and how it sits on the wrist: the one number a visitor came for, beside the price. */
.cu-size {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  margin-inline-end: auto;
  padding: 0.25rem 0.8rem 0.25rem 0.3rem;
  border: 1px solid var(--hair-strong);
  border-radius: 2rem;
  background: var(--white);
  text-align: start;
}
.cu-size__ico { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-strong); color: var(--burgundy); }
.cu-size__words { display: grid; min-width: 0; overflow: hidden; }
.cu-size__n { overflow: hidden; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.cu-size__in { color: var(--dim); font-weight: 600; }
@media (max-width: 479px) { .cu-size__in { display: none; } }
.cu-size__fit { overflow: hidden; color: var(--dim); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.cu-size:not(.is-set) .cu-size__fit { color: var(--burgundy); text-decoration: underline; text-underline-offset: 0.18em; }
/* With a wrist chosen the ruler wears a ring that closes as the cord fills: --p is how far, 0 to
   1, written by custom.js with every bead. Full, the disc turns burgundy; one bead too many, the
   words do. */
.cu-size.is-set .cu-size__ico { background: radial-gradient(closest-side, var(--white) calc(100% - 3px), transparent calc(100% - 2.5px)), conic-gradient(var(--burgundy) calc(var(--p, 0) * 1turn), var(--hair-strong) 0); }
.cu-size.is-good { border-color: var(--burgundy); }
.cu-size.is-good .cu-size__ico { background: var(--burgundy); color: var(--white); }
.cu-size.is-over { border-color: var(--burgundy); }
.cu-size.is-over .cu-size__n { color: var(--burgundy); }
.cu-size:active { translate: 0 1px; }
.cu-dock__sum { display: grid; justify-items: end; flex: none; min-width: 0; text-align: end; }
.cu-dock__count { color: var(--dim); font-size: 0.72rem; white-space: nowrap; }
.cu-dock__total { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.cu-dock__go { flex: none; min-height: 3rem; padding-inline: 1.5rem; }
.cu-dock__go svg { width: 1.15rem; height: 1.15rem; }
@media (min-width: 900px) { .cu-dock { padding: 0.85rem 1.25rem; } .cu-dock__go { min-width: 12rem; } }
/* Three things in a row on a narrow phone: the ruler's disc goes, then the count. */
@media (max-width: 389px) {
  .cu-dock { gap: 0.5rem; }
  .cu-size { padding-inline-start: 0.75rem; }
  .cu-size .cu-size__ico { display: none; }
  .cu-dock__go { padding-inline: 1rem; }
  .cu-sizes__b { min-width: 2.1rem; }
  .cu-sizes__b { align-items: center; }
  .cu-sizes__b small { display: none; }
}
@media (max-width: 339px) { .cu-dock__count { display: none; } .cu-dock__go svg { display: none; } }
/* The size button now carries words that must be read whole ("25 to go" over "16 cm wrist"), and
   on a phone the order button was taking the room: 183px of a 390px dock in Turkish, where it
   reads SİPARİŞ VER, which left the size 97px and cut both lines short. Under 480px the order
   button gives up half a rem of padding each side, and its bag in Turkish. */
@media (max-width: 479px) {
  .cu-dock { gap: 0.5rem; }
  .cu-dock__go { padding-inline: 1rem; }
  [lang="tr"] .cu-dock__go svg { display: none; }
  [lang="tr"] .cu-dock__go { padding-inline: 0.85rem; letter-spacing: 0.08em; }
}
/* Narrower still, Tam oturuyor beside a four figure total in lira (1.577 TL) was cut at 360px
   and at 320px: the button's letters and padding close up, and at 320px the total and the
   size's words come down a size. */
@media (max-width: 389px) { .cu-dock__go { padding-inline: 0.75rem; letter-spacing: 0.08em; } [lang="tr"] .cu-dock__go { padding-inline: 0.6rem; } }
@media (max-width: 339px) {
  .cu-dock .cu-dock__total { font-size: 1rem; }
  .cu-dock .cu-size { padding-inline: 0.6rem; }
  .cu-dock .cu-size__n { font-size: 0.82rem; }
}

/* ---------------------------------------------------------------- a phone, upright
   What a phone shows is short: the browser's own bars leave about 600px of a 360px screen, and
   v0.4.8 gave 44% of it to the stones and drew the bracelet in what was left, 200px across. Now the
   stones are one row that swipes sideways under the bracelet (a bar, the search and sizes, the
   colours, one row of cards: about 190px), so the bracelet keeps the rest, fitted to it. Pulled up
   (or its bar tapped) the sheet is tall and the row becomes the whole grid over a strip of
   bracelet; pulled down it folds away (custom.js, setSheet). */
@media (max-width: 899px) and (orientation: portrait) {
  .cu-bar { height: 3rem; }
  .cu-bar__brand { width: 5.25rem; }

  .cu-picker { border: 1px solid var(--hair); border-block-end: 0; border-radius: 1rem 1rem 0 0; box-shadow: 0 -0.4rem 1.25rem rgb(34 24 21 / 0.06); }
  .cu-picker__grip { height: 1.5rem; padding: 0; }
  .cu-picker__bar { top: 0.55rem; width: 2.75rem; }
  .cu-picker__grip .cu-picker__word, .cu-picker__grip .cu-picker__chev { display: none; }
  .cu-app.is-folded .cu-picker__grip { height: 3rem; padding-block-start: 0.6rem; }
  .cu-app.is-folded .cu-picker__bar { top: 0.5rem; }
  .cu-app.is-folded .cu-picker__grip .cu-picker__word { display: inline; }
  .cu-app.is-folded .cu-picker__grip .cu-picker__chev { display: inline-grid; }
  .cu-picker__body { height: auto; }

  .cu-picker__head { flex-wrap: nowrap; padding: 0 var(--cu-pad) 0.45rem; }
  .cu-search { flex-basis: 5rem; }
  .cu-search { height: 2.5rem; }
  .cu-sizes__b { height: 2.5rem; min-width: 2.4rem; }
  .cu-chips { padding-block-end: 0.5rem; }
  .cu-chip { height: 2rem; padding: 0 0.7rem; font-size: 0.76rem; }
  .cu-chip__dot { width: 1.1rem; height: 1.1rem; }

  /* The row: cards side by side, a swipe apart, the next one always showing at the edge. */
  .cu-grid-wrap { overflow: auto hidden; overscroll-behavior-x: contain; padding-block: 0.55rem 0.6rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--cu-pad); scrollbar-width: none; }
  .cu-grid-wrap::-webkit-scrollbar { display: none; }
  .cu-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 4.6rem; gap: 0.4rem; width: max-content; }
  .cu-grid > .cu-card { scroll-snap-align: start; }
  @media (min-width: 600px) { .cu-grid { grid-auto-columns: 5.6rem; } .cu-card__pic { max-width: 4rem; } }
  /* In the row a name has one line: the picture is what a thumb chooses by, and the whole name is
     on the card's label and in the grid. */
  .cu-app:not(.is-tall) .cu-card__name { display: block; width: 100%; min-height: 0; text-overflow: ellipsis; white-space: nowrap; }
  .cu-none, .cu-fail { padding-block: 1.1rem; }
  .cu-card__add { gap: 0.1rem; padding: 0.35rem 0.2rem 0.4rem; }
  .cu-card__pic { max-width: 3.25rem; }
  .cu-card__name { font-size: 0.68rem; }
  .cu-card__meta { column-gap: 0.25rem; font-size: 0.66rem; }
  .cu-card__info { width: 1.9rem; height: 1.9rem; }
  .cu-card__info svg { width: 0.9rem; height: 0.9rem; }

  /* Tall: the whole grid, the bracelet a strip above it. */
  .cu-app.is-tall .cu-main { grid-template-rows: minmax(8.5rem, 28dvh) minmax(0, 1fr) auto; }
  .cu-app.is-tall .cu-grid-wrap { overflow: hidden auto; overscroll-behavior: contain; scroll-snap-type: none; padding-block-end: 1rem; }
  .cu-app.is-tall .cu-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); grid-auto-columns: auto; width: auto; }
  .cu-app.is-tall .cu-stage__hint { display: none; }

  .cu-dock { padding-block: 0.45rem calc(0.45rem + env(safe-area-inset-bottom)); }
  .cu-dock__total { font-size: 1.15rem; }
  .cu-dock__go { min-height: 2.75rem; }

  .cu-round { width: 2.5rem; height: 2.5rem; }
}
/* In Turkey the bar carries the language switch too, and on a narrow phone three things on the
   right no longer leave the middle to the name: it moves beside the arrow. */
@media (max-width: 419px) {
  [data-region="TR"] .cu-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  [data-region="TR"] .cu-bar__brand { justify-self: start; }
  .cu-lang { margin-inline-end: 0; }
}

/* ---------------------------------------------------------------- anything that opens */
.cu-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  /* One row the height of the screen, or the panel is as tall as its words and max-height: 100%
     measures nothing. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  justify-items: center;
  background: rgb(34 24 21 / 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cu-veil.is-on { opacity: 1; }
.cu-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: 34rem;
  max-height: min(92dvh, 100% - 1.5rem);
  border-radius: 0.9rem 0.9rem 0 0;
  background: var(--white);
  box-shadow: var(--shadow);
  translate: 0 2.5rem;
  transition: translate 0.34s var(--ease-out);
}
.cu-veil.is-on .cu-dialog { translate: 0 0; }
.cu-dialog--small { max-width: 26rem; }
.cu-dialog--order { max-width: 36rem; }
@media (min-width: 640px) {
  .cu-veil { align-items: center; padding: 1.5rem; }
  .cu-dialog { border-radius: 0.5rem; max-height: min(46rem, 100%); translate: 0 1rem; }
}
.cu-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.75rem 0.5rem 1.25rem; }
.cu-dialog__title { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
.cu-dialog__sub { margin: 0.3rem 0 0; color: var(--dim); font-size: 0.85rem; }
.cu-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem 1.25rem 1.25rem; }
.cu-dialog__foot { display: grid; gap: 0.6rem; padding: 0.9rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--hair); }
.cu-x { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; }
.cu-x svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .cu-x:hover { background: var(--surface); } }
.cu-link { justify-self: start; padding: 0.4rem 0; border: 0; background: none; color: var(--burgundy); font-size: 0.85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.cu-link--back { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink); text-decoration: none; }
.cu-link--back svg { width: 1rem; height: 1rem; }
.cu-dialog__foot .cu-link { justify-self: center; }

/* A question before a whole design comes off the cord (Start over, Inspire over a design). */
.cu-ask { display: grid; justify-items: center; gap: 0.9rem; padding-block: 0.25rem 0.5rem; text-align: center; }
.cu-ask__ico { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--surface-strong); color: var(--burgundy); scale: 0.6; opacity: 0; transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s, opacity 0.2s ease 0.08s; }
.cu-ask__ico svg { width: 1.6rem; height: 1.6rem; }
.cu-veil.is-on .cu-ask__ico { scale: 1; opacity: 1; }
.cu-ask p { margin: 0; max-width: 22rem; color: var(--dim); font-size: 0.95rem; }

/* ---------------------------------------------------------------- photographs */
.cu-photos { display: grid; gap: 0.8rem; }
/* The frame is square until the photograph lands, then takes the photograph's own shape (set by
   the script), so a sheet of views with captions is shown whole. It does not zoom: the owner wants
   the stones seen as they are, and only the bracelet comes in close. */
.cu-photos__frame { position: relative; overflow: hidden; border-radius: var(--radius-tile); background: var(--surface); aspect-ratio: 1; max-height: 70dvh; margin-inline: auto; width: 100%; }
.cu-photos__big { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; user-select: none; -webkit-user-select: none; }
.cu-photos__big.is-in { opacity: 1; }
.cu-photos__nav { position: absolute; top: 50%; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--white); translate: 0 -50%; }
.cu-photos__nav--prev { left: 0.6rem; }
.cu-photos__nav--next { right: 0.6rem; }
.cu-photos__dots { display: flex; justify-content: center; gap: 0.2rem; }
.cu-photos__dots button { position: relative; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; }
.cu-photos__dots button::before { content: ""; position: absolute; inset: 0.6rem; border-radius: 50%; background: var(--hair-strong); }
.cu-photos__dots button[aria-current="true"]::before { background: var(--burgundy); }
.cu-photos__text { margin: 0; color: var(--dim); font-size: 0.85rem; text-align: center; }

/* ---------------------------------------------------------------- the guide */
.cu-guide { display: grid; gap: 1.5rem; }
.cu-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cu-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.cu-step__ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-strong); color: var(--burgundy); }
.cu-step__ico svg { width: 1.3rem; height: 1.3rem; }
.cu-step b { display: block; font-size: 0.95rem; }
.cu-step p { margin: 0.15rem 0 0; color: var(--dim); font-weight: 600; }
.cu-guide__wrist { display: grid; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hair); }
.cu-guide__wrist h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.cu-guide__wrist p { margin: 0; color: var(--dim); }
.cu-guide__wrist figure { margin: 0; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--radius-tile); }
.cu-guide__wrist img { display: block; width: 100%; height: auto; }
.cu-notes { display: grid; gap: 0.5rem; margin: 0; padding: 1rem 1rem 1rem 2rem; border-radius: var(--radius-tile); background: var(--surface); color: var(--dim); }

/* ---------------------------------------------------------------- the wrist */
.cu-measure { display: grid; gap: 1rem; }
.cu-measure__pane { display: grid; gap: 0.6rem; }
.cu-measure__pane[hidden] { display: none; }
.cu-measure__note { margin: 0; color: var(--dim); font-size: 0.82rem; }
.cu-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--hair-strong); border-radius: var(--radius); overflow: hidden; }
.cu-seg button { min-height: 2.75rem; padding: 0 0.5rem; border: 0; border-inline-start: 1px solid var(--hair); background: none; font-size: 0.8rem; font-weight: 700; }
.cu-seg button:first-child { border-inline-start: 0; }
.cu-seg button[aria-pressed="true"] { background: var(--espresso); color: var(--white); }
.cu-seg button:focus-visible { outline-offset: -3px; }
.cu-fieldrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.cu-field { display: grid; gap: 0.35rem; min-width: 0; }
.cu-field .label { color: var(--ink); letter-spacing: 0.1em; }
.cu-field__box { display: flex; align-items: center; border: 1px solid var(--hair-strong); border-radius: var(--radius); }
.cu-field__box:focus-within { border-color: var(--ink); }
.cu-field__box input { flex: 1; min-width: 0; height: 3.1rem; padding: 0 0.85rem; border: 0; outline: none; background: none; color: var(--ink); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cu-field__box em { padding-inline-end: 0.85rem; color: var(--dim); font-style: normal; font-weight: 700; }
.cu-result { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-tile); background: var(--surface); }
.cu-result__n { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* The wrist without typing (v0.6.6): a step down and a step up either side of the field, and the
   usual sizes in a row under it. Seven of them at 2.1rem and six gaps come to 269px, inside the
   280px a 320px phone leaves the sheet, so the row never wraps one size onto a line of its own.
   The field keeps its sixteen pixels and more. */
.cu-wrist { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 3.1rem; gap: 0.5rem; }
.cu-wrist__b { display: inline-grid; place-items: center; min-height: 3.1rem; padding: 0; border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--white); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.cu-wrist .cu-field__box input { padding-inline-end: 0.3rem; text-align: center; }
.cu-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.1rem, 1fr)); gap: 0.35rem; }
.cu-picks button { min-height: 2.75rem; padding: 0; border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--white); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cu-picks button[aria-pressed="true"] { border-color: var(--espresso); background: var(--espresso); color: var(--white); }
.cu-wrist__b:active, .cu-picks button:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .cu-wrist__b:hover, .cu-picks button:not([aria-pressed="true"]):hover { border-color: var(--ink); } }
/* How to measure, opened under the field: the guide's own block, which is a grid and would
   show through the hidden attribute without this. */
.cu-measure__help[hidden] { display: none; }

/* ---------------------------------------------------------------- the maker (the admin's frame)
   The bracelet's name where the wordmark was, cut short rather than pushing the tools off a 360
   screen (back 44px, Inspire and the guide 88px); the sizes to fill to, five across; the shop's
   category as a select in the field's own box, sixteen pixels so a phone does not zoom on it. */
.cu-bar__name { max-width: min(40vw, 24rem); margin: 0; overflow: hidden; font-size: 0.85rem; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cu-fills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.cu-fills button { display: inline-grid; grid-auto-flow: column; place-content: center; align-items: baseline; gap: 0.15rem; min-width: 0; min-height: 3.1rem; padding: 0; border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--white); font-variant-numeric: tabular-nums; }
.cu-fills b { font-size: 1.1rem; }
.cu-fills small { color: var(--dim); font-size: 0.7rem; font-weight: 700; }
.cu-fills button:disabled { opacity: 0.35; }
.cu-fills button:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .cu-fills button:not(:disabled):hover { border-color: var(--ink); } }
.cu-field__box select { flex: 1; min-width: 0; height: 3.1rem; padding: 0 0.85rem; border: 0; outline: none; background: none; color: var(--ink); font-family: var(--grotesk); font-size: 1rem; font-weight: 700; }
.cu-field__box:has(:focus-visible) { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.cu-save__msg { margin: 0; color: var(--burgundy); font-size: 0.85rem; font-weight: 700; }
.cu-save__msg:empty { display: none; }

/* ---------------------------------------------------------------- the order */
.cu-ord__pane { display: grid; gap: 1rem; }
.cu-ord__pane[hidden] { display: none; }
.cu-ord__top { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
.cu-ord__pic { overflow: hidden; border: 1px solid var(--hair); border-radius: var(--radius-tile); aspect-ratio: 1; }
.cu-ord__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cu-ord__facts { display: grid; gap: 0.5rem; min-width: 0; }
.cu-ord__fit { margin: 0; font-size: 0.9rem; }
.cu-ord__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cu-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid var(--hair-strong);
  border-radius: 2rem;
  background: none;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cu-ghost svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) and (pointer: fine) { .cu-ghost:hover { background: var(--surface); } }
.cu-ord__pane > .label { margin: 0.25rem 0 -0.5rem; }
.cu-ord__list { display: grid; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--hair); }
.cu-ord__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.45rem 0; border-block-start: 1px solid var(--hair); }
.cu-ord__list li:first-child { border-block-start: 0; }
.cu-ord__list img { display: block; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.cu-ord__list b { display: block; overflow: hidden; font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.cu-ord__list small { color: var(--dim); font-size: 0.74rem; }
.cu-ord__each { font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-ord__qty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cu-ord__qty .label { margin: 0; color: var(--ink); }
.cu-sums { display: grid; gap: 0.35rem; }
.cu-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.cu-sum[hidden] { display: none; }
.cu-sum--off { color: var(--burgundy); }
.cu-sum--total { font-size: 1.05rem; }
.cu-sum--total b { font-size: 1.45rem; }
.cu-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.cu-code__in { min-width: 0; height: 3rem; padding: 0 0.85rem; border: 1px solid var(--hair-strong); border-radius: var(--radius); outline: none; background: var(--white); color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cu-code__in::placeholder { color: var(--dim); font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 1; }
.cu-code__in:focus { border-color: var(--ink); }
.cu-code__go { min-height: 3rem; padding-inline: 1rem; }
.cu-code__msg { min-height: 1.2em; margin: -0.5rem 0 0; color: var(--dim); font-size: 0.8rem; }
.cu-code__msg:empty { display: none; }
.cu-ord__note { margin: 0; padding: 0.8rem 0.95rem; border-radius: var(--radius-tile); background: var(--surface); font-size: 0.84rem; }
.cu-ord__terms { margin: 0; color: var(--dim); font-size: 0.8rem; }
.cu-ord__terms a { color: inherit; }
.cu-ord .field input, .cu-ord .field textarea { font-size: 1rem; }
.cu-ord .form__status { min-height: 1.3em; margin: 0; font-size: 0.85rem; }
.cu-ord .form__status.is-bad { color: var(--burgundy); }
.cu-ord .field.is-bad input, .cu-ord .field.is-bad textarea { border-color: var(--burgundy); }
.cu-ord .field__err { color: var(--burgundy); font-size: 0.8rem; }
.cu-ord .field__err:empty { display: none; }

.cu-done { justify-items: center; padding-block: 0.5rem 0.25rem; text-align: center; }
.cu-done h3 { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 700; }
.cu-done p { margin: 0; color: var(--dim); }
.cu-done__ref { padding: 0.35rem 0.9rem; border: 1px solid var(--hair-strong); border-radius: 2rem; color: var(--ink); font-weight: 700; letter-spacing: 0.12em; }
.cu-tick { width: 3.75rem; height: 3.75rem; fill: none; stroke: var(--burgundy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cu-tick path { stroke-dasharray: 40; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .cu-stage__hint [data-ico], .cu-tool.is-busy [data-ico], .cu-card__add.is-tapped .cu-card__pic, .cu-bin.is-open .cu-bin__can::after, .cu-bin.is-eat .cu-bin__can, .cu-bin.is-eat .cu-bin__lid { animation: none; }
  .cu-dialog, .cu-veil, .cu-sel, .cu-ask__ico, .cu-bin__can, .cu-bin__word, .cu-bin__lid, .cu-round, .cu-stage__hint, .cu-card__pic, .cu-picker__chev svg, .cu-photos__big { transition: none; }
}