/* You and Settings in the Sheet layer (23 Sep 2026). Loaded after sheet.css; uses its tokens. */

/* ---------- motion: Settings covers the web header, so the header travels with its page ---------- */
@supports(view-transition-name:eyeshot-page){:root[data-navigation-cover] .web-header{view-transition-name:none}}

/* =====================================================================
   You — one greeting, one record card, recent results, quiet link rows.
   ===================================================================== */
:root #stats-body{gap:0}
:root #dlg-stats[data-personal-panel=overview] #stats-body>*+*{margin-top:18px}
:root #dlg-stats:not([data-personal-panel=overview]) :is(#stats-body>.you-identity,#you-record,.you-recovered){display:none}
/* The gear opens Settings from You on every surface, top right of the title. */
:root .web-app #dlg-stats[data-personal-panel=overview] .destination-header>.you-settings{display:grid}
:root #dlg-stats .you-settings{width:44px;height:44px;place-items:center;border-radius:50%;background:transparent;border:0;color:var(--es-ink);box-shadow:none}
:root #dlg-stats .you-settings svg{width:24px;height:24px}
:root #dlg-stats .you-settings:active{background:var(--band-none)}

/* greeting: small mark, the name, one line */
:root #dlg-stats .you-identity.is-greeting{display:flex;flex-direction:row;align-items:center;gap:12px;padding:0;margin:0;text-align:left}
:root #dlg-stats .you-identity.is-greeting::before{display:none}
:root #dlg-stats .you-identity.is-greeting>:is(img,.profile-initial){width:40px;height:40px;flex:0 0 40px;min-width:40px;box-shadow:none;border:1px solid var(--es-line);background:var(--es-surface);font-size:.9rem}
:root #dlg-stats .you-identity.is-greeting>.profile-initial .ui-icon{width:20px;height:20px}
:root #dlg-stats .you-identity.is-greeting b{font:700 1rem/1.25 var(--font-ui);letter-spacing:0;color:var(--es-ink)}
:root #dlg-stats .you-identity.is-greeting p{margin:2px 0 0;font-size:.9rem;line-height:1.35;color:var(--es-ink-2)}

/* the record card: four equal facts on a two-by-two drafting grid. The rules
   cross under a small coral registration mark; the streak's rest-day rule is
   a footnote, keyed to its label by a coral asterisk. */
#you-record{display:grid;gap:14px}
.you-record{display:grid;margin:0;background:var(--es-surface);color:var(--es-ink);border:1px solid var(--es-line);border-radius:18px;box-shadow:var(--es-shadow-soft);overflow:hidden}
.you-record-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:1fr;margin:0}
.you-record-grid::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);pointer-events:none;background:linear-gradient(var(--es-coral),var(--es-coral)) center/100% 1.5px no-repeat,linear-gradient(var(--es-coral),var(--es-coral)) center/1.5px 100% no-repeat}
.you-record-cell{display:grid;align-content:start;gap:7px;min-width:0;padding:14px 16px 13px}
.you-record-cell:nth-child(even){border-left:1px solid var(--es-line)}
.you-record-cell:nth-child(n+3){border-top:1px solid var(--es-line)}
.you-record .es-eyebrow{font-size:max(11px,.69rem)}
.you-record-fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin:0;min-width:0}
.you-big{font:900 2.45rem/.9 var(--display);letter-spacing:.005em;font-variant-numeric:tabular-nums;color:var(--es-ink)}
.you-of{font:700 .82rem/1.2 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--es-ink-3)}
/* Fine print under the streak figure: a footnote, not a caption. */
#dlg-stats .you-record-fine{margin:-3px 0 0;font:400 max(8px,.44rem)/1.25 var(--font-ui);letter-spacing:.01em;color:var(--es-ink-3)}
@media (max-width:359px){.you-record-cell{padding-inline:13px}}
:root #dlg-stats .you-play{width:100%;min-height:54px;justify-content:center;gap:10px;font-size:1.05rem}
:root #dlg-stats .you-play svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root #dlg-stats .you-recovered{width:100%}

/* empty */
:root #dlg-stats .you-empty{display:grid;justify-items:center;gap:6px;padding:26px 18px 22px;text-align:center;background:var(--es-surface);border:1px solid var(--es-line);border-style:solid;border-radius:18px;box-shadow:var(--es-shadow-soft)}
.you-empty-mark{display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;border-radius:50%;color:var(--es-coral);background:var(--es-me)}
.you-empty-mark .ui-icon,.you-empty-mark svg{width:26px;height:26px}
/* The eye sits straight on its disc: the old logo's dark tile does not match any surface. */
.stats-empty .you-empty-mark .brand-symbol{width:34px;height:34px;padding:0;border:0;border-radius:0;background:none}
:root #dlg-stats .you-empty h3{margin:0;font:900 1.7rem/1 var(--display);color:var(--es-ink);letter-spacing:.005em}
.you-empty p{margin:0;max-width:30ch;color:var(--es-ink-2);font-size:.92rem;line-height:1.4}

/* recent results */
.you-recent{display:grid;gap:4px}
.you-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
:root #dlg-stats .you-section-head h3{margin:0;font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
.you-see-all{font-size:.9rem;min-height:44px;margin-right:-4px}
.you-days{list-style:none;margin:0;padding:0;border-top:1px solid var(--es-line)}
.you-days>li{border-bottom:1px solid var(--es-line)}
.you-day{display:grid;grid-template-columns:minmax(0,1fr) auto 3.2ch 16px;align-items:center;gap:12px;width:100%;min-height:58px;padding:8px 2px;background:none;border:0;border-radius:0;color:var(--es-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.you-day:active{background:var(--band-none)}
.you-day-date{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.you-day-total{font:700 1.1rem/1 var(--font-ui);text-align:right;font-variant-numeric:tabular-nums}
.you-day>.ui-icon,.you-link>.ui-icon{width:16px;height:16px;color:var(--es-ink-3)}

/* link rows */
.you-links{display:grid;margin-top:6px;border-top:1px solid var(--es-line)}
.you-link{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:14px;width:100%;min-height:66px;padding:10px 2px;background:none;border:0;border-bottom:1px solid var(--es-line);border-radius:0;color:var(--es-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.you-link:active{background:var(--band-none)}
.you-link-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--band-none);color:var(--es-ink-2)}
.you-link-icon svg{width:22px;height:22px}
.you-link-text{display:grid;gap:2px;min-width:0}
.you-link-text b{font-weight:700;font-size:1rem}
.you-link-text small{font-size:.84rem;line-height:1.3;color:var(--es-ink-2);overflow-wrap:anywhere}
.you-day:focus-visible,.you-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:8px}

/* Sub-pages (Stats, Shots, History) keep their structure on the new materials. */
:root #dlg-stats :is(.personal-card,.period-summary>div,.profile-family-index,.shot-collection-gateway,.practice-pocket,.you-study,.recent-activity ol,.history-list){border-color:var(--es-line)}
:root #dlg-stats :is(.personal-card,.profile-family-index,.shot-collection-gateway,.period-summary>div){background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
:root #dlg-stats .personal-page-back{color:var(--es-ink-2)}

/* Stats: the trend by your score or against each day's players (24 Sep).
   The measure is a compact control under the heading; one summary line reads
   the period in that measure; the tooltip drops below a high point so it never
   climbs into the controls; Vs players draws the field's middle as a datum. */
#dlg-stats .stats-trend .profile-section-heading{margin-bottom:10px}
:root #dlg-stats .stats-trend .trend-metric{display:inline-flex;width:auto;max-width:100%;margin:0 0 12px;vertical-align:top}
:root #dlg-stats .stats-trend .trend-metric>button{flex:0 1 auto;padding:8px 16px}
#dlg-stats .trend-summary{display:grid;gap:5px;margin:0 0 34px;font:400 .95rem/1.3 var(--font-ui);color:var(--es-ink-2)}
#dlg-stats .trend-summary b{font:900 1.7rem/1 var(--display);letter-spacing:.01em;color:var(--es-ink);font-variant-numeric:tabular-nums}
#dlg-stats .trend-summary .trend-of{margin-left:1px;font:700 .82rem/1 var(--font-ui);color:var(--es-ink-3)}
#dlg-stats .trend-summary>small{font:400 .8rem/1.3 var(--font-ui);color:var(--es-ink-3)}
.stats-trend .trend-tooltip.is-below{transform:translate(-50%,16px)}
.stats-trend .trend-datum{fill:none;stroke:var(--es-ink-3);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.7}
#dlg-stats [data-progress-metric=comparison] .trend-axis>span:nth-child(2){color:var(--es-ink)}

/* =====================================================================
   Settings — grouped flat list on the grid.
   ===================================================================== */
:root #account-body{display:grid;gap:26px}
:root #dlg-account #account-body>h2{margin:0}
.ys-group{display:grid;gap:8px;margin:0}
:root #dlg-account :is(.ys-group>h3.es-eyebrow,.appearance-setting>legend.es-eyebrow){margin:0;padding:0 2px;font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
.ys-list{display:grid;border-top:1px solid var(--es-line)}
.ys-list>*{border-bottom:1px solid var(--es-line)}
:root #dlg-account .ys-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0;padding:12px 2px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--es-ink);font:500 1rem/1.3 var(--font-ui);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Pressed row: an edge-to-edge highlight drawn behind the row, rounded to the
   card's corners on the first and last rows, so it never reads as a box. */
:root #dlg-account .ys-row{position:relative;z-index:0}
:root #dlg-account .ys-row:active{background:none}
:root #dlg-account .ys-row:active::before{content:"";position:absolute;inset:0 -16px;z-index:-1;background:var(--band-none)}
:root #dlg-account .ys-list>:first-child.ys-row:active::before,:root #dlg-account .ys-list>:first-child>.ys-row:active::before{border-radius:15px 15px 0 0}
:root #dlg-account .ys-list>:last-child.ys-row:active::before,:root #dlg-account .ys-list>:last-child>.ys-row:active::before{border-radius:0 0 15px 15px}
:root #dlg-account .ys-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:8px}
.ys-label{flex:1;min-width:0;overflow-wrap:anywhere}
.ys-value{color:var(--es-ink-2);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
:root #dlg-account .ys-row>.ui-icon{width:16px;height:16px;flex:0 0 16px;color:var(--es-ink-3)}
:root #dlg-account .ys-row.is-danger,:root #dlg-account .ys-row.is-danger .ys-label{color:var(--es-coral);font-weight:700}
:root #dlg-account .ys-row.setting-switch{cursor:pointer}
:root #dlg-account .ys-row.setting-switch .ys-label{display:grid;gap:3px}
:root #dlg-account .setting-note{font-size:.8rem;line-height:1.35;color:var(--es-ink-2)}
:root #dlg-account details>summary.ys-row{list-style:none}
:root #dlg-account details>summary.ys-row::-webkit-details-marker{display:none}
:root #dlg-account details>summary.ys-row>.ui-icon{transition:transform .18s ease}
:root #dlg-account details[open]>summary.ys-row>.ui-icon{transform:rotate(90deg)}
.ys-drawer{display:grid;gap:10px;padding:2px 2px 16px}
.ys-drawer .subtle{margin:0;font-size:.85rem}
:root #dlg-account .ys-drawer .btn{min-height:48px}
:root #dlg-account .ys-drawer .btn.danger{color:var(--es-coral)}
.ys-blocked:empty{display:none}
:root #dlg-account .ys-blocked .blocked-players{margin:0;padding:0;border:0;background:none;box-shadow:none}
:root #dlg-account .ys-blocked .blocked-players>summary{min-height:56px;display:flex;align-items:center;padding:0 2px;font-weight:500}

/* identity as the first row of Account */
:root #dlg-account .ys-list>.profile-identity{display:flex;flex-direction:row;align-items:center;gap:14px;margin:0;padding:12px 2px;text-align:left}
:root #dlg-account .ys-list>.profile-identity::before{display:none}
:root #dlg-account .ys-list>.profile-identity>:is(img,.profile-initial){width:44px;height:44px;min-width:44px;flex:0 0 44px;font-size:.95rem;box-shadow:none;border:1px solid var(--es-line);background:var(--es-surface)}
:root #dlg-account .ys-list>.profile-identity>.profile-initial .ui-icon{width:22px;height:22px}
:root #dlg-account .ys-list>.profile-identity b{font:700 1.02rem/1.25 var(--font-ui);letter-spacing:0}
:root #dlg-account .ys-list>.profile-identity p{margin:2px 0 0;font-size:.85rem}

/* inline sign-in: provider buttons sit in the list as solid controls */
:root #dlg-account .ys-auth{padding:12px 0}
:root #dlg-account .ys-auth:empty{display:none}
:root #dlg-account .ys-auth .signin-provider-rows{display:grid;gap:10px}
:root #dlg-account .ys-auth [data-preview-label]{margin:0 2px 2px;font-size:.8rem;color:var(--es-ink-2)}
:root #dlg-account .ys-auth .signin-provider-rows :is(.signin-apple,.signin-google){min-height:50px;border-radius:14px;background:var(--es-surface);border:1px solid var(--es-line-strong);box-shadow:var(--es-shadow-soft);color:var(--es-ink)}
:root #dlg-account .ys-auth .signin-provider-rows>:is(.signin-apple,[data-google],.signin-more,.signin-provider-connected)+:is(.signin-apple,[data-google],.signin-more,.signin-provider-connected){border-top:0}
:root #dlg-account .ys-auth .signin-more>summary,:root #dlg-account .ys-auth .signin-provider-connected{min-height:48px;padding:10px 2px;background:none;border:0;color:var(--es-ink)}
:root #dlg-account .ys-auth .signin-more>summary{justify-content:center;color:var(--es-ink-2);font-size:.92rem;text-decoration:underline;text-decoration-color:var(--es-line-strong);text-underline-offset:5px}
:root #dlg-account .ys-auth .signin-more>summary .signin-chevron{display:none}
:root #dlg-account .ys-auth .signin-more form{padding:4px 0 8px}

/* Appearance: a flat segmented control. Track = the empty band; selection = the solid button. */
:root #dlg-account .ys-appearance .profile-appearance-form{margin:0}
:root #dlg-account .appearance-setting{display:grid;gap:10px;margin:0;padding:0;border:0;background:none;box-shadow:none}
:root #dlg-account .appearance-setting>legend{display:block;width:100%;margin:0 0 8px;padding:0 2px}
:root #dlg-account .appearance-options{display:flex;position:relative;isolation:isolate;gap:0;padding:4px;border:0;border-radius:12px;background:var(--band-none);box-shadow:none;}
:root:root #dlg-account .appearance-options::before{top:0;left:0;width:var(--selection-w)!important;height:calc(var(--selection-h))!important;transform:translate(var(--selection-x),var(--selection-y))!important;border-radius:9px!important;background:var(--es-btn)!important;box-shadow:none!important}
:root:root #dlg-account .appearance-options label,:root:root #dlg-account .appearance-options label span{border-radius:9px}
:root #dlg-account .appearance-options label{flex:1;position:relative;z-index:1;min-width:0;min-height:44px;margin:0;cursor:pointer}
:root #dlg-account .appearance-options input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
:root:root #dlg-account .appearance-options label span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 8px;background:transparent;box-shadow:none;border:0;color:var(--es-ink-2);font:700 .95rem/1.2 var(--font-ui);transition:color .18s ease}
:root:root #dlg-account .appearance-options input:checked+span{color:var(--es-btn-text)!important}
:root:root #dlg-account .appearance-options:not(.segmented-control) input:checked+span{background:var(--es-btn)}
:root #dlg-account .appearance-options input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){:root:root #dlg-account .appearance-options label span{transition:none}}

/* small print at the foot */
:root #dlg-account .profile-footer{font-style:normal;font-family:var(--font-ui);display:grid;justify-items:center;gap:2px;margin:0;padding:0 0 8px;color:var(--es-ink-3);font-size:.78rem;text-align:center}
:root #dlg-account .profile-footer>*{margin:0}
:root #dlg-account #design-review-entry{justify-self:center}
:root #dlg-account .legacy-progress,:root #dlg-account #account-body>.profile-section{margin:0}

/* Native: keep the last rows clear of the glass tab bar. */
/* Settings covers the tab bar, so it only needs the home-indicator inset. */
.native-app #dlg-account>.dlg{padding-bottom:calc(24px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
:root #dlg-account .profile-footer-note{font:400 .78rem/1.3 var(--font-ui);font-style:normal}
:root #dlg-account .ys-auth .signin-provider-rows{padding:0;margin:0}
:root #dlg-account .ys-auth .signin-provider-rows>.subtle{padding:0 2px}
:root #dlg-account :is(.account-edit,.account-management){margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
:root #dlg-account :is(.account-edit,.account-management)>summary.ys-row{padding:12px 2px;border:0;background:none}
:root #dlg-account .ys-auth .signin-provider-connected{display:flex;align-items:center;gap:12px;padding:10px 2px}
:root #dlg-account .ys-auth .signin-provider-connected .signin-provider-name{flex:1;text-align:left}
:root #dlg-account .ys-auth .signin-provider-connected .signin-connected{color:var(--es-ink-2)}
:root #dlg-account .ys-list>:is(.account-edit,.account-management){border-bottom:1px solid var(--es-line)}
:root #dlg-account .ys-auth .signin-provider-connected .provider-icon{position:static;flex:0 0 22px;width:22px;height:22px}
:root #dlg-account .ys-row>.ys-label{flex:1 1 auto}
:root #dlg-account .ys-row>.ys-value{flex:0 1 auto;margin-left:auto;text-align:right}

/* Larger text: nothing may push past the phone's width. */
#you-record>*,#stats-body>*,#account-body>*,.ys-list>*{min-width:0;max-width:100%;box-sizing:border-box}
:root #dlg-stats .you-empty h3{font-size:min(1.7rem,36px);overflow-wrap:anywhere}
:root #dlg-account .ys-auth .signin-provider-rows :is(.signin-apple,.signin-google){white-space:normal;height:auto;min-width:0}
:root #dlg-account .ys-auth .signin-provider-name{white-space:normal;overflow-wrap:normal;min-width:0}
.enlarged-text #dlg-account .ys-auth .signin-provider-rows :is(.signin-apple,.signin-google){padding:10px 12px 10px 52px}
:root:root #dlg-account .appearance-options label span{font-size:min(.95rem,19px)}
.enlarged-text .you-record-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.enlarged-text .you-record-grid::after{display:none}
.enlarged-text .you-record-cell:nth-child(even){border-left:0}
.enlarged-text .you-record-cell+.you-record-cell{border-top:1px solid var(--es-line)}
.enlarged-text .you-day{grid-template-columns:minmax(0,1fr) auto 16px}
.enlarged-text .you-day .es-dots{grid-column:1/-1;grid-row:2}

/* =====================================================================
   Polish pass (23 Sep): one segmented look, one header avatar, calm confirms.
   ===================================================================== */
/* One segmented control everywhere: the empty band as track, a solid selection. */
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs){padding:0 4px;border:0;border-radius:12px;background:var(--band-none);box-shadow:none}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs)>button{border-radius:9px;color:var(--es-ink-2);font:700 14px/1.2 var(--card-label,var(--font-ui))}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs)>button:is([aria-selected=true],[aria-pressed=true]){color:var(--es-btn-text)!important}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs).segmented-control::before{border-radius:9px!important;background:var(--es-btn)!important;box-shadow:none!important}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs):not([data-segment-ready])>button:is([aria-selected=true],[aria-pressed=true])::before{border-radius:9px;background:var(--es-btn);box-shadow:none}
:root #dlg-board .player-metrics{display:flex;gap:0;padding:4px;border:0;border-radius:12px;background:var(--band-none);box-shadow:none}
:root #dlg-board .player-metrics>button{flex:1;min-height:36px;padding:6px 12px;border:0;border-radius:9px;background:transparent!important;box-shadow:none!important;color:var(--es-ink-2);font:700 13.5px/1.2 var(--card-label,var(--font-ui))}
:root #dlg-board .player-metrics>button[aria-pressed=true]{color:var(--es-btn-text)!important}
:root #dlg-board .player-metrics.segmented-control::before{border-radius:9px!important;background:var(--es-btn)!important;box-shadow:none!important}
:root #dlg-board .player-metrics:not([data-segment-ready])>button[aria-pressed=true]{background:var(--es-btn)!important}

/* Web header: no bar behind the nav; the current page is a visible pill in both themes. */
:root[data-theme] .web-header .app-nav{background:none;border:0;box-shadow:none}
:root .web-header .app-nav.segmented-control::before{border-radius:22px!important;background:var(--es-surface-2)!important;box-shadow:inset 0 0 0 1px var(--es-line)!important}
:root[data-theme=light] .web-header .app-nav.segmented-control::before{background:var(--es-surface)!important;box-shadow:inset 0 0 0 1px var(--es-line-strong),0 2px 8px rgba(40,52,70,.14)!important}
:root .web-header .app-nav>button[aria-current=page]{color:var(--es-ink)!important}
/* The avatar is the way to You, so it rests while you are there. */

/* Destructive confirms: equal halves, a clear gap, coral for the act itself. */
.confirm-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:6px 0 0}
.confirm-actions>.btn{width:100%;min-width:0;min-height:52px;margin:0;white-space:normal}
:root[data-theme] .btn.danger-solid{background:var(--es-coral);color:var(--es-coral-ink);border:0;border-radius:16px;box-shadow:none;font-weight:800}
:root[data-theme] .btn.danger-solid:active{filter:brightness(.94)}
.enlarged-text .confirm-actions{grid-template-columns:minmax(0,1fr)}
#dlg-delete-account .dlg>p{color:var(--es-ink-2)}
#dlg-delete-account #delete-identity{margin:0;color:var(--es-ink)}
#dlg-delete-account #delete-status:empty{display:none}

/* Privacy & safety: a bottom sheet with flat rows. */
#dlg-safety .safety-intro{margin:0 0 12px}
#dlg-safety .ys-list{display:grid;border-top:1px solid var(--es-line)}
#dlg-safety .ys-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 2px;border-bottom:1px solid var(--es-line);color:var(--es-ink);font:500 1rem/1.3 var(--font-ui);text-decoration:none}
#dlg-safety .ys-row .ui-icon,#dlg-safety .ys-row svg{width:16px;height:16px;color:var(--es-ink-3)}

/* Settings: handle and sign-in methods. */
:root #dlg-account .ys-sublabel{margin:0;padding:14px 2px 0;border:0;color:var(--es-ink-2);font:600 .82rem/1.2 var(--font-ui)}
:root #dlg-account .ys-list>.ys-sublabel{border-bottom:0}
:root #dlg-account .ys-field-status{margin:0;min-height:1.2em;color:var(--es-coral);font-size:.85rem}
:root #dlg-account .ys-field-status:empty{display:none}
:root #dlg-account #handle-input[aria-invalid=true]{border-color:var(--es-coral)}
:root #dlg-account #btn-signout .ys-label{font-weight:500}

/* Desktop: one readable column on You and Settings. */
@media (min-width:760px){
  :root #dlg-stats>.dlg{max-width:664px;margin-inline:auto}
  :root #dlg-account>.dlg{max-width:648px;margin-inline:auto}
}
:root #dlg-account .ys-list>:is(.ys-row,.setting-switch,.account-edit,.ys-auth,.profile-identity){border-bottom:1px solid var(--es-line)}
:root #dlg-account .ys-list>.ys-auth:has(+.setting-switch){border-bottom:1px solid var(--es-line)}
.confirm-actions>.btn{padding-inline:10px;font-size:16px}
:root #dlg-account .ys-appearance .profile-appearance-form{border-top:0;padding-top:0}

/* =====================================================================
   Settings as iOS inset-grouped cards (23 Sep, AJ: "too much transparency").
   The eyebrow sits above; each list is one solid card with hairline rows.
   ===================================================================== */
:root #dlg-account .ys-group>h3.es-eyebrow{padding:0 4px}
:root #dlg-account .ys-list,#dlg-safety .ys-list{padding:0 16px;border:1px solid var(--es-line);border-top:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);box-shadow:var(--es-shadow-soft);overflow:hidden}
:root #dlg-account .ys-list>:is(.ys-row,.setting-switch,.account-edit,.ys-auth,.profile-identity,.ys-blocked,a),#dlg-safety .ys-list>.ys-row{border-bottom:1px solid var(--es-line)}
:root #dlg-account .ys-list>:last-child,#dlg-safety .ys-list>:last-child{border-bottom:0!important}
:root #dlg-account .ys-list>:is(.ys-row,.profile-identity),:root #dlg-account .ys-list>.account-edit>summary.ys-row,#dlg-safety .ys-row{padding-inline:0}
:root #dlg-account .ys-list .ys-drawer{padding-inline:0}
:root #dlg-account .ys-list>.ys-sublabel{padding-inline:0}
:root #dlg-account .ys-list>.ys-auth{padding:12px 0 14px}
:root #dlg-account .ys-blocked .blocked-players>summary{padding:0}
/* Profile initial on a card: step it off the surface. */
:root #dlg-account .ys-list>.profile-identity>:is(img,.profile-initial){background:var(--es-surface-2)}
/* Provider buttons inside the card: a quieter fill than the card itself. */
:root #dlg-account .ys-list .ys-auth .signin-provider-rows :is(.signin-apple,.signin-google){background:var(--es-surface-2);box-shadow:none}
/* Blocked players: an empty section leaves no stray hairline. */
:root #dlg-account .ys-list>.ys-blocked:empty+*{border-top:0}
:root #dlg-account .ys-list>:has(+.ys-blocked:empty:last-child){border-bottom:0!important}

/* ---------- Playground and Archive: pages of You, in its card and list language ---------- */
:root .personal-panel{display:grid;gap:12px}
:root .personal-panel .panel-intro{margin:0;font-size:1rem;line-height:1.45;color:var(--es-ink)}
:root .personal-panel>.personal-note{margin:-6px 0 6px;font-size:.84rem;line-height:1.45;color:var(--es-ink-2)}
:root .lab-panel .lab-pick{display:grid;align-content:start;gap:5px;border:1px solid var(--es-line);border-radius:14px;background:var(--es-surface);box-shadow:var(--es-shadow-soft);color:var(--es-ink)}
:root .lab-panel .lab-pick:active{background:var(--band-none)}
:root .lab-panel .lab-pick .em{color:var(--study-blue)}
:root .lab-panel .lab-pick .bl{color:var(--es-ink-2)}
:root .lab-panel .lab-season{margin:14px 0 0}
:root #dlg-stats .archive-list li+li{border-top-color:var(--es-line)}
:root #dlg-stats .archive-list button{min-height:64px;color:var(--es-ink)}
:root #dlg-stats .archive-panel>.btn{margin-top:4px}
/* Your first five: the eye on its own, a little larger, with no disc behind it. */
.stats-empty .you-empty-mark{width:auto;height:auto;margin-bottom:8px;border-radius:0;background:none}
.stats-empty .you-empty-mark .brand-symbol{width:64px;height:64px}