/* Web application port of the owner-delivered design/v2 references.
   Existing screen/dialog behavior stays in styles.css and the workbench modules. */
:root {
 --v2-header-height:80px;
 --v2-logo-size:34px;
 --v2-page-gutter:32px;
 --v2-rail-space:104px;
 --v2-hero-height:500px;
 --v2-hero-radius:44px;
 --v2-hero-padding:44px;
 --v2-dial-size:148px;
 --v2-hero-clock:104px;
 --v2-mobile-clock:64px;
 --v2-nav-height:76px;
 --v2-focus-width:3px;
 --v2-focus-offset:4px;
 --v2-touch:44px;
 --v2-gap:32px;
 --v2-control-ink:#ffffff;
 --v2-dial-bg:#4b70cf; /* start dial: --blue hue darkened so the white glyph reaches 4.65:1 */
 --v2-meta-ink:#5e626d; /* entry metadata: --muted hue darkened to 4.65:1 over the darkest glass of the light gradient */
 --v2-control-surface:rgba(255,255,255,.16);
 --v2-control-border:rgba(255,255,255,.34);
 --v2-hero-shade:rgba(13,14,16,.24);
 --v2-hero-label-surface:rgba(13,14,16,.68);
}
[data-theme="dark"] {--v2-dial-bg:#456edb;--v2-meta-ink:var(--muted)} /* dark --blue hue darkened: 4.66:1; dark --muted already passes */
.app-shell .entry-meta {color:var(--v2-meta-ink)}
body[data-session="member"] {
 background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed var(--bg2);
 color:var(--ink);
 font-family:var(--font);
}
.app-shell {
 --color-canvas:var(--bg1);
 --color-surface:var(--card);
 --color-surface-soft:var(--glass-2);
 --color-text:var(--ink);
 --color-title:var(--ink);
 --color-primary:var(--acc);
 --color-on-primary:var(--on-acc);
 --color-secondary:var(--btn);
 --color-on-secondary:var(--ink);
 --color-link:var(--blue-ink);
 --color-focus:var(--ink);
 --color-danger:var(--red-ink);
 --color-on-danger:var(--on-acc);
 --color-primary-soft:var(--blue-soft);
 --color-line:var(--line-2);
 --color-control-border:var(--line-2);
 --bg:var(--bg1);
 --panel:var(--card);
 --panel-2:var(--glass-2);
 --text:var(--ink);
 --accent:var(--acc);
 --accent-soft:var(--blue-soft);
 --link-text:var(--blue-ink);
 display:block;
 font-family:var(--font);
 font-size:var(--fs-base);
 min-height:100dvh;
}
.app-shell button,.app-shell input,.app-shell select {font-family:inherit}
.app-shell :focus-visible {outline:var(--v2-focus-width) solid var(--ink);outline-offset:var(--v2-focus-offset)}
.app-shell .topbar {
 display:grid;
 grid-template-columns:auto minmax(120px,180px) minmax(0,1fr) auto;
 gap:var(--s-8);
 align-items:center;
 min-height:var(--v2-header-height);
 padding:var(--s-10) var(--v2-page-gutter);
 border:0;
 background:transparent;
}
.app-shell .brand {grid-column:1;grid-row:1;display:flex;align-items:center;gap:var(--s-6);padding:0;color:var(--ink)}
.app-shell .brand strong {font-size:var(--fs-2xl);font-weight:500;color:var(--ink)}
.app-shell .brand-mark {background:transparent;border:0;box-shadow:none}
.app-shell .brand img {width:var(--v2-logo-size);height:var(--v2-logo-size)}
.app-shell .nav {grid-column:3;grid-row:1;display:flex;flex-direction:row;justify-content:center;gap:var(--s-2);padding:0;min-width:0}
.app-shell .nav-group,.app-shell .nav-group-items {display:contents}
.app-shell .nav-group-title,.app-shell .workspace-selector .eyebrow,.timer-heading {
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.app-shell .nav-item {width:auto;display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--v2-touch);padding:var(--s-6) var(--s-8);border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink2);font-size:var(--fs-base);white-space:nowrap}
.app-shell .nav-item .nav-icon {display:none}
.app-shell .nav-item.active {background:var(--acc);color:var(--on-acc);box-shadow:var(--sh-sm)}
.app-shell .workspace-selector {grid-column:2;grid-row:1;min-width:0}
.app-shell .workspace {max-width:100%;min-height:var(--v2-touch);padding:var(--s-6) var(--s-8);background:var(--btn);border:1px solid var(--btn-brd);border-radius:var(--r-pill);color:var(--ink);font-size:var(--fs-base)}
.app-shell .top-actions {grid-column:4;grid-row:1;display:flex;gap:var(--s-4);align-items:center}
.app-shell .top-actions .secondary-btn,.app-shell .icon-btn,.app-shell .utility {min-height:var(--v2-touch);border:1px solid var(--btn-brd);border-radius:var(--r-pill);background:var(--btn);color:var(--ink)}
.app-shell .avatar {background:var(--red-soft);color:var(--red-ink);border-radius:var(--r-circle);width:var(--v2-touch);height:var(--v2-touch)}
.app-shell .sync-badge {color:var(--ink2);background:transparent}
.app-shell .header-preferences {position:fixed;z-index:20;inset-inline-start:var(--v2-page-gutter);bottom:var(--s-12);display:flex;flex-direction:column;gap:var(--s-6)}
.app-shell .account-utilities {position:relative}
.app-shell .account-utilities-content {position:absolute;inset-inline-start:0;bottom:100%;min-width:220px;background:var(--bg1);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--s-8)}
.app-shell .content {max-width:none;padding:var(--s-2) var(--v2-page-gutter) var(--v2-page-gutter);padding-inline-start:var(--v2-rail-space)}
.app-shell .product-slogan {display:none}
.timer-layout {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:var(--v2-gap);margin-block-end:var(--s-12)}
.app-shell .timer-card {
 display:grid;
 grid-template-columns:minmax(0,1fr);
 gap:var(--s-10);
 min-height:var(--v2-hero-height);
 padding:var(--v2-hero-padding);
 border:0;
 border-radius:var(--v2-hero-radius);
 background:var(--hero-idle);
 color:var(--v2-control-ink);
 box-shadow:var(--sh);
 overflow:hidden;
}
.app-shell .timer-card.running {background:linear-gradient(var(--v2-hero-shade),var(--v2-hero-shade)),var(--hero-running)}
.app-shell #timerState {justify-self:end;min-height:var(--s-10);font-size:var(--fs-sm)}
.app-shell .timer-main {display:contents}
.app-shell .description {grid-row:2;width:100%;min-width:0;background:transparent;border:0;border-block-end:1px solid var(--v2-control-border);border-radius:0;padding:var(--s-8) 0;color:var(--v2-control-ink);font-size:var(--fs-3xl)}
.app-shell .description::placeholder {color:var(--v2-control-ink);opacity:1}
.app-shell .timer-control {grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-8)}
.app-shell .elapsed {display:block;min-width:0;font-family:UTNum,Poppins,sans-serif;font-size:clamp(var(--v2-mobile-clock),7vw,var(--v2-hero-clock));font-weight:300;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.timer-actions {display:flex;direction:ltr;align-items:center;gap:var(--s-8)}
.app-shell .timer-button {width:var(--v2-dial-size);height:var(--v2-dial-size);min-width:var(--v2-dial-size);border:1px solid var(--v2-control-border);border-radius:var(--r-circle);background:var(--v2-dial-bg);color:var(--v2-control-ink);box-shadow:var(--sh)}
.app-shell .timer-button.running {background:var(--rec)}
.app-shell .timer-button svg {width:var(--s-12);height:var(--s-12);fill:currentColor}
.timer-pause {display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:64px;border:1px solid var(--v2-control-border);border-radius:var(--r-circle);background:var(--v2-control-surface);color:var(--v2-control-ink)}
.timer-pause svg {width:var(--s-10);height:var(--s-10);fill:currentColor}
.app-shell .meta-row {grid-row:4;display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:flex-start}
.app-shell .timer-card .chip-select,.app-shell .timer-card .tag-chooser,.app-shell .timer-card .billable,.app-shell .timer-card .ghost-btn,.app-shell .timer-card .secondary-btn {
 color:var(--v2-control-ink);background:var(--v2-control-surface);border:1px solid var(--v2-control-border);border-radius:var(--r-pill);min-height:var(--v2-touch);
}
.app-shell .timer-card select option {background:var(--bg1);color:var(--ink)}
.app-shell .timer-card .tag-options {background:var(--bg1);color:var(--ink);border-radius:var(--r-md)}
.app-shell .timer-secondary {grid-row:5}
.app-shell .timer-card .muted {color:var(--v2-control-ink)}
.app-shell .timer-card :focus-visible {outline-color:var(--v2-control-ink)}
.timer-summary {min-width:0;padding:var(--v2-page-gutter);border:1px solid var(--glass-brd);border-radius:var(--r-4xl);background:var(--glass);backdrop-filter:var(--glass-blur);box-shadow:var(--sh);color:var(--ink)}
.timer-summary h2 {font-size:var(--fs-base);font-weight:400;color:var(--ink2)}
.timer-summary #dayTotal {display:block;font-family:UTNum,Poppins,sans-serif;font-size:var(--fs-display);font-weight:300;line-height:1.2;margin-block:var(--s-12)}
.timer-summary p {font-size:var(--fs-sm);color:var(--ink2);border-block-start:1px solid var(--line-2);padding-block-start:var(--s-12)}
.app-shell .entries {border:1px solid var(--glass-brd);border-radius:var(--r-4xl);background:var(--glass);backdrop-filter:var(--glass-blur);padding:var(--s-12);box-shadow:var(--sh)}
.app-shell .global-timer {position:fixed;z-index:15;bottom:var(--s-12);inset-inline-start:50%;transform:translateX(50%);display:flex;align-items:center;gap:var(--s-6);max-width:calc(100% - 160px);padding:var(--s-4) var(--s-8);border:1px solid var(--glass-brd);border-radius:var(--r-pill);background:var(--glass-2);backdrop-filter:var(--glass-blur);box-shadow:var(--sh-sm);color:var(--ink)}
html[dir="ltr"] .app-shell .global-timer {transform:translateX(-50%)}
.app-shell:has([data-view-panel="timer"]:not(.hidden)) .global-timer {display:none}
.app-legal {padding:var(--s-12) var(--v2-page-gutter);padding-inline-start:var(--v2-rail-space)}
.app-legal .legal-links {display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-8);color:var(--ink2)}
.app-legal a {min-height:var(--v2-touch);display:inline-flex;align-items:center;color:var(--blue-ink)}
@media(max-width:1100px) {
 /* The brand/workspace column yields to the actions: a long workspace name
    must shrink its select instead of pushing the actions off-screen. */
 .app-shell .topbar {grid-template-columns:minmax(0,1fr) auto}
 .app-shell .brand {min-width:0}
 .app-shell .brand strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .app-shell .nav {grid-column:1 / -1;grid-row:3}
 .app-shell .top-actions {grid-column:2}
 .app-shell .workspace-selector {grid-column:1;grid-row:2}
 .app-shell .workspace {width:100%;text-overflow:ellipsis}
 .timer-layout {grid-template-columns:minmax(0,1fr)}
 .timer-summary {padding:var(--s-12)}
}
@media(max-width:760px) {
 .app-shell .topbar {padding:var(--s-8);gap:var(--s-4)}
 .app-shell .brand strong {font-size:var(--fs-xl)}
 .app-shell .top-actions #refreshData,.app-shell .sync-badge {display:none}
 .app-shell .content {padding:var(--s-8);padding-block-end:calc(var(--v2-nav-height) + var(--s-12))}
 .app-shell .nav {position:fixed;inset-inline:0;bottom:0;z-index:30;min-height:var(--v2-nav-height);display:flex;justify-content:space-between;overflow-x:auto;padding:var(--s-4);padding-bottom:max(var(--s-4),env(safe-area-inset-bottom));background:var(--glass-2);backdrop-filter:var(--glass-blur);border-block-start:1px solid var(--glass-brd)}
 .app-shell .nav-item {flex:1;flex-direction:column;padding:var(--s-4);font-size:var(--fs-xs)}
 .app-shell .nav-item .nav-icon {display:block;width:var(--s-10);height:var(--s-10)}
 .app-shell .header-preferences {position:static;grid-column:2;grid-row:2;flex-direction:row;justify-content:flex-end;gap:var(--s-2)}
 .app-shell .account-utilities-content {top:100%;bottom:auto;inset-inline-start:auto;inset-inline-end:0}
 .app-shell .timer-card {min-height:0;padding:var(--s-10);border-radius:var(--r-3xl)}
 .app-shell .description {font-size:var(--fs-xl)}
 .app-shell .timer-control {grid-template-columns:minmax(0,1fr);gap:var(--s-12);justify-items:center}
 .app-shell .elapsed {font-size:var(--v2-mobile-clock)}
 .app-shell .timer-actions {justify-content:center}
 .app-shell .timer-button {width:96px;height:96px;min-width:96px}
 .app-shell .meta-row {justify-content:center}
 .timer-layout {gap:var(--s-8)}
 .timer-summary #dayTotal {font-size:var(--fs-3xl);margin-block:var(--s-8)}
 .timer-summary p {padding-block-start:var(--s-8)}
 .app-shell .entries {padding:var(--s-8);border-radius:var(--r-3xl)}
 .app-shell .global-timer {bottom:calc(var(--v2-nav-height) + var(--s-8));max-width:calc(100% - 32px);gap:var(--s-4);padding:var(--s-4)}
 .app-shell #globalDescription {max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .app-shell .global-timer button {font-size:var(--fs-sm)}
 .app-legal {padding:var(--s-8);padding-bottom:calc(var(--v2-nav-height) + var(--s-12))}
}
@media(prefers-reduced-motion:reduce) {
 .app-shell *, .app-shell *::before, .app-shell *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Existing modules use .hidden for both blocks and controls; keep it authoritative. */
.app-shell .hidden {display:none!important}

.app-shell .timer-card .tag-chooser summary {background:transparent;color:var(--v2-control-ink);border:0;border-radius:var(--r-pill)}

/* Accessibility adaptation: the delivered gradient is too light behind white text.
   Keep its colors, shade it for large text, and give small labels a dark backing. */
.app-shell .timer-card.running #timerState,.app-shell .timer-card.running .chip-select,
.app-shell .timer-card.running .tag-chooser,.app-shell .timer-card.running .billable,
.app-shell .timer-card.running .ghost-btn,.app-shell .timer-card.running .secondary-btn,
.app-shell .timer-card.running #draftHint:not(:empty) {background:var(--v2-hero-label-surface)}
.app-shell .timer-card.running #timerState,.app-shell .timer-card.running #draftHint:not(:empty) {padding:var(--s-3) var(--s-5);border-radius:var(--r-pill)}
.app-shell .timer-card.running .timer-pause {background:var(--v2-hero-label-surface)}
@media(max-width:760px) {
 /* Mobile description is normal-size text, so it needs the label backing too. */
 .app-shell .timer-card.running .description {background:var(--v2-hero-label-surface);padding:var(--s-8);border-radius:var(--r-md)}
}
/* Tag chips in dialogs sit on --panel-2; muted dialog label ink is 4.43:1 there. Use body ink (WCAG 1.4.3). */
dialog .tag-options label>span {color:var(--ink)}