/* ==========================================================================
   THRESHOLD — stylesheet
   Prospectorus's no-login founder risk/governance app.

   This is a self-contained static file (no build step, matching how the
   rest of the Prospectorus site is deployed via manual Cloudflare Pages
   upload). The section banners below are just navigation aids for future
   editing -- search for "== " to jump between sections.
   ========================================================================== */


/* ==========================================================================
   BRAND TOKENS
   Duplicated from site/index.html's :root block rather than shared via
   an import, since this is a separate static file with no includes.
   If the brand palette changes, update both places.
   ========================================================================== */
:root{
  --bg:#f4f6f7;
  --card-bg:#f4f6f7;
  --ink:#1c2b3a;
  --ink-muted:#3a4a5a;
  --muted:#6b6a63;
  --red:#9c3b2e;
  --red-text:#9c3b2e;
  --red-text-soft:rgba(156,59,46,0.35);
  --theme-transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;

  /* Threshold-only layout tokens -- not part of the marketing site's palette. */
  --sidebar-w:224px;
  --line:rgba(28,43,58,0.14);
}
[data-theme="dark"]{
  --bg:#1c2b3a;
  --card-bg:#454c56;
  --ink:#eef2f5;
  --ink-muted:#c3c9cf;
  --muted:#aab0b8;
  --red:#9c3b2e;
  --red-text:#e37b69;
  --red-text-soft:rgba(227,123,105,0.4);
  --line:rgba(238,242,245,0.16);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; background:var(--bg); }
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  transition:var(--theme-transition);
}

/* The `hidden` attribute normally sets display:none via the browser's own
   stylesheet, but any of *our* rules that also set `display` on that same
   element (.app{display:flex}, .modal-overlay{display:flex}) have equal
   specificity and, being author rules, win over the browser default --
   so the element stays visible even while `hidden` is true. This single
   override rule always wins regardless of what else targets the element,
   and is the fix for the first-launch modal not disappearing. */
[hidden]{ display:none !important; }


/* ==========================================================================
   REUSED SITE PATTERNS
   corner-mark and theme-toggle are copied verbatim (same class names,
   same structure) from site/index.html so the two products read as one
   family. See that file if these ever need to change in lockstep.
   ========================================================================== */
.corner-mark{
  position:absolute; width:14px; height:14px;
  border:1px solid var(--ink);
  pointer-events:none;
}
.corner-mark.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.corner-mark.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.corner-mark.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.corner-mark.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.theme-toggle{
  position:relative; width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--ink); border-radius:2px;
  cursor:pointer; color:var(--ink); padding:0;
  transition:var(--theme-transition);
}
.theme-toggle:hover{ color:var(--red-text); border-color:var(--red-text); }
.theme-toggle .tt-icon{
  position:absolute; width:15px; height:15px;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
[data-theme="light"] .theme-toggle .tt-sun{ opacity:1; transform:scale(1) rotate(0deg); }
[data-theme="light"] .theme-toggle .tt-moon{ opacity:0; transform:scale(0.5) rotate(-40deg); }
[data-theme="dark"] .theme-toggle .tt-sun{ opacity:0; transform:scale(0.5) rotate(40deg); }
[data-theme="dark"] .theme-toggle .tt-moon{ opacity:1; transform:scale(1) rotate(0deg); }


/* ==========================================================================
   FIRST-LAUNCH MODAL
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:20;
  background:rgba(28,43,58,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal{
  position:relative;
  max-width:440px; width:100%;
  background:var(--card-bg);
  border:1px solid var(--ink);
  padding:36px 34px 30px;
}
.modal-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--red-text); margin-bottom:10px;
}
.modal-title{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:28px; margin-bottom:14px;
}
.modal-copy{
  font-size:14px; line-height:1.6; color:var(--ink-muted); margin-bottom:24px;
}
.modal-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Smaller variant for the reusable delete-confirmation modal -- same
   frame/corner-mark treatment as the first-launch modal, just a shorter
   message and no title, so it doesn't need the full 440px width. */
.modal-sm{ max-width:360px; padding:28px 26px 24px; }
.modal-sm .modal-copy{ margin-bottom:20px; }


/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:var(--sidebar-w); flex:none;
  border-right:1px solid var(--line);
  padding:18px 14px;
  display:flex; flex-direction:column;
  transition:var(--theme-transition);
}
.brand-row{
  display:flex; align-items:center; gap:9px;
  padding-left:2px; margin-bottom:26px;
}
.mark{ width:16px; height:20px; position:relative; flex:none; }
.mark span{ position:absolute; left:2px; width:12px; height:12px; transform:rotate(45deg); border-radius:2px; }
.mark .d1{ top:0; background:var(--red); }
.mark .d2{ top:5px; background:#fff; border:1px solid var(--line); }
.mark .d3{ top:10px; background:var(--ink); }
.wordmark{
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500;
  letter-spacing:0.09em;
}

.nav-label{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted); margin:2px 0 8px 6px;
}
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:9px;
  width:100%; text-align:left;
  font-family:'Inter', sans-serif; font-size:13.5px; color:var(--ink);
  background:none; border:none; border-radius:5px;
  padding:8px 8px; cursor:pointer;
}
.nav-item:hover:not(.locked){ background:rgba(28,43,58,0.06); }
.nav-item.active{ background:rgba(28,43,58,0.08); font-weight:500; }
.nav-item.locked{ color:var(--muted); cursor:default; }
.nav-item .soon{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}

.status-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.status-dot.dot-done{ background:var(--ink); }
.status-dot.dot-progress{ border:1.5px solid var(--red-text); background:transparent; }
.status-dot.dot-empty{ border:1.5px solid var(--line); background:transparent; }

.sidebar-foot{
  margin-top:auto; padding-top:14px;
  display:flex; align-items:center; gap:9px;
}
.sidebar-note{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--muted);
}

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--line);
}
.env-name{
  font-family:'Fraunces', serif; font-weight:600; font-size:19px;
  background:none; border:none; color:var(--ink); padding:0;
  width:100%; max-width:360px;
}
.env-name:focus{ outline:none; border-bottom:1px solid var(--red-text-soft); }
.env-sub{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted);
  margin-top:3px;
}
.topbar-actions{ display:flex; gap:8px; flex-wrap:wrap; flex:none; }

/* Adapted from the marketing site's .cta/.cta-secondary (same oxblood
   bottom-border accent language) but toned down for a dense toolbar --
   the hero buttons are solid full-color blocks, which reads as too loud
   repeated across small utility buttons like "Load"/"Export". */
.tbar-btn{
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:500;
  padding:8px 14px 6px;
  border-bottom:2px solid var(--red);
  cursor:pointer;
  white-space:nowrap;
}
.tbar-btn.secondary{
  background:transparent; color:var(--ink);
  border-top:1px solid var(--line); border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.tbar-btn.secondary:hover{ background:rgba(28,43,58,0.05); }
.tbar-btn.primary{
  background:var(--ink); color:var(--bg);
  border-top:1px solid var(--ink); border-left:1px solid var(--ink); border-right:1px solid var(--ink);
}
.tbar-btn.primary:hover{ opacity:0.9; }

/* Destructive variant for the confirm-delete modal's confirm button --
   solid oxblood rather than navy, so a delete confirmation reads as
   distinct from an ordinary primary action at a glance. */
.tbar-btn.danger{
  background:var(--red); color:#fff;
  border-top:1px solid var(--red); border-left:1px solid var(--red); border-right:1px solid var(--red);
  border-bottom:2px solid var(--ink);
}
.tbar-btn.danger:hover{ opacity:0.9; }


/* ==========================================================================
   MAIN PANEL
   ========================================================================== */
.panelwrap{
  flex:1; padding:22px;
  /* Lightweight stand-in for the marketing site's full topo SVG (~150KB
     inline). Swap in the real .topo SVG (see site/index.html) later for
     full visual parity -- kept simple here on purpose for this first pass. */
  background-image:repeating-linear-gradient(115deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 34px);
  background-size: 100% 100%;
}
.panel{
  position:relative;
  background:var(--card-bg);
  padding:22px 24px 26px;
  min-height:100%;
}
.panel-head{ margin-bottom:16px; }
.panel-title{
  font-family:'Fraunces', serif; font-size:17px; font-weight:600;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.panel-sub{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:400;
  color:var(--muted);
}


/* ---- project definition form -------------------------------------------- */
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
  margin-bottom:22px;
}
.f-field{ display:flex; flex-direction:column; gap:5px; }
.f-field-wide{ grid-column:1 / -1; }
.f-label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted);
}
.f-field input, .f-field textarea{
  font-family:'Inter', sans-serif; font-size:13.5px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:8px 10px; resize:vertical;
  transition:var(--theme-transition);
}
.f-field input:focus, .f-field textarea:focus{ outline:none; border-color:var(--red-text-soft); }

.stake-block{ border-top:1px solid var(--line); padding-top:16px; }
.stake-label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.stake-row{ display:flex; gap:8px; margin-bottom:8px; }
.stake-row input{
  font-family:'Inter', sans-serif; font-size:13px;
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:7px 9px; flex:1; min-width:0;
}
.stake-remove{
  flex:none; width:30px;
  background:none; border:1px solid var(--line); border-radius:3px;
  color:var(--muted); cursor:pointer; font-size:15px;
}
.stake-remove:hover{ color:var(--red-text); border-color:var(--red-text-soft); }
.ghost-add{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--red-text);
  background:none; border:none; cursor:pointer; padding:2px 0;
}
.ghost-add:hover{ text-decoration:underline; }


/* ---- risk mapping table, and its team & ownership sibling -----------------
   .add-team/.team-table are aliases sharing these exact rules with
   .add-risk/.risk-table (comma-joined selectors below) rather than
   duplicating them -- the two modules use the same "mini add-form above a
   table" shape, just with different fields. */
.add-risk, .add-team{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.add-risk input, .add-risk select, .add-team input, .add-team select{
  font-family:'Inter', sans-serif; font-size:13px;
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:7px 9px;
}
.add-risk input[type="text"]#rm-description{ flex:2; min-width:180px; }
.add-risk input[type="text"]#rm-owner{ flex:1; min-width:120px; }
.add-team input[type="text"]#tm-name{ flex:1; min-width:140px; }
.add-team input[type="text"]#tm-role{ flex:1; min-width:120px; }
.add-team input[type="text"]#tm-ownershipArea{ flex:2; min-width:180px; }

.risk-table, .team-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.risk-table th, .team-table th{
  text-align:left;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.04em;
  color:var(--muted); font-weight:500; padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.risk-table td, .team-table td{
  padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle;
}
.risk-table .rid, .team-table .rid{ font-family:'IBM Plex Mono', monospace; color:var(--muted); white-space:nowrap; }
.risk-table td.editable, .team-table td.editable{ min-width:120px; }
.risk-table td.editable:focus, .team-table td.editable:focus{ outline:1px solid var(--red-text-soft); outline-offset:2px; }
.risk-table select, .team-table select{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:4px 6px;
}

.dotscale{ display:inline-flex; gap:3px; cursor:pointer; }
.dotscale .dot{
  width:8px; height:8px; border-radius:50%;
  border:1.3px solid var(--muted);
}
.dotscale .dot.filled{ background:var(--red); border-color:var(--red); }

.row-remove{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px;
}
.row-remove:hover{ color:var(--red-text); }


/* ==========================================================================
   STATUS BAR
   ========================================================================== */
.statusbar{
  display:flex; align-items:center; gap:18px;
  padding:8px 22px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-muted);
}
.sb-item{ display:flex; align-items:center; gap:5px; }
.online-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.online-dot.off{ background:var(--muted); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 760px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--line); }
  .brand-row{ margin-bottom:0; margin-right:12px; }
  .nav-label{ display:none; }
  .nav-list{ flex-direction:row; flex-wrap:wrap; }
  .sidebar-foot{ margin-top:0; margin-left:auto; }
  .form-grid{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; }
}