/* Custom Portal Studio. The page is laid out as the portal itself.
   Colour carries status only: cobalt is done, amber is waiting, raspberry is an exception. */
:root {
  --canvas: #F2F4F9; --panel: #FFFFFF; --ink: #121A33; --soft: #4A5470; --faint: #6B7590;
  --rule: #D5DAE6; --rule-soft: #E6E9F1;
  --done: #2B3FD6; --done-dark: #1E2FA8; --done-tint: #E8EBFC;
  --wait: #F0B429; --wait-tint: #FFF4D6; --wait-ink: #7A5200;
  --exc: #C2255C; --exc-tint: #FCE7EF; --exc-ink: #8F1741;
  --display: 'Red Hat Display', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --text: 'Red Hat Text', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius: 14px; --pad: clamp(20px, 3.2vw, 40px);
  --shadow: 0 1px 0 rgba(18, 26, 51, .04), 0 8px 24px -16px rgba(18, 26, 51, .18);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.62 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--done-dark); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--done); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--wait); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }

/* Field labels and pills: the vocabulary of a record screen. */
.field, .lbl { font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.field.soft { color: var(--faint); }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--mono); letter-spacing: .02em; padding: 7px 11px 7px 9px; border-radius: 999px; border: 1px solid var(--rule); background: var(--canvas); color: var(--soft); white-space: nowrap; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.pill.done { background: var(--done-tint); border-color: #C5CCF6; color: var(--done-dark); } .pill.done::before { background: var(--done); }
.pill.wait { background: var(--wait-tint); border-color: #F3D98A; color: var(--wait-ink); } .pill.wait::before { background: var(--wait); }
.pill.exc { background: var(--exc-tint); border-color: #F2B7CC; color: var(--exc-ink); } .pill.exc::before { background: var(--exc); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 10px; border: 1.5px solid var(--done); background: var(--done); color: #fff; font: 600 16px/1.2 var(--text); text-decoration: none; text-align: center; transition: background .15s, transform .15s; }
.btn:hover { background: var(--done-dark); border-color: var(--done-dark); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: var(--panel); color: var(--done-dark); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--done); background: var(--done-tint); color: var(--done-dark); }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Preview bar and app bar */
.preview-bar { background: var(--wait-tint); color: var(--wait-ink); border-bottom: 1px solid #F3D98A; font: 500 12.5px/1.3 var(--mono); text-align: center; padding: 8px 16px; }
.appbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.appbar-in { max-width: 1320px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { display: block; flex: none; }
.brand-name { font: 700 17px/1.1 var(--display); letter-spacing: -.01em; }
.crumb { font: 400 13px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.crumb .sep { margin-right: 10px; color: var(--rule); }
.appnav { margin-left: auto; display: flex; gap: 4px; }
.appnav a { font: 500 15px/1.2 var(--text); color: var(--soft); text-decoration: none; padding: 9px 12px; border-radius: 8px; }
.appnav a:hover, .appnav a[aria-current="page"] { background: var(--canvas); color: var(--ink); }

/* Shell: side rail plus the stack of record panels */
.shell { max-width: 1320px; margin: 0 auto; padding: clamp(16px, 2.4vw, 28px) clamp(12px, 3vw, 32px) 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.rail { display: none; }
main { min-width: 0; }
.stack { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 1120px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .rail { display: block; position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding: 6px 0 0; }
  .rail ol { list-style: none; margin: 14px 0 20px; padding: 0; border-left: 2px solid var(--rule); }
  .rail li a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px 8px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--soft); text-decoration: none; font: 500 15px/1.3 var(--text); }
  .rail li a:hover { color: var(--ink); border-left-color: var(--done); background: rgba(255, 255, 255, .7); }
  .rail-n { font: 400 12px/1 var(--mono); color: var(--faint); }
  .rail-cta { display: block; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--rule); color: var(--done-dark); font: 600 15px/1.3 var(--text); text-decoration: none; }
  .rail-cta:hover { border-color: var(--done); }
  .rail-note { font-size: 14px; line-height: 1.5; color: var(--faint); margin: 16px 0 0; }
}

/* Record panel. Every direct section of the page is one. */
.stack > section { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 var(--pad) var(--pad); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 calc(var(--pad) * -1) clamp(22px, 3vw, 34px); padding: 12px var(--pad); border-bottom: 1px solid var(--rule-soft); background: linear-gradient(#FBFCFE, #FFFFFF); border-radius: var(--radius) var(--radius) 0 0; }
.panel-title { max-width: 46rem; margin-bottom: clamp(22px, 3vw, 32px); }
.panel-title h2, .closing h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.35rem); line-height: 1.14; font-weight: 700; }
.intro { color: var(--soft); margin: 14px 0 0; max-width: 42rem; }
.intro.wide { margin: -8px 0 26px; }
.panel-foot { margin: clamp(24px, 3vw, 34px) calc(var(--pad) * -1) calc(var(--pad) * -1); padding: 18px var(--pad) 20px; background: var(--canvas); border-top: 1px solid var(--rule-soft); border-radius: 0 0 var(--radius) var(--radius); }
.panel-foot p { margin: 8px 0 0; max-width: 56rem; color: var(--soft); font-size: 16px; }

/* Hero */
.hero-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; }
.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); line-height: 1.55; color: var(--soft); margin: 20px 0 0; max-width: 38rem; }
.note { font-size: 16px; color: var(--soft); margin: 20px 0 0; max-width: 38rem; padding-left: 14px; border-left: 3px solid var(--rule); }
.hero-art { margin: 0; }
.swimlane { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.hero-art figcaption { font: 400 13px/1.45 var(--mono); color: var(--faint); text-align: center; margin-top: 12px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); } }

/* Problem: a queue of four open items */
.queue { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.queue li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 20px clamp(16px, 2vw, 24px); border-top: 1px solid var(--rule-soft); border-left: 4px solid var(--exc); }
.queue li:first-child { border-top: 0; }
.queue-n { font: 500 13px/1.9 var(--mono); color: var(--faint); }
.queue h3 { font-size: 1.16rem; line-height: 1.3; font-weight: 700; }
.queue p { margin: 8px 0 0; color: var(--soft); max-width: 44rem; }
.queue .pill { grid-column: 2; justify-self: start; margin-top: 6px; }
@media (min-width: 860px) {
  .queue li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .queue .pill { grid-column: 3; margin-top: 2px; }
}

/* Roles as a real permission table */
.table-card { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.table-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--canvas); border-bottom: 1px solid var(--rule); }
.perm { width: 100%; border-collapse: collapse; font-size: 16px; }
.perm thead th { font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.perm th.mk, .perm td.mk { text-align: center; width: 104px; }
.perm tbody th, .perm tbody td { padding: 16px 14px; border-top: 1px solid var(--rule-soft); vertical-align: top; text-align: left; }
.perm tbody tr:first-child th, .perm tbody tr:first-child td { border-top: 0; }
.perm tbody th { width: 24%; font: 700 1.02rem/1.3 var(--display); }
.perm .role { display: flex; gap: 10px; align-items: flex-start; }
.perm .glyph { flex: none; color: var(--done); margin-top: 1px; }
.perm td { color: var(--soft); line-height: 1.5; }
.perm td.sees { color: var(--ink); font-weight: 500; width: 17%; }
.perm td.mk { text-align: center; }
.mark { vertical-align: middle; }
@media (max-width: 899px) {
  .perm thead { position: absolute; left: -9999px; }
  .perm, .perm tbody, .perm tr, .perm th, .perm td { display: block; width: auto; }
  .perm tbody th, .perm tbody td, .perm td.sees, .perm td.mk { width: auto; }
  .perm tr { padding: 18px 16px; border-top: 1px solid var(--rule); }
  .perm tr:first-child { border-top: 0; }
  .perm tbody th, .perm tbody td { padding: 0; border: 0; }
  .perm tbody td { margin-top: 10px; }
  .perm tbody td::before { content: attr(data-label); display: block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
  .perm td.mk { display: inline-flex; align-items: center; gap: 8px; text-align: left; margin: 12px 14px 0 0; }
  .perm td.mk::before { order: 2; margin: 0; }
}

.connections { margin-top: clamp(24px, 3vw, 36px); }
.connections ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.connections li { display: flex; gap: 14px; padding: 18px; border: 1px dashed #B9C1D6; border-radius: 12px; background: #FBFCFE; }
.connections .glyph { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--done-tint); color: var(--done-dark); }
.connections h3 { font-size: 1.05rem; line-height: 1.3; font-weight: 700; }
.connections p { margin: 6px 0 0; color: var(--soft); font-size: 16px; line-height: 1.5; }

/* Demonstration: a request record with its activity log */
.demo { border-color: #F3D98A !important; }
.demo .panel-head { background: var(--wait-tint); border-bottom-color: #F3D98A; }
.demo-grid { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 980px) { .demo-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.record { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.record-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--ink); }
.record-bar .field { color: #fff; } .record-bar .field.soft { color: #C9D0E4; }
.log { list-style: none; margin: 0; padding: 22px 18px 8px 22px; }
.log li { position: relative; padding: 0 0 24px 30px; border-left: 2px solid var(--done); }
.log li.exc { border-left: 2px dashed var(--exc); }
.log li:last-child { border-left-color: transparent; padding-bottom: 10px; }
.log li::before { content: ''; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--done); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--done); }
.log li.wait::before { background: var(--wait); box-shadow: 0 0 0 1.5px #C98F0A; }
.log li.exc::before { background: var(--exc); box-shadow: 0 0 0 1.5px var(--exc); }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.log h3 { font-size: 1.1rem; line-height: 1.25; font-weight: 700; }
.actor { display: block; font: 400 13px/1.4 var(--mono); color: var(--faint); margin-top: 6px; }
.log p { margin: 8px 0 0; color: var(--soft); font-size: 16px; line-height: 1.55; }

/* Process: a stepper. Each step names what you keep. Step five is the gate. */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.stepper li { position: relative; padding: 20px 20px 22px; border: 1px solid var(--rule); border-radius: 12px; background: #FBFCFE; border-top: 4px solid var(--done); }
.stepper li.gate { background: var(--wait-tint); border-color: #F3D98A; border-top-color: var(--wait); }
.step-n { display: block; font: 500 13px/1 var(--mono); color: var(--done-dark); margin-bottom: 12px; }
.gate .step-n { color: var(--wait-ink); }
.stepper h3 { font-size: 1.18rem; line-height: 1.25; font-weight: 700; margin-bottom: 14px; }
.stepper .field { display: block; font-size: 11.5px; }
.stepper p { margin: 4px 0 0; color: var(--soft); font-size: 16px; line-height: 1.55; }
.gate p { color: #4D3A0C; }

/* Ownership: a settings list, question left, answer right */
.settings { margin: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.settings > div { display: grid; gap: 6px 28px; padding: 20px clamp(16px, 2vw, 24px); border-top: 1px solid var(--rule-soft); }
.settings > div:first-child { border-top: 0; }
.settings > div:nth-child(even) { background: #FBFCFE; }
.settings dt { font: 700 1.08rem/1.3 var(--display); }
.settings dd { margin: 0; color: var(--soft); max-width: 44rem; }
@media (min-width: 820px) { .settings > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }

/* Checklist: a worksheet with boxes to tick on paper */
.checks { list-style: none; margin: 0; padding: 0; counter-reset: c; max-width: 52rem; }
.checks li { counter-increment: c; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.checks li:first-child { border-top: 0; }
.box { width: 24px; height: 24px; margin-top: 2px; border: 2px solid var(--done); border-radius: 6px; background: var(--panel); }

/* Questions */
.faq { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.faq article { padding: 20px; border: 1px solid var(--rule); border-radius: 12px; }
.faq h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.faq p { margin: 10px 0 0; color: var(--soft); }

/* People */
.people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.person { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--rule); border-radius: 12px; background: #FBFCFE; }
.avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 1.3rem/1 var(--display); }
.person h2, .person h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; margin-bottom: 4px; }
.person p { margin: 12px 0 0; color: var(--soft); font-size: 16px; line-height: 1.58; }

/* Closing panel: a draft request */
.closing { border-color: #C5CCF6 !important; }
.closing-grid { display: grid; gap: 24px; align-items: end; }
.closing-action { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 900px) { .closing-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }

/* Footer */
.foot { border-top: 1px solid var(--rule); background: var(--panel); }
.foot-in { max-width: 1320px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 32px) 40px; display: grid; gap: 22px; }
.foot-brand { display: flex; gap: 12px; align-items: center; }
.foot-brand strong { display: block; font: 700 17px/1.2 var(--display); }
.foot-brand span { display: block; font-size: 15px; color: var(--soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { font-size: 16px; color: var(--soft); padding: 6px 0; }
.foot-legal { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--faint); }
@media (min-width: 900px) { .foot-in { grid-template-columns: auto 1fr; align-items: center; } .foot-links { justify-content: flex-end; } .foot-legal { grid-column: 1 / -1; } }

/* Guide head and the shared trust pages (about, contact, privacy, 404).
   Those pages arrive with the shared class names, so they are styled here as record panels too. */
.stack > section.page-head, .stack > section.flush, .is-page .stack > section { padding-top: var(--pad); }
.stack > section.panel { padding-top: 0; }
.stack > section.panel.article { padding-top: var(--pad); }
.wrap { max-width: none; }
.wrap.narrow, .article .prose { max-width: 46rem; }
.page-head h1, .display.h-xl { font: 800 clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem)/1.08 var(--display); letter-spacing: -.02em; }
.display.h-md { font: 700 1.3rem/1.2 var(--display); }
.chip { display: inline-block; margin-bottom: 16px; padding: 6px 10px; border-radius: 999px; background: var(--done-tint); color: var(--done-dark); }
.person .lbl { display: block; margin-bottom: 8px; }
.person:not(:has(.avatar)) { display: block; }
.mail-row { margin: 26px 0 0; }
.mail { display: inline-block; padding: 14px 18px; border-radius: 10px; background: var(--done-tint); border: 1px solid #C5CCF6; color: var(--done-dark); font: 700 clamp(1.05rem, .9rem + .9vw, 1.35rem)/1.2 var(--display); overflow-wrap: anywhere; }

/* Long-form reading */
.prose { font-size: 17.5px; line-height: 1.68; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height: 1.2; font-weight: 700; margin: 2.2em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--rule-soft); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 1.8em 0 .5em; }
.prose h4 { font: 600 1.05rem/1.3 var(--text); margin: 1.5em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--done); }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 4px solid var(--wait); background: var(--wait-tint); border-radius: 0 10px 10px 0; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.prose code { font: 400 .9em var(--mono); background: var(--canvas); padding: 2px 6px; border-radius: 5px; }
.prose pre { background: var(--canvas); border: 1px solid var(--rule); padding: 16px; border-radius: 10px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--rule); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.table-wrap th { font: 500 12px/1.35 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-align: left; color: var(--soft); background: var(--canvas); padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.table-wrap td { padding: 14px; border-top: 1px solid var(--rule-soft); vertical-align: top; }
.table-wrap tr:first-child td { border-top: 0; }
.table-wrap td:first-child { font-weight: 600; color: var(--ink); }

/* Small screens: keep the app bar to the brand and one button */
@media (max-width: 899px) {
  .appbar-in { flex-wrap: wrap; row-gap: 6px; }
  .appbar-in .btn { margin-left: auto; }
  .crumb { display: none; }
  .appnav { order: 3; flex: 0 0 100%; margin: 0 -6px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .appnav a { padding: 7px 8px; font-size: 14.5px; }
  html { scroll-padding-top: 120px; }
}
@media (max-width: 420px) {
  body { font-size: 16.5px; }
  .brand-name { font-size: 15.5px; }
  .appbar-in { gap: 8px; }
  .btn { width: 100%; }
  .appbar-in .btn { width: auto; padding: 8px 11px; font-size: 14.5px; }
  .pill { white-space: normal; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media print { .appbar, .rail, .foot, .preview-bar { display: none; } .stack > section { box-shadow: none; break-inside: avoid; } }