/* =========================================================
   Zeal Staff Portal — Foundation
   Layered on top of colors_and_type.css.
   The brandbook (p.3) explicitly separates the portal from
   marketing/proposals: "utilitarian tool with its own system."
   This file defines that system.

   Principles:
   - Calm. Warm grey and ink, not orange everywhere.
   - Orange earns its place: state, focus, the Spark, one
     accent at a time per page.
   - Typography carries hierarchy. Not colour, not shadow.
   - Square. No drop shadows in content, ever.
   - Density is fine. Readability is non-negotiable.
   ========================================================= */

:root {
  /* -------- Portal-specific ink & paper --------
     The portal lives on paper (warm white), not on orange.
     Text runs darker than pure black at large sizes — near-
     black "ink" reads calmer on a tool used for hours. */
  --p-paper:        #FAF7F3;   /* app background — warm off-white */
  --p-paper-2:      #F4EEE8;   /* = --zeal-warm-grey-25; panels */
  --p-paper-3:      #EDDDD0;   /* = --zeal-warm-grey-50; rails */
  --p-card:         #FFFFFF;   /* cards sit on paper */

  --p-ink:          #14110E;   /* body text — warm near-black */
  --p-ink-2:        #4A443D;   /* secondary text */
  --p-ink-3:        #7A6F63;   /* tertiary / metadata */
  --p-ink-4:        #A89C8C;   /* placeholder / disabled */

  --p-rule:         #E4D9CC;   /* hairline on paper */
  --p-rule-2:       #D4C7B6;   /* hairline on card */
  --p-rule-strong:  #14110E;   /* editorial 1px rule */

  /* Orange — used as a state colour in the portal, not as wallpaper.
     Digital orange for text; full orange for solid fills. */
  --p-accent:       var(--zeal-orange-digital);  /* #DC3C00 */
  --p-accent-solid: var(--zeal-orange);          /* #FF5800 */
  --p-accent-press: #C93200;
  --p-accent-wash:  #FFF1E8;                     /* very light orange tint */

  /* Purple is the "attention" colour — focus rings, admin mode */
  --p-focus:        var(--zeal-purple);

  /* Functional semantics (muted — we're not a dashboard product).
     Each uses a single hue, text-only where possible. */
  --p-success:      #3F6B2A;  --p-success-wash: #EEF3E4;
  --p-warning:      #8A5A00;  --p-warning-wash: #FBF0D8;
  --p-danger:       #9A0014;  --p-danger-wash:  #F7E2E4;
  --p-info:         #1F4A6B;  --p-info-wash:    #E4EEF5;

  /* Role tints — how we visually indicate who's looking.
     Staff is the default (no tint). Freelancer and Client
     are marked with a very subtle top-bar band, nothing more. */
  --p-role-staff:      transparent;
  --p-role-freelance:  var(--zeal-green);    /* accent green */
  --p-role-client:     var(--zeal-purple);   /* territory */

  /* -------- Portal type scale --------
     Smaller than marketing. Optimised for long reading and
     table density. Ratio ~1.2, body 15px.  */
  --pt-display: 44px;  /* rare — page titles on hero pages only */
  --pt-h1:      32px;
  --pt-h2:      24px;
  --pt-h3:      19px;
  --pt-h4:      16px;
  --pt-body:    15px;
  --pt-small:   13px;
  --pt-micro:   11px;
  --pt-code:    13px;

  --plh-display: 1.05;
  --plh-head:    1.15;
  --plh-body:    1.5;   /* longer than brand — for readability */
  --plh-tight:   1.3;

  /* -------- Spacing (same scale as brand) -------- */
  /* s-1..s-12 already defined in colors_and_type.css */

  /* -------- Radii --------
     Zeal is square. Portal is square except where
     functional UI demands softer edges (inputs, pills). */
  --pr-0: 0;
  --pr-1: 2px;   /* inputs, buttons */
  --pr-2: 4px;   /* cards on warm backgrounds */
  --pr-pill: 999px;

  /* -------- Motion --------
     Confident, quick, no bounce. 120ms most things,
     220ms for anything that traverses more space. */
  --pe-out:  cubic-bezier(.16,1,.3,1);
  --pe-std:  cubic-bezier(.2,.7,.2,1);
  --pd-fast: 120ms;
  --pd-med:  220ms;

  /* -------- Layout -------- */
  --p-nav-w:       240px;   /* sidebar width */
  --p-nav-w-mini:  64px;    /* collapsed */
  --p-topbar-h:    56px;
  --p-content-max: 1200px;
  --p-reading-max: 680px;   /* long-form documentation */
}

/* =========================================================
   Base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--font-std);
  font-size: var(--pt-body);
  line-height: var(--plh-body);
  letter-spacing: 0;
  margin: 0;
}

/* Reset heading sizes — portal uses its own scale, not the brand's display scale */
h1, .p-h1, h2, .p-h2, h3, .p-h3, h4, .p-h4 {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  letter-spacing: -0.015em;
  line-height: var(--plh-head);
  margin: 0;
  color: var(--p-ink);
}
h1, .p-h1 { font-size: var(--pt-h1); letter-spacing: -0.02em; line-height: var(--plh-display); }
h2, .p-h2 { font-size: var(--pt-h2); }
h3, .p-h3 { font-size: var(--pt-h3); font-weight: var(--w-medium); }
h4, .p-h4 { font-size: var(--pt-h4); font-weight: var(--w-medium); }

.p-display {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--pt-display);
  letter-spacing: -0.025em;
  line-height: var(--plh-display);
}

.p-eyebrow {
  font-family: var(--font-cd);
  font-weight: var(--w-medium);
  font-size: var(--pt-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

.p-meta {
  font-family: var(--font-cd);
  font-weight: var(--w-medium);
  font-size: var(--pt-small);
  color: var(--p-ink-3);
  letter-spacing: 0.01em;
}

.p-mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: var(--pt-code);
  letter-spacing: 0;
}

.p-num {
  font-family: var(--font-ex);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

p { margin: 0 0 var(--s-4) 0; max-width: 66ch; }
.p-reading p { max-width: none; line-height: 1.6; font-size: 16px; }

a {
  color: var(--p-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--p-accent) 35%, transparent);
  transition: color var(--pd-fast) var(--pe-std), text-decoration-color var(--pd-fast);
}
a:hover { color: var(--p-accent-press); text-decoration-color: currentColor; }

/* =========================================================
   Focus — purple, offset, never removed
   ========================================================= */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  --_bg: var(--p-ink);
  --_fg: var(--p-card);
  --_bd: var(--p-ink);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ex);
  font-weight: var(--w-medium);
  font-size: var(--pt-small);
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 10px 14px;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--pr-1);
  cursor: pointer;
  transition: background var(--pd-fast) var(--pe-std),
              color var(--pd-fast) var(--pe-std),
              border-color var(--pd-fast);
}
.btn:hover { --_bg: #000; --_bd: #000; }
.btn:active { transform: translateY(0.5px); }

.btn--primary { --_bg: var(--p-accent); --_fg: #fff; --_bd: var(--p-accent); }
.btn--primary:hover { --_bg: var(--p-accent-press); --_bd: var(--p-accent-press); }

.btn--ghost { --_bg: transparent; --_fg: var(--p-ink); --_bd: var(--p-rule-2); }
.btn--ghost:hover { --_bg: var(--p-paper-2); --_bd: var(--p-ink); }

.btn--quiet { --_bg: transparent; --_fg: var(--p-ink-2); --_bd: transparent; padding: 8px 10px; }
.btn--quiet:hover { --_bg: var(--p-paper-2); --_fg: var(--p-ink); }

.btn--sm { padding: 6px 10px; font-size: var(--pt-micro); letter-spacing: 0.04em; }
.btn--lg { padding: 13px 18px; font-size: var(--pt-body); }

.btn--danger { --_bg: transparent; --_fg: var(--p-danger); --_bd: var(--p-danger); }
.btn--danger:hover { --_bg: var(--p-danger); --_fg: #fff; }

/* Square icon button */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; color: var(--p-ink-2);
  border: 1px solid transparent; border-radius: var(--pr-1);
  cursor: pointer; transition: background var(--pd-fast), color var(--pd-fast);
}
.iconbtn:hover { background: var(--p-paper-2); color: var(--p-ink); }
.iconbtn svg { width: 18px; height: 18px; stroke-width: 1.75; }

/* =========================================================
   Inputs
   ========================================================= */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-family: var(--font-std);
  font-weight: var(--w-medium);
  font-size: var(--pt-small);
  color: var(--p-ink);
}
.field__hint {
  font-size: var(--pt-small);
  color: var(--p-ink-3);
  line-height: 1.4;
}

.input, .select, .textarea {
  width: 100%;
  background: var(--p-card);
  color: var(--p-ink);
  font-family: var(--font-std);
  font-size: var(--pt-body);
  line-height: 1.3;
  padding: 10px 12px;
  border: 1px solid var(--p-rule-2);
  border-radius: var(--pr-1);
  transition: border-color var(--pd-fast), background var(--pd-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--p-ink-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--p-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 18%, transparent);
}
.input::placeholder { color: var(--p-ink-4); }

.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.input--search {
  padding-left: 36px;
  background:
    var(--p-card)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6F63' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>")
    no-repeat 12px 50%;
}

/* =========================================================
   Tags / Chips / Badges
   ========================================================= */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-cd);
  font-weight: var(--w-medium);
  font-size: var(--pt-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px 3px 9px;
  border-radius: var(--pr-pill);
  color: var(--p-ink-2);
  background: var(--p-paper-2);
}
.tag--solid   { background: var(--p-ink); color: var(--p-card); }
.tag--accent  { background: var(--p-accent-solid); color: #fff; }
.tag--outline { background: transparent; border: 1px solid var(--p-rule-2); }
.tag--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-std);
  font-size: var(--pt-small);
  font-weight: var(--w-medium);
  color: var(--p-ink-2);
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--p-ink-3);
  flex-shrink: 0;
}
.status--live::before     { background: var(--p-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-success) 18%, transparent); }
.status--planning::before { background: var(--p-info); }
.status--hold::before     { background: var(--p-warning); }
.status--archived::before { background: var(--p-ink-4); }
.status--urgent::before   { background: var(--p-danger); }

/* =========================================================
   Cards — warm-grey-25 surfaces, hairline, no shadow.
   ========================================================= */

.card {
  background: var(--p-card);
  border: 1px solid var(--p-rule);
  border-radius: var(--pr-2);
  padding: var(--s-5);
}
.card--flat {
  background: var(--p-paper-2);
  border: 1px solid transparent;
}
.card--editorial {
  background: var(--p-card);
  border: 0;
  border-top: 1px solid var(--p-rule-strong);
  border-radius: 0;
  padding: var(--s-5) 0 0;
}
.card--orange {
  background: var(--p-accent-wash);
  border: 1px solid color-mix(in srgb, var(--p-accent) 25%, transparent);
}

.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.card__title { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: var(--pt-h4); }

/* =========================================================
   Tables — editorial, tight, rule-driven
   ========================================================= */

.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--pt-body);
}
.table thead th {
  text-align: left;
  font-family: var(--font-cd);
  font-weight: var(--w-medium);
  font-size: var(--pt-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--p-rule-strong);
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--p-rule);
  vertical-align: top;
}
.table tbody tr:hover td { background: var(--p-paper-2); }
.table tbody tr:last-child td { border-bottom: 1px solid var(--p-rule-strong); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-title { font-weight: var(--w-medium); }
.table .cell-sub   { color: var(--p-ink-3); font-size: var(--pt-small); margin-top: 2px; }

/* =========================================================
   States — loading / empty / error
   ========================================================= */

.state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--s-8) var(--s-5);
  color: var(--p-ink-2);
  max-width: 420px; margin: 0 auto;
}
.state__mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--p-rule-2);
  border-radius: var(--pr-1);
  color: var(--p-ink-3);
  margin-bottom: var(--s-4);
}
.state__title { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: var(--pt-h4); color: var(--p-ink); margin-bottom: 4px; }
.state__body  { font-size: var(--pt-body); line-height: 1.5; margin-bottom: var(--s-4); }

/* Skeleton loader — shimmer in warm-grey */
.skeleton {
  background:
    linear-gradient(90deg,
      var(--p-paper-2) 0%,
      var(--p-paper-3) 40%,
      var(--p-paper-2) 80%);
  background-size: 200% 100%;
  animation: sk 1.4s var(--pe-std) infinite;
  border-radius: var(--pr-1);
}
@keyframes sk { to { background-position: -200% 0; } }

/* =========================================================
   Layout primitives
   ========================================================= */

.p-app {
  display: grid;
  grid-template-columns: var(--p-nav-w) 1fr;
  min-height: 100vh;
}

.p-nav {
  background: var(--p-paper);
  border-right: 1px solid var(--p-rule);
  padding: var(--s-4) 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.p-main {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--p-paper);
}

.p-topbar {
  height: var(--p-topbar-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--p-rule);
  background: var(--p-paper);
  position: sticky; top: 0; z-index: 10;
}

.p-content {
  padding: var(--s-6);
  max-width: var(--p-content-max);
  width: 100%;
  margin: 0 auto;
}
.p-content--wide { max-width: none; padding-inline: var(--s-7); }
.p-content--reading { max-width: var(--p-reading-max); }

/* Nav items */
.p-nav__brand {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s-2) var(--s-5) var(--s-5);
}
.p-nav__brand img { width: 22px; height: 22px; }
.p-nav__brand-name {
  font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 15px;
  letter-spacing: -0.01em;
}
.p-nav__brand-sub {
  font-family: var(--font-cd); font-weight: var(--w-medium);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--p-ink-3);
}

.p-nav__section {
  font-family: var(--font-cd);
  font-weight: var(--w-medium);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--p-ink-4);
  padding: var(--s-4) var(--s-5) 6px;
}

.p-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px var(--s-5);
  font-size: var(--pt-body);
  color: var(--p-ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--pd-fast), color var(--pd-fast);
  position: relative;
}
.p-nav__link:hover { background: var(--p-paper-2); color: var(--p-ink); }
.p-nav__link.is-active {
  background: var(--p-paper-2);
  color: var(--p-ink);
  font-weight: var(--w-medium);
  border-left-color: var(--p-accent-solid);
}
.p-nav__link svg { width: 16px; height: 16px; stroke-width: 1.75; color: var(--p-ink-3); flex-shrink: 0; }
.p-nav__link.is-active svg { color: var(--p-ink); }
.p-nav__count {
  margin-left: auto;
  font-family: var(--font-cd); font-weight: var(--w-medium);
  font-size: 11px;
  color: var(--p-ink-3);
}

/* Role indicator bar — the portal's way of saying "you are in X view" */
.p-role-bar {
  height: 3px; width: 100%;
  background: var(--p-role-staff);
}
.p-role-bar[data-role="freelance"] { background: var(--p-role-freelance); }
.p-role-bar[data-role="client"]    { background: var(--p-role-client); }

/* =========================================================
   Utility
   ========================================================= */

.hstack { display: flex; align-items: center; gap: var(--s-3); }
.vstack { display: flex; flex-direction: column; gap: var(--s-3); }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--p-rule); border: 0; margin: 0; }
.divider--strong { background: var(--p-rule-strong); }
.text-ink   { color: var(--p-ink); }
.text-ink-2 { color: var(--p-ink-2); }
.text-ink-3 { color: var(--p-ink-3); }
.text-accent { color: var(--p-accent); }
.lowercase { text-transform: lowercase; }