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

/* ==========================================================================
   Cutout — Matisse-style paper cut-outs
   Colours, type, spacing, radii and shadows come from tokens.css.
   Motion lives here. Animate transform and opacity only.
   ========================================================================== */

:root {
  --co-ease-lift: cubic-bezier(.3, 1.35, .55, 1);   /* pick-up: a little overshoot */
  --co-ease-press: cubic-bezier(.3, 0, .5, 1);      /* press flat: quick, no bounce */
  --co-ease-slide: cubic-bezier(.45, 1.2, .5, 1);   /* paper strips sliding in a slot */
  --co-ease-out: cubic-bezier(.2, .7, .2, 1);       /* fades, settles, exits */
  --co-t-press: 120ms;
  --co-t-quick: 180ms;
  --co-t-lift: 260ms;
  --co-t-slide: 300ms;
  --co-t-enter: 380ms;
  --co-hover-y: -3px;      /* how far a piece rises on hover */
  --co-tilt-on: 1;         /* multiplies every tilt; 0 under reduced motion */
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }
:root, [data-theme] { --soft: var(--page-ink-soft); --focus-ring: var(--focus); }

body {
  margin: 0;
  background: var(--page);
  color: var(--page-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anything cut from paper: ink text, paper-scoped secondary and focus colours */
.co-paper { color: var(--ink); --soft: var(--ink-soft); --focus-ring: var(--cobalt); }

/* ---------- type + layout helpers ---------- */
.co-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.co-stage--top { align-items: flex-start; }
.co-col { display: flex; flex-direction: column; gap: var(--space-3); }
.co-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.co-spacer { flex: 1; }
.co-display, .co-title, .co-heading, .co-num { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 600; margin: 0; }
.co-display { font-size: 56px; line-height: 58px; letter-spacing: -.02em; }
.co-title { font-size: 32px; line-height: 38px; letter-spacing: -.01em; }
.co-heading { font-size: 21px; line-height: 26px; }
.co-num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.co-body { margin: 0; font-size: 16px; line-height: 24px; }
.co-small { margin: 0; font-size: 14px; line-height: 20px; color: var(--soft); }
.co-overline { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.co-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.co-icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.co-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   The piece: a cut of paper with a soft cast shadow.
   ::before holds the resting shadow, ::after the lifted one; hover crossfades
   them (opacity) while the piece rises and tilts (transform). Press = flat.
   ========================================================================== */
.co-piece { position: relative; transition: transform var(--co-t-lift) var(--co-ease-lift); }
.co-piece::before, .co-piece::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  transition: opacity var(--co-t-lift) var(--co-ease-out);
}
.co-piece::before { box-shadow: var(--shadow-rest); }
.co-piece::after { box-shadow: var(--shadow-lift); opacity: 0; }

/* ---------- Button + IconButton ---------- */
.co-btn, .co-iconbtn {
  --_fill: var(--paper);
  --_ink: var(--ink);
  --_h: 44px;
  --_px: 20px;
  --_fs: 15px;
  --_tilt: -1deg;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex: none; vertical-align: middle;
  height: var(--_h); margin: 0; padding: 0 var(--_px);
  border: 0; border-radius: var(--radius-md);
  background: var(--_fill); color: var(--_ink);
  font-family: var(--font-body); font-size: var(--_fs); line-height: 20px; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.co-btn--primary { --_fill: var(--cobalt); --_ink: var(--on-pigment); }
.co-btn--danger { --_fill: var(--coral); --_ink: var(--ink); }
.co-btn--leaf { --_fill: var(--leaf); --_ink: var(--ink); }
.co-btn--sm { --_h: 36px; --_px: 14px; --_fs: 14px; }
.co-btn--lg { --_h: 52px; --_px: 26px; --_fs: 17px; }
.co-btn--block { display: flex; width: 100%; }
.co-btn .co-icon { width: 18px; height: 18px; }
.co-btn--lg .co-icon { width: 20px; height: 20px; }

@media (hover: hover) {
  .co-btn:hover:not(:disabled):not(.co-btn--ghost),
  .co-iconbtn:hover:not(:disabled):not(.co-btn--ghost) { transform: translateY(var(--co-hover-y)) rotate(calc(var(--_tilt) * var(--co-tilt-on))); }
  .co-btn:hover:not(:disabled)::after, .co-iconbtn:hover:not(:disabled)::after { opacity: 1; }
  .co-btn:hover:not(:disabled)::before, .co-iconbtn:hover:not(:disabled)::before { opacity: 0; }
}
.co-btn:active:not(:disabled), .co-iconbtn:active:not(:disabled), .co-btn.is-pressed, .co-iconbtn.is-pressed {
  transform: translateY(1px) scale(.985);
  transition-duration: var(--co-t-press); transition-timing-function: var(--co-ease-press);
  box-shadow: var(--shadow-flat);
}
.co-btn:active:not(:disabled)::before, .co-btn:active:not(:disabled)::after,
.co-iconbtn:active:not(:disabled)::before, .co-iconbtn:active:not(:disabled)::after,
.co-btn.is-pressed::before, .co-btn.is-pressed::after,
.co-iconbtn.is-pressed::before, .co-iconbtn.is-pressed::after { opacity: 0; transition-duration: var(--co-t-press); }

.co-btn--ghost { --_fill: transparent; --_ink: currentColor; }
.co-btn--ghost::before, .co-btn--ghost::after { display: none; }
@media (hover: hover) { .co-btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, currentColor 9%, transparent); } }
.co-btn--ghost:active:not(:disabled) { box-shadow: none; background: color-mix(in srgb, currentColor 14%, transparent); }

.co-btn:disabled, .co-iconbtn:disabled, .co-btn[aria-disabled="true"] {
  --_fill: var(--paper-sunk); --_ink: var(--ink-soft); cursor: not-allowed; box-shadow: var(--shadow-flat);
}
.co-btn:disabled::before, .co-btn:disabled::after, .co-iconbtn:disabled::before, .co-iconbtn:disabled::after { display: none; }
.co-btn--ghost:disabled { --_fill: transparent; --_ink: var(--soft); box-shadow: none; }

.co-btn:focus-visible, .co-iconbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.co-iconbtn { --_px: 0; width: var(--_h); position: relative; }
.co-iconbtn.co-btn--sm { --_h: 36px; }
.co-iconbtn.co-btn--lg { --_h: 52px; }
.co-iconbtn--round { border-radius: var(--radius-round); }
.co-iconbtn .co-icon { width: 20px; height: 20px; }
.co-iconbtn.co-btn--sm .co-icon { width: 18px; height: 18px; }
.co-iconbtn[aria-pressed="true"] { --_fill: var(--_on, var(--coral)); --_ink: var(--ink); }
.co-iconbtn[aria-pressed="true"] .co-icon svg .co-fill { fill: currentColor; }
.co-iconbtn.is-popped .co-icon { animation: co-pop var(--co-t-enter) var(--co-ease-lift); }
.co-iconbtn__badge { position: absolute; top: -7px; right: -7px; z-index: 2; pointer-events: none; }

@keyframes co-pop { 0% { transform: scale(.6) rotate(-14deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }

/* ---------- Toggle: a leaf strip slides into a slot, the paper knob rides it ---------- */
.co-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; position: relative; font-size: 15px; line-height: 20px; -webkit-tap-highlight-color: transparent; }
.co-toggle__input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; left: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }
.co-toggle__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--paper-sunk); box-shadow: var(--shadow-slot); overflow: hidden; pointer-events: none; }
.co-toggle__strip { position: absolute; inset: 0; border-radius: inherit; background: var(--leaf); transform: translateX(-101%); transition: transform var(--co-t-slide) var(--co-ease-slide); }
.co-toggle__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-round); background: var(--paper); box-shadow: var(--shadow-rest); transition: transform var(--co-t-slide) var(--co-ease-slide); }
.co-toggle__input:checked + .co-toggle__track .co-toggle__strip { transform: none; }
.co-toggle__input:checked + .co-toggle__track .co-toggle__knob { transform: translateX(22px) rotate(calc(8deg * var(--co-tilt-on))); }
.co-toggle:active .co-toggle__knob { transform: scale(.9); transition-duration: var(--co-t-press); }
.co-toggle:active .co-toggle__input:checked + .co-toggle__track .co-toggle__knob { transform: translateX(22px) scale(.9); }
.co-toggle__input:focus-visible + .co-toggle__track { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.co-toggle__input:disabled ~ * { opacity: .5; }
.co-toggle:has(.co-toggle__input:disabled) { cursor: not-allowed; }

/* ---------- Checkbox + Radio ---------- */
.co-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); position: relative; cursor: pointer; font-size: 15px; line-height: 22px; -webkit-tap-highlight-color: transparent; }
.co-check__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; left: 0; top: 0; cursor: pointer; }
.co-check__box { position: relative; flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--shadow-rest); pointer-events: none; transition: transform var(--co-t-quick) var(--co-ease-lift); }
.co-check--radio .co-check__box { border-radius: var(--radius-round); }
.co-check__mark { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: inherit; background: var(--cobalt); color: var(--on-pigment); opacity: 0; transform: scale(.4) rotate(-20deg); transition: transform var(--co-t-lift) var(--co-ease-lift), opacity var(--co-t-quick) var(--co-ease-out); }
.co-check__mark .co-icon { width: 16px; height: 16px; }
.co-check__mark .co-icon svg { stroke-width: 3; }
.co-check--radio .co-check__mark { inset: 5px; }
.co-check__input:checked + .co-check__box .co-check__mark { opacity: 1; transform: rotate(calc(-4deg * var(--co-tilt-on))); }
.co-check--radio .co-check__input:checked + .co-check__box { box-shadow: inset 0 0 0 2px var(--cobalt), var(--shadow-rest); }
.co-check:active .co-check__box { transform: scale(.9); transition-duration: var(--co-t-press); }
.co-check__input:focus-visible + .co-check__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.co-check__text { display: flex; flex-direction: column; }
.co-check__hint { font-size: 14px; line-height: 20px; color: var(--soft); }
.co-check__input:disabled ~ * { opacity: .5; }
.co-check:has(.co-check__input:disabled) { cursor: not-allowed; }
.co-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.co-group > legend { padding: 0; margin-bottom: var(--space-3); font-size: 15px; font-weight: 500; }

/* ---------- TextField ---------- */
.co-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.co-field__label { font-size: 15px; line-height: 20px; font-weight: 500; }
.co-field__box { --_tilt: -.4deg; display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4); box-sizing: border-box; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); cursor: text; }
.co-field__box > .co-icon { color: var(--ink-soft); }
.co-field__input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); font: 400 16px/24px var(--font-body); outline: none; }
.co-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.co-field__box:focus-within { transform: translateY(-2px) rotate(calc(var(--_tilt) * var(--co-tilt-on))); outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.co-field__box:focus-within::after { opacity: 1; }
.co-field__box:focus-within::before { opacity: 0; }
.co-field.is-error .co-field__box { box-shadow: inset 0 0 0 2px var(--coral); }
.co-field__msg { min-height: 20px; font-size: 14px; line-height: 20px; color: var(--soft); }
.co-field__msg:empty { display: none; }
.co-field__err { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-sm); background: var(--coral); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-rest); transform: rotate(calc(-1deg * var(--co-tilt-on))); transform-origin: left center; animation: co-tag-in var(--co-t-enter) var(--co-ease-lift); }
.co-field__err .co-icon { width: 16px; height: 16px; }
@keyframes co-tag-in { from { opacity: 0; transform: translateY(-6px) rotate(-6deg); } to { opacity: 1; transform: rotate(-1deg); } }

/* ---------- SegmentedControl: a paper strip slides along a slot ---------- */
.co-seg { --_n: 3; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--radius-md); background: var(--paper-sunk); box-shadow: var(--shadow-slot); isolation: isolate; }
.co-seg__strip { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--_n)); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-rest); transition: transform var(--co-t-slide) var(--co-ease-slide); }
.co-seg__opt { position: relative; z-index: 1; height: 36px; padding: 0 var(--space-4); border: 0; background: none; color: var(--ink-soft); font: 500 15px/20px var(--font-body); letter-spacing: .01em; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: color var(--co-t-quick) var(--co-ease-out); -webkit-tap-highlight-color: transparent; }
.co-seg__opt[aria-checked="true"] { color: var(--ink); }
@media (hover: hover) { .co-seg__opt:hover { color: var(--ink); } }
.co-seg__opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.co-seg--block { display: grid; width: 100%; }

/* ---------- Card: a paper face over a stack of coloured sheets ---------- */
.co-card { position: relative; display: block; box-sizing: border-box; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.co-card__sheet { position: absolute; inset: 0; border-radius: var(--radius-lg); background: var(--_sheet, var(--cobalt)); transition: transform var(--co-t-lift) var(--co-ease-lift); }
.co-card__sheet--1 { transform: translate(7px, 7px) rotate(calc(1.6deg * var(--co-tilt-on))); }
.co-card__sheet--2 { transform: translate(-5px, 9px) rotate(calc(-2.4deg * var(--co-tilt-on))); }
.co-card__face { --_tilt: -.6deg; box-sizing: border-box; height: 100%; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--paper); }
.co-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.co-card__head .co-overline { display: block; margin-bottom: var(--space-1); }
.co-card__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.co-card--interactive { cursor: pointer; }
@media (hover: hover) {
  .co-card--interactive:hover .co-card__face { transform: translateY(-4px) rotate(calc(var(--_tilt) * var(--co-tilt-on))); }
  .co-card--interactive:hover .co-card__face::after { opacity: 1; }
  .co-card--interactive:hover .co-card__face::before { opacity: 0; }
  .co-card--interactive:hover .co-card__sheet--1 { transform: translate(10px, 9px) rotate(calc(3deg * var(--co-tilt-on))); }
  .co-card--interactive:hover .co-card__sheet--2 { transform: translate(-8px, 11px) rotate(calc(-4deg * var(--co-tilt-on))); }
}
.co-card--interactive:active .co-card__face { transform: translateY(1px); transition-duration: var(--co-t-press); }
.co-card--interactive:active .co-card__face::before, .co-card--interactive:active .co-card__face::after { opacity: 0; }
.co-card--interactive:focus-visible { outline: none; }
.co-card--interactive:focus-visible .co-card__face { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------- Badge + Tag ---------- */
.co-badge { --_fill: var(--paper); --_ink: var(--ink); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--_fill); color: var(--_ink); font: 500 13px/16px var(--font-body); letter-spacing: .02em; white-space: nowrap; box-shadow: var(--shadow-rest); vertical-align: middle; }
.co-badge--sm { height: 20px; min-width: 20px; padding: 0 6px; justify-content: center; font-size: 12px; }
.co-badge .co-icon { width: 14px; height: 14px; }
.co-badge__dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: currentColor; }
.co-badge:nth-child(3n+1) { transform: rotate(calc(-1.2deg * var(--co-tilt-on))); }
.co-badge:nth-child(3n+2) { transform: rotate(calc(.8deg * var(--co-tilt-on))); }
.co-tag { height: 30px; padding: 0 4px 0 12px; font-size: 14px; gap: 2px; }
.co-tag__x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; padding: 0; border-radius: var(--radius-round); background: none; color: inherit; cursor: pointer; transition: transform var(--co-t-quick) var(--co-ease-lift); }
.co-tag__x .co-icon { width: 14px; height: 14px; }
@media (hover: hover) { .co-tag__x:hover { background: color-mix(in srgb, currentColor 14%, transparent); transform: rotate(90deg); } }
.co-tag__x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.co-tag.is-leaving { animation: co-snip var(--co-t-lift) var(--co-ease-out) forwards; }
@keyframes co-snip { to { opacity: 0; transform: translateY(8px) rotate(-12deg) scale(.8); } }

/* ---------- Avatar ---------- */
.co-avatar { --_s: 40px; --_fill: var(--cobalt); --_ink: var(--on-pigment); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: var(--radius-round); background: var(--_fill); color: var(--_ink); font: 600 calc(var(--_s) * .4)/1 var(--font-display); font-variation-settings: "SOFT" 100; box-shadow: var(--shadow-rest); vertical-align: middle; }
.co-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.co-avatar--sm { --_s: 32px; }
.co-avatar--lg { --_s: 56px; }
.co-avatar--xl { --_s: 80px; }
.co-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: var(--radius-round); background: var(--leaf); box-shadow: 0 0 0 2px var(--paper); }
.co-avatar__status--away { background: var(--ochre); }
.co-stack { display: inline-flex; align-items: center; padding-left: 8px; }
.co-stack > .co-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper), var(--shadow-rest); transition: transform var(--co-t-lift) var(--co-ease-lift); }
.co-stack > .co-avatar:nth-child(odd) { --_t: -6deg; }
.co-stack > .co-avatar:nth-child(even) { --_t: 5deg; }
@media (hover: hover) { .co-stack > .co-avatar:hover { transform: translateY(-5px) rotate(calc(var(--_t) * var(--co-tilt-on))); z-index: 2; } }
.co-stack__more { background: var(--paper-sunk); color: var(--ink); font-family: var(--font-body); font-weight: 500; font-size: 13px; }

/* ---------- Toast ---------- */
.co-toaster { position: fixed; z-index: 1000; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column-reverse; gap: var(--space-3); width: min(360px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 560px) { .co-toaster { right: 16px; bottom: 16px; } }
.co-toast { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-float); pointer-events: auto; animation: co-drop var(--co-t-enter) var(--co-ease-lift); }
.co-toast__mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; position: relative; color: var(--ink); }
.co-toast__mark svg.co-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-toast__mark .co-icon { position: relative; width: 18px; height: 18px; }
.co-toast__mark.co-tone-cobalt { color: var(--on-pigment); }
.co-toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.co-toast__title { font: 600 17px/22px var(--font-display); font-variation-settings: "SOFT" 100; margin: 0; }
.co-toast__body { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.co-toast__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); margin-left: -10px; }
.co-toast .co-iconbtn { margin: -6px -6px 0 0; }
.co-toast.is-leaving { animation: co-lift-away var(--co-t-quick) var(--co-ease-out) forwards; }
@keyframes co-drop { from { opacity: 0; transform: translateY(18px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes co-lift-away { to { opacity: 0; transform: translateY(-10px) rotate(-2deg); } }

/* ---------- Modal ---------- */
.co-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--space-4); box-sizing: border-box; }
.co-modal__scrim { position: absolute; inset: 0; background: #0b1028; opacity: .45; animation: co-fade var(--co-t-lift) var(--co-ease-out); }
.co-modal__wrap { position: relative; width: min(460px, 100%); animation: co-sheet-in var(--co-t-enter) var(--co-ease-lift); }
.co-modal__wrap .co-card__sheet--1 { --_sheet: var(--coral); transform: translate(8px, 8px) rotate(calc(2.2deg * var(--co-tilt-on))); }
.co-modal__sheet { position: relative; box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-float); }
.co-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.co-modal__head .co-title { flex: 1; font-size: 26px; line-height: 32px; }
.co-modal__body { color: var(--ink-soft); }
.co-modal__body > * + * { margin-top: var(--space-4); }
.co-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.co-modal.is-leaving .co-modal__scrim { animation: co-fade-out var(--co-t-quick) var(--co-ease-out) forwards; }
.co-modal.is-leaving .co-modal__wrap { animation: co-lift-away var(--co-t-quick) var(--co-ease-out) forwards; }
.co-modal--inline { position: relative; inset: auto; padding: 0; display: block; }
.co-modal--inline .co-modal__wrap { animation: none; }
@keyframes co-fade { from { opacity: 0; } }
@keyframes co-fade-out { to { opacity: 0; } }
@keyframes co-sheet-in { from { opacity: 0; transform: translateY(28px) rotate(-2deg) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Progress: a pigment strip with a scissor-cut end ---------- */
.co-progress { --_v: 0; --_fill: var(--cobalt); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.co-progress__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 20px; font-weight: 500; }
.co-progress__value { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-progress__track { position: relative; height: 12px; border-radius: 999px; background: var(--paper-sunk); box-shadow: var(--shadow-slot); overflow: hidden; }
.co-progress--lg .co-progress__track { height: 18px; }
.co-progress__fill { position: absolute; inset: 0; background: var(--_fill); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 22%, calc(100% - 4px) 46%, 100% 70%, calc(100% - 5px) 100%, 0 100%); transform: translateX(calc(var(--_v) * 1% - 100%)); transition: transform 400ms var(--co-ease-slide); }

/* ---------- Shapes: hand-cut decoration ---------- */
.co-shape { display: block; flex: none; fill: var(--_fill, var(--cobalt)); }
.co-shape-wrap { display: inline-block; line-height: 0; transform: rotate(var(--_r, 0deg)); transition: transform var(--co-t-enter) var(--co-ease-lift); }
@media (hover: hover) { .co-shape-wrap--live:hover { transform: rotate(calc(var(--_r, 0deg) + 6deg * var(--co-tilt-on))) translateY(-4px); } }

/* ---------- Widgets ---------- */
.co-widget { width: 320px; max-width: 100%; }
.co-stat__value { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-1); }
.co-stat__value .co-num { font-size: 40px; line-height: 44px; }
.co-stat__spark { display: block; width: 100%; height: 64px; margin-top: var(--space-4); overflow: visible; }
.co-stat__spark .co-spark-shadow { fill: var(--ink); opacity: .12; }
.co-stat__spark .co-spark-area { fill: var(--_fill); }
.co-stat__spark .co-spark-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.co-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.co-list__row { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-md); transition: transform var(--co-t-lift) var(--co-ease-lift); }
@media (hover: hover) { .co-list__row:hover { background: var(--paper-sunk); transform: translateX(3px) rotate(calc(-.4deg * var(--co-tilt-on))); } }
.co-list__text { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; }
.co-list__text b { font-weight: 600; }
.co-list__time { flex: none; font-size: 13px; color: var(--soft); }
.co-list__row.is-new { animation: co-drop var(--co-t-enter) var(--co-ease-lift); }
.co-profile { text-align: center; }
.co-profile .co-avatar { margin: var(--space-1) auto var(--space-3); }
.co-profile__tags { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.co-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.co-profile__stats .co-num { display: block; font-size: 22px; line-height: 28px; }

/* ---------- Tones: pigment fills for badges, avatars, marks (after components so they win) ---------- */
.co-tone-cobalt { --_fill: var(--cobalt); --_ink: var(--on-pigment); }
.co-tone-coral { --_fill: var(--coral); --_ink: var(--ink); }
.co-tone-ochre { --_fill: var(--ochre); --_ink: var(--ink); }
.co-tone-leaf { --_fill: var(--leaf); --_ink: var(--ink); }
.co-tone-sunk { --_fill: var(--paper-sunk); --_ink: var(--ink); box-shadow: none; }

/* ==========================================================================
   Reduced motion: nothing moves, every state still changes.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --co-hover-y: 0px; --co-tilt-on: 0; }
  [class*="co-"], [class*="co-"]::before, [class*="co-"]::after { transition-duration: 0ms !important; animation: none !important; }
  .co-btn:active:not(:disabled), .co-iconbtn:active:not(:disabled), .co-card--interactive:active .co-card__face,
  .co-toggle:active .co-toggle__knob, .co-check:active .co-check__box { transform: none; }
  .co-toggle:active .co-toggle__input:checked + .co-toggle__track .co-toggle__knob { transform: translateX(22px); }
  .co-card--interactive:hover .co-card__face, .co-list__row:hover, .co-field__box:focus-within { transform: none !important; }
}