/* ==========================================================================
   NEXTBOLT — FORGED TORSION, application shell
   Onboarding, client portal, admin console.

   Deliberately standalone rather than layered on nb.css: the app pages share
   class names with the marketing page (.msg, .pill, .card) that mean different
   things, so they get their own closed stylesheet on the same tokens.

   Class names are the contract with the page scripts — every selector here
   already exists in the markup. Nothing was renamed.

   Sections
     01 TOKENS   02 RESET    03 CHROME   04 CONTROLS   05 FIELDS
     06 CARDS    07 AUTH     08 ONBOARDING   09 PORTAL   10 ADMIN
     11 RESPONSIVE
   ========================================================================== */

@import url("fonts.css");

/* ---------- 01 TOKENS ---------------------------------------------------- */
:root {
  --ink:      #0E1330;
  --void:     #080B1C;
  --steel:    #29324E;
  --concrete: #9AA2B1;
  --bone:     #F3EFE7;
  --blaze:    #E8641E;
  --ember:    #BF3D0A;
  --flare:    #F7862F;
  --amber:    #F4A62A;
  --alert:    #E5484D;

  --forged: linear-gradient(135deg, var(--ember) 0%, var(--blaze) 52%, var(--flare) 100%);

  --pan:         #121838;
  --rule:        rgba(243, 239, 231, .14);
  --rule-strong: rgba(243, 239, 231, .30);
  --rule-blaze:  rgba(232, 100, 30, .42);
  --field:       rgba(243, 239, 231, .04);

  --f-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-tech:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --f-body:    "Work Sans", system-ui, -apple-system, sans-serif;
  --f-mark:    "Big Shoulders", "Arial Narrow", sans-serif;

  /* Legacy aliases. A few inline styles in the markup still name the old
     palette; mapping them keeps every surface on-brand without hunting
     down each attribute. */
  --bg:        var(--ink);
  --panel:     var(--pan);
  --panel2:    rgba(243, 239, 231, .03);
  --line:      var(--rule);
  --line2:     var(--rule-strong);
  --muted:     var(--concrete);
  --dim:       #7A8398;
  --green:     var(--blaze);
  --green-ink: var(--void);

  --u: 8px;
  --bar: 62px;
  --t: .18s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 02 RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--flare); text-decoration: none; }
a:hover { color: var(--blaze); }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--f-display); font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
}
h1 span, h2 span { color: var(--blaze); }

::selection { background: var(--blaze); color: var(--void); }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }

/* Same scrollbar treatment as the marketing page — see nb.css. The app pages
   have more scrollers than the site does (message log, admin tables), so a
   native white bar shows up more often here, not less. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--void);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--steel);
  border: 1px solid var(--rule);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--blaze); }
::-webkit-scrollbar-corner { background: var(--void); }

.hide { display: none !important; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 34px); }
.spacer { flex: 1; }

/* ---------- 03 CHROME ---------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 19, 48, .90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar {
  max-width: 900px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 34px);
  height: var(--bar);
  display: flex; align-items: center; gap: 14px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mark); font-weight: 700;
  font-size: 24px; letter-spacing: .015em; text-transform: uppercase;
  color: var(--bone);
}
.brand:hover { color: var(--bone); }
.brand img { width: 30px; height: 30px; object-fit: contain; }

/* Square, not pill: the workbench has no rounded corners. */
.lang { display: flex; border: 1px solid var(--rule-strong); }
.lang button {
  background: none; border: 0; cursor: pointer;
  padding: 5px 11px;
  font-family: var(--f-tech); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; color: var(--concrete);
  transition: color var(--t), background var(--t);
}
.lang button:hover { color: var(--bone); }
.lang button.on { background: var(--blaze); color: var(--void); }

footer {
  border-top: 1px solid var(--rule);
  padding: 26px 0;
  color: var(--concrete);
  font-family: var(--f-tech); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
}

/* ---------- 04 CONTROLS -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--forged); color: var(--void);
  font-family: var(--f-tech); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 0; border-radius: 0;
  padding: 14px 22px; cursor: pointer;
  transition: filter var(--t), transform var(--t);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: none; color: var(--bone);
  border: 1px solid var(--rule-strong);
}
.btn.ghost:hover { border-color: var(--blaze); color: var(--blaze); filter: none; }
.btn.sm { padding: 10px 15px; font-size: 11.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--flare);
  font-family: var(--f-tech); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
}
.link:hover { color: var(--blaze); }

.tag, .sec-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-tech); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blaze);
}
.sec-badge { margin-bottom: 14px; }
.sec-badge::before {
  content: ""; width: 20px; height: 1px; background: var(--blaze);
}
.tag { border: 1px solid var(--rule-blaze); padding: 3px 9px; }

/* ---------- 05 FIELDS ---------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld.full { grid-column: 1 / -1; }

label {
  font-family: var(--f-tech); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--concrete);
}
label .req { color: var(--blaze); }

input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--f-body); font-size: 15px;
  outline: none;
  transition: border-color var(--t), background var(--t);
}
input::placeholder, textarea::placeholder { color: #6C7690; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blaze);
  background: rgba(232, 100, 30, .06);
}
select option { background: var(--pan); color: var(--bone); }
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

.hint {
  font-family: var(--f-tech); font-size: 11.5px;
  letter-spacing: .04em; color: var(--concrete);
}

/* Radio cards and checkbox chips — same square logic as everything else. */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  font-family: var(--f-body); font-size: 15px;
  letter-spacing: normal; text-transform: none;
  color: var(--bone);
  transition: border-color var(--t), background var(--t);
}
.choice label:hover { border-color: var(--rule-blaze); }
.choice label.active { border-color: var(--blaze); background: rgba(232, 100, 30, .08); }
.choice input { width: auto; margin-top: 4px; accent-color: var(--blaze); }
.choice b {
  display: block;
  font-family: var(--f-display); font-stretch: 125%; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase;
}
.choice small { color: var(--concrete); font-size: 13px; }

.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--field);
  cursor: pointer;
  font-family: var(--f-body); font-size: 14px;
  letter-spacing: normal; text-transform: none;
  color: var(--bone);
}
.checks label:hover { border-color: var(--rule-blaze); }
.checks input { width: auto; accent-color: var(--blaze); }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--f-body); font-size: 14px;
  letter-spacing: normal; text-transform: none;
  color: var(--concrete);
}
.consent input { width: auto; margin-top: 4px; accent-color: var(--blaze); }
.submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- 06 CARDS ----------------------------------------------------- */
/* A card is a plate bolted to the bench: hard edge, one blaze seam on top. */
.card {
  position: relative;
  background: var(--pan);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 26px;
  margin-bottom: 20px;
}
.card::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: 58px; height: 2px; background: var(--blaze);
}
.card h2 { font-size: 20px; margin-bottom: 4px; }
.card .sub {
  color: var(--concrete); font-size: 14px; margin: 0 0 18px;
}

/* ---------- 07 AUTH ------------------------------------------------------ */
.authbox { max-width: 430px; margin: 76px auto; text-align: center; }
.authbox h1 { font-size: clamp(28px, 5vw, 36px); margin-bottom: 10px; }
.authbox p.lead { color: var(--concrete); margin: 0 0 26px; }
.authcard {
  position: relative;
  background: var(--pan);
  border: 1px solid var(--rule);
  padding: 26px;
  text-align: left;
  display: flex; flex-direction: column; gap: 13px;
}
.authcard::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: 58px; height: 2px; background: var(--blaze);
}
.authcard h1 { font-size: 24px; margin-bottom: 4px; }

.msg {
  display: none;
  padding: 12px 14px;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.msg.err { display: block; background: rgba(229, 72, 77, .10); border-left-color: var(--alert); color: #F2A3A6; }
.msg.ok  { display: block; background: rgba(232, 100, 30, .10); border-left-color: var(--blaze); color: var(--flare); }

/* ---------- 08 ONBOARDING ------------------------------------------------ */
main { padding: 26px 0 90px; }

.hero { padding: 72px 0 30px; text-align: center; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin-bottom: 16px; }
.hero p { color: var(--concrete); font-size: 17px; max-width: 560px; margin: 0 auto 26px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-bottom: 22px;
  border: 1px solid var(--rule);
  font-family: var(--f-tech); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--concrete);
}

/* Three steps. The threefold rhythm, stated literally. */
.steps { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.step {
  flex: 1 1 200px; max-width: 250px;
  background: var(--pan);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--blaze);
  padding: 20px;
  text-align: left;
}
.step .n {
  font-family: var(--f-tech); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; color: var(--blaze);
  margin-bottom: 10px;
}
.step b { font-family: var(--f-display); font-stretch: 125%; font-size: 15px; text-transform: uppercase; }
.step p { font-size: 13.5px; color: var(--concrete); margin: 6px 0 0; }

.success {
  position: relative;
  background: var(--pan);
  border: 1px solid var(--rule-blaze);
  padding: 46px 28px;
  text-align: center;
}
.success .ck {
  width: 54px; height: 54px; margin: 0 auto 18px;
  color: var(--blaze);
  border: 1px solid var(--rule-blaze);
  display: grid; place-items: center;
}
.success .ck svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 9; fill: none;
  stroke-linecap: square; stroke-linejoin: miter; }
.success h2 { font-size: 24px; }

.who {
  font-family: var(--f-tech); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--concrete);
}
.who b { color: var(--blaze); font-weight: 500; }

/* ---------- 09 PORTAL ---------------------------------------------------- */
.status {
  display: flex; align-items: center; gap: 14px;
  background: var(--pan);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--blaze);
  padding: 16px 20px;
  margin-bottom: 22px;
}
.dot {
  width: 9px; height: 9px; flex: none;
  background: var(--blaze);
  box-shadow: 0 0 0 4px rgba(232, 100, 30, .16);
}
.status b { font-family: var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }

.tabs { display: flex; gap: 0; margin: 24px 0 18px; border-bottom: 1px solid var(--rule); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 18px; cursor: pointer;
  font-family: var(--f-tech); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--concrete);
  transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--bone); }
.tab.on { color: var(--blaze); border-bottom-color: var(--blaze); }
.tab .badge {
  display: inline-block; min-width: 18px; margin-left: 8px; padding: 0 5px;
  background: var(--blaze); color: var(--void);
  font-size: 11px; font-weight: 600; text-align: center;
}

.thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 52vh; overflow-y: auto; padding: 4px;
}
.bubble {
  max-width: 78%;
  padding: 12px 15px;
  border: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.bubble .t {
  display: block; margin-top: 6px;
  font-family: var(--f-tech); font-size: 10.5px;
  letter-spacing: .08em; color: var(--concrete);
}
.b-client { align-self: flex-end; background: var(--forged); color: var(--void); border-color: transparent; }
.b-client .t { color: rgba(8, 11, 28, .62); }
.b-nextbolt { align-self: flex-start; background: rgba(243, 239, 231, .05); border-left: 2px solid var(--blaze); }

.composer { display: flex; gap: 10px; margin-top: 16px; }
.composer textarea { min-height: 48px; max-height: 140px; }

/* ---------- 10 ADMIN ----------------------------------------------------- */
/* The console is a control panel: two columns, one hard seam between them. */
/* admin.html sets class="admin" on <html>; its shell is full-height and its
   header has no .bar wrapper, so the header element is the bar. */
html.admin, html.admin body { height: 100%; }
html.admin header {
  position: static;
  display: flex; align-items: center; gap: 12px;
  height: var(--bar); padding: 0 20px;
}
html.admin .who { font-size: 11px; }
.console { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--bar)); }
.list { border-right: 1px solid var(--rule); overflow-y: auto; }
.listhead {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}
.listhead input { padding: 9px 12px; font-size: 14px; }

.citem {
  display: flex; gap: 12px; align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.citem:hover { background: var(--pan); }
.citem.on { background: rgba(232, 100, 30, .08); border-left-color: var(--blaze); }
.citem .av {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--rule-blaze);
  color: var(--blaze);
  font-family: var(--f-tech); font-size: 13px; font-weight: 500;
}
.citem .nm { font-weight: 600; font-size: 14.5px; }
.citem .sub { font-family: var(--f-tech); font-size: 11.5px; color: var(--concrete); }

/* Admin reuses .pill as a status chip. */
.list .pill, .dhead .pill {
  margin-bottom: 0;
  padding: 3px 9px;
  font-size: 10px; letter-spacing: .12em;
}
.pill.live { border-color: var(--rule-blaze); color: var(--blaze); }
.unread {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--blaze); color: var(--void);
  font-family: var(--f-tech); font-size: 11px; font-weight: 600;
}

.detail { display: flex; flex-direction: column; overflow: hidden; }
.dhead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.dhead h2 { font-size: 19px; }
.dhead label { display: flex; align-items: center; gap: 9px; }
.dbody {
  flex: 1; overflow-y: auto; padding: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.dbody .card { margin-bottom: 0; }
.card h3 {
  font-family: var(--f-tech); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blaze); margin-bottom: 16px;
}
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv .row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; font-size: 14px; }
.kv .k {
  font-family: var(--f-tech); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--concrete);
  padding-top: 3px;
}
.kv .v { color: var(--bone); word-break: break-word; white-space: pre-wrap; }
.empty {
  margin: auto; padding: 44px; text-align: center;
  font-family: var(--f-tech); font-size: 12px;
  letter-spacing: .08em; color: var(--concrete);
}

/* ---------- 11 RESPONSIVE ------------------------------------------------ */
@media (max-width: 1040px) { .dbody { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .console { grid-template-columns: 1fr; }
  .detail { display: none; }
  .console.showdetail .list { display: none; }
  .console.showdetail .detail { display: flex; }
}
@media (max-width: 640px) {
  .grid, .choice { grid-template-columns: 1fr; }
  .bar { gap: 10px; }
  .brand { font-size: 21px; }
  .bubble { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}