/* ==========================================================================
   Maslow Secure Room — Phase 1 visual system
   Ported from docs/dataroom-handoff/source/Maslow Data Room.dc.html
   Palette per D11: ink #1B2454 · pink #EE7BE4 · lavender-white. No dark mode.
   Type: Figtree (UI) · Newsreader italic (accents only) · JetBrains Mono (labels/ids)
   ========================================================================== */

:root {
  --ink:        #1B2454;   /* primary text, headings, borders */
  --ink-2:      #2A3572;
  --ink-3:      #3A4070;
  --muted:      #5B6190;   /* secondary text */
  --muted-2:    #8B90B5;
  --muted-3:    #9CA0C2;   /* placeholders, meta */
  --hairline:   #E4E5F3;   /* every border in the room */
  --hairline-2: #B9BDDC;
  --bg:         #F3F3FB;   /* page */
  --bg-2:       #EFEFF8;
  --bg-3:       #F6F6FB;
  --surface:    #FFFFFF;
  --pink:       #EE7BE4;   /* brand accent */
  --pink-deep:  #D14EC6;   /* accent text on white */
  --pink-soft:  #FBE6F9;   /* avatar / chip fills */
  --pink-2:     #F49BEC;
  --green:      #17864E;   /* live / success */
  --green-soft: #E1F3E9;
  --blue:       #3B5BDB;

  --r-sm: 7px;  --r:    10px;  --r-lg: 12px;
  --r-xl: 18px; --r-pill: 999px;

  --shadow:    0 1px 2px rgba(28,36,85,.05);
  --shadow-lg: 0 12px 40px rgba(28,36,85,.14);

  --shell: 1320px;
  --gutter: 28px;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--pink-deep); }
input, textarea, select, button { font-family: var(--sans); font-size: inherit; }
::placeholder { color: var(--muted-3); }
img { max-width: 100%; display: block; }

/* --- motion --------------------------------------------------------------- */
@keyframes pulse   { 0%{box-shadow:0 0 0 0 rgba(23,134,78,.45);} 70%{box-shadow:0 0 0 7px rgba(23,134,78,0);} 100%{box-shadow:0 0 0 0 rgba(23,134,78,0);} }
@keyframes drawerIn{ from{transform:translateX(24px);opacity:0;} to{transform:none;opacity:1;} }
@keyframes fadeUp  { from{transform:translateY(10px);opacity:0;} to{transform:none;opacity:1;} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- typographic primitives ---------------------------------------------- */
.mono      { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.mono-sm   { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.mono-xs   { font-family: var(--mono); font-size: 9px;  letter-spacing: .1em; font-weight: 600; }
.eyebrow   { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--pink-deep); text-transform: uppercase; }
.accent    { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--muted); }

h1, .h1 { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
h2, .h2 { font-size: 17px; font-weight: 800; margin: 0; }
h3, .h3 { font-size: 15px; font-weight: 700; margin: 0; }
.sub    { color: var(--muted); font-size: 14px; line-height: 1.6; }
.meta   { color: var(--muted-3); font-size: 12.5px; }

/* --- the wordmark --------------------------------------------------------- */
.wordmark { font-size: 23px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.wordmark::after { content: "."; color: var(--pink); }
.wordmark-lg { font-size: 30px; }

/* --- app shell ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  height: 62px; display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.room-tag {
  border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 2px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; white-space: nowrap;
}
.nav { flex: 1; display: flex; gap: 4px; justify-content: center; }
.nav a {
  padding: 8px 15px; border-radius: var(--r); font-size: 14.5px; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.nav a:hover { background: var(--bg); color: var(--ink); }
.nav a.is-active { font-weight: 800; color: var(--ink); background: #ECECF7; }

.icon-btn {
  position: relative; width: 38px; height: 38px; border: 1.5px solid var(--hairline);
  border-radius: var(--r); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { border-color: var(--hairline-2); }
.badge {
  position: absolute; top: -5px; right: -5px; background: var(--pink); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 9px; padding: 1px 5px; border: 2px solid #fff;
}
.searchbox {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--hairline);
  border-radius: var(--r); padding: 7px 12px; color: var(--muted-3); font-size: 13px;
  cursor: pointer; background: var(--surface);
}
.searchbox:hover { border-color: var(--hairline-2); }
.searchbox kbd {
  font-family: var(--mono); font-size: 10px; border: 1px solid var(--hairline);
  border-radius: 5px; padding: 1px 5px;
}
.who { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--pink-soft);
  color: var(--pink-deep); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.who-name { font-size: 14px; font-weight: 600; }

/* --- page ----------------------------------------------------------------- */
.page { max-width: var(--shell); margin: 0 auto; padding: 40px var(--gutter) 90px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.live-chip {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 9px 14px; font-size: 13px; color: var(--muted);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }

.cols { margin-top: 28px; display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.stack { display: grid; gap: 20px; }

/* --- card ----------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card + .card { margin-top: 0; }
.card-tight { padding: 18px; }

/* --- lists ---------------------------------------------------------------- */
.rows { margin-top: 14px; display: grid; gap: 4px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: var(--r); cursor: pointer;
}
.row:hover { background: var(--bg-3); }
.row-title { font-weight: 600; font-size: 14.5px; }
.row-meta { margin-left: auto; color: var(--muted-3); font-size: 12.5px; white-space: nowrap; }

/* --- chips / pills -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; font-weight: 600;
  border: 1.5px solid var(--hairline); border-radius: var(--r-sm);
  padding: 4px 9px; color: var(--muted); background: var(--surface);
}
.chip-new  { color: var(--pink-deep); background: var(--pink-soft); border-color: #F2C7EE; }
.chip-live { color: var(--green);     background: var(--green-soft); border-color: #C6E6D4; }

/* --- progress ------------------------------------------------------------- */
.bar { height: 6px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--pink); }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 10px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--hairline-2); color: var(--ink); }
.btn-pink { background: var(--pink); border-color: var(--pink); }
.btn-pink:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn-sm { padding: 7px 13px; font-size: 13px; }

/* --- forms ---------------------------------------------------------------- */
.field { display: block; width: 100%; border: 1.5px solid var(--hairline); border-radius: var(--r);
         padding: 11px 13px; font-size: 14.5px; color: var(--ink); background: var(--surface); }
.field:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(238,123,228,.16); }
.label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* --- login (split screen) -------------------------------------------------- */
.login { display: flex; min-height: 100vh; }
.login-brand {
  flex: 0 0 46%; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 64px; position: relative; overflow: hidden;
}
.login-brand .mono { color: var(--pink); }
.login-h1 { font-size: 52px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
.login-h1 .accent { color: var(--pink); font-size: .82em; }
.login-sub { margin-top: 22px; font-size: 16px; color: var(--hairline-2); max-width: 44ch; line-height: 1.6; }
.login-foot { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #6A70A0; }
.login-orb {
  position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,123,228,.16), transparent 70%);
}
.login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-form-inner { width: 400px; }

/* --- flash ---------------------------------------------------------------- */
.flash { border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.flash-ok  { background: var(--green-soft); border-color: #C6E6D4; color: #0F5C36; }
.flash-err { background: #FDEBEE; border-color: #F5C7CF; color: #8A1B33; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --gutter: 16px; }
  .topbar-inner { height: 56px; gap: 12px; }
  .nav { display: none; }
  .searchbox span:first-child, .who-name { display: none; }
  h1, .h1 { font-size: 28px; }
  .page { padding: 24px var(--gutter) 72px; }
  .login { flex-direction: column; }
  .login-brand { flex: none; padding: 32px 24px; }
  .login-h1 { font-size: 34px; }
  .login-form-inner { width: 100%; }
}

/* --- print ---------------------------------------------------------------- */
@media print {
  .topbar, .nav, .icon-btn, .searchbox, .btn { display: none !important; }
  body { background: #fff; }
  .card { border: 1px solid #ccc; box-shadow: none; }
}

/* --- Q&A (DR-SPEC §4.5) ---------------------------------------------------- */
.chip.qa-open { color:#8A5A00; background:#FFF6E3; border-color:#F0DCB0; }
.chip.qa-pub  { color:var(--blue); background:#E9EDFB; border-color:#C9D4F4; }
.qa-answer {
  margin-top: 14px; padding: 12px 16px;
  border-left: 3px solid var(--pink);
  background: var(--bg-3); border-radius: 0 var(--r) var(--r) 0;
  font-size: 14.5px;
}
textarea.field { resize: vertical; min-height: 96px; line-height: 1.55; }
select.field { appearance: none; background-image: none; }
.chip.qa-late { color:#A01020; background:#FFF1F3; border-color:#F0B8C4; }