/* ============================================================
   Watercolor UI — a hand-drawn, watercolor-textured design system
   v0.1.0 · CSS-first · MIT · four painterly themes
   Drop in this stylesheet and use
   the .wc-* classes. Two themes: default (paper) and .wc-forest (night).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* ------------------------------------------------------------
   1. TOKENS  (the single source of truth — mirrors tokens.json)
   ------------------------------------------------------------ */
:root {
  /* — brand / neutrals — */
  --wc-paper:        #FFFCF5;   /* base surface */
  --wc-paper-2:      #FAF5E9;   /* sunken surface */
  --wc-ink:          #2A2A2A;   /* primary text */
  --wc-ink-soft:     #6B665D;   /* secondary text */
  --wc-line:         #D9D2C4;   /* hairline / border ink */

  /* — primary (warm gold) — */
  --wc-primary:      #E8A45C;
  --wc-primary-strong:#B87A28;
  --wc-primary-ink:  #7A4E12;   /* text on light primary tints */
  --wc-on-primary:   #241606;   /* dark ink on the gold button — ADA (white fails on light gold) */

  /* — semantic (5-level system) — */
  --wc-critical:     #C42628;
  --wc-warning:      #E0952B;
  --wc-caution:      #E8A45C;
  --wc-info:         #3F7CAC;
  --wc-tip:          #3E8E7E;

  /* — type — */
  --wc-font-serif:   'Playfair Display', Georgia, serif;
  --wc-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --wc-font-hand:    'Caveat', 'Comic Sans MS', cursive;
  --wc-text-xs: .75rem;  --wc-text-sm: .875rem; --wc-text-md: 1rem;
  --wc-text-lg: 1.125rem; --wc-text-xl: 1.375rem; --wc-text-2xl: 1.75rem;
  --wc-text-3xl: 2.25rem; --wc-text-4xl: 3rem;

  /* — space (4pt) — */
  --wc-1: 4px;  --wc-2: 8px;  --wc-3: 12px; --wc-4: 16px;
  --wc-5: 24px; --wc-6: 32px; --wc-7: 48px; --wc-8: 64px;

  /* — radius — */
  --wc-r-sm: 8px; --wc-r-md: 12px; --wc-r-lg: 18px; --wc-r-xl: 24px; --wc-r-pill: 100px;

  /* — elevation (soft, warm) — */
  --wc-shadow-1: 0 2px 8px rgba(60,45,20,.10);
  --wc-shadow-2: 0 8px 24px rgba(60,45,20,.14);
  --wc-shadow-3: 0 18px 48px rgba(60,45,20,.20);

  /* — motion — */
  --wc-dur-fast: .15s; --wc-dur: .25s; --wc-dur-slow: .4s;
  --wc-ease: cubic-bezier(.25,.46,.45,.94);
  --wc-spring: cubic-bezier(.34,1.56,.5,1);

  /* — hand-drawn engine — */
  --wc-border-w: 2px;
  --wc-sketch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6'/%3E%3C/filter%3E%3C/svg%3E#r");
  /* gentler wobble tuned for 24px line icons */
  --wc-sketch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ri'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='1' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.2' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.34'/%3E%3C/filter%3E%3C/svg%3E#ri");
  /* paper grain overlay */
  --wc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
  /* felt-pen form marks (re-inked with perfect-freehand — see scripts/build-icons.mjs) */
  --wc-mark-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M%206.1%2011.4%20Q%206.1%2011.4%206.9%2011.9%207.8%2012.4%208.8%2013.2%209.8%2014%2011%2013.1%2012.2%2012.1%2013%2011%2013.8%209.9%2015.4%207.9%2017.1%205.9%2017.2%205.8%2017.4%205.6%2017.7%205.5%2017.9%205.4%2018.2%205.3%2018.4%205.3%2018.7%205.4%2018.9%205.4%2019.1%205.6%2019.3%205.7%2019.5%205.9%2019.7%206.1%2019.8%206.3%2019.9%206.6%2019.9%206.8%2019.9%207.1%2019.8%207.3%2019.8%207.6%2019.6%207.8%2019.5%208%2019.3%208.1%2019.1%208.3%2018.8%208.4%2018.6%208.5%2018.3%208.5%2018.1%208.5%2017.8%208.4%2017.6%208.3%2017.4%208.1%2017.2%208%2017%207.8%2016.9%207.6%2016.8%207.3%2016.8%207.1%2016.8%206.8%2016.8%206.6%2016.9%206.3%2017%206.1%2017.1%205.9%2017.3%205.7%2017.5%205.6%2017.7%205.4%2018%205.4%2018.2%205.3%2018.5%205.3%2018.7%205.4%2019%205.5%2019.2%205.6%2019.4%205.8%2019.6%205.9%2019.7%206.2%2019.8%206.4%2019.9%206.6%2019.9%206.9%2019.9%207.1%2019.8%207.4%2019.7%207.6%2019.6%207.9%2019.6%207.9%2019.6%207.9%2018.5%209.5%2017.4%2011.2%2016.6%2012.2%2015.9%2013.2%2015.1%2014.2%2014.3%2015.3%2013.4%2016.4%2012.5%2017.5%2011%2018.1%209.5%2018.7%208.1%2017.9%206.7%2017%205.8%2016.1%205%2015.2%204.6%2014.3%204.1%2013.4%204%2013.3%203.9%2013.2%203.8%2013%203.7%2012.9%203.7%2012.7%203.7%2012.5%203.7%2012.4%203.7%2012.2%203.7%2012%203.8%2011.9%203.9%2011.7%204%2011.6%204.1%2011.5%204.2%2011.3%204.3%2011.2%204.5%2011.2%204.6%2011.1%204.8%2011.1%205%2011%205.1%2011%205.3%2011.1%205.5%2011.1%205.6%2011.2%205.8%2011.2%205.9%2011.3%206.1%2011.4%206.1%2011.4%20Z'/%3E%3C/svg%3E");
  --wc-mark-dot: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.1,12L17.1,13.3L16.8,14.5L16.1,15.6L15.1,16.5L14,17.2L12.7,17.5L11.3,17.4L10.1,16.9L9.1,16.2L8.2,15.3L7.5,14.3L7,13.2L6.8,12L7,10.8L7.5,9.7L8.3,8.7L9.2,8L10.3,7.4L11.4,7L12.6,6.8L13.9,7L15.1,7.6L16.1,8.4L16.9,9.4L17.4,10.7Z'/%3E%3C/svg%3E");
}

/* ---- The four themes (mirror the portfolio's weather modes) ----
   Default :root = WALK (warm gold, light paper surfaces).
   .wc-rain / .wc-fire keep light paper surfaces, swap the accent.
   .wc-forest (Dark Forest / night) uses dark surfaces. */

/* — RAIN (cool teal, light surfaces) — mid-tone accent → white text (deepened for ADA 4.5:1) */
.wc-rain {
  --wc-primary:       #2F7E8C;
  --wc-primary-strong:#21606C;
  --wc-primary-ink:   #123C44;
  --wc-on-primary:    #FFFFFF;
  --wc-line:          #C7D4D2;
  --wc-info:          #3F7CAC;
  --wc-tip:           #3E8E7E;
}
/* — FIRE (warm ember, light surfaces) — mid-tone accent → white text (deepened for ADA 4.5:1) */
.wc-fire {
  --wc-primary:       #BB511F;
  --wc-primary-strong:#A0391A;
  --wc-primary-ink:   #6E2410;
  --wc-on-primary:    #FFFFFF;
  --wc-line:          #E6C9AE;
  --wc-warning:       #D9852B;
}
/* — DARK FOREST (night, dark surfaces) — */
.wc-forest {
  --wc-paper:        #0F1821;
  --wc-paper-2:      #16222E;
  --wc-ink:          #E6ECF1;
  --wc-ink-soft:     #9FB0BE;
  --wc-line:         rgba(255,206,99,.28);
  --wc-primary:      #FFCE63;
  --wc-primary-strong:#E8A45C;
  --wc-primary-ink:  #FFE7AE;
  --wc-on-primary:   #1B130A;
  --wc-info:         #6FA8D6;
  --wc-tip:          #5FC0A6;
  --wc-shadow-1: 0 2px 10px rgba(0,0,0,.4);
  --wc-shadow-2: 0 10px 30px rgba(0,0,0,.5);
  --wc-shadow-3: 0 20px 54px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
.wc, .wc * { box-sizing: border-box; }
.wc {
  font-family: var(--wc-font-sans);
  color: var(--wc-ink);
  background: var(--wc-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wc h1,.wc h2,.wc h3,.wc h4 { font-family: var(--wc-font-serif); line-height: 1.2; margin: 0; }

/* ------------------------------------------------------------
   3. HAND-DRAWN ENGINE
   .wc-sketch draws a wobbly ink border on a filtered ::before so
   the element's text stays perfectly crisp. Radius is inherited.
   ------------------------------------------------------------ */
.wc-sketch { position: relative; }
.wc-sketch::before {
  content: ""; position: absolute; inset: 0;
  border: var(--wc-border-w) solid var(--wc-line);
  border-radius: inherit;
  filter: var(--wc-sketch);
  pointer-events: none;
  z-index: 0;
}
.wc-sketch > * { position: relative; z-index: 1; }
/* paper texture utility */
.wc-paper-tex { position: relative; isolation: isolate; }
.wc-paper-tex::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--wc-grain); background-size: 140px;
  mix-blend-mode: multiply; opacity: .06; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .wc-sketch::before { transition: border-color var(--wc-dur) var(--wc-ease); }
}

/* — Icon — 287 felt-pen icons: re-inked at build time into filled, variable-width
   marker strokes (see scripts/build-icons.mjs), so no runtime filter is needed.
   Usage: <svg class="wc-icon"><use href="icons/sprite.svg#wc-i-home"/></svg>
   Inherits currentColor; size with font-size or width/height. */
.wc-icon {
  width: 1.5em; height: 1.5em; flex: 0 0 auto; display: inline-block; vertical-align: -0.18em;
  fill: currentColor; stroke: none;
}
.wc-icon--sm { width: 1.15em; height: 1.15em; }
.wc-icon--lg { width: 2em; height: 2em; }
/* Icons that sit inside controls track the text size and hug the label */
.wc-btn .wc-icon, .wc-list-ic .wc-icon, .wc-bottomnav__item .ic .wc-icon,
.wc-menu__item .wc-icon, .wc-breadcrumb .wc-icon, .wc-chip .wc-icon { width: 1.15em; height: 1.15em; }
.wc-btn--icon .wc-icon { width: 1.3em; height: 1.3em; }

/* ------------------------------------------------------------
   4. COMPONENTS
   ------------------------------------------------------------ */

/* — Button — painted look: organic asymmetric radius (jagged watercolor edge),
   gradient fill, offset paper-cutout shadow + colored glow, hand-lettered label,
   and a wobbly ink stroke on a filtered ::before. */
.wc-btn {
  --_bg: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-strong));
  --_fg: var(--wc-on-primary); --_ink: transparent;
  --_glow: color-mix(in srgb, var(--wc-primary) 45%, transparent);
  --_drop: rgba(0,0,0,.18);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wc-2); font-family: var(--wc-font-hand); font-size: var(--wc-text-lg);
  font-weight: 700; letter-spacing: .01em; line-height: 1; text-decoration: none;
  padding: var(--wc-3) var(--wc-5); border: none;
  border-radius: 14px 96px 16px 88px / 88px 16px 96px 14px;   /* organic, painterly */
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  box-shadow: 4px 5px 0 var(--_drop), 0 10px 26px var(--_glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--wc-dur) var(--wc-spring), filter var(--wc-dur) var(--wc-ease), box-shadow var(--wc-dur) var(--wc-ease);
}
.wc-btn::before {          /* wobbly ink stroke, follows the organic shape */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--wc-border-w) solid var(--_ink); filter: var(--wc-sketch); pointer-events: none;
}
.wc-btn:hover  { transform: translateY(-2px) rotate(-.5deg); filter: brightness(1.05);
  box-shadow: 5px 7px 0 var(--_drop), 0 16px 34px var(--_glow), inset 0 1px 0 rgba(255,255,255,.4); }
.wc-btn:active { transform: translateY(1px) scale(.99); box-shadow: 2px 3px 0 var(--_drop), 0 6px 16px var(--_glow); }
.wc-btn:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 3px; }
.wc-btn[disabled], .wc-btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: 4px 5px 0 rgba(0,0,0,.1); }

.wc-btn--secondary { --_bg: var(--wc-paper); --_fg: var(--wc-ink); --_ink: var(--wc-line); --_glow: transparent; --_drop: rgba(0,0,0,.14); }
.wc-btn--ghost     { --_bg: transparent; --_fg: var(--wc-ink); --_ink: transparent; --_glow: transparent; box-shadow: none; }
.wc-btn--ghost:hover { background: color-mix(in srgb, var(--wc-primary) 14%, transparent); box-shadow: none; }
.wc-btn--outline   { --_bg: transparent; --_fg: var(--wc-primary-ink); --_ink: var(--wc-primary-strong); --_glow: transparent; --_drop: rgba(0,0,0,.12); }
.wc-btn--danger    { --_bg: linear-gradient(135deg, color-mix(in srgb, var(--wc-critical) 72%, #fff), var(--wc-critical)); --_fg: #fff; --_glow: color-mix(in srgb, var(--wc-critical) 42%, transparent); }
.wc-btn--sm { font-size: var(--wc-text-md); padding: var(--wc-2) var(--wc-4); border-radius: 10px 60px 12px 54px / 54px 12px 60px 10px; }
.wc-btn--lg { font-size: var(--wc-text-xl); padding: var(--wc-4) var(--wc-6); border-radius: 18px 130px 20px 120px / 120px 20px 130px 18px; }
.wc-btn--icon { padding: var(--wc-3); border-radius: 40% 55% 45% 52% / 52% 45% 55% 40%; box-shadow: 3px 4px 0 var(--_drop), 0 8px 20px var(--_glow); }

/* — Card — */
.wc-card {
  position: relative; background: var(--wc-paper); border-radius: var(--wc-r-lg);
  box-shadow: var(--wc-shadow-2); padding: var(--wc-5); color: var(--wc-ink);
}
.wc-card.wc-sketch::before { border-color: var(--wc-line); }
.wc-card__title { font-family: var(--wc-font-serif); font-size: var(--wc-text-xl); margin-bottom: var(--wc-2); }
.wc-card__body  { color: var(--wc-ink-soft); }
.wc-card__foot  { margin-top: var(--wc-4); display: flex; gap: var(--wc-2); }

/* — Form fields — */
.wc-field { display: flex; flex-direction: column; gap: var(--wc-1); }
.wc-label { font-family: var(--wc-font-hand); font-size: var(--wc-text-lg); font-weight: 600; color: var(--wc-ink); }
.wc-label .wc-req { color: var(--wc-critical); }
.wc-input, .wc-textarea, .wc-select {
  position: relative; width: 100%; font-family: var(--wc-font-sans); font-size: var(--wc-text-md);
  color: var(--wc-ink); background: var(--wc-paper); border: var(--wc-border-w) solid var(--wc-line);
  /* organic hand-drawn radius — same painterly language as the buttons */
  border-radius: 180px 12px 175px 12px / 12px 170px 12px 180px;
  padding: var(--wc-3) var(--wc-4); outline: none;
  transition: border-color var(--wc-dur) var(--wc-ease), box-shadow var(--wc-dur) var(--wc-ease);
}
.wc-textarea { border-radius: 40px 12px 44px 12px / 12px 40px 12px 44px; }
.wc-select   { border-radius: 180px 12px 175px 12px / 12px 170px 12px 180px;
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B665D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 17px; }
.wc-forest .wc-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB0BE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.wc-input::placeholder, .wc-textarea::placeholder { color: var(--wc-ink-soft); opacity: .7; }
.wc-input:focus, .wc-textarea:focus, .wc-select:focus {
  border-color: var(--wc-primary-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-primary) 30%, transparent);
}
.wc-textarea { min-height: 96px; resize: vertical; }
.wc-input.is-invalid, .wc-textarea.is-invalid { border-color: var(--wc-critical); }
.wc-hint  { font-size: var(--wc-text-sm); color: var(--wc-ink-soft); }
.wc-error { font-size: var(--wc-text-sm); color: var(--wc-critical); }

/* — Checkbox / Radio — */
.wc-check { display: inline-flex; align-items: center; gap: var(--wc-2); cursor: pointer; font-size: var(--wc-text-md); }
.wc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.wc-check__box {
  width: 23px; height: 23px; flex: 0 0 auto; border: var(--wc-border-w) solid var(--wc-line);
  border-radius: 9px 5px 8px 6px; display: grid; place-items: center; background: var(--wc-paper);   /* organic, hand-drawn */
  transition: background var(--wc-dur) var(--wc-ease), border-color var(--wc-dur) var(--wc-ease);
}
.wc-check--radio .wc-check__box { border-radius: 54% 46% 52% 48% / 48% 52% 46% 54%; --_mark: var(--wc-mark-dot); }
.wc-check__box svg { display: none; }   /* legacy inline mark — the felt-pen mark now comes from ::after */
.wc-check__box::after {
  content: ""; width: 15px; height: 15px; background: var(--wc-on-primary);
  -webkit-mask: var(--_mark, var(--wc-mark-check)) center / contain no-repeat;
          mask: var(--_mark, var(--wc-mark-check)) center / contain no-repeat;
  opacity: 0; transform: scale(.35) rotate(-8deg); transition: opacity var(--wc-dur) var(--wc-ease), transform var(--wc-dur) var(--wc-spring);
}
.wc-check--radio .wc-check__box::after { width: 14px; height: 14px; }
.wc-check input:checked + .wc-check__box { background: var(--wc-primary); border-color: var(--wc-primary-strong); }
.wc-check input:checked + .wc-check__box::after { opacity: 1; transform: scale(1) rotate(-4deg); }
.wc-check input:focus-visible + .wc-check__box { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }

/* — Switch — */
.wc-switch { display: inline-flex; align-items: center; gap: var(--wc-2); cursor: pointer; }
.wc-switch input { position: absolute; opacity: 0; }
.wc-switch__track {
  width: 46px; height: 26px; border-radius: 15px 13px 16px 13px / 13px 14px 13px 15px;   /* organic, hand-drawn */
  background: var(--wc-paper-2); position: relative; transition: background var(--wc-dur) var(--wc-ease);
}
.wc-switch__track::before { content: ""; position: absolute; inset: 0; border: var(--wc-border-w) solid var(--wc-line);
  border-radius: inherit; filter: var(--wc-sketch); pointer-events: none; }
.wc-switch__track::after {
  content: ""; position: absolute; top: 5.5px; left: 4px; width: 15px; height: 15px;
  border-radius: 60% 40% 56% 44% / 44% 62% 38% 56%;   /* smaller, hand-drawn pebble thumb */
  background: var(--wc-ink-soft); filter: var(--wc-sketch);
  transition: transform var(--wc-dur) var(--wc-spring), background var(--wc-dur) var(--wc-ease);
}
.wc-switch input:checked + .wc-switch__track { background: color-mix(in srgb, var(--wc-primary) 40%, var(--wc-paper)); }
.wc-switch input:checked + .wc-switch__track::after { transform: translateX(23px); background: var(--wc-primary); }
.wc-switch input:focus-visible + .wc-switch__track { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }

/* — Badge & Chip — */
.wc-badge {
  display: inline-flex; align-items: center; gap: var(--wc-1); font-family: var(--wc-font-hand);
  font-size: var(--wc-text-md); font-weight: 700; letter-spacing: 0; line-height: 1.1;
  padding: 1px 13px; border-radius: 12px 6px 11px 7px / 7px 11px 6px 12px;   /* organic, hand-drawn */
  background: color-mix(in srgb, var(--wc-primary) 22%, var(--wc-paper)); color: var(--wc-primary-ink);
}
.wc-forest .wc-badge { color: var(--wc-primary); }
.wc-chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--wc-2);
  font-family: var(--wc-font-hand); font-size: var(--wc-text-md); font-weight: 600;
  padding: 6px 14px; border-radius: var(--wc-r-pill); background: var(--wc-paper); color: var(--wc-ink);
}
.wc-chip.wc-sketch::before { border-color: var(--wc-line); }

/* — Alert / Callout (semantic) — */
.wc-alert {
  position: relative; display: flex; gap: var(--wc-3); padding: var(--wc-4);
  border-radius: var(--wc-r-md); background: var(--wc-paper);
  border: 1px solid color-mix(in srgb, var(--_c, var(--wc-info)) 42%, var(--wc-line)); box-shadow: var(--wc-shadow-1);
}
.wc-alert__title { font-family: var(--wc-font-serif); font-weight: 700; color: color-mix(in srgb, var(--_c) 55%, var(--wc-ink)); }
.wc-alert__body  { color: var(--wc-ink-soft); font-size: var(--wc-text-sm); }
.wc-alert--critical { --_c: var(--wc-critical); }
.wc-alert--warning  { --_c: var(--wc-warning); }
.wc-alert--caution  { --_c: var(--wc-caution); }
.wc-alert--info     { --_c: var(--wc-info); }
.wc-alert--tip      { --_c: var(--wc-tip); }

/* — Tooltip — */
.wc-tip-wrap { position: relative; display: inline-flex; }
.wc-tip-wrap > .wc-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--wc-ink); color: var(--wc-paper); font-size: var(--wc-text-sm);
  font-family: var(--wc-font-sans); padding: 6px 12px; border-radius: var(--wc-r-sm);
  white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--wc-dur) var(--wc-ease), transform var(--wc-dur) var(--wc-spring); box-shadow: var(--wc-shadow-2);
}
/* little speech-bubble tail pointing down at the trigger */
.wc-tip-wrap > .wc-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--wc-ink); border-bottom: 0;
}
.wc-forest .wc-tip-wrap > .wc-tip { background: var(--wc-paper-2); color: var(--wc-ink); border: 1px solid var(--wc-line); }
.wc-forest .wc-tip-wrap > .wc-tip::after { border-top-color: var(--wc-paper-2); }
.wc-tip-wrap:hover > .wc-tip, .wc-tip-wrap:focus-within > .wc-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* placements: bottom / left / right (default is top) */
.wc-tip-wrap > .wc-tip--bottom { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px); }
.wc-tip-wrap:hover > .wc-tip--bottom, .wc-tip-wrap:focus-within > .wc-tip--bottom { transform: translateX(-50%) translateY(0); }
.wc-tip-wrap > .wc-tip--bottom::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 7px solid var(--wc-ink); }
.wc-forest .wc-tip-wrap > .wc-tip--bottom::after { border-bottom-color: var(--wc-paper-2); }
.wc-tip-wrap > .wc-tip--left { bottom: auto; top: 50%; left: auto; right: calc(100% + 10px); transform: translateY(-50%) translateX(4px); }
.wc-tip-wrap:hover > .wc-tip--left, .wc-tip-wrap:focus-within > .wc-tip--left { transform: translateY(-50%) translateX(0); }
.wc-tip-wrap > .wc-tip--left::after { top: 50%; left: 100%; bottom: auto; transform: translateY(-50%); border: 7px solid transparent; border-left-color: var(--wc-ink); border-right: 0; }
.wc-forest .wc-tip-wrap > .wc-tip--left::after { border-left-color: var(--wc-paper-2); }
.wc-tip-wrap > .wc-tip--right { bottom: auto; top: 50%; left: calc(100% + 10px); transform: translateY(-50%) translateX(-4px); }
.wc-tip-wrap:hover > .wc-tip--right, .wc-tip-wrap:focus-within > .wc-tip--right { transform: translateY(-50%) translateX(0); }
.wc-tip-wrap > .wc-tip--right::after { top: 50%; left: auto; right: 100%; bottom: auto; transform: translateY(-50%); border: 7px solid transparent; border-right-color: var(--wc-ink); border-left: 0; }
.wc-forest .wc-tip-wrap > .wc-tip--right::after { border-right-color: var(--wc-paper-2); }

/* — Tabs / Segmented — */
.wc-tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--wc-r-pill); background: var(--wc-paper-2); box-shadow: var(--wc-shadow-1); }
.wc-forest .wc-tabs { background: rgba(20,31,43,.9); }
.wc-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wc-tabs::-webkit-scrollbar { display: none; }
.wc-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  font-family: var(--wc-font-hand); font-size: var(--wc-text-lg); font-weight: 700; color: var(--wc-ink-soft);
  padding: 8px 20px; border: none; background: transparent; border-radius: var(--wc-r-pill); cursor: pointer;
  transition: color var(--wc-dur) var(--wc-ease), background var(--wc-dur) var(--wc-ease);
}
.wc-tab .wc-icon, .wc-utab .wc-icon { width: 1.05em; height: 1.05em; }
/* Fill variant — tabs stretch to share the row equally */
.wc-tabs--fill { display: flex; }
.wc-tabs--fill .wc-tab { flex: 1; }
.wc-tab[aria-selected="true"], .wc-tab.is-active { color: var(--wc-on-primary); background: var(--wc-primary); }

/* — Avatar — */
.wc-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--wc-paper-2); display: inline-grid; place-items: center; box-shadow: var(--wc-shadow-1); }
.wc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wc-avatar--sm { width: 32px; height: 32px; }
.wc-avatar--lg { width: 64px; height: 64px; }
.wc-avatar-group { display: inline-flex; }
.wc-avatar-group .wc-avatar { margin-left: -12px; border: 2px solid var(--wc-paper); }
.wc-avatar-group .wc-avatar:first-child { margin-left: 0; }

/* — Presence / status avatar — a status dot sits over the avatar; online pulses green.
   <span class="wc-presence wc-presence--online"><span class="wc-avatar"><img…></span></span> */
.wc-presence { position: relative; display: inline-block; line-height: 0; }
.wc-presence__dot {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wc-ink-soft); box-shadow: 0 0 0 3px var(--wc-paper);
  display: grid; place-items: center;
}
.wc-presence__dot .wc-icon { position: relative; z-index: 1; width: 13px; height: 13px; color: #fff; }
.wc-presence--online  .wc-presence__dot { background: var(--wc-tip); }
.wc-presence--away    .wc-presence__dot { background: var(--wc-warning); }
.wc-presence--busy    .wc-presence__dot { background: var(--wc-critical); }
.wc-presence--meeting .wc-presence__dot { background: var(--wc-info); }
.wc-presence--offline .wc-presence__dot { background: var(--wc-ink-soft); }
/* pulsing ring — only when the user is present (online) */
.wc-presence--online .wc-presence__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wc-tip);
  animation: wc-presence-pulse 1.8s var(--wc-ease) infinite;
}
@keyframes wc-presence-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wc-presence--online .wc-presence__dot::after { animation: none; } }

/* — Calendar / date picker — (rendered by WC.init) */
.wc-calendar { position: relative; display: inline-block; width: 288px; background: var(--wc-paper);
  border-radius: 20px 14px 24px 13px / 13px 24px 14px 20px;   /* organic, hand-drawn edge */
  box-shadow: var(--wc-shadow-1); padding: 14px; font-family: var(--wc-font-sans); }
.wc-calendar::before { content: ""; position: absolute; inset: 0; border: var(--wc-border-w) solid var(--wc-line);
  border-radius: inherit; filter: var(--wc-sketch); pointer-events: none; z-index: 0; }
.wc-calendar > * { position: relative; z-index: 1; }
.wc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wc-cal__title { font-family: var(--wc-font-serif); font-weight: 700; font-size: var(--wc-text-lg); color: var(--wc-ink); }
.wc-cal__nav { width: 32px; height: 32px; display: grid; place-items: center; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: var(--wc-ink-soft); }
.wc-cal__nav:hover { background: color-mix(in srgb, var(--wc-primary) 16%, transparent); color: var(--wc-ink); }
.wc-cal__nav:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }
.wc-cal__nav svg { width: 18px; height: 18px; }
.wc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wc-cal__dow { margin-bottom: 4px; }
.wc-cal__dow span { text-align: center; font-size: .68rem; font-weight: 700; color: var(--wc-ink-soft); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.wc-cal__day { aspect-ratio: 1; border: none; background: transparent; cursor: pointer; font-family: var(--wc-font-sans); font-size: .86rem; color: var(--wc-ink);
  display: grid; place-items: center; border-radius: 52% 46% 50% 48% / 48% 52% 46% 52%; transition: background var(--wc-dur-fast), color var(--wc-dur-fast); }
.wc-cal__day:hover { background: color-mix(in srgb, var(--wc-primary) 22%, transparent); }
.wc-cal__day.is-muted { color: var(--wc-ink-soft); }
.wc-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--wc-primary-strong); }
.wc-cal__day.is-selected { background: var(--wc-primary); color: var(--wc-on-primary); }
.wc-cal__day:disabled { opacity: .3; cursor: not-allowed; }
.wc-cal__day:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 1px; }

/* — Date field / Time field — an input with a popover picker (WC.init) */
.wc-datefield, .wc-timefield { position: relative; display: inline-flex; align-items: center; }
.wc-datefield > .wc-input, .wc-timefield > .wc-input { padding-right: 40px; min-width: 190px; }
.wc-datefield__btn, .wc-timefield__btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; color: var(--wc-primary-strong); border-radius: 8px; }
.wc-datefield__btn:hover, .wc-timefield__btn:hover { background: color-mix(in srgb, var(--wc-primary) 16%, transparent); }
.wc-datefield__btn:focus-visible, .wc-timefield__btn:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }
.wc-datefield__btn svg, .wc-timefield__btn svg { width: 17px; height: 17px; }
.wc-datefield__pop, .wc-timefield__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: none; }
.wc-datefield.is-open .wc-datefield__pop, .wc-timefield.is-open .wc-timefield__pop { display: block; animation: wc-toast-in var(--wc-dur) var(--wc-spring); }
/* Time menu — scrollable list of slots */
.wc-time-menu { width: 150px; max-height: 240px; overflow-y: auto; background: var(--wc-paper); border: var(--wc-border-w) solid var(--wc-line);
  border-radius: 16px; box-shadow: var(--wc-shadow-2); padding: 6px; }
.wc-time-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  font-family: var(--wc-font-sans); font-size: .875rem; color: var(--wc-ink); padding: 7px 12px; border-radius: 10px; }
.wc-time-menu button:hover { background: color-mix(in srgb, var(--wc-primary) 18%, transparent); }
.wc-time-menu button.is-selected { background: var(--wc-primary); color: var(--wc-on-primary); }
.wc-time-menu button:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: -2px; }

/* — Progress & Spinner — */
.wc-progress { width: 100%; height: 12px; border-radius: var(--wc-r-pill); background: var(--wc-paper-2); overflow: hidden; border: var(--wc-border-w) solid var(--wc-line); }
.wc-progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wc-primary), var(--wc-primary-strong)); transition: width var(--wc-dur-slow) var(--wc-ease); }
.wc-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--wc-line); border-top-color: var(--wc-primary); animation: wc-spin .8s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wc-spinner { animation-duration: 2s; } }

/* — Divider — */
.wc-divider { height: 0; border: none; border-top: var(--wc-border-w) solid var(--wc-line); filter: var(--wc-sketch); margin: var(--wc-5) 0; }

/* ============================================================
   5. COMPONENTS — batch 2
   ============================================================ */

/* — Modal / Dialog (native <dialog>) — */
.wc-modal { border: none; border-radius: var(--wc-r-lg); padding: 0; max-width: 460px; width: calc(100% - 32px);
  background: var(--wc-paper); color: var(--wc-ink); box-shadow: var(--wc-shadow-3); overflow: visible; }
.wc-modal::backdrop { background: rgba(20,14,6,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wc-modal__inner { padding: var(--wc-5); }
.wc-modal__title { font-family: var(--wc-font-serif); font-size: var(--wc-text-2xl); margin-bottom: var(--wc-2); }
.wc-modal__body { color: var(--wc-ink-soft); }
.wc-modal__foot { margin-top: var(--wc-5); display: flex; gap: var(--wc-2); justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .wc-modal[open] { animation: wc-pop var(--wc-dur) var(--wc-spring); }
  @keyframes wc-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } }
}

/* — Dropdown menu (CSS-only via <details>) — */
.wc-menu { position: relative; display: inline-block; }
.wc-menu > summary { list-style: none; cursor: pointer; }
.wc-menu > summary::-webkit-details-marker { display: none; }
.wc-menu__list { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; z-index: 30;
  background: var(--wc-paper); border-radius: var(--wc-r-md); box-shadow: var(--wc-shadow-2);
  border: var(--wc-border-w) solid var(--wc-line); padding: 6px; }
.wc-menu__item { display: flex; align-items: center; gap: var(--wc-2); width: 100%; text-align: left;
  font-family: var(--wc-font-sans); font-size: var(--wc-text-md); color: var(--wc-ink); background: none; border: none;
  padding: 9px 12px; border-radius: var(--wc-r-sm); cursor: pointer; }
.wc-menu__item:hover { background: color-mix(in srgb, var(--wc-primary) 16%, transparent); }
.wc-menu__sep { height: 1px; background: var(--wc-line); margin: 4px 6px; }

/* — Accordion (CSS-only via <details>) — */
.wc-accordion { border-radius: var(--wc-r-md); overflow: hidden; box-shadow: var(--wc-shadow-1); background: var(--wc-paper); }
.wc-accordion__item { border-bottom: 1px solid var(--wc-line); }
.wc-accordion__item:last-child { border-bottom: none; }
.wc-accordion__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: var(--wc-4); font-family: var(--wc-font-serif); font-weight: 600; font-size: var(--wc-text-lg); }
.wc-accordion__item > summary::-webkit-details-marker { display: none; }
.wc-accordion__item > summary::after { content: "＋"; color: var(--wc-primary-strong); font-family: var(--wc-font-sans); transition: transform var(--wc-dur) var(--wc-spring); }
.wc-accordion__item[open] > summary::after { content: "－"; }
.wc-accordion__body { padding: 0 var(--wc-4) var(--wc-4); color: var(--wc-ink-soft); }

/* — Tabs (underline) — */
.wc-utabs { display: flex; gap: var(--wc-5); border-bottom: var(--wc-border-w) solid var(--wc-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wc-utabs::-webkit-scrollbar { display: none; }
.wc-utab { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--wc-font-sans); font-weight: 600; font-size: var(--wc-text-md);
  color: var(--wc-ink-soft); background: none; border: none; padding: 0 0 12px; cursor: pointer; transition: color var(--wc-dur) var(--wc-ease); }
.wc-utab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px;
  background: var(--wc-primary); filter: var(--wc-sketch); transform: scaleX(0); transition: transform var(--wc-dur) var(--wc-spring); }
.wc-utab[aria-selected="true"], .wc-utab.is-active { color: var(--wc-ink); }
.wc-utab[aria-selected="true"]::after, .wc-utab.is-active::after { transform: scaleX(1); }
/* Vertical variant — a left rail of underline tabs (indicator moves to the left edge) */
.wc-utabs--vertical { flex-direction: column; gap: 2px; border-bottom: none; border-left: var(--wc-border-w) solid var(--wc-line); overflow-x: visible; }
.wc-utabs--vertical .wc-utab { padding: 9px 16px; text-align: left; justify-content: flex-start; }
.wc-utabs--vertical .wc-utab::after { left: -2px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); }
.wc-utabs--vertical .wc-utab[aria-selected="true"]::after, .wc-utabs--vertical .wc-utab.is-active::after { transform: scaleY(1); }

/* — Table — */
.wc-table { width: 100%; border-collapse: collapse; font-size: var(--wc-text-md); background: var(--wc-paper);
  border-radius: var(--wc-r-md); overflow: hidden; box-shadow: var(--wc-shadow-1); }
.wc-table th, .wc-table td { text-align: left; padding: var(--wc-3) var(--wc-4); border-bottom: 1px solid var(--wc-line); }
.wc-table thead th { font-family: var(--wc-font-hand); font-size: var(--wc-text-lg); color: var(--wc-primary-ink); background: var(--wc-paper-2); }
.wc-forest .wc-table thead th { color: var(--wc-primary); }
.wc-table tbody tr:last-child td { border-bottom: none; }
.wc-table tbody tr:hover { background: color-mix(in srgb, var(--wc-primary) 8%, transparent); }

/* — Data Grid — sortable / filterable / paginated / selectable (WC.init) — */
.wc-datagrid { width: 100%; }
/* Tables/grids scroll horizontally on narrow screens instead of overflowing the page */
.wc-datagrid-wrap, .wc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.wc-datagrid-wrap .wc-table, .wc-table-scroll .wc-table { min-width: 420px; }
.wc-datagrid thead th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.wc-datagrid thead th.is-sortable::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px;
  background: currentColor; opacity: .4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4'/%3E%3Cpath d='M8 14l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4'/%3E%3Cpath d='M8 14l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat; }
.wc-datagrid thead th[aria-sort="ascending"]::after { opacity: .95;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
.wc-datagrid thead th[aria-sort="descending"]::after { opacity: .95;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.wc-datagrid tbody tr.is-selected { background: color-mix(in srgb, var(--wc-primary) 16%, transparent); }
.wc-datagrid__sel { width: 44px; text-align: center; }
/* Felt-pen checkboxes in the grid (match .wc-check) */
.wc-datagrid__sel input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; cursor: pointer; vertical-align: middle;
  border: var(--wc-border-w) solid var(--wc-line); border-radius: 8px 5px 7px 6px; background: var(--wc-paper);
  display: inline-grid; place-items: center; transition: background var(--wc-dur), border-color var(--wc-dur); }
.wc-datagrid__sel input[type="checkbox"]::after {
  content: ""; width: 12px; height: 12px; background: var(--wc-on-primary); opacity: 0; transform: scale(.4);
  -webkit-mask: var(--wc-mark-check) center/contain no-repeat; mask: var(--wc-mark-check) center/contain no-repeat;
  transition: opacity var(--wc-dur), transform var(--wc-dur) var(--wc-spring); }
.wc-datagrid__sel input[type="checkbox"]:checked { background: var(--wc-primary); border-color: var(--wc-primary-strong); }
.wc-datagrid__sel input[type="checkbox"]:checked::after { opacity: 1; transform: scale(1); }
.wc-datagrid__sel input[type="checkbox"]:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }
.wc-datagrid__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wc-datagrid__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; font-family: var(--wc-font-sans); font-size: var(--wc-text-sm); color: var(--wc-ink-soft); }
.wc-datagrid__pager button { display: grid; place-items: center; width: 34px; height: 34px; border: var(--wc-border-w) solid var(--wc-line);
  background: var(--wc-paper); border-radius: 11px 7px 10px 8px / 8px 10px 7px 11px; cursor: pointer; color: var(--wc-ink); }
.wc-datagrid__pager button:hover:not(:disabled) { border-color: var(--wc-primary-strong); }
.wc-datagrid__pager button:disabled { opacity: .4; cursor: not-allowed; }
.wc-datagrid__pager button:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }
.wc-datagrid__empty { padding: var(--wc-5); text-align: center; color: var(--wc-ink-soft); font-family: var(--wc-font-sans); }

/* — Charts — themed SVG (bar / line / pie / donut / sparkline), rendered by WC.init */
.wc-chart { display: inline-block; width: 100%; max-width: 360px; }
.wc-chart__svg { width: 100%; height: auto; overflow: visible; }
.wc-chart__svg--spark { max-width: 170px; }
.wc-chart__bar { fill: var(--wc-primary); filter: var(--wc-sketch); }
.wc-chart__axis { stroke: var(--wc-line); stroke-width: 2; }
.wc-chart__lbl { fill: var(--wc-ink-soft); font-family: var(--wc-font-sans); font-size: 11px; }
.wc-chart__line { fill: none; stroke: var(--wc-primary-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: var(--wc-sketch); }
.wc-chart__area { fill: var(--wc-primary); opacity: .22; stroke: none; }
.wc-forest .wc-chart__area { opacity: .3; }   /* dark: keep the wash warm, not muddy */
.wc-chart__dot { fill: var(--wc-primary-strong); stroke: var(--wc-paper); stroke-width: 2; }
/* radar / spider — painterly fill + hand-drawn outline, echoing the portfolio skill-radar */
.wc-radar__ring { fill: none; stroke: var(--wc-line); stroke-width: 1.1; opacity: .55; }
.wc-radar__spoke { stroke: var(--wc-line); stroke-width: 1.1; opacity: .45; }
.wc-radar__area { fill-opacity: .40; filter: var(--wc-sketch) drop-shadow(0 6px 14px color-mix(in srgb, var(--wc-primary-strong) 32%, transparent)); }
.wc-radar__outline { fill: none; stroke: var(--wc-primary-strong); stroke-width: 2.4; stroke-linejoin: round; filter: var(--wc-sketch); }
.wc-radar__dot { fill: var(--wc-paper); stroke: var(--wc-primary-strong); stroke-width: 1.8; }
.wc-radar__lbl { font-size: 9.5px; fill: var(--wc-ink); font-weight: 600; }

/* — Skeleton — */
.wc-skel { background: linear-gradient(90deg, var(--wc-paper-2) 25%, color-mix(in srgb, var(--wc-line) 40%, var(--wc-paper-2)) 37%, var(--wc-paper-2) 63%);
  background-size: 400% 100%; border-radius: var(--wc-r-sm); animation: wc-shimmer 1.4s ease infinite; }
.wc-skel--text { height: .8em; margin: .35em 0; } .wc-skel--title { height: 1.4em; width: 55%; } .wc-skel--avatar { width: 44px; height: 44px; border-radius: 50%; }
@keyframes wc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wc-skel { animation: none; } }

/* — Toast / Snackbar — */
.wc-toast-region { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.wc-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--wc-3);
  background: color-mix(in srgb, var(--wc-ink) 80%, transparent); color: var(--wc-paper);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  padding: 12px 18px; border-radius: var(--wc-r-md); font-size: var(--wc-text-md);
  border: 1px solid color-mix(in srgb, var(--_c, var(--wc-primary)) 38%, transparent);
  border-left: 4px solid var(--_c, var(--wc-primary));
  box-shadow: var(--wc-shadow-2); animation: wc-toast-in var(--wc-dur) var(--wc-spring); }
.wc-forest .wc-toast { background: color-mix(in srgb, var(--wc-paper-2) 68%, transparent); color: var(--wc-ink); }
.wc-toast.is-out { animation: wc-toast-out var(--wc-dur) var(--wc-ease) forwards; }
.wc-toast__msg { flex: 1; }
.wc-toast__action { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--_c, var(--wc-primary));
  font-family: var(--wc-font-hand); font-size: 1.05rem; font-weight: 700; padding: 2px 8px; border-radius: 9px; }
.wc-toast__action:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.wc-toast__action:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* Semantic level just tints the border via --_c (set by class or the JS API) */
.wc-toast--critical { --_c: var(--wc-critical); }
.wc-toast--warning  { --_c: var(--wc-warning); }
.wc-toast--caution  { --_c: var(--wc-caution); }
.wc-toast--info     { --_c: var(--wc-info); }
.wc-toast--tip      { --_c: var(--wc-tip); }
@keyframes wc-toast-in { from { transform: translateY(16px); opacity: 0; } }
@keyframes wc-toast-out { to { transform: translateY(16px); opacity: 0; } }

/* — Pagination — */
.wc-pagination { display: inline-flex; gap: 6px; }
.wc-page { min-width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--wc-font-hand); font-size: var(--wc-text-lg);
  border: var(--wc-border-w) solid var(--wc-line); border-radius: var(--wc-r-sm); background: var(--wc-paper); color: var(--wc-ink); cursor: pointer;
  position: relative; }
.wc-page::after { content: ""; position: absolute; inset: -4px; }   /* 46px touch target, visual stays 38px */
.wc-page:hover { border-color: var(--wc-primary-strong); }
.wc-page[aria-current="page"], .wc-page.is-active { background: var(--wc-primary); color: var(--wc-on-primary); border-color: var(--wc-primary-strong); }

/* — Breadcrumbs — */
.wc-breadcrumb { display: flex; align-items: center; gap: var(--wc-2); font-size: var(--wc-text-sm); color: var(--wc-ink-soft); font-family: var(--wc-font-sans); }
.wc-breadcrumb a { color: var(--wc-ink-soft); text-decoration: none; }
.wc-breadcrumb a:hover { color: var(--wc-primary-strong); }
.wc-breadcrumb .sep { color: var(--wc-line); }
.wc-breadcrumb [aria-current="page"] { color: var(--wc-ink); font-weight: 600; }

/* — Slider (range) — */
.wc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 9px; border-radius: 9px 7px 8px 9px / 9px 8px 7px 9px;
  /* filled track: WC.init keeps --_fill in sync with the value (falls back to 50%) */
  background: linear-gradient(var(--wc-primary), var(--wc-primary)) 0 0 / var(--_fill, 50%) 100% no-repeat, var(--wc-paper-2);
  border: var(--wc-border-w) solid var(--wc-line); outline: none; }
.wc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; background: var(--wc-primary);
  border: var(--wc-border-w) solid var(--wc-primary-strong); box-shadow: var(--wc-shadow-1); cursor: pointer; transition: transform var(--wc-dur) var(--wc-spring); }
.wc-slider::-webkit-slider-thumb:active { transform: scale(1.15) rotate(8deg); }
.wc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; background: var(--wc-primary); border: var(--wc-border-w) solid var(--wc-primary-strong); cursor: pointer; }

/* — Search field — */
.wc-search { position: relative; display: flex; align-items: center; }
.wc-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--wc-ink-soft); fill: currentColor; stroke: none; pointer-events: none; z-index: 1; }
.wc-search .wc-input { padding-left: 42px; border-radius: 140px 22px 150px 22px / 22px 150px 22px 140px; }   /* organic, hand-drawn pill */

/* — Empty state — */
.wc-empty { text-align: center; padding: var(--wc-7) var(--wc-5); color: var(--wc-ink-soft); }
.wc-empty__art { font-size: 3rem; margin: 0 auto var(--wc-3); }
img.wc-empty__art { display: block; width: 92px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); }
.wc-empty__title { font-family: var(--wc-font-serif); font-size: var(--wc-text-xl); color: var(--wc-ink); margin-bottom: var(--wc-2); }

/* — Rating (stars) — */
.wc-rating { display: inline-flex; gap: 5px; color: var(--wc-primary); font-size: 1.6rem; line-height: 1; }
.wc-rating .star { color: var(--wc-line); display: inline-block; filter: var(--wc-sketch-icon); }   /* hand-drawn wobble */
.wc-rating .star.on { color: var(--wc-primary); }
.wc-rating .star:nth-child(odd) { transform: rotate(-5deg); }
.wc-rating .star:nth-child(even) { transform: rotate(4deg); }

/* — Tag (removable) — */
.wc-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wc-font-sans); font-size: var(--wc-text-sm); font-weight: 600;
  padding: 4px 6px 4px 12px; border-radius: var(--wc-r-pill); background: color-mix(in srgb, var(--wc-primary) 18%, var(--wc-paper)); color: var(--wc-primary-ink); }
.wc-forest .wc-tag { color: var(--wc-primary); background: rgba(255,206,99,.14); }
.wc-tag__x { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.08); color: inherit; font-size: 12px; line-height: 1; }
.wc-forest .wc-tag__x { background: rgba(255,255,255,.12); }

/* ============================================================
   5b. COMPONENTS — batch 3 (MUI-parity)
   ============================================================ */

/* — Button group — */
.wc-btn-group { display: inline-flex; }
.wc-btn-group .wc-btn { border-radius: 0; box-shadow: 4px 5px 0 var(--_drop, rgba(0,0,0,.16)); }
.wc-btn-group .wc-btn:first-child { border-radius: 12px 6px 0 40px / 40px 0 6px 12px; }
.wc-btn-group .wc-btn:last-child  { border-radius: 6px 40px 12px 0 / 0 12px 40px 6px; }
.wc-btn-group .wc-btn:not(:last-child) { margin-right: -2px; }

/* — Toggle button group — */
.wc-toggle-group { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--wc-r-md); background: var(--wc-paper-2); box-shadow: var(--wc-shadow-1); }
.wc-toggle-btn { font-family: var(--wc-font-sans); font-weight: 600; font-size: var(--wc-text-md); color: var(--wc-ink-soft);
  background: none; border: none; padding: 8px 16px; border-radius: var(--wc-r-sm); cursor: pointer; transition: color var(--wc-dur), background var(--wc-dur); }
.wc-toggle-btn[aria-pressed="true"], .wc-toggle-btn.is-active { color: var(--wc-on-primary); background: var(--wc-primary); }
.wc-toggle-btn--icon { display: inline-grid; place-items: center; padding: 9px; width: 40px; height: 40px; }
.wc-toggle-btn--icon .wc-icon { width: 20px; height: 20px; }

/* — Floating action button — */
.wc-fab { position: relative; width: 60px; height: 60px; display: inline-grid; place-items: center; cursor: pointer;
  font-size: 1.6rem; color: var(--wc-on-primary); background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-strong));
  border: none; border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%;   /* organic blob */
  box-shadow: 4px 6px 0 rgba(0,0,0,.18), 0 12px 28px color-mix(in srgb, var(--wc-primary) 42%, transparent);
  transition: transform var(--wc-dur) var(--wc-spring), filter var(--wc-dur); }
.wc-fab:hover { transform: translateY(-2px) rotate(-3deg); filter: brightness(1.05); }
.wc-fab:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 3px; }

/* — List — */
.wc-list { list-style: none; margin: 0; padding: 6px; border-radius: var(--wc-r-md); background: var(--wc-paper); box-shadow: var(--wc-shadow-1); }
.wc-list-item { display: flex; align-items: center; gap: var(--wc-3); padding: 11px 14px; border-radius: var(--wc-r-sm); color: var(--wc-ink); cursor: pointer; transition: background var(--wc-dur); }
.wc-list-item:hover { background: color-mix(in srgb, var(--wc-primary) 12%, transparent); }
.wc-list-item[aria-selected="true"] { background: color-mix(in srgb, var(--wc-primary) 22%, transparent); font-weight: 600; }
.wc-list-item .wc-list-ic { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; color: var(--wc-primary-ink); }

/* — Stepper (horizontal) — */
.wc-stepper { display: flex; align-items: center; gap: 8px; }
.wc-step { display: inline-flex; align-items: center; gap: 8px; color: var(--wc-ink-soft); font-family: var(--wc-font-sans); font-size: var(--wc-text-sm); }
.wc-step__dot { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
  border: var(--wc-border-w) solid var(--wc-line); background: var(--wc-paper); font-family: var(--wc-font-hand); font-weight: 700; color: var(--wc-ink-soft); }
.wc-step.is-active .wc-step__dot, .wc-step.is-done .wc-step__dot { background: var(--wc-primary); border-color: var(--wc-primary-strong); color: var(--wc-on-primary); }
.wc-step.is-active { color: var(--wc-ink); font-weight: 600; }
.wc-step__bar { flex: 1; min-width: 24px; height: 3px; border-radius: 3px; background: var(--wc-line); filter: var(--wc-sketch); }

/* — App bar — */
.wc-appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--wc-4); padding: 12px 20px;
  background: color-mix(in srgb, var(--wc-paper) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--wc-r-md); box-shadow: var(--wc-shadow-1); }
.wc-appbar__brand { font-family: var(--wc-font-serif); font-weight: 700; font-size: var(--wc-text-lg); }

/* — Link — */
.wc-link { color: var(--wc-primary-ink); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; transition: border-color var(--wc-dur); }
.wc-link:hover { border-bottom-color: currentColor; }
.wc-forest .wc-link { color: var(--wc-primary); }

/* — Paper (plain elevated surface) — */
.wc-surface { background: var(--wc-paper); border-radius: var(--wc-r-md); box-shadow: var(--wc-shadow-1); padding: var(--wc-4); }
/* — Code block with copy button — */
.wc-code { position: relative; }
.wc-code-copy { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  color: var(--wc-primary-strong); background: var(--wc-paper); border: var(--wc-border-w) solid var(--wc-line);
  border-radius: 10px 7px 9px 8px / 8px 9px 7px 10px; transition: border-color var(--wc-dur); }
.wc-code-copy:hover { border-color: var(--wc-primary-strong); }
.wc-code-copy:focus-visible { outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }
.wc-code-copy .wc-icon { width: 16px; height: 16px; }

/* ============================================================
   6. GROWTH MODE 🌱  — themed foliage grows from behind an element on hover.
   Wrap any element: <span class="wc-grow" data-grow>…<button class="wc-btn">…</button></span>
   The optional JS (js/watercolor.js) injects a themed sprite set; or author the
   .wc-grow-item images by hand. Each theme has its own foliage (see registry / docs).
   ============================================================ */
.wc-grow { position: relative; display: inline-block; }
.wc-grow > .wc-grow-pop { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.wc-grow > :not(.wc-grow-pop) { position: relative; z-index: 1; }   /* the element sits above the foliage base */
.wc-grow-item {
  position: absolute; bottom: 6px; left: 50%; width: 84px;          /* --w override per item; anchored to the element's base */
  opacity: 0; transform: translate(-50%, 10%) scale(.28);           /* rest: tiny, tucked down behind the element */
  transform-origin: center bottom;
  transition: transform .6s var(--wc-spring), opacity .4s var(--wc-ease);
  transition-delay: .9s;                                            /* lazy retreat when un-hovered */
}
.wc-grow-item img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.wc-grow:hover .wc-grow-item,
.wc-grow:focus-within .wc-grow-item {
  opacity: 1; transform: translate(-50%, calc(-1 * var(--rise, 36%))) scale(1);   /* grow out: expand + rise from behind */
  transition-delay: var(--d, 0s);                                   /* eager, staggered rise */
}
@media (prefers-reduced-motion: reduce) {
  .wc-grow-item { transition: opacity .3s ease; }
  .wc-grow:hover .wc-grow-item, .wc-grow:focus-within .wc-grow-item { transform: translate(-50%, calc(-1 * var(--rise, 36%))) scale(1); }
}

/* ============================================================
   7. LAYOUT PRIMITIVES (MUI: Container, Stack, Grid, Image List, Masonry)
   ============================================================ */
.wc-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--wc-4); }
.wc-container--sm { max-width: 720px; } .wc-container--lg { max-width: 1320px; }
.wc-stack { display: flex; flex-direction: column; gap: var(--wc-4); }
.wc-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.wc-stack--1 { gap: var(--wc-1); } .wc-stack--2 { gap: var(--wc-2); } .wc-stack--3 { gap: var(--wc-3); }
.wc-stack--5 { gap: var(--wc-5); } .wc-stack--6 { gap: var(--wc-6); }
.wc-grid { display: grid; gap: var(--wc-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wc-grid--2 { grid-template-columns: repeat(2, 1fr); } .wc-grid--3 { grid-template-columns: repeat(3, 1fr); } .wc-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px){ .wc-grid--2,.wc-grid--3,.wc-grid--4 { grid-template-columns: 1fr; } }
.wc-imagelist { display: grid; gap: var(--wc-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.wc-imagelist img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wc-r-md); box-shadow: var(--wc-shadow-1); display: block; aspect-ratio: 1/1; }
.wc-masonry { column-width: 220px; column-gap: var(--wc-4); }
.wc-masonry > * { break-inside: avoid; margin-bottom: var(--wc-4); }

/* ============================================================
   8. TYPOGRAPHY UTILITIES (MUI: Typography)
   ============================================================ */
.wc-display { font-family: var(--wc-font-serif); font-size: var(--wc-text-4xl); line-height: 1.05; font-weight: 700; }
.wc-h1 { font-family: var(--wc-font-serif); font-size: var(--wc-text-3xl); line-height: 1.15; font-weight: 700; }
.wc-h2 { font-family: var(--wc-font-serif); font-size: var(--wc-text-2xl); line-height: 1.2; font-weight: 600; }
.wc-h3 { font-family: var(--wc-font-serif); font-size: var(--wc-text-xl); line-height: 1.25; font-weight: 600; }
.wc-body { font-family: var(--wc-font-sans); font-size: var(--wc-text-md); line-height: 1.6; }
.wc-body--sm { font-size: var(--wc-text-sm); }
.wc-caption { font-family: var(--wc-font-sans); font-size: var(--wc-text-xs); color: var(--wc-ink-soft); }
.wc-overline { font-family: var(--wc-font-sans); font-size: var(--wc-text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wc-ink-soft); }
.wc-hand { font-family: var(--wc-font-hand); font-size: var(--wc-text-xl); color: var(--wc-primary-strong); }
.wc-forest .wc-hand { color: var(--wc-primary); }

/* ============================================================
   9. FEEDBACK / SURFACES (MUI: Backdrop)
   ============================================================ */
.wc-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(20,14,6,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity var(--wc-dur) var(--wc-ease), visibility var(--wc-dur); }
.wc-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   10. NAVIGATION (MUI: Bottom Navigation, Drawer, Speed Dial, Menubar, Timeline)
   ============================================================ */
/* — Bottom navigation — */
.wc-bottomnav { display: flex; justify-content: space-around; align-items: stretch; gap: 4px; padding: 6px;
  background: color-mix(in srgb, var(--wc-paper) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 22px 30px 20px 34px / 34px 20px 30px 22px; box-shadow: var(--wc-shadow-2); }   /* organic */
.wc-bottomnav__item { flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--wc-font-sans); font-size: var(--wc-text-xs); font-weight: 600; color: var(--wc-ink-soft);
  background: none; border: none; border-radius: 13px 9px 12px 10px / 10px 12px 9px 13px; cursor: pointer; transition: color var(--wc-dur), background var(--wc-dur); }   /* organic */
.wc-bottomnav__item .ic { font-size: 1.3rem; line-height: 1; }
.wc-bottomnav__item[aria-current="page"], .wc-bottomnav__item.is-active { color: var(--wc-primary-ink); background: color-mix(in srgb, var(--wc-primary) 16%, transparent); }

/* — Drawer — */
.wc-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 9100; width: min(320px, 86vw);
  background: var(--wc-paper); box-shadow: var(--wc-shadow-3); padding: var(--wc-5);
  transform: translateX(-102%); transition: transform var(--wc-dur-slow) var(--wc-ease); overflow: auto; }
.wc-drawer--right { left: auto; right: 0; transform: translateX(102%); }
.wc-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce){ .wc-drawer { transition: none; } }

/* — Speed dial (expands the FAB) — */
.wc-speeddial { position: relative; display: inline-flex; }
/* actions are absolutely stacked ABOVE the FAB so the collapsed dial is only FAB-sized
   (otherwise the hidden actions reserve height and misalign it in a row) */
.wc-speeddial__actions { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wc-speeddial__action { width: 46px; height: 46px; display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--wc-paper); color: var(--wc-primary-ink); border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%;
  box-shadow: var(--wc-shadow-2); opacity: 0; transform: scale(.4) translateY(10px); pointer-events: none;
  transition: opacity var(--wc-dur), transform var(--wc-dur) var(--wc-spring); }
.wc-speeddial:hover .wc-speeddial__action, .wc-speeddial:focus-within .wc-speeddial__action, .wc-speeddial.is-open .wc-speeddial__action {
  opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

/* — Menubar (row of dropdown menus) — */
.wc-menubar { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px 20px 12px 22px / 22px 12px 20px 14px;
  background: color-mix(in srgb, var(--wc-paper) 90%, transparent); box-shadow: var(--wc-shadow-1); }   /* organic */
.wc-menubar .wc-menu > summary { padding: 7px 14px; border-radius: var(--wc-r-sm); font-family: var(--wc-font-sans); font-weight: 600; font-size: var(--wc-text-md); color: var(--wc-ink); }
.wc-menubar .wc-menu > summary:hover, .wc-menubar .wc-menu[open] > summary { background: color-mix(in srgb, var(--wc-primary) 15%, transparent); }

/* — Timeline — */
.wc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.wc-timeline__item { position: relative; padding: 0 0 var(--wc-5) var(--wc-6); }
.wc-timeline__item::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: -6px; width: 2px; background: var(--wc-line); filter: var(--wc-sketch); }
.wc-timeline__item:last-child::before { display: none; }
.wc-timeline__dot { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
  background: var(--wc-primary); border: var(--wc-border-w) solid var(--wc-primary-strong); box-shadow: var(--wc-shadow-1); }
.wc-timeline__time { font-family: var(--wc-font-hand); color: var(--wc-primary-ink); font-size: var(--wc-text-md); }
.wc-timeline__title { font-family: var(--wc-font-serif); font-weight: 600; }

/* ============================================================
   11. COMPLEX INPUTS & OVERLAYS (MUI: Number Field, Popover, Autocomplete, Transfer List)
   ============================================================ */
/* — Number field — */
.wc-numfield { display: inline-flex; align-items: stretch; }
.wc-numfield .wc-input { width: 80px; text-align: center; border-radius: 0; -moz-appearance: textfield; }
.wc-numfield .wc-input::-webkit-outer-spin-button, .wc-numfield .wc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wc-numfield__btn { width: 42px; flex: 0 0 auto; border: var(--wc-border-w) solid var(--wc-line); background: var(--wc-paper-2);
  color: var(--wc-ink); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.wc-numfield__btn:first-child { border-radius: 90px 6px 10px 90px / 90px 6px 10px 90px; border-right: none; }   /* organic outer cap */
.wc-numfield__btn:last-child { border-radius: 6px 90px 90px 10px / 6px 90px 90px 10px; border-left: none; }
.wc-numfield__btn:hover { background: color-mix(in srgb, var(--wc-primary) 16%, var(--wc-paper-2)); }
.wc-numfield__btn:active { background: color-mix(in srgb, var(--wc-primary) 26%, var(--wc-paper-2)); }
.wc-numfield__btn .wc-icon { width: 20px; height: 20px; filter: url(#wc-sketch); }
.wc-numfield__btn:first-child .wc-icon { transform: rotate(-4deg); }   /* hand-drawn tilt */
.wc-numfield__btn:last-child .wc-icon { transform: rotate(3deg); }
.wc-numfield__btn:active .wc-icon { transform: scale(.86); }

/* — Popover (native [popover]) — */
.wc-popover { margin: 0; border: var(--wc-border-w) solid var(--wc-line); border-radius: var(--wc-r-md);
  background: var(--wc-paper); color: var(--wc-ink); box-shadow: var(--wc-shadow-2); padding: var(--wc-4); max-width: 300px; }
.wc-popover::backdrop { background: transparent; }

/* — Autocomplete — */
.wc-autocomplete { position: relative; }
.wc-autocomplete__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--wc-ink-soft); fill: currentColor; stroke: none; pointer-events: none; z-index: 1; }
.wc-autocomplete:has(> .wc-autocomplete__ic) > .wc-input { padding-left: 42px; }
.wc-autocomplete__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; margin: 0; padding: 6px; list-style: none;
  background: var(--wc-paper); border-radius: var(--wc-r-md); box-shadow: var(--wc-shadow-2); border: var(--wc-border-w) solid var(--wc-line);
  max-height: 240px; overflow: auto; }
.wc-autocomplete__list[hidden] { display: none; }
.wc-autocomplete__opt { padding: 9px 12px; border-radius: var(--wc-r-sm); cursor: pointer; color: var(--wc-ink); }
.wc-autocomplete__opt:hover, .wc-autocomplete__opt[aria-selected="true"] { background: color-mix(in srgb, var(--wc-primary) 16%, transparent); }
.wc-autocomplete__opt mark { background: color-mix(in srgb, var(--wc-primary) 40%, transparent); color: inherit; border-radius: 3px; }

/* — Transfer list — */
.wc-transfer { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--wc-3); align-items: center; }
.wc-transfer__col { border: var(--wc-border-w) solid var(--wc-line); border-radius: var(--wc-r-md); background: var(--wc-paper); padding: 6px; min-height: 150px; }
.wc-transfer__col .wc-list-item { user-select: none; }
.wc-transfer__mid { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px){ .wc-transfer { grid-template-columns: 1fr; } .wc-transfer__mid { flex-direction: row; justify-content: center; } }

/* ============================================================
   12. A11Y — visible keyboard focus for every interactive component
   (buttons/fab already handle their own; this covers the rest)
   ============================================================ */
.wc-tab:focus-visible,
.wc-utab:focus-visible,
.wc-toggle-btn:focus-visible,
.wc-bottomnav__item:focus-visible,
.wc-list-item:focus-visible,
.wc-menu__item:focus-visible,
.wc-menu > summary:focus-visible,
.wc-page:focus-visible,
.wc-numfield__btn:focus-visible,
.wc-chip:focus-visible,
.wc-tag__x:focus-visible,
.wc-link:focus-visible,
.wc-slider:focus-visible {
  outline: 3px solid var(--wc-primary-strong);
  outline-offset: 2px;
}
/* text fields: a subtle wash ring instead of the heavy outline (they focus on every click) */
.wc-input:focus, .wc-select:focus, .wc-textarea:focus {
  outline: none;
  border-color: var(--wc-primary-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-primary) 22%, transparent);
}
.wc-list-item:focus-visible { border-radius: var(--wc-r-sm); }

/* ═══ §12 Content & advanced additions — kbd, labeled divider, callout, upload, OTP, tree, overlay badge ═══ */

/* — Kbd (pressed-key chip) — */
.wc-kbd { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: .78em; font-weight: 600;
  color: var(--wc-ink); background: var(--wc-paper); padding: 2px 8px 3px;
  border: var(--wc-border-w) solid var(--wc-line); border-radius: 7px 5px 8px 5px;
  box-shadow: 0 2px 0 var(--wc-line); vertical-align: middle; }

/* — Divider with a hand-lettered label — */
.wc-divider--label { display: flex; align-items: center; gap: 14px; border: none; margin: var(--wc-4) 0;
  font-family: var(--wc-font-hand); font-size: 1.05rem; font-weight: 700; color: var(--wc-ink-soft); }
.wc-divider--label::before, .wc-divider--label::after { content: ""; flex: 1; height: 1.5px; background: var(--wc-line); border-radius: 2px; }

/* — Callout / quote (felt left rule + hand-lettered attribution) — */
.wc-quote { position: relative; margin: 0; padding: 6px 4px 6px 20px; color: var(--wc-ink); }
.wc-quote::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  background: var(--wc-primary-strong); border-radius: 3px 2px 4px 2px; filter: var(--wc-sketch); }
.wc-quote__by { display: block; margin-top: 8px; font-family: var(--wc-font-hand); font-size: 1.05rem; color: var(--wc-primary-ink); }

/* — File upload / dropzone — */
.wc-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 22px; text-align: center; cursor: pointer; color: var(--wc-ink-soft);
  background: var(--wc-paper); border: 2px dashed var(--wc-line);
  border-radius: 22px 14px 24px 14px / 14px 24px 14px 22px;   /* organic */
  transition: border-color var(--wc-dur) var(--wc-ease), background var(--wc-dur) var(--wc-ease); }
.wc-upload:hover, .wc-upload.is-drag { border-color: var(--wc-primary-strong);
  background: color-mix(in srgb, var(--wc-primary) 8%, var(--wc-paper)); }
.wc-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wc-upload .wc-icon { width: 26px; height: 26px; color: var(--wc-primary-strong); }
.wc-upload strong { color: var(--wc-ink); font-family: var(--wc-font-hand); font-size: 1.15rem; font-weight: 700; }
.wc-upload small { font-size: .8rem; }

/* — OTP / verification code — */
.wc-otp { display: inline-flex; gap: 8px; }
.wc-otp .wc-input { width: 44px; height: 50px; padding: 0; text-align: center;
  font-size: var(--wc-text-xl); font-family: var(--wc-font-hand); font-weight: 700; }
.wc-otp .wc-input:nth-child(odd)  { border-radius: 12px 6px 14px 6px / 6px 14px 6px 12px; }
.wc-otp .wc-input:nth-child(even) { border-radius: 6px 13px 6px 12px / 12px 6px 14px 6px; }

/* — Tree view (nested <details>) — */
.wc-tree { font-size: var(--wc-text-md); color: var(--wc-ink); }
.wc-tree details { margin: 0; }
.wc-tree summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
  list-style: none; border-radius: 9px 12px 9px 10px; font-weight: 600; }
.wc-tree summary::-webkit-details-marker { display: none; }
.wc-tree summary::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: var(--wc-primary-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 4l9 8-9 8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 4l9 8-9 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--wc-dur) var(--wc-ease); }
.wc-tree details[open] > summary::before { transform: rotate(90deg); }
.wc-tree summary:hover { background: color-mix(in srgb, var(--wc-primary) 12%, transparent); }
.wc-tree details > *:not(summary) { margin-left: 14px; padding-left: 12px; border-left: 1.5px dashed var(--wc-line); }
.wc-tree .wc-tree__leaf { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 9px 12px 9px 10px; color: var(--wc-ink-soft); }
.wc-tree .wc-tree__leaf:hover { background: color-mix(in srgb, var(--wc-primary) 10%, transparent); color: var(--wc-ink); }
.wc-tree .wc-icon { width: 15px; height: 15px; color: var(--wc-primary-strong); }

/* — Overlay notification badge (anchors to avatar / icon corner) — */
.wc-badge-anchor { position: relative; display: inline-flex; }
.wc-badge--count, .wc-badge--dot { position: absolute; top: -5px; right: -5px; z-index: 1;
  background: var(--wc-critical); color: #fff; border: 2px solid var(--wc-paper); }
.wc-badge--count { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wc-font-sans); font-size: .68rem; font-weight: 700; border-radius: 11px 9px 12px 9px; }
.wc-badge--dot { width: 12px; height: 12px; border-radius: 55% 45% 52% 48%; }

.wc-upload:focus-visible, .wc-tree summary:focus-visible {
  outline: 3px solid var(--wc-primary-strong); outline-offset: 2px; }

/* toast semantic icon */
.wc-toast__ic { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; color: var(--_c, var(--wc-primary)); }