/* The product, drawn in the page: the panel's own components
   (web/static/css/components.css and panel.css) copied here under a pv-
   prefix, with the site's colours, so that the main page can show KinAuth
   as real text that stays sharp at any size and follows the theme. Each
   visual is one image to a screen reader (role="img" with a label): what
   is inside is a picture of an interface, not an interface. Sizes are in
   pixels, as in the panel. */

.pv { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shot-shadow); color: var(--text); font-size: 14px; line-height: 1.45; text-align: left; user-select: none; }
.pv p { margin: 0; color: inherit; }
.pv svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv .pv-muted { color: var(--muted); }
.pv-small { font-size: 13px; }
.pv-mono { font-family: var(--font-mono); font-feature-settings: normal; }
.pv-grow { flex: 1; min-width: 0; }

/* The address the page is at: every organization has its own. */
.pv-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-feature-settings: normal; white-space: nowrap; overflow: hidden; }
.pv-bar svg { width: 13px; height: 13px; }
.pv-bar b { color: var(--text); font-weight: 500; }

/* Shell: rail and main */
.pv-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.pv-rail { display: flex; flex-direction: column; gap: 16px; padding: 12px; background: var(--bg-subtle); border-right: 1px solid var(--border); }
.pv-brand { display: flex; align-items: center; gap: 3px; height: 36px; padding: 0 4px; font-size: 17px; font-weight: 900; letter-spacing: -0.03em; font-feature-settings: normal; }
.pv-brand img { width: 24px; height: 24px; margin-left: -4px; }
.pv-group { display: grid; gap: 2px; }
.pv-label { padding: 0 8px; height: 24px; display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--muted); }
.pv-org { padding: 0 8px; font-size: 13px; color: var(--text-2); }
.pv-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; font-weight: 500; }
.pv-item.is-current { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.pv-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.pv-user { display: flex; align-items: center; gap: 8px; padding: 8px; min-width: 0; }
.pv-user-name { display: block; font-size: 13px; font-weight: 500; }
.pv-user-mail { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; }
.pv-topbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.pv-topbar b { color: var(--text); font-weight: 500; }
.pv-topbar .pv-sep { color: var(--border-strong); }
.pv-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--text-2); font-weight: 500; }
.pv-actions span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pv-page { display: grid; gap: 20px; align-content: start; padding: 24px 32px 40px; }
.pv-h1 { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-display); }
.pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pv-head p { margin-top: 4px; }
.pv-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* List rows, badges, cards, controls */
.pv-list { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pv-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pv-row:last-child { border-bottom: 0; }
.pv-who { display: grid; min-width: 0; }
.pv-who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--neutral-soft); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pv-badge.is-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.pv-badge.is-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.pv-badge.is-mono { font-family: var(--font-mono); font-feature-settings: normal; border-radius: var(--r-sm); }
.pv-card { display: grid; gap: 16px; align-content: start; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pv-card-title { font-size: 16px; font-weight: 600; letter-spacing: var(--tracking-heading); }
.pv-field { display: grid; gap: 8px; }
.pv-field > span:first-child { font-size: 13px; font-weight: 500; color: var(--text-2); }
.pv-input { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; background: var(--bg-subtle); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.pv-input.is-select::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.pv-hint { font-size: 12px; color: var(--muted); }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--text); font-weight: 500; white-space: nowrap; }
.pv-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.pv-btn.is-ghost { border-color: transparent; color: var(--text-2); }

/* Table (the audit log) */
.pv-table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pv-table { display: grid; grid-template-columns: max-content max-content max-content max-content minmax(0, 1fr); }
.pv-tr { display: contents; }
.pv-tr > * { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.pv-tr:last-child > * { border-bottom: 0; }
.pv-tr.is-head > * { padding-block: 8px; background: var(--bg-subtle); color: var(--muted); font-size: 12px; font-weight: 500; }
.pv-time { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-details { font-family: var(--font-mono); font-feature-settings: normal; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* The sign-in page during an approval, and the phone beside it */
.pv-approve { display: grid; grid-template-columns: minmax(0, 360px) auto; justify-content: center; align-items: center; gap: 56px; padding: 40px 28px; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 22px 22px; }
.pv-signin { display: grid; justify-items: center; gap: 20px; min-width: 0; }
.pv-banner { max-width: 100%; padding: 8px 16px; background: var(--surface); border: 1px solid var(--accent-border); border-radius: 999px; font-size: 13px; text-align: center; }
.pv-login { width: min(360px, 100%); display: grid; gap: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pv-login .pv-brand { height: auto; padding: 0; }
.pv-title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-heading); }
.pv-host { margin-top: 2px; font-family: var(--font-mono); font-feature-settings: normal; font-size: 13px; color: var(--text-2); }
.pv-number { padding: 16px 0; text-align: center; font-family: var(--font-mono); font-feature-settings: normal; font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; background: var(--bg-subtle); border: 1px solid var(--accent-border); border-radius: var(--r-lg); }
.pv .pv-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.pv-phone { width: 232px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 34px; background: var(--surface-2); }
.pv-screen { display: grid; gap: 12px; align-content: start; min-height: 372px; padding: 30px 16px 18px; border-radius: 26px; background: var(--bg); border: 1px solid var(--border); text-align: center; }
.pv-screen .pv-brand { justify-content: center; height: auto; font-size: 15px; }
.pv-screen .pv-brand img { width: 22px; height: 22px; }
.pv-ask { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-heading); }
.pv-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pv-choices span { display: grid; place-items: center; height: 54px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); font-family: var(--font-mono); font-feature-settings: normal; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv .pv-deny { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 500; color: var(--danger); }

/* Narrow screens: what the panel itself does (the rail folds away), and
   the least telling columns of a table go. */
@media (max-width: 860px) {
  .pv-shell { grid-template-columns: minmax(0, 1fr); }
  .pv-rail { display: none; }
  .pv-two { grid-template-columns: minmax(0, 1fr); }
  .pv-two .pv-card { display: none; }
  .pv-table { grid-template-columns: max-content max-content minmax(0, 1fr); }
  .pv-table .pv-from, .pv-table .pv-details { display: none; }
}
@media (max-width: 640px) {
  .pv-topbar { padding: 0 16px; }
  .pv-actions .pv-wide { display: none; }
  .pv-page { padding: 16px 16px 24px; gap: 16px; }
  .pv-h1 { font-size: 22px; }
  .pv-row { padding: 12px; gap: 8px; }
  .pv-row .pv-badge:not(.is-mono) { display: none; }
  .pv-tr > * { padding: 10px 12px; }
  .pv-approve { grid-template-columns: minmax(0, 360px); justify-items: center; gap: 24px; padding: 20px 16px; }
  .pv-login { padding: 22px 20px; }
  .pv-number { font-size: 52px; }
}
@media (max-width: 560px) {
  .pv-table { grid-template-columns: max-content minmax(0, 1fr); }
  .pv-table .pv-who-col { display: none; }
  .pv-tr > * { padding: 10px; }
  .pv-time { font-size: 13px; }
  .pv-table .pv-badge { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 20px; }
}