/* GMP's own rules: the one-off classes HAM's page styled inline (the CSP here forbids that), plus
   the chrome (tabs, buttons, cards) this app adds around HAM's catalog stylesheet in app.css. Kept
   in its own file so app.css stays a verbatim copy of HAM's baseCSS, comparable byte for byte
   against the HAM commit it was copied from. */
.pad{padding:8px}
.vs{margin:0}
.chips{display:contents}
/* The sign-in hand-off, shown before and between Okta redirects: the owl, a link, Okta's mark. */
.boot{box-sizing:border-box;min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.boot-card{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;width:100%;max-width:440px;padding:36px 28px 30px;
  border:1px solid #1f2748;border-radius:22px;background:#040a1c;color:#f3f3f9;text-align:center;animation:g-rise .3s ease-out backwards;
  &::before{content:"";position:absolute;inset:-40%;z-index:-1;filter:blur(20px);pointer-events:none;
    background:radial-gradient(32% 28% at 32% 28%,color-mix(in srgb,var(--brand) 40%,transparent),transparent 70%),
      radial-gradient(30% 26% at 70% 30%,rgba(34,211,238,.18),transparent 70%)}
  &::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%)}
  & .notice{margin:0 0 4px;max-width:none;border:0;background:none;padding:0;color:#a6abbb;
    & b{display:block;margin-bottom:6px;font:700 20px/1.25 var(--display);color:#fff}}
  & h1{margin:0 0 8px;font:700 22px/1.25 var(--display);color:#fff}
  & .btn{margin-top:20px}}
.boot-marks{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.boot-mark{display:block;width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px rgba(167,159,245,.35),0 10px 30px rgba(19,0,235,.5)}
.boot-okta{display:grid;place-items:center;width:56px;height:56px;border-radius:13px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);
  & img{display:block;width:30px;height:30px}}
.boot-link{width:48px;height:2px;background:repeating-linear-gradient(90deg,#a79ff5 0 4px,transparent 4px 9px);transform-origin:left;
  animation:g-grow-x .25s ease-out .05s backwards}
.boot-card .boot-title{margin:0 0 8px;font:700 24px/1.2 var(--display);letter-spacing:-.2px;color:#fff}
.boot-sub{margin:0;font:400 14.5px/1.5 var(--sans);color:#a6abbb;text-wrap:balance}
.notice{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px 14px;margin:12px 0;max-width:var(--measure)}
.notice.err{border-color:var(--s4)}
a.role{display:block;color:inherit;text-decoration:none}
.role.mine{outline:2px solid var(--brand);outline-offset:-2px}
.pill.you{background:var(--brand);color:#fff;margin-left:6px}
/* The viewer's own access in the matrix is outlined, never recolored, so severity still reads.
   The three request marks differ in both line style and color from each other and from the
   severity palette (--s0…--s4, which already colors the pills themselves), so a viewer can tell
   "held" from "held via a grant" from each request tier at a glance. .sw.mine-* mirrors each .lvl
   rule for the legend's own small swatches. */
.lvl.mine-standing,.sw.mine-standing{box-shadow:0 0 0 2px var(--brand)}
.lvl.mine-temporary,.sw.mine-temporary{box-shadow:0 0 0 2px var(--s2)}
.lvl.mine-orphan,.lvl.mine-unexplained{box-shadow:0 0 0 2px var(--s4)}
.lvl.mine-request-auto,.sw.mine-request-auto{outline:2px dashed var(--brand);outline-offset:1px}
.lvl.mine-request-manager,.sw.mine-request-manager{outline:2px dotted var(--fg);outline-offset:1px}
.lvl.mine-request-security,.sw.mine-request-security{outline:3px double #d946ef;outline-offset:1px}
.btn{font:inherit;font-size:13px;line-height:1.2;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:8px;padding:6px 12px;cursor:pointer}
.btn.primary{background:var(--sel);border-color:var(--sel);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
ul.plain{list-style:none;padding:0;margin:6px 0}
/* The top-bar tabs reuse .densebtn -- the topbar's own dark palette, invariant across themes --
   rather than .tool's theme-variable colors, which are tuned for the light aside/main area, not
   the always-dark topbar. The "on" look is the same one .densebtn already uses for its pressed
   toggle (the theme button); the Shell sets aria-current="page" only on the active tab and
   leaves it off the rest, matching how a single-page nav is meant to use it. */
.densebtn[aria-current=page]{background:rgba(255,255,255,.12);color:#f3f3f9;border-color:#5b6284}
/* "+ Request access" is the one primary action in the bar. A fixed accent, not a theme variable,
   matches every other topbar-specific style here, since the topbar's own ground never changes. */
.densebtn.primary{background:#7d75ec;border-color:#7d75ec;color:#fff}
.densebtn.primary:hover{background:#8f88f0;border-color:#8f88f0;color:#fff}
/* The wordmark beside the owl: GitGuardian, then GMP in the brand's gradient, spelled out ("Give Me Power") in its
   title. On Request access the primary link is the current page, so it carries the ring a current tab would. */
.topbar .wordmark{font:700 15px var(--display);letter-spacing:-.01em;white-space:nowrap;margin-right:10px}
.topbar .wordmark abbr{text-decoration:none;cursor:help;background:linear-gradient(90deg,#a79ff5,#22d3ee);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.densebtn.primary[aria-current=page]{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
/* .meta is a <span> (inline by default), but <details> is block-level, so without this the
   request-access link and the account menu stack instead of sharing the bar's one row. */
.topbar .meta{display:flex;align-items:center;gap:10px}
/* The section tabs sit in a nav of their own, 14px after the wordmark, so a narrow bar can move them as one row. */
.topbar .tabs{display:flex;align-items:center;gap:6px;min-width:0;margin-left:4px}
.topbar .tabs .densebtn{margin-left:0;white-space:nowrap}
.topbar .meta .densebtn{white-space:nowrap}
.acct summary{white-space:nowrap}
/* Tablet widths keep the one row: tighter gaps, and the viewer's email cut short with an ellipsis. */
@media (max-width:1000px){
  .topbar{gap:8px;padding:0 16px}
  .topbar .wordmark{margin-right:0}
  .topbar .tabs{gap:4px;margin-left:0}
  .acct summary{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
}
/* Phone widths: the brand, Request and the account on the first row, the tabs on a row of their own that scrolls
   sideways by itself, all inside a 16px gutter, so the page never scrolls sideways. The Catalog sidebar stacks above
   the page instead of beside it. */
@media (max-width:640px){
  .topbar{flex-wrap:wrap;height:auto;row-gap:8px;padding:8px 16px 0}
  .topbar .tabs{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 8px}
  .topbar .tabs::-webkit-scrollbar{display:none}
  .topbar .wordmark{font-size:14px}
  .topbar .meta{gap:8px}
  .topbar .meta .long{display:none}
  .acct summary{max-width:9ch}
  .app{flex-direction:column;align-items:stretch}
  aside{position:static;width:auto;height:auto;max-height:45vh;border-right:0;border-bottom:1px solid var(--line)}
  main{padding:18px 16px 60px}
}
/* The sidebar exists only on Catalog routes. */
.app>aside[hidden]{display:none}
/* A long target (e.g. secret|dev|gim|*) wraps in a search hit instead of forcing a horizontal
   scrollbar on the sidebar; the sidebar's own scrollbar is thin and theme-colored rather than the
   heavy system default. */
aside{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--faint) var(--panel)}
.hit .w{overflow-wrap:anywhere}
/* The account menu is a native <details>/<summary> disclosure -- no inline script needed to open
   it, so nothing here trips the CSP. The panel is positioned off the summary itself, not the
   topbar, so it does not care where in .meta it sits. */
.acct{position:relative}
.acct summary{cursor:pointer;list-style:none;color:#a6abbb;font-size:11.5px;font-variant-numeric:tabular-nums}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover,.acct[open] summary{color:#f3f3f9}
.acct .menu{position:absolute;right:0;top:100%;margin-top:6px;display:flex;flex-direction:column;
  gap:6px;background:#0b1224;border:1px solid #2f3557;border-radius:10px;padding:8px;min-width:130px;z-index:30}
/* A level the viewer may request links to the Request page; the link must not restyle the
   pill, whose color is its privilege band. */
a.reqlink{color:inherit;text-decoration:none}
a.reqlink:hover .lvl{filter:brightness(1.15)}
/* My access's list view flows at its own full height; the page scrolls, not a 72vh box per section. The catalog's
   own matrices (unit.js) are untouched: .scroll keeps HAM's max-height there. */
.view.access .scroll{max-height:none}
/* A service table's columns carry a class, not a position: the columns before "why" and "action"
   can shift by one (no action column at all in read-only mode). target and level keep to their own content's width;
   why absorbs whatever room is left; action shrinks to its own content and never wraps. */
table.svctable{width:100%}
table.svctable .c-target,table.svctable .c-level,table.svctable .c-state{white-space:nowrap}
table.svctable .c-why{width:100%}
table.svctable .c-act{width:1%;text-align:right;white-space:nowrap}
/* The Approvals tab: hidden when nothing waits for the viewer, a count badge otherwise. A tab's
   own display must never beat the hidden attribute. */
.topbar [hidden]{display:none}
.badge{display:inline-block;min-width:16px;margin-left:6px;padding:0 5px;border-radius:999px;background:#7d75ec;color:#fff;font-size:10.5px;font-weight:700;text-align:center}