/* Due East glass (2026-11-11).
   A quiet take on the iOS 26 Liquid Glass look, in our own palette.
   Rule: glass is for the layer that floats (top bar, tab bar, sheets, toasts, pinned bars).
   Content stays on paper: cards, lists and forms are not glass.
   Loaded last, so it only restyles. It adds no markup and removes nothing.
   Falls back to solid surfaces when the phone asks for less transparency or more contrast,
   or when the browser has no backdrop blur. */

:root{
  --glass-blur:22px;
  --glass-sat:1.6;
  --glass-bg:rgba(255,253,248,.66);            /* paper, see-through */
  --glass-bg-strong:rgba(255,253,248,.84);     /* sheets: more opaque so text keeps its contrast */
  --glass-ink:rgba(23,28,26,.74);              /* dark capsules: toasts, rest timer */
  --glass-edge:rgba(255,255,255,.7);           /* the bright rim light catches */
  --glass-edge-low:rgba(28,35,33,.10);         /* the soft outer hairline */
  --glass-tint:rgba(124,106,78,.13);           /* brass, for the current tab */
  --glass-shadow:0 10px 34px -14px rgba(48,40,26,.34),0 1px 2px rgba(48,40,26,.06);
  --glass-shadow-lg:0 30px 70px -28px rgba(48,40,26,.42),0 2px 6px rgba(48,40,26,.06);
  --glass-rim:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.22);
  --glass-fade:var(--bg);
  --tabbar-h:60px;
  --tabbar-gap:calc(8px + env(safe-area-inset-bottom,0px) * .55);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass-bg:rgba(32,38,34,.60);
  --glass-bg-strong:rgba(26,31,28,.82);
  --glass-ink:rgba(236,230,216,.92);
  --glass-edge:rgba(236,230,216,.20);
  --glass-edge-low:rgba(0,0,0,.5);
  --glass-tint:rgba(196,169,122,.16);
  --glass-shadow:0 12px 36px -12px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.4);
  --glass-shadow-lg:0 34px 80px -24px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.4);
  --glass-rim:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px rgba(236,230,216,.07);
}}
:root[data-theme="dark"]{
  --glass-bg:rgba(32,38,34,.60);
  --glass-bg-strong:rgba(26,31,28,.82);
  --glass-ink:rgba(236,230,216,.92);
  --glass-edge:rgba(236,230,216,.20);
  --glass-edge-low:rgba(0,0,0,.5);
  --glass-tint:rgba(196,169,122,.16);
  --glass-shadow:0 12px 36px -12px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.4);
  --glass-shadow-lg:0 34px 80px -24px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.4);
  --glass-rim:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px rgba(236,230,216,.07);
}

/* ---------- Top bar: no hard line. Content dissolves under it (scroll edge). ---------- */
.topbar{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate}
.topbar::before{content:"";position:absolute;inset:0 0 -18px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--glass-fade) 97%,transparent) 0,color-mix(in srgb,var(--glass-fade) 90%,transparent) 62%,transparent 100%);
  -webkit-backdrop-filter:blur(18px) saturate(var(--glass-sat));backdrop-filter:blur(18px) saturate(var(--glass-sat));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)}

/* The controls in the bar are the glass: one capsule each. */
.topbar .acct-btn,.topbar .backbtn:not([disabled]),.topbar .btn--sm{
  background:var(--glass-bg);border-color:transparent;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-rim),0 0 0 1px var(--glass-edge-low),0 6px 18px -10px rgba(48,40,26,.3)}
.topbar .backbtn:not([disabled]){border-radius:999px}
.topbar .acct-btn:hover,.topbar .acct-btn:focus-visible{border-color:transparent}

/* ---------- Tab bar: a floating capsule ---------- */
.tabbar{left:10px;right:10px;bottom:var(--tabbar-gap);width:auto;max-width:560px;margin-inline:auto;
  padding:4px;border:0;border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-rim),0 0 0 1px var(--glass-edge-low),var(--glass-shadow)}
.tabbar button{min-height:calc(var(--tabbar-h) - 8px);border-radius:999px;padding:5px 2px 4px;z-index:0}
/* The current tab sits in its own brass-tinted lozenge. */
.tabbar button::before{content:"";position:absolute;inset:0;top:0;left:0;width:auto;height:auto;margin:0;z-index:-1;border-radius:999px;
  background:var(--glass-tint);box-shadow:inset 0 1px 0 var(--glass-edge);opacity:0;transform:scale(.86);
  transition:opacity .22s ease,transform .32s cubic-bezier(.22,.61,.36,1)}
.tabbar button.on::before{opacity:1;transform:none;width:auto;height:auto;margin:0;left:0;top:0;background:var(--glass-tint)}
.tabbar button.on{color:var(--text)}
.tabbar .badge{box-shadow:none}
/* Content fades out beneath the capsule instead of being cut by a line. */
body:not(.chat-screen) #app::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:45;pointer-events:none;
  height:calc(var(--tabbar-h) + var(--tabbar-gap) + 26px);
  background:linear-gradient(to top,var(--glass-fade) 0,color-mix(in srgb,var(--glass-fade) 82%,transparent) 42%,transparent 100%)}
#app:not(:has(> .tabbar))::after{display:none}
.native-tabs #app::after{display:none}
/* Messages keeps the bar in the page flow. */
body.chat-screen .tabbar{left:auto;right:auto;width:auto;align-self:stretch;margin:6px 10px var(--tabbar-gap)}
/* Things that sit just above the tab bar keep clear of the capsule. */
.rest-bar{bottom:calc(var(--tabbar-h) + var(--tabbar-gap) + 10px)}
.undo-toast{bottom:calc(var(--tabbar-h) + var(--tabbar-gap) + 12px)}
.rest-totalbar{bottom:calc(var(--tabbar-h) + var(--tabbar-gap) + 12px)}
.native-tabs .rest-totalbar{bottom:12px}

/* ---------- Sheets and dialogs: dimmed, softly blurred behind, glass in front ---------- */
.sheet,.sheet-ghost,.go-info{-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
.sheet__in,.go-info__in,dialog.feedback-dialog,dialog.membership-dialog{
  background:var(--glass-bg-strong);border-color:transparent;border-radius:28px;
  -webkit-backdrop-filter:blur(30px) saturate(var(--glass-sat));backdrop-filter:blur(30px) saturate(var(--glass-sat));
  box-shadow:var(--glass-rim),0 0 0 1px var(--glass-edge-low),var(--glass-shadow-lg)}
dialog.feedback-dialog::backdrop,dialog.membership-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Cards inside a sheet are one step in from 28: concentric corners. */
.sheet__in .card,.sheet__in .card--tap{border-radius:18px;background:color-mix(in srgb,var(--surface) 70%,transparent)}

/* ---------- Toasts, undo and the rest timer: dark glass capsules ---------- */
.toast,.undo-toast,.rest-bar{
  background:var(--glass-ink);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.18),var(--glass-shadow)}
.rest-bar{border-radius:24px}
.rest-totalbar{background:var(--glass-bg);border-color:transparent;border-radius:24px;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-rim),0 0 0 1px var(--glass-edge-low),var(--glass-shadow)}

/* ---------- Main buttons: a fine top light, like a pressed brass key ---------- */
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--ink){box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -12px color-mix(in srgb,var(--accent) 80%,#000)}
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--ink):disabled{box-shadow:none}

/* ---------- Motion: one soft settle when glass arrives ---------- */
@keyframes glassIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.sheet__in,.go-info__in{animation:glassIn .34s cubic-bezier(.22,.61,.36,1) both}
.sheet-ghost .sheet__in{animation:de-sheet-out .22s var(--de-ease) forwards}

/* ---------- Fallbacks: solid, readable, no blur ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--glass-bg:var(--surface);--glass-bg-strong:var(--surface);--glass-ink:var(--ink)}
  .topbar::before{background:var(--bar-bg);-webkit-mask-image:none;mask-image:none;inset:0;border-bottom:1px solid var(--line-soft)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root{--glass-bg:var(--surface);--glass-bg-strong:var(--surface);--glass-ink:var(--ink);--glass-edge-low:var(--line-strong)}
  .topbar::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;inset:0;border-bottom:1px solid var(--line)}
  .tabbar,.sheet,.sheet-ghost,.go-info,.sheet__in,.go-info__in,.toast,.undo-toast,.rest-bar,.rest-totalbar,.topbar .acct-btn,.topbar .backbtn,.topbar .btn--sm{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .sheet__in,.go-info__in{animation:none}
  .tabbar button::before{transition:none;transform:none}
}

/* Back: a round glass button with the chevron centred (the tap area stays 44 px). */
@media (max-width:640px){
  .backslot.is-visible{overflow:visible}
  .topbar .backslot .backbtn{position:relative;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%}
  .topbar .backslot .backbtn::after{content:"";position:absolute;inset:-4px}
}

/* iPhone app: the tab bar there is drawn by the app itself, and it sizes itself from this (hidden) web bar.
   Keep the old full-width geometry so the current App Store build is unchanged. The floating glass bar
   arrives on iPhone with the next iOS build (see the parked native tab bar patch). */
.native-tabs{--tabbar-h:64px;--tabbar-gap:env(safe-area-inset-bottom,0px)}
.native-tabs nav.tabbar{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;box-shadow:none;
  background:var(--tab-bg);border-top:1px solid var(--line-soft);padding:6px 2px calc(4px + env(safe-area-inset-bottom))}
.native-tabs .tabbar button{min-height:54px;padding:7px 2px 5px}
.native-tabs .tabbar button::before{inset:2px 8px}

/* Intake: the answer that needs fixing gets a brief brass outline. */
.intake-fix{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px;transition:outline-color .3s ease}
@media (prefers-reduced-motion:reduce){.intake-fix{transition:none}}

/* Today: a coaching intake still to do is one slim row under the greeting. It opens the same form in place. */
.start-fold{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px));margin:0 0 14px;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.start-fold__row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px 12px 18px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.start-fold__txt{display:grid;gap:2px;flex:1;min-width:0}
.start-fold__txt b{font-weight:600}
.start-fold__txt small{color:var(--muted);font-size:.8125rem;line-height:1.35}
.start-fold__chev{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.start-fold.is-open .start-fold__chev{transform:rotate(180deg)}
.start-fold__row:active{background:var(--accent-soft)}
.start-fold__row:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--radius)}
.start-fold > .card{border:0;border-top:1px solid var(--line-soft);border-radius:0;background:transparent;animation:glassIn .3s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.start-fold__chev{transition:none}.start-fold > .card{animation:none}}

/* Intake: tap answers, one question per screen. The select stays in the page as the value holder but is not shown. */
.intake-select{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.field--choice{position:relative;margin-bottom:0}
.field--choice > span{font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--text)}
.intake-choices{display:grid;gap:10px;margin:4px 0 10px}
.intake-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:inherit;font:inherit;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease,background-color .2s ease,transform .14s ease}
.intake-choice:active{transform:scale(.985)}
.intake-choice.is-on{border-color:var(--accent);background:var(--accent-soft)}
.intake-choice__dot{flex:0 0 20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);position:relative;transition:border-color .2s ease}
.intake-choice.is-on .intake-choice__dot{border-color:var(--accent)}
.intake-choice.is-on .intake-choice__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.intake-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.intake-page{animation:glassIn .3s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.intake-choice,.intake-choice__dot{transition:none}.intake-choice:active{transform:none}.intake-page{animation:none}}

/* The days-a-week count is read from the days tapped, so its own control is not shown. */
.intake-daycount{display:none}

/* Coach desk on a wide screen uses the side list, not the bottom bar, so there is nothing to fade under. */
@media (min-width:901px){body:has(.admin-tabs) #app::after{display:none}}

/* Quick add buttons and their switch honour hidden (their rows are flex). */
.macro-increments[hidden],.macro-quick-toggle[hidden],.macro-quick-note[hidden]{display:none!important}
.macro-quick-note{margin:8px 0 0}