/* The v4 experience's shell, shared by all three product surfaces.
 *
 * The designer's prototype is one shell repeated three times: a full-width
 * surface bar, then a 242px sidebar carrying the brand, the current surface
 * and role, grouped navigation and the signed-in identity, then a main column
 * whose own top bar carries the breadcrumb, search and session identity.
 * Engineering Studio, Tenant Workspace and Learning Resources differ only in
 * what the sidebar lists and what the content column renders.
 *
 * Before this, /admin approximated it with the surface switch crammed into the
 * single top bar - which pushed the breadcrumb onto two lines and squeezed the
 * search field to three characters at 1440px - and /app had no sidebar chrome
 * at all. Both pages now build the same structure from the same rules.
 *
 * Loaded LAST so it settles conflicts with the older element-name rules in
 * styles.css rather than fighting them from underneath.
 */

/* THE HIDDEN ATTRIBUTE IS A STATE AND MUST BEAT EVERY LAYOUT RULE.
 *
 * `styles.css` styles the sidebar with a bare `nav{display:flex}`. An author
 * rule beats the user-agent's `[hidden]{display:none}`, so both surface
 * navigations rendered at once: the Learning Resources entries sat underneath
 * the whole Engineering Studio menu on every screen, and the two surfaces the
 * top bar promised to separate were never actually separated. The scripts were
 * correct throughout - they set `hidden` exactly as intended and nothing
 * happened. This is the same defect class as the bare `nav` rule that once
 * stacked the surface switch, so the repair is made once, globally, with the
 * weight to survive any element rule added later. */
[hidden]{display:none!important}

/* --------------------------------------------------------- the surface bar */
/* Which product surface you are in, stated across the full width above
 * everything else, exactly where the prototype puts it. It is its own bar and
 * not a corner of the page header: three surfaces plus a breadcrumb plus
 * search in one 60px row is what collapsed the header. */
:root{--surface-bar:#101729;--surface-bar-line:#39435c;--surface-bar-text:#dbe4f5;--surface-bar-idle:#1c2740}
body.dark{--surface-bar:#070c15;--surface-bar-line:#243144;--surface-bar-text:#c9d6e8;--surface-bar-idle:#141d2b}
.surface-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;min-height:46px;padding:6px 20px;background:var(--surface-bar);color:var(--surface-bar-text)}
.surface-bar .surface-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:-.01em;white-space:nowrap}
.surface-bar .surface-brand img{width:20px;height:20px}
.surface-bar-meta{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:#9fafc9;white-space:nowrap}
.surface-bar-meta button{border:1px solid var(--surface-bar-line);background:var(--surface-bar-idle);color:var(--surface-bar-text);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700}
.surface-bar-meta button:hover{background:#26324a}
@media(max-width:900px){.surface-bar-meta span{display:none}}

/* The switch itself, on the dark bar. The rules in styles.css established the
 * row geometry and the disabled state; these restyle it for this ground. */
.surface-bar .surface-switch button{background:var(--surface-bar-idle);border:1px solid var(--surface-bar-line);color:var(--surface-bar-text);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700}
.surface-bar .surface-switch button:hover:not([disabled]){background:#26324a;color:#fff}
.surface-bar .surface-switch button.active{background:#fff;border-color:#fff;color:#17213b}

/* Everything that used to stick to the top of the viewport now sticks below
 * the surface bar. styles.css pins the sidebar and the page header at top:0
 * and gives the sidebar a full 100vh; with a 46px bar above them the sidebar
 * ran 46px past the fold and took its identity footer with it, and the page
 * header slid under the bar on scroll. One offset, declared once. */
:root{--surface-bar-height:46px}
.app-shell{min-height:calc(100vh - var(--surface-bar-height))}
.app-shell>aside{top:var(--surface-bar-height);height:calc(100vh - var(--surface-bar-height))}
.app-shell main>header{top:var(--surface-bar-height)}

/* ------------------------------------------------------------- the sidebar */
/* The workspace chip: which surface you are in and what authority you hold in
 * it, in the sidebar, above the navigation. The role is the session's own -
 * never a default - so it renders only once /auth/me has answered. */
.workspace-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 6px 14px;padding:9px 11px;border:1px solid var(--line);background:var(--panel2);border-radius:10px;font-size:11px;color:var(--text)}
.workspace-chip b{font-weight:700}
.workspace-chip span{color:var(--muted);font-weight:700;white-space:nowrap}

/* --------------------------------------------------------- the page top bar */
/* Breadcrumb, search, session. The surface switch has moved up and out, so the
 * breadcrumb keeps a real minimum width and the search field keeps its own. */
header .crumb{min-width:150px;flex-shrink:0;white-space:nowrap}
.header-search{margin-left:8px;max-width:none}

/* ------------------------------------------------ page grammar of the v4 pages */
/* Cards that carry a task list: a numbered order marker, a subject, a status
 * and one action. Used by the Tenant Workspace's organization tasks and the
 * Engineering Studio's projects-needing-attention card. */
.task-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.task-row:last-child{border-bottom:0}
.task-row .order{width:26px;height:26px;border-radius:8px;background:var(--accent2);color:var(--accent);font-weight:800;font-size:12px;display:grid;place-items:center}
.task-row b{display:block;font-size:14px}
.task-row small{color:var(--muted)}

/* Entitlement usage: a measured value against a licensed ceiling. The bar is
 * decoration for the number, never a substitute - an unlimited allowance has
 * no bar to draw, and says so instead of rendering an empty track. */
.usage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.usage-item b{display:block;font-size:14px;margin-bottom:7px}
.usage-track{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden}
.usage-track i{display:block;height:100%;background:var(--accent)}
.usage-track.full i{background:var(--bad)}
.usage-track.near i{background:var(--warn)}
.usage-item small{display:block;color:var(--muted);margin-top:6px}
@media(max-width:760px){.usage-grid{grid-template-columns:1fr}}

/* The projects portfolio as cards, with the lifecycle a project has actually
 * reached. The stage bar is derived from stored state; it is not a guess. */
.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;text-align:left;color:var(--text);cursor:pointer}
.project-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.project-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.project-card h3{margin:0;font-size:16px}
.project-card p{margin:0;color:var(--muted);font-size:12px}
.lifecycle{display:flex;gap:6px;margin-top:auto;padding-top:12px}
.lifecycle span{flex:1;text-align:center;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lifecycle span:before{content:"";display:block;height:4px;border-radius:2px;background:var(--panel2);margin-bottom:7px}
.lifecycle span.done:before{background:var(--good)}
.lifecycle span.current:before{background:var(--accent)}
.project-card.new{border-style:dashed;align-items:center;justify-content:center;text-align:center;gap:8px}
.project-card.new .plus{width:44px;height:44px;border-radius:14px;background:var(--accent2);color:var(--accent);display:grid;place-items:center;font-size:22px}
@media(max-width:1180px){.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.project-cards{grid-template-columns:1fr}}

/* The capability status grid. Each cell now carries the platform's own
 * sentence about how that state was established, so a cell is a small block
 * rather than a single line. */
.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.capability-grid .service{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:start}
.capability-grid .service b{font-size:13px}
.capability-grid .service small{grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.45}
@media(max-width:760px){.capability-grid{grid-template-columns:1fr}}

/* A card whose whole body is one action group, as the prototype's learning
 * cards are: title, one sentence, a row of controls. */
.action-card{display:flex;flex-direction:column;gap:12px}
.action-card .actions{display:flex;flex-wrap:wrap;gap:9px}

/* ---------------------------------------------------------------- responsive */
/* The sidebar collapses to the off-canvas drawer styles.css already defines;
 * the surface bar stays, because which surface you are in is the one piece of
 * chrome that must survive every width. */
@media(max-width:980px){
  .surface-bar{padding:6px 14px;gap:10px}
  .surface-bar .surface-brand span{display:none}
}
/* THE BAR MUST NOT WIDEN THE DOCUMENT. Three `nowrap` surface buttons are
 * about 425px, so on a 375px phone the bar became the widest thing on the page
 * and the WHOLE document scrolled sideways - every page, both surfaces, while
 * each content column measured exactly right. The switch scrolls inside its
 * own bar instead, which keeps all three surfaces reachable at any width; the
 * alternative, wrapping, pushes the bar to two rows and shifts the sticky
 * offset every layout below it depends on. */
.surface-bar{max-width:100%}
/* `flex-shrink:0` is set on .surface-switch in styles.css, and it has to be:
 * without it the space-between bar squeezed the switch to min-content and
 * wrapped it. Inside THIS bar it must be reversed, because a flex item that
 * cannot shrink cannot be a scroll container either - it just keeps its
 * content width and pushes the document out from under it. Measured at 375px:
 * the switch stayed 452px and the page scrolled sideways on every screen.
 * Shrinking is what lets overflow-x actually engage. */
.surface-bar .surface-switch{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.surface-bar .surface-switch::-webkit-scrollbar{display:none}
.surface-bar-meta{min-width:0}

/* `.grid-2` is declared twice in styles.css: once at the top, once again below
 * its own `@media(max-width:980px)` collapse. The later flat rule wins at
 * every width, so the two-column layout never collapsed on a narrow screen -
 * on any page, in either surface. Restating the collapse after both is the
 * repair that does not require reordering a file every other page depends on. */
/* EVERY COLLAPSE USES minmax(0,...), NEVER A BARE FRACTION. A grid track's
 * automatic minimum is its content, so `1fr` lets a card holding a 720px table
 * widen its own row past the viewport - the .table-wrap inside it never gets
 * the chance to scroll, because nothing ever forces it narrow. Measured at
 * 375px: the dashboard's table pushed the document to 496px while the
 * container it lives in reported the right size. */
@media(max-width:980px){.grid-2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.metrics{grid-template-columns:minmax(0,1fr)}}
.card,.metric{min-width:0}

/* THE TOP BAR MUST FIT, AND THE BREADCRUMB IS WHAT GIVES WAY.
 *
 * The previous pass fixed the surface bar and the grid tracks and left the page
 * header alone, so the document still scrolled sideways on every surface -
 * measured on the deployed build at 375px: 434px on Engineering Studio and
 * Learning Resources, 406px on the Tenant Workspace. Two earlier probes named
 * the wrong culprits, because both reported elements INSIDE scroll containers:
 * a table at 762px and a surface button at 496px cost nothing, which is exactly
 * what those containers are for. The element that actually widens a page is one
 * with no scrolling ancestor, and on all three surfaces it was the same one -
 * `.header-actions`, pushed past the edge.
 *
 * The cause is this file's own `header .crumb{min-width:150px;flex-shrink:0}`
 * fifty lines above: a 150px floor plus the drawer button plus the actions
 * cannot share a 375px row, and a flex item that cannot shrink pushes the row
 * out rather than compressing. The breadcrumb is the one item here that is
 * redundant - the page's own heading already says where you are - so it is what
 * goes. Wrapping the bar instead would put it on two rows and shift the sticky
 * offset every layout below it is positioned against. */
@media(max-width:760px){
  header .crumb{display:none}
  .app-shell main>header{gap:8px;padding-left:10px;padding-right:10px}
  .header-actions{flex-shrink:0;gap:8px;margin-left:auto}
}