/* THE RAWK — design system (v3 · Linen palette). Single committed light world by design.
   "Found, not chosen": light is structural; edges are Linseed hairlines, not shadows; no pure white/black anywhere. */

:root {
  /* palette */
  --linen: #FBF7EE;      /* page ground — default state of every screen */
  --willow: #F1EADA;     /* cards, alternating bands, table stripes */
  --linseed: #D7C7A6;    /* rules, borders, input outlines, footers, disabled */
  --oak: #85694A;        /* labels, metadata, icons, secondary — Linen ground only */
  --oak-deep: #7A6044;   /* metadata on Willow (AA-safe on the darker ground) */
  --turf: #55684A;       /* primary action, links, active nav */
  --outfield: #33422C;   /* masthead + one anchoring band per page */
  --cherry: #7C382B;     /* urgency + the single action with a clock (<2% of a screen) */
  --cherry-dark: #C97A66;/* the peak / cherry when it sits on Outfield */
  --ink: #262219;        /* body copy + headings — never pure black */

  /* geometry — edges not shadows */
  --r-btn: 4px; --r-input: 4px; --r-card: 6px; --r-tile: 8px; --r-pill: 999px;
  --hair: 1px solid var(--linseed);
  --shadow-overlay: 0 6px 20px rgba(38, 34, 25, .10); /* overlays ONLY; warm, never rgba(0,0,0) */

  /* type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 52px; --fs-h1: 34px; --fs-h2: 20px; --fs-body: 16px; --fs-sm: 13.5px; --fs-xs: 11.5px;

  /* rhythm */
  --gap: 16px; --pad: 24px; --masthead-h: 56px; --sidebar-w: 232px; --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--linen); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: rgba(85, 104, 74, .18); }

/* ---------- type ---------- */
.display { font-size: clamp(34px, 5vw, var(--fs-display)); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
h1, .h1 { font-size: clamp(26px, 3.4vw, var(--fs-h1)); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.body { font-size: var(--fs-body); line-height: 1.55; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--oak); }
.meta { font-size: var(--fs-sm); color: var(--oak); }         /* on Linen */
.meta-willow { color: var(--oak-deep); }                       /* metadata on Willow */
.tabular, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--oak); }
a { color: var(--turf); text-decoration: none; }
a:hover { color: var(--outfield); }

/* ---------- app chrome ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.masthead {
  height: var(--masthead-h); background: var(--outfield); color: var(--linen);
  display: flex; align-items: center; gap: 18px; padding: 0 20px; position: sticky; top: 0; z-index: 40;
}
.masthead .wordmark { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .12em; font-size: 15px; }
.masthead .divide { width: 1px; height: 22px; background: rgba(251, 247, 238, .22); }
.masthead .ctx { font-size: 13px; color: rgba(251, 247, 238, .82); letter-spacing: .02em; }
.masthead .spacer { flex: 1; }
.masthead .seg { display: inline-flex; background: rgba(251, 247, 238, .1); border-radius: var(--r-btn); padding: 2px; }
.masthead .seg button { background: none; border: 0; color: rgba(251, 247, 238, .7); font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 3px; cursor: pointer; }
.masthead .seg button.on { background: var(--linen); color: var(--outfield); font-weight: 600; }
.wallet-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(251, 247, 238, .28); border-radius: var(--r-pill); padding: 4px 11px 4px 5px; font-size: 12.5px; color: var(--linen); cursor: pointer; }
.wallet-chip .dot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(140deg, var(--cherry-dark), var(--turf)); }
.masthead .m-link { background: none; border: 0; color: rgba(251,247,238,.82); font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 6px; }
.masthead .m-link:hover { color: var(--linen); }

.shell { flex: 1; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } }
.sidebar { position: sticky; top: var(--masthead-h); align-self: start; padding: 22px 16px; border-right: var(--hair); min-height: calc(100vh - var(--masthead-h)); }
.sidebar .lens { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--oak); margin: 0 8px 10px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-btn); color: var(--ink); font-size: 14px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; font-family: inherit; }
.navitem svg { width: 17px; height: 17px; color: var(--oak); flex: none; }
.navitem:hover { background: var(--willow); }
.navitem.on { background: var(--willow); color: var(--turf); font-weight: 600; }
.navitem.on svg { color: var(--turf); }
.navitem .cherry-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cherry); }
.sidebar .lens + nav { margin-bottom: 18px; }

.workspace { padding: 28px clamp(18px, 3vw, 40px) 64px; max-width: var(--maxw); }
.ws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-head .eyebrow { margin-bottom: 8px; display: block; }

/* full-bleed band alternative to a masthead (use ONCE, never with the masthead's twin) */
.band { background: var(--outfield); color: var(--linen); border-radius: var(--r-card); padding: 26px 28px; }
.band .eyebrow { color: var(--cherry-dark); }

/* ---------- buttons ---------- */
.btn { font-family: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-btn); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.btn:focus-visible { outline: none; border-color: var(--turf); box-shadow: 0 0 0 3px var(--linseed); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn-primary { background: var(--turf); color: var(--linen); }        /* Turf leads */
.btn-primary:hover { background: #4a5b41; }
.btn-settle { background: var(--outfield); color: var(--linen); }     /* heavier commitment */
.btn-settle:hover { background: #2b3826; }
.btn-bid { background: var(--cherry); color: var(--linen); }          /* the one action with a clock */
.btn-bid:hover { background: #6b3025; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--linseed); }
.btn-secondary:hover { background: var(--willow); border-color: var(--oak); }
.btn-ghost { background: transparent; color: var(--turf); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--outfield); }
.btn:disabled { background: var(--linseed); color: var(--oak-deep); cursor: default; border-color: transparent; }
.btn.block { width: 100%; justify-content: center; }

/* ---------- inputs ---------- */
.field { display: block; }
.field > label { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--oak); margin-bottom: 6px; }
.input, input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--linen); border: 1px solid var(--linseed); border-radius: var(--r-input);
  padding: 10px 12px; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input::placeholder, input::placeholder { color: var(--oak); opacity: .7; }
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--turf); box-shadow: 0 0 0 3px var(--linseed); }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--oak); }
.input-icon input { padding-left: 34px; }

/* ---------- chips (square, categories) vs pills (round, state) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); background: var(--linen); border: 1px solid var(--linseed); border-radius: 3px; padding: 4px 10px; }
.chip.on { border-color: var(--turf); color: var(--turf); background: rgba(85, 104, 74, .06); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 3px 11px; border: 1px solid var(--linseed); color: var(--ink); background: var(--linen); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oak); }
.pill.live { color: var(--cherry); border-color: rgba(124, 56, 43, .3); } .pill.live .dot { background: var(--cherry); animation: rawkPulse 1.5s ease-in-out infinite; }
.pill.gated .dot { background: var(--oak); }
.pill.settled { color: var(--turf); border-color: rgba(85, 104, 74, .3); } .pill.settled .dot { background: var(--turf); }
.pill.overdue { color: var(--cherry); border-color: rgba(124, 56, 43, .3); } .pill.overdue .dot { background: var(--cherry); }
.pill.paid { color: var(--turf); border-color: rgba(85,104,74,.3); } .pill.paid .dot { background: var(--turf); }

/* trust badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--oak); }
.badge svg { width: 15px; height: 15px; }
.badge.verified { color: var(--turf); }

/* role/status text badge (kept subtle — colour is the third signal) */
.role { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--oak); border: 1px solid var(--linseed); border-radius: 3px; padding: 2px 7px; }

/* ---------- cards, tiles, tables ---------- */
.card { background: var(--willow); border: var(--hair); border-radius: var(--r-card); padding: 20px; }
.card.linen { background: var(--linen); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tile { background: var(--linen); border: var(--hair); border-radius: var(--r-tile); padding: 16px 18px; }
.tile .k { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--oak); }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.tile .v.cherry { color: var(--cherry); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }

.grid { display: grid; gap: var(--gap); }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.table { border: var(--hair); border-radius: var(--r-card); overflow: hidden; background: var(--linen); }
.thead, .trow { display: grid; align-items: center; gap: 12px; padding: 11px 16px; }
.thead { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--oak); background: var(--willow); }
.trow { border-top: var(--hair); font-size: 14px; }
.trow:nth-child(even) { background: rgba(241, 234, 218, .5); } /* warm Willow zebra — never grey */
.trow .nm { font-weight: 600; }
.trow .sub { font-size: 12px; color: var(--oak); }

hr, .rule { border: 0; border-top: var(--hair); margin: 22px 0; }

/* ---------- login splash ---------- */
.splash { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 820px) { .splash { grid-template-columns: 1fr; } .splash-left { display: none; } }
.splash-left { background: var(--outfield); color: var(--linen); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.splash-left .eyebrow { color: var(--cherry-dark); }
.splash-left .lede { font-size: 15px; color: rgba(251, 247, 238, .82); max-width: 42ch; line-height: 1.6; }
.splash-right { padding: clamp(28px, 6vw, 72px); display: flex; align-items: center; justify-content: center; background: var(--linen); }
.splash-form { width: 100%; max-width: 360px; }
.splash-form .field { margin-top: 16px; }
.authmsg { min-height: 18px; font-size: 13px; margin-top: 12px; color: var(--cherry); }
.sso-btns { display: flex; flex-direction: column; gap: 10px; }
.sso-or { text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--oak); margin: 8px 0 2px; }
details.pwd > summary { cursor: pointer; font-size: 13px; color: var(--oak); padding: 8px 0; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--outfield); color: var(--linen); padding: 11px 18px; border-radius: var(--r-btn); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 60; box-shadow: var(--shadow-overlay); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--cherry); }

.empty { padding: 40px; text-align: center; color: var(--oak); }
.loading { padding: 40px; text-align: center; color: var(--oak); font-size: 14px; }

/* ---------- the waveform mark ---------- */
.rawk-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.rawk-mark i { width: 2.5px; background: currentColor; border-radius: 0; display: block; }
.rawk-mark i:nth-child(1){height:38%} .rawk-mark i:nth-child(2){height:62%} .rawk-mark i:nth-child(3){height:48%}
.rawk-mark i:nth-child(4){height:80%} .rawk-mark i:nth-child(5){height:100%; background: var(--cherry);} /* peak = the ball */
.rawk-mark i:nth-child(6){height:72%} .rawk-mark i:nth-child(7){height:54%} .rawk-mark i:nth-child(8){height:66%} .rawk-mark i:nth-child(9){height:44%}
.masthead .rawk-mark i:nth-child(5) { background: var(--cherry-dark); } /* on Outfield the peak lightens */

/* equaliser (live-bid surfaces only) */
.equaliser { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.equaliser i { width: 3px; background: var(--turf); display: block; }
.equaliser i:nth-child(odd) { animation: eq 1s ease-in-out infinite; }
.equaliser i:nth-child(even) { animation: eq 1.3s ease-in-out infinite; }

@keyframes rawkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .pill.live .dot, .equaliser i { animation: none; } .btn, .input { transition: none; } }

/* ---------- account / security console ---------- */
.acct-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 720px; }
.acct-sec { border: var(--hair); border-radius: var(--r-card); background: var(--willow); padding: 20px 22px; }
.acct-sec > h2 { font-size: var(--fs-h2); font-weight: 600; margin: 0; }
.acct-sec > .meta { margin-top: 4px; }
.acct-sec .sec-body { margin-top: 16px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: var(--hair); }
.acct-row:first-child { border-top: none; }
.acct-row .k { font-size: var(--fs-sm); color: var(--oak-deep); }
.acct-row .v { font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: .02em; word-break: break-all; }
.keybox { background: var(--linen); border: var(--hair); border-radius: var(--r-input); padding: 12px 14px; margin: 10px 0; }
.reccodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; background: var(--linen); border: var(--hair); border-radius: var(--r-input); padding: 14px 16px; }
.reccodes span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ink); }
.acct-field { display: block; margin-bottom: 12px; }
.acct-field > span { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--oak); margin-bottom: 6px; }
.acct-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.state-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }
.state-dot.on { background: var(--turf); } .state-dot.off { background: var(--linseed); } .state-dot.warn { background: var(--cherry); }

/* inline icon sizing — headings + buttons carry raw <svg> with only a viewBox */
.acct-sec h2 svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--oak); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- deal room ---------- */
.room-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 18px; align-items: start; }
.room-grid .room-main { grid-column: 1; } .room-grid .room-side { grid-column: 2; }
@media (max-width: 900px) { .room-grid { grid-template-columns: 1fr; } .room-grid .room-main, .room-grid .room-side { grid-column: 1; } }
.ms-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: var(--hair); }
.ms-row:first-child { border-top: none; }
.ms-edit { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ms-edit .ms-label { flex: 1; }
.paid-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--turf); font-weight: 600; font-size: 15px; }
.paid-badge svg { width: 18px; height: 18px; }
.room-side .chip { border: var(--hair); }