@import url("../tokens/fonts.css");

/* ==========================================================================
   Overprint — bundle.css
   Colours, spacing, radii, shadows, durations and easings come from tokens.css
   (generated from tokens.json). This file only adds what tokens cannot hold:
   blend modes, textures and the component rules. Classes are prefixed op-.
   ========================================================================== */

:root, [data-theme="light"] {
  --op-blend: multiply;
  --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .12 0 0 0 0 .24 0 0 0 2.6 -1.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --op-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .99 0 0 0 0 .96 0 0 0 3 -1.75'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --op-blend: screen;
  --op-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .86 0 0 0 2.6 -1.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --op-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .12 0 0 0 3 -1.75'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper) var(--op-grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
.op-paper { background: var(--paper) var(--op-grain); color: var(--ink); }

/* Preview stage helpers ---------------------------------------------------- */
.op-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; }
.op-stage--col { flex-direction: column; align-items: flex-start; }
.op-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.op-row-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.op-caption { font: 400 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.op-label-text { font: 700 13px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.op-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared focus: a dashed cut-line in key ink ----------------------------- */
.op-focus:focus-visible,
.op-btn:focus-visible, .op-iconbtn:focus-visible, .op-tab:focus-visible, .op-tag:focus-visible,
.op-row:focus-visible, .op-card:focus-visible, .op-tag__x:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 5px;
}

/* Typography helpers ------------------------------------------------------ */
.op-display { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: .92; letter-spacing: -.03em; font-stretch: 82%; margin: 0; }
.op-title { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -.02em; margin: 0; }
.op-heading { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.op-numeric { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.op-body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; }
.op-body-sm { font-family: var(--font-body); font-size: 15px; line-height: 1.45; }

/* Misregistered text: real text stays in the DOM (transparent); two plates are
   drawn from data-text. Set --op-a / --op-b to choose the plates. */
.op-misreg { position: relative; isolation: isolate; display: inline-block; color: transparent; --op-a: var(--blue); --op-b: var(--pink); --op-mx: .045em; --op-my: .035em; }
.op-misreg::before, .op-misreg::after {
  content: attr(data-text) / "";
  position: absolute; inset: 0; pointer-events: none;
  transition: transform var(--dur-quick) var(--ease-drift);
}
.op-misreg::before { color: var(--op-b); z-index: -1; transform: translate(var(--op-mx), var(--op-my)); }
.op-misreg::after { color: var(--op-a); mix-blend-mode: var(--op-blend); }
.op-misreg--ink { --op-a: var(--ink); }
a:hover > .op-misreg::before, .op-misreg:hover::before { transform: translate(calc(var(--op-mx) * 1.6), calc(var(--op-my) * 1.6)); }

/* Halftone dot screens ------------------------------------------------------ */
.op-halftone { --op-ht-ink: var(--blue); --op-ht-pitch: 5px; --op-ht-r: 1.25px; background-image: radial-gradient(circle at 50% 50%, var(--op-ht-ink) 0 var(--op-ht-r), transparent calc(var(--op-ht-r) + .45px)); background-size: var(--op-ht-pitch) var(--op-ht-pitch); }

/* ==========================================================================
   STAMP — the shared press mechanic (Button, IconButton)
   ::before is the ghost plate, ::after the face plate. Both live inside an
   isolated group so the face multiplies (light) or screens (dark) onto the ghost.
   ========================================================================== */
.op-btn, .op-iconbtn {
  --_face: var(--blue); --_ghost: var(--pink); --_label: var(--on-deep);
  --_gx: 2px; --_gy: 2px; --_fx: 0px; --_fy: 0px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; margin: 0;
  border: 0; border-radius: var(--radius-1);
  background: none; color: var(--_label);
  font: 700 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-settle) var(--ease-stamp);
}
.op-btn::before, .op-btn::after, .op-iconbtn::before, .op-iconbtn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  transition: transform var(--dur-quick) var(--ease-drift), opacity var(--dur-quick) var(--ease-drift);
}
.op-btn::before, .op-iconbtn::before { background: var(--_ghost); z-index: -2; transform: translate(var(--_gx), var(--_gy)); }
.op-btn::after, .op-iconbtn::after {
  background: var(--op-ink-grain), radial-gradient(130% 120% at 18% 0%, #ffffff1c, #ffffff00 60%), var(--_face);
  z-index: -1; transform: translate(var(--_fx), var(--_fy));
}
.op-btn:hover, .op-iconbtn:hover { --_gx: 3px; --_gy: 4px; --_fx: -1px; --_fy: -1px; }
.op-btn:active, .op-iconbtn:active, .op-btn.is-pressed, .op-iconbtn.is-pressed {
  --_gx: 0px; --_gy: 0px; --_fx: 0px; --_fy: 0px;
  transform: translate(1px, 2px) scale(.97);
  transition-duration: var(--dur-snap); transition-timing-function: var(--ease-press);
}
.op-btn:active::before, .op-btn:active::after, .op-iconbtn:active::before, .op-iconbtn:active::after,
.op-btn.is-pressed::before, .op-btn.is-pressed::after, .op-iconbtn.is-pressed::before, .op-iconbtn.is-pressed::after {
  transition-duration: var(--dur-snap); transition-timing-function: var(--ease-press);
}
.op-btn > svg, .op-iconbtn > svg { flex: none; width: 18px; height: 18px; }
.op-btn__label { display: inline-flex; align-items: center; gap: 8px; transition: opacity var(--dur-quick) linear; }

/* The ink kiss: an impression left on the paper after the stamp lifts */
.op-kiss {
  position: absolute; inset: 0; z-index: -3; border-radius: inherit; pointer-events: none;
  background: var(--_ghost); opacity: 0;
  animation: op-kiss var(--dur-kiss) var(--ease-paper) forwards;
}
@keyframes op-kiss {
  0%   { opacity: .5; transform: translate(1px, 2px) scale(1); }
  100% { opacity: 0;  transform: translate(1px, 2px) scale(1.06, 1.14); }
}

/* Variants */
.op-btn--secondary, .op-iconbtn--secondary { --_face: var(--pink); --_ghost: var(--blue); --_label: var(--on-bright); }
.op-btn--danger, .op-iconbtn--danger { --_face: var(--mix-red); --_ghost: var(--yellow); --_label: var(--on-deep); }
.op-btn--ghost, .op-iconbtn--ghost { --_face: transparent; --_ghost: var(--yellow); --_label: var(--blue); }
.op-btn--ghost::after, .op-iconbtn--ghost::after { background: none; }
.op-btn--ghost::before, .op-iconbtn--ghost::before {
  opacity: 0; transform: translate(0, 0) scaleX(.6); transform-origin: 0 50%;
  background: radial-gradient(circle, var(--yellow) 0 1.6px, transparent 2.1px) 0 0 / 4px 4px, var(--yellow);
}
.op-btn--ghost:hover::before, .op-iconbtn--ghost:hover::before { opacity: .9; transform: translate(0, 0) scaleX(1); }
[data-theme="dark"] .op-btn--ghost:hover, [data-theme="dark"] .op-iconbtn--ghost:hover { --_label: var(--on-bright); }
.op-btn--ghost { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.op-btn--ghost:hover { text-decoration-color: transparent; }

/* Sizes */
.op-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; gap: 6px; }
.op-btn--sm > svg { width: 15px; height: 15px; }
.op-btn--lg { height: 52px; padding: 0 26px; font-size: 15px; gap: 10px; }
.op-btn--lg > svg { width: 20px; height: 20px; }
.op-btn--block { display: flex; width: 100%; }

/* Loading: label lifts off, three dots print in turn */
.op-btn__dots { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 5px; }
.op-btn__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; animation: op-dot 900ms var(--ease-paper) infinite; }
.op-btn__dots i:nth-child(2) { animation-delay: 150ms; }
.op-btn__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes op-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.op-btn.is-loading { pointer-events: none; }
.op-btn.is-loading .op-btn__label { opacity: 0; }
.op-btn.is-loading .op-btn__dots { display: inline-flex; }

/* Disabled: an unprinted plate */
.op-btn:disabled, .op-btn[aria-disabled="true"], .op-iconbtn:disabled, .op-iconbtn[aria-disabled="true"] {
  --_face: var(--paper-shade); --_label: var(--ink-muted); cursor: not-allowed; transform: none;
}
.op-btn:disabled::before, .op-btn[aria-disabled="true"]::before, .op-iconbtn:disabled::before { opacity: 0; }
.op-btn:disabled::after, .op-btn[aria-disabled="true"]::after, .op-iconbtn:disabled::after {
  background: radial-gradient(circle, var(--rule) 0 1px, transparent 1.4px) 0 0 / 4px 4px, var(--paper-shade);
  box-shadow: inset 0 0 0 1.5px var(--rule); transform: none;
}
.op-btn--ghost:disabled::after { background: none; box-shadow: none; }

/* IconButton */
.op-iconbtn { width: 40px; padding: 0; }
.op-iconbtn > svg { width: 20px; height: 20px; }
.op-iconbtn--sm { width: 32px; height: 32px; }
.op-iconbtn--sm > svg { width: 16px; height: 16px; }
.op-iconbtn--lg { width: 52px; height: 52px; }
.op-iconbtn--lg > svg { width: 24px; height: 24px; }
.op-iconbtn--round { border-radius: var(--radius-round); }
.op-iconbtn--ghost { color: var(--ink); --_label: var(--ink); }
.op-iconbtn--ghost::before { border-radius: var(--radius-round); }
.op-iconbtn.is-on { --_label: var(--pink-text); }
.op-iconbtn--ghost.is-on > svg { fill: var(--pink); stroke: var(--pink-text); }

/* ==========================================================================
   Icons — hand-cut strokes
   ========================================================================== */
.op-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.op-icon .f { fill: currentColor; stroke: none; }

/* ==========================================================================
   TOGGLE — a paper tab sliding in a slot
   ========================================================================== */
.op-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 400 16px/1.3 var(--font-body); color: var(--ink); user-select: none; -webkit-tap-highlight-color: transparent; }
.op-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.op-toggle__track {
  position: relative; flex: none; width: 52px; height: 28px; border-radius: var(--radius-1);
  background: var(--paper-shade); box-shadow: inset 0 0 0 1.5px var(--ink-muted), var(--well);
  isolation: isolate; overflow: hidden;
}
.op-toggle__fill {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: var(--op-ink-grain), linear-gradient(var(--blue), var(--blue)) 100% 0 / calc(100% - 2px) calc(100% - 3px) no-repeat, var(--pink);
  opacity: 0; transform: translateX(-30%);
  transition: opacity var(--dur-quick) var(--ease-paper), transform var(--dur-slide) var(--ease-paper);
}
.op-toggle__mark { position: absolute; top: 50%; z-index: 1; font: 700 11px/1 var(--font-mono); transform: translateY(-50%); pointer-events: none; }
.op-toggle__mark--on { left: 9px; color: var(--on-deep); opacity: 0; transition: opacity var(--dur-quick) linear; }
.op-toggle__mark--off { right: 8px; color: var(--ink-muted); transition: opacity var(--dur-quick) linear; }
.op-toggle__tab {
  position: absolute; top: 3px; left: 3px; z-index: 2; width: 22px; height: 22px; border-radius: var(--radius-1);
  background: var(--paper-card) var(--op-grain); box-shadow: var(--lift-1), inset 0 0 0 1px var(--rule);
  transition: transform var(--dur-slide) var(--ease-paper);
}
.op-toggle__tab::before, .op-toggle__tab::after { content: ""; position: absolute; top: 7px; bottom: 7px; width: 1.5px; background: var(--rule); border-radius: 1px; }
.op-toggle__tab::before { left: 8px; } .op-toggle__tab::after { right: 8px; }
.op-toggle:hover .op-toggle__tab { transform: translate(1px, -1px); }
.op-toggle:active .op-toggle__tab { transform: translate(2px, 0) scaleX(1.12); transition-duration: var(--dur-snap); }
.op-toggle__input:checked + .op-toggle__track .op-toggle__fill { opacity: 1; transform: none; }
.op-toggle__input:checked + .op-toggle__track .op-toggle__mark--on { opacity: 1; }
.op-toggle__input:checked + .op-toggle__track .op-toggle__mark--off { opacity: 0; }
.op-toggle__input:checked + .op-toggle__track .op-toggle__tab { transform: translateX(24px); }
.op-toggle:hover .op-toggle__input:checked + .op-toggle__track .op-toggle__tab { transform: translate(23px, -1px); }
.op-toggle:active .op-toggle__input:checked + .op-toggle__track .op-toggle__tab { transform: translate(22px, 0) scaleX(1.12); }
.op-toggle__input:focus-visible + .op-toggle__track { outline: 2px dashed var(--ink); outline-offset: 4px; }
.op-toggle__input:disabled + .op-toggle__track { opacity: .5; }
.op-toggle:has(.op-toggle__input:disabled) { cursor: not-allowed; color: var(--ink-muted); }
.op-toggle__text small { display: block; font: 400 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }

/* ==========================================================================
   CHECKBOX + RADIO — hand-stamped marks
   ========================================================================== */
.op-check, .op-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 400 16px/1.35 var(--font-body); color: var(--ink); user-select: none; -webkit-tap-highlight-color: transparent; }
.op-check__input, .op-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.op-check__box, .op-radio__box {
  position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px;
  background: var(--paper-card); box-shadow: inset 0 0 0 1.5px var(--ink-muted);
  transition: transform var(--dur-quick) var(--ease-stamp);
}
.op-check__box { border-radius: var(--radius-1); }
.op-radio__box { border-radius: var(--radius-round); }
.op-check:hover .op-check__box, .op-radio:hover .op-radio__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.op-check:active .op-check__box, .op-radio:active .op-radio__box { transform: scale(.9); transition-duration: var(--dur-snap); transition-timing-function: var(--ease-press); }
.op-check__tick { position: absolute; left: -2px; top: -7px; width: 28px; height: 28px; overflow: visible; isolation: isolate; pointer-events: none;
  opacity: 0; transform: scale(1.7) rotate(-16deg); transform-origin: 45% 60%;
  transition: opacity var(--dur-snap) linear, transform var(--dur-quick) var(--ease-stamp);
}
.op-check__tick path { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.op-check__tick .g { stroke: var(--pink); transform: translate(1.6px, 1.6px); }
.op-check__tick .m { stroke: var(--blue); mix-blend-mode: var(--op-blend); }
.op-check__input:checked + .op-check__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.op-check__input:checked + .op-check__box .op-check__tick { opacity: 1; transform: rotate(-5deg); }
.op-check__dash { position: absolute; left: 4px; right: 4px; top: 8px; height: 4px; border-radius: 1px; background: var(--blue); box-shadow: 1.5px 1.5px 0 var(--pink); opacity: 0; transform: scaleX(.3); transition: opacity var(--dur-snap) linear, transform var(--dur-quick) var(--ease-stamp); }
.op-check__input:indeterminate + .op-check__box .op-check__dash { opacity: 1; transform: none; }
.op-radio__dot { position: absolute; inset: 5px; border-radius: 50%; isolation: isolate; opacity: 0; transform: scale(1.9); transition: opacity var(--dur-snap) linear, transform var(--dur-quick) var(--ease-stamp); }
.op-radio__dot::before, .op-radio__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.op-radio__dot::before { background: var(--pink); transform: translate(1.5px, 1.5px); }
.op-radio__dot::after { background: var(--blue); mix-blend-mode: var(--op-blend); }
.op-radio__input:checked + .op-radio__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.op-radio__input:checked + .op-radio__box .op-radio__dot { opacity: 1; transform: none; }
.op-check__input:focus-visible + .op-check__box, .op-radio__input:focus-visible + .op-radio__box { outline: 2px dashed var(--ink); outline-offset: 4px; }
.op-check:has(input:disabled), .op-radio:has(input:disabled) { cursor: not-allowed; color: var(--ink-muted); }
.op-check__input:disabled + .op-check__box, .op-radio__input:disabled + .op-radio__box { background: var(--paper-shade); box-shadow: inset 0 0 0 1.5px var(--rule); }
.op-check__text small, .op-radio__text small { display: block; font: 400 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); margin-top: 2px; }
.op-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.op-fieldset legend { padding: 0; margin-bottom: 10px; font: 700 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* ==========================================================================
   TEXT FIELD — a form line, or a boxed field
   ========================================================================== */
.op-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-field__label { font: 700 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.op-field__control { position: relative; display: flex; align-items: center; isolation: isolate; }
.op-field__input {
  flex: 1; min-width: 0; width: 100%; box-sizing: border-box; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: 400 17px/1.4 var(--font-mono); padding: 8px 2px 7px;
  box-shadow: inset 0 -1.5px 0 var(--ink-muted); outline: none;
}
.op-field__input::placeholder { color: var(--ink-muted); font-family: var(--font-body); font-style: italic; opacity: 1; }
textarea.op-field__input { resize: vertical; min-height: 96px; line-height: 28px; padding-top: 4px;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px); box-shadow: none; }
.op-field__control::before, .op-field__control::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-settle) var(--ease-paper), opacity var(--dur-quick) linear;
}
.op-field__control::before { background: var(--pink); transform: translate(3px, 3px) scaleX(0); opacity: 0; z-index: -1; }
.op-field__control::after { background: var(--blue); mix-blend-mode: var(--op-blend); }
.op-field__control:focus-within::after { transform: scaleX(1); }
.op-field__control:focus-within::before { transform: translate(3px, 3px) scaleX(1); opacity: 1; }
.op-field__hint { margin: 0; font: 400 12px/16px var(--font-mono); letter-spacing: .03em; color: var(--ink-muted); }
.op-field__suffix { flex: none; padding-left: 8px; color: var(--ink-muted); font: 400 12px/1 var(--font-mono); }
.op-field.is-invalid .op-field__input { box-shadow: inset 0 -2px 0 var(--mix-red); }
.op-field.is-invalid .op-field__control::after { background: var(--mix-red); }
.op-field.is-invalid .op-field__hint { color: var(--mix-red); font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.op-field.is-invalid .op-field__hint svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.op-field.is-disabled .op-field__input { color: var(--ink-muted); box-shadow: inset 0 -1.5px 0 var(--rule); cursor: not-allowed; }
/* boxed */
.op-field--boxed .op-field__input { background: var(--paper-card); border-radius: var(--radius-1); padding: 10px 12px; box-shadow: inset 0 0 0 1.5px var(--ink-muted); font-size: 16px; }
.op-field--boxed textarea.op-field__input { padding: 6px 12px; background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px) 0 6px / 100% 100% no-repeat, var(--paper-card); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.op-field--boxed .op-field__control::before, .op-field--boxed .op-field__control::after { top: 0; height: auto; border-radius: var(--radius-1); transform: none; opacity: 0; transition: opacity var(--dur-quick) linear, transform var(--dur-quick) var(--ease-drift); }
.op-field--boxed .op-field__control::after { background: none; box-shadow: inset 0 0 0 2px var(--blue); mix-blend-mode: normal; z-index: 1; }
.op-field--boxed .op-field__control::before { background: var(--pink); z-index: -1; }
.op-field--boxed .op-field__control:focus-within::after { opacity: 1; transform: none; }
.op-field--boxed .op-field__control:focus-within::before { opacity: 1; transform: translate(3px, 3px); }
.op-field--boxed.is-invalid .op-field__input { box-shadow: inset 0 0 0 2px var(--mix-red); }
.op-field--boxed.is-invalid .op-field__control::after { box-shadow: inset 0 0 0 2px var(--mix-red); }
.op-field--boxed .op-field__suffix { position: absolute; right: 12px; }

/* ==========================================================================
   SEGMENTED CONTROL — a yellow plate sliding in a well
   ========================================================================== */
.op-seg { --n: 3; --i: 0; position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: var(--radius-2);
  background: var(--paper-shade); box-shadow: inset 0 0 0 1.5px var(--ink-muted), var(--well); isolation: isolate; max-width: 100%; box-sizing: border-box; }
.op-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--radius-1); z-index: 0; isolation: isolate;
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-settle) var(--ease-paper); }
.op-seg__thumb::before, .op-seg__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: transform var(--dur-quick) var(--ease-drift); }
.op-seg__thumb::before { background: var(--pink); transform: translate(2px, 2px); z-index: -1; }
.op-seg__thumb::after { background: var(--op-ink-grain), var(--yellow); }
.op-seg:hover .op-seg__thumb::before { transform: translate(3px, 3px); }
.op-seg:active .op-seg__thumb::before { transform: none; }
.op-seg__opt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; cursor: pointer;
  font: 700 12px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color var(--dur-quick) linear; }
.op-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.op-seg__opt:hover { color: var(--ink); }
.op-seg__opt:has(input:checked) { color: var(--on-bright); }
.op-seg__opt:has(input:focus-visible) { outline: 2px dashed var(--ink); outline-offset: 2px; border-radius: var(--radius-1); }
.op-seg__opt svg { width: 15px; height: 15px; }

/* ==========================================================================
   SLIDER — a ruled scale and a registration-mark thumb
   ========================================================================== */
.op-slider { --v: 50%; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.op-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-slider__label { font: 700 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.op-slider__out { font: 700 14px/16px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.op-slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.op-slider__input:focus { outline: none; }
.op-slider__input::-webkit-slider-runnable-track {
  height: 8px; border-radius: 0;
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / var(--v) 6px no-repeat,
    linear-gradient(var(--pink), var(--pink)) 2px 2px / var(--v) 6px no-repeat,
    radial-gradient(circle, var(--ink-muted) 0 1.3px, transparent 1.8px) 0 0 / 7px 6px repeat-x;
}
.op-slider__input::-moz-range-track { height: 8px; background: radial-gradient(circle, var(--ink-muted) 0 1.3px, transparent 1.8px) 0 0 / 7px 6px repeat-x; }
.op-slider__input::-moz-range-progress { height: 6px; background: var(--blue); box-shadow: 2px 2px 0 var(--pink); }
.op-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 1.5px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 100% 1.5px no-repeat,
    radial-gradient(circle, var(--paper-card) 0 6px, var(--ink) 6.5px 8px, var(--paper-card) 8.5px);
  box-shadow: inset 0 0 0 1.5px var(--ink), 3px 2px 0 0 var(--pink);
  transition: transform var(--dur-quick) var(--ease-stamp);
}
.op-slider__input::-moz-range-thumb {
  width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 1.5px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 100% 1.5px no-repeat, var(--paper-card);
  box-shadow: 3px 2px 0 0 var(--pink);
}
.op-slider__input:hover::-webkit-slider-thumb { transform: scale(1.06) rotate(8deg); }
.op-slider__input:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 0 var(--pink); }
.op-slider__input:active::-moz-range-thumb { box-shadow: none; }
.op-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px dashed var(--ink); outline-offset: 3px; }
.op-slider__ruler { position: relative; height: 18px; margin: -4px 13px 0; background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 10%) 0 0 / 100% 5px no-repeat; }
.op-slider__ruler::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-right: 1px solid var(--rule); }
.op-slider__ruler span { position: absolute; top: 6px; transform: translateX(-50%); font: 400 11px/12px var(--font-mono); color: var(--ink-muted); }
.op-slider:has(input:disabled) { opacity: .55; }

/* ==========================================================================
   TABS — index-card tabs
   ========================================================================== */
.op-tabs { display: flex; flex-direction: column; min-width: 0; }
.op-tabs__list { display: flex; gap: 4px; padding: 0 10px; position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-top: 4px; }
.op-tabs__list::-webkit-scrollbar { display: none; }
.op-tab {
  --tab-ink: var(--blue);
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px; margin: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-2) var(--radius-2) 0 0;
  background: var(--paper-shade); color: var(--ink-muted);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  transform: translateY(6px); transition: transform var(--dur-settle) var(--ease-paper), color var(--dur-quick) linear;
  box-shadow: inset 0 1px 0 #ffffff14;
  -webkit-tap-highlight-color: transparent;
}
.op-tab::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 3px; border-radius: 0 0 2px 2px;
  background: radial-gradient(circle, var(--tab-ink) 0 1px, transparent 1.4px) 0 0 / 3px 3px; transition: opacity var(--dur-quick) linear; }
.op-tab:hover { transform: translateY(2px); color: var(--ink); }
.op-tab[aria-selected="true"] { background: var(--paper-card); color: var(--ink); transform: none; z-index: 2; }
.op-tab[aria-selected="true"]::before { background: var(--tab-ink); }
.op-tab__count { font-weight: 400; color: var(--ink-muted); }
.op-tabs__panel { position: relative; background: var(--paper-card) var(--op-grain); border-radius: 0 var(--radius-1) var(--radius-1) var(--radius-1); padding: var(--space-5); box-shadow: var(--lift-1); }
.op-tabs__panel[hidden] { display: none; }
.op-tabs__panel.is-entering { animation: op-panel var(--dur-settle) var(--ease-paper); }
@keyframes op-panel { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   CARD — a printed card on the table
   ========================================================================== */
.op-card {
  --tilt: -1.2deg;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--paper-card) var(--op-grain); color: var(--ink);
  border-radius: var(--radius-0); box-shadow: var(--lift-1);
  transform: rotate(var(--tilt));
  transition: transform var(--dur-settle) var(--ease-paper);
  text-decoration: none;
}
.op-card::after { content: ""; position: absolute; inset: 0; box-shadow: var(--lift-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-settle) var(--ease-paper); }
.op-card:hover, .op-card:focus-within { transform: rotate(0deg) translateY(-3px); }
.op-card:hover::after, .op-card:focus-within::after { opacity: 1; }
.op-card--flat { --tilt: 0deg; }
.op-card__art { position: relative; overflow: hidden; margin: 10px 10px 0; aspect-ratio: 16 / 10; background: var(--paper); }
.op-card__art > svg { display: block; width: 100%; height: 100%; }
.op-card__art .op-sticker { position: absolute; right: 10px; bottom: 10px; }
.op-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.op-card__kicker { margin: 0; font: 400 12px/16px var(--font-mono); letter-spacing: .05em; color: var(--pink-text); text-transform: uppercase; }
.op-card__title { margin: 0; font: 700 22px/1.12 var(--font-display); letter-spacing: -.01em; }
.op-card__text { margin: 0; font: 400 15px/1.45 var(--font-body); color: var(--ink-muted); }
.op-card__foot { margin-top: 8px; padding-top: 12px; border-top: 1.5px dotted var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* fasteners */
.op-tape { position: absolute; top: -11px; left: 50%; width: 86px; height: 24px; margin-left: -43px; z-index: 3; pointer-events: none;
  background: var(--yellow); opacity: .78; mix-blend-mode: var(--op-blend); transform: rotate(-3deg);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 9%, 96% 0, 100% 10%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 91%, 4% 100%, 0 90%); }
[data-theme="dark"] .op-tape { mix-blend-mode: normal; opacity: .72; }
.op-tape--corner { left: -14px; top: 8px; margin: 0; width: 70px; transform: rotate(-38deg); }
.op-tape--pink { background: var(--pink); opacity: .55; }
.op-clip { position: absolute; top: -14px; right: 26px; width: 18px; height: 44px; z-index: 3; color: var(--ink-muted); pointer-events: none; }
.op-pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, #ffffff8c 0 2px, #ffffff00 3.5px), var(--pink);
  box-shadow: 2px 3px 0 -1px var(--blue), 0 3px 4px #00000040; }

/* ==========================================================================
   STICKER / BADGE
   ========================================================================== */
.op-sticker {
  --_bg: var(--pink); --_fg: var(--on-bright); --_gh: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 22px; padding: 3px 8px; box-sizing: border-box;
  background: var(--op-ink-grain), var(--_bg); color: var(--_fg);
  font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border-radius: var(--radius-1); box-shadow: -2px 2px 0 0 var(--_gh);
  transform: rotate(var(--tilt, -3deg)); transition: transform var(--dur-quick) var(--ease-stamp);
}
.op-sticker:hover { transform: rotate(0deg) scale(1.06); }
.op-sticker--blue { --_bg: var(--blue); --_fg: var(--on-deep); --_gh: var(--pink); }
.op-sticker--yellow { --_bg: var(--yellow); --_fg: var(--on-bright); --_gh: var(--pink); }
.op-sticker--violet { --_bg: var(--mix-violet); --_fg: var(--on-deep); --_gh: var(--yellow); }
.op-sticker--red { --_bg: var(--mix-red); --_fg: var(--on-deep); --_gh: var(--yellow); }
.op-sticker--paper { --_bg: var(--paper-card); --_fg: var(--ink); --_gh: var(--pink); box-shadow: inset 0 0 0 1.5px var(--ink), -2px 2px 0 0 var(--_gh); }
.op-sticker--round { width: 64px; height: 64px; border-radius: 50%; padding: 6px; text-align: center; line-height: 1.1; white-space: normal; font-size: 10px; flex-direction: column; gap: 1px; }
.op-sticker--round b { font: 800 20px/1 var(--font-display); letter-spacing: -.02em; text-transform: none; }
.op-sticker--count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px; letter-spacing: 0; --tilt: 0deg; box-shadow: 1.5px 1.5px 0 0 var(--_gh); }
.op-sticker--lg { min-height: 30px; padding: 6px 12px; font-size: 13px; }

/* ==========================================================================
   TAG — a hang tag
   ========================================================================== */
.op-tag {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 24px; box-sizing: border-box;
  background: var(--paper-card); color: var(--ink); border: 0; margin: 0;
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
  border-radius: var(--radius-1) var(--radius-1) var(--radius-1) var(--radius-1);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  font: 700 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transform-origin: 13px 50%; transition: transform var(--dur-quick) var(--ease-stamp);
  cursor: default; -webkit-tap-highlight-color: transparent;
}
.op-tag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 11px; background:
  linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink-muted) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / 11px 50% no-repeat,
  linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-muted) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 0 100% / 11px 50% no-repeat; }
.op-tag::after { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
button.op-tag { cursor: pointer; }
button.op-tag:hover, .op-tag--interactive:hover { transform: rotate(-3deg); }
.op-tag[aria-pressed="true"], .op-tag.is-selected { background: var(--op-ink-grain), var(--yellow); color: var(--on-bright); box-shadow: inset 0 0 0 1.5px var(--ink); }
.op-tag[aria-pressed="true"]::before, .op-tag.is-selected::before { --x: var(--ink); background:
  linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / 11px 50% no-repeat,
  linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 0 100% / 11px 50% no-repeat; }
.op-tag__x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 -6px 0 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.op-tag__x svg { width: 12px; height: 12px; }
.op-tag__x:hover { background: var(--pink); color: var(--on-bright); }
.op-tag.is-leaving { opacity: 0; transform: rotate(-14deg) translateY(6px); transition: transform var(--dur-settle) var(--ease-paper), opacity var(--dur-settle) linear; }
.op-tag--blue { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }

/* ==========================================================================
   AVATAR — halftone portrait
   ========================================================================== */
.op-avatar { --sz: 44px; --av-bg: var(--yellow); position: relative; flex: none; display: inline-block; width: var(--sz); height: var(--sz); border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--av-bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.op-avatar > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.op-avatar .op-ht-a { fill: var(--pink); }
.op-avatar .op-ht-b { fill: var(--blue); mix-blend-mode: var(--op-blend); }
.op-avatar--pink { --av-bg: var(--paper-card); }
[data-theme="dark"] .op-avatar { --av-bg: var(--paper-card); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
[data-theme="dark"] .op-avatar--blue { --av-bg: var(--paper-shade); }
.op-avatar--blue { --av-bg: var(--pink); }
.op-avatar--sm { --sz: 32px; } .op-avatar--lg { --sz: 64px; } .op-avatar--xl { --sz: 96px; }
.op-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); mix-blend-mode: var(--op-blend); }
.op-avatar__img + .op-avatar__screen { position: absolute; inset: 0; background: radial-gradient(circle, var(--paper) 0 .8px, transparent 1.3px) 0 0 / 3px 3px; opacity: .5; }
.op-avatar__initials { position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--sz) * .42)/1 var(--font-display); letter-spacing: -.03em; }
.op-avatar__initials .op-misreg { --op-mx: .05em; --op-my: .04em; }
.op-avatars { display: inline-flex; align-items: center; padding-left: 8px; }
.op-avatars > * { margin-left: -10px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 2.5px var(--paper); transition: transform var(--dur-settle) var(--ease-paper); }
.op-avatars > *:nth-child(odd) { transform: rotate(-4deg); }
.op-avatars > *:nth-child(even) { transform: rotate(3deg); }
.op-avatars:hover > * { transform: translateX(calc(var(--k, 0) * 4px)); }
.op-avatars__more { --sz: 44px; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); border-radius: 50%; background: var(--paper-card); color: var(--ink); font: 700 12px/1 var(--font-mono); }
.op-avatars--sm > .op-avatars__more { --sz: 32px; font-size: 11px; }

/* ==========================================================================
   TOOLTIP — a note slip
   ========================================================================== */
.op-tip { position: relative; display: inline-flex; }
.op-tip__slip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; width: max-content; max-width: 220px;
  padding: 9px 12px 11px; box-sizing: border-box;
  background: var(--paper-card) var(--op-grain); color: var(--ink); box-shadow: var(--lift-2);
  font: 400 12.5px/1.4 var(--font-mono); letter-spacing: .01em; text-align: left;
  opacity: 0; pointer-events: none; transform: translate(-50%, 6px) rotate(-4deg);
  transition: opacity var(--dur-quick) linear, transform var(--dur-quick) var(--ease-paper);
}
.op-tip__slip::before { content: ""; position: absolute; left: -6px; top: -6px; width: 30px; height: 12px; background: var(--yellow); opacity: .75; mix-blend-mode: var(--op-blend); transform: rotate(-32deg); }
.op-tip__slip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px;
  background: linear-gradient(135deg, var(--paper-card) 33%, transparent 34%) 0 0 / 8px 6px repeat-x, linear-gradient(225deg, var(--paper-card) 33%, transparent 34%) 0 0 / 8px 6px repeat-x; }
.op-tip__slip b { font-weight: 700; color: var(--pink-text); }
.op-tip--bottom .op-tip__slip { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -6px) rotate(3deg); }
.op-tip:hover .op-tip__slip, .op-tip:focus-within .op-tip__slip, .op-tip.is-open .op-tip__slip { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); transition-delay: 60ms; }
.op-tip--bottom:hover .op-tip__slip, .op-tip--bottom:focus-within .op-tip__slip, .op-tip--bottom.is-open .op-tip__slip { transform: translate(-50%, 0) rotate(1.5deg); }
.op-tip-trigger { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: help; background: var(--paper-card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-muted); font: 700 13px/1 var(--font-mono); }
.op-tip-trigger:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 2px 2px 0 var(--pink); }
.op-tip-trigger:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
.op-dfn { border-bottom: 1.5px dotted var(--pink-text); cursor: help; }

/* ==========================================================================
   TOAST — a ticket fed out of the machine
   ========================================================================== */
.op-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column-reverse; gap: 10px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 32px); }
.op-toasts--inline { position: static; align-items: flex-start; flex-direction: column; max-width: none; }
.op-toast {
  --_strip: var(--blue);
  position: relative; display: flex; width: 340px; max-width: 100%; pointer-events: auto; color: var(--ink);
  animation: op-feed var(--dur-slide) var(--ease-paper) both;
}
.op-toast::after { content: ""; position: absolute; inset: 0; box-shadow: var(--lift-2); pointer-events: none; z-index: -1; }
.op-toast__main, .op-toast__stub { background: var(--paper-card) var(--op-grain); }
.op-toast__main { flex: 1; min-width: 0; position: relative; padding: 12px 14px 12px 20px;
  -webkit-mask: radial-gradient(circle 6px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 6px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.op-toast__main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: radial-gradient(circle, var(--_strip) 0 1.5px, transparent 2px) 0 0 / 4px 4px, var(--_strip); }
.op-toast__stub { flex: none; width: 52px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0;
  background-image: var(--op-grain), linear-gradient(var(--rule), var(--rule)); background-size: auto, 1.5px 6px; background-repeat: repeat, repeat-y; background-position: 0 0, 0 0;
  -webkit-mask: radial-gradient(circle 6px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 6px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.op-toast__stub { background-image: var(--op-grain), repeating-linear-gradient(to bottom, var(--rule) 0 4px, transparent 4px 8px); background-size: auto, 1.5px 100%; background-repeat: repeat, no-repeat; }
.op-toast__no { display: block; font: 400 11px/14px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); text-transform: uppercase; }
.op-toast__title { margin: 2px 0 0; font: 700 17px/1.2 var(--font-display); }
.op-toast__msg { margin: 3px 0 0; font: 400 14.5px/1.4 var(--font-body); color: var(--ink-muted); }
.op-toast__action { margin-top: 8px; }
.op-toast__stamp { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; color: var(--_strip); writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.op-toast__close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; padding: 0; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; }
.op-toast__close:hover { color: var(--ink); background: var(--paper-shade); }
.op-toast__close:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.op-toast__close svg { width: 14px; height: 14px; }
.op-toast--danger { --_strip: var(--mix-red); }
.op-toast--pink { --_strip: var(--pink); }
.op-toast--pink .op-toast__stamp { color: var(--pink-text); }
.op-toast.is-leaving { animation: op-tear var(--dur-settle) var(--ease-paper) forwards; }
@keyframes op-feed { 0% { transform: translateY(calc(100% + 20px)); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(-3px); } 100% { transform: none; opacity: 1; } }
@keyframes op-tear { to { transform: translate(28px, 6px) rotate(5deg); opacity: 0; } }

/* ==========================================================================
   DIALOG — a pinned sheet
   ========================================================================== */
.op-dialog { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; box-sizing: border-box; }
.op-dialog--inline { position: relative; inset: auto; z-index: auto; min-height: 360px; }
.op-dialog__scrim { position: absolute; inset: 0; background: radial-gradient(circle, var(--scrim) 0 1.3px, transparent 1.8px) 0 0 / 5px 5px, var(--scrim); animation: op-fade var(--dur-settle) linear both; }
.op-dialog__sheet {
  position: relative; width: 440px; max-width: 100%; box-sizing: border-box; padding: 34px 30px 26px;
  background: var(--paper-card) var(--op-grain); color: var(--ink); box-shadow: var(--lift-3);
  transform: rotate(-.8deg); animation: op-drop var(--dur-slide) var(--ease-paper) both;
}
.op-dialog__sheet.op-crops::before { inset: -18px; }
.op-dialog__pin { position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 32%, #ffffff8c 0 2px, #ffffff00 3.5px), var(--pink);
  box-shadow: 2px 3px 0 -1px var(--blue), 0 3px 4px #00000040; animation: op-pin var(--dur-quick) var(--ease-stamp) 180ms both; }
.op-dialog__no { margin: 0 0 8px; font: 400 12px/16px var(--font-mono); letter-spacing: .05em; color: var(--pink-text); text-transform: uppercase; }
.op-dialog__title { margin: 0; font: 800 30px/1.02 var(--font-display); letter-spacing: -.02em; font-stretch: 90%; }
.op-dialog__body { margin: 12px 0 0; font: 400 16.5px/1.5 var(--font-body); color: var(--ink-muted); }
.op-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1.5px dotted var(--rule); }
.op-dialog.is-leaving .op-dialog__sheet { animation: op-lift var(--dur-settle) var(--ease-paper) forwards; }
.op-dialog.is-leaving .op-dialog__scrim { animation: op-fade var(--dur-settle) linear reverse forwards; }
@keyframes op-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes op-drop { from { opacity: 0; transform: translateY(-18px) rotate(-3.5deg) scale(1.02); } to { opacity: 1; transform: rotate(-.8deg); } }
@keyframes op-lift { to { opacity: 0; transform: translateY(-14px) rotate(1.5deg); } }
@keyframes op-pin { from { opacity: 0; transform: scale(1.8) translateY(-4px); } to { opacity: 1; transform: none; } }

/* Crop marks around any box */
.op-crops { position: relative; }
.op-crops::before {
  --c: var(--ink-muted); --l: 12px; --o: 16px;
  content: ""; position: absolute; inset: calc(var(--o) * -1); pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 var(--o) / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) var(--o) 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% var(--o) / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 calc(100% - var(--o)) / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) var(--o) 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% calc(100% - var(--o)) / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) 100% / 1px var(--l);
  background-repeat: no-repeat;
}

/* ==========================================================================
   PROGRESS — halftone bar and ring
   ========================================================================== */
.op-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-progress__label { font: 700 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.op-progress__value { font: 700 14px/16px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.op-progress__track { position: relative; height: 16px; overflow: hidden; border-radius: var(--radius-1); background: var(--paper-shade); box-shadow: var(--well); isolation: isolate; }
.op-progress__track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--ink-muted); pointer-events: none; z-index: 3; }
.op-progress__fill { --p: 0; position: absolute; inset: 0; transform: translateX(calc((var(--p) - 1) * 100%)); transition: transform var(--dur-kiss) var(--ease-paper); }
.op-progress__plate { position: absolute; inset: 0; display: flex; }
.op-progress__plate i { flex: 1; background: radial-gradient(circle, currentColor 0 var(--r, 1.75px), transparent calc(var(--r, 1.75px) + .4px)) 0 0 / 4px 4px; }
.op-progress__plate svg { flex: none; width: 40px; height: 100%; fill: currentColor; }
.op-progress__plate--a { color: var(--pink); transform: translate(2px, 2px); --r: 1.2px; }
.op-progress__plate--b { color: var(--blue); mix-blend-mode: var(--op-blend); }
.op-progress--pink .op-progress__plate--a { color: var(--yellow); }
.op-progress--pink .op-progress__plate--b { color: var(--pink); }
.op-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.op-ring svg { display: block; overflow: visible; transform: rotate(-90deg); }
.op-ring__track { fill: none; stroke: var(--ink-muted); stroke-linecap: round; }
.op-ring__arc { fill: none; transition: stroke-dashoffset var(--dur-kiss) var(--ease-paper); }
.op-ring__arc--a { stroke: var(--pink); }
.op-ring__arc--b { mix-blend-mode: var(--op-blend); }
.op-ring__dots { fill: var(--blue); }
.op-ring__value { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.op-ring__value small { display: block; font: 400 10px/1.2 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; margin-top: 2px; }

/* ==========================================================================
   LIST ROW
   ========================================================================== */
.op-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.op-row {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 8px; isolation: isolate;
  color: var(--ink); text-decoration: none; background: none; border: 0; width: 100%; box-sizing: border-box; text-align: left; font: inherit;
  background-image: radial-gradient(circle, var(--rule) 0 1px, transparent 1.4px); background-size: 6px 3px; background-repeat: repeat-x; background-position: 0 100%;
  -webkit-tap-highlight-color: transparent;
}
.op-row:last-child { background-image: none; }
.op-row--action { cursor: pointer; }
.op-row::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; bottom: 18%; z-index: -1; background: var(--yellow); opacity: .7; mix-blend-mode: var(--op-blend);
  transform: scaleX(0) rotate(-.6deg); transform-origin: 0 50%; transition: transform var(--dur-settle) var(--ease-paper); border-radius: 2px 6px 3px 5px; }
.op-row--action:hover::before, .op-row--action:focus-visible::before { transform: scaleX(1) rotate(-.6deg); }
.op-row--action:active::before { transform: scaleX(1) rotate(-.6deg) translateY(1px); }
.op-row.is-selected::before { transform: scaleX(1) rotate(-.6deg); background: var(--pink); opacity: .3; }
[data-theme="dark"] .op-row::before { opacity: .22; }
[data-theme="dark"] .op-row.is-selected::before { opacity: .2; }
.op-row__lead { flex: none; display: grid; place-items: center; min-width: 36px; }
.op-row__num { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.op-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-row__title { font: 600 18px/1.25 var(--font-body); }
.op-row__meta { font: 400 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-row__trail { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font: 400 12px/1 var(--font-mono); }
.op-row__chev { width: 18px; height: 18px; transition: transform var(--dur-quick) var(--ease-drift); }
.op-row--action:hover .op-row__chev { transform: translateX(3px); color: var(--ink); }
[data-theme="dark"] .op-row--action:hover { color: var(--ink); }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.op-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px 36px; max-width: 420px; margin: 0 auto; box-sizing: border-box; }
.op-empty__art { width: 168px; height: 128px; margin-bottom: 10px; }
.op-empty__art .a { fill: var(--pink); }
.op-empty__art .b { fill: var(--blue); mix-blend-mode: var(--op-blend); }
.op-empty__art .y { fill: var(--yellow); mix-blend-mode: var(--op-blend); }
.op-empty__art .k { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.op-empty__art .t { fill: var(--ink-muted); font: 700 9px var(--font-mono); letter-spacing: .1em; }
.op-empty__title { margin: 0; font: 800 28px/1.02 var(--font-display); letter-spacing: -.02em; font-stretch: 88%; }
.op-empty__text { margin: 0 0 8px; font: 400 16px/1.5 var(--font-body); color: var(--ink-muted); }
.op-empty__note { margin: 6px 0 0; font: 400 11px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* ==========================================================================
   PRINT MARKS — registration marks, colour bars, editions, printer's notes
   ========================================================================== */
.op-regmark { width: 22px; height: 22px; color: var(--ink); flex: none; }
.op-regmark circle, .op-regmark path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.op-colorbar { display: inline-flex; height: 12px; isolation: isolate; }
.op-colorbar i { width: 14px; height: 100%; }
.op-colorbar .c-p { background: var(--pink); } .op-colorbar .c-b { background: var(--blue); } .op-colorbar .c-y { background: var(--yellow); }
.op-colorbar .c-v { background: var(--mix-violet); } .op-colorbar .c-r { background: var(--mix-red); } .op-colorbar .c-o { background: var(--mix-olive); }
.op-colorbar .c-k { background: var(--ink); }
.op-colorbar .c-50 { background: radial-gradient(circle, var(--ink) 0 1.5px, transparent 1.9px) 0 0 / 4px 4px; }
.op-colorbar .c-25 { background: radial-gradient(circle, var(--ink) 0 .9px, transparent 1.3px) 0 0 / 4px 4px; }
.op-edition { display: inline-flex; align-items: baseline; gap: 6px; font: 400 12px/16px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); text-transform: uppercase; white-space: nowrap; }
.op-edition b { font-weight: 700; color: var(--pink-text); font-size: 13px; }
.op-note { margin: 0; font: italic 400 12.5px/1.45 var(--font-mono); color: var(--ink-muted); padding-left: 14px; position: relative; }
.op-note::before { content: "\203B"; position: absolute; left: 0; top: 0; color: var(--pink-text); font-style: normal; }
.op-slug { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 11px/14px var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; }
.op-rule { height: 0; border: 0; border-top: 1.5px solid var(--ink); margin: 0; }
.op-rule--dotted { border-top: 0; height: 3px; background: radial-gradient(circle, var(--ink-muted) 0 1px, transparent 1.4px) 0 0 / 6px 3px repeat-x; }
.op-highlight { background: linear-gradient(transparent 18%, var(--yellow) 18% 88%, transparent 88%); padding: 0 .12em; color: var(--on-bright); }
[data-theme="dark"] .op-highlight { color: var(--on-bright); }

/* ==========================================================================
   HALFTONE ART (generated by Overprint.halftoneArt)
   ========================================================================== */
.op-art { display: block; width: 100%; height: 100%; }
.op-art .pa { fill: var(--pink); }
.op-art .pb { fill: var(--blue); mix-blend-mode: var(--op-blend); }
.op-art .py { fill: var(--yellow); mix-blend-mode: var(--op-blend); }
.op-art .bg { fill: var(--paper); }

/* ==========================================================================
   WIDGETS
   ========================================================================== */
.op-widget { position: relative; background: var(--paper-card) var(--op-grain); color: var(--ink); box-shadow: var(--lift-1); box-sizing: border-box; }

/* Event ticket */
.op-ticket { display: flex; width: 100%; max-width: 620px; isolation: isolate; filter: none; transform: rotate(var(--tilt, -1deg)); transition: transform var(--dur-settle) var(--ease-paper); }
.op-ticket:hover { transform: rotate(0deg); }
.op-ticket__main, .op-ticket__stub { position: relative; background: var(--paper-card) var(--op-grain); box-shadow: var(--lift-1); }
.op-ticket__main { flex: 1; min-width: 0; padding: 18px 22px 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: start;
  -webkit-mask: radial-gradient(circle 9px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.op-ticket__date { grid-row: span 3; display: flex; flex-direction: column; align-items: center; padding-right: 18px; border-right: 1.5px dotted var(--rule); }
.op-ticket__mon { font: 700 12px/1 var(--font-mono); letter-spacing: .12em; color: var(--pink-text); text-transform: uppercase; }
.op-ticket__day { font: 800 58px/.9 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.op-ticket__dow { font: 400 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; margin-top: 6px; }
.op-ticket__kicker { font: 400 11px/14px var(--font-mono); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; }
.op-ticket__title { margin: 2px 0 0; font: 800 34px/.95 var(--font-display); letter-spacing: -.025em; font-stretch: 82%; }
.op-ticket__main::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: radial-gradient(circle, var(--pink) 0 1.3px, transparent 1.7px) 0 0 / 4px 4px; opacity: .9; }
.op-ticket__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); margin-top: 6px; }
.op-ticket__meta b { color: var(--ink); font-weight: 700; }
.op-ticket__stub { flex: none; width: 116px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 10px; text-align: center;
  background-image: var(--op-grain), repeating-linear-gradient(to bottom, var(--rule) 0 5px, transparent 5px 10px); background-size: auto, 1.5px 100%; background-repeat: repeat, no-repeat;
  -webkit-mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transform-origin: 0 100%; transition: transform var(--dur-slide) var(--ease-paper), opacity var(--dur-slide) linear; }
.op-ticket__admit { font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; color: var(--ink-muted); }
.op-ticket__seat { font: 800 30px/1 var(--font-display); letter-spacing: -.02em; }
.op-ticket__seat small { display: block; font: 400 10px/1.2 var(--font-mono); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; }
.op-ticket__barcode { width: 84px; height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 9.5px, transparent 9.5px 11px); }
.op-ticket.is-torn .op-ticket__stub { transform: translate(14px, 10px) rotate(9deg); }
.op-ticket__stamp { position: absolute; right: 136px; top: 50%; z-index: 2; padding: 6px 10px; pointer-events: none;
  font: 800 22px/1 var(--font-display); letter-spacing: .02em; font-stretch: 80%; color: var(--mix-red); text-transform: uppercase;
  box-shadow: inset 0 0 0 2.5px var(--mix-red); border-radius: var(--radius-2); mix-blend-mode: var(--op-blend);
  opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(1.6); transition: opacity var(--dur-snap) linear, transform var(--dur-quick) var(--ease-stamp); }
.op-ticket.is-torn .op-ticket__stamp { opacity: .9; transform: translateY(-50%) rotate(-12deg); }
.op-ticket__actions { grid-column: 2; display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.op-ticket-wrap { container-type: inline-size; width: 100%; max-width: 620px; }
@container (max-width: 470px) {
  .op-ticket__main { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 16px 18px; }
  .op-ticket__date { grid-row: auto; flex-direction: row; align-items: baseline; gap: 8px; padding: 0 0 8px; border-right: 0; border-bottom: 1.5px dotted var(--rule); margin-bottom: 4px; }
  .op-ticket__day { font-size: 34px; margin: 0; }
  .op-ticket__dow, .op-ticket__mon { margin: 0; }
  .op-ticket__title { font-size: 28px; }
  .op-ticket__actions { grid-column: 1; }
  .op-ticket__stub { width: 78px; padding: 14px 6px; }
  .op-ticket__seat { font-size: 24px; }
  .op-ticket__barcode { width: 60px; }
  .op-ticket__stamp { right: 92px; font-size: 18px; }
}

/* Reading log */
.op-log { padding: 20px 22px 18px; max-width: 420px; }
.op-log__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.op-log__title { margin: 0; font: 800 26px/1 var(--font-display); letter-spacing: -.02em; font-stretch: 88%; }
.op-log__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 72px; margin: 16px 0 6px; }
.op-log__bar { position: relative; height: calc(var(--h) * 1%); min-height: 4px; isolation: isolate; transform-origin: 50% 100%; animation: op-grow var(--dur-slide) var(--ease-paper) both; animation-delay: calc(var(--d) * 30ms); }
.op-log__bar::before, .op-log__bar::after { content: ""; position: absolute; inset: 0; }
.op-log__bar::before { background: var(--pink); transform: translate(2px, 0); z-index: -1; }
.op-log__bar::after { background: radial-gradient(circle, var(--blue) 0 1.6px, transparent 2px) 0 0 / 4px 4px; mix-blend-mode: var(--op-blend); }
.op-log__bar.is-today::after { background: var(--blue); }
@keyframes op-grow { from { transform: scaleY(0); } to { transform: none; } }
.op-log__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font: 400 10px/1 var(--font-mono); color: var(--ink-muted); text-align: center; letter-spacing: .08em; }
.op-log__book { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; }
.op-log__book + .op-log__book { background: radial-gradient(circle, var(--rule) 0 1px, transparent 1.4px) 0 0 / 6px 3px repeat-x; }
.op-log__btitle { font: 600 16px/1.25 var(--font-body); }
.op-log__btitle i { font-weight: 400; color: var(--ink-muted); }
.op-log__book .op-progress { grid-column: 1 / -1; }
.op-log__book .op-progress__track { height: 10px; }

/* Weather / mood print */
.op-weather { width: 300px; max-width: 100%; padding: 18px 20px 16px; overflow: hidden; }
.op-weather__art { position: relative; height: 150px; margin: 6px -20px 4px; }
.op-weather__art svg { width: 100%; height: 100%; overflow: visible; }
.op-weather__art .sun { fill: var(--yellow); mix-blend-mode: var(--op-blend); }
.op-weather__art .pk { fill: var(--pink); mix-blend-mode: var(--op-blend); }
.op-weather__art .bl { fill: var(--blue); mix-blend-mode: var(--op-blend); }
.op-weather__art .ln { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; mix-blend-mode: var(--op-blend); }
.op-weather__art g { transition: opacity var(--dur-slide) var(--ease-paper), transform var(--dur-slide) var(--ease-paper); transform-box: fill-box; transform-origin: 50% 50%; }
.op-weather__art g.is-off { opacity: 0; transform: translateY(10px) scale(.92); }
.op-weather__temp { font: 800 64px/.9 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.op-weather__temp sup { font-size: 26px; vertical-align: top; position: relative; top: 4px; }
.op-weather__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.op-weather__mood { font: italic 400 19px/1.25 var(--font-body); text-align: right; max-width: 140px; }
.op-weather__fore { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1.5px solid var(--ink); text-align: center; font: 400 11px/1.3 var(--font-mono); color: var(--ink-muted); letter-spacing: .06em; }
.op-weather__fore b { display: block; font: 800 18px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }

/* Tally counter */
.op-tally { width: 320px; max-width: 100%; padding: 18px 20px; }
.op-tally__marks { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 52px; align-items: center; margin: 12px 0 14px; padding: 8px 4px; background: repeating-linear-gradient(to bottom, transparent 0 25px, var(--rule) 25px 26px); }
.op-tally__group { position: relative; display: inline-flex; gap: 5px; height: 34px; padding: 0 3px; }
.op-tally__mark { width: 3.5px; height: 100%; border-radius: 2px; background: var(--blue); box-shadow: 1.5px 1px 0 var(--pink); transform: rotate(calc(var(--r, 0) * 1deg)); animation: op-stampin var(--dur-quick) var(--ease-stamp) both; }
.op-tally__slash { position: absolute; left: -4px; right: -4px; top: 50%; height: 3.5px; margin-top: -2px; border-radius: 2px; background: var(--mix-red); box-shadow: 1px 1.5px 0 var(--yellow); transform: rotate(-24deg); animation: op-slash var(--dur-quick) var(--ease-stamp) both; }
@keyframes op-stampin { from { opacity: 0; transform: rotate(calc(var(--r, 0) * 1deg)) scaleY(1.5) translateY(-6px); } to { opacity: 1; transform: rotate(calc(var(--r, 0) * 1deg)); } }
@keyframes op-slash { from { opacity: 0; transform: rotate(-24deg) scaleX(1.6); } to { opacity: 1; transform: rotate(-24deg); } }
.op-tally__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-tally__total { font: 800 48px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.op-tally__btns { display: flex; gap: 10px; }

/* Planner page */
.op-planner { width: 340px; max-width: 100%; padding: 18px 20px 16px; background-image: var(--op-grain), linear-gradient(90deg, transparent 30px, var(--pink) 30px 31.5px, transparent 31.5px); }
.op-planner__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-left: 22px; }
.op-planner__month { margin: 0; font: 800 30px/1 var(--font-display); letter-spacing: -.02em; font-stretch: 85%; }
.op-planner__nav { display: flex; gap: 6px; }
.op-planner__grid { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 12px; padding-left: 22px; }
.op-planner__dow { font: 700 10px/24px var(--font-mono); letter-spacing: .1em; color: var(--ink-muted); text-align: center; border-bottom: 1.5px solid var(--ink); }
.op-planner__day { position: relative; height: 38px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink); font: 500 15px/1 var(--font-body); font-variant-numeric: tabular-nums;
  background-image: linear-gradient(var(--rule), var(--rule)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; -webkit-tap-highlight-color: transparent; }
.op-planner__day.is-out { color: var(--ink-muted); opacity: .55; }
.op-planner__day.is-weekend { color: var(--ink-muted); }
.op-planner__day:hover { color: var(--blue); }
.op-planner__day:focus-visible { outline: 2px dashed var(--ink); outline-offset: -2px; }
.op-planner__day .ev { position: absolute; bottom: 5px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); }
.op-planner__day .ev i { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); }
.op-planner__day .ev i + i { background: var(--blue); }
.op-planner__ring { position: absolute; left: 50%; top: 50%; width: 34px; height: 30px; margin: -16px 0 0 -17px; pointer-events: none; overflow: visible; }
.op-planner__ring path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.op-planner__ring .g { stroke: var(--pink); transform: translate(1.5px, 1.5px); }
.op-planner__ring .m { stroke: var(--blue); mix-blend-mode: var(--op-blend); }
.op-planner__day.is-today .op-planner__ring .m { stroke: var(--mix-red); }
.op-planner__ring { animation: op-circle var(--dur-quick) var(--ease-stamp) both; }
@keyframes op-circle { from { opacity: 0; transform: scale(1.35) rotate(-10deg); } to { opacity: 1; transform: none; } }
.op-planner__note { margin: 12px 0 0 22px; font: italic 400 15px/1.4 var(--font-body); color: var(--ink-muted); min-height: 21px; }
.op-planner__note b { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--pink-text); font-style: normal; text-transform: uppercase; margin-right: 6px; }

/* ==========================================================================
   Reduced motion: keep every state, drop the travel
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .op-btn, .op-iconbtn, .op-btn::before, .op-btn::after, .op-iconbtn::before, .op-iconbtn::after,
  .op-toggle__tab, .op-toggle__fill, .op-check__tick, .op-check__box, .op-radio__dot, .op-radio__box,
  .op-seg__thumb, .op-seg__thumb::before, .op-tab, .op-card, .op-card::after, .op-sticker, .op-tag,
  .op-tip__slip, .op-field__control::before, .op-field__control::after, .op-progress__fill, .op-ring__arc,
  .op-row::before, .op-row__chev, .op-avatars > *, .op-ticket, .op-ticket__stub, .op-ticket__stamp, .op-weather__art g,
  .op-misreg::before, .op-slider__input::-webkit-slider-thumb {
    transition: none !important;
  }
  .op-kiss, .op-toast, .op-toast.is-leaving, .op-dialog__sheet, .op-dialog__scrim, .op-dialog__pin, .op-tabs__panel.is-entering,
  .op-log__bar, .op-tally__mark, .op-tally__slash, .op-planner__ring, .op-btn__dots i {
    animation: none !important;
  }
  .op-btn:active, .op-iconbtn:active, .op-btn.is-pressed, .op-iconbtn.is-pressed { transform: none; }
  .op-card:hover, .op-card:focus-within { transform: rotate(0deg); }
  .op-btn__dots i { opacity: .7; }
}