/* Page layouts, unlayered and loaded last, so a page's own rules win over the component layers. Each page adds its
   own section here. A page rule for a linked component is scoped to its page (.g-access .g-tile), since the anchor
   reset in tokens.css outweighs a bare component selector. */

/* The container a page still built with dom.js mounts in draws no box of its own. */
.g-legacy{display:contents}

/* A page's heading takes the focus a navigation moves (tabindex -1): a place to read from, not a control, so it draws
   no focus ring. */
h1[tabindex="-1"]:focus{outline:none}

/* The dark grounds pinned in both themes, the break-glass band and Home's hero, draw the focus ring in the violet
   app.css gives the always-dark top bar: the light theme's brand blue barely shows on them. It is unlayered, as
   app.css's own ring is, or that ring would win. */
.g-oncall-banner :focus-visible,.g-home .g-home-hero :focus-visible{outline-color:#a79ff5}

/* Overview: the standing/on-request split keeps the catalog's own colors rather than a band's. */
.split .g-stack-part.is-standing{fill:var(--brand)}
.split .g-stack-part.is-request{fill:var(--req);fill-opacity:.45}

/* My access: the header and its badges, Elevated now, Needs a look, the toolbar, then a panel per service held. The
   page is a data page, so its children take the full width, not the reading measure. */
.g-access>*{max-width:none}
.g-access .g-access-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:4px 0 16px}
.g-access .g-access-title{min-width:0;
  & h1{margin:0;font:700 30px var(--display)}}
.g-access .g-access-line{margin:6px 0 0;color:var(--g-ink-2);font-size:14px;
  & b{color:var(--g-ink)}}
.g-access .g-access-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.g-access .g-access-role,.g-access .g-access-power{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:999px;border:1px solid var(--g-edge-2);color:var(--g-ink-2);font:12px var(--mono)}
.g-access .g-access-role:hover{border-color:var(--brand);color:var(--g-ink)}
.g-access .g-access-power{border-color:color-mix(in srgb,var(--brand) 60%,transparent);color:var(--g-ink);font-family:var(--sans)}
.g-access .g-access-h{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font:700 15px var(--display)}
/* Needs a look: what nothing explains in red, what is syncing in amber, side by side while both fit. */
.g-access .g-access-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-access .g-access-lk{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--g-edge);
  background:var(--g-surface);
  &.is-flag{border-color:color-mix(in srgb,var(--g-bad) 40%,transparent);
    background:linear-gradient(90deg,color-mix(in srgb,var(--g-bad) 10%,transparent),transparent 70%),var(--g-surface);
    & .g-access-lk-n{color:var(--g-bad)}}
  &.is-sync{border-color:color-mix(in srgb,var(--g-wait) 35%,var(--g-edge));
    background:linear-gradient(90deg,color-mix(in srgb,var(--g-wait) 8%,transparent),transparent 70%),var(--g-surface);
    & .g-access-lk-n{color:var(--g-wait)}}}
.g-access .g-access-lk-n{min-width:32px;text-align:center;font:700 22px var(--display)}
.g-access .g-access-lk-text{min-width:0}
.g-access .g-access-lk-title{margin:2px 0 0;font-weight:700}
.g-access .g-access-lk-sub{margin:4px 0 0;font-size:12.5px;color:var(--g-ink-2)}
.g-access .g-access-lk-list{margin:4px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--g-ink-2)}
.g-access .g-access-lk-group{font-family:var(--mono);color:var(--g-ink);overflow-wrap:anywhere}
.g-access .g-access-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 0;margin:10px 0 6px;
  & .g-fzf{flex:1 1 280px}}
/* The toolbar sticks under the top bar, except on a phone: there the bar wraps taller, and the two would pin a quarter of
   the screen. */
@media not all and (max-width:640px){
  .g-access .g-access-tools{position:sticky;top:52px;z-index:10;background:linear-gradient(var(--bg) 70%,transparent)}}
/* The filter clips what overflows its rounded box, so an option draws its focus ring inside itself. */
.g-access .g-access-filter{display:inline-flex;flex-wrap:wrap;border:1px solid var(--g-edge);border-radius:10px;overflow:hidden}
.g-access .g-access-filter-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-right:1px solid var(--g-edge);
  color:var(--g-ink-2);font:500 12.5px var(--sans);white-space:nowrap;
  &:last-child{border-right:0}
  &:hover{color:var(--g-ink)}
  &:focus-visible{outline-offset:-2px}
  &[aria-current="true"]{background:var(--g-surface-3);color:var(--g-ink)}
  & .g-logo{width:20px;height:20px;border-radius:5px}}
.g-access .g-access-note{margin:0 0 12px;color:var(--g-wait);font-size:13px}
/* A panel per service: its header folds it, the arrow turning a quarter as it opens. */
.g-access .g-access-panels{display:flex;flex-direction:column;gap:14px}
.g-access .g-access-panel{border-radius:16px;border:1px solid var(--g-edge);background:var(--g-surface)}
.g-access .g-access-panel-hd{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border:0;border-radius:16px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  &:hover .g-access-chev{color:var(--g-ink)}
  &:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}}
.g-access .g-access-chev{display:inline-block;color:var(--g-ink-2);font-size:13px;transform:rotate(90deg);transition:transform .15s ease-out}
.g-access .g-access-panel.is-shut .g-access-chev{transform:none}
.g-access .g-access-panel-h{margin:0;font:inherit}
.g-access .g-access-panel-name{font:700 16px var(--display)}
.g-access .g-access-panel-count{font-size:12.5px;color:var(--g-ink-2)}
.g-access .g-access-rows{display:flex;flex-direction:column;padding-bottom:4px}
.g-access .g-access-row{display:grid;grid-template-columns:minmax(170px,26%) minmax(0,1fr);gap:14px;align-items:center;padding:8px 18px;
  border-top:1px solid var(--g-edge)}
.g-access .g-access-target{overflow:hidden;font:600 13px var(--mono);color:var(--g-ink);text-overflow:ellipsis;white-space:nowrap}
.g-access .g-access-path{font-weight:400;color:var(--g-ink-3)}
.g-access .g-access-lv{display:flex;flex-wrap:wrap;gap:6px}
/* What a live break glass adds: white on red, whatever the level. */
.g-access .g-access-glass>.g-chip{color:#fff;background:#7f1d1d;border-color:#dc2626}
.g-access .g-access-more{margin:22px 0 0;text-align:center;color:var(--g-ink-2)}
@media (max-width:640px){
  .g-access .g-access-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 14px}
  .g-access .g-access-looks{grid-template-columns:minmax(0,1fr)}}

/* Request access: the search, the service filter and what it finds (or, with nothing typed, the services to browse),
   beside the sticky request and, for the on-call, break glass; once sent, the outcome in their place. */
.g-request>*{max-width:none}
.g-request .g-request-lede{margin:6px 0 16px;color:var(--g-ink-2)}
.g-request .g-request-layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:22px;align-items:start}
@media (max-width:1100px){.g-request .g-request-layout{grid-template-columns:minmax(0,1fr)}}
.g-request .g-request-picker{min-width:0}
.g-request .g-request-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media not all and (max-width:1100px){.g-request .g-request-side{position:sticky;top:64px}}
.g-request .g-request-note{margin:0 0 12px;color:var(--g-wait);font-size:13px}
.g-request .g-request-loading{color:var(--g-ink-2)}
/* The search is the page's first control: one big box, then the service filter. */
.g-request .g-request-ask .g-fzf{height:52px;padding:0 12px 0 18px;border-radius:16px;font-size:15px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  & .g-fzf-prompt{font-size:16px}}
.g-request .g-request-filter{margin:14px 0;
  & .g-seg{flex-wrap:wrap}
  & .g-logo{width:20px;height:20px;border-radius:5px;margin:-4px 0}}
/* A result is a row: the logo, what it is and its service, how it gets approved, its ceiling, and + Add. */
.g-request .g-request-results{min-width:0}
.g-request .g-request-hits{display:flex;flex-direction:column;gap:8px}
.g-request .g-request-hit{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:10px 14px;
  border-radius:12px;border:1px solid var(--g-edge);background:var(--g-surface);
  &.is-added{border-color:color-mix(in srgb,var(--brand) 65%,var(--g-edge));
    box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 65%,transparent),0 8px 24px var(--g-glow)}
  &.is-level{grid-template-columns:minmax(0,1fr) auto auto auto}
  &.is-bg{border-color:color-mix(in srgb,var(--g-bad-fill) 70%,var(--g-edge));
    background:linear-gradient(90deg,color-mix(in srgb,var(--g-bad) 16%,transparent),color-mix(in srgb,var(--g-bad) 2%,transparent)),var(--g-surface)}}
.g-request .g-request-hit-main{min-width:0}
.g-request .g-request-what{font:600 13.5px var(--mono);overflow-wrap:anywhere}
.g-request .g-request-on{font-weight:400;color:var(--g-ink-3)}
.g-request .g-request-svcname{font-size:12px;color:var(--g-ink-2)}
.g-request .g-request-bgi{width:32px;font-size:24px;text-align:center}
.g-request .g-request-how{padding:3px 10px;border-radius:999px;border:1px solid var(--g-edge);font:600 12px var(--sans);color:var(--g-ink-2);
  white-space:nowrap;
  &.is-auto{--how:var(--g-ok)}
  &.is-manager{--how:var(--s1)}
  &.is-security{--how:var(--req)}
  &.is-bg{--how:var(--g-bad)}
  &.is-auto,&.is-manager,&.is-security,&.is-bg{border-color:color-mix(in srgb,var(--how) 45%,transparent);
    background:color-mix(in srgb,var(--how) 11%,transparent);color:color-mix(in srgb,var(--how) 70%,var(--g-ink))}}
.g-request .g-request-max{font:12px var(--mono);color:var(--g-ink-3);white-space:nowrap}
.g-request .g-request-add{min-width:92px;justify-content:center;
  &[aria-pressed="true"]{background:linear-gradient(90deg,var(--sel),var(--brand));border-color:transparent;color:#fff}}
.g-request .g-btn.is-danger.is-solid{background:var(--g-bad-fill);border-color:var(--g-bad-fill);color:#fff;
  &:hover{background:color-mix(in srgb,var(--g-bad-fill) 85%,#000)}}
.g-request .g-request-more{margin:10px 2px;color:var(--g-ink-2);font-size:13px}
.g-request .g-request-link{padding:0;border:0;background:transparent;color:var(--accent);font:inherit;cursor:pointer}
.g-request .g-request-none{margin:0;padding:26px;border:1px dashed var(--g-edge);border-radius:12px;text-align:center;color:var(--g-ink-2)}
/* Browsing: a divider per service that folds, over a panel with a row per target that folds too, over its levels. */
.g-request .g-request-section{margin:0 0 6px}
.g-request .g-request-svc{display:flex;align-items:center;gap:10px;margin:22px 2px 10px;
  &::after{content:"";flex:1;height:1px;background:var(--g-edge)}
  & h2{margin:0;font:700 15px var(--display)}}
.g-request .g-request-section:first-of-type .g-request-svc{margin-top:4px}
.g-request .g-request-svc-count{font-size:12.5px;color:var(--g-ink-2)}
/* The arrow is drawn, not named: its empty alt text keeps it out of the button's name, and a browser that cannot read
   alt text keeps the first content. */
.g-request .g-request-fold,.g-request .g-request-thead{border:0;background:transparent;color:var(--g-ink);font:inherit;text-align:left;cursor:pointer;
  &::before{content:"▸";content:"▸"/"";flex:none;width:12px;color:var(--g-ink-2);font-size:12px;transition:transform .15s ease}
  &[aria-expanded="true"]::before{transform:rotate(90deg)}
  &:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}}
.g-request .g-request-fold{display:inline-flex;align-items:center;gap:10px;padding:0}
.g-request .g-request-list{overflow:hidden;border:1px solid var(--g-edge);border-radius:16px;background:var(--g-surface)}
.g-request .g-request-target+.g-request-target{border-top:1px solid var(--g-edge)}
.g-request .g-request-thead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;padding:10px 16px;
  &:hover{background:color-mix(in srgb,var(--g-ink) 3%,transparent)}}
.g-request .g-request-tname{min-width:180px;font:600 13.5px var(--mono)}
.g-request .g-request-tmix{font-size:12.5px;color:var(--g-ink-2)}
.g-request .g-request-added{margin-left:auto;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 60%,transparent);
  background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--accent);font:600 12px var(--sans)}
.g-request .g-request-levels{background:var(--g-surface-2)}
.g-request .g-request-levels .g-request-hit{padding:8px 16px 8px 44px;border:0;border-top:1px solid var(--g-edge);border-radius:0;background:transparent;
  &.is-added{box-shadow:inset 3px 0 0 var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}}
/* On a phone a row keeps + Add beside what it is, and puts how it gets approved and its ceiling under it. */
@media (max-width:640px){
  .g-request .g-request-hit{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;
    & .g-request-add{grid-row:1;grid-column:3}
    & .g-request-how{grid-column:2;justify-self:start}
    & .g-request-max{grid-column:3;justify-self:end}
    &.is-level{grid-template-columns:minmax(0,1fr) auto;
      & .g-request-add{grid-column:2} & .g-request-how{grid-column:1} & .g-request-max{grid-column:2}}}
  .g-request .g-request-levels .g-request-hit{padding-left:28px}
  .g-request .g-request-tname{min-width:0}
}
/* The on-call's break glass, under the request: red, as on every page. */
.g-request .g-request-bg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--g-bad-fill) 70%,var(--g-edge));
  background:linear-gradient(135deg,color-mix(in srgb,var(--g-bad) 16%,transparent),color-mix(in srgb,var(--g-bad) 6%,transparent)),var(--g-surface);
  color:color-mix(in srgb,var(--g-bad) 55%,var(--g-ink))}
.g-request .g-request-bg-title{margin:0;font-weight:700;color:var(--g-ink)}
.g-request .g-request-bg-sub{margin:0;font-size:12.5px}
.g-request .g-request-cart{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;
  border:1px solid var(--g-edge-2);
  background:radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),var(--g-surface);
  & h2{display:flex;align-items:center;gap:8px;margin:0;font:700 18px var(--display)}}
.g-request .g-request-count{padding:1px 8px;border-radius:999px;background:var(--brand);color:#fff;font:600 12px var(--mono)}
.g-request .g-request-sub{margin:0;font-size:12.5px;color:var(--g-ink-2)}
.g-request .g-request-routes{display:flex;flex-wrap:wrap;gap:6px}
/* The lines scroll down only: a line sliding in from the right never makes them scroll sideways. */
.g-request .g-request-lines{display:flex;flex-direction:column;gap:8px;max-height:420px;margin:0;padding:0;overflow:hidden auto;list-style:none}
.g-request .g-request-empty{margin:0;padding:22px 10px;border:1px dashed var(--g-edge);border-radius:12px;text-align:center;
  color:var(--g-ink-3)}
.g-request .g-request-label{font:600 12px var(--sans);color:var(--g-ink-2)}
.g-request .g-request-reason{box-sizing:border-box;width:100%;min-height:74px;padding:10px 12px;border-radius:12px;border:1px solid var(--g-edge);
  background:var(--g-surface-2);color:var(--g-ink);font:13px/1.5 var(--sans);resize:vertical;outline:0;
  &:focus{border-color:var(--brand)}}
.g-request .g-request-chars{margin:-6px 0 0;text-align:right;font:11px var(--mono);color:var(--g-ink-3)}
.g-request .g-request-problem{margin:0;font-size:12.5px;color:var(--g-bad)}
/* Request N → glows once each time it becomes ready: a ::after that only fades. */
.g-request .g-request-go.is-ready::after{content:"";position:absolute;inset:-3px;border-radius:15px;
  box-shadow:0 0 18px color-mix(in srgb,var(--brand) 70%,transparent);opacity:0;animation:g-glow .3s ease-out;pointer-events:none}
.g-request .g-request-go{position:relative;justify-content:center;padding:11px;font-size:14px;border-radius:12px;
  &:disabled{opacity:.45;cursor:not-allowed}}
.g-request .g-request-sending{padding:11px;text-align:center;color:var(--g-ink-2)}
.g-request .g-request-cli summary{cursor:pointer;font-size:12px;color:var(--g-ink-3)}
.g-request .g-request-cli .g-term{margin-top:8px;font-size:10.5px}
.g-request .g-request-sent{max-width:980px;margin:10px auto 0;display:flex;flex-direction:column;gap:10px}
.g-request .g-request-hero{display:flex;gap:22px;align-items:center;padding:26px 28px;border-radius:22px;border:1px solid var(--g-edge);
  background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--g-ok) 14%,transparent),transparent 60%),var(--g-surface);
  &.is-unsure{background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--g-wait) 14%,transparent),transparent 60%),var(--g-surface)}}
.g-request .g-request-hero-text{flex:1;min-width:0}
.g-request .g-request-sent-title{margin:0 0 4px;font:700 32px var(--display)}
.g-request .g-request-res{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:14px;
  border:1px solid var(--g-edge);background:var(--g-surface);
  &.is-ok{border-color:color-mix(in srgb,var(--g-ok) 40%,var(--g-edge))}
  &.is-wait{border-color:color-mix(in srgb,var(--g-wait) 40%,var(--g-edge))}}
.g-request .g-request-res-title{margin:0 0 2px;font:600 14px var(--mono)}
.g-request .g-request-res-left{margin:2px 0 0;font-size:12.5px;color:var(--g-ok)}
.g-request .g-request-next{display:flex;gap:10px;margin-top:6px}

/* My requests: the head, the tools, the tickets still in flight as cards, then the history by day. */
.g-myreq>*{max-width:none}
.g-myreq .g-myreq-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;margin-bottom:14px}
.g-myreq .g-myreq-title{margin:0;font:700 30px var(--display)}
.g-myreq .g-myreq-lede{margin:0 0 4px;font-size:13px;color:var(--g-ink-2)}
.g-myreq .g-myreq-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.g-myreq .g-myreq-note{margin:0 0 12px;font-size:13px;color:var(--g-wait)}
.g-myreq .g-myreq-loading{color:var(--g-ink-2)}
.g-myreq .g-myreq-h{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font:700 13px var(--sans);letter-spacing:.8px;
  text-transform:uppercase;color:var(--g-ink-3);
  &::after{content:"";flex:1;height:1px;background:var(--g-edge)}}
.g-myreq .g-myreq-group,.g-myreq .g-myreq-day{margin:0}
.g-myreq .g-myreq-rows{display:flex;flex-direction:column;gap:8px}
.g-myreq .g-myreq-more{display:flex;justify-content:center;margin-top:14px}
/* A ticket still in flight: amber, as whatever still waits on someone is everywhere; its actions always show. */
.g-myreq .g-myreq-fly{gap:0;margin-bottom:12px;padding:18px 20px;border-radius:18px;
  border-color:color-mix(in srgb,var(--g-wait) 35%,var(--g-edge));
  background:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--g-wait) 10%,transparent),transparent 60%),var(--g-surface);
  & .g-card-head{gap:12px;margin-bottom:12px}
  & .g-card-title{font:700 18px var(--display);white-space:normal;overflow-wrap:anywhere}
  & .g-card-body{gap:0}}
.g-myreq .g-myreq-logos{display:flex;gap:6px}
@media (max-width:640px){.g-myreq .g-myreq-fly{padding:16px;
  & .g-card-head{flex-wrap:wrap}
  & .g-card-title{flex:1 1 150px}}}
.g-myreq .g-myreq-meta{margin:2px 0 0;font-size:12.5px;color:var(--g-ink-2)}
.g-myreq .g-myreq-id{font-family:var(--mono)}
.g-myreq .g-myreq-quote{margin:0;padding:6px 12px;border-left:3px solid var(--g-edge-2);font-style:italic;color:var(--g-ink);overflow-wrap:anywhere}
.g-myreq .g-myreq-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0 12px;padding:0;list-style:none}
.g-myreq .g-myreq-step{position:relative;padding:22px 8px 0 0;font-size:12.5px;color:var(--g-ink-3);
  &::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;background:var(--g-edge)}
  &:first-child::before{left:8px}
  &:last-child::before{right:auto;width:8px}
  &::after{content:"";position:absolute;top:0;left:0;box-sizing:border-box;width:16px;height:16px;border-radius:50%;
    border:2px solid var(--g-edge-2);background:var(--bg)}
  & b{display:block;font-weight:600;color:inherit}
  &.is-done{color:var(--g-ink-2);
    &::before{background:var(--g-ok);transform-origin:left;animation:g-grow-x .12s ease-out backwards}
    &::after{border-color:var(--g-ok);background:var(--g-ok)}}
  /* The track fills left to right when the card mounts, a step every 60ms. */
  &:nth-child(2)::before{animation-delay:.06s}
  &:nth-child(3)::before{animation-delay:.12s}
  &:nth-child(4)::before{animation-delay:.18s}
  &.is-now{color:var(--g-ink);
    &::after{border-color:var(--g-wait);box-shadow:0 0 0 4px color-mix(in srgb,var(--g-wait) 18%,transparent);
      animation:g-beat 1.6s ease-out 3}}}
/* The decision window: who still decides and until when, the time track, and what happens if nobody does. */
.g-myreq .g-myreq-window{padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--g-wait) 25%,var(--g-edge));
  background:var(--g-surface-2);
  & p{margin:0}}
.g-myreq .g-myreq-wait{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:14px;
  & b{color:var(--g-wait)}}
.g-myreq .g-myreq-until,.g-myreq .g-myreq-lapse{font-size:12.5px;color:var(--g-ink-2)}
.g-myreq .g-myreq-items{display:flex;flex-direction:column;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.g-myreq .g-myreq-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:10px;background:var(--g-surface-2)}
.g-myreq .g-myreq-item-what{flex:1 1 140px;min-width:0;font:600 13px var(--mono);overflow-wrap:anywhere}
.g-myreq .g-myreq-item-ttl,.g-myreq .g-myreq-route{font-size:12.5px;color:var(--g-ink-2)}
.g-myreq .g-myreq-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:14px}
.g-myreq .g-myreq-cancel{flex:1 1 220px;margin:0;align-self:center;font-size:12.5px;color:var(--g-ink-2)}

/* Ticket: the hero (what it asks for, its state and, while pending, who has how long to decide until when, and the
   ring of the time left), then the requester, the items and the timeline beside the sticky decision panel. */
.g-ticket>*{max-width:none}
.g-ticket .g-ticket-loading{color:var(--g-ink-2)}
.g-ticket .g-ticket-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin-bottom:18px;
  padding:22px 26px;border-radius:22px;border:1px solid var(--g-edge);
  background:radial-gradient(70% 140% at 0% 0%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 60%),var(--g-surface);
  & .g-cd{width:92px;height:92px}
  & .g-cd-arc{stroke:var(--g-wait)}
  &.is-closing .g-cd-arc{stroke:#fb923c}}
@media (max-width:640px){
  .g-ticket .g-ticket-hero{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}
  .g-ticket .g-ticket-title{font-size:22px}
  .g-ticket .g-ticket-item{grid-template-columns:auto minmax(0,1fr);
    &>.g-pill{grid-column:2;justify-self:start}}}
.g-ticket .g-ticket-logos{display:flex;
  & .g-logo{margin-right:-10px;box-shadow:0 0 0 3px var(--g-surface),0 0 0 4px var(--g-edge)}
  & .g-logo:last-child{margin-right:0}}
.g-ticket .g-ticket-head{min-width:0}
.g-ticket .g-ticket-title{margin:0 0 6px;font:700 26px var(--display);overflow-wrap:anywhere}
.g-ticket .g-ticket-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;color:var(--g-ink-2)}
.g-ticket .g-ticket-deadline{margin:10px 0 0;font-size:14px;color:var(--g-wait)}
.g-ticket .g-ticket-until,.g-ticket .g-ticket-lapse{font-size:12.5px;color:var(--g-ink-2)}
.g-ticket .g-ticket-left{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--g-ink-2);
  & b{font:700 20px var(--display);color:var(--g-ink)}}
.g-ticket .g-ticket-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
/* One column below 1000px, the decision panel first, right under the hero, so a phone approver reaches it without
   scrolling past the rest. Only beside the cards, on a wide screen, does the panel stick. */
@media (max-width:1000px){.g-ticket .g-ticket-cols{grid-template-columns:minmax(0,1fr)} .g-ticket .g-ticket-side{order:-1}}
@media not all and (max-width:1000px){.g-ticket .g-ticket-side{position:sticky;top:64px}}
.g-ticket .g-ticket-main{min-width:0}
.g-ticket .g-ticket-card{margin-bottom:14px;padding:18px 20px;border-radius:16px;border:1px solid var(--g-edge);background:var(--g-surface)}
.g-ticket .g-ticket-h{margin:0 0 12px;font:700 15px var(--display)}
.g-ticket .g-ticket-who{display:flex;align-items:center;gap:12px;margin-bottom:12px;
  & p{margin:0}}
.g-ticket .g-ticket-email{overflow-wrap:break-word}
.g-ticket .g-ticket-role{font-size:12px;color:var(--g-ink-2)}
.g-ticket .g-ticket-quote{margin:0;padding:6px 12px;border-left:3px solid var(--g-edge-2);font-style:italic;color:var(--g-ink);overflow-wrap:anywhere}
.g-ticket .g-ticket-items{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.g-ticket .g-ticket-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:12px;
  border:1px solid var(--g-edge);background:var(--g-surface-2);
  & p{margin:0}}
.g-ticket .g-ticket-item-main{min-width:0}
.g-ticket .g-ticket-item-what{font:600 14px var(--mono);overflow-wrap:anywhere}
.g-ticket .g-ticket-item-sub,.g-ticket .g-ticket-item-decided{margin-top:2px;font-size:12px;color:var(--g-ink-2);overflow-wrap:anywhere}
.g-ticket .g-ticket-route{color:var(--g-ink)}
.g-ticket .g-ticket-ttl.is-flag,.g-ticket .g-ticket-item-decided.is-flag{color:var(--g-bad)}
.g-ticket .g-ticket-item-decided.is-ok{color:var(--g-ok)}
.g-ticket .g-ticket-note{margin:-4px 0 12px;font-size:13px;color:var(--g-ink-2)}
/* The decision panel: the decisions offered, stacked full width, then the reminder that Slack races the web fairly. */
.g-ticket .g-ticket-decide{border-color:var(--g-edge-2);
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),var(--g-surface);
  & .g-decision{flex-direction:column;align-items:stretch}
  & .g-confirm{display:flex}
  & .g-confirm>.g-btn{flex:1;justify-content:center;padding:10px;font-size:14px;border-radius:12px}}
.g-ticket .g-ticket-race,.g-ticket .g-ticket-waiting{margin:10px 0 0;font-size:12px;color:var(--g-ink-2)}
.g-ticket .g-ticket-waiting{margin:0;font-size:13px;color:var(--g-ink)}
/* On a granted outcome a check pops in beside the words: scale and opacity, once. */
.g-ticket .g-ticket-check{width:22px;height:22px;flex:none;animation:g-pop-in .22s ease-out backwards;
  & circle,& path{animation:none}}
.g-ticket .g-ticket-decided{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;border-radius:12px;border:1px solid var(--g-edge-2);background:var(--g-surface-2);
  &.tone-ok,&.tone-bad{border-color:color-mix(in srgb,var(--tone) 45%,var(--g-edge));
    background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 10%,transparent),transparent 60%),var(--g-surface-2)}}

/* To approve: the head with its power badge, the tabs, then the queue as one column of decision cards, most urgent on
   top, or the tickets the viewer decided. */
.g-appr>*{max-width:none}
.g-appr .g-appr-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px}
.g-appr .g-appr-title{margin:0;font:700 30px var(--display)}
.g-appr .g-appr-power{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:linear-gradient(90deg,#3a2fd0,#7d75ec);color:#fff;font:600 12px var(--sans)}
.g-appr .g-appr-lede{flex:1 1 280px;margin:0;font-size:13px;color:var(--g-ink-2)}
.g-appr .g-appr-panel{margin-top:4px}
.g-appr .g-appr-loading{color:var(--g-ink-2)}
.g-appr .g-appr-pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.g-appr .g-appr-grid{display:flex;flex-direction:column;gap:12px;max-width:1100px}
.g-appr .g-appr-tools{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.g-appr .g-appr-rows{display:flex;flex-direction:column;gap:8px}
.g-appr .g-appr-more{display:flex;justify-content:center;margin-top:14px}

/* Home: the hero with its one search and the tiles for what is loud, Elevated now beside owl's status, then the status
   carousel beside what happened, up to 1640px wide. The hero is the brand's dark register in both themes, as app.css's
   own hero is, so it pins the dark tokens it draws with; its aurora is the brand's colors, which follow the theme, and
   turns red while a break glass is live. */
.g-home{max-width:1640px;margin:0 auto}
.g-home>*{max-width:none}
.g-home .g-home-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;
  padding:48px 40px 42px;border-radius:22px;border:1px solid #1f2748;background:#040a1c;color:#f3f3f9;text-align:center;
  --g-ink:#f3f3f9;--g-ink-2:#a6abbb;--g-ink-3:#7b8199;--g-surface-3:#10172f;--g-gmp:#a79ff5;
  &::before{content:"";position:absolute;inset:-40%;z-index:-1;filter:blur(20px);pointer-events:none;
    background:radial-gradient(35% 30% at 25% 30%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 70%),
      radial-gradient(30% 28% at 75% 25%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
      radial-gradient(40% 35% at 55% 95%,color-mix(in srgb,var(--sel) 30%,transparent),transparent 70%);
    animation:g-home-drift 6s ease-out backwards}
  &::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:22px 22px;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%)}
  &.is-live{border-color:#7f1d1d;
    &::before{background:radial-gradient(35% 30% at 25% 30%,rgba(220,38,38,.34),transparent 70%),
      radial-gradient(40% 35% at 55% 95%,rgba(127,29,29,.32),transparent 70%)}}}
/* The owl on its brand tile, a halo that sweeps in and eyes that light once. */
.g-home .g-home-owl{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:22px;
  background:radial-gradient(circle at 30% 25%,#3b2ff0,#1300eb 55%,#0b0870);
  box-shadow:0 0 0 1px rgba(167,159,245,.35),0 10px 40px rgba(19,0,235,.55),0 0 80px rgba(125,117,236,.35);
  animation:g-home-wake 1.1s cubic-bezier(.2,.8,.2,1) backwards;
  &::before{content:"";position:absolute;inset:-9px;z-index:-1;border-radius:30px;filter:blur(5px);pointer-events:none;
    background:conic-gradient(from 0deg,transparent 0 55%,rgba(167,159,245,.7) 80%,transparent);
    animation:g-home-halo 2.2s cubic-bezier(.2,.8,.2,1) backwards}
  & .g-glyph{position:relative;width:42px;height:54px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}}
.g-home .g-home-eyes{position:absolute;left:50%;top:37%;width:38px;height:15px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,#e8fbff,#22d3ee 55%,transparent);animation:g-home-eyes .9s ease-out .7s backwards}
.g-home .g-home-word{margin:16px 0 4px;font:700 38px/1.1 var(--display);letter-spacing:-.4px;color:#fff;
  & b{font-weight:inherit;background:linear-gradient(90deg,#a79ff5,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}}
.g-home .g-home-hello{margin:0 0 12px;font:400 16px/1.4 var(--sans);letter-spacing:0;color:#c9cde0}
.g-home .g-home-hero.is-live .g-home-hello{color:#fecaca}
.g-home .g-home-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.g-home .g-home-role{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid #2c3561;
  background:#131a33;color:#cfd3ea;font:500 12px var(--mono);
  &:hover{border-color:#7d75ec;color:#fff}}
.g-home .g-home-power{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:linear-gradient(90deg,#3a2fd0,#7d75ec);color:#fff;font:600 12px var(--sans);box-shadow:0 0 18px rgba(125,117,236,.45);
  &.is-oncall{background:linear-gradient(90deg,#dc2626,#f87171);box-shadow:0 0 18px rgba(220,38,38,.45)}}
/* The one search: a prompt, the field and Request access in one bar that lights up while it has the focus. */
.g-home .g-home-search{display:flex;align-items:center;gap:12px;width:min(720px,100%);padding:8px 8px 8px 18px;border-radius:16px;
  border:1px solid #3c4478;background:rgba(9,14,32,.85);box-shadow:0 12px 40px rgba(0,0,0,.35);
  &:focus-within{border-color:#8b83f0;box-shadow:0 0 0 3px rgba(139,131,240,.25),0 12px 40px rgba(0,0,0,.35)}}
.g-home .g-home-search-pr{color:#22d3ee;font:700 16px var(--mono)}
.g-home .g-home-search-input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--g-ink);font:15px var(--mono);
  &::placeholder{color:#6f7797}}
.g-home .g-home-search-go{padding:10px 18px;border-radius:12px;font-size:14px}
.g-home .g-home-hint{margin:10px 0 0;font-size:12.5px;color:var(--g-ink-3)}
.g-home .g-home-link{color:var(--g-gmp);
  &:hover{text-decoration:underline}}
/* The loud tiles: amber for what waits on the viewer's decision, red for on-call break glass. */
.g-home .g-home-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:22px}
.g-home .g-home-tile{display:inline-flex;align-items:center;gap:14px;padding:14px 28px;border:0;border-radius:16px;font:inherit;text-align:left;
  cursor:pointer;transition:transform .15s;
  &:hover{transform:translateY(-2px)}
  &.is-decide{color:#1c1400;background:linear-gradient(135deg,#facc15,#d97706);box-shadow:0 0 0 3px #92400e,0 14px 40px rgba(250,204,21,.35)}
  &.is-bg{color:#fff;background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 0 0 3px #7f1d1d,0 14px 40px rgba(220,38,38,.45)}}
.g-home .g-home-tile-i{font-size:26px}
.g-home .g-home-tile-words{display:flex;flex-direction:column}
.g-home .g-home-tile-t{font:800 19px var(--display);letter-spacing:.4px}
.g-home .g-home-tile-sub{margin-top:2px;font:600 12.5px var(--sans);letter-spacing:0;opacity:.9}
.g-home .g-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:start;margin-top:18px}
.g-home .g-home-card{min-width:0;padding:18px 20px;border-radius:16px;border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),var(--g-surface)}
.g-home .g-home-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 12px;font:700 15px var(--display);letter-spacing:.2px}
.g-home .g-home-more{margin-left:auto;font:400 13px var(--sans);color:var(--g-ink-2);
  &:hover{color:var(--g-ink)}}
.g-home .g-home-loading,.g-home .g-home-none{margin:0;color:var(--g-ink-2)}
.g-home .g-home-elevated .g-empty{min-height:120px}
.g-home .g-home-row3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start;margin-top:18px;
  &>:only-child{grid-column:1/-1}}
/* A Status slide: its number, a dot toned by how it stands, then what it counts and a line under it. */
.g-home .g-home-status .g-home-h{margin:0}
.g-home .g-home-slide-n{min-width:48px;font:700 28px var(--display);color:var(--g-ink);text-align:center}
.g-home .g-home-slide-sig{flex:none;width:10px;height:10px;border-radius:50%;
  &.is-bad{background:#dc2626}
  &.is-wait{background:var(--g-wait)}
  &.is-idle{background:var(--g-ink-3)}}
.g-home .g-home-slide-text{min-width:0}
.g-home .g-home-slide-t{margin:0;color:var(--g-ink-2);
  & b{color:var(--g-ink)}}
.g-home .g-home-slide-link{color:inherit;
  &:hover{text-decoration:underline}}
.g-home .g-home-slide-code{font-family:var(--mono)}
.g-home .g-home-slide-sub{margin:2px 0 0;font-size:12.5px;color:var(--g-ink-3)}
@media (max-width:1100px){
  .g-home .g-home-grid,.g-home .g-home-row3{grid-template-columns:minmax(0,1fr)}}
/* A phone narrows the hero, stacks the tiles and gives the cards back some width. */
@media (max-width:640px){
  .g-home .g-home-hero{padding:32px 16px 28px}
  .g-home .g-home-word{font-size:30px}
  .g-home .g-home-search{flex-wrap:wrap;padding:8px 8px 8px 14px}
  .g-home .g-home-search-go{flex:1 1 100%;justify-content:center}
  .g-home .g-home-tile{width:100%;padding:12px 18px}
  .g-home .g-home-card{padding:16px}}
@keyframes g-home-drift{from{transform:translate(4%,-3%) rotate(8deg)}}
@keyframes g-beat{from{transform:scale(1.35)}}
@keyframes g-home-wake{from{opacity:0;transform:translateY(10px) scale(.88)}}
@keyframes g-home-halo{from{opacity:0;transform:rotate(-200deg)}}
@keyframes g-home-eyes{from{opacity:0}}