/* Calm Instrument shell (Slice 2): the partner portal's and Central's frame — sidebar, phone/tablet top bar
   and drawer, page header, Settings tabs. Tokens only (tokens.css); page internals are not styled here.

   Restrained on purpose: one ground, a hairline between sidebar and content, no glow, no gradient, no filled
   lime. "You are here" is a subtle surface, a 3px lime marker, bolder text and aria-current, never colour
   alone, and never the lime fill that belongs to a page's one primary action. */

.ci-skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--r-md);
    background: var(--overlay); color: var(--text); font-weight: var(--fw-strong); text-decoration: none; box-shadow: var(--shadow-overlay); }
.ci-skip:focus { top: var(--s3); }

.ci-shell, .ci-shell *, .ci-shell *::before, .ci-shell *::after { box-sizing: border-box; }
.ci-shell { color-scheme: dark; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "side body";
    min-height: 100vh; background: var(--bg); color: var(--text); font: var(--fw-body) var(--fs-body)/1.6 var(--font); }

/* ---- Sidebar ---- */
.ci-side { grid-area: side; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
    padding: var(--s5) var(--s3) var(--s4); border-right: 1px solid var(--line); background: var(--bg); }
.ci-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--h-touch); padding: 0 var(--s3); margin-bottom: var(--s4);
    color: var(--text); text-decoration: none; }
.ci-brand svg { flex: 0 0 auto; }
.ci-brand-name { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .14em; line-height: 1; }
.ci-brand-sub { font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.ci-shell-staff .ci-brand-sub { color: var(--staff); }

.ci-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-grp { margin: var(--s5) var(--s3) var(--s2); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong);
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ci-ni { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: var(--h-touch); padding: 10px var(--s3);
    border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-size: var(--fs-control); font-weight: 600;
    transition: color var(--t-fast), background var(--t-fast); }
.ci-ni:hover { color: var(--text); background: var(--fill-1); }
.ci-ni[aria-current="page"] { color: var(--text); background: var(--surface); font-weight: 800; }
.ci-ni[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--s3)); top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--lime); }
.ci-ni .ci-icon { color: var(--muted); }
.ci-ni:hover .ci-icon, .ci-ni[aria-current="page"] .ci-icon { color: var(--text); }
/* Focus is the ring around the whole item: a different shape from the 3px marker, so the two never read alike. */
.ci-ni:focus-visible, .ci-brand:focus-visible, .ci-burger:focus-visible, .ci-tab:focus-visible, .ci-out:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ci-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-full); background: var(--fill-3); color: var(--text);
    font-size: var(--fs-meta); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

.ci-foot { margin-top: auto; padding: var(--s4) var(--s3) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-org { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-who { font-size: var(--fs-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-foot .ci-btn { width: 100%; margin-top: var(--s3); }
.ci-out { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--h-touch); margin-top: var(--s1); padding: 0 2px;
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ci-out:hover { color: var(--text); text-decoration-color: var(--text-2); }

/* ---- Content ---- */
.ci-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; }
.ci-main:focus { outline: none; }
.ci-staffband { display: flex; align-items: center; gap: 10px; margin: 0; padding: var(--s2) var(--s8); border-bottom: 1px solid var(--line);
    background: var(--surface); color: var(--staff); font-size: var(--fs-meta); font-weight: var(--fw-strong); letter-spacing: .04em; text-transform: uppercase; }
.ci-staffband::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-sm); background: var(--staff); flex: 0 0 auto; }
/* Staff pages pad themselves (.staff, .wrap); the shell pads only its title row, as before. */
.ci-shell-staff .ci-main { flex: 1; width: 100%; }
.ci-staffhead { padding: var(--s7) var(--s7) 0; }
.ci-staffhead .ci-ph { margin: 0; }

/* ---- Page header: title, optional description, the page's own actions (at most one primary) ---- */
.ci-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); margin: 0 0 var(--s6); }
.ci-main .ci-ph h1 { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.ci-main .ci-ph-desc { margin: 6px 0 0; max-width: 70ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.ci-ph-acts { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }

/* ---- Settings tabs: real links to real addresses; the current one is filled, bold and aria-current ---- */
.ci-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 var(--s7); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.ci-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 6px var(--s4); border-radius: var(--r-sm);
    color: var(--text-2); text-decoration: none; font-size: var(--fs-control); font-weight: 600; }
.ci-tab:hover { color: var(--text); background: var(--fill-1); }
.ci-tab[aria-current="page"] { color: var(--text); background: var(--raised); font-weight: 800; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---- Phone and tablet: a 56px top bar and a drawer ---- */
.ci-top, .ci-scrim { display: none; }

@media (max-width: 900px) {
    .ci-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "body"; }
    .ci-top { grid-area: top; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
        height: 56px; padding: 0 var(--s2) 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--bg); }
    .ci-top .ci-brand { margin: 0; padding: 0; }
    .ci-burger { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--r-md);
        background: transparent; color: var(--text); cursor: pointer; }
    .ci-burger .ci-icon { width: 20px; height: 20px; }
    .ci-burger:hover { background: var(--fill-1); }

    /* Closed, the drawer is hidden from everyone (visibility), so it is neither tabbed into nor read out. */
    .ci-side { position: fixed; top: 56px; left: 0; bottom: 0; z-index: 50; width: min(300px, 86vw); height: auto;
        padding: var(--s3) var(--s3) var(--s4); border-right: 1px solid var(--line-strong); background: var(--overlay); box-shadow: var(--shadow-overlay);
        transform: translateX(-100%); visibility: hidden; transition: transform var(--t-open), visibility 0s linear 180ms; }
    .ci-side > .ci-brand { display: none; }
    .ci-scrim { display: block; position: fixed; inset: 56px 0 0 0; z-index: 45; background: var(--scrim);
        opacity: 0; visibility: hidden; transition: opacity var(--t-open), visibility 0s linear 180ms; }
    .ci-shell[data-drawer="open"] .ci-side { transform: none; visibility: visible; transition: transform var(--t-open); }
    .ci-shell[data-drawer="open"] .ci-scrim { opacity: 1; visibility: visible; transition: opacity var(--t-open); }
    .ci-ni { min-height: 48px; }
    .ci-ni[aria-current="page"] { background: var(--raised); }
    .ci-staffhead { padding: var(--s6) var(--s4) 0; }
    .ci-staffband { padding: var(--s2) var(--s6); }
    .ci-tab { min-height: var(--h-touch); }
}
@media (max-width: 640px) {
    .ci-staffband { padding: var(--s2) var(--s4); }
    .ci-ph { flex-direction: column; align-items: stretch; gap: 14px; }
    .ci-main .ci-ph h1 { font-size: calc(var(--fs-display) - 4px); line-height: 30px; }
    .ci-tabs { display: flex; }
    .ci-tab { flex: 1 1 auto; justify-content: center; }
}
html.ci-locked, html.ci-locked body { overflow: hidden; }

/* In-page link targets (the customer page's Opportunity, Copilot and capability anchors) land below the top bar. */
.ci-main [id] { scroll-margin-top: var(--s4); }
@media (max-width: 900px) { .ci-main [id] { scroll-margin-top: 72px; } }