/* ============================================================================
   cambio (turn): one planner page, two weeks. Layer A is the week today, hand
   work crammed edge to edge and spilling past 19:00. Layer B is the same week
   with the repeated work running on its own before dawn. A slide-rule cursor
   (scroll, pointer, keyboard) wipes B over A with clip-path, one day at a time.
   ========================================================================== */

.turn {
  --turn-line: var(--accent-deep);
  --turn-hatch: color-mix(in oklab, var(--sc-ink) 17%, transparent);
  --turn-hatch-2: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --turn-a-bg: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-surface));
  --turn-half: color-mix(in oklab, var(--sc-ink) 6%, transparent);
  --turn-dawn: color-mix(in oklab, var(--signal) 7%, var(--sc-surface));
  --turn-run-ink: color-mix(in oklab, var(--signal) 80%, var(--sc-ink));
  --turn-shade: hsl(var(--sc-shadow-color) / 0.16);
  --turn-gut: 4.4rem;      /* time axis */
  --turn-padr: 1.3rem;     /* page margin right of Friday */
  /* Where the cursor rests with no JS, and under reduced motion: on the
     Tuesday/Wednesday rule. Keep in step with X_REST in turn.js. */
  --turn-rest: 40%;
  /* the drone at rest just under the page's right corner; the quote below
     keeps clear of it */
  --turn-drone-w: clamp(8.6rem, 14vw, 13.5rem);
  --turn-drone-out: 1.6rem;   /* how far it overhangs the page's right edge */
  --turn-drone-gap: 0.7rem;   /* clear paper between the page and its highest ink */
}
/* Night: A is hatched in ink, never in the signal teal. Teal only ever means
   "runs on its own" here (chips, the dawn band, the B key). */
:root[data-theme="night"] .turn {
  --turn-line: var(--sc-accent);
  --turn-hatch: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --turn-hatch-2: color-mix(in oklab, var(--sc-ink) 9%, transparent);
  --turn-a-bg: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-surface));
  --turn-half: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  --turn-dawn: color-mix(in oklab, var(--signal) 8%, var(--sc-surface));
  --turn-run-ink: var(--signal);
  --turn-shade: hsl(var(--sc-shadow-color) / 0.55);
}

.turn__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A flow chapter right after a pinned act: the stage above still needs a
   viewport to scroll off, so the top padding here is trimmed. */
.turn__inner { padding-top: clamp(3.5rem, 9vh, 6.5rem); padding-bottom: clamp(5rem, 12vh, 8rem); }

/* ---------------------------------------------------------------- head -- */
.turn__head { position: relative; margin-bottom: clamp(2.6rem, 6vh, 3.75rem); }
.turn__copy { position: relative; z-index: 1; }
.turn__h { max-width: none; }

/* ---------------------------------------------------------------- desk -- */
.turn__desk { position: relative; }
.turn__legend { display: none; }

/* The drone: what "dirigir" looks like on a desk, set down on the desk just
   under the page's corner with its propellers still. It stays clear of the
   planner, so nothing of the page shows through the light hatching of its
   body. It rides with the planner (so it never meets the fixed chrome while the
   week is being read) and yaws a few degrees with the cursor. The engraving is
   900 x 650 and its ink starts 5.4 % under the top of its box (x .023 to .964,
   y .054 to .946), so the box is hung from the page's bottom edge by that
   margin and the highest ink lands --turn-drone-gap under the page, whatever
   the width. The one shadow is the drop-shadow below, with its offset: the
   engraving carries none of its own. */
.turn__drone {
  position: absolute; z-index: 4; pointer-events: none;
  right: calc(-1 * var(--turn-drone-out));
  top: calc(100% + var(--turn-drone-gap) - var(--turn-drone-w) * 0.039);
  width: var(--turn-drone-w); aspect-ratio: 900 / 650;
  /* rests at the middle of the JS range (Tuesday/Wednesday rule); keep in
     step with X_REST and the yaw in turn.js */
  transform: rotate(1.5deg); transform-origin: 50% 56%;
  filter: drop-shadow(5px 10px 7px hsl(var(--sc-shadow-color) / 0.3));
  will-change: transform;
}
:root[data-theme="night"] .turn__drone { filter: drop-shadow(5px 10px 8px hsl(var(--sc-shadow-color) / 0.8)); }
.turn__drone-img {
  width: 100%; height: 100%;
  /* its hatching is light, so it takes full ink to hold its own on the paper */
  --engr-ink: var(--sc-ink);
  /* Set here, not through --src: a relative url() carried in a custom
     property resolves against css/core.css and 404s. */
  -webkit-mask: url(../../assets/misc/dron.webp) center / contain no-repeat;
          mask: url(../../assets/misc/dron.webp) center / contain no-repeat;
}
/* Night: still ink (never the gold or the signal teal), a touch under full so
   the light hatching does not glare on the dark ground. */
:root[data-theme="night"] .turn__drone-img { --engr-ink: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-canvas)); }

/* ---------------------------------------------------------- instrument -- */
.turn__cmp {
  --gut: var(--turn-gut);
  --tabs: 4.1rem;
  --knob-y: 1.45rem;   /* knob centre, from the top of the cursor row */
  --hdr: 2.35rem;
  --band: 62px;
  --brk: 16px;
  --hr: clamp(29px, 4.15vh, 40px);
  --spill: 46px;
  --y0: calc(var(--band) + var(--brk));

  position: relative;
  display: grid;
  grid-template-columns: var(--gut) minmax(0, 1fr);
  grid-template-rows: var(--hdr) var(--band) var(--brk) calc(11 * var(--hr)) var(--spill) var(--tabs);
  padding: 1.35rem var(--turn-padr) 0.55rem 0;
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background-color var(--theme-dur) var(--ease-out), border-color var(--theme-dur) var(--ease-out);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  /* Tags hidden at the edges keep their box; clip them sideways without
     creating a scroll container (sticky cursor keeps working, rings above
     the top edge stay visible). */
  overflow-x: clip;
}
.turn.is-dragging, .turn.is-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }

/* wire binding across the top edge of the page */
.turn__rings {
  position: absolute; left: 1.6rem; top: -13px; width: calc(100% - 3.2rem); height: 22px;
  overflow: visible; color: var(--sc-ink-soft); pointer-events: none;
}
.turn__wire { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.turn__hole { fill: var(--sc-canvas); stroke: var(--rule-strong); stroke-width: 0.8; }

/* day header */
.turn__days {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0; align-items: end;
}
.turn__day {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0 0.6rem 0.65rem;
  font: 500 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.turn__dnum {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; margin-left: -0.1rem;
  font: 400 1.02rem/1 var(--sc-font-display); letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums lining-nums; color: var(--sc-ink);
  border-radius: 50%;
}
.turn__dnum:empty { display: none; }
.turn__day.is-today .turn__dnum { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* time axis */
.turn__axis { grid-column: 1; grid-row: 2 / 6; position: relative; }
.turn__t {
  position: absolute; right: 0.7rem; transform: translateY(-50%);
  top: calc(var(--y0) + (var(--h) - 8) * var(--hr));
  font: 400 0.66rem/1 var(--sc-font-mono); letter-spacing: 0.02em;
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.turn__t--band { top: calc(7px + var(--row) * 26px + 11px); }
/* axis break: the hours between 06:00 and 08:00 are folded away */
.turn__brk {
  position: absolute; right: -5px; top: calc(var(--band) + var(--brk) / 2 - 5px);
  width: 10px; height: 10px;
  background:
    linear-gradient(115deg, transparent 38%, var(--sc-ink-soft) 38% 50%, transparent 50%) 0 0 / 5px 10px no-repeat,
    linear-gradient(115deg, transparent 38%, var(--sc-ink-soft) 38% 50%, transparent 50%) 5px 0 / 5px 10px no-repeat;
}

/* the two weeks */
.turn__stage { grid-column: 2; grid-row: 2 / 6; position: relative; isolation: isolate; cursor: ew-resize; }
.turn__week { position: absolute; inset: 0; }
.turn__week--a { z-index: 1; }
.turn__week--b {
  z-index: 2;
  /* No-JS and first paint: an honest comparison that rests on a day rule. */
  clip-path: inset(0 0 0 var(--turn-rest));
}
.turn__band, .turn__grid {
  position: absolute; left: 0; right: 0;
  background-color: var(--sc-surface);
  transition: background-color var(--theme-dur) var(--ease-out);
}
.turn__band {
  top: 0; height: var(--band);
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 20% 100%;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.turn__grid {
  top: var(--y0); height: calc(11 * var(--hr));
  background-image:
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(var(--turn-half) 1px, transparent 1px);
  background-size: 20% 100%, 100% var(--hr), 100% var(--hr);
  background-position: 0 0, 0 0, 0 calc(var(--hr) / 2);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-strong);
}
/* the spill and the fold stay paper in B so it hides A's overflow */
.turn__week--b { background: var(--sc-surface); transition: background-color var(--theme-dur) var(--ease-out); }
.turn__week--b .turn__band { background-color: var(--turn-dawn); }
/* the band says what it is, once, at its far end */
.turn__week--b .turn__band::after {
  content: "corre solo";
  position: absolute; right: 0.6rem; top: 7px; height: 21px;
  display: flex; align-items: center; gap: 0.4rem;
  font: 500 0.6rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turn-run-ink);
}

.turn__cols, .turn__blks, .turn__runs { list-style: none; margin: 0; padding: 0; }
.turn__cols { position: absolute; inset: 0; }
.turn__col { position: absolute; top: 0; bottom: 0; left: calc(var(--d) * 20%); width: 20%; }

/* ---- A: hand work, crammed ---- */
.turn__blk {
  position: absolute; left: 5px; right: 5px;
  top: calc(var(--y0) + (var(--s) - 8) * var(--hr) + 2px);
  height: calc((var(--e) - var(--s)) * var(--hr) - 4px);
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--sc-r-sm);
  background:
    repeating-linear-gradient(135deg, var(--turn-hatch) 0 1px, transparent 1px 5px),
    var(--turn-a-bg);
  box-shadow: var(--sc-e1);
  transform: rotate(var(--r, 0deg));
  font: 500 0.66rem/1.28 var(--sc-font-mono); letter-spacing: 0.005em;
  color: var(--sc-ink);
}
.turn__blk span {
  display: inline; padding: 1px 3px; margin-left: -3px;
  background: var(--turn-a-bg);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: 2px;
}
/* double-booked: the second block lands on top of the first */
.turn__blk--over { left: 34%; right: 2px; z-index: 2; box-shadow: var(--sc-e2); }
/* the report that eats the afternoon: cross-hatched, heavier ink */
.turn__blk--heavy {
  background:
    repeating-linear-gradient(135deg, var(--turn-hatch) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, var(--turn-hatch-2) 0 1px, transparent 1px 4px),
    var(--turn-a-bg);
  border-color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
}
/* past 19:00 the block keeps going and fades out of the page */
.turn__blk--spill, .turn__ghost--spill {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9rem), transparent);
}

/* ---- B: the repeated work runs before dawn, the day opens up ---- */

/* Ghosts: A's blocks for that day, drawn in outline inside B. When the day
   switches on they fold up into the dawn band, where the chips appear: the
   same work, moved to 05:00. Built by turn.js, so no-JS never sees them. */
.turn__ghosts { position: absolute; inset: 0; pointer-events: none; }
.turn__ghost {
  --dy: calc(22px - var(--y0) - (var(--s) - 8) * var(--hr));
  position: absolute; left: 5px; right: 5px;
  top: calc(var(--y0) + (var(--s) - 8) * var(--hr) + 2px);
  height: calc((var(--e) - var(--s)) * var(--hr) - 4px);
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 32%, transparent);
  border-radius: var(--sc-r-sm);
  background: repeating-linear-gradient(135deg, var(--turn-hatch-2) 0 1px, transparent 1px 5px);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 0;
  opacity: 0.9;
}
.turn__ghost--over { left: 34%; right: 2px; }
.turn__week--b .turn__col.is-on .turn__ghost {
  animation: turn-lift 560ms cubic-bezier(0.55, 0, 0.3, 1) both;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes turn-lift {
  0%   { opacity: 0.9; transform: rotate(var(--r, 0deg)); }
  65%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate3d(0, var(--dy), 0) scaleY(0.07) rotate(0deg); }
}
@keyframes turn-fade { from { opacity: 0.9; } to { opacity: 0; } }

.turn__chip {
  position: absolute; left: 6px; top: calc(7px + var(--row) * 26px);
  max-width: calc(100% - 12px); overflow: hidden;
  background: var(--sc-surface);
}
.turn__chip::before { flex: none; }
.turn__ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.turn.is-live .turn__week--b .turn__chip::before { animation: turn-run 2.6s var(--ease-io) infinite; }
.turn__chip:nth-child(2)::before { animation-delay: -1.3s !important; }
@keyframes turn-run { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* JS: chips land as the ghosts reach the band, the wide blocks settle after. */
.turn--js .turn__week--b .turn__chip {
  opacity: 0; transform: translate3d(0, 6px, 0);
  transition: opacity 320ms var(--ease-out), transform 460ms var(--ease-out);
}
.turn--js .turn__week--b .turn__col.is-on .turn__chip {
  opacity: 1; transform: none;
  transition-delay: calc(300ms + var(--row) * 120ms);
}
.turn--js .turn__week--b .turn__b {
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 380ms var(--ease-out), transform 560ms var(--ease-out);
}
.turn--js .turn__week--b .turn__col.is-on .turn__b { opacity: 1; transform: none; transition-delay: 440ms; }
.turn--js .turn__week--b .turn__col.is-on .turn__b:nth-child(2) { transition-delay: 560ms; }

.turn__b {
  position: absolute; left: 6px; right: 6px;
  top: calc(var(--y0) + (var(--s) - 8) * var(--hr) + 3px);
  height: calc((var(--e) - var(--s)) * var(--hr) - 6px);
  display: flex; align-items: flex-start; gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  box-shadow: var(--sc-e1), var(--sc-edge);
  font: 480 0.98rem/1.15 var(--sc-font-display);
  letter-spacing: -0.01em;
  color: var(--sc-ink);
}
.turn__b--clientes {
  background: color-mix(in oklab, var(--sc-accent) 24%, var(--sc-surface));
  border-color: color-mix(in oklab, var(--accent-deep) 36%, transparent);
}
/* at night the freed hours still glow a little, in sodium */
:root[data-theme="night"] .turn__b--clientes {
  background: color-mix(in oklab, var(--sc-accent) 15%, var(--sc-surface));
  border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent);
}
.turn__b--pensar {
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--hr) / 2 - 1px), var(--turn-half) calc(var(--hr) / 2 - 1px) calc(var(--hr) / 2)),
    var(--sc-surface);
}
.turn__ico {
  width: 15px; height: 15px; flex: none; margin-top: 0.1rem;
  fill: none; stroke: var(--accent-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
:root[data-theme="night"] .turn__ico { stroke: var(--sc-accent); }

/* ---- the cursor ---- */
.turn__track { grid-column: 2; grid-row: 1 / 7; position: relative; z-index: 5; pointer-events: none; }
.turn__div {
  position: absolute; left: var(--turn-rest); top: 0; bottom: 0; width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  will-change: transform; transform: translate3d(0, 0, 0);
}
/* JS drives the position from x = 0 with a transform */
.turn--js .turn__div { left: 0; }
.turn__div::before {
  content: ""; position: absolute; left: -0.75px; width: 1.5px;
  top: calc(var(--hdr) - 1px); bottom: calc(var(--tabs) - var(--knob-y));
  background: var(--turn-line);
}
/* B is a fresh sheet laid over the old week: it casts a short shadow
   leftward onto A along the cursor. */
.turn__div::after {
  content: ""; position: absolute; right: 0; width: 20px;
  top: var(--hdr); bottom: var(--tabs);
  background: linear-gradient(to left, var(--turn-shade), transparent);
  pointer-events: none;
}
.turn__top {
  position: absolute; left: -4.5px; top: calc(var(--hdr) - 5px); width: 9px; height: 9px;
  background: var(--turn-line); transform: rotate(45deg);
}
/* Sticks to the bottom of the viewport while the page is still rising into
   view, then settles in its own row under 19:00. While it floats over the
   week (.is-stuck) only the knob shows, on a small plate of paper. */
.turn__cursor {
  position: sticky; bottom: 0.85rem; flex: none;
  display: block; height: var(--tabs); width: 0;
}
/* --g (from turn.js) keeps the knob 16px inside the week at the far ends;
   the tags shift with it */
.turn__grip { position: absolute; left: 0; top: var(--knob-y); width: 0; height: 0; transform: translate3d(var(--g, 0px), 0, 0); }
.turn__plate {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px;
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  box-shadow: var(--sc-e2), var(--sc-edge);
  opacity: 0; transition: opacity 220ms var(--ease-out);
}
.turn.is-stuck .turn__plate { opacity: 1; }
.turn__knob {
  position: absolute; left: -16px; top: -16px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--sc-r-sm);
  background: var(--action); color: var(--action-ink);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--action) 55%, black), var(--sc-e2), var(--sc-edge);
  cursor: grab; pointer-events: auto; touch-action: none;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out);
}
.turn__knob svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Focus ring: the global two-tone ring. Only the halo is restated, because
   the knob's own shadow would otherwise win over it. */
.turn__knob:focus-visible { box-shadow: 0 0 0 5px var(--focus), var(--sc-e2); }
@media (hover: hover) and (pointer: fine) {
  .turn__knob:hover { background: var(--action-hover); }
}
.turn.is-dragging .turn__knob { transform: scale(0.96); }

.turn__tag {
  position: absolute; top: var(--knob-y);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; white-space: nowrap;
  font: 500 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.01em;
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e1);
  transform: translateY(-50%);
  transition: opacity 220ms var(--ease-out);
}
.turn__tag--a { right: calc(26px - var(--g, 0px)); color: var(--sc-ink-soft); }
.turn__tag--b { left: calc(26px + var(--g, 0px)); color: var(--sc-ink); }
.turn__tag.is-off, .turn.is-stuck .turn__tag { opacity: 0; }
.turn__tag--b.is-wrap { white-space: normal; width: 13.5rem; line-height: 1.3; padding-block: 0.42rem; }
.turn__key { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.turn__key--a {
  border: 1px solid var(--rule-strong);
  background: repeating-linear-gradient(135deg, var(--turn-hatch) 0 1px, transparent 1px 3px), var(--turn-a-bg);
}
.turn__key--b { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* The instruction lives under the knob it describes. It goes once the
   visitor has moved the cursor, and while the cursor floats. */
.turn__hint {
  display: none;
  position: absolute; left: 0; top: calc(var(--knob-y) + 22px);
  white-space: nowrap;
  font: 400 0.64rem/1 var(--sc-font-mono); letter-spacing: 0.04em; color: var(--sc-ink-soft);
  transform: translateX(-50%);
  transition: opacity 260ms var(--ease-out);
}
.turn--js .turn__hint { display: block; }
.turn.is-stuck .turn__hint, .turn.is-used .turn__hint { opacity: 0; }

/* ---------------------------------------------------------- after row -- */
/* Only the quote: it starts on the Tuesday rule, where the cursor settles. */
.turn__after {
  margin-top: clamp(2.5rem, 6vh, 3.75rem);
  padding-left: calc(var(--turn-gut) + (100% - var(--turn-gut) - var(--turn-padr)) * 0.2);
  /* the drone hangs below the page's right corner: the quote stops short of it */
  padding-right: calc(var(--turn-drone-w) - var(--turn-drone-out) + 1rem);
}
.turn__quote { margin: 0; max-width: 31rem; }
/* The 70/30 bar is a legend for week B: the 70 % in the chip language of what
   runs on its own, the 30 % in the gold of "Tus clientes". */
.turn__bar { display: flex; gap: 4px; height: 10px; margin-bottom: 1.25rem; }
.turn__bar i { display: block; position: relative; border-radius: 2px; transform-origin: 0 50%; }
.turn__bar-a {
  flex: 70;
  border: 1px solid color-mix(in oklab, var(--signal) 45%, transparent);
  background: color-mix(in oklab, var(--signal) 9%, var(--sc-surface));
}
.turn__bar-a::before {
  content: ""; position: absolute; left: 3px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--signal);
}
.turn__bar-b { flex: 30; background: var(--sc-accent); box-shadow: 0 1px 0 color-mix(in oklab, var(--sc-accent) 55%, black); }
.turn--js .turn__bar i { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.turn--js .turn__bar-b { transition-delay: 420ms !important; }
.turn--js .turn__quote.sc-in .turn__bar i { transform: none; }

.turn__q { margin: 0; }
.turn__q p {
  font: 440 clamp(1.3rem, 1.05rem + 0.55vw, 1.6rem)/1.28 var(--sc-font-display);
  letter-spacing: -0.012em; color: var(--sc-ink); text-wrap: balance;
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 700px) {
  .turn { --turn-gut: 2.6rem; --turn-padr: 1.05rem; }
  .turn__drone { display: none; }
  .turn__legend {
    display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem;
    margin: 0 0 1.6rem;
    font: 500 0.68rem/1.3 var(--sc-font-mono); letter-spacing: 0.01em; color: var(--sc-ink-soft);
  }
  .turn__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
  .turn__legend span:last-child { color: var(--sc-ink); }
  /* planner labels stay at 10px or more; the hour is a little taller so a
     one-hour block holds two lines of them */
  .turn__cmp { --tabs: 3.6rem; --knob-y: 1.3rem; --hdr: 2rem; --band: 56px; --hr: 36px; }
  .turn__rings { left: 0.8rem; width: calc(100% - 1.6rem); }
  .turn__t { right: 0.3rem; font-size: 10px; }
  .turn__day { padding-left: 0.3rem; gap: 0.25rem; font-size: 10px; letter-spacing: 0.04em; }
  .turn__dnum { min-width: 1.3rem; height: 1.3rem; font-size: 0.8rem; }
  .turn__blk {
    left: 2px; right: 2px; padding: 2px 3px;
    font-size: 10px; line-height: 1.15; letter-spacing: -0.02em;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  .turn__blk--over, .turn__ghost--over { left: 18%; }
  .turn__ghost { left: 2px; right: 2px; }
  .turn__week--b .turn__band::after { display: none; }
  .turn__chip { left: 2px; max-width: calc(100% - 4px); font-size: 10px; letter-spacing: 0; padding: 0.3em 0.3em; gap: 0.25em; }
  .turn__chip::before { width: 5px; height: 5px; }
  /* about 55px a day: the titles get the whole block, the icons step aside */
  .turn__b {
    left: 2px; right: 2px; padding: 0.24rem 0.26rem;
    font-size: 10px; line-height: 1.08; letter-spacing: -0.015em;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  .turn__ico { display: none; }
  .turn__tag { display: none; }
  /* about 8 mono characters fit a day: long labels swap to a short one
     instead of hyphenating ("Cotiza-ciones"), 5-oct-2026 */
  .turn__blk [data-short], .turn__b [data-short] { font-size: 0; }
  .turn__blk { padding-right: 1px; overflow-wrap: normal; }
  .turn__blk--over, .turn__ghost--over { left: 9%; }
  .turn__blk [data-short]::after, .turn__b [data-short]::after { content: attr(data-short); font-size: 10px; -webkit-hyphens: manual; hyphens: manual; }
  .turn__hint { font-size: 10px; top: calc(var(--knob-y) + 21px); }
  .turn__after { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .turn__drone { will-change: auto; }
  .turn__week--b .turn__col.is-on .turn__ghost { animation: turn-fade 260ms linear both; animation-delay: 0ms; }
  .turn--js .turn__week--b .turn__chip,
  .turn--js .turn__week--b .turn__b { transform: none; transition: opacity 240ms linear; }
  .turn--js .turn__week--b .turn__col.is-on .turn__chip,
  .turn--js .turn__week--b .turn__col.is-on .turn__b,
  .turn--js .turn__week--b .turn__col.is-on .turn__b:nth-child(2) { transition-delay: 120ms; }
  .turn.is-live .turn__week--b .turn__chip::before { animation: none; }
  .turn--js .turn__bar i { transform: none; transition: none; }
}