/* Preekie Brand System v1.1 -- tokens copied verbatim from
   assets/brand/DESIGN-TOKENS.md. Do not hand-edit a value here; if a
   token changes, re-copy it from that file. Everything below the first
   :root block is this console's own composition, built only from these
   custom properties -- no new hex values anywhere in this file. */
:root{
  /* Brand */
  --pk-ink:          #12151C;
  --pk-coral:        #FF5A3C;  /* Coral Core: fills, one accent */
  --pk-coral-deep:   #B8341A;  /* coral as text on light grounds */
  --pk-coral-light:  #FFE7E0;  /* tints, highlight panels */

  /* Neutrals */
  --pk-graphite: #5A6272;
  --pk-line:     #DDE1E8;
  --pk-cloud:    #F5F7FA;
  --pk-white:    #FFFFFF;

  /* Status: text on its own ground */
  --pk-status-prepared-text: #1F3FA8;  --pk-status-prepared-bg: #E3EAFF;
  --pk-status-review-text:   #8A5A00;  --pk-status-review-bg:   #FDF1D8;
  --pk-status-approved-text: #0B6B50;  --pk-status-approved-bg: #DDF3EA;
  --pk-status-exception-text:#A3212B;  --pk-status-exception-bg:#FBE3E5;
  --pk-status-lodged-text:   #12151C;  --pk-status-lodged-bg:   #F5F7FA;

  /* Semantic aliases */
  --pk-text:         var(--pk-ink);
  --pk-text-muted:   var(--pk-graphite);
  --pk-text-invert:  var(--pk-white);
  --pk-text-invert-muted: var(--pk-cloud);
  --pk-bg:           var(--pk-white);
  --pk-bg-quiet:     var(--pk-cloud);
  --pk-bg-dark:      var(--pk-ink);
  --pk-accent:       var(--pk-coral);
  --pk-accent-text:  var(--pk-coral-deep);
  --pk-border:       var(--pk-line);
  --pk-button-bg:    var(--pk-ink);
  --pk-button-text:  var(--pk-white);

  /* Type */
  --pk-font:      'DM Sans', 'Segoe UI', Arial, sans-serif;
  --pk-font-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* Spacing (8 px base) */
  --pk-space-1: 4px;  --pk-space-2: 8px;  --pk-space-3: 12px; --pk-space-4: 16px;
  --pk-space-5: 24px; --pk-space-6: 32px; --pk-space-7: 48px; --pk-space-8: 64px;
  --pk-space-9: 96px; --pk-space-10: 112px;

  /* Radius */
  --pk-radius-sm: 8px;  --pk-radius-md: 14px; --pk-radius-lg: 20px;
  --pk-radius-xl: 28px; --pk-radius-pill: 999px;
}

/* Brand fonts, self-hosted (assets/brand/fonts/, SIL OFL 1.1) -- the
   console loads nothing from a third party (ZAP Z-1). DM Sans is one
   variable font for every weight; DM Mono is 400 and 500 (no bold). */
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/brand/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/brand/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/brand/fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/brand/fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/brand/fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/brand/fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Base styles, from DESIGN-TOKENS.md */
body{ margin:0; background:var(--pk-bg); color:var(--pk-text);
      font-family:var(--pk-font); font-size:16px; line-height:1.55; }
h1,h2,h3{ font-family:var(--pk-font); font-weight:700; margin:0; }
h3{ font-size:clamp(18px,1.6vw,22px); line-height:1.3; letter-spacing:-.015em; }
.label{ font-size:15px; font-weight:600; color:var(--pk-accent-text); }
.muted{ color:var(--pk-text-muted); }
.figure{ font-family:var(--pk-font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.btn{ border-radius:var(--pk-radius-pill); padding:10px 20px; font-weight:600; border:0;
      font-family:var(--pk-font); font-size:14px; cursor:pointer; }
.btn-primary{ background:var(--pk-ink); color:var(--pk-white); }
.btn-outline{ background:transparent; border:1px solid var(--pk-line); color:var(--pk-ink); }
.status{ border-radius:var(--pk-radius-pill); padding:4px 12px; font-size:13px; font-weight:500;
         display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Focus: 2px Ink outline, 2px white offset (PRODUCT-UI.md s.7) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pk-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--pk-white);
}

/* ---- Console layout ---- */

.pk-app{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }

.pk-rail{ background:var(--pk-white); border-right:1px solid var(--pk-border);
          padding:var(--pk-space-4); display:flex; flex-direction:column; gap:var(--pk-space-6); }
.pk-rail-icon{ width:32px; height:32px; }
.pk-rail-nav{ display:flex; flex-direction:column; gap:var(--pk-space-1); }
.pk-rail-link{ display:flex; align-items:center; justify-content:space-between; gap:var(--pk-space-2);
                padding:9px 14px; border-radius:var(--pk-radius-pill); color:var(--pk-ink);
                text-decoration:none; font-weight:500; font-size:15px; background:none; border:0;
                cursor:pointer; text-align:left; font-family:var(--pk-font); width:100%; }
.pk-rail-link:hover{ background:var(--pk-bg-quiet); }
.pk-rail-link[aria-current="page"]{ background:var(--pk-bg-quiet); color:var(--pk-ink); font-weight:600; }

/* The approvals-equivalent count is the one place coral may appear
   (PRODUCT-UI.md s.2) -- the Needs-you badge, and only while its count
   is above zero. Nowhere else in this console uses coral. */
.pk-count-badge{ background:var(--pk-coral); color:var(--pk-ink); font-family:var(--pk-font-mono);
                  font-size:12px; font-weight:500; border-radius:var(--pk-radius-pill);
                  padding:2px 8px; min-width:20px; text-align:center; }

.pk-main{ padding:var(--pk-space-6); display:grid; grid-template-columns:1fr 380px; gap:var(--pk-space-6);
           align-items:start; }
.pk-content{ min-width:0; }
.pk-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--pk-space-5); }

.pk-group{ margin-bottom:var(--pk-space-6); }
.pk-group-title{ font-size:14px; font-weight:600; color:var(--pk-text-muted); text-transform:none;
                  margin-bottom:var(--pk-space-3); }
.pk-empty{ color:var(--pk-text-muted); font-size:14px; padding:var(--pk-space-3) 0; }

.pk-card{ background:var(--pk-white); border:1px solid var(--pk-border); border-radius:var(--pk-radius-md);
           padding:var(--pk-space-4); margin-bottom:var(--pk-space-3); cursor:pointer;
           display:flex; flex-direction:column; gap:var(--pk-space-2); }
.pk-card:hover{ background:var(--pk-bg-quiet); }
.pk-card[aria-current="true"]{ border-color:var(--pk-ink); }
.pk-card-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--pk-space-3); }
.pk-card-title{ font-weight:600; font-size:15px; }
.pk-card-sub{ font-size:13px; color:var(--pk-text-muted); }
.pk-card-reasoning{ font-size:13px; color:var(--pk-text-muted); }
.pk-card-deadline{ font-size:13px; }

.pk-table{ width:100%; border-collapse:collapse; }
.pk-table thead th{ background:var(--pk-bg-quiet); color:var(--pk-text-muted); text-align:left;
                     font-size:13px; font-weight:500; padding:var(--pk-space-2) var(--pk-space-3); }
.pk-table thead th.pk-num{ text-align:right; }
.pk-table-caption{ font-weight:400; font-size:11px; color:var(--pk-text-muted); margin-top:2px; }
.pk-table tbody td{ border-top:1px solid var(--pk-border); padding:var(--pk-space-3); font-size:14px; }
.pk-table tbody td.pk-num{ text-align:right; }
.pk-table tbody tr{ cursor:pointer; }
.pk-table tbody tr:hover{ background:var(--pk-bg-quiet); }

.pk-detail{ background:var(--pk-white); border:1px solid var(--pk-border); border-radius:var(--pk-radius-lg);
             padding:var(--pk-space-5); position:sticky; top:var(--pk-space-6); }
.pk-detail-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--pk-space-3);
                 padding:var(--pk-space-2) 0; border-top:1px solid var(--pk-border); }
.pk-detail-row:first-of-type{ border-top:0; }
.pk-detail-label{ font-size:13px; color:var(--pk-text-muted); }
.pk-detail-value{ font-family:var(--pk-font-mono); font-weight:500; font-variant-numeric:tabular-nums;
                    text-align:right; }
.pk-detail-caption{ font-size:11px; text-align:right; margin-top:-6px; padding-bottom:var(--pk-space-2); }

/* Severity: label AND colour together, never colour alone (PRODUCT-UI.md
   s.3, s.7). Reuses the brand's existing status colour pairs -- no new
   hex values are introduced for severity. */
.pk-severity-exception{ color:var(--pk-status-exception-text); background:var(--pk-status-exception-bg); }
.pk-severity-review{    color:var(--pk-status-review-text);    background:var(--pk-status-review-bg); }
.pk-severity-neutral{   color:var(--pk-ink);                   background:var(--pk-bg-quiet); }

/* ---- Closed beta: settings, destructive actions, alerts, feedback ---- */

/* Targets at least 44 x 44 px (PRODUCT-UI.md s.7). */
.btn{ min-height:44px; }
.btn:disabled{ cursor:default; opacity:.6; }

/* Destructive: White, Exception text and border -- always confirmed
   (PRODUCT-UI.md s.4). Reuses the Exception status pair; no new hex. */
.btn-destructive{ background:var(--pk-white); color:var(--pk-status-exception-text);
                   border:1px solid var(--pk-status-exception-text); }
.btn-destructive:hover:not(:disabled){ background:var(--pk-status-exception-bg); }

.pk-rail-footer{ margin-top:auto; }
.pk-rail-footer .pk-rail-link[aria-current="true"]{ background:var(--pk-bg-quiet); font-weight:600; }

.pk-section-title{ font-size:18px; line-height:1.3; }
.pk-section-intro{ font-size:14px; margin:var(--pk-space-2) 0 var(--pk-space-4); }
.pk-checked-at{ font-size:13px; margin:0 0 var(--pk-space-3); }

.pk-table-static tbody tr{ cursor:default; }
.pk-table-static tbody tr:hover{ background:none; }
.pk-table tbody tr[aria-current="true"]{ background:var(--pk-bg-quiet); }
.pk-table tbody td{ vertical-align:top; }
.pk-action-cell{ text-align:right; white-space:nowrap; }
.pk-connection-state{ display:flex; align-items:center; gap:var(--pk-space-2); }

/* Errors: what happened and what to do, in the Exception pair. */
.pk-alert{ color:var(--pk-status-exception-text); background:var(--pk-status-exception-bg);
            border-radius:var(--pk-radius-sm); padding:var(--pk-space-3) var(--pk-space-4);
            font-size:14px; margin:var(--pk-space-3) 0; }
/* Confirmations of what Preekie just did: quiet, Ink on Cloud. */
.pk-notice{ color:var(--pk-ink); background:var(--pk-bg-quiet); border-radius:var(--pk-radius-sm);
             padding:var(--pk-space-3) var(--pk-space-4); font-size:14px; margin:var(--pk-space-3) 0; }

.pk-actions{ display:flex; flex-wrap:wrap; gap:var(--pk-space-3); margin-top:var(--pk-space-4); }

.pk-feedback{ display:flex; flex-direction:column; gap:var(--pk-space-2); }
.pk-field{ display:flex; flex-direction:column; gap:var(--pk-space-1); margin-top:var(--pk-space-2); }
.pk-field label{ font-size:14px; font-weight:500; }
.pk-field textarea{ font-family:var(--pk-font); font-size:14px; line-height:1.5; color:var(--pk-text);
                     border:1px solid var(--pk-border); border-radius:var(--pk-radius-sm);
                     padding:var(--pk-space-2) var(--pk-space-3); resize:vertical; }
.pk-field textarea:focus-visible{ outline:2px solid var(--pk-ink); outline-offset:2px; }

/* ---- Sign-in (decision 0025) ----
   Built only from the tokens above. The wordmark appears here and
   nowhere else in the product (PRODUCT-UI.md). Errors use the Exception
   status pair, never coral -- coral stays out of these screens entirely. */
[hidden]{ display:none !important; }
.pk-auth{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:var(--pk-space-5); padding:var(--pk-space-5); background:var(--pk-bg-quiet); box-sizing:border-box; }
.pk-auth-card{ width:100%; max-width:420px; box-sizing:border-box; background:var(--pk-white);
               border:1px solid var(--pk-border); border-radius:var(--pk-radius-lg); padding:var(--pk-space-6);
               display:flex; flex-direction:column; gap:var(--pk-space-4); }
.pk-auth-wordmark{ height:32px; width:auto; align-self:flex-start; }
.pk-auth-heading{ font-size:22px; line-height:1.3; }
.pk-auth-heading:focus{ outline:none; }
.pk-auth-lead{ margin:0; font-size:14px; line-height:1.5; color:var(--pk-text-muted); }
.pk-auth-form{ display:flex; flex-direction:column; gap:var(--pk-space-2); }
.pk-auth-label{ font-size:14px; font-weight:600; margin-top:var(--pk-space-2); }
.pk-auth-input{ min-height:44px; box-sizing:border-box; padding:0 var(--pk-space-3); font-family:var(--pk-font);
                font-size:16px; color:var(--pk-text); background:var(--pk-white);
                border:1px solid var(--pk-border); border-radius:var(--pk-radius-sm); }
.pk-auth-input:focus-visible{ outline:2px solid var(--pk-ink); outline-offset:2px; box-shadow:0 0 0 4px var(--pk-white); }
.pk-auth-submit{ min-height:44px; margin-top:var(--pk-space-4); }
.pk-auth-submit:disabled{ cursor:progress; }
.pk-auth-error{ margin:0; padding:var(--pk-space-3); font-size:14px; border-radius:var(--pk-radius-sm);
                color:var(--pk-status-exception-text); background:var(--pk-status-exception-bg); }
.pk-auth-secret{ margin:0; padding:var(--pk-space-3); font-size:16px; letter-spacing:.04em; word-break:break-all;
                 background:var(--pk-bg-quiet); border-radius:var(--pk-radius-sm); }
.pk-auth-link{ font-size:14px; color:var(--pk-ink); min-height:44px; display:inline-flex; align-items:center; }
.pk-auth-footer{ margin:0; font-size:12px; color:var(--pk-text-muted); }

/* .pk-rail-footer comes from the closed-beta block above. */
.pk-rail-signout{ min-height:44px; width:100%; }
/* Refresh errors (e.g. a reset Demo Company) use .pk-alert above --
   several clients' messages stack as paragraphs. */
.pk-alert p{ margin:0; }
.pk-alert p + p{ margin-top:var(--pk-space-2); }

/* ---- Sign-in UX batch (2026-09-29) ---- */

/* The rail stays exactly one viewport tall and scrolls on its own if it
   ever overflows, so its footer (Send feedback, the account, Sign out)
   is always fully in view -- it used to sit at the bottom of the page
   and get clipped below the fold on long views. */
.pk-rail{ position:sticky; top:0; height:100vh; overflow-y:auto; box-sizing:border-box; }

.pk-rail-account{ margin:var(--pk-space-2) 0 0; padding:0 14px; font-size:13px; line-height:1.4;
                  display:flex; flex-direction:column; gap:2px; }
.pk-rail-account-label{ color:var(--pk-text-muted); }
.pk-rail-account-email{ color:var(--pk-ink); overflow-wrap:break-word; }

.pk-header-actions{ display:flex; align-items:center; gap:var(--pk-space-4); }
.pk-last-checked{ font-size:13px; color:var(--pk-text-muted); }

.pk-next-step{ font-size:13px; margin:var(--pk-space-1) 0 0; color:var(--pk-ink); }
.pk-next-step-label{ font-weight:600; }

/* Authenticator setup. The QR's modules take the brand Ink via CSS
   (the server's SVG has no colour or style of its own worth keeping),
   on a white ground with the quiet zone segno already includes. */
.pk-auth-qr{ margin:var(--pk-space-4) auto; width:208px; max-width:100%; background:var(--pk-white);
             border:1px solid var(--pk-border); border-radius:var(--pk-radius-sm); padding:var(--pk-space-2); }
.pk-auth-qr-svg{ display:block; width:100%; height:auto; }
.pk-auth-qr-svg path{ stroke:var(--pk-ink); }
.pk-auth-note{ font-size:14px; color:var(--pk-text-muted); margin:var(--pk-space-2) 0; }
.pk-auth-open-app{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
                   width:100%; box-sizing:border-box; text-decoration:none; margin:var(--pk-space-2) 0; }
.pk-auth-manual{ margin:var(--pk-space-3) 0; }
/* list-item keeps the native disclosure marker (the cue that it opens);
   padding gives the 44 px target. */
.pk-auth-manual-summary{ display:list-item; min-height:44px; box-sizing:border-box; padding:12px 0;
                         cursor:pointer; font-weight:500; }
.pk-auth-copy{ min-height:44px; }
.pk-auth-copied{ display:block; font-size:13px; color:var(--pk-text-muted); margin-top:var(--pk-space-1); min-height:1em; }