/* Write85 — Carbon Neon (Light / Pine)
   ----------------------------------------------------------------------------
   A light "engineered console" theme: clean white surfaces, a faint blueprint
   grid, tight corners, monospace utility type for labels/meta, and a single
   deep pine-green accent. Drop-in replacement for the previous Soft Depth CSS;
   every selector name is preserved so no page markup changes are required.

   The whole palette is driven by the :root tokens below. Because both this file
   and the inline nav styles in app.php read these variables, recoloring here
   cascades to the dropdown navigation automatically.
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Core ink + surfaces */
  --ink:#10141a;
  --ink-soft:#33393f;
  --paper:#f3f5f3;       /* app background (with grid overlay) */
  --paper-2:#ffffff;     /* cards, panels, raised surfaces */
  --paper-3:#f5f8f4;     /* insets, hovers, wells */
  --line:#c4ccc2;        /* primary borders — darker so sections read clearly */
  --line-2:#d2d9cf;      /* hairline / inner borders */

  /* Pine accent system */
  --accent:#1f7a4d;
  --accent-hover:#1a6b43;
  --accent-soft:rgba(31,122,77,.10);
  --accent-tint:rgba(31,122,77,.09);
  --accent-line:rgba(31,122,77,.30);
  --accent-glow:rgba(31,122,77,.16);

  --muted:#6a7177;       /* darker so placeholders/meta stay legible */
  --ok:#1f7d4f;
  --err:#b23b3b;

  /* Blueprint grid overlay color */
  --grid:rgba(30,50,25,.045);

  /* Shadows — lighter and cooler than the old warm set */
  --shadow-sm:0 1px 2px rgba(20,40,25,.05);
  --shadow:0 4px 18px rgba(20,40,25,.06);
  --shadow-pop:0 10px 34px rgba(20,40,25,.13);

  /* Tighter, more engineered radii */
  --radius:10px;
  --radius-sm:7px;

  /* Type roles */
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Faint blueprint grid — reads as texture, not noise */
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 38px,var(--grid) 38px,var(--grid) 39px),
    repeating-linear-gradient(90deg,transparent,transparent 38px,var(--grid) 38px,var(--grid) 39px);
}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
h2{font-size:1.6rem;margin:0 0 .25rem}
h3{font-size:1.12rem;margin:0 0 .5rem;font-weight:700}
.hint{color:var(--muted);font-size:.9rem;line-height:1.6;margin:.25rem 0 1rem}

/* ---- Login ---- */
.login-body{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:100vh}
.login-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:2.5rem;width:100%;max-width:390px;position:relative;overflow:hidden
}
/* Pine top-edge bar — the card's high-tech signature */
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-line) 70%,transparent)
}
.brand{text-align:center;margin-bottom:1.5rem}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:13px;
  background:var(--accent);color:#fff;font-weight:800;
  font-size:1.15rem;letter-spacing:-.01em;
  box-shadow:0 6px 18px var(--accent-glow)
}
.brand-mark.sm{width:34px;height:34px;font-size:.85rem;border-radius:9px}
.brand h1{margin:.6rem 0 0;font-size:1.7rem;font-weight:800}
.brand h1.wordmark{font-size:1.9rem}
.tagline{color:var(--muted);margin:.25rem 0 0;font-size:.78rem;font-family:var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
form label{display:block;margin:.9rem 0;font-size:.72rem;color:var(--ink-soft);
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
input,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;margin-top:.3rem;
  transition:border-color .15s, box-shadow .15s
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.oneline{margin:.5rem 0}
.oneline-label{display:block;font-size:.92rem;color:var(--ink-soft)}
.oneline-label .oneline{margin-top:.25rem;width:100%}
.oneline-label textarea{margin-top:.25rem;width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);font-family:inherit;font-size:.95rem;resize:vertical}
textarea{resize:vertical}

button{cursor:pointer;font:inherit;font-family:var(--mono);letter-spacing:.01em;border:none;border-radius:var(--radius-sm);padding:.5rem .95rem;font-size:.82rem;font-weight:600;transition:background .15s, border-color .15s, transform .12s, box-shadow .15s}
.btn-primary{background:var(--accent);color:#fff;width:auto;margin-top:.6rem}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);margin-top:.6rem}
.btn-secondary:hover{background:var(--paper-3);color:var(--ink);border-color:var(--accent-line)}
button:disabled{opacity:.5;cursor:wait}

.alert{padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.9rem;margin-bottom:1rem}
.alert.error{background:#f7e2dc;color:var(--err);border:1px solid #e6b8a9}

/* ---- App chrome ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.5rem;background:var(--paper-2);border-bottom:1px solid var(--line)
}
.topbar-left{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:1rem;font-size:.82rem;font-family:var(--mono)}
.who{color:var(--muted)}
.link{color:var(--accent);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Nav (segmented bar + dropdown groups share these tokens) */
.tabs{
  display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;
  max-width:1100px;margin:1.1rem auto 0;padding:.4rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)
}
.tab{
  background:none;border:none;border-radius:7px;
  padding:.55rem .85rem;color:var(--ink-soft);font-weight:600;font-size:.82rem;
  font-family:var(--mono);letter-spacing:.01em;
  transition:background .15s,color .15s
}
.tab:hover{color:var(--ink);background:var(--paper-3)}
.tab.active{color:#fff;background:var(--accent)}

.wrap{max-width:1100px;margin:0 auto;padding:1.8rem 1.5rem 4rem}
.panel{display:none}
.panel.active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Keep generated written output at a comfortable reading measure */
.output .body{max-width:72ch}
.output .body.md{max-width:72ch}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow);position:relative}
/* Pine left-edge bar — the card signature carried from the mockup */
.card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),transparent)
}
.check{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-soft);margin:.6rem 0;cursor:pointer}
.check input{margin:0;accent-color:var(--accent);width:18px;height:18px}
.research-box{display:flex;flex-direction:column;gap:.2rem;margin:.5rem 0}
.filebtn{display:inline-block;background:var(--paper-3);border:1px dashed var(--line);border-radius:8px;padding:.5rem .85rem;cursor:pointer;font-size:.82rem;font-family:var(--mono);letter-spacing:.02em;width:max-content;margin:.4rem 0;transition:border-color .15s,color .15s}
.filebtn:hover{border-color:var(--accent);color:var(--accent)}
.file-note{font-size:.8rem;color:var(--muted)}

.questions{white-space:pre-wrap;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem;margin:.8rem 0;font-size:.95rem}
.questions:empty{display:none}

.output{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-top:1rem;min-height:1px;font-size:.97rem;box-shadow:var(--shadow)}
.output:empty{display:none}
.output.small{font-size:.88rem}
.output .copybar{display:flex;justify-content:flex-end;gap:.4rem;margin-bottom:.6rem}
.output .copybar button{background:var(--paper-3);color:var(--ink-soft);border:1px solid var(--line);padding:.4rem .8rem;font-size:.76rem;font-weight:600;font-family:var(--mono);letter-spacing:.02em;border-radius:6px}
.output .copybar button:hover{border-color:var(--accent);color:var(--accent)}
.output .body{white-space:pre-wrap}
.output .body.md{white-space:normal}

.tlist{display:flex;flex-direction:column;gap:.5rem}
.titem{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-3)}
.titem .meta{font-size:.76rem;color:var(--muted);font-family:var(--mono)}
.titem.off{opacity:.5}
.titem .acts{display:flex;gap:.4rem}
.titem .acts button{padding:.35rem .7rem;font-size:.76rem;font-family:var(--mono)}
.pill{font-size:.66rem;padding:.16rem .55rem;border-radius:4px;background:var(--paper-3);color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);border:1px solid var(--line)}
.pill.on{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-line)}

.useradd{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.useradd .oneline{margin:0;width:auto;flex:1;min-width:140px}

.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:.4rem}
.spin.spin-dark{border:2px solid var(--accent-line);border-top-color:var(--accent)}
@keyframes sp{to{transform:rotate(360deg)}}
.msg-ok{color:var(--ok)}
.msg-err{color:var(--err)}

/* ---- Write85 wordmark + edition label ---- */
.wordmark{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;color:var(--ink);line-height:1}
.wordmark-num{color:var(--accent)}
.edition{
  margin-left:.7rem;padding-left:.7rem;border-left:1px solid var(--line);
  color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--mono)
}
@media (max-width:560px){
  .edition{display:none}
}

/* ---- Responsive ---- */
@media (max-width:1140px){
  .wrap,.tabs{max-width:none;margin-left:1rem;margin-right:1rem}
}
@media (max-width:700px){
  .topbar{padding:.7rem 1rem;flex-wrap:wrap;gap:.4rem}
  .tabs{margin:.8rem 1rem 0;gap:.15rem;padding:.35rem}
  .tab{padding:.5rem .7rem;font-size:.8rem}
  .menu-trigger{padding:.5rem .75rem;font-size:.8rem}
  .wrap{padding:1.2rem 1rem 3rem}
  h2{font-size:1.4rem}
  .card{padding:1.15rem}
  .chat-msg{max-width:90%}
  .output .body,.output .body.md{max-width:100%}
}
@media (max-width:420px){
  .topbar-right{font-size:.78rem;gap:.6rem}
  .wordmark{font-size:1.15rem}
}

/* Respect reduced-motion preferences — but keep the loading spinner spinning,
   since it's functional progress feedback, not decorative motion. */
@media (prefers-reduced-motion:reduce){
  *:not(.spin){animation-duration:.001ms!important;transition-duration:.001ms!important}
  .spin{animation:sp .7s linear infinite!important}
}

/* Clarifying-questions button always sits on its own line */
button.askq{display:block;margin-top:.6rem}

/* Sales Email deliverability/spam check panel */
.spam-check{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2)}
.spam-check .sc-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.98rem}
.spam-check .sc-verdict{display:inline-block;padding:.15rem .6rem;border-radius:4px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.spam-check .sc-green{background:var(--accent-tint);color:var(--accent)}
.spam-check .sc-yellow{background:#fbecca;color:#7a5818}
.spam-check .sc-red{background:#f4d3cc;color:#7a2419}
.spam-check .sc-list{margin:.4rem 0 .8rem 0;padding:0;list-style:none}
.spam-check .sc-list li{padding:.3rem 0;font-size:.92rem;line-height:1.45;color:var(--ink)}
.spam-check .sc-list li.sc-high{color:#7a2419}
.spam-check .sc-list li.sc-med{color:#6e4f12}
.spam-check .sc-clean{font-size:.92rem;color:var(--ink-soft);margin:.4rem 0 .8rem 0}
.spam-check .sc-actions{margin-top:.4rem}
.spam-check .sc-note{font-size:.85rem;margin-top:.55rem;color:var(--ink-soft)}