/* =============================================================================
   PRAMAAN — design system

   COPIED FROM THE INSURANCE PLATFORMS THAT DO THIS WELL, ON PURPOSE.

   The first attempt at this file was an invented concept ("warm registry paper,
   brass, laid texture"). It was replaced because the brief is to look like the
   best platforms in this industry, not like an idea about them. These are the
   references, read off the live sites with computed styles rather than guessed:

     Duck Creek     duckcreek.com          deep navy #0D1844, near-black #050D2F,
                                           huge confident type, generous space
     Guidewire      guidewire.com          white, pale blue-grey #E7F1F5, teal
                                           #00739D, amber #FFC000, ink #004D69
     Shift          shift-technology.com   white, Source Serif 4 display over
                                           Source Sans 3, ONE vivid accent,
                                           rectangular buttons, large whitespace
     Next / ERGO    nextinsurance.com      white, crimson #8E0038, yellow #FCE686,
                                           heavy display type

   WHAT WAS TAKEN FROM EACH
     Structure and surface -> Shift and Guidewire: white ground, hairline rules,
                              cards as quiet surfaces rather than boxed shadows.
     Colour                -> Guidewire's teal as the single accent, and its amber
                              as the caution signal. Enterprise insurance has used
                              this pairing for two decades; it reads as the industry
                              rather than as a startup.
     Ink                   -> Duck Creek's deep navy for headings and dark surfaces,
                              which gives the console weight without going to black.
     Type                  -> Shift's pairing: a serif for display, a sans for the
                              interface. That is the strongest single move in this
                              group, and it is what makes a data console look
                              considered rather than templated.
     Buttons               -> Shift: rectangular, not pills.

   PALETTE DISCIPLINE
   Teal is the ONLY accent: links, primary buttons, active navigation, focus.
   Amber, green and red are STATUS ONLY and never brand surfaces. This is the rule
   that stops the console drifting back to the generic blue-and-purple gradient
   stack it came from.
   ============================================================================= */

:root {
  /* ── Ink: deep navy, never pure black (Duck Creek) ───────────────────────── */
  --i-navy:      #0d1844;
  --i-navy-2:    #16265c;
  --i-navy-3:    #23346e;
  --i-ink:       #1b2436;
  --i-slate:     #5b6478;
  --i-slate-2:   #8b93a5;

  /* ── Surfaces ────────────────────────────────────────────────────────────── */
  --i-bg:        #ffffff;
  --i-bg-2:      #f6f8fb;
  --i-bg-3:      #eef2f7;
  --i-line:      #e3e8ef;
  --i-line-2:    #cfd7e3;

  /* ── The single accent (Guidewire teal) ──────────────────────────────────── */
  --i-teal:      #00739d;
  --i-teal-600:  #005f83;
  --i-teal-700:  #004d69;
  --i-teal-050:  #e6f2f7;

  /* ── Status only ─────────────────────────────────────────────────────────── */
  --i-green:     #1a7f5a;  --i-green-050: #e6f4ee;
  --i-amber:     #ffc000;  --i-amber-700: #8a6100;  --i-amber-050: #fff8e1;
  --i-red:       #c0392b;  --i-red-050:   #fdecea;

  /* ── Type: serif display over sans UI (Shift) ────────────────────────────── */
  --i-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --i-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --i-mono:    'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Elevation: restrained. Enterprise software rarely floats. ───────────── */
  --i-shadow-1: 0 1px 2px rgba(13, 24, 68, .06);
  --i-shadow-2: 0 2px 6px rgba(13, 24, 68, .07), 0 12px 28px rgba(13, 24, 68, .06);
  --i-shadow-3: 0 8px 20px rgba(13, 24, 68, .10), 0 24px 56px rgba(13, 24, 68, .10);

  --i-r-sm: 3px;
  --i-r:    5px;
  --i-r-lg: 8px;

  --i-ease: cubic-bezier(.2, .7, .25, 1);
  --i-fast: 130ms;
  --i-med:  200ms;

  --i-z-sticky: 100;
  --i-z-nav: 200;
  --i-z-overlay: 300;
  --i-z-modal: 400;
  --i-z-toast: 500;

  --i-container: 1440px;
}

/* =============================================================================
   BASE
   ============================================================================= */

html { scroll-behavior: smooth; }

body {
  background: var(--i-bg);
  color: var(--i-ink);
  font-family: var(--i-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A column of figures in proportional digits looks broken, and this is a ledger. */
table, .mono, code, pre, kbd, samp, [class*='metric'], [class*='stat'] {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--i-display);
  color: var(--i-navy);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 1.7vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p { line-height: 1.62; text-wrap: pretty; }

a { color: var(--i-teal); text-decoration: none; }
a:hover { color: var(--i-teal-600); text-decoration: underline; text-underline-offset: 3px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--i-teal);
  outline-offset: 2px;
  border-radius: var(--i-r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--i-z-toast);
  padding: .7rem 1rem; background: var(--i-navy); color: #fff;
  border-radius: 0 0 var(--i-r) 0; font-size: .85rem;
}
.skip-link:focus { left: 0; }

.eyebrow, .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--i-slate-2);
}

/* =============================================================================
   THE MARK — two chained records. The product is a hash chain; the mark is one.
   ============================================================================= */

.p-mark { display: inline-block; width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }

.p-wordmark {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-family: var(--i-display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--i-navy); text-decoration: none;
}
.p-wordmark__deva { font-family: var(--i-sans); font-size: .8em; color: var(--i-teal); font-weight: 600; }
.p-wordmark__sub {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-slate-2);
}

/* =============================================================================
   STRUCTURE
   ============================================================================= */

.p-container { width: 100%; max-width: var(--i-container); margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 2rem); }

/* Sidebar: deep navy with a teal rail on the active item.
   The base `color` is set HERE, not only on the children. The console's own
   `.sidebar` rule declares a background and no colour, so every child without an
   explicit colour inherited body ink — which rendered the brand line as dark navy
   on dark navy, i.e. invisible. Setting the inherited colour once is the fix that
   cannot be undone by the next child someone adds. */
.sidebar, .sb, [class*='sidebar'] {
  background: var(--i-navy);
  border-right: 1px solid var(--i-navy-2);
  color: #c3cbe0;
}
.sb-logo { border-bottom-color: var(--i-navy-2) !important; }
.sb-brand, .sb-brand-text div:first-child { color: #fff !important; }
.sb-brand-text div:last-child { color: #8fa0c4 !important; }
.sb-section-label { color: #8fa0c4; }
.sb-section-label:hover { color: #fff; background: var(--i-navy-2); }

.sb-item {
  position: relative;
  color: #c3cbe0;
  border-radius: var(--i-r-sm);
  transition: background var(--i-fast) var(--i-ease), color var(--i-fast) var(--i-ease);
}
.sb-item:hover { background: var(--i-navy-2); color: #fff; }
.sb-item.active, .sb-item[aria-current='page'], .sb-item.is-active {
  background: var(--i-navy-2); color: #fff; font-weight: 600;
}
.sb-item.active::before, .sb-item[aria-current='page']::before, .sb-item.is-active::before {
  content: ''; position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 3px;
  background: #35b6d9; border-radius: 0 3px 3px 0;
}
.sb-item-icon { color: #7b87a3; }
.sb-item:hover .sb-item-icon, .sb-item.active .sb-item-icon { color: #35b6d9; }

.sb-badge {
  font-family: var(--i-mono); font-size: .62rem;
  background: var(--i-navy-3); color: #c3cbe0;
  border-radius: 3px; padding: .1rem .35rem;
}

/* =============================================================================
   CARDS — quiet surfaces and hairlines
   ============================================================================= */

.card {
  background: var(--i-bg);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  box-shadow: var(--i-shadow-1);
  transition: border-color var(--i-med) var(--i-ease), box-shadow var(--i-med) var(--i-ease);
}
.card:hover { border-color: var(--i-line-2); box-shadow: var(--i-shadow-2); }

.card-header { border-bottom: 1px solid var(--i-line); }
.card-title { font-family: var(--i-display); font-weight: 600; color: var(--i-navy); font-size: 1.05rem; }
.card-sub { color: var(--i-slate); font-size: .875rem; }
.card-icon { color: var(--i-teal); }

.section-gap { margin-block: clamp(1.25rem, 2vw, 2rem); }

/* =============================================================================
   BUTTONS — rectangular, one accent
   ============================================================================= */

.btn {
  font-family: var(--i-sans); font-weight: 600; font-size: .875rem;
  border-radius: var(--i-r);
  transition: background var(--i-fast) var(--i-ease), color var(--i-fast) var(--i-ease),
              border-color var(--i-fast) var(--i-ease), transform var(--i-fast) var(--i-ease),
              box-shadow var(--i-fast) var(--i-ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary, .btn-primary, .btn.primary {
  background: var(--i-teal); color: #fff; border: 1px solid var(--i-teal);
}
.btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: var(--i-teal-600); border-color: var(--i-teal-600); color: #fff;
}

.btn--secondary, .btn-secondary, .btn.secondary {
  background: #fff; color: var(--i-navy); border: 1px solid var(--i-line-2);
}
.btn--secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  border-color: var(--i-teal); color: var(--i-teal); background: var(--i-teal-050);
}

.btn--quiet, .btn-quiet, .btn.quiet {
  background: none; border: none; color: var(--i-slate);
  text-decoration: none; padding-inline: .25rem;
}
.btn--quiet:hover { color: var(--i-teal); }

.btn-sm { border-radius: var(--i-r-sm); }

/* =============================================================================
   TABLES — the ledger is read here
   ============================================================================= */

table { border-collapse: collapse; width: 100%; }

thead th {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--i-slate-2);
  border-bottom: 1px solid var(--i-line-2); padding-block: .7rem; text-align: left;
}
tbody td { border-bottom: 1px solid var(--i-line); color: var(--i-ink); }
tbody tr { transition: background var(--i-fast) var(--i-ease); }
tbody tr:hover { background: var(--i-bg-2); }
tbody tr:last-child td { border-bottom: none; }

.table-footer { border-top: 1px solid var(--i-line); color: var(--i-slate); }

/* =============================================================================
   FORMS — :where() keeps these DEFAULTS. A page's own class must win.
   ============================================================================= */

:where(.input, input[type='text'], input[type='email'], input[type='password'],
       input[type='number'], input[type='search'], select, textarea) {
  background: #fff;
  border: 1px solid var(--i-line-2);
  border-radius: var(--i-r);
  color: var(--i-ink);
  font-family: inherit;
  transition: border-color var(--i-fast) var(--i-ease), box-shadow var(--i-fast) var(--i-ease);
}
:where(.input, input, select, textarea):hover { border-color: var(--i-slate-2); }
:where(.input, input, select, textarea):focus {
  border-color: var(--i-teal);
  box-shadow: 0 0 0 3px var(--i-teal-050);
  outline: none;
}
:where(.input, input, textarea)::placeholder { color: var(--i-slate-2); }

label, .modal-label, .field__label { color: var(--i-navy); font-weight: 600; font-size: .82rem; }

/* =============================================================================
   STATUS
   ============================================================================= */

.hdot { border-radius: 50%; }

.ok, .is-clear, .status-ok, .status-clear, .emerald { color: var(--i-green); }
.is-review, .status-flagged, .status-review { color: var(--i-amber-700); }
.is-breach, .status-blocked, .status-breach { color: var(--i-red); }

/* Verdict chips: stamped and rectangular, not pills. */
.p-verdict {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .24rem .5rem; border-radius: var(--i-r-sm); border: 1px solid currentColor;
}
.p-verdict--clear  { color: var(--i-green);     background: var(--i-green-050); }
.p-verdict--review { color: var(--i-amber-700); background: var(--i-amber-050); }
.p-verdict--breach { color: var(--i-red);       background: var(--i-red-050); }

.health-card { border: 1px solid var(--i-line); border-radius: var(--i-r); background: var(--i-bg-2); }
.health-status { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.health-meta { color: var(--i-slate); font-size: .78rem; }

.badge, .tag {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--i-r-sm); padding: .16rem .42rem;
  border: 1px solid var(--i-line-2); color: var(--i-slate); background: var(--i-bg-2);
}

/* =============================================================================
   LOADING / EMPTY / ERROR
   ============================================================================= */

.cf-skel, .skeleton { position: relative; overflow: hidden; background: var(--i-bg-3); border-radius: var(--i-r-sm); }
.cf-skel::after, .skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: i-sheen 1.4s var(--i-ease) infinite;
}
@keyframes i-sheen { to { transform: translateX(100%); } }

.p-empty {
  border: 1px dashed var(--i-line-2); border-radius: var(--i-r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center;
  color: var(--i-slate); background: var(--i-bg-2);
}
.p-empty__title { font-family: var(--i-display); font-size: 1.15rem; color: var(--i-navy); margin-bottom: .3rem; }

.p-error {
  border-left: 3px solid var(--i-red); background: var(--i-red-050);
  color: #8f2c20; border-radius: 0 var(--i-r) var(--i-r) 0;
  padding: .7rem .9rem; font-size: .875rem;
}

/* =============================================================================
   MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cf-skel::after, .skeleton::after { display: none; }
}

@media print {
  .card { box-shadow: none; border-color: #ccc; }
}

/* ── Wide content scrolls; the page does not ───────────────────────────────────
   WHY. On a 375px viewport, `gateway.html` pushed the whole document 296px wide,
   `install.html` 82px, and `pending.html` 43px. Measured, not guessed: the elements
   over the viewport width were a <code> block at 542px and a <table> at 617px.

   The fix is containment rather than shrinking. A code sample and a data table are
   legitimately wider than a phone; the reader scrolls THEM. Letting them widen the
   body instead breaks the whole page, and at 375px it also disables the horizontal
   swipe that should belong to the code block.

   `min-width: 0` on the children matters: inside a flex or grid parent, a wide child
   refuses to shrink without it, and the container's own scroll never engages. */
pre, table, .table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { display: table; }
.table-scroll > table { display: table; min-width: 0; }
pre { white-space: pre; }