/* POL-SHELL (2026-10-21): shell, nav, Favorites, View-as picker and Data health polish. Loaded after ui2.css; scoped html.ui2.
   Findings: SHELL-1..33 and LIVE-8 / LIVE-11 in pkg-POLISH\REVIEW-shell.md / REVIEW-live.md. */
html.ui2{--u2-frame:1312px;--u2-focus:#004AB5}

/* ---------- one page frame (SHELL-11): the header and every page share the same left and right edge ---------- */
html.ui2 body main,html.ui2 body main:has(#ui2-view .u2r){max-width:var(--u2-frame)}
html.ui2 .ui2-view{max-width:none;margin:0}
html.ui2 #health-view,html.ui2 .saved-page{max-width:none;margin:0;padding-left:0;padding-right:0}
@media (min-width:901px){
 html.ui2 header.top{padding-left:max(28px,calc((100vw - var(--u2-frame))/2 + 32px));padding-right:max(28px,calc((100vw - var(--u2-frame))/2 + 32px))}
}

/* ---------- focus (SHELL-23): one blue ring for every interactive cell that has no ring of its own ---------- */
html.ui2 :where(button,a[href],summary,[role=button],[tabindex="0"]):focus-visible{outline:3px solid var(--u2-focus);outline-offset:2px}
html.ui2 #operating-areas .growth-open:focus-visible,html.ui2 .growth-open:focus-visible{outline:3px solid var(--u2-focus);outline-offset:2px;border-radius:4px}
html.ui2 .today-tile .today-clock:focus-visible{outline:3px solid var(--u2-focus);outline-offset:2px}

/* ---------- phone header (SHELL-19) and sheet scrim (SHELL-25) ---------- */
@media (max-width:640px){
 html.ui2 .u2-health{height:40px;min-height:40px}
 html.ui2 .u2-health .u2-h-short{font-size:12.5px;font-weight:600}
 html.ui2 .u2-avatar{width:40px;height:40px;min-height:40px}
 html.ui2 .u2-drop.sheet:not([hidden]){box-shadow:0 0 0 100vmax #0000002e,var(--u2-shadow)}
 html.ui2.u2-signed-in footer{padding-bottom:16px}   /* SHELL-28: body already clears the tab bar */
}
html.ui2 .u2-hrow[data-status=yellow] small{color:#8a5a00;font-weight:600}
html.ui2 .u2-hrow[data-status=red] small{color:var(--u2-bad);font-weight:600}
html.ui2 .u2-ask-tab[aria-expanded=true] .u2-orb{box-shadow:0 0 0 3px var(--u2-focus),0 10px 24px -10px #00000066}

/* ---------- View-as picker (SHELL-4, SHELL-5): a ui2 menu card, never flush to the screen edge ---------- */
html.ui2 .u2-right #admin-controls .admin-menu-panel{top:12px;width:min(340px,calc(100vw - 24px));padding:10px;border:1px solid var(--u2-line);border-radius:var(--u2-radius);background:var(--u2-surface);box-shadow:var(--u2-shadow);font-family:var(--u2-font)}
html.ui2 #leader-search{width:100%;height:38px;min-height:38px;padding:0 14px;border:1px solid var(--u2-line-2);border-radius:999px;background:#fff;font:500 14px var(--u2-font);box-shadow:none}
html.ui2 #leader-search:focus-visible{outline:0;border-color:var(--u2-ink);box-shadow:0 0 0 3px rgba(0,74,181,.28)}
html.ui2 #leader-options{max-height:min(340px,50vh);margin-top:6px}
html.ui2 #leader-options button{align-items:center;min-height:42px;padding:8px 12px;border-radius:10px;font:500 14px var(--u2-font);color:var(--u2-ink);cursor:pointer}
html.ui2 #leader-options button:hover{background:var(--u2-canvas)}
html.ui2 #leader-options button[aria-current=true]{background:var(--u2-sky);font-weight:700}
html.ui2 #leader-options button[aria-current=true]::after{content:"\2713";margin-left:auto;color:var(--u2-blue)}
html.ui2 #leader-options button small{flex:none;align-self:center;padding:2px 8px;border-radius:999px;background:var(--u2-canvas);color:var(--u2-muted);font:600 11px/1.5 var(--u2-font);letter-spacing:.04em;text-transform:none}
html.ui2 #leader-options button span{min-width:0;overflow-wrap:anywhere}
html.ui2 .activity-menu-entry{margin-top:6px;padding-top:8px;border-top:1px solid var(--u2-line);display:flex;align-items:center;justify-content:space-between;gap:10px}
html.ui2 .activity-open{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--u2-muted);font:600 13px var(--u2-font);cursor:pointer}
html.ui2 .activity-open:hover{background:var(--u2-canvas);color:var(--u2-ink)}
html.ui2 .activity-menu-entry .app-version{margin:0;font-size:12px;color:var(--u2-muted)}
@media (max-width:640px){
 html.ui2 .u2-right #admin-controls{position:static;width:auto;height:auto}
 html.ui2 .u2-right #admin-controls .admin-menu-panel{position:fixed;left:12px;right:12px;top:60px;width:auto;max-height:calc(100dvh - 140px);overflow:auto;z-index:62}
}

/* ---------- Favorites: add form is a popover (no layout shift) (SHELL-6) ---------- */
html.ui2 .u2r-favname{position:fixed;z-index:75;top:var(--fav-top,120px);right:var(--fav-right,24px);width:min(360px,calc(100vw - 24px));margin:0;padding:12px;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;border:1px solid var(--u2-line);border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(20,20,20,.22)}
html.ui2 .u2r-favname input{flex:1 1 auto;min-width:0;height:40px;padding:0 14px;border:1px solid var(--u2-line-2);border-radius:999px;font:500 15px var(--u2-font);background:#fff;box-shadow:none}
html.ui2 .u2r-favname input:focus-visible{outline:0;border-color:var(--u2-ink);box-shadow:0 0 0 3px rgba(0,74,181,.28)}
html.ui2 .u2r-favname button{flex:none;height:40px;min-height:40px;white-space:nowrap}
html.ui2 .u2r-favname button[type=button]{border-color:transparent;background:none;color:var(--u2-muted);padding:0 8px}
@media (max-width:640px){
 html.ui2 .u2r-favname{left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));width:auto}
}

/* ---------- Favorites page (SHELL-7, SHELL-8, SHELL-9, SHELL-31) ---------- */
html.ui2 .u2-crumb{display:flex;align-items:center;gap:6px;margin:20px 0 4px;font-size:13px;color:var(--u2-muted)}
html.ui2 .u2-crumb button{min-height:32px;padding:0 4px;border:0;background:none;color:var(--u2-muted);font:inherit;cursor:pointer}
html.ui2 .u2-crumb button:hover{text-decoration:underline}
html.ui2 .u2-crumb [aria-current]{font-weight:700;color:var(--u2-ink)}
html.ui2 .saved-page h1,html.ui2 #health-view h2{margin:4px 0 8px;font:500 26px/1.15 var(--u2-display)}
html.ui2 .saved-page{max-width:760px;margin:0 auto;padding:0 0 32px}
html.ui2 .saved-page .saved-view-note{margin:0 0 8px}
html.ui2 .saved-view-row{gap:10px 12px;padding:14px 0}
html.ui2 .saved-view-actions{display:flex;align-items:center;gap:6px;flex:none}
html.ui2 .saved-view-open{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:#111;color:#fff;font:700 14px var(--u2-font);cursor:pointer}
html.ui2 .saved-view-open:disabled{opacity:.4;cursor:not-allowed}
html.ui2 .saved-view-actions .quiet{min-height:40px;padding:0 12px;border:0;background:none;color:var(--u2-muted);font:600 14px var(--u2-font)}
html.ui2 .saved-view-actions .quiet:hover{background:var(--u2-canvas);color:var(--u2-ink)}
html.ui2 .saved-view-rename{display:flex;flex:1 1 280px;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
html.ui2 .saved-view-rename input{flex:1 1 200px;min-width:0;height:40px;padding:0 14px;border:1px solid var(--u2-line-2);border-radius:999px;font:500 15px var(--u2-font);background:#fff}
html.ui2 .saved-view-rename input:focus-visible{outline:0;border-color:var(--u2-ink);box-shadow:0 0 0 3px rgba(0,74,181,.28)}
html.ui2 .saved-view-rename input[aria-invalid=true]{border-color:var(--u2-bad)}
html.ui2 .saved-view-rename .quiet{min-height:40px;border:0;background:none;color:var(--u2-muted)}
html.ui2 .saved-view-rename-err{flex-basis:100%;color:var(--u2-bad);font-size:13px}
html.ui2 .saved-view-rename-err:empty{display:none}
@media (max-width:640px){
 html.ui2 .saved-view-row{flex-wrap:wrap}
 html.ui2 .saved-view-label{flex-basis:100%}
 html.ui2 .saved-view-actions{flex-basis:100%;justify-content:flex-start}
}
html.ui2 .u2-toast{position:fixed;z-index:90;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);padding:10px 12px 10px 16px;border-radius:14px;background:var(--u2-smoke);color:#fff;font:500 14px var(--u2-font);box-shadow:0 12px 32px rgba(0,0,0,.28)}
html.ui2 .u2-toast button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:#000;font:700 13px var(--u2-font);cursor:pointer}
@media (max-width:640px){html.ui2 .u2-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}
html.ui2 .u2-fav-hint{padding:10px 12px}

/* ---------- Data health page (SHELL-3, 15, 16, 17, LIVE-8) ---------- */
html.ui2 #health-view .section-heading{margin-top:24px}
html.ui2 #health-view .eyebrow{margin-top:0}
html.ui2 #health-view .dh-lead{font-size:16px}
html.ui2 .dh-checked-line{margin:4px 0 0;font-size:13px;color:var(--u2-muted)}
html.ui2 .dh-cards{align-items:stretch;margin-top:16px}
html.ui2 .dh-cards .dh-card{padding:16px 18px;min-height:112px}
html.ui2 .dh-cards .dh-body{align-content:start;row-gap:4px}
html.ui2 .dh-cards .dh-text{min-height:20px;font-size:14px;line-height:1.45;color:var(--u2-muted);font-weight:500}
html.ui2 .dh-cards .dh-card[data-status=yellow] .dh-text{color:#8a5a00;font-weight:600}
html.ui2 .dh-cards .dh-card[data-status=red] .dh-text{color:var(--u2-bad);font-weight:600}
html.ui2 .dh-cards .dh-powers{font-size:13px;line-height:1.4}
html.ui2 .dh-cards .dh-admin{font:12px/1.4 var(--u2-font);color:var(--u2-muted)}
html.ui2 .dh-tipbtn{width:24px;height:24px;margin-left:4px;vertical-align:-6px}
html.ui2 .dh-link{grid-column:1/-1;justify-self:start;min-height:40px;padding:0 4px;border:0;background:none;color:var(--u2-blue);font:700 14px var(--u2-font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html.ui2 .dh-ok{margin-top:14px}
html.ui2 .dh-ok>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid var(--u2-line);border-radius:16px;background:var(--u2-surface);font:600 14px var(--u2-font);cursor:pointer;list-style:none}
html.ui2 .dh-ok>summary::-webkit-details-marker{display:none}
html.ui2 .dh-ok>summary::before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#17663A;color:#fff;font-size:12px}
html.ui2 .dh-ok>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
html.ui2 .dh-ok[open]>summary::after{transform:rotate(-135deg)}
html.ui2 .dh-ok[open]>summary{margin-bottom:12px}
html.ui2 .dh-ok .dh-cards{margin-top:0}
@media (max-width:640px){html.ui2 .dh-cards .dh-card{min-height:0}}

/* ---------- Ask and Feedback: reserve height so the footer does not jump while data arrives (SHELL-13) ---------- */
html.ui2 #feedback-view:not([hidden]),html.ui2 #ask-view:not([hidden]){min-height:60vh}

/* ---------- route CLS (SHELL-12): the page host always fills the first screen so the footer never jumps in ---------- */
html.ui2 #ui2-view:not([hidden]){min-height:calc(100vh - 64px)}
@media (max-width:640px){html.ui2 #ui2-view:not([hidden]){min-height:calc(100vh - 56px)}}
html.ui2 body main{padding-top:0}
@media (max-width:640px){html.ui2 body main,html.ui2 body main:has(#ui2-view .u2r){padding-left:14px;padding-right:14px}}   /* same gutter on every route: no sideways shift when a page swaps */