/* The app reuses the website's type/spacing/surface geometry. No radius override:
   the surface component paints and clips the same outline. */
.workspace-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:var(--application-label-gap);font:400 var(--fs-13)/var(--lh-tight) var(--font-mono);}
.workspace-nav-link{display:flex;align-items:center;justify-content:center;min-height:var(--application-control-height);padding:var(--application-control-padding);text-decoration:none;color:var(--ink);white-space:nowrap;}
.workspace-nav-link:hover,.workspace-nav-link[aria-current=page]{background:var(--surface-hover);}
.workspace-project-field{display:flex;align-items:center;gap:var(--application-label-gap);min-width:0;flex:1;}
.workspace-label{font:400 var(--fs-12)/var(--lh-tight) var(--font-mono);color:var(--text-soft);}
.workspace-project-select{min-width:0;width:100%;min-height:var(--application-control-height);padding:var(--application-control-padding);font:inherit;color:var(--ink);}
/* One line at every width: a long unit name ellipsizes (its full name is the title). */
.workspace-current-project{flex:1;min-width:0;padding:var(--application-control-padding);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Account menu: one surface button, one surface list. The list is a sibling of the
   clipped button, never inside it, so the clip cannot cut it off. */
.workspace-account{position:relative;margin-left:auto;z-index:var(--z-menu);}
.workspace-account-button{gap:var(--application-label-gap);font:inherit;cursor:pointer;}
.workspace-account-button[aria-expanded=true],.workspace-account-button[data-active]{background:var(--surface-hover);}
.workspace-account-initial{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:400 var(--fs-11)/1 var(--font-mono);}
.workspace-account-caret{width:6px;height:6px;border:solid var(--ink);border-width:0 var(--rule) var(--rule) 0;transform:translateY(-2px) rotate(45deg);}
.workspace-account-button[aria-expanded=true] .workspace-account-caret{transform:translateY(1px) rotate(225deg);}
.workspace-account-menu{position:absolute;right:0;top:calc(100% + var(--application-label-gap));display:grid;width:max-content;min-width:220px;max-width:calc(100vw - 2 * var(--application-gutter));padding:var(--application-label-gap);}
.workspace-account .workspace-account-email{margin:0;padding:var(--application-label-gap) 12px;font:400 var(--fs-12)/var(--lh-tight) var(--font-mono);color:var(--text-soft);overflow-wrap:anywhere;}
.workspace-menu-item{display:flex;align-items:center;min-height:var(--application-control-height);padding:0 12px;background:none;border:0;font:400 var(--fs-13)/var(--lh-tight) var(--font-mono);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;}
.workspace-menu-item:hover,.workspace-menu-item:focus-visible,.workspace-menu-item[aria-current=page]{background:var(--surface-hover);}
.workspace-menu-item:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--rule) var(--ink);}
.workspace-menu-item[aria-disabled=true]{opacity:var(--application-disabled-opacity);cursor:progress;}
.workspace-page{max-width:calc(var(--application-width) + 2 * var(--gutter));}
.workspace-page #workspaceNavigation{margin-bottom:calc(2 * var(--application-gap));}
.workspace-page h1,.workspace-page h2{font:var(--w-title) var(--fs-application)/var(--lh-hero) var(--font-title);letter-spacing:var(--ls-tight);margin:0 0 var(--application-gap);}
.workspace-page p{font:400 var(--fs-14)/var(--lh-copy) var(--font-mono);}
.workspace-card{padding:var(--application-padding);display:grid;gap:var(--application-gap);background:var(--surface);}
.workspace-card p{margin:0;}
/* Link actions share the ink button: document link colour must not paint ink on ink. */
:is(.workspace-page,.account-page) a.application-submit{color:var(--on-ink);text-decoration:none;}
/* Home: the unit, its real phase and one next action. No percentages. */
.workspace-home h2{margin:0;overflow-wrap:anywhere;}
.workspace-home-head{display:grid;gap:var(--application-label-gap);}
.workspace-phase{display:flex;align-items:center;flex-wrap:wrap;gap:var(--application-label-gap);}
.workspace-page .workspace-phase{font-size:var(--fs-13);line-height:var(--lh-tight);}
.workspace-phase-mark{flex:none;width:12px;height:12px;border:var(--rule) solid var(--ink);border-radius:50%;}
.workspace-phase-stage{color:var(--text-soft);}
.workspace-phase-stage::before{content:'· ';}
[data-phase=ready] .workspace-phase-mark,[data-phase=concept] .workspace-phase-mark{background:var(--ink);}
[data-phase=generating] .workspace-phase-mark{border-color:var(--hairline);border-top-color:var(--ink);animation:workspace-spin 1.1s linear infinite;}
:is([data-phase=failed],[data-phase=interrupted],[data-phase=needs_review],[data-phase=unsupported]) .workspace-phase-mark{border-radius:0;width:10px;height:10px;margin-inline:1px;transform:rotate(45deg);}
@keyframes workspace-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){[data-phase=generating] .workspace-phase-mark{animation:none;border-style:dotted;}}
.workspace-project-list{display:grid;gap:var(--application-gap);margin:var(--application-heading-gap) 0;}
.workspace-project-choice{text-decoration:none;color:var(--ink);}
.workspace-project-choice:hover{background:var(--surface-hover);}
.workspace-project-choice strong{font:var(--w-title) var(--fs-panel)/var(--lh-tight) var(--font-title);}
.workspace-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--application-gap);}
.workspace-page [hidden]{display:none;}
.account-page #workspaceNavigation{margin-bottom:calc(2 * var(--application-gap));}
.account-choice{display:grid;gap:var(--application-gap);}
.account-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--application-label-gap) 20px;}
.account-progress{margin:var(--application-heading-gap) 0;}
.workspace-spinner{display:block;box-sizing:border-box;width:28px;height:28px;border:var(--rule) solid var(--hairline);border-top-color:var(--ink);border-radius:50%;animation:workspace-spin 1.1s linear infinite;}
@media(prefers-reduced-motion:reduce){.workspace-spinner{animation:none;border-style:dotted;}}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Headings receive programmatic focus for screen readers; they are not controls. */
#account h1[tabindex="-1"]:focus{outline:none;}
@media(max-width:600px){
 /* The navigation stays one line on a phone: compact controls, the unit name or selector takes
    the remaining width and ellipsizes, the account button keeps only its initial and caret. */
 .workspace-navigation{flex-wrap:nowrap;gap:6px;}
 .workspace-nav-link{padding:0 10px;}
 .workspace-project-field{flex:1 1 0;}
 .workspace-project-field>.workspace-label,.workspace-account-button>.workspace-account-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
 .workspace-project-select{padding:0 8px;text-overflow:ellipsis;}
 .workspace-current-project{flex:1 1 0;padding:0 4px;}
 .workspace-account{flex:none;}
 .workspace-account-button{gap:6px;}
 .workspace-page{padding-inline:var(--application-gutter);}
 .workspace-account-menu{min-width:min(220px,calc(100vw - 2 * var(--application-gutter)));}
}