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

/* ==========================================================================
   Sumi — ink, washi and one vermilion seal.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: transform/opacity only (the ensō's stroke-dashoffset is the one exception,
   on one small SVG); entrance animations fill BACKWARDS; colour, border and shadow
   change only on one element's own hover/active/state.
   ========================================================================== */

:root {
  /* easings */
  --sm-brush: cubic-bezier(.66, .02, .24, 1);      /* a stroke: press, pull, lift */
  --sm-settle: cubic-bezier(.22, 1, .36, 1);       /* stones settling, sheets landing */
  --sm-press: cubic-bezier(.4, 0, .6, 1);          /* the brush touching paper */
  --sm-release: cubic-bezier(.3, 1.4, .5, 1);      /* the paper springing back */
  --sm-mist: cubic-bezier(.4, 0, .2, 1);           /* fades: ink thinning in water */
  /* durations */
  --sm-t-press: 90ms;
  --sm-t-release: 420ms;
  --sm-t-hover: 260ms;
  --sm-t-settle: 520ms;
  --sm-t-stroke: 820ms;
  --sm-t-stamp: 620ms;
  --sm-t-drop: 1000ms;
  --sm-t-enso: 1500ms;
  --sm-thumb: var(--paper);
  --sm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .07' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .13 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
  --sm-thumb: var(--wash-strong);
  --sm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .78 0 0 0 .05 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .07' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .76 0 0 0 .07 -.025'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

html { background-color: var(--washi); }
body {
  margin: 0;
  background-color: var(--washi);
  background-image: var(--sm-grain);
  background-size: 280px 280px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--shu-wash); color: var(--ink); }

/* ---------- utilities ---------- */
.sm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sm-icon { width: 20px; height: 20px; flex: none; display: block; }
.sm-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-10) var(--space-10); min-height: 100vh; }
.sm-stage--top { align-items: flex-start; align-content: flex-start; }
.sm-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.sm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (max-width: 600px) { .sm-stage { padding: var(--space-6) var(--space-4); } }

/* ---------- type ---------- */
.sm-display { font: 500 64px/72px var(--font-display); letter-spacing: .01em; margin: 0; color: var(--ink); }
.sm-title { font: 500 36px/46px var(--font-display); margin: 0; color: var(--ink); }
.sm-mtitle { font: 500 28px/38px var(--font-display); margin: 0; color: var(--ink); }
.sm-heading { font: 600 22px/32px var(--font-display); margin: 0; color: var(--ink); }
.sm-body { font: 400 16px/28px var(--font-body); }
.sm-small { font: 400 14px/22px var(--font-body); }
.sm-soft { color: var(--ink-soft); }
.sm-p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.sm-overline { font: 500 12px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sm-brushtext { font: 400 34px/40px var(--font-brush); color: var(--ink); }
.sm-vertical { writing-mode: vertical-rl; text-orientation: mixed; font: 500 18px/28px var(--font-display); letter-spacing: .28em; color: var(--ink); }
.sm-vertical--brush { font-family: var(--font-brush); font-weight: 400; letter-spacing: .12em; }
.sm-vertical--soft { color: var(--ink-soft); }
@media (max-width: 600px) { .sm-display { font-size: 42px; line-height: 50px; } .sm-title { font-size: 30px; line-height: 40px; } }

/* ---------- focus ---------- */
.sm-btn:focus-visible, .sm-ibtn:focus-visible, .sm-toggle__track:focus-visible, .sm-tab:focus-visible, .sm-seg__opt:focus-visible,
.sm-card--interactive:focus-visible, .sm-select__btn:focus-visible, .sm-tag__x:focus-visible, .sm-cal__day:focus-visible, .sm-tabs__panel:focus-visible,
.sm-modal__panel:focus-visible, .sm-link:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.sm-tabs__panel:focus-visible { outline-offset: 6px; }
.sm-modal__panel:focus { outline: none; }

/* ==========================================================================
   Brush stroke — a static SVG, revealed by a transform wipe (outer slides in,
   inner slides back, so the ink appears to be laid left to right) or grown
   with scaleX (progress, sliders).
   ========================================================================== */
.sm-stroke { position: relative; display: block; overflow: hidden; height: var(--sm-stroke-h, 12px); color: var(--brush); pointer-events: none; }
.sm-stroke__in { display: block; width: 100%; height: 100%; }
.sm-stroke svg, .sm-wipe svg { display: block; width: 100%; height: 100%; }
.sm-stroke--shu { color: var(--shu); }
.sm-stroke--wash { color: var(--wash-strong); }
.sm-stroke--ghost { color: var(--wash-strong); opacity: .5; }
.sm-stroke--soft { color: var(--ink-soft); }
.sm-stroke.is-pending, .sm-wipe.is-pending { transform: translateX(-101%); }
.sm-stroke.is-pending > .sm-stroke__in, .sm-wipe.is-pending > .sm-wipe__in { transform: translateX(101%); }
.sm-stroke.is-drawing, .sm-wipe.is-drawing { animation: sm-wipe-o var(--sm-t-stroke) var(--sm-brush) var(--sm-delay, 0ms) backwards; }
.sm-stroke.is-drawing > .sm-stroke__in, .sm-wipe.is-drawing > .sm-wipe__in { animation: sm-wipe-i var(--sm-t-stroke) var(--sm-brush) var(--sm-delay, 0ms) backwards; }
@keyframes sm-wipe-o { from { transform: translateX(-101%); } to { transform: translateX(0); } }
@keyframes sm-wipe-i { from { transform: translateX(101%); } to { transform: translateX(0); } }
.sm-stroke--grow .sm-stroke__in { transform-origin: left center; transform: scaleX(0); transition: transform 900ms var(--sm-brush); }
.sm-stroke--vertical { width: var(--sm-stroke-h, 12px); height: auto; }
.sm-wipe { position: relative; display: block; overflow: hidden; }
.sm-wipe__in { display: block; width: 100%; height: 100%; }
/* hover strokes: hidden by opacity, swept in on the host's hover, faded out after */
.sm-stroke--hover { opacity: 0; transition: opacity 320ms var(--sm-mist); }

/* heading marks */
.sm-hd { position: relative; margin: 0; }
.sm-hd__mark { position: relative; display: inline-block; z-index: 0; }
.sm-hd__stroke { position: absolute !important; left: -5%; width: 110%; bottom: -.16em; height: .3em !important; z-index: -1; }
.sm-display .sm-hd__stroke, .sm-title .sm-hd__stroke { height: .28em !important; bottom: -.08em; }
.sm-hd__mark .sm-stroke { --sm-stroke-h: auto; }

/* ==========================================================================
   Ink drop — concentric rings from the point of contact, fading
   ========================================================================== */
.sm-drops { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.sm-drop { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); pointer-events: none; color: currentColor; }
.sm-drop > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: sm-ring var(--sm-t-drop) var(--sm-settle) backwards; }
.sm-drop > i:nth-child(1) { border: 0; background: currentColor; animation: sm-spot 700ms var(--sm-settle) backwards; }
.sm-drop > i:nth-child(3) { animation-delay: 110ms; }
.sm-drop > i:nth-child(4) { animation-delay: 220ms; }
.sm-drop--shu { color: var(--shu); }
@keyframes sm-ring { from { transform: scale(.06); opacity: .5; } to { transform: scale(var(--s, 1)); opacity: 0; } }
@keyframes sm-spot { from { transform: scale(.04); opacity: .2; } to { transform: scale(.42); opacity: 0; } }

/* ==========================================================================
   Button — presses like a brush touching paper
   ========================================================================== */
.sm-btn {
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 42px; padding: 0 22px; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius-sheet);
  font: 500 15px/1 var(--font-body); letter-spacing: .06em; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--sm-t-release) var(--sm-release), box-shadow var(--sm-t-hover) var(--sm-mist), background-color var(--sm-t-hover) var(--sm-mist), border-color var(--sm-t-hover) var(--sm-mist), color var(--sm-t-hover) var(--sm-mist);
}
.sm-btn::after { content: ""; position: absolute; inset: -3px -5px -7px -3px; z-index: -2; }
.sm-btn__label { position: relative; z-index: 1; }
.sm-btn__icon { position: relative; z-index: 1; display: inline-flex; margin-left: -4px; }
.sm-btn__icon--r { margin: 0 -6px 0 0; transition: transform var(--sm-t-hover) var(--sm-settle); }
.sm-btn:hover .sm-btn__icon--r { transform: translateX(3px); }
.sm-btn__icon .sm-icon { width: 18px; height: 18px; }
.sm-btn__wash { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.sm-btn__sweep { position: absolute; left: -8%; width: 116%; top: 14%; bottom: 14%; transform: translateX(-126%); transition: transform 620ms var(--sm-brush); }
.sm-btn__sweep svg { width: 100%; height: 100%; display: block; }
.sm-btn:hover .sm-btn__sweep { transform: translateX(0); }
.sm-btn:hover { transform: translateY(-1px); }
.sm-btn:active { transform: translateY(1px) scale(1.012, .955); box-shadow: var(--shadow-press); transition-duration: var(--sm-t-press); transition-timing-function: var(--sm-press); }
.sm-btn .sm-drops { z-index: 0; }

.sm-btn--primary { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-rest); }
.sm-btn--primary .sm-btn__sweep { color: var(--on-ink); opacity: .13; }
.sm-btn--primary:hover { box-shadow: var(--shadow-lift); }
.sm-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--edge); }
.sm-btn--secondary .sm-btn__sweep { color: var(--wash); }
.sm-btn--secondary:hover { border-color: var(--ink); }
.sm-btn--ghost { background: transparent; color: var(--ink); padding: 0 14px; }
.sm-btn--ghost .sm-btn__sweep { top: auto; bottom: 6px; height: 7px; left: 10px; width: calc(100% - 20px); color: var(--brush); transform: translateX(-150%); }
.sm-btn--ghost:active { box-shadow: none; }
.sm-btn--seal { background: var(--shu); color: var(--on-shu); box-shadow: var(--shadow-rest); }
.sm-btn--seal .sm-btn__sweep { color: var(--on-shu); opacity: .14; }
.sm-btn--seal:hover { box-shadow: var(--shadow-lift); }
.sm-btn--danger { background: transparent; color: var(--shu-text); border-color: var(--shu-text); }
.sm-btn--danger .sm-btn__sweep { color: var(--shu-wash); }

.sm-btn--sm { height: 34px; padding: 0 16px; font-size: 14px; gap: 8px; }
.sm-btn--sm.sm-btn--ghost { padding: 0 10px; }
.sm-btn--sm .sm-btn__icon .sm-icon { width: 16px; height: 16px; }
.sm-btn--lg { height: 52px; padding: 0 30px; font-size: 16px; gap: 12px; }
.sm-btn--block { display: flex; width: 100%; }
.sm-btn:disabled, .sm-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.sm-btn:disabled .sm-btn__sweep, .sm-btn[aria-disabled="true"] .sm-btn__sweep { transform: translateX(-150%); }
.sm-btn.is-loading { cursor: progress; }
.sm-btn__spin .sm-enso { --sz: 18px; color: currentColor; }

/* ==========================================================================
   IconButton
   ========================================================================== */
.sm-ibtn {
  position: relative; isolation: isolate; box-sizing: border-box; flex: none;
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--sm-t-release) var(--sm-release), background-color var(--sm-t-hover) var(--sm-mist), color var(--sm-t-hover) var(--sm-mist), border-color var(--sm-t-hover);
}
.sm-ibtn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wash); transform: scale(.4); opacity: 0; transition: transform var(--sm-t-hover) var(--sm-settle), opacity var(--sm-t-hover) var(--sm-mist); z-index: -1; }
.sm-ibtn:hover::before { transform: scale(1); opacity: 1; }
.sm-ibtn:active { transform: scale(.9); transition-duration: var(--sm-t-press); transition-timing-function: var(--sm-press); }
.sm-ibtn > .sm-icon { position: relative; z-index: 1; }
.sm-ibtn--outline { border-color: var(--edge); }
.sm-ibtn--outline:hover { border-color: var(--ink); }
.sm-ibtn--ink, .sm-ibtn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.sm-ibtn--ink::before, .sm-ibtn[aria-pressed="true"]::before { background: var(--on-ink); }
.sm-ibtn--ink:hover::before, .sm-ibtn[aria-pressed="true"]:hover::before { opacity: .14; }
.sm-ibtn--sm { width: 32px; height: 32px; }
.sm-ibtn--sm .sm-icon { width: 17px; height: 17px; }
.sm-ibtn--lg { width: 52px; height: 52px; }
.sm-ibtn--lg .sm-icon { width: 24px; height: 24px; }
.sm-ibtn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.sm-ibtn:disabled::before { display: none; }
.sm-ibtn__count { position: absolute; top: -3px; right: -5px; z-index: 2; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-cut); background: var(--shu); color: var(--on-shu); font: 600 11px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--washi); transform: rotate(-4deg); }

/* ==========================================================================
   Toggle — a river stone slides along a groove; the groove fills with ink
   ========================================================================== */
.sm-toggle { display: inline-flex; align-items: flex-start; gap: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-toggle__track { position: relative; flex: none; box-sizing: border-box; width: 54px; height: 30px; padding: 0; margin: 0; border: 1px solid var(--edge); border-radius: 999px; background: var(--wash); box-shadow: var(--shadow-groove); cursor: pointer; transition: border-color var(--sm-t-hover); }
.sm-toggle__groove { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.sm-toggle__fill { position: absolute; top: 2px; bottom: 2px; left: -10px; right: -12px; color: var(--brush); transform: translateX(-104%); transition: transform 560ms var(--sm-brush); }
.sm-toggle__fill svg { display: block; width: 100%; height: 100%; }
.sm-toggle__track[aria-checked="true"] { border-color: var(--brush); }
.sm-toggle__track[aria-checked="true"] .sm-toggle__fill { transform: translateX(0); }
.sm-toggle__stone {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%;
  background: var(--stone); box-shadow: var(--shadow-stone);
  transition: transform var(--sm-t-settle) var(--sm-settle);
}
.sm-toggle__stone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on-ink); opacity: 0; transition: opacity 380ms var(--sm-mist); }
.sm-toggle__stone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 58%); }
.sm-toggle:hover .sm-toggle__stone { transform: translateX(2px); }
.sm-toggle__track[aria-checked="true"] .sm-toggle__stone { transform: translateX(24px) rotate(34deg); }
.sm-toggle:hover .sm-toggle__track[aria-checked="true"] .sm-toggle__stone { transform: translateX(22px) rotate(30deg); }
.sm-toggle__track[aria-checked="true"] .sm-toggle__stone::before { opacity: 1; }
.sm-toggle__text { display: flex; flex-direction: column; padding-top: 1px; }
.sm-toggle__label { font: 500 15px/26px var(--font-body); color: var(--ink); }
.sm-toggle__hint { font: 400 14px/20px var(--font-body); color: var(--ink-soft); }
.sm-toggle.is-disabled { opacity: .45; cursor: not-allowed; }
.sm-toggle.is-disabled .sm-toggle__track { cursor: not-allowed; }

/* ==========================================================================
   Checkbox + Radio — a brush tick, an ink drop
   ========================================================================== */
.sm-check, .sm-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-check__box, .sm-radio__dot { position: relative; flex: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: 4px; border: 1.5px solid var(--edge); background: var(--paper); transition: border-color 220ms var(--sm-mist); color: var(--brush); }
.sm-check__box { border-radius: var(--radius-cut); }
.sm-radio__dot { border-radius: 50%; }
.sm-check__tick { position: absolute; left: -2px; top: -8px; width: 28px; height: 28px; transform-origin: 18% 82%; transform: scale(.25) rotate(-14deg); opacity: 0; transition: transform 420ms var(--sm-release), opacity 140ms var(--sm-mist); }
.sm-check__dash { position: absolute; left: 1px; top: 1px; width: 15px; height: 15px; transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--sm-brush); }
.sm-check input:checked + .sm-check__box .sm-check__tick { transform: none; opacity: 1; }
.sm-check input:indeterminate + .sm-check__box .sm-check__dash { transform: none; }
.sm-check input:checked + .sm-check__box, .sm-check input:indeterminate + .sm-check__box { border-color: var(--ink); }
.sm-radio__ink { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(0); transition: transform 460ms var(--sm-release); }
.sm-radio input:checked + .sm-radio__dot { border-color: var(--ink); }
.sm-radio input:checked + .sm-radio__dot .sm-radio__ink { transform: scale(1); }
.sm-radio__dot .sm-drops { border-radius: 50%; overflow: visible; }
.sm-check:hover .sm-check__box, .sm-radio:hover .sm-radio__dot { border-color: var(--ink); }
.sm-check input:focus-visible + .sm-check__box, .sm-radio input:focus-visible + .sm-radio__dot { outline: 2px solid var(--focus); outline-offset: 3px; }
.sm-check__box .sm-drop, .sm-radio__dot .sm-drop { color: var(--brush); }
.sm-check__text { display: flex; flex-direction: column; }
.sm-check__label { font: 400 16px/28px var(--font-body); color: var(--ink); }
.sm-check__hint { font: 400 14px/20px var(--font-body); color: var(--ink-soft); }
.sm-check.is-disabled, .sm-radio.is-disabled { opacity: .45; cursor: not-allowed; }
.sm-radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.sm-radios legend { padding: 0; margin-bottom: var(--space-3); }
.sm-radios--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }

/* ==========================================================================
   TextField — writing on paper: a baseline that takes a brush stroke on focus
   ========================================================================== */
.sm-field { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sm-field__label { font: 500 12px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sm-field__box { position: relative; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--edge); padding: 0 2px; transition: border-color 220ms; }
.sm-field__box:hover { border-bottom-color: var(--ink-soft); }
.sm-field__input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; border: 0; margin: 0; background: transparent; font: 400 17px/28px var(--font-body); color: var(--ink); padding: 9px 0 9px; outline: none; border-radius: 0; }
.sm-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.sm-field__input--area { resize: vertical; min-height: 112px; padding: 2px 0 6px; line-height: 32px; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--hairline) 31px 32px); background-attachment: local; background-position: 0 2px; }
.sm-field__icon { width: 19px; height: 19px; color: var(--ink-soft); }
.sm-field__suffix { font: 400 14px/1 var(--font-body); color: var(--ink-soft); }
.sm-field__stroke { position: absolute !important; left: -6px; right: -8px; bottom: -6px; --sm-stroke-h: 9px; opacity: 0; transition: opacity 360ms var(--sm-mist); }
.sm-field__box:focus-within .sm-field__stroke { opacity: 1; animation: sm-wipe-o 640ms var(--sm-brush) backwards; }
.sm-field__box:focus-within .sm-field__stroke > .sm-stroke__in { animation: sm-wipe-i 640ms var(--sm-brush) backwards; }
.sm-field.is-error .sm-field__stroke { opacity: 1; color: var(--shu); }
.sm-field.is-error .sm-field__box { border-bottom-color: var(--shu-text); }
.sm-field__help { font: 400 14px/22px var(--font-body); color: var(--ink-soft); padding-top: 6px; display: flex; align-items: center; gap: 8px; }
.sm-field.is-error .sm-field__help { color: var(--shu-text); }
.sm-field__err { flex: none; width: 9px; height: 9px; border-radius: 1px; background: var(--shu); transform: rotate(-6deg); }
.sm-field.is-disabled { opacity: .5; }

/* ---------- Select ---------- */
.sm-select__btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; margin: 0; padding: 9px 0; font: 400 17px/28px var(--font-body); color: var(--ink); text-align: left; cursor: pointer; }
.sm-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-select__value.is-placeholder { color: var(--ink-soft); }
.sm-select__chev { width: 18px; height: 18px; color: var(--ink-soft); transition: transform 360ms var(--sm-settle); }
.sm-select.is-open .sm-select__chev { transform: rotate(180deg); }
.sm-select.is-open .sm-field__stroke { opacity: 1; }
.sm-select__menu {
  position: absolute; z-index: 40; left: -8px; right: -8px; top: calc(100% + 10px); margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow: auto; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sheet); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms var(--sm-mist), transform 360ms var(--sm-settle), visibility 0s 360ms; outline: none;
}
.sm-select.is-open .sm-select__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--sm-mist), transform 420ms var(--sm-settle), visibility 0s; }
.sm-select__opt { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px; cursor: pointer; font: 400 15px/22px var(--font-body); color: var(--ink); }
.sm-select__opt-text { flex: 1; display: flex; flex-direction: column; }
.sm-select__opt-hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.sm-select__opt.is-active { background: var(--wash); }
.sm-select__opt[aria-selected="true"] { font-weight: 500; }
.sm-select__tick { width: 18px; height: 18px; color: var(--brush); opacity: 0; transform: scale(.5); transition: transform 360ms var(--sm-release), opacity 160ms; }
.sm-select__opt[aria-selected="true"] .sm-select__tick { opacity: 1; transform: none; }

/* ==========================================================================
   Tabs — a stroke sweeps under the active tab
   ========================================================================== */
.sm-tabs { min-width: 0; }
.sm-tabs__list { position: relative; display: flex; gap: 30px; padding: 0 2px 6px; border-bottom: 1px solid var(--hairline); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.sm-tabs__list::-webkit-scrollbar { display: none; }
.sm-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px 10px; margin: 0; border: 0; background: none; font: 500 15px/20px var(--font-body); letter-spacing: .06em; color: var(--ink-soft); cursor: pointer; transition: color 240ms var(--sm-mist); border-radius: 2px; z-index: 1; }
.sm-tab .sm-icon { width: 18px; height: 18px; }
.sm-tab:hover, .sm-tab[aria-selected="true"] { color: var(--ink); }
.sm-tab__count { font: 500 13px/1 var(--font-display); color: var(--ink-soft); }
.sm-tabs__ink { position: absolute; left: 0; bottom: 1px; height: 9px; width: 0; color: var(--brush); pointer-events: none; z-index: 0; }
.sm-tabs__ink-in { display: block; width: 100%; height: 100%; transform-origin: left center; }
.sm-tabs__ink-in svg { display: block; width: 100%; height: 100%; }
.sm-tabs__ink.is-sweep .sm-tabs__ink-in { animation: sm-sweep 620ms var(--sm-brush) backwards; }
@keyframes sm-sweep { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
.sm-tabs__panel { padding-top: var(--space-6); outline: none; }
.sm-tabs__panel.is-in { animation: sm-rise 480ms var(--sm-settle) backwards; }

/* ==========================================================================
   SegmentedControl — a stone set in a groove, slid between hollows
   ========================================================================== */
.sm-seg { position: relative; isolation: isolate; box-sizing: border-box; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--wash); box-shadow: var(--shadow-groove); max-width: 100%; }
.sm-seg--block { display: grid; width: 100%; }
.sm-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px; background: var(--sm-thumb); box-shadow: var(--shadow-stone); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--sm-t-settle) var(--sm-settle); z-index: -1; }
.sm-seg__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 7px 18px; margin: 0; border: 0; border-radius: 999px; background: none; font: 500 14px/20px var(--font-body); letter-spacing: .04em; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: color 240ms var(--sm-mist); }
.sm-seg__opt:hover, .sm-seg__opt[aria-checked="true"] { color: var(--ink); }
.sm-seg__opt:active { transform: scale(.96); }
.sm-seg__opt .sm-icon { width: 17px; height: 17px; }
.sm-seg__opt[lang="ja"] { font: 500 16px/20px var(--font-display); }
.sm-seg--sm .sm-seg__opt { padding: 4px 13px; font-size: 13px; }
.sm-seg--sm .sm-seg__opt[lang="ja"] { font-size: 15px; }

/* ==========================================================================
   Slider — a stroke grows to a stone
   ========================================================================== */
.sm-slider { display: flex; flex-direction: column; gap: 6px; min-width: 0; --v: 0; }
.sm-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sm-slider__value { font: 500 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sm-slider__rail { position: relative; height: 32px; overflow-x: clip; overflow-clip-margin: 6px; }
.sm-slider__groove { position: absolute; left: 10px; right: 10px; top: 14px; height: 4px; border-radius: 999px; background: var(--wash); box-shadow: var(--shadow-groove); }
.sm-slider__marks i { position: absolute; top: 1px; width: 2px; height: 2px; margin-left: -1px; border-radius: 50%; background: var(--ink-soft); }
.sm-slider__fill { position: absolute; left: 6px; width: calc(100% - 16px); top: 9px; height: 13px; color: var(--brush); transform-origin: left center; transform: scaleX(calc(var(--v) * .97 + .03)); }
.sm-slider__fill svg { display: block; width: 100%; height: 100%; }
.sm-slider__runner { position: absolute; top: 0; bottom: 0; left: 0; right: 20px; transform: translateX(calc(var(--v) * 100%)); pointer-events: none; }
.sm-slider__thumb { position: absolute; top: 5px; left: 0; width: 22px; height: 22px; margin-left: -1px; border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%; background: var(--stone); box-shadow: var(--shadow-stone); transition: transform 300ms var(--sm-settle); }
.sm-slider__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 58%); }
.sm-slider__bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; min-width: 34px; box-sizing: border-box; padding: 4px 8px; border-radius: var(--radius-sheet); background: var(--ink); color: var(--on-ink); font: 500 13px/16px var(--font-display); text-align: center; white-space: nowrap; transform: translate(-50%, 4px); opacity: 0; transition: opacity 180ms var(--sm-mist), transform 320ms var(--sm-settle); }
.sm-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.sm-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 32px; }
.sm-slider__input::-moz-range-thumb { width: 22px; height: 32px; border: 0; }
.sm-slider__rail:hover .sm-slider__thumb { transform: scale(1.08); }
.sm-slider__input:active ~ .sm-slider__runner .sm-slider__thumb, .sm-slider__rail:active .sm-slider__thumb { transform: scale(1.14) rotate(16deg); }
.sm-slider__input:focus-visible ~ .sm-slider__runner .sm-slider__thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.sm-slider__rail:active .sm-slider__bubble, .sm-slider__input:focus-visible ~ .sm-slider__runner .sm-slider__bubble { opacity: 1; transform: translate(-50%, 0); }
.sm-slider__ends { display: flex; justify-content: space-between; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.sm-slider.is-disabled { opacity: .45; }

/* ==========================================================================
   Card — a sheet of thick washi laid on the ground
   ========================================================================== */
.sm-card { position: relative; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 32px; border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--hairline); box-shadow: var(--shadow-rest); color: var(--ink); text-decoration: none; }
.sm-card--md { padding: 26px 28px; }
.sm-card--lg { padding: 44px; }
.sm-card--wash { background: var(--wash); border-color: transparent; box-shadow: none; }
.sm-card--bare { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
.sm-card--interactive { cursor: pointer; transition: transform 460ms var(--sm-settle), box-shadow 460ms var(--sm-mist), border-color 300ms var(--sm-mist); -webkit-tap-highlight-color: transparent; }
.sm-card--interactive::after { content: ""; position: absolute; inset: -2px -6px -9px -2px; z-index: -2; }
.sm-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--wash-strong); }
.sm-card--interactive:active { transform: translateY(0) scale(.996); box-shadow: var(--shadow-rest); transition-duration: 140ms; }
.sm-card--interactive:hover .sm-stroke--hover { opacity: 1; animation: sm-wipe-o 720ms var(--sm-brush) backwards; }
.sm-card--interactive:hover .sm-stroke--hover > .sm-stroke__in { animation: sm-wipe-i 720ms var(--sm-brush) backwards; }
.sm-card .sm-drops { color: var(--ink-soft); }
.sm-card.is-selected { border-color: var(--ink); box-shadow: var(--shadow-lift); }
.sm-card__title { font: 600 21px/30px var(--font-display); margin: 0; color: var(--ink); }
.sm-card__title .sm-hd__stroke { bottom: -.2em; }
.sm-card__body { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 26px; }
.sm-card__foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sm-card--has-vertical { padding-right: 70px; }
.sm-card__vertical { position: absolute; top: 28px; right: 24px; font-size: 15px; line-height: 22px; letter-spacing: .32em; color: var(--ink-soft); }
.sm-card > .sm-card__seal { position: absolute; top: -14px; right: 22px; }
.sm-card__media { margin: -32px -32px 14px; height: 150px; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--wash); position: relative; }
.sm-card--md .sm-card__media { margin: -26px -28px 12px; }
.sm-card__media > svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .sm-card { padding: 22px 20px; } .sm-card__media { margin: -22px -20px 12px; } .sm-card--lg { padding: 28px 22px; } .sm-card--has-vertical { padding-right: 56px; } }

/* a wash landscape (decoration) */
.sm-land { display: block; width: 100%; height: 100%; }
.sm-land__l0 { fill: var(--wash-strong); opacity: .45; }
.sm-land__l1 { fill: var(--wash-strong); opacity: .75; }
.sm-land__l2 { fill: var(--ink-soft); opacity: .22; }
.sm-land__l3 { fill: var(--ink-soft); opacity: .5; }
.sm-land__sun { fill: var(--shu); opacity: .85; }

/* ==========================================================================
   Badge + Tag
   ========================================================================== */
.sm-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; box-sizing: border-box; border-radius: var(--radius-cut); font: 500 11.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.sm-badge .sm-icon { width: 14px; height: 14px; }
.sm-badge--wash { background: var(--wash); color: var(--ink); }
.sm-badge--ink { background: var(--ink); color: var(--on-ink); }
.sm-badge--outline { border-color: var(--edge); color: var(--ink); }
.sm-badge--shu { background: var(--shu-wash); color: var(--shu-text); }
.sm-badge--seal { background: var(--shu); color: var(--on-shu); }
.sm-badge--count { min-width: 24px; justify-content: center; padding: 0 6px; background: var(--wash); color: var(--ink); font: 600 13px/1 var(--font-display); letter-spacing: 0; }
.sm-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sm-badge--wash .sm-badge__dot { background: var(--shu); }
.sm-tag { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; box-sizing: border-box; border-radius: var(--radius-cut); background: var(--paper); border: 1px solid var(--hairline); font: 400 14px/1 var(--font-body); color: var(--ink); transition: opacity 280ms var(--sm-mist), transform 320ms var(--sm-settle); }
.sm-tag:not(:has(.sm-tag__x)) { padding-right: 12px; }
.sm-tag__hole { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--edge); background: var(--washi); flex: none; }
.sm-tag.is-selected { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sm-tag.is-leaving { opacity: 0; transform: translateY(4px) rotate(-3deg); }
.sm-tag__x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color 200ms, color 200ms; }
.sm-tag__x:hover { background: var(--wash); color: var(--ink); }
.sm-tag__x .sm-icon { width: 14px; height: 14px; }

/* ==========================================================================
   Avatar
   ========================================================================== */
.sm-avatar { --s: 40px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--wash-strong); color: var(--ink); }
.sm-avatar__face { font: 500 calc(var(--s) * .4)/1 var(--font-display); letter-spacing: .02em; }
.sm-avatar__face[lang="ja"] { font-family: var(--font-brush); font-weight: 400; font-size: calc(var(--s) * .5); }
.sm-avatar--sm { --s: 30px; }
.sm-avatar--lg { --s: 56px; }
.sm-avatar--xl { --s: 84px; }
.sm-avatar--ink { background: var(--ink); color: var(--on-ink); }
.sm-avatar--paper { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.sm-avatar__enso { position: absolute; inset: -16%; width: 132%; height: 132%; color: var(--brush); pointer-events: none; }
.sm-avatar__seal { position: absolute; right: 2%; bottom: 2%; width: calc(var(--s) * .2); height: calc(var(--s) * .2); min-width: 8px; min-height: 8px; border-radius: 1px; background: var(--shu); box-shadow: 0 0 0 2px var(--washi); transform: rotate(-6deg); }
.sm-avatars { display: inline-flex; align-items: center; padding-left: 10px; }
.sm-avatars > .sm-avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--washi); transition: transform 360ms var(--sm-settle); }
.sm-avatars > .sm-avatar:hover { transform: translateY(-3px); }
.sm-avatar--more { background: var(--paper); box-shadow: 0 0 0 2px var(--washi), inset 0 0 0 1px var(--hairline) !important; }
.sm-avatar--more .sm-avatar__face { font-family: var(--font-body); font-size: calc(var(--s) * .32); color: var(--ink-soft); }

/* ==========================================================================
   Tooltip — a slip of paper; tanzaku (vertical) variant
   ========================================================================== */
.sm-tip-wrap { position: relative; display: inline-flex; }
.sm-tip { position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: 240px; box-sizing: border-box; padding: 8px 12px; border-radius: var(--radius-sheet); background: var(--paper); border: 1px solid var(--hairline); box-shadow: var(--shadow-lift); color: var(--ink); font: 400 13.5px/20px var(--font-body); text-align: left; pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity 200ms var(--sm-mist), transform 360ms var(--sm-settle); }
.sm-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: var(--paper); border: solid var(--hairline); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.sm-tip--bottom { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -5px); }
.sm-tip--bottom::after { bottom: auto; top: -5px; border-width: 1px 0 0 1px; }
.sm-tip-wrap.is-open .sm-tip { opacity: 1; transform: translate(-50%, 0); }
.sm-tip__title { display: block; font: 500 11px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.sm-tip--vertical { writing-mode: vertical-rl; width: auto; height: max-content; max-width: none; max-height: 220px; padding: 14px 8px; font: 500 15px/22px var(--font-display); letter-spacing: .24em; }
.sm-tip--vertical .sm-tip__title { writing-mode: vertical-rl; margin: 0 0 0 4px; letter-spacing: .1em; text-transform: none; font-family: var(--font-body); font-size: 12px; }

/* ==========================================================================
   Toast
   ========================================================================== */
.sm-toasts { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.sm-toasts > * { pointer-events: auto; }
.sm-toasts--inline { position: static; align-items: stretch; }
@media (max-width: 600px) { .sm-toasts:not(.sm-toasts--inline) { left: 16px; right: 16px; bottom: 16px; align-items: stretch; } }
.sm-toast { position: relative; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; width: min(392px, 100%); padding: 16px 12px 18px 16px; border-radius: var(--radius-sheet); background: var(--paper); border: 1px solid var(--hairline); box-shadow: var(--shadow-float); overflow: hidden; animation: sm-toast-in 560ms var(--sm-settle) backwards; transition: opacity 300ms var(--sm-mist), transform 320ms var(--sm-mist); }
.sm-toasts--inline .sm-toast { width: 100%; box-shadow: var(--shadow-rest); animation: none; }
.sm-toast.is-leaving { opacity: 0; transform: translateY(10px); }
.sm-toast__mark { display: grid; place-items: center; width: 36px; height: 36px; padding-top: 1px; }
.sm-toast__mark .sm-enso { --sz: 34px; }
.sm-toast__err { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 2px; background: var(--shu-wash); color: var(--shu-text); }
.sm-toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.sm-toast__title { font: 600 16px/24px var(--font-display); color: var(--ink); }
.sm-toast__msg { font: 400 14px/22px var(--font-body); color: var(--ink-soft); }
.sm-toast__actions { margin: 4px 0 0 -10px; }
.sm-toast .sm-ibtn { margin: -4px 0 0; }
.sm-toast__time { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px; color: var(--wash-strong); transform-origin: left center; transform: scaleX(0); animation: sm-shrink linear backwards; }
.sm-toast__time svg { display: block; width: 100%; height: 100%; }
.sm-toast:hover .sm-toast__time { animation-play-state: paused; }
@keyframes sm-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes sm-toast-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Modal
   ========================================================================== */
.sm-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.sm-modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: sm-fade 360ms var(--sm-mist) backwards; transition: opacity 260ms var(--sm-mist); }
.sm-modal__panel { position: relative; box-sizing: border-box; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 40px 40px 32px; border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-float); animation: sm-modal-in 560ms var(--sm-settle) backwards; transition: opacity 240ms var(--sm-mist), transform 280ms var(--sm-mist); }
.sm-modal__panel > .sm-overline { margin-bottom: 8px; }
.sm-modal__close { position: absolute !important; top: 14px; right: 14px; }
.sm-modal__body { margin-top: 18px; color: var(--ink-soft); }
.sm-modal__body p { margin: 0; }
.sm-modal__body .sm-field { margin-top: 16px; }
.sm-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.sm-modal.is-leaving .sm-modal__scrim { opacity: 0; }
.sm-modal.is-leaving .sm-modal__panel { opacity: 0; transform: translateY(10px); }
.sm-modal .sm-hanko--placed { z-index: 3; }
@keyframes sm-modal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .sm-modal__panel { padding: 32px 22px 24px; } }

/* ==========================================================================
   Progress — a brush stroke lengthening
   ========================================================================== */
.sm-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sm-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sm-progress__label { font: 500 14px/22px var(--font-body); color: var(--ink); }
.sm-progress__value { font: 500 16px/1 var(--font-display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sm-progress__rail { position: relative; height: 14px; }
.sm-progress__ghost, .sm-progress__fill { position: absolute !important; inset: 0; height: auto !important; }
.sm-progress__head { position: relative; }
.sm-progress.is-complete .sm-progress__value { opacity: 0; }
.sm-progress__value { transition: opacity 300ms var(--sm-mist); }
.sm-progress__note { font: 400 13px/20px var(--font-body); color: var(--ink-soft); }
.sm-progress--sm .sm-progress__rail { height: 9px; }
.sm-progress--lg .sm-progress__rail { height: 22px; }

/* ==========================================================================
   Hanko — the vermilion seal; stamps with a press and an ink bleed
   ========================================================================== */
.sm-hanko { --sz: 48px; --tilt: -2deg; position: relative; display: inline-block; flex: none; width: var(--sz); height: var(--sz); color: var(--shu); transform: rotate(var(--tilt)); vertical-align: middle; }
.sm-hanko svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-hanko__t { font-family: var(--font-display); font-weight: 800; }
.sm-hanko__t--brush { font-family: var(--font-brush); font-weight: 400; }
.sm-hanko__cut { fill: var(--sm-seal-cut, var(--paper)); }
.sm-btn .sm-hanko, .sm-card .sm-hanko { --sm-seal-cut: var(--paper); }
.sm-hanko__bleed { opacity: .14; transform: scale(1.07); }
.sm-hanko__ring { position: absolute; inset: -6%; border: 1.5px solid var(--shu); border-radius: 12%; opacity: 0; pointer-events: none; }
.sm-hanko--round .sm-hanko__ring { border-radius: 50%; }
.sm-hanko.is-stamping { animation: sm-stamp var(--sm-t-stamp) linear backwards; }
.sm-hanko.is-stamping .sm-hanko__bleed { animation: sm-bleed 1100ms var(--sm-mist) 240ms backwards; }
.sm-hanko.is-stamping .sm-hanko__ring { animation: sm-thud 760ms var(--sm-settle) 250ms backwards; }
.sm-hanko.is-fading { opacity: 0; transition: opacity 640ms var(--sm-mist); }
.sm-hanko--placed { position: absolute; z-index: 5; pointer-events: none; }
@keyframes sm-stamp {
  0% { opacity: 0; transform: rotate(calc(var(--tilt) - 9deg)) scale(1.65) translateY(-6px); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  40% { opacity: 1; transform: rotate(var(--tilt)) scale(.9); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  62% { transform: rotate(var(--tilt)) scale(1.03); animation-timing-function: var(--sm-settle); }
  100% { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes sm-bleed { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: .42; transform: scale(1.05); } 100% { opacity: .14; transform: scale(1.07); } }
@keyframes sm-thud { from { opacity: .55; transform: scale(.9); } to { opacity: 0; transform: scale(1.7); } }

/* ==========================================================================
   Ensō — drawn in one breath, then (as a loader) released
   ========================================================================== */
.sm-enso { --sz: 96px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--sz); height: var(--sz); color: var(--brush); }
.sm-enso__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-enso--shu { color: var(--shu); }
.sm-enso__reveal { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sm-enso.is-pending .sm-enso__reveal { stroke-dashoffset: 1; }
.sm-enso.is-drawing .sm-enso__reveal { animation: sm-enso-draw var(--sm-t-enso) var(--sm-brush) backwards; }
.sm-enso--value .sm-enso__reveal { transition: stroke-dashoffset 1000ms var(--sm-brush); }
.sm-enso__ghost { color: var(--wash); fill: var(--wash); }
.sm-enso--loader .sm-enso__reveal { animation: sm-enso-loop 2400ms var(--sm-brush) infinite; }
.sm-enso--loader .sm-enso__art { animation: sm-enso-fade 2400ms linear infinite; }
.sm-enso__center { position: relative; text-align: center; }
@keyframes sm-enso-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sm-enso-loop { 0% { stroke-dashoffset: 1; } 58% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes sm-enso-fade { 0% { opacity: 1; transform: rotate(0deg); } 66% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; transform: rotate(24deg); } }

/* the mark */
.sm-mark { --sz: 40px; position: relative; display: inline-block; flex: none; width: var(--sz); height: var(--sz); }
.sm-mark .sm-enso { position: absolute; inset: 0; }
.sm-mark > .sm-mark__seal { position: absolute; left: 4%; bottom: -2%; }
.sm-mark .sm-hanko { --sm-seal-cut: var(--washi); }

/* ==========================================================================
   Widgets
   ========================================================================== */
/* StatCard */
.sm-stat { gap: 6px; overflow: hidden; }
.sm-stat__kanji { position: absolute; top: 18px; right: 22px; font: 400 30px/1 var(--font-brush); color: var(--ink-soft); opacity: .55; }
.sm-stat__row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.sm-stat__value { font: 500 46px/1.05 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sm-stat__unit { font: 400 15px/1 var(--font-body); color: var(--ink-soft); }
.sm-stat__delta { display: flex; align-items: center; gap: 4px; font: 500 14px/20px var(--font-body); color: var(--ink); }
.sm-stat__delta .sm-icon { width: 16px; height: 16px; transform: rotate(-90deg); }
.sm-stat__delta.is-down { color: var(--shu-text); }
.sm-stat__delta.is-down .sm-icon { transform: none; }
.sm-stat__note { color: var(--ink-soft); font-weight: 400; margin-left: 4px; }
.sm-stat__spark { height: 56px; margin: 10px -4px -4px; color: var(--brush); }
.sm-stat__dot { fill: var(--shu); }

/* SealCalendar */
.sm-cal { gap: 18px; }
.sm-cal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sm-cal__count { font: 400 14px/20px var(--font-body); color: var(--ink-soft); white-space: nowrap; }
.sm-cal__count b { font: 500 28px/1 var(--font-display); color: var(--ink); margin-right: 2px; }
.sm-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sm-cal__day { position: relative; isolation: isolate; aspect-ratio: .7; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 8px 0 0; margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sheet); background: var(--washi); color: var(--ink); cursor: pointer; transition: border-color 240ms, transform 360ms var(--sm-release); -webkit-tap-highlight-color: transparent; }
.sm-cal__day:hover { border-color: var(--edge); }
.sm-cal__day:active { transform: scale(.95); transition-duration: 90ms; }
.sm-cal__k { font: 500 15px/20px var(--font-display); color: var(--ink-soft); }
.sm-cal__d { font: 500 13px/16px var(--font-body); color: var(--ink-soft); }
.sm-cal__day.is-today { border-color: var(--ink); }
.sm-cal__day.is-today .sm-cal__k { color: var(--ink); }
.sm-cal__day > .sm-cal__seal { position: absolute; left: 50%; top: 30px; margin-left: -14px; --sz: 28px !important; }
.sm-cal__day .sm-drops { color: var(--shu); }
.sm-cal__d { transition: opacity 200ms var(--sm-mist); }
.sm-cal__day[aria-pressed="true"] .sm-cal__d { opacity: 0; }
.sm-cal__note { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-soft); }
@media (max-width: 480px) { .sm-cal__grid { gap: 5px; } .sm-cal__day > .sm-cal__seal { --sz: 24px !important; margin-left: -12px; top: 28px; } .sm-cal__k { font-size: 13px; } .sm-cal__day { padding-top: 6px; } }

/* InkTimeline */
.sm-tl { position: relative; padding-left: 6px; }
.sm-tl__rail { position: absolute; left: 13px; top: 10px; bottom: 10px; width: 9px; color: var(--wash-strong); }
.sm-tl__rail svg { display: block; width: 100%; height: 100%; }
.sm-tl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sm-tl__item { position: relative; display: grid; grid-template-columns: 22px 64px 1fr; gap: 14px; align-items: start; }
.sm-tl__mark { display: grid; place-items: center; width: 22px; height: 28px; position: relative; }
.sm-tl__drop { width: 16px; height: 16px; color: var(--brush); fill: currentColor; }
.sm-tl__item.is-later .sm-tl__drop { fill: var(--washi); stroke: var(--edge); stroke-width: 1.4; }
.sm-tl__now { width: 13px; height: 13px; border-radius: 2px; background: var(--shu); transform: rotate(-6deg); position: relative; }
.sm-tl__now::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--shu); border-radius: 4px; animation: sm-breathe 3.2s var(--sm-mist) infinite; }
@keyframes sm-breathe { 0%, 100% { opacity: 0; transform: scale(.7); } 50% { opacity: .5; transform: scale(1); } }
.sm-tl__time { font: 500 15px/28px var(--font-display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sm-tl__body { display: flex; flex-direction: column; min-width: 0; }
.sm-tl__title { font: 500 16px/28px var(--font-body); color: var(--ink); }
.sm-tl__item.is-done .sm-tl__title { color: var(--ink-soft); }
.sm-tl__item.is-now .sm-tl__title { font-weight: 700; }
.sm-tl__note { font: 400 14px/22px var(--font-body); color: var(--ink-soft); }

/* JournalEntry */
.sm-journal__grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; }
.sm-journal__date { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; border-right: 1px solid var(--hairline); padding-right: 18px; }
.sm-journal__v { font-size: 20px; letter-spacing: .3em; }
.sm-journal__dow { writing-mode: vertical-rl; font: 500 11px/14px var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.sm-journal__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sm-journal__prompt { margin: 0 0 6px; font: 500 22px/34px var(--font-display); color: var(--ink); max-width: 30ch; }
.sm-journal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 14px; }
.sm-journal__mood { display: flex; align-items: center; gap: 10px; }
.sm-journal__mood-l { font: 500 12px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sm-journal__count { font: 400 14px/20px var(--font-body); color: var(--ink-soft); margin-right: auto; }
@media (max-width: 520px) { .sm-journal__grid { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; } .sm-journal__date { padding-right: 10px; } .sm-journal__v { font-size: 16px; } .sm-journal__prompt { font-size: 19px; line-height: 30px; } }

/* ==========================================================================
   Entrances — staggered, top to bottom, first ~8 blocks only
   ========================================================================== */
.sm-enter { animation: sm-rise 720ms var(--sm-settle) backwards; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes sm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sm-mist-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Reduced motion: no movement, state changes stay
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sm-enter, .sm-tabs__panel.is-in, .sm-toast, .sm-modal__panel, .sm-hanko.is-stamping, .sm-hanko.is-stamping *, .sm-tabs__ink.is-sweep .sm-tabs__ink-in { animation: none !important; }
  .sm-stroke.is-drawing, .sm-stroke.is-drawing > .sm-stroke__in, .sm-wipe.is-drawing, .sm-wipe.is-drawing > .sm-wipe__in, .sm-field__box:focus-within .sm-field__stroke, .sm-field__box:focus-within .sm-field__stroke > .sm-stroke__in, .sm-card--interactive:hover .sm-stroke--hover, .sm-card--interactive:hover .sm-stroke--hover > .sm-stroke__in { animation: none !important; }
  .sm-stroke.is-pending, .sm-stroke.is-pending > .sm-stroke__in, .sm-wipe.is-pending, .sm-wipe.is-pending > .sm-wipe__in { transform: none; }
  .sm-enso.is-drawing .sm-enso__reveal, .sm-enso.is-pending .sm-enso__reveal { animation: none; stroke-dashoffset: 0; }
  .sm-enso--loader .sm-enso__reveal { animation: none; stroke-dashoffset: 0; }
  .sm-enso--loader .sm-enso__art { animation: sm-pulse 2.4s linear infinite; }
  .sm-tl__now::after { animation: none; }
  .sm-btn, .sm-btn:hover, .sm-btn:active, .sm-ibtn:active, .sm-card--interactive:hover, .sm-card--interactive:active, .sm-cal__day:active, .sm-seg__opt:active { transform: none; }
  .sm-btn__sweep, .sm-toggle__fill, .sm-toggle__stone, .sm-seg__thumb, .sm-check__tick, .sm-radio__ink, .sm-stroke--grow .sm-stroke__in, .sm-enso--value .sm-enso__reveal, .sm-slider__thumb, .sm-tip, .sm-select__menu { transition-duration: 0s !important; }
  .sm-toast__time { animation-duration: 6s !important; }
}
@keyframes sm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }