/* Ledger Glass · style.robby.wang/s/ledger-glass
   Quiet content surfaces; floating controls carry the glass.
   Drop-in: tokens on :root, components under the rs- prefix. */
:root {
  color-scheme: light dark;
  --bg:#f3f0e9;
  --bg-soft:#eeeae1;
  --panel:#f9fcfb;
  --panel-strong:#fcfefd;
  --text:#302c24;
  --muted:#726754;
  --line:rgba(43,78,65,.11);
  --line-strong:rgba(43,78,65,.22);
  --accent:#89661f;
  --accent-strong:#624613;
  --on-accent:#fff;
  --positive:#26785a;
  --danger:#a0443e;
  --glass-surface:rgba(255,255,255,.74);
  --glass-field:rgba(255,255,255,.66);
  --glass-inset:rgba(62,105,85,.055);
  --glass-menu:rgba(251,254,253,.93);
  --glass-rim:rgba(255,255,255,.88);
  --glass-glint:rgba(255,255,255,.85);
  --glass-selected:color-mix(in srgb,var(--accent) 12%,#fff);
  --dock-tint:rgba(255,255,255,.12);
  --dock-sheen:rgba(255,255,255,.20);
  --dock-rim:rgba(255,255,255,.86);
  --dock-contour:rgba(41,55,49,.13);
  --dock-selection:rgba(28,52,39,.09);
  --dock-ink:#22372d;
  --dock-text-shadow:0 1px 1px rgba(255,255,255,.65);
  --dock-filter:blur(8px) saturate(1.25) brightness(1.03);
  --dock-input:rgba(255,255,255,.10);
  --mist-warm:rgba(224,202,158,.28);
  --mist-blue:rgba(186,206,226,.25);
  --mist-sand:rgba(229,214,182,.24);
  --shadow-surface:0 3px 8px rgba(36,65,52,.025),0 14px 40px rgba(36,65,52,.055);
  --shadow-float:0 8px 28px rgba(31,62,49,.10),0 2px 6px rgba(31,62,49,.045);
  --shadow-dock:0 14px 32px rgba(22,42,31,.15),0 4px 10px rgba(22,42,31,.06);
  --blur-menu:blur(26px) saturate(1.5);
  --ease:cubic-bezier(.2,.8,.2,1);
  --duration:180ms;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --person-gold:#d5b66f;--person-ocean:#59a9c8;--person-fern:#77c8a1;--person-alpine:#8ab3d5;
  --person-coral:#df8b76;--person-violet:#a993d5;--person-slate:#8d9aaa;--person-sky:#82b9e7;
  font-family:var(--font);
  font-size:16px;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-scheme=light]) {
    --bg:#161914;--bg-soft:#282d23;--panel:#1b2822;--panel-strong:#23322b;
    --text:#f3f2e9;--muted:#b7b8a6;
    --line:rgba(206,231,215,.12);--line-strong:rgba(206,231,215,.25);
    --accent:#d5b66f;--accent-strong:#f2d48b;--on-accent:#231f18;
    --positive:#77c8a1;--danger:#e28d86;
    --glass-surface:rgba(31,46,38,.86);--glass-field:rgba(17,30,23,.54);--glass-inset:rgba(6,15,10,.23);
    --glass-menu:rgba(35,50,42,.96);--glass-rim:rgba(219,247,230,.17);--glass-glint:rgba(239,255,244,.13);
    --glass-selected:color-mix(in srgb,var(--accent) 18%,#23322b);
    --dock-tint:rgba(15,26,21,.24);--dock-sheen:rgba(231,249,240,.09);--dock-rim:rgba(238,255,247,.39);
    --dock-contour:rgba(0,0,0,.26);--dock-selection:rgba(235,255,243,.13);--dock-ink:#d8e8de;
    --dock-text-shadow:0 1px 2px rgba(0,0,0,.75);--dock-filter:blur(8px) saturate(1.2) brightness(.62);
    --dock-input:rgba(241,255,248,.045);
    --mist-warm:rgba(110,101,61,.17);--mist-blue:rgba(52,70,96,.2);--mist-sand:rgba(87,80,47,.12);
    --shadow-surface:0 3px 8px #0000000c,0 14px 40px #0000001c;
    --shadow-float:0 8px 30px #00000040,0 2px 7px #0000001c;
    --shadow-dock:0 14px 32px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.2);
  }
}
:root[data-scheme=dark] {
  --bg:#161914;--bg-soft:#282d23;--panel:#1b2822;--panel-strong:#23322b;
  --text:#f3f2e9;--muted:#b7b8a6;
  --line:rgba(206,231,215,.12);--line-strong:rgba(206,231,215,.25);
  --accent:#d5b66f;--accent-strong:#f2d48b;--on-accent:#231f18;
  --positive:#77c8a1;--danger:#e28d86;
  --glass-surface:rgba(31,46,38,.86);--glass-field:rgba(17,30,23,.54);--glass-inset:rgba(6,15,10,.23);
  --glass-menu:rgba(35,50,42,.96);--glass-rim:rgba(219,247,230,.17);--glass-glint:rgba(239,255,244,.13);
  --glass-selected:color-mix(in srgb,var(--accent) 18%,#23322b);
  --dock-tint:rgba(15,26,21,.24);--dock-sheen:rgba(231,249,240,.09);--dock-rim:rgba(238,255,247,.39);
  --dock-contour:rgba(0,0,0,.26);--dock-selection:rgba(235,255,243,.13);--dock-ink:#d8e8de;
  --dock-text-shadow:0 1px 2px rgba(0,0,0,.75);--dock-filter:blur(8px) saturate(1.2) brightness(.62);
  --dock-input:rgba(241,255,248,.045);
  --mist-warm:rgba(110,101,61,.17);--mist-blue:rgba(52,70,96,.2);--mist-sand:rgba(87,80,47,.12);
  --shadow-surface:0 3px 8px #0000000c,0 14px 40px #0000001c;
  --shadow-float:0 8px 30px #00000040,0 2px 7px #0000001c;
  --shadow-dock:0 14px 32px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.2);
  color-scheme:dark;
}
:root[data-scheme=light] {color-scheme:light}

/* Base */
*,*::before,*::after {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;color:var(--text);background:var(--bg);line-height:1.5;isolation:isolate;-webkit-font-smoothing:antialiased}
body::before {
  content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 100% 0,var(--mist-warm),transparent 58%),
    radial-gradient(ellipse at 0 55%,var(--mist-blue),transparent 65%),
    radial-gradient(ellipse at 90% 100%,var(--mist-sand),transparent 60%);
}
::selection {background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text)}
button,input,select,textarea {font:inherit}
button {color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled {opacity:.45;cursor:default}
h1,h2,h3,h4,p {margin-top:0}
h1,h2,h3,h4 {font-weight:600}
:is(button,a,summary):focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.rs-num {font-variant-numeric:tabular-nums}
.rs-muted {color:var(--muted)}
.rs-positive {color:var(--positive)}
.rs-danger {color:var(--danger)}

/* Layout */
.rs-shell {max-width:920px;margin:0 auto;padding:8px 12px calc(160px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px) {.rs-shell {padding-left:20px;padding-right:20px}}
.rs-header {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-bottom:10px}
.rs-title {margin:0;font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.025em}
.rs-avatar {display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--glass-field);border:1px solid var(--glass-rim);box-shadow:0 2px 6px #16342608;font-size:18px}
.rs-stack {display:grid;gap:12px}
.rs-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:700px) {.rs-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Content surface: quiet, never blurred */
.rs-surface {
  padding:16px;border-radius:22px;border:1px solid var(--glass-rim);
  background:linear-gradient(145deg,var(--glass-field),transparent 70%),var(--glass-surface);
  box-shadow:var(--shadow-surface),inset 0 1px 0 var(--glass-glint);
}
.rs-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rs-section-heading h2 {margin:0;font-size:18px;line-height:1.35}
.rs-note {margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.rs-display {margin:14px 0 6px;font-size:clamp(30px,7vw,40px);line-height:1.1;font-weight:650;letter-spacing:-.045em;font-variant-numeric:tabular-nums}

/* Stat */
.rs-stat {min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:var(--glass-field);box-shadow:inset 0 1px 0 var(--glass-glint)}
.rs-stat h4 {display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:14px;font-weight:550}
.rs-stat strong {display:block;font-size:20px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.rs-stat small {display:block;margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rs-dot {width:7px;height:7px;flex:none;border-radius:50%;background:var(--person-color,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--person-color,var(--muted)) 10%,transparent)}

/* Buttons */
.rs-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--glass-inset);color:var(--text);font-size:14px;font-weight:500;text-decoration:none;transition:transform var(--duration) var(--ease),filter var(--duration),background-color var(--duration)}
.rs-button--primary {
  min-height:48px;padding:0 20px;border-radius:15px;font-size:16px;font-weight:600;color:var(--on-accent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent-strong) 97%,#fff),var(--accent-strong));
  border-color:color-mix(in srgb,var(--accent-strong) 88%,#000);
  box-shadow:inset 0 1px 0 #ffffff30,0 3px 8px color-mix(in srgb,var(--accent) 12%,transparent);
}
.rs-button--text {min-height:40px;padding:0 10px;border-color:transparent;background:transparent;color:var(--accent-strong);font-size:13px}
.rs-button--danger {color:var(--danger)}
.rs-button:not(:disabled):active {transform:scale(.98)}
@media (hover:hover) and (pointer:fine) {
  .rs-button--primary:hover {filter:brightness(.95)}
  .rs-button--text:hover,.rs-button:not(.rs-button--primary):hover {background:var(--glass-inset)}
}

/* Fields */
.rs-label {display:grid;gap:6px;min-width:0;font-size:13px;color:var(--muted)}
.rs-field {
  width:100%;min-width:0;height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:13px;
  background-color:var(--glass-field);color:var(--text);font-size:max(16px,1rem);outline:none;
  box-shadow:inset 0 1px 2px #122b1e03;
  transition:border-color var(--duration),box-shadow var(--duration),background-color var(--duration);
}
textarea.rs-field {height:auto;min-height:80px;padding:11px 12px;line-height:1.6;resize:vertical}
select.rs-field {
  appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px;background-size:5px 5px;background-repeat:no-repeat;
}
.rs-field::placeholder {color:var(--muted);opacity:1}
.rs-field:focus {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.rs-field[aria-invalid=true] {border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 14%,transparent)}
.rs-inset {padding:12px;border-radius:12px;background:var(--glass-inset);font-size:13px}

/* Segmented control */
.rs-segmented {display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border:1px solid var(--line);border-radius:15px;background:var(--glass-inset)}
.rs-segmented button {min-height:38px;padding:0 14px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:14px;transition:background-color var(--duration),color var(--duration),box-shadow var(--duration)}
.rs-segmented button[aria-pressed=true] {
  background:linear-gradient(150deg,var(--glass-glint),transparent 75%),var(--glass-field);color:var(--accent-strong);font-weight:600;
  box-shadow:0 1px 4px #122b1e12,inset 0 1px 0 var(--glass-glint);
}

/* Chips (people / filters) */
.rs-chips {display:flex;flex-wrap:wrap;gap:8px}
.rs-chip {display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--glass-field);color:var(--text);font-size:13px;cursor:pointer;transition:background-color var(--duration),border-color var(--duration)}
.rs-chip input {width:16px;height:16px;margin:0;accent-color:var(--person-color,var(--accent))}
.rs-chip:has(input:checked),.rs-chip[aria-pressed=true] {
  background:color-mix(in srgb,var(--person-color,var(--accent)) 13%,var(--panel-strong));
  border-color:color-mix(in srgb,var(--person-color,var(--accent)) 65%,var(--line));
  box-shadow:inset 0 1px 0 var(--glass-glint);
}

/* Lists: rows, not cards */
.rs-list {display:grid}
.rs-list-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.rs-list-row:first-child {border-top:0}
.rs-list-row h3 {margin:0;font-size:15px;overflow-wrap:anywhere}
.rs-list-row p {margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.rs-amount {text-align:right;white-space:nowrap}
.rs-amount strong {display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rs-amount small {font-size:11px;color:var(--muted)}

/* Menu glass: popovers, dialogs */
.rs-menu {
  padding:6px;border-radius:20px;border:1px solid var(--glass-rim);color:var(--text);
  background:linear-gradient(145deg,var(--glass-glint),transparent 45%),var(--glass-menu);
  box-shadow:var(--shadow-float),inset 0 1px 0 var(--glass-glint),inset 0 -1px 0 var(--line);
  -webkit-backdrop-filter:var(--blur-menu);backdrop-filter:var(--blur-menu);
}
.rs-menu button {display:flex;width:100%;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:14px;background:none;text-align:left;font-size:14px}
.rs-menu button[aria-pressed=true] {background:var(--glass-selected);color:var(--accent-strong)}
@media (hover:hover) and (pointer:fine) {.rs-menu button:hover {background:var(--glass-selected)}}
.rs-dialog {padding:20px;border-radius:28px}

/* Dock glass: floating tab bar + composer */
.rs-dock {
  position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:760px;margin:0 auto;padding:7px;border-radius:34px;
  border:1px solid var(--dock-rim);color:var(--text);
  background:linear-gradient(135deg,var(--dock-sheen),transparent 34% 68%,var(--dock-sheen)),var(--dock-tint);
  box-shadow:var(--shadow-dock),0 0 0 .5px var(--dock-contour),inset 0 1.5px 1px rgba(255,255,255,.72),
    inset 0 -1px .5px rgba(255,255,255,.32),inset 1px 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:var(--dock-filter);backdrop-filter:var(--dock-filter);
}
.rs-dock::after {content:"";position:absolute;inset:2px;pointer-events:none;border-radius:inherit;border:1px solid transparent;border-top-color:rgba(255,255,255,.28);border-bottom-color:var(--dock-contour);opacity:.6}
.rs-dock.is-static {position:relative;left:auto;right:auto;bottom:auto}
.rs-tabs {--tab:0;--tabs:4;position:relative;display:grid;grid-template-columns:repeat(var(--tabs),minmax(0,1fr));gap:4px;max-width:540px;margin:4px auto 0}
.rs-tabs::before {
  content:"";position:absolute;top:0;bottom:0;left:0;width:calc((100% - (var(--tabs) - 1)*4px)/var(--tabs));
  border-radius:26px;background:var(--dock-selection);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateX(calc(var(--tab)*(100% + 4px)));transition:transform 320ms var(--ease);pointer-events:none;
}
.rs-tabs button {position:relative;display:grid;place-items:center;gap:2px;min-height:56px;padding:6px 0;border:0;border-radius:26px;background:transparent;color:var(--dock-ink);text-shadow:var(--dock-text-shadow);font-size:12px;transition:color var(--duration),transform var(--duration) var(--ease)}
.rs-tabs button[aria-selected=true] {color:var(--accent-strong);font-weight:600}
.rs-tabs svg {width:23px;height:23px}
.rs-tabs button:active {transform:scale(.98)}
.rs-composer {
  display:flex;align-items:center;gap:2px;min-height:54px;padding:2px 5px;border-radius:27px;border:1px solid var(--dock-rim);
  background:radial-gradient(ellipse at 8% 0,rgba(184,217,255,.20),transparent 56%),radial-gradient(ellipse at 100% 100%,rgba(255,222,185,.14),transparent 56%),var(--dock-input);
  box-shadow:0 0 0 .5px var(--dock-contour),inset 0 1.5px 1px rgba(255,255,255,.68),inset 0 -1px 1px rgba(255,255,255,.18);
}
.rs-composer input {flex:1;min-width:0;height:48px;padding:0 6px;border:0;background:transparent;color:var(--text);font-size:16px;outline:none;text-shadow:var(--dock-text-shadow)}
.rs-composer input::placeholder {color:var(--dock-ink);opacity:1}
.rs-composer:focus-within {outline:2px solid color-mix(in srgb,var(--accent-strong) 65%,transparent);outline-offset:2px}
.rs-icon-button {display:grid;place-items:center;flex:none;width:44px;height:48px;padding:0;border:0;border-radius:24px;background:transparent;color:var(--dock-ink)}
.rs-icon-button svg {width:24px;height:24px}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rs-button:active,.rs-tabs button:active {transform:none}
}
@media (prefers-contrast:more) {
  :root {--line:color-mix(in srgb,var(--text) 35%,transparent);--line-strong:color-mix(in srgb,var(--text) 55%,transparent)}
  .rs-tabs button {text-shadow:none}
}
@media (forced-colors:active) {
  .rs-surface,.rs-menu,.rs-dock,.rs-field,.rs-stat {border:1px solid CanvasText}
  .rs-tabs button[aria-selected=true],.rs-segmented button[aria-pressed=true] {outline:2px solid Highlight;outline-offset:-3px}
}