/* ================================================================================
   Shrenil.com — style.css
   The CentrOS iOS app's design language on the web: the sky is the ground (sky.css +
   sky.js), content sits in clear Liquid Glass sections, controls float above it.
   Order: 1 tokens · 2 base · 3 layout & type · 4 sections · 5 cards & rows · 6 marks ·
   7 controls · 8 content components · 9 chrome (top bar, tab bar, sheet) · 10 footer ·
   11 preferences · 12 print. Dark is the default; light = html[data-theme="light"].
   ================================================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:dark;

  --font-text:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mail:ui-serif,"New York","Iowan Old Style",Charter,Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --t-large:700 clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem)/1.2 var(--font-text);
  --t-title1:700 1.75rem/2.125rem var(--font-text);
  --t-title2:700 1.375rem/1.75rem var(--font-text);
  --t-title3:600 1.25rem/1.5625rem var(--font-text);
  --t-headline:600 1.0625rem/1.375rem var(--font-text);
  --t-body:400 1.0625rem/1.375rem var(--font-text);
  --t-callout:400 1rem/1.3125rem var(--font-text);
  --t-subhead:400 .9375rem/1.25rem var(--font-text);
  --t-footnote:400 .8125rem/1.125rem var(--font-text);
  --t-caption1:400 .75rem/1rem var(--font-text);
  --t-caption2:400 .6875rem/.8125rem var(--font-text);
  --t-tab:600 .625rem/.75rem var(--font-text);

  --label:#fff;
  --label-2:rgba(235,235,245,.8);
  --label-3:rgba(235,235,245,.3);
  --label-4:rgba(235,235,245,.16);
  --label-2-sky:var(--label-2);
  --label-3-sky:rgba(235,235,245,.64);
  --fill-1:rgba(120,120,128,.36);
  --fill-2:rgba(120,120,128,.32);
  --fill-3:rgba(118,118,128,.24);
  --fill-4:rgba(118,118,128,.18);
  --fill-quiet:rgba(235,235,245,.16);
  --bg:#000;
  --bg-grouped-2:#1C1C1E;
  --bg-elevated:#1C1C1E;
  --bg-elevated-2:#2C2C2E;
  --separator:rgba(84,84,88,.5);

  --blue:#0091FF;--green:#30D158;--yellow:#FFD600;--orange:#FF9230;--red:#FF4245;--purple:#DB34F2;
  --cyan:#3CD3FE;--teal:#00D2E0;--mint:#00DAC3;--indigo:#6D7CFF;--pink:#FF375F;--brown:#B78A66;--gray:#8E8E93;

  --fg-action:#4DA8FF;--fg-waiting:#FFD600;--fg-settled:#30D158;--fg-caution:#FF9230;--fg-stop:#FF6961;

  --fg-action-on-wash:#6CB8FF;--fg-waiting-on-wash:#FFD600;--fg-settled-on-wash:#3DDC67;--fg-caution-on-wash:#FFB066;--fg-stop-on-wash:#FF8A84;
  --wash-action:rgba(0,145,255,.16);--wash-waiting:rgba(255,214,0,.16);--wash-settled:rgba(48,209,88,.16);
  --wash-caution:rgba(255,146,48,.16);--wash-stop:rgba(255,66,69,.16);
  --wash-action-strong:rgba(0,145,255,.24);

  --wash-blue:rgba(0,145,255,.16);--wash-purple:rgba(219,52,242,.16);--wash-green:rgba(48,209,88,.16);
  --wash-cyan:rgba(60,211,254,.16);--wash-pink:rgba(255,55,95,.16);--wash-indigo:rgba(109,124,255,.18);
  --wash-orange:rgba(255,146,48,.16);--wash-gray:rgba(142,142,147,.2);
  --link:var(--fg-action);
  --focus:#0091FF;

  --glass-card-bg:rgba(255,255,255,.075);
  --glass-card-filter:blur(10px) saturate(120%) brightness(.74);
  --glass-card-inner:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 14px rgba(255,255,255,.035);
  --glass-ctl-bg:rgba(72,72,84,.30);
  --glass-ctl-filter:blur(6px) saturate(180%) brightness(1.05);
  --glass-ctl-rim:rgba(255,255,255,.16);
  --glass-ctl-shadow:0 6px 20px rgba(0,0,0,.35);

  --glass-bar-floor:rgba(20,20,26,.64);
  --glass-bar-filter:blur(14px) saturate(180%);
  --glass-sheet-bg:rgba(30,30,32,.9);
  --glass-sheet-filter:blur(28px) saturate(110%);
  --sheet-rim:rgba(255,255,255,.10);
  --sheet-group:rgba(118,118,128,.2);
  --sheet-ctl-bg:rgba(118,118,128,.24);
  --sheet-ctl-rim:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,.08) 50%,rgba(255,255,255,.18));
  --sheet-dim:rgba(0,0,0,.28);
  --tab-selected:rgba(255,255,255,.17);
  --seg-thumb:#5C5E66;
  --seg-thumb-shadow:none;
  --grabber:rgba(235,235,245,.33);
  --edge-dim:rgba(0,0,0,.38);
  --halo:0 0 12px rgba(0,0,0,.5);

  --r-card:28px;--r-sheet:42px;--r-group:26px;--r-inner:12px;--r-cap:999px;
  --gutter-l:max(16px, env(safe-area-inset-left));
  --gutter-r:max(16px, env(safe-area-inset-right));
  --measure:44rem;
  --bar-top:max(8px, env(safe-area-inset-top));
  --chrome-top:calc(var(--bar-top) + 44px);
  --tab-h:62px;--tab-min-s:.7742;
  --tab-side:21px;
  --tab-gap:max(21px, calc(env(safe-area-inset-bottom) - 13px));
  --chrome-bottom:calc(var(--tab-h) + var(--tab-gap));
  --sec-gap:32px;

  --ease-smooth:linear(0,.055,.175,.312,.445,.562,.66,.74,.803,.852,.89,.919,.94,.956,.968,.977,.983,.988,.991,.994,1);
  --dur-smooth:.6s;
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --dur-sheet:.5s;
  --ease-sky:linear(0,0,.001,.004,.012,.029,.056,.096,.15,.22,.304,.4,.503,.61,.713,.807,.886,.944,.981,.997,1);
  --dur-sky:3.5s;
  --dur-min:.45s;
  --dur-fade:.2s;
}

:root[data-theme="light"]{
  color-scheme:light;
  --label:#000;
  --label-2:rgba(60,60,67,.78);
  --label-3:rgba(60,60,67,.3);
  --label-4:rgba(60,60,67,.18);
  --label-2-sky:#3C3C43;
  --label-3-sky:rgba(60,60,67,.88);
  --fill-1:rgba(120,120,128,.2);
  --fill-2:rgba(120,120,128,.16);
  --fill-3:rgba(118,118,128,.12);
  --fill-4:rgba(116,116,128,.08);
  --fill-quiet:rgba(60,60,67,.10);
  --bg:#fff;
  --bg-grouped-2:#fff;
  --bg-elevated:#F2F2F7;
  --bg-elevated-2:#fff;
  --separator:rgba(60,60,67,.12);
  --blue:#0088FF;--green:#34C759;--yellow:#FFCC00;--orange:#FF8D28;--red:#FF383C;--purple:#CB30E0;
  --cyan:#00C0E8;--teal:#00C3D0;--mint:#00C8B3;--indigo:#6155F5;--pink:#FF2D55;--brown:#AC7F5E;--gray:#8E8E93;
  --fg-action:#0060C0;--fg-waiting:#8A5A00;--fg-settled:#18702F;--fg-caution:#A85A00;--fg-stop:#D70015;
  --fg-action-on-wash:#0052A8;--fg-waiting-on-wash:#6E4700;--fg-settled-on-wash:#135E27;--fg-caution-on-wash:#8A4700;--fg-stop-on-wash:#B0000F;
  --wash-action:rgba(0,136,255,.16);--wash-waiting:rgba(255,204,0,.16);--wash-settled:rgba(52,199,89,.16);
  --wash-caution:rgba(255,141,40,.16);--wash-stop:rgba(255,56,60,.16);
  --wash-action-strong:rgba(0,136,255,.2);
  --wash-blue:rgba(0,136,255,.14);--wash-purple:rgba(203,48,224,.14);--wash-green:rgba(52,199,89,.16);
  --wash-cyan:rgba(0,192,232,.16);--wash-pink:rgba(255,45,85,.14);--wash-indigo:rgba(97,85,245,.14);
  --wash-orange:rgba(255,141,40,.16);--wash-gray:rgba(142,142,147,.16);
  --focus:#0071E3;
  --glass-card-bg:rgba(255,255,255,.74);
  --glass-card-filter:blur(14px) saturate(180%) brightness(1.04);
  --glass-card-inner:inset 0 -10px 18px -12px rgba(110,110,150,.14);
  --glass-ctl-bg:rgba(255,255,255,.80);
  --glass-ctl-filter:blur(8px) saturate(180%);
  --glass-ctl-rim:rgba(255,255,255,.95);
  --glass-ctl-shadow:0 10px 30px rgba(20,20,60,.10),0 1px 3px rgba(20,20,60,.06);
  --glass-bar-floor:rgba(255,255,255,.80);
  --glass-bar-filter:blur(14px) saturate(180%);
  --glass-sheet-bg:rgba(250,250,252,.78);
  --glass-sheet-filter:blur(28px) saturate(180%);
  --sheet-rim:rgba(255,255,255,.9);
  --sheet-group:rgba(255,255,255,.72);
  --sheet-ctl-bg:rgba(255,255,255,.8);
  --sheet-ctl-rim:linear-gradient(155deg,#fff,rgba(255,255,255,.75) 40%,rgba(255,255,255,.9));
  --sheet-dim:rgba(0,0,0,.14);
  --tab-selected:rgba(120,120,128,.16);
  --seg-thumb:#fff;
  --seg-thumb-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
  --grabber:rgba(60,60,67,.3);
  --edge-dim:rgba(255,255,255,.35);
  --halo:0 0 10px rgba(255,255,255,.85);
}
html.sky-solid{--halo:none}
@media (min-width:768px){
  :root{--gutter-l:max(20px, env(safe-area-inset-left));--gutter-r:max(20px, env(safe-area-inset-right));--sec-gap:40px}
}
@media (orientation:landscape) and (max-height:500px){
  :root{--tab-h:50px;--tab-min-s:.96;
    --t-large:700 2.125rem/1.2 var(--font-text)}
}

body{--sky-rim:115 171 215}
body[data-sky="violet"]{--sky-rim:157 145 202}
body[data-sky="teal"]{--sky-rim:132 186 202}
body[data-sky="rose"]{--sky-rim:202 159 124}
body[data-sky="ash"]{--sky-rim:198 198 202}
body[data-sky="stop"]{--sky-rim:202 134 135}

body{--glass-rim:linear-gradient(155deg,rgb(var(--sky-rim) / .62) 0%,rgb(var(--sky-rim) / .3) 28%,rgb(var(--sky-rim) / .24) 62%,rgb(var(--sky-rim) / .52) 100%);
  --glass-ctl-bg:rgb(var(--sky-rim) / .12);
  --glass-bar-bg:linear-gradient(rgb(var(--sky-rim) / .12),rgb(var(--sky-rim) / .12)) var(--glass-bar-floor)}
:root[data-theme="light"] body{--glass-bar-bg:var(--glass-bar-floor);--glass-rim:linear-gradient(155deg,#fff,rgba(255,255,255,.75) 40%,rgba(255,255,255,.9));--glass-ctl-bg:rgba(255,255,255,.80)}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--chrome-top) + 16px);scroll-padding-bottom:calc(var(--chrome-bottom) + 16px)}
body{margin:0;background:transparent;color:var(--label);font:var(--t-body);overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video,iframe{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
strong,b{font-weight:600}
em{font-style:normal;font-weight:600}
code{font:.875em/1 var(--font-mono);padding:1px 5px;border-radius:6px;background:var(--fill-3)}
a{color:var(--link);text-decoration:none}

:is(p,li,dd,td,figcaption) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
html.js:not(.is-ready) *,html.js:not(.is-ready) *::before,html.js:not(.is-ready) *::after{transition:none!important}
html.is-sheet{overflow:hidden;scrollbar-gutter:stable}

.i{flex:none;inline-size:1.25rem;block-size:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.vh{position:absolute!important;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nobr{white-space:nowrap}
.nums{font-variant-numeric:tabular-nums}
html:not(.js) .js-only{display:none}
.skip{position:fixed;z-index:60;left:50%;top:var(--bar-top);padding:12px 18px;border-radius:var(--r-cap);white-space:nowrap;
  background:var(--label);color:var(--bg);font:var(--t-headline);transform:translate(-50%,-200%)}
.skip:focus{transform:translate(-50%,0)}

/* ---------- 3. Layout & type ---------- */
.wrap{inline-size:min(100% - var(--gutter-l) - var(--gutter-r), var(--measure));margin-inline:auto}
main.wrap{display:block}
.lt{padding-top:calc(var(--chrome-top) + 10px)}
.lt__title{font:var(--t-large);color:var(--label);overflow-wrap:break-word;text-wrap:balance;text-shadow:var(--halo)}
.lt__sub{margin-top:6px;font:var(--t-headline);color:var(--label-2-sky);text-shadow:var(--halo);text-wrap:balance}
@media (min-width:1024px){.lt{padding-top:calc(var(--chrome-top) + 32px)}}

/* ---------- 4. Sections ---------- */
.sec{margin-top:var(--sec-gap)}
.group{margin-top:24px}
.sec__head{display:flex;align-items:baseline;gap:7px;padding:0 16px 9px;text-shadow:var(--halo)}
.sec__icon{align-self:center;inline-size:20px;block-size:20px;stroke-width:1.75;color:var(--label-2-sky)}
.sec__title{flex:1 1 auto;min-width:0;font:var(--t-headline);color:var(--label-2-sky)}
.sec__detail{flex:0 1 auto;max-inline-size:55%;font:var(--t-footnote);color:var(--label-3-sky);text-align:right}
.sec__intro{padding:0 16px 12px;font:var(--t-subhead);color:var(--label-2-sky);text-shadow:var(--halo)}
.sec__foot{padding:8px 16px 0;font:var(--t-footnote);color:var(--label-2-sky);text-shadow:var(--halo)}
.intro{padding:0 16px 14px;text-shadow:var(--halo)}
.intro__title{font:var(--t-title3);color:var(--label);text-wrap:balance}
.intro__text{margin-top:6px;font:var(--t-subhead);color:var(--label-2-sky)}

:is(.sec,.group,.hero,figure) > :is(.card,.apart) + :is(.card,.apart,.receipt){margin-top:10px}

/* ---------- 5. Cards & rows ---------- */
.card{position:relative;isolation:isolate;display:block;border-radius:var(--r-card);overflow:hidden;overflow:clip;
  background:var(--glass-card-bg);-webkit-backdrop-filter:var(--glass-card-filter);backdrop-filter:var(--glass-card-filter)}
.card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:var(--glass-card-inner)}
.card--pad{padding:16px}
.card--text{padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;font:var(--t-body)}
.card--text > *{min-width:0}
.card--text a:not(.btn){overflow-wrap:anywhere}
.apart{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

.list > li{position:relative}
.list > li + li::before{content:"";position:absolute;z-index:1;top:0;left:var(--sep-l,16px);right:16px;block-size:1px;background:var(--separator);pointer-events:none}
.list--glyph{--sep-l:56px}.list--tile{--sep-l:60px}.list--avatar{--sep-l:68px}

.row{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-block-size:52px;padding:11px 16px;
  color:var(--label);text-decoration:none;transition:background-color .25s ease}
.row--top{align-items:flex-start}
.row--top > .row__chev{align-self:center}
.row--avatar{padding-block:13px}
.row__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.row__title{font:var(--t-body);font-weight:500;color:var(--label);overflow-wrap:break-word}
.row__sub{font:var(--t-subhead);color:var(--label-2);overflow-wrap:break-word}
.row__meta{margin-top:2px;font:var(--t-footnote);color:var(--label-2)}
.row__meta > .chip{margin-inline-start:6px}
.row__title > .chip{margin-inline-start:4px;vertical-align:1px}
.row__trail{flex:none;display:flex;align-items:center;gap:8px;font:var(--t-subhead);color:var(--label-2)}
.row__chev{flex:none;inline-size:14px;block-size:14px;stroke-width:3;color:var(--label-3);transition:transform .3s var(--ease-smooth)}
.row__ext{flex:none;inline-size:16px;block-size:16px;stroke-width:2.5;color:var(--label-3)}
a.row,summary.row,label.row{cursor:pointer}
a.row:active,summary.row:active{background:var(--fill-1);transition:none}
@media (hover:hover){a.row:hover,summary.row:hover{background:var(--fill-4)}}
.row:focus-visible{outline-offset:-3px}

.list > li:first-child > :is(a.row,.disc > .row),.apart > .card > :is(a.row,.disc > .row){border-start-start-radius:var(--r-card);border-start-end-radius:var(--r-card)}
.list > li:last-child > a.row,.list > li:last-child > .disc:not([open]) > .row,.apart > .card > a.row,.apart > .card > .disc:not([open]) > .row{border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card)}

.row__go{color:var(--fg-action);font:var(--t-footnote);font-weight:500;text-decoration:none}
.row__go::after,.row__link::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transition:background-color .25s ease}
.row__go:active::after,.row__link:active::after{background:var(--fill-1);transition:none}
@media (hover:hover){.row__go:hover::after,.row__link:hover::after{background:var(--fill-4)}}
.row__link{color:var(--label);text-decoration:none;overflow-wrap:anywhere}

.row__go,.row__link{padding-block:13px;margin-block:-13px}

.row__link[href^="mailto:"]{overflow-wrap:break-word}

@media (max-width:519px){
  .row:has(> .row__trail .copy){flex-wrap:wrap;row-gap:4px}
  .row:has(> .row__trail .copy) > .row__text{flex-basis:calc(100% - 1.75rem - 12px)}
  .row:has(> .row__trail .copy) > .row__trail{flex-basis:100%;padding-inline-start:calc(1.75rem + 6px);margin-block:-6px;gap:2px}
}
.row__go:focus-visible,.row__link:focus-visible{outline-offset:2px;border-radius:4px}
.row .pill{position:relative;z-index:1}

.disc > summary{list-style:none}
.disc > summary::-webkit-details-marker{display:none}
.disc[open] > summary > .row__chev{transform:rotate(90deg)}
.disc__body{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:2px 16px 16px}
.disc__body > *{min-width:0}
@media (min-width:560px){
  .list--avatar .disc__body{padding-left:68px}
  .list--tile .disc__body{padding-left:60px}
  .list--glyph .disc__body{padding-left:56px}
}
.disc__note{font:var(--t-subhead);color:var(--label-2)}
.disc__note b{color:var(--label)}
.disc__stack{font:var(--t-footnote);color:var(--label-2)}
.disc__stack b{color:var(--label)}
.disc__role{margin-top:4px;font:var(--t-subhead);color:var(--label)}
.disc__role b{font-weight:600}
.disc__when{display:block;font:var(--t-footnote);color:var(--label-2);font-variant-numeric:tabular-nums}

.more > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-block-size:44px;font:var(--t-subhead);font-weight:500;color:var(--fg-action);cursor:pointer}
.more > summary::-webkit-details-marker{display:none}
.more > summary > .i{inline-size:14px;block-size:14px;stroke-width:2.5;transition:transform .3s var(--ease-smooth)}
.more[open] > summary > .i{transform:rotate(180deg)}
.more > .bullets{margin-top:4px}

/* ---------- 6. Marks ---------- */
.avatar{--av:#4A5B7A;position:relative;flex:none;display:inline-grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;
  background:var(--av);background:linear-gradient(180deg,color-mix(in srgb,var(--av) 76%,#fff) 0%,var(--av) 68%);
  color:#fff;font:600 .95rem/1 var(--font-text);user-select:none}
.avatar--co{border-radius:28%}
.avatar--30{inline-size:30px;block-size:30px;font-size:.7rem}
.avatar--56{inline-size:3.5rem;block-size:3.5rem;font-size:1.33rem}
.av-1{--av:#3A4A6A}.av-2{--av:#5A3A6A}.av-3{--av:#3A5A4A}.av-4{--av:#6A4A3A}.av-5{--av:#4A3A5A}
.av-6{--av:#4A5B7A}.av-7{--av:#2C3E5A}.av-8{--av:#2C4A3E}.av-9{--av:#B36B2C}
.badge-dot{position:absolute;right:0;bottom:0;inline-size:10px;block-size:10px;border-radius:50%;background:var(--dot,var(--blue));box-shadow:0 0 0 2px var(--bg-grouped-2)}
.badge-dot--action{--dot:var(--blue)}.badge-dot--waiting{--dot:var(--yellow)}.badge-dot--settled{--dot:var(--green)}.badge-dot--stop{--dot:var(--red)}.badge-dot--fact{--dot:var(--purple)}

.tile{--ts:2rem;--tc:var(--blue);--tw:var(--wash-blue);position:relative;flex:none;display:inline-grid;place-items:center;inline-size:var(--ts);block-size:var(--ts);border-radius:30%;background:var(--tw);color:var(--tc)}
.tile > .i{inline-size:calc(var(--ts) * .46);block-size:calc(var(--ts) * .46);stroke-width:2.5}
.tile--40{--ts:2.5rem}
.list--avatar .tile:not(.tile--40){margin-inline:.25rem}
.tile--blue{--tc:var(--blue);--tw:var(--wash-blue)}.tile--purple{--tc:var(--purple);--tw:var(--wash-purple)}
.tile--green{--tc:var(--green);--tw:var(--wash-green)}.tile--cyan{--tc:var(--cyan);--tw:var(--wash-cyan)}
.tile--pink{--tc:var(--pink);--tw:var(--wash-pink)}.tile--indigo{--tc:var(--indigo);--tw:var(--wash-indigo)}
.tile--orange{--tc:var(--orange);--tw:var(--wash-orange)}.tile--gray{--tc:var(--label-2);--tw:var(--wash-gray)}
.tile--red{--tc:var(--red);--tw:var(--wash-stop)}

.tile--everything{--tc:#fff;background:linear-gradient(135deg,var(--blue),var(--purple),var(--pink),var(--cyan),var(--green))}
.tile--text{font:600 .75rem/1 var(--font-mono);letter-spacing:0}

.glyph{flex:none;display:inline-grid;place-items:center;inline-size:1.75rem;color:var(--label-2)}
.glyph > .i{inline-size:1.25rem;block-size:1.25rem;stroke-width:1.75}
.glyph--action{color:var(--fg-action)}.glyph--waiting{color:var(--fg-waiting)}.glyph--settled{color:var(--fg-settled)}
.glyph--caution{color:var(--fg-caution)}.glyph--stop{color:var(--fg-stop)}

.dot{display:inline-block;flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:var(--label-4)}
.dot--action{background:var(--blue)}.dot--waiting{background:var(--yellow)}.dot--settled{background:var(--green)}.dot--stop{background:var(--red)}

.chip{display:inline-flex;align-items:center;gap:4px;min-block-size:20px;padding:3px 8px;border-radius:var(--r-cap);
  max-inline-size:100%;font:var(--t-caption1);font-weight:500;line-height:14px;vertical-align:middle;background:var(--fill-3);color:var(--label-2)}
.row > .chip{flex:none;max-inline-size:50%}
.chip--action{background:var(--wash-action);color:var(--fg-action-on-wash)}
.chip--waiting{background:var(--wash-waiting);color:var(--fg-waiting-on-wash)}
.chip--settled{background:var(--wash-settled);color:var(--fg-settled-on-wash)}
.chip--caution{background:var(--wash-caution);color:var(--fg-caution-on-wash)}
.chip--stop{background:var(--wash-stop);color:var(--fg-stop-on-wash)}

/* ---------- 7. Controls ---------- */
.pill{--pill-bg:var(--fill-quiet);--pill-fg:var(--label);display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-block-size:44px;padding:0 13px;border:6px solid transparent;background-clip:padding-box;border-radius:var(--r-cap);
  max-inline-size:100%;background-color:var(--pill-bg);color:var(--pill-fg);font:var(--t-subhead);font-weight:600;text-align:center;text-decoration:none;
  cursor:pointer;transition:opacity .2s ease}
.pill > .i{inline-size:15px;block-size:15px;stroke-width:2.5}
.pill--primary{--pill-bg:var(--label);--pill-fg:var(--bg)}
.pill--tinted{--pill-bg:var(--wash-action-strong);--pill-fg:var(--fg-action-on-wash)}
.pill:active{opacity:.65;transition:none}
.pill:focus-visible{outline-offset:-4px}
.pill.is-done{--pill-bg:var(--wash-settled);--pill-fg:var(--fg-settled-on-wash)}

.btn{--btn-bg:var(--fill-3);--btn-fg:var(--label);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:50px;padding:0 22px;
  border:0;border-radius:var(--r-cap);background:var(--btn-bg);color:var(--btn-fg);font:var(--t-headline);text-decoration:none;cursor:pointer;transition:opacity .2s ease}
.btn > .i{inline-size:20px;block-size:20px;stroke-width:2.25}
.btn--inverse{--btn-bg:var(--label);--btn-fg:var(--bg)}
.btn.glass{--btn-bg:var(--glass-ctl-bg);background:var(--glass-ctl-bg)}
.btn--block{display:flex;inline-size:100%;max-inline-size:100%;min-width:0;text-align:center}
.btn:active{opacity:.65;transition:none}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions > .btn{flex:1 1 9rem}

.glass{position:relative;background:var(--glass-ctl-bg);-webkit-backdrop-filter:var(--glass-ctl-filter);backdrop-filter:var(--glass-ctl-filter);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--glass-ctl-shadow);color:var(--label)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-block-size:44px;min-inline-size:44px;padding:0 16px;
  border-radius:var(--r-cap);font:var(--t-headline);color:var(--label);text-decoration:none;cursor:pointer;
  transition:transform .15s ease,filter .15s ease}
.glass-btn--circle{inline-size:44px;padding:0}
.glass-btn:active{transform:scale(1.06);filter:brightness(1.15)}

.seg{--seg-n:3;--seg-i:0;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;min-block-size:32px;margin:0;padding:2px;border:0;border-radius:var(--r-cap);background:var(--fill-3)}
.seg::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;inline-size:calc((100% - 4px) / var(--seg-n));border-radius:var(--r-cap);
  background:var(--seg-thumb);box-shadow:var(--seg-thumb-shadow);transform:translateX(calc(var(--seg-i) * 100%));transition:transform var(--dur-smooth) var(--ease-smooth)}
.seg > legend{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.seg__opt{position:relative;z-index:1;display:grid;place-items:center;min-block-size:28px;padding:2px 4px;border-radius:var(--r-cap);
  font:var(--t-subhead);font-size:.875rem;line-height:1.1;text-align:center;color:var(--label);cursor:pointer}
.seg__opt::after{content:"";position:absolute;inset:-8px 0}
.seg__opt > input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg__opt.is-on{font-weight:600}
.seg__opt:has(> input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
@media (max-width:359px){.seg__opt{font-size:.8125rem}}

.switch{flex:none;appearance:none;-webkit-appearance:none;position:relative;inline-size:63px;block-size:28px;margin:0;border-radius:var(--r-cap);
  background:var(--fill-1);cursor:pointer;transition:background-color .25s ease}
.switch::before{content:"";position:absolute;top:2px;left:2px;inline-size:38px;block-size:24px;border-radius:var(--r-cap);background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.04);transition:transform .35s var(--ease-smooth)}
.switch:checked{background:var(--green)}
.switch:checked::before{transform:translateX(21px)}

/* ---------- 8. Content components ---------- */

.hero__claim{margin-top:14px;font:var(--t-title3);font-weight:400;color:var(--label);text-wrap:pretty;text-shadow:var(--halo)}
.hero__meta{margin-top:8px;font:var(--t-subhead);color:var(--label-2-sky);text-shadow:var(--halo);overflow-wrap:anywhere}
.hero__meta a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
:root[data-theme="light"] .hero__meta a{color:#00366F}
.hero > .actions{margin-top:16px}
.hero > .actions > .btn{flex:1 1 8rem;white-space:nowrap}
@media (max-width:359px){.hero > .actions > .btn{padding-inline:14px;gap:6px}}
@media (min-width:768px){.hero > .actions > .btn{flex:0 1 12rem}}
.hero > .sec__head{margin-top:var(--sec-gap)}

.work{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}
.work > *{min-width:0}
.work__head{display:flex;align-items:center;gap:12px}
.work__title{font:var(--t-title3)}
.work__title a{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--label);text-decoration:none}
.work__status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:2px;font:var(--t-footnote);color:var(--label-2)}
.work__why{font:var(--t-body)}
.work__flow{font:var(--t-footnote);font-family:var(--font-mono);color:var(--label-2);overflow-wrap:break-word}
.work__receipts{font:var(--t-subhead);color:var(--label-2);font-variant-numeric:tabular-nums}
.work__actions{display:flex;flex-wrap:wrap;gap:4px;margin:0 -6px -6px}
.stub{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--r-inner);background:var(--fill-4);font:var(--t-subhead);color:var(--label-2)}
.stub > .chip{flex:none;margin-top:1px;white-space:nowrap}
.stub > :not(.chip){min-width:0;overflow-wrap:anywhere}

.claims > .claim{position:relative;padding:11px 16px}
.claims > .claim + .claim::before{content:"";position:absolute;top:0;left:16px;right:16px;block-size:1px;background:var(--separator)}
.claim > dt{font:var(--t-footnote);color:var(--label-2);overflow-wrap:anywhere}
.claim > dd{margin-top:2px;font:var(--t-body);color:var(--label);overflow-wrap:anywhere}
.claim > dd > .bullets{margin-top:6px}
.claim__why{display:block;margin-top:6px;font:var(--t-footnote);color:var(--label-2)}
.claim__why b{color:var(--label)}
.claims--terms .claim > dt{font:var(--t-headline);color:var(--label)}
.claims--terms .claim > dd{font:var(--t-subhead)}
.disc__body > .claims > .claim{padding-inline:0}
.disc__body > .claims > .claim + .claim::before{left:0;right:0}

.bullets{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bullets > li{position:relative;min-width:0;padding-left:18px;font:var(--t-callout);color:var(--label);overflow-wrap:anywhere}
.bullets > li::before{content:"";position:absolute;left:3px;top:.5em;inline-size:6px;block-size:6px;border-radius:50%;background:var(--label-2)}
.bullets--sm > li{font:var(--t-subhead)}

.row__body{font:var(--t-subhead);color:var(--label-2)}
.row__body + .row__go{margin-top:-9px}
.kicker{font:var(--t-footnote);font-weight:600;color:var(--label-2)}

.stat{position:relative;display:flex;align-items:baseline;gap:12px;min-block-size:52px;padding:11px 16px}
.stat__n{flex:none;min-inline-size:5.25rem;font:var(--t-title2);font-variant-numeric:tabular-nums;color:var(--label);white-space:nowrap}
.stat__l{flex:1 1 auto;min-width:0;font:var(--t-subhead);color:var(--label-2)}

.timeline > li{position:relative;display:grid;grid-template-columns:minmax(0,5.75rem) minmax(0,1fr);gap:12px;padding:8px 0;font:var(--t-subhead)}
.timeline > li > *{min-width:0;overflow-wrap:anywhere}
@media (max-width:30em){.timeline > li{grid-template-columns:minmax(0,1fr);gap:2px}}
.timeline > li + li{border-top:1px solid var(--separator)}
.timeline__when{font:var(--t-footnote);font-weight:600;color:var(--label-2);font-variant-numeric:tabular-nums;padding-top:1px}

.mail{display:grid;gap:12px;padding:16px}
.mail__head{display:flex;align-items:center;gap:12px}
.mail__from{font:var(--t-headline)}
.mail__when{font:var(--t-footnote);color:var(--label-2)}
.mail__body{display:grid;gap:12px;font:400 1.0625rem/1.5 var(--font-mail);color:var(--label)}
.quote{display:grid;gap:8px;padding:16px}
.quote > blockquote{font:400 1.0625rem/1.5 var(--font-mail)}
.quote > figcaption{font:var(--t-footnote);color:var(--label-2)}

.trace > li{position:relative;display:flex;align-items:baseline;gap:12px;padding:10px 16px;font:var(--t-callout)}
.trace__who{flex:none;inline-size:4.75rem;font:var(--t-footnote);font-family:var(--font-mono);color:var(--label-2)}
.trace__what{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.trace__head{display:flex;align-items:center;gap:8px;padding:12px 16px 4px;font:var(--t-footnote);color:var(--label-2)}
.trace__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px 14px;font:var(--t-subhead);color:var(--label-2)}
.receipt{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.receipt__arrow{justify-self:center;color:var(--label-3);inline-size:20px;block-size:20px}
.proposal__label{font:var(--t-footnote);color:var(--label-2)}
.proposal__claim{margin-top:4px;font:var(--t-title3)}
.proposal__not{margin-top:4px;font:var(--t-footnote);color:var(--fg-waiting)}

.flow{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;padding:10px 10px 4px}
.flow + .flow{padding-top:0}
.flow__step{display:inline-flex;align-items:center}
.flow__arrow{inline-size:14px;block-size:14px;stroke-width:2.5;color:var(--label-3)}
.flow__label{flex-basis:100%;padding:6px 6px 0;font:var(--t-footnote);color:var(--label-2)}
.flow .pill[aria-pressed="true"]{--pill-bg:var(--label);--pill-fg:var(--bg)}
.flow .pill--caution{--pill-bg:var(--wash-caution);--pill-fg:var(--fg-caution-on-wash)}
.flow .pill--stop{--pill-bg:var(--wash-stop);--pill-fg:var(--fg-stop-on-wash)}
.flow .pill:disabled{min-block-size:20px;margin:6px 3px;padding:3px 8px;border-width:0;font:var(--t-caption1);font-weight:500;line-height:14px;cursor:default;opacity:1}
.flow .pill:disabled[aria-pressed="true"]{--pill-bg:var(--fill-2);--pill-fg:var(--label)}
.flow__detail{position:relative;padding:12px 16px 16px;font:var(--t-subhead);color:var(--label-2)}
.flow__detail::before{content:"";position:absolute;top:0;left:16px;right:16px;block-size:1px;background:var(--separator)}
.flow__detail strong{display:block;margin-bottom:2px;font:var(--t-headline);color:var(--label)}

.table{inline-size:100%;border-collapse:collapse;font:var(--t-subhead)}
.table th,.table td{padding:10px 0;text-align:left;vertical-align:top;border-top:1px solid var(--separator)}
.table thead th{border-top:0;padding-top:0;font:var(--t-footnote);color:var(--label-2)}
.table td:first-child{inline-size:42%;padding-right:12px;color:var(--label-2)}
@media (max-width:559px){
  .table thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .table tr{display:block;padding:10px 0;border-top:1px solid var(--separator)}
  .table tbody tr:first-child{border-top:0}
  .table td{display:block;inline-size:auto;padding:0;border:0}
  .table td:first-child{font:var(--t-footnote);color:var(--label-2)}
}

.frame__bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px;padding:4px 4px 4px 16px}
.frame__bar::after{content:"";position:absolute;left:0;right:0;bottom:0;block-size:1px;background:var(--separator)}
.frame__view{display:block;inline-size:100%;block-size:900px;border:0;background:transparent}

/* ---------- 9. Chrome ---------- */

.topbar{position:fixed;z-index:40;inset:0 0 auto 0;display:flex;align-items:center;gap:8px;min-block-size:calc(var(--chrome-top) + 8px);
  padding:var(--bar-top) var(--gutter-r) 8px var(--gutter-l);pointer-events:none}
.topbar > *{pointer-events:auto}
.topbar::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;background:var(--edge-dim);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent);
  opacity:0;transition:opacity var(--dur-fade) ease}
html.is-scrolled .topbar::before{opacity:1}
.topbar__title{position:absolute;left:50%;top:calc(var(--bar-top) + 22px);transform:translate(-50%,-50%);
  max-inline-size:calc(100% - 2 * (62px + 16px + 8px));font:var(--t-headline);color:var(--label);text-shadow:var(--halo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--dur-fade) ease;pointer-events:none}
html.is-titled .topbar__title{opacity:1}
.topbar__account{margin-left:auto;inline-size:62px;padding:0}
.topbar__back > .i{inline-size:22px;block-size:22px;stroke-width:2.25}

.topbar .glass,.tabbar .glass{background:var(--glass-bar-bg);-webkit-backdrop-filter:var(--glass-bar-filter);backdrop-filter:var(--glass-bar-filter)}

.tabbar{position:fixed;z-index:40;left:max(var(--tab-side), env(safe-area-inset-left));right:max(var(--tab-side), env(safe-area-inset-right));bottom:var(--tab-gap);
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.tabbar > *{pointer-events:auto}
.tabbar__tabs{position:relative;flex:none;display:grid;grid-template-columns:repeat(3,1fr);inline-size:calc(100% - var(--tab-h) - 8px);block-size:var(--tab-h);
  padding:6px 4px;border-radius:var(--r-cap);clip-path:inset(0 0 0 0 round calc(var(--tab-h) / 2));
  transition:clip-path var(--dur-min) var(--ease-smooth),translate var(--dur-min) var(--ease-smooth)}
.tabbar__thumb{position:absolute;top:6px;bottom:6px;left:4px;inline-size:calc((100% - 8px) / 3);border-radius:var(--r-cap);background:var(--tab-selected);
  transform:translateX(calc(var(--sel,0) * 100%));pointer-events:none;transition:opacity var(--dur-fade) ease}
.tabbar[data-sel="1"]{--sel:1}.tabbar[data-sel="2"]{--sel:2}
.tabbar[data-sel="none"] .tabbar__thumb{display:none}
.tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-inline-size:44px;min-block-size:44px;
  border-radius:var(--r-cap);color:var(--label);text-decoration:none;font:var(--t-tab);transition:opacity var(--dur-fade) ease,transform .15s ease,translate var(--dur-min) var(--ease-smooth)}
.tab > .i,.tabbar__ask > .i{inline-size:24px;block-size:24px;stroke-width:1.9}
.tab:active,.tabbar__ask:active{transform:scale(1.06)}
.tab:focus-visible{outline-offset:-3px}
.tabbar__ask{flex:none;display:flex;align-items:center;justify-content:center;inline-size:var(--tab-h);block-size:var(--tab-h);
  border-radius:50%;color:var(--label);text-decoration:none;
  transform-origin:100% 100%;transition:scale var(--dur-min) var(--ease-smooth),translate var(--dur-min) var(--ease-smooth),transform .15s ease}
.tabbar__ask > .i{transition:scale var(--dur-min) var(--ease-smooth)}

.tabbar.is-min .tabbar__tabs{clip-path:inset(calc(var(--tab-h) - 48px) calc(100% - 48px) 0 0 round 24px)}
.tabbar.is-min .tab:not([aria-current="page"]){opacity:0;pointer-events:none;transition-duration:.12s}
.tabbar.is-min .tab[aria-current="page"]{translate:calc(20px - (var(--sel,0) + .5) * 100%) calc(var(--tab-h) / 2 - 24px)}
.tabbar.is-min .tabbar__thumb{opacity:0}
.tabbar::before,.tabbar::after{content:"";position:absolute;left:0;bottom:0;inline-size:48px;block-size:48px;border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity var(--dur-min) var(--ease-smooth)}
.tabbar::before{left:-24px;bottom:-27px;inline-size:96px;block-size:96px;border-radius:0;
  background:radial-gradient(circle at 50% calc(50% - 3px),transparent 24px,var(--tab-min-shade,rgba(0,0,0,.3)) 24.5px,transparent 48px)}
:root[data-theme="light"] .tabbar{--tab-min-shade:rgba(20,20,60,.09)}
.tabbar::after{z-index:2;padding:1px;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tabbar.is-min::before,.tabbar.is-min::after{opacity:1}
.tabbar__tabs::before{transition:opacity var(--dur-min) var(--ease-smooth)}
.tabbar.is-min .tabbar__tabs::before{opacity:0}
.tabbar.is-min .tabbar__ask{scale:var(--tab-min-s)}
.tabbar.is-min .tabbar__ask > .i{scale:calc(1 / var(--tab-min-s))}
.tabbar.is-min .tab__label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
@media (max-width:767px) and (min-height:501px){
  .tab__label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tab > .i{inline-size:26px;block-size:26px}
}
@media (min-width:768px){

  .tabbar{left:50%;right:auto;inline-size:calc(296px + 8px + var(--tab-h));transform:translateX(-50%)}
  .tabbar__tabs{inline-size:296px}

  .tabbar.is-min .tabbar__tabs,.tabbar::before,.tabbar::after{translate:calc(100px + var(--tab-h) / 2) 0}
  .tabbar.is-min .tabbar__ask{translate:calc(-100px - var(--tab-h) / 2) 0}
}
@media (orientation:landscape) and (max-height:500px){
  .tabbar__thumb{top:5px;bottom:5px}
  .tabbar__tabs{padding:5px 4px}
  .tab{flex-direction:row;gap:6px;font-size:.75rem}
  .tab > .i,.tabbar__ask > .i{inline-size:20px;block-size:20px}
}

@media (min-width:1024px){
  :root{--tab-h:48px;--chrome-bottom:24px}
  .topbar{padding-inline:max(var(--gutter-l), calc((100% - var(--measure)) / 2)) max(var(--gutter-r), calc((100% - var(--measure)) / 2))}
  .topbar__title{display:none}
  .tabbar{top:calc(var(--bar-top) + 22px - var(--tab-h) / 2);bottom:auto;align-items:center}
  .tabbar__thumb{top:5px;bottom:5px}
  .tabbar__tabs{padding:5px 4px}
  .tab{flex-direction:row;gap:6px;font-size:.8125rem}
  .tab > .i,.tabbar__ask > .i{inline-size:20px;block-size:20px}
}

.sheet{position:fixed;inset:calc(var(--bar-top) + 10px) 0 0 0;margin:0;padding:0;border:0;inline-size:auto;max-inline-size:none;
  block-size:auto;max-block-size:none;
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;overflow:hidden;color:var(--label);
  background:var(--bg-elevated);
  box-shadow:inset 0 1px 0 var(--sheet-rim),0 -10px 40px rgba(0,0,0,.25);
  transform:translateY(calc(100% + 16px));transition:transform var(--dur-sheet) var(--ease-sheet)}
.sheet .sgroup{background:var(--bg-elevated-2)}

@media (orientation:landscape) and (max-height:500px){
  .sheet{left:0;right:0;margin-inline:auto;inline-size:min(560px, 100% - 2 * max(8px, env(safe-area-inset-left), env(safe-area-inset-right)))}
}
.sheet[open]{display:flex;flex-direction:column}
.sheet.is-in{transform:none}
.sheet.is-dragging{transition:none}
.sheet::backdrop{background:var(--sheet-dim)}
.sheet__bar{position:relative;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:14px 16px 8px;touch-action:none}
.sheet__grab{position:absolute;top:5px;left:50%;inline-size:36px;block-size:5px;margin-left:-18px;border-radius:2.5px;background:var(--grabber)}
.sheet__title{grid-column:2;font:var(--t-headline);text-align:center}
.sheet__done{grid-column:3;justify-self:end;inline-size:72px;min-block-size:44px;padding:0}
.sheet .glass{background:var(--sheet-ctl-bg);--glass-rim:var(--sheet-ctl-rim)}
.sheet__scroll{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding:8px 0 calc(20px + env(safe-area-inset-bottom))}
.sgroup{margin:0 16px;border-radius:var(--r-group);background:var(--sheet-group);overflow:hidden;overflow:clip}
.sgroup + .sgroup,.sgroup__foot + .sgroup{margin-top:20px}
.sgroup__foot{margin:8px 32px 0;font:var(--t-footnote);color:var(--label-2)}
.sgroup > .list:not(:first-child) > li:first-child::before{content:"";position:absolute;z-index:1;top:0;left:16px;right:16px;block-size:1px;background:var(--separator)}
.sheet__fine{margin:24px 32px 0;font:var(--t-footnote);color:var(--label-2);text-align:center}
.sheet__me .sheet__name{font:var(--t-title3)}
.row--stack{flex-direction:column;align-items:stretch;gap:10px}

.row--pick{position:relative}
.pick{position:relative;flex:none;display:flex;align-items:center;gap:4px;color:var(--fg-action);font:var(--t-body)}
.pick > select{position:absolute;inset:-12px -16px -12px -100vw;inline-size:auto;opacity:0;cursor:pointer;font-size:16px}
.pick > .i{inline-size:16px;block-size:16px;stroke-width:2.25}
.row--pick:has(select:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}
.row--act{inline-size:100%;justify-content:flex-start;font:var(--t-body);color:var(--fg-action);text-align:start}
@media (min-width:768px) and (min-height:501px){
  .sheet{inset:0;margin:auto;inline-size:min(540px, 100% - 48px);block-size:fit-content;
    max-block-size:min(760px, 100vh - 48px);max-block-size:min(760px, 100dvh - 48px);border-radius:var(--r-sheet);
    background:var(--glass-sheet-bg);-webkit-backdrop-filter:var(--glass-sheet-filter);backdrop-filter:var(--glass-sheet-filter);
    box-shadow:inset 0 0 0 1px var(--sheet-rim),0 20px 60px rgba(0,0,0,.35);
    transform:translateY(16px) scale(.97);opacity:0;transition:transform .35s var(--ease-smooth),opacity .25s ease}
  .sheet.is-in{transform:none;opacity:1}
  .sheet__grab{display:none}
  .sheet__scroll{padding-bottom:24px}
  .sheet .sgroup{background:var(--sheet-group)}
}

html.is-sheet::before{filter:brightness(.7);transition:filter .8s ease-in-out}
html[data-theme="light"].is-sheet::before{filter:brightness(.95)}

/* ---------- 10. Footer ---------- */
.foot{padding:40px 16px calc(var(--chrome-bottom) + 28px);font:var(--t-footnote);color:var(--label-2-sky);text-shadow:var(--halo)}
.foot p + p{margin-top:4px}
.foot a{display:inline-block;padding-block:13px;margin-block:-13px;color:var(--label-2-sky);text-decoration:underline;text-underline-offset:.18em}

/* ---------- 11. Preferences ---------- */
/* Touch devices: content cards are a tinted pane with no backdrop blur. A blur per card,
   repainted on every scroll over a fixed sky, stalls mobile browsers; the floating bars and
   the sheet keep real glass, so the control layer still reads as glass. */
@media (pointer:coarse){
  .card{background:rgba(30,30,40,.58);-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-theme="light"] .card{background:rgba(255,255,255,.84)}
  .glass:not(.topbar .glass):not(.tabbar .glass){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(60,60,72,.62)}
  :root[data-theme="light"] .glass:not(.topbar .glass):not(.tabbar .glass){background:rgba(255,255,255,.88)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card{background:rgba(28,28,30,.86)} :root[data-theme="light"] .card{background:rgba(255,255,255,.92)}
  .glass,.topbar .glass,.tabbar .glass{background:rgba(44,44,46,.92)} :root[data-theme="light"] :is(.glass,.topbar .glass,.tabbar .glass){background:rgba(255,255,255,.94)}
  .sheet{background:var(--bg-elevated)}
}
@media (prefers-reduced-transparency:reduce){

  .card{background:var(--bg-grouped-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .card::before,.card::after{display:none}
  .glass,.topbar .glass,.tabbar .glass{background:var(--bg-elevated-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass::before{display:none}
  .sheet{background:var(--bg-elevated);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sgroup,.sheet .sgroup{background:var(--bg-elevated-2)}
  .topbar::before{inset:0;background:var(--bg-elevated);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
  :root{--halo:none}
}
@media (prefers-contrast:more){
  :root{--label-2:rgba(235,235,245,.8);--separator:rgba(235,235,245,.32);--glass-card-bg:rgba(28,28,30,.8);--glass-ctl-rim:rgba(235,235,245,.6);--label-3-sky:var(--label-2-sky)}
  :root[data-theme="light"]{--label-2:rgba(60,60,67,.88);--label-2-sky:rgba(60,60,67,.96);--separator:rgba(60,60,67,.4);--glass-card-bg:rgba(255,255,255,.94);--glass-ctl-rim:rgba(60,60,67,.5);--label-3-sky:var(--label-2-sky)}
  .card::before{background:var(--label-2)}
  .glass::before{background:var(--glass-ctl-rim)}
  :is(p,li,dd,td,figcaption) a:not([class]){text-decoration-thickness:2px}
}
@media (forced-colors:active){
  .card,.glass,.topbar .glass,.tabbar .glass,.sheet,.sgroup,.sheet .sgroup{background:Canvas;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
  .card::before,.card::after,.glass::before,.topbar::before{display:none}
  .topbar{background:Canvas;border-block-end:1px solid CanvasText}
  .chip{border:1px solid CanvasText}
  .pill{border:1px solid ButtonText;min-block-size:32px;margin-block:6px;background-clip:border-box}
  .btn{border:1px solid ButtonText}
  .tab[aria-current="page"]{outline:2px solid Highlight;outline-offset:-4px}
  .tabbar__thumb{display:none}
  .seg__opt.is-on{outline:2px solid Highlight}
  .switch{border:1px solid ButtonText}
  .switch:checked{background:Highlight}
  .avatar,.tile{border:1px solid CanvasText}
  svg.i{color:inherit}
  :focus-visible{outline-color:Highlight}
}
@media (prefers-reduced-motion:reduce){
  .tabbar__tabs,.tabbar__ask,.tabbar__ask > .i,.row__chev,.more > summary > .i,.seg::before,.switch::before,.glass-btn,.tab{transition:none}
  .glass-btn:active,.tab:active,.tabbar__ask:active{transform:none}
  .sheet,.sheet.is-in{transform:none}
  .sheet{opacity:0;transition:opacity .2s ease}
  .sheet.is-in{opacity:1}
}

/* ---------- 12. Print ---------- */
@media print{

  :root,:root[data-theme]{color-scheme:light;--label:#000;--label-2:#444;--label-3:#888;--label-4:#bbb;--label-2-sky:#444;--label-3-sky:#555;
    --separator:#ccc;--fill-1:#e4e4e8;--fill-2:#e8e8ec;--fill-3:#eee;--fill-4:#f4f4f4;--fill-quiet:#eee;
    --bg:#fff;--bg-grouped-2:#fff;--bg-elevated:#fff;--bg-elevated-2:#fff;
    --blue:#0088FF;--green:#34C759;--yellow:#FFCC00;--orange:#FF8D28;--red:#FF383C;--purple:#CB30E0;
    --cyan:#00C0E8;--teal:#00C3D0;--mint:#00C8B3;--indigo:#6155F5;--pink:#FF2D55;--brown:#AC7F5E;--gray:#8E8E93;
    --fg-action:#0040a0;--fg-waiting:#6E4700;--fg-settled:#135E27;--fg-caution:#8A4700;--fg-stop:#B0000F;
    --fg-action-on-wash:#0040a0;--fg-waiting-on-wash:#6E4700;--fg-settled-on-wash:#135E27;--fg-caution-on-wash:#8A4700;--fg-stop-on-wash:#B0000F;
    --wash-action:#E5F0FF;--wash-waiting:#FFF6D6;--wash-settled:#E3F6E8;--wash-caution:#FFEEDD;--wash-stop:#FFE3E3;--wash-action-strong:#DCEBFF;
    --wash-blue:#E5F0FF;--wash-purple:#F7E6FA;--wash-green:#E3F6E8;--wash-cyan:#DFF6FC;--wash-pink:#FFE5EB;--wash-indigo:#ECEAFE;--wash-orange:#FFEEDD;--wash-gray:#EEEEF0;
    --link:#0040a0;--halo:none;--glass-ctl-bg:#fff;--glass-card-bg:#fff}
  body{--glass-ctl-bg:#fff;--glass-bar-bg:#fff}
  html,body{background:#fff!important}
  .topbar,.tabbar,.sheet,.skip,.frame__view,.copy,.sky,.sky-veil{display:none!important}
  .card,.sgroup{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #bbb}
  .card::before,.card::after,.glass::before{display:none}
  .glass,.btn.glass{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #bbb;box-shadow:none;color:#000}
  .btn--inverse,.pill--primary,.flow .pill[aria-pressed="true"]{background:#fff!important;color:#000!important;border:1px solid #000}
  .avatar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tile{--tc:#000}
  .row,.claim,.stat,.trace > li,.apart > .card{break-inside:avoid}
  .row__chev,.row__ext{display:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#444;word-break:break-all}
  main a.btn::after,main a.row::after{content:none}
  .lt{padding-top:0}
  .foot{padding-bottom:0}
}