/* ===========================================================================
   Prove7 component library — the controls from the approved token sheet,
   built once so no Prove7 surface re-derives them.
   ---------------------------------------------------------------------------
   Requires p7-tokens.css. Every rule here reads semantic tokens only, so a
   theme or brand change needs no edit in this file.

   Class names are prefixed `p7-` and are deliberately generic: a button is a
   button whether it sits in Control Chat, the platform container or an admin
   tool. Layout belongs to the surface, not here.

   Contents
     Base + focus  .p7-focusable
     Buttons       .p7-btn  --primary --neutral --ghost --approve --destructive
                   .p7-iconbtn  .p7-btn-sm
     Fields        .p7-input .p7-select .p7-textarea .p7-label .p7-hint
     Segmented     .p7-seg
     Status        .p7-status (allow|hold|deny|running|scheduled)  .p7-dot
     Identifiers   .p7-id  .p7-mono
     People        .p7-avatar  .p7-avatars
     Containers    .p7-card  .p7-panel  .p7-eyebrow  .p7-note
     Rows          .p7-row (honours [data-density])
   =========================================================================== */

/* -- Base ----------------------------------------------------------------- */
.p7-focusable:focus-visible,
.p7-btn:focus-visible,
.p7-iconbtn:focus-visible,
.p7-input:focus-visible,
.p7-select:focus-visible,
.p7-textarea:focus-visible,
.p7-seg button:focus-visible {
  outline: var(--p7-focus-width) solid var(--p7-accent);
  outline-offset: var(--p7-focus-offset);
}

/* -- Buttons --------------------------------------------------------------
   One shape, six intents. Intent is never colour alone: the approve and
   destructive variants also carry their own word in the label.

   A variant declares its four colours as custom properties and the base rules
   read them. That is deliberate: an earlier version let the base `:hover` rule
   set `background` directly, and because `.p7-btn:hover:not(:disabled)` scores
   higher than `.p7-btn--neutral`, hovering a dark button repainted it pale
   while keeping its white label — white on near-white, invisible. Driving every
   state from one set of variables means a new variant cannot reintroduce that:
   it sets its own values and inherits correct rest, hover and disabled states. */
.p7-btn {
  --p7-btn-bg:       var(--p7-surface);
  --p7-btn-bg-hover: var(--p7-surface-sunken);
  --p7-btn-fg:       var(--p7-ink);
  --p7-btn-bd:       var(--p7-line-strong);
  --p7-btn-weight:   400;

  display:inline-flex; align-items:center; justify-content:center; gap:var(--p7-space-2);
  padding:9px 15px; border-radius:var(--p7-radius-button);
  border:1px solid var(--p7-btn-bd); background:var(--p7-btn-bg);
  color:var(--p7-btn-fg); font:var(--p7-text-ui); font-family:var(--p7-font-sans);
  font-weight:var(--p7-btn-weight); cursor:pointer; white-space:nowrap;
  transition:background var(--p7-fast) var(--p7-ease), border-color var(--p7-fast) var(--p7-ease),
             box-shadow var(--p7-fast) var(--p7-ease);
}
.p7-btn:hover:not(:disabled){ background:var(--p7-btn-bg-hover); box-shadow:var(--p7-elev-rest) }
.p7-btn:disabled{
  --p7-btn-bg:var(--p7-surface-sunken);
  --p7-btn-fg:var(--p7-ink-faint);
  --p7-btn-bd:var(--p7-line);
  cursor:default;
}

.p7-btn--primary{
  --p7-btn-bg:var(--p7-accent); --p7-btn-bg-hover:var(--p7-accent-hover);
  --p7-btn-fg:var(--p7-ink-on-accent); --p7-btn-bd:transparent; --p7-btn-weight:600;
}
.p7-btn--neutral{
  --p7-btn-bg:var(--p7-ink); --p7-btn-bg-hover:var(--p7-ink-strong);
  --p7-btn-fg:var(--p7-surface); --p7-btn-bd:transparent; --p7-btn-weight:600;
}
.p7-btn--ghost{
  --p7-btn-bg:transparent; --p7-btn-bg-hover:var(--p7-accent-bg);
  --p7-btn-fg:var(--p7-accent); --p7-btn-bd:transparent; --p7-btn-weight:600;
}
.p7-btn--ghost:hover:not(:disabled){ box-shadow:none }
.p7-btn--approve{
  --p7-btn-bg:var(--p7-allow); --p7-btn-bg-hover:var(--p7-allow-ink);
  --p7-btn-fg:var(--p7-ink-on-accent); --p7-btn-bd:transparent; --p7-btn-weight:600;
}
.p7-btn--destructive{
  --p7-btn-bg:var(--p7-surface); --p7-btn-bg-hover:var(--p7-deny-bg);
  --p7-btn-fg:var(--p7-deny); --p7-btn-bd:var(--p7-deny-line); --p7-btn-weight:600;
}

.p7-btn--sm{ padding:5px 11px; font-size:12px }
.p7-btn--block{ width:100% }

/* Icon-only: 26-28px, and it must carry an aria-label and a title. */
.p7-iconbtn{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:var(--p7-radius-control);
  color:var(--p7-ink-muted); cursor:pointer;
}
.p7-iconbtn:hover{ background:var(--p7-surface-sunken); color:var(--p7-ink) }
.p7-iconbtn[aria-pressed="true"],
.p7-iconbtn.is-on{ background:var(--p7-accent-bg); color:var(--p7-accent) }
.p7-iconbtn svg{ width:16px; height:16px; stroke-width:2; fill:none; stroke:currentColor }

/* Any control a finger might hit gets a 44px target in the touch layout. */
@media (pointer:coarse){
  .p7-btn{ min-height:44px }
  .p7-iconbtn{ width:44px; height:44px }
}

/* -- Fields --------------------------------------------------------------- */
.p7-label{ display:block; font:var(--p7-text-caption); font-family:var(--p7-font-sans);
  color:var(--p7-ink-muted); margin-bottom:var(--p7-space-1) }
.p7-input, .p7-select, .p7-textarea{
  width:100%; box-sizing:border-box; padding:9px 11px;
  border:1px solid var(--p7-line-strong); border-radius:var(--p7-radius-button);
  background:var(--p7-surface); color:var(--p7-ink);
  font:var(--p7-text-ui); font-family:var(--p7-font-sans);
}
.p7-textarea{ resize:vertical; min-height:56px }
.p7-input::placeholder, .p7-textarea::placeholder{ color:var(--p7-ink-faint) }
.p7-input:disabled, .p7-select:disabled, .p7-textarea:disabled{
  background:var(--p7-surface-sunken); color:var(--p7-ink-faint) }
.p7-hint{ font:var(--p7-text-caption); font-family:var(--p7-font-sans); color:var(--p7-ink-subtle) }
.p7-hint--error{ color:var(--p7-deny) }

/* Visually hidden, still read aloud. */
.p7-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap }

/* -- Segmented control ---------------------------------------------------- */
.p7-seg{ display:inline-flex; background:var(--p7-line-soft);
  border-radius:var(--p7-radius-button); padding:3px; gap:2px }
.p7-seg button{ border:0; background:transparent; cursor:pointer;
  padding:5px 12px; border-radius:var(--p7-radius-control);
  font:var(--p7-text-ui); font-family:var(--p7-font-sans); color:var(--p7-ink-muted) }
.p7-seg button[aria-pressed="true"]{ background:var(--p7-surface); color:var(--p7-ink);
  font-weight:600; box-shadow:var(--p7-elev-rest) }

/* -- Status ---------------------------------------------------------------
   A status pill always contains its word. The dot is the same vocabulary for
   places too tight for a pill — and in those places the word goes in the row. */
.p7-status{ display:inline-flex; align-items:center; gap:5px;
  font-size:var(--p7-eyebrow-size); font-weight:var(--p7-eyebrow-weight);
  font-family:var(--p7-font-sans); border-radius:var(--p7-radius-control); padding:2px 9px }
.p7-status--allow{     background:var(--p7-allow-bg); color:var(--p7-allow-ink) }
.p7-status--hold{      background:var(--p7-hold-bg);  color:var(--p7-hold-ink) }
.p7-status--deny{      background:var(--p7-deny-bg);  color:var(--p7-deny) }
.p7-status--running{   background:var(--p7-accent-bg);color:var(--p7-accent-ink) }
.p7-status--scheduled{ background:var(--p7-line-soft);color:var(--p7-ink-strong) }

.p7-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--p7-ink-faint) }
.p7-dot--allow{ background:var(--p7-allow) }
.p7-dot--hold{ background:var(--p7-hold) }
.p7-dot--deny{ background:var(--p7-deny) }
.p7-dot--running{ background:var(--p7-accent) }

/* A phase/step marker: ✓ ✕ or an ordinal. */
.p7-mark{ width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; background:var(--p7-line-soft); color:var(--p7-ink-subtle) }
.p7-mark--allow{ background:var(--p7-allow-bg); color:var(--p7-allow) }
.p7-mark--deny{  background:var(--p7-deny-bg);  color:var(--p7-deny) }
.p7-mark--hold{  background:var(--p7-hold-bg);  color:var(--p7-hold) }

/* -- Identifiers ----------------------------------------------------------
   Record ids, hashes, policy ids and amounts are mono so they can be compared
   character by character, and copyable in one click. */
.p7-mono{ font-family:var(--p7-font-mono) }
.p7-id{ display:inline-flex; align-items:center; gap:5px;
  font:var(--p7-text-mono); border:1px solid var(--p7-line);
  border-radius:5px; padding:1px 7px; background:var(--p7-surface); color:var(--p7-ink-strong) }
button.p7-id{ cursor:pointer }
button.p7-id:hover{ border-color:var(--p7-line-strong); background:var(--p7-surface-sunken) }
.p7-kbd{ font:var(--p7-text-mono); border:1px solid var(--p7-line-strong);
  border-radius:5px; padding:1px 5px; background:var(--p7-surface); color:var(--p7-ink-subtle) }

/* -- People ---------------------------------------------------------------- */
.p7-avatar{ width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  background:var(--p7-accent); color:var(--p7-ink-on-accent);
  font-size:10px; font-weight:600; font-family:var(--p7-font-sans);
  display:inline-flex; align-items:center; justify-content:center }
.p7-avatar--lg{ width:29px; height:29px; font-size:11px }
.p7-avatar--sm{ width:19px; height:19px; font-size:9px }
.p7-avatars{ display:inline-flex }
.p7-avatars .p7-avatar + .p7-avatar{ margin-left:-5px; border:2px solid var(--p7-surface) }

/* -- Containers ------------------------------------------------------------ */
.p7-card{ border:1px solid var(--p7-line); border-radius:var(--p7-radius-card);
  background:var(--p7-surface); box-shadow:var(--p7-elev-rest) }
.p7-panel{ border:1px solid var(--p7-line); border-radius:10px; background:var(--p7-surface) }
.p7-eyebrow{ font-size:var(--p7-eyebrow-size); font-weight:var(--p7-eyebrow-weight);
  letter-spacing:var(--p7-eyebrow-tracking); text-transform:uppercase; color:var(--p7-ink-faint) }

/* A short aside that carries a rule or a consequence. */
.p7-note{ border-left:3px solid var(--p7-accent); background:var(--p7-accent-bg-soft);
  padding:10px 13px; border-radius:0 var(--p7-radius-button) var(--p7-radius-button) 0;
  font:var(--p7-text-ui); font-family:var(--p7-font-sans); color:var(--p7-ink-strong) }
.p7-note--deny{ border-left-color:var(--p7-deny); background:var(--p7-deny-bg-soft) }
.p7-note--hold{ border-left-color:var(--p7-hold); background:var(--p7-hold-bg-soft) }
.p7-note--allow{ border-left-color:var(--p7-allow); background:var(--p7-allow-bg) }

/* -- Rows ------------------------------------------------------------------
   Density is a token, so a list opts in by using .p7-row and nothing else.
   Compact hides the secondary line; the dot, the control and the target stay. */
.p7-row{ display:flex; align-items:center; gap:9px;
  padding:var(--p7-row-y) var(--p7-row-x); border-bottom:1px solid var(--p7-line-soft);
  font:var(--p7-text-ui); font-family:var(--p7-font-sans); color:var(--p7-ink) }
.p7-row:last-child{ border-bottom:0 }
.p7-row__t{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p7-row__sub{ font:var(--p7-text-caption); font-family:var(--p7-font-sans); color:var(--p7-ink-subtle) }
[data-density="compact"] .p7-row__sub{ display:none }
[data-density="compact"] .p7-row{ flex-direction:row; align-items:center }

@media (prefers-reduced-motion: reduce){
  .p7-btn, .p7-iconbtn{ transition:none }
}