/* The components, one layer each, in the order tokens.css declares. Blocks are g-*, states is-*; colors come from the
   token classes (svc-*, sev-*, tone-*), and every animation starts from a `from` keyframe. */

@keyframes g-arc{from{stroke-dasharray:0 100}}
@keyframes g-draw{from{stroke-dashoffset:100}}
@keyframes g-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes g-fade{from{opacity:0}}
@keyframes g-dot-ring{from{opacity:.7;transform:none}}
@keyframes g-blink{from{opacity:0}}
@keyframes g-pop{from{transform:scale(.94)}}
@keyframes g-pop-in{from{opacity:0;transform:scale(.6)}}
@keyframes g-slide-in{from{opacity:0;transform:translateX(8px)}}
@keyframes g-open{from{opacity:0;transform:translateY(4px)}}
@keyframes g-grow-x{from{transform:scaleX(0)}}
@keyframes g-glow{from{opacity:.9}}

@layer btn{
  /* A component anchor's fallback color, in the first layer; :where keeps it from outweighing any class. */
  :where(a[class^="g-"],a[class*=" g-"]){color:inherit}
  .g-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--g-edge);
    background:transparent;color:var(--g-ink);font:500 13px var(--sans);cursor:pointer;white-space:nowrap;
    &:hover{border-color:var(--brand)}
    &:disabled{opacity:.5;cursor:not-allowed}
    &.is-primary{background:var(--brand);border-color:var(--brand);color:#fff}
    &.is-approve{background:#15803d;border-color:#15803d;color:#fff;
      &:hover{background:#166534;border-color:#166534}}
    &.is-danger{border-color:color-mix(in srgb,var(--g-bad) 60%,transparent);color:var(--g-bad);
      &:hover{background:color-mix(in srgb,var(--g-bad) 12%,transparent)}}
    &.is-ghost{border-color:transparent;color:var(--g-ink-2);
      &:hover{border-color:var(--g-edge-2);color:var(--g-ink)}}
  }
}

@layer avatar{
  .g-avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;flex:none;
    font:700 13px var(--display);color:#fff;background:linear-gradient(135deg,#2a1fd6,#22d3ee)}
}

@layer logo{
  .g-logo{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--g-tile);
    box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.35);
    & img{width:70%;height:70%;object-fit:contain}
    &.is-brand{background:var(--g-tile)}
    &.is-glyph{background:#0f172a;border:1px solid #2b3556;
      & .g-glyph{width:62%;height:62%}}
    &.is-gmp{background:#171235;border:1px solid #3b3470;
      & img{width:66%;height:66%}}
    &.is-glass{background:#2a0b0b;border:1px solid #7f1d1d;line-height:1;
      &.is-s24{font-size:13px} &.is-s32{font-size:18px} &.is-s44{font-size:24px} &.is-s56{font-size:31px}}
    &.is-mono{background:var(--g-surface-3);border:1px solid var(--g-edge-2);color:var(--g-ink-2);font:700 13px var(--mono)}
    &.is-s24{width:24px;height:24px;border-radius:6px;font-size:11px}
    &.is-s32{width:32px;height:32px;border-radius:8px}
    &.is-s44{width:44px;height:44px;border-radius:11px;font-size:16px}
    &.is-s56{width:56px;height:56px;border-radius:14px;font-size:20px}
  }
}

@layer glyph{
  .g-glyph{display:inline-block;width:1em;height:1em;fill:none;stroke:none;
    &.is-owl{width:auto;height:1.25em;fill:currentColor}
    &.is-ssh{stroke:#34d399;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    &.is-check{width:74px;height:74px;stroke:var(--g-ok);stroke-linecap:round;stroke-linejoin:round;
      & circle{stroke-width:4;stroke-dasharray:100;animation:g-draw .7s ease-out backwards}
      & path{stroke-width:5;stroke-dasharray:100;animation:g-draw .4s .55s ease-out backwards}}
    &.is-clear{width:62px;height:62px;overflow:visible;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
      & circle{stroke:#223556;stroke-dasharray:2 7.4}
      & circle+circle{stroke:#34d399;stroke-dasharray:100 100;opacity:.9;transform:rotate(-90deg);transform-origin:50% 50%;
        animation:g-arc 1.6s cubic-bezier(.2,.8,.2,1) backwards}
      & path{stroke:#e8fff6}}
    &.is-dot{fill:currentColor}
  }
}

@layer countdown{
  .g-cd{position:relative;display:inline-grid;place-items:center;width:78px;height:78px;flex:none;
    & .g-cd-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
    & .g-cd-track{fill:none;stroke:var(--g-surface-3);stroke-width:6}
    & .g-cd-arc{fill:none;stroke:var(--svc);stroke-width:6;stroke-linecap:round;animation:g-arc 1.2s cubic-bezier(.2,.8,.2,1) backwards}
    & .g-cd-slot{position:relative;display:grid;place-items:center}
  }
}

@layer stack{
  .g-stack{display:block;width:100%;height:6px;border-radius:999px;overflow:hidden;background:var(--g-surface-3);
    & .g-stack-part{fill:var(--sev,var(--g-other));
      &.is-held{fill:var(--svc,var(--g-ok))}
      &.is-request{fill:var(--svc,var(--g-ok));fill-opacity:.3}
      &.is-syncing{fill:var(--g-wait)}
      &.is-standing{fill:var(--s0)}
      &.is-closing{fill:var(--g-bad)}
      &.is-spent{fill:transparent}}
  }
}

@layer card{
  .g-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:14px;
    border:1px solid var(--g-edge);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--g-surface);
    transition:border-color .15s,transform .15s ease-out;
    /* A hover lifts the card 2px; its shadow is drawn once, on ::after, and only its opacity changes. */
    &::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--g-shadow);opacity:0;transition:opacity .15s;
      pointer-events:none}
    &:hover,&:has(:focus-visible){border-color:var(--g-edge-2);transform:translateY(-2px)}
    &:hover::after,&:has(:focus-visible)::after{opacity:1}
    &.is-glow{border-color:color-mix(in srgb,var(--g-aws) 45%,var(--g-edge));
      background:linear-gradient(180deg,color-mix(in srgb,var(--g-aws) 9%,transparent),transparent 70%),var(--g-surface)}
    & .g-card-head{display:flex;align-items:center;gap:10px;min-width:0}
    & .g-card-title{flex:1;min-width:0;margin:0;font:600 14px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    & .g-card-name{flex:1;min-width:0}
    & .g-card-meta{font-size:12px;color:var(--g-ink-3);white-space:nowrap}
    & .g-card-body{display:flex;flex-direction:column;gap:7px}
    & .g-card-actions{display:flex;gap:8px;opacity:0;transition:opacity .15s}
    &:hover .g-card-actions,&:focus-within .g-card-actions{opacity:1}
    @media (hover: none){& .g-card-actions{opacity:1}}
    @media (max-width:640px){& .g-card-head{flex-wrap:wrap}}
  }
}

@layer chip{
  .g-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px;border-radius:999px;border:1px solid transparent;
    background:transparent;color:var(--g-ink-2);font:500 12px var(--mono);white-space:nowrap;
    &.is-held{color:var(--sev,var(--g-ink));background:var(--sev-bg,var(--g-surface-3));
      border-color:color-mix(in srgb,var(--sev,var(--g-ink)) 35%,transparent)}
    &.is-temp{color:#1a1203;background:var(--g-aws);box-shadow:0 0 14px var(--g-temp-glow);font-weight:700}
    &.is-ask{border-color:var(--g-edge-2);cursor:pointer;
      &:hover{color:var(--g-ink);border-color:var(--sev,var(--brand));background:color-mix(in srgb,var(--sev-bg,var(--g-surface-3)) 60%,transparent)}}
    &.is-pend{color:var(--g-wait);border:1px dashed var(--g-wait);background:color-mix(in srgb,var(--g-wait) 6%,transparent)}
    &.is-sync{color:color-mix(in srgb,var(--g-wait) 70%,var(--g-ink-3));border:1px dashed color-mix(in srgb,var(--g-wait) 35%,transparent)}
    &.is-flag{color:var(--g-bad);border-color:color-mix(in srgb,var(--g-bad) 45%,transparent);background:color-mix(in srgb,var(--g-bad) 8%,transparent)}
    &.is-picked,&.is-picked:hover{color:#fff;background:linear-gradient(90deg,var(--sel),var(--brand));border-color:transparent;
      box-shadow:0 0 14px color-mix(in srgb,var(--brand) 45%,transparent)}
    &.is-picked{animation:g-pop .14s ease-out}
    &.is-picked::before{content:"✓";margin-right:1px}
    &.is-faded{opacity:.45}
    &:disabled{cursor:not-allowed;opacity:.6}
    & .g-chip-glyph{font-family:var(--sans)}
    & .g-chip-note{min-width:0;font-family:var(--sans);font-weight:500;white-space:normal;overflow-wrap:anywhere}
  }
}

@layer pill{
  .g-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--g-edge);
    background:transparent;color:var(--g-ink-2);font:12px var(--sans);white-space:nowrap;
    & b{color:var(--g-ink);font-weight:600}
    &.tone-ok,&.tone-wait,&.tone-bad,&.tone-done{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 40%,transparent)}
    &.is-state{padding:2px 10px;font:600 11.5px var(--mono);
      &.tone-ok{color:var(--g-ok-ink);background:var(--g-ok);border-color:transparent}
      &.tone-wait{color:var(--g-wait-ink);background:var(--g-wait);border-color:transparent}
      &.tone-bad{color:#fff;background:var(--g-bad-fill);border-color:transparent}
      &.tone-done{color:var(--g-ink-2);border-color:var(--g-edge-2)}}
    /* A live or amber dot pulses three times through a ring painted over it, which grows and fades out, then rests;
       the ring moves by transform and opacity alone, so the pulse never repaints the page. */
    & .g-pill-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--g-ink-3);
      &.is-live{background:var(--g-ok);--g-pulse:rgba(74,222,128,.55)}
      &.is-amber{background:var(--g-wait);--g-pulse:rgba(250,204,21,.55)}
      &.is-live::after,&.is-amber::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g-pulse);opacity:0;pointer-events:none;
        transform:scale(2.6);animation:g-dot-ring 2.2s ease-out 3}
      &.is-idle{background:var(--g-ink-3)}}
    & .g-pill-glyph{font-family:var(--sans)}
  }
  a.g-pill,button.g-pill{cursor:pointer;
    &:hover{border-color:var(--brand);color:var(--g-ink)}}
}

@layer segmented{
  .g-seg{display:inline-flex;border:1px solid var(--g-edge);border-radius:10px;overflow:hidden;
    & .g-seg-option{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:0;border-right:1px solid var(--g-edge);
      background:transparent;color:var(--g-ink-2);font:500 12.5px var(--sans);white-space:nowrap;cursor:pointer;
      &:last-child{border-right:0}
      &.is-on{background:var(--g-surface-3);color:var(--g-ink)}}
    & .g-seg-count{font:11px var(--mono);color:var(--g-ink-3)}
    @media (max-width:640px){display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;
      & .g-seg-option{flex:none}}
  }
}

@layer tabs{
  .g-tabs{display:flex;gap:4px;margin:6px 0 12px;border-bottom:1px solid var(--g-edge);
    & .g-tab{position:relative;margin-bottom:-1px;padding:9px 14px;border:0;border-bottom:2px solid transparent;background:transparent;
      color:var(--g-ink-2);font:600 14px var(--display);cursor:pointer;
      &.is-on{color:var(--g-ink);
        &::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand);transform-origin:center;
          animation:g-grow-x .2s ease-out}}}
    & .g-tabs-badge{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--g-wait);color:var(--g-wait-ink);font:700 11px var(--sans)}
  }
}

@layer fzf{
  .g-fzf{flex:1;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--g-term-edge);
    background:var(--g-term-bg);color:var(--g-term-fg);font:13.5px var(--mono);
    &:focus-within{border-color:var(--g-term-head);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-term-head) 12%,transparent)}
    & .g-fzf-prompt{color:var(--g-term-head);font-weight:700}
    & .g-fzf-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}
    & .g-fzf-count{color:var(--g-term-wait);font-size:12px}
    & .g-fzf-key{padding:1px 6px;border-radius:5px;border:1px solid var(--g-edge-2);color:var(--g-term-mute);font:11px var(--mono)}
  }
}

@layer terminal{
  .g-term{overflow:hidden;border-radius:14px;border:1px solid var(--g-term-edge);background:var(--g-term-bg);color:var(--g-term-fg);
    font:12.5px/1.6 var(--mono);
    & .g-term-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--g-term-bar);color:var(--g-term-mute);
      font:12px var(--sans)}
    & .g-term-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    & .g-term-lights{display:inline-flex;gap:7px;
      & i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--g-term-light)}}
    & .g-term-body{margin:0;padding:12px 16px 16px;overflow-x:auto;white-space:pre;background:transparent;color:inherit;font:inherit;
      scrollbar-width:thin;scrollbar-color:var(--g-term-light) transparent}
    & .g-term-line.is-typed{animation:g-fade .2s ease-out backwards}
    & .g-term-cursor{display:inline-block;width:.6em;height:1.1em;vertical-align:-2px;background:var(--g-term-head);
      animation:g-blink 1s steps(2,jump-none) 3;
      &.is-typed{animation:g-fade .2s ease-out backwards,g-blink 1s steps(2,jump-none) 3 backwards}}
    & .tone-head{color:var(--g-term-head);font-weight:700}
    & .tone-dim{color:var(--g-term-dim)}
    & .tone-ok{color:var(--g-term-ok)}
    & .tone-wait{color:var(--g-term-wait)}
    & .tone-bad{color:var(--g-term-bad)}
    & .tone-mute{color:var(--g-term-mute)}
    & .tone-prompt{color:var(--g-term-head)}
  }
}

@layer empty{
  .g-empty{display:flex;align-items:center;gap:22px;min-height:160px;
    & .g-empty-mark{display:grid;place-items:center;flex:none;width:92px;height:92px;border-radius:26px;color:#fff;font-size:58px;
      background:radial-gradient(circle at 30% 30%,#2a2170,#0e0b2b);box-shadow:0 0 50px var(--g-glow);animation:g-rise .6s ease-out backwards;
      &.is-clear{border:1px solid #1d3350;background:radial-gradient(circle at 30% 30%,#10233a,#0a1224);box-shadow:0 0 44px rgba(52,211,153,.16)}}
    & .g-empty-text{min-width:0}
    & .g-empty-title{margin:0 0 6px;font:700 22px var(--display)}
    & .g-empty-body{margin:0;color:var(--g-ink-2)}
    & .g-empty-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  }
}

@layer timeline{
  .g-tl{position:relative;margin:0;padding:0 0 0 6px;list-style:none;
    &::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--g-edge-2),transparent)}
    & .g-tl-item{position:relative;display:flex;flex-direction:column;padding:2px 0 14px 30px;font-size:13px}
    & .g-tl-dot{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--bg);
      border:2px solid var(--tone,var(--g-edge-2));box-shadow:0 0 12px color-mix(in srgb,var(--tone,transparent) 60%,transparent)}
    & .g-tl-text{color:var(--g-ink)}
    & .g-tl-time{color:var(--g-ink-3);font:11.5px var(--mono)}
  }
}

/* The status line is a toast at the bottom center of the viewport, at most 560px wide, so a message never shifts the
   page; empty, it keeps its live region but shows nothing. */
@layer status{
  .g-status{position:fixed;z-index:40;bottom:24px;left:max(16px,calc(50% - 280px));right:max(16px,calc(50% - 280px));
    width:fit-content;margin:0 auto;padding:10px 16px;border-radius:12px;border:1px solid var(--g-edge-2);background:var(--g-surface-2);
    color:var(--g-ink);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);
    &:not(:empty){animation:g-fade .2s ease-out}
    &:empty{padding:0;border:0;box-shadow:none}}
}

@layer confirm{
  .g-confirm{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
    &.is-asking{display:flex;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--g-edge-2);
      background:var(--g-surface);animation:g-open .18s ease-out backwards;
      & .g-btn.is-danger{background:var(--g-bad-fill);border-color:var(--g-bad-fill);color:#fff}}
    &.is-working{color:var(--g-ink-2);font-size:13px}
    &.is-done{color:var(--g-ok);font-size:13px;font-weight:600}
    & .g-confirm-detail{flex:1 0 100%;font-size:13px;color:var(--g-ink)}
    & .g-confirm-problem{color:var(--g-bad);font-size:12.5px}
  }
}

@layer duration{
  .g-dur{display:grid;grid-template-columns:minmax(0,1fr) 78px auto auto;gap:8px;align-items:center;margin-top:8px;
    & .g-dur-range{width:100%;accent-color:var(--brand)}
    & .g-dur-text{box-sizing:border-box;width:78px;padding:4px 7px;border-radius:8px;border:1px solid var(--g-edge);
      background:var(--g-term-bg);color:var(--g-term-fg);font:600 12.5px var(--mono);outline:0;
      &:focus{border-color:var(--g-term-head)}
      &.is-invalid{border-color:var(--g-bad)}}
    & .g-dur-range:disabled,& .g-dur-text:disabled{opacity:.5;cursor:not-allowed}
    & .g-btn{padding:2px 7px;border-radius:7px;font:500 11px var(--mono);
      &[aria-pressed="true"]{background:var(--g-surface-3);color:var(--g-ink);border-color:var(--g-edge-2)}}
  }
}

@layer cartline{
  .g-cartline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;border-radius:12px;
    border:1px solid var(--g-edge);background:var(--g-surface-2);animation:g-slide-in .2s ease-out backwards;
    & .g-cartline-main{min-width:0}
    & .g-cartline-what{font:600 13px var(--mono);color:var(--g-ink);overflow-wrap:anywhere}
    & .g-cartline-path{font-size:11.5px;color:var(--g-ink-2)}
    & .g-cartline-cost{margin:6px 0 0;font-size:11.5px;color:var(--g-wait);
      &.is-escalated{color:var(--g-bad)}}
    & .g-cartline-x{border:0;background:transparent;color:var(--g-ink-3);font-size:16px;line-height:1;cursor:pointer;
      &:hover{color:var(--g-ink)}
      &:disabled{opacity:.4;cursor:not-allowed}}
  }
}

@layer decision{
  .g-decision{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
    & .g-decision-lines{margin:6px 0 10px;padding-left:18px;font:12.5px var(--mono);
      & .is-flag{color:var(--g-bad)}}
    & .g-decision-warn{margin:0 0 8px;color:var(--g-bad);font-size:12.5px}
    & .g-decision-note{margin:8px 0 0;color:var(--g-wait);font-size:12.5px}
    &>.g-confirm-problem{flex:1 0 100%;margin:0;color:var(--g-bad);font-size:12.5px}
    & .g-decision-reason{display:block;box-sizing:border-box;width:100%;min-height:56px;margin:0 0 8px;padding:8px 10px;
      border-radius:10px;border:1px solid var(--g-edge);background:var(--g-surface-2);color:var(--g-ink);font:13px var(--sans);
      resize:vertical}
  }
  /* A queue card: a stripe on its left edge for how close its approvals are to closing (grey, amber soon, orange to
     red when urgent), then who asked and why, the items and the decisions. */
  .g-dcard{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:18px 20px 16px 24px;border-radius:18px;
    border:1px solid var(--g-edge);background:var(--g-surface);transition:transform .15s ease-out;
    /* overflow:hidden (which rounds the stripe) would clip an outer shadow, so a hover brightens the card's edge from
       inside instead, on ::after, fading its opacity alone. */
    &::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--g-edge-2);opacity:0;
      transition:opacity .15s;pointer-events:none}
    &:hover,&:has(:focus-visible){transform:translateY(-2px)}
    &:hover::after,&:has(:focus-visible)::after{opacity:1}
    &::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g-edge-2)}
    &.is-soon::before{background:var(--g-wait)}
    &.is-urgent::before{background:linear-gradient(#fb923c,var(--g-bad))}
    &.is-urgent .g-dcard-left{border-color:color-mix(in srgb,#fb923c 50%,transparent);background:color-mix(in srgb,#fb923c 14%,transparent);
      color:#fb923c}
    &.is-soon .g-dcard-left{border-color:color-mix(in srgb,var(--g-wait) 45%,transparent);background:color-mix(in srgb,var(--g-wait) 10%,transparent);
      color:var(--g-wait)}
    &.is-decided::before{background:var(--g-ok)}
    & p{margin:0}
    & .g-dcard-head{display:flex;align-items:center;gap:12px}
    & .g-dcard-who{min-width:0}
    & .g-dcard-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 14px var(--sans)}
    & .g-dcard-email{overflow-wrap:break-word}
    & .g-dcard-own{padding:1px 8px;border-radius:999px;border:1px solid var(--g-edge-2);color:var(--g-ink-2);font:500 11.5px var(--sans)}
    & .g-dcard-meta{font-size:12px;color:var(--g-ink-3)}
    & .g-dcard-via{padding:1px 6px;border-radius:6px;border:1px solid var(--g-edge);font:11px var(--mono);color:var(--g-ink-3)}
    & .g-dcard-id{font-family:var(--mono)}
    & .g-dcard-due{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto;white-space:nowrap}
    & .g-dcard-left{padding:4px 12px;border-radius:999px;border:1px solid var(--g-edge-2);background:var(--g-surface-3);color:var(--g-ink);
      font:700 14px var(--display)}
    & .g-dcard-at{font-size:11.5px;color:var(--g-ink-3)}
    & .g-dcard-quote{margin:0;padding:6px 12px;border-left:3px solid var(--g-edge-2);border-radius:0 10px 10px 0;background:var(--g-surface-2);
      font-size:13.5px;color:var(--g-ink);overflow-wrap:anywhere}
    & .g-dcard-items{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
    & .g-dcard-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 11px;border-radius:11px;
      border:1px solid var(--g-edge);background:var(--g-surface-2)}
    & .g-dcard-main{min-width:0}
    & .g-dcard-what{font:600 13px var(--mono);overflow-wrap:anywhere}
    & .g-dcard-route{font-size:11.5px;color:var(--g-ink-2)}
    & .g-dcard-over{margin-top:2px;font-size:11.5px;color:var(--g-bad)}
    & .g-dcard-ttl{font:600 12px var(--mono);white-space:nowrap;
      &.is-flag{color:var(--g-bad)}}
    & .g-dcard-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
      & .g-decision{flex:1}}
    & .g-dcard-done{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;animation:g-rise .2s ease-out backwards;
      border:1px solid color-mix(in srgb,var(--g-ok) 40%,var(--g-edge));
      background:linear-gradient(90deg,color-mix(in srgb,var(--g-ok) 10%,transparent),transparent 60%),var(--g-surface-2)}
    & .g-dcard-outcome{flex:1;min-width:0;font-size:13px;color:var(--g-ink)}
    @media (max-width:640px){padding:16px 16px 14px 20px;
      & .g-dcard-item{grid-template-columns:auto minmax(0,1fr)}
      & .g-dcard-ttl{grid-column:2;white-space:normal}}
  }
}

@layer ticketrow{
  .g-trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-auto-flow:column;gap:14px;align-items:center;padding:11px 14px;border-radius:14px;
    border:1px solid var(--g-edge);background:var(--g-surface);color:var(--g-ink);transition:border-color .12s,transform .12s;
    animation:g-fade .2s ease-out backwards;
    &:hover{border-color:var(--g-edge-2);transform:translateX(2px)}
    & .g-trow-logos{display:flex;
      & .g-logo{margin-right:-8px;box-shadow:0 0 0 2px var(--g-surface),0 0 0 3px var(--g-edge)}
      & .g-logo:last-child{margin-right:0}}
    & .g-trow-main{display:flex;flex-direction:column;min-width:0}
    & .g-trow-what{overflow:hidden;font:600 13.5px var(--mono);text-overflow:ellipsis;white-space:nowrap}
    & .g-trow-why{overflow:hidden;font-size:12px;color:var(--g-ink-2);text-overflow:ellipsis;white-space:nowrap;
      &.is-flag{color:var(--g-bad)}}
    & .g-trow-when{font-size:12px;color:var(--g-ink-3);white-space:nowrap}
    & .g-trow-who{overflow:hidden;font-size:12px;color:var(--g-ink);text-overflow:ellipsis;white-space:nowrap}
    & .g-trow-left{font:12px var(--mono);color:var(--g-wait);white-space:nowrap}
    & .g-trow-mine{padding:3px 10px;border-radius:8px;border:1px solid var(--g-edge-2);font:700 12px var(--mono);white-space:nowrap;
      &.is-approved{color:var(--g-ok);border-color:color-mix(in srgb,var(--g-ok) 40%,transparent);background:color-mix(in srgb,var(--g-ok) 10%,transparent)}
      &.is-denied,&.is-vetoed{color:var(--g-bad);border-color:color-mix(in srgb,var(--g-bad) 40%,transparent);
        background:color-mix(in srgb,var(--g-bad) 8%,transparent)}
      &.is-withdrew{color:var(--g-ink-2)}}
    @media (max-width:640px){display:flex;flex-wrap:wrap;gap:6px 12px;
      & .g-trow-main{flex:1 1 170px}}
  }
}

/* A modal: a backdrop over the whole viewport, which takes the clicks meant for the page behind, and the dialog in its
   center, within a 16px gutter, scrolling inside itself when it is taller than the viewport. */
@layer dialog{
  .g-dialog-back{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,3,10,.72);
    animation:g-fade .16s ease-out}
  .g-dialog{box-sizing:border-box;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 24px;border-radius:16px;
    border:1px solid var(--g-edge-2);background:var(--g-surface);color:var(--g-ink);box-shadow:var(--g-shadow);
    animation:g-open .18s ease-out;
    & .g-dialog-title{margin:0 0 12px;font:700 20px var(--display)}
    @media (max-width:640px){padding:18px 16px}
  }
}

/* The on-call break-glass confirmation, a red-edged dialog: the amber warning, what it grants until when with its
   lifetime in a pill, the green auto line, the clauses, the reason and the typed gate, which turns green once it
   matches, and the red button. */
@layer breakglass{
  .g-dialog.g-bg{border:2px solid var(--g-bad-fill);box-shadow:0 20px 60px rgba(220,38,38,.3);
    & .g-dialog-title{color:color-mix(in srgb,var(--g-bad) 70%,var(--g-ink))}
    & p{margin:0}
    & .g-bg-ext{margin:-4px 0 12px;font-size:13px;color:color-mix(in srgb,var(--g-bad) 55%,var(--g-ink))}
    & .g-bg-warn{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;
      border:1px solid color-mix(in srgb,var(--g-wait) 55%,transparent);background:color-mix(in srgb,var(--g-wait) 9%,var(--g-surface));
      color:color-mix(in srgb,var(--g-wait) 75%,var(--g-ink));
      & b{color:var(--g-wait)}}
    & .g-bg-instead{color:var(--accent);text-decoration:underline}
    & .g-bg-when{line-height:1.6;color:var(--g-ink-2);
      & b{color:var(--g-ink)}}
    & .g-bg-dur{display:inline-block;padding:0 8px;border-radius:999px;border:1px solid var(--g-edge-2);font:600 12px var(--mono)}
    & .g-bg-auto{display:block;margin-top:4px;color:var(--g-ok);font-weight:600;font-size:13px}
    & .g-bg-lines{margin:10px 0 14px;padding-left:18px;color:var(--g-ink-2);font-size:13px;line-height:1.7}
    & .g-bg-label{display:block;margin:4px 0 5px;color:var(--g-ink-3);font-size:12px;
      & b{color:var(--g-ink)}}
    & .g-bg-reason,& .g-bg-gate{box-sizing:border-box;display:block;width:100%;margin-bottom:12px;padding:9px;border-radius:8px;
      border:1px solid var(--g-edge-2);background:var(--g-surface-2);color:var(--g-ink);font:13px var(--sans)}
    & .g-bg-reason{resize:vertical}
    & .g-bg-gate{font-family:var(--mono);
      &.is-ok{border-color:var(--g-ok);color:var(--g-ok)}}
    & .g-bg-problem{margin:-6px 0 12px;color:var(--g-bad);font-size:12.5px}
    & .g-bg-error{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:13px;color:var(--g-ink);
      border:1px solid color-mix(in srgb,var(--g-bad) 55%,transparent);background:color-mix(in srgb,var(--g-bad) 10%,var(--g-surface));
      & ul{margin:6px 0 0;padding-left:18px;color:var(--g-ink-2)}}
    & .g-bg-acts{display:flex;flex-wrap:wrap;gap:10px}
    & .g-bg-go{padding:10px 16px;border-radius:10px;border-color:var(--g-bad-fill);background:var(--g-bad-fill);color:#fff;font-weight:800;
      &:hover{border-color:#991b1b;background:#991b1b}
      &:disabled{opacity:.4}}
    & .g-bg-acts .g-btn:not(.g-bg-go){padding:10px 14px;border-radius:10px}
  }
}

/* A live on-call break glass on every page: the countdown chip in the always-dark top bar, and the dark red band under
   it, the same in both themes, as the top bar is. A phone leaves the countdown to the band, right under the bar. */
@layer oncall{
  .g-oncall-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#dc2626;color:#fff;
    font:700 12.5px var(--sans);white-space:nowrap;box-shadow:0 0 0 2px #7f1d1d,0 0 14px rgba(220,38,38,.55);
    @media (max-width:640px){display:none}}
  .g-oncall-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 22px;border-bottom:2px solid #dc2626;
    background:#450a0a;color:#fecaca;font-size:13.5px;
    & .g-oncall-text{flex:1 1 320px;min-width:0;margin:0;
      & b{color:#fff}}
    & .g-oncall-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
    & .g-btn{border-color:#7f1d1d;color:#fecaca;
      &:hover{border-color:#fca5a5;color:#fff}}
    & .g-btn.is-danger{border-color:#dc2626;background:#dc2626;color:#fff}
    & .g-confirm.is-asking{border-color:#7f1d1d;background:#2a0707;color:#fecaca;
      & .g-confirm-detail{color:#fecaca}}
    & .g-confirm-problem{color:#fca5a5}
    & .g-confirm.is-working,& .g-confirm.is-done{color:#fecaca}
    @media (max-width:640px){padding:9px 16px}
  }
}

/* A decision window as a line between its two labeled ends: the part used dimmed, a white "now" marker, and the rest
   an amber pill labeled with the time left. The SVG draws past its box so a label at either end is never cut. */
@layer timetrack{
  .g-track{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:14px 0 10px;
    font:12px var(--mono);color:var(--g-ink-3);
    & .g-track-end{white-space:nowrap}
    & .g-track-line{display:block;width:100%;height:46px;overflow:visible}
    & .g-track-base{fill:var(--g-edge)}
    & .g-track-used{fill:color-mix(in srgb,var(--g-ink-3) 70%,transparent)}
    & .g-track-rest{fill:color-mix(in srgb,var(--g-wait) 22%,transparent);stroke:color-mix(in srgb,var(--g-wait) 70%,transparent);
      stroke-width:1}
    & .g-track-now{fill:var(--g-ink)}
    & .g-track-now-label{fill:var(--g-ink);font:11px var(--mono)}
    & .g-track-left{fill:var(--g-wait);font:600 12px var(--mono)}
    @media (max-width:640px){gap:8px;font-size:11px}
  }
}

/* One slide at a time over a stage that keeps its height, the way to move in the top row, and a dot per slide below,
   the current one stretched. A new slide rises in once; nothing loops, and the advance is a timer, not an animation. */
@layer carousel{
  .g-car{display:flex;flex-direction:column;min-height:170px;
    & .g-car-bar{display:flex;align-items:center;gap:10px;min-height:26px}
    & .g-car-nav{display:flex;gap:4px;margin-left:auto}
    & .g-car-btn{display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:8px;border:1px solid var(--g-edge);
      background:transparent;color:var(--g-ink-2);font:14px var(--sans);cursor:pointer;
      &:hover{border-color:var(--brand);color:var(--g-ink)}}
    & .g-car-stage{display:flex;align-items:center;flex:1;min-height:72px;min-width:0}
    & .g-car-slide{display:flex;align-items:center;gap:14px;width:100%;min-width:0;animation:g-open .25s ease-out}
    & .g-car-dots{display:flex;gap:4px;margin-top:10px}
    & .g-car-dot{display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;background:transparent;cursor:pointer;
      &::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--g-edge-2);transition:transform .2s}
      &.is-on::before{background:var(--brand);transform:scaleX(2.2)}}
  }
}

/* Elevated now, one row per live grant or waiting request on every page that lists them: amber as a temporary grant
   is everywhere, a break glass red and first, a request still waiting blue. What it is and why, its time left, then
   its actions in one cell, which takes the whole row while a Release asks to be confirmed. A phone puts the time and
   the actions under what it is. */
@layer elevated{
  .g-elev{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
  .g-elev-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 14px;
    border-radius:12px;border:1px solid color-mix(in srgb,var(--g-temp-glow) 45%,var(--g-edge));
    background:linear-gradient(90deg,color-mix(in srgb,var(--g-temp-glow) 22%,transparent),transparent 60%),var(--g-surface-2);
    & .g-cd{width:56px;height:56px}
    &>.g-elev-mark{display:grid;place-items:center;width:56px;font-size:26px}
    &.is-glass{border-color:#7f1d1d;background:linear-gradient(90deg,rgba(220,38,38,.18),rgba(220,38,38,.02)),var(--g-surface-2);
      & .g-cd-arc{stroke:#dc2626}
      & .g-elev-left{color:var(--g-bad)}
      & .g-confirm>.g-btn.is-danger{background:#dc2626;border-color:#dc2626;color:#fff}}
    &.is-pending{border-color:color-mix(in srgb,#3b82f6 55%,var(--g-edge));
      background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(59,130,246,.02)),var(--g-surface-2);
      & .g-elev-left{color:color-mix(in srgb,#3b82f6 70%,var(--g-ink))}}
    &.is-expiring{border-color:color-mix(in srgb,var(--g-bad) 45%,var(--g-edge));
      & .g-cd-arc{stroke:var(--g-bad)}}
    &.is-missing .g-elev-left{color:var(--g-bad)}
    @media (max-width:640px){grid-template-columns:auto minmax(0,1fr);gap:10px 12px;
      &>.g-elev-left,&>.g-elev-acts{grid-column:2;justify-self:start}}
  }
  .g-elev-mark{font-size:24px;line-height:1}
  .g-elev-text{min-width:0}
  .g-elev-title{margin:0;font:700 15px var(--display);overflow-wrap:anywhere}
  /* A grant's reason keeps to one line; who a request waits on, and the DM to come, wraps, a long email breaking. */
  .g-elev-why{margin:2px 0 0;overflow:hidden;font-size:12.5px;color:var(--g-ink-2);text-overflow:ellipsis;white-space:nowrap;
    @media (max-width:640px){white-space:normal}}
  .g-elev-who{margin:2px 0 0;font-size:12.5px;color:var(--g-ink-2);overflow-wrap:break-word}
  .g-elev-left{margin:0;font:600 13px var(--mono);color:var(--g-wait);white-space:nowrap}
  .g-elev-soon{margin-left:2px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--g-bad) 15%,transparent);
    color:var(--g-bad);font:600 12px var(--sans)}
  .g-elev-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;
    &:has(.g-confirm.is-asking){grid-column:1/-1;justify-self:stretch}}
}