/* ============================================================
   NE AI Lab — /demo styles (loads after styles.css)
   Client-facing sample report: same brand system, denser layout.
   ============================================================ */

/* [hidden] must beat any display rule below (gate/panels use grid/flex) */
[hidden] { display: none !important; }

/* ---------- Gate ---------- */
.gate {
  min-height: calc(100vh - 64px);
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
}
.gate__card {
  max-width: 460px; width: 100%;
  border: 1.5px solid var(--ink);
  background: #fff;
  padding: clamp(1.8rem, 5vw, 2.8rem);
  text-align: center;
}
.gate__lock {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); display: block; margin-bottom: 1rem;
}
.gate__title { margin: 0 0 0.8rem; font-size: 1.6rem; }
.gate__copy { margin: 0 0 1.6rem; color: var(--slate); font-size: 0.95rem; }
.gate__google {
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--paper-2); color: var(--slate);
  border: 1.5px dashed var(--hair);
  cursor: not-allowed;
}
.gate__bypass {
  display: block; width: 100%; margin-top: 0.8rem;
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--accent); color: #fff;
  border: 1.5px solid var(--accent); cursor: pointer;
}
.gate__bypass:hover { background: var(--accent-dark); }
.gate__devnote {
  margin: 1.2rem 0 0; font-family: var(--font-mono);
  font-size: 0.7rem; color: var(--slate);
}
.gate__field { text-align: left; margin-bottom: 0.9rem; }
.gate__field input { width: 100%; font-size: 1.05rem; letter-spacing: 0.08em; }
.gate__error {
  margin: 0.9rem 0 0; font-size: 0.85rem;
  color: #8c3a30; border-left: 3px solid #8c3a30;
  padding: 0.4rem 0 0.4rem 0.8rem; text-align: left;
  background: rgba(140, 58, 48, 0.06);
}

/* ---------- Demo banner + header card ---------- */
.demo-banner {
  background: #8a6d1d; color: #fff;
  text-align: center;
  font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 0.55rem var(--gutter);
}
.demo-head-card {
  border: 1.5px solid var(--ink);
  background: #fff;
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.demo-head-card__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem 2rem;
}
.demo-head-card__grid > div { display: flex; flex-direction: column; gap: 0.25rem; }
.demo-head-card__grid b { font-variation-settings: "wdth" 92, "wght" 640; font-size: 1rem; }
.demo-head-card__goal { grid-column: 1 / -1; }
.demo-head-card__note {
  margin: 1.3rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-size: 0.88rem; color: var(--slate); font-style: italic;
}

/* ---------- Tabs ---------- */
.demo-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 0.8rem;
}
.demo-tabs [role="tab"] {
  font-family: var(--font-mono); font-size: 0.78rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--hair);
  padding: 0.55rem 0.95rem; cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.demo-tabs [role="tab"]:hover { border-color: var(--ink); }
.demo-tabs [role="tab"][aria-selected="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.demo-section-title { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ---------- Shared demo pieces ---------- */
.demo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.demo-panel { border: 1px solid var(--hair); background: #fff; padding: 1.4rem; }
.demo-panel__title {
  margin: 0 0 0.9rem; font-size: 1.02rem;
  text-transform: uppercase; font-variation-settings: "wdth" 86, "wght" 700;
}
.demo-list { list-style: none; margin: 0; padding: 0; }
.demo-list li {
  padding: 0.45rem 0 0.45rem 1.3rem; position: relative;
  font-size: 0.94rem; color: var(--ink-90);
  border-top: 1px solid var(--hair-soft);
}
.demo-list li::before {
  content: "—"; position: absolute; left: 0;
  color: var(--accent-dark); font-family: var(--font-mono);
}
.demo-list--pain li::before { content: "!"; color: #8a6d1d; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips span {
  font-family: var(--font-mono); font-size: 0.74rem;
  border: 1px solid var(--hair); background: var(--paper);
  padding: 0.3rem 0.6rem;
}
.chips--ai span { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-wash); }
.demo-finding {
  border-left: 3px solid var(--ink); background: #fff;
  border-top: 1px solid var(--hair); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem;
}
.demo-finding p { margin: 0.4rem 0 0; font-size: 1.05rem; }
.demo-callout {
  margin: 0; padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--accent); background: var(--accent-wash);
  font-family: var(--font-serif); font-style: italic; font-size: 1.15rem;
}
.demo-insight {
  margin: 0 0 1.4rem; padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--accent); background: #fff;
  border-top: 1px solid var(--hair-soft); border-right: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
  font-size: 0.98rem; color: var(--ink-90); max-width: 88ch;
}
.demo-h3 {
  margin: 2rem 0 1rem; font-size: 1.25rem;
  text-transform: uppercase; font-variation-settings: "wdth" 86, "wght" 720;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 0.4rem;
}
.mono-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate); margin: 0.8rem 0 0; }
.human-note {
  margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--accent-dark);
}
.human-note::before { content: "☑ human approval — "; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.6rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge--high    { color: var(--accent-dark); background: var(--accent-wash); }
.badge--medhigh { color: #3e6e34; background: rgba(90, 140, 70, 0.1); }
.badge--medium  { color: #8a6d1d; background: rgba(138, 109, 29, 0.08); }
.badge--low     { color: var(--slate); background: var(--paper-2); }
.badge--status-strong  { color: var(--accent-dark); background: var(--accent-wash); }
.badge--status-partial { color: #8a6d1d; background: rgba(138, 109, 29, 0.08); }
.badge--status-assist  { color: #24507a; background: rgba(36, 80, 122, 0.08); }
.badge--status-limited { color: #8a6d1d; background: rgba(138, 109, 29, 0.08); }
.badge--status-none    { color: #8c3a30; background: rgba(140, 58, 48, 0.08); }

/* ---------- Function cards ---------- */
.fn-card {
  border: 1.5px solid var(--ink); background: #fff;
  padding: clamp(1.4rem, 4vw, 2rem);
  margin-bottom: 1.4rem;
}
.fn-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
}
.fn-card__no { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.fn-card__name {
  margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-variation-settings: "wdth" 86, "wght" 720;
  flex: 1 1 100%;
}
.fn-card__head .badge { order: 3; }
.fn-card__desc { margin: 0 0 0.5rem; color: var(--ink-90); max-width: 80ch; }
.fn-card__trigger { margin: 0 0 1.3rem; font-size: 0.9rem; color: var(--slate); }
.fn-card__grid {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1.4rem; margin-bottom: 1.4rem;
  padding-top: 1.2rem; border-top: 1px solid var(--hair);
}
.demo-steps { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.demo-steps li { padding: 0.22rem 0; font-size: 0.92rem; color: var(--ink-90); }
.time-table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; }
.time-table td {
  padding: 0.4rem 0; font-size: 0.88rem;
  border-bottom: 1px solid var(--hair-soft);
}
.time-table td:last-child { text-align: right; font-family: var(--font-mono); font-size: 0.8rem; }
.fn-card__approach {
  border-top: 1px solid var(--hair); padding-top: 1.1rem; margin-top: 1.3rem;
}
.fn-card__approach p { margin: 0.4rem 0 0; max-width: 88ch; color: var(--ink-90); font-size: 0.96rem; }

/* ---------- Workflow diagram ---------- */
.wf { border: 1px solid var(--hair); background: var(--paper); padding: 1.1rem 1.2rem 1.2rem; }
.wf__label { display: block; margin: 0 0 0.7rem; }
.wf__chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.wf__node {
  position: relative;
  font-size: 0.8rem; line-height: 1.3;
  border: 1px solid var(--ink); background: #fff;
  padding: 0.45rem 0.65rem;
}
.wf__node--ai { border-color: var(--accent); border-width: 1.5px; background: var(--accent-wash); }
.wf__ai-tag {
  display: block; font-style: normal;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-dark); margin-top: 0.15rem;
}
.wf__arrow { font-family: var(--font-mono); color: var(--slate); font-size: 0.85rem; }

/* ---------- Time analysis ---------- */
.stat-tile {
  display: inline-flex; flex-direction: column; gap: 0.2rem;
  border: 1.5px solid var(--ink); background: #fff;
  padding: 1.2rem 1.6rem; margin-bottom: 1.4rem;
}
.stat-tile strong {
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05;
  font-variation-settings: "wdth" 78, "wght" 800;
}
.stat-tile__note { font-size: 0.85rem; color: var(--slate); }
.bar-chart { display: grid; gap: 0.55rem; margin-bottom: 1.6rem; max-width: 860px; }
.bar-row {
  display: grid; grid-template-columns: minmax(140px, 260px) 1fr 56px;
  align-items: center; gap: 0.8rem;
}
.bar-row__label { font-size: 0.85rem; color: var(--ink-90); }
.bar-row__track { background: var(--paper-2); border: 1px solid var(--hair-soft); height: 22px; display: block; }
.bar-row__fill { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.bar-row__value { font-family: var(--font-mono); font-size: 0.78rem; text-align: right; }
.time-summary-table { max-width: 560px; margin-bottom: 1.4rem; }
.time-summary-table__total td { font-weight: 700; border-top: 1.5px solid var(--ink); }

/* ---------- System cards ---------- */
.sys-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; }
.sys-card { border: 1px solid var(--hair); border-top: 3px solid var(--ink); background: #fff; padding: 1.1rem 1.2rem; }
.sys-card h4 { margin: 0 0 0.3rem; font-size: 1rem; font-variation-settings: "wdth" 90, "wght" 700; }
.sys-card p { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--slate); }

/* ---------- Dependency map ---------- */
.dep-wrap { border: 1px solid var(--hair); background: #fff; padding: 1rem; }
.dep { width: 100%; height: auto; max-width: 760px; margin: 0 auto; display: block; }
.dep__link { stroke: var(--hair); stroke-width: 1.2; }
.dep__node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.dep__node--system rect { stroke: var(--ink); }
.dep__node--dept rect { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dep__node text { font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink); }
.dep__center rect { fill: var(--ink); }
.dep__center text { font-family: var(--font-mono); font-size: 13px; fill: var(--paper); }
.dep__legend { text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate); margin: 0.6rem 0 0; }
.dep__key { display: inline-block; width: 14px; height: 10px; background: var(--paper); vertical-align: -1px; }
.dep__key--system { border: 1.2px solid var(--ink); }
.dep__key--dept { border: 1.5px dashed var(--accent); }

/* ---------- Bottlenecks ---------- */
.bn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.bn-card { border: 1px solid var(--hair); border-top: 3px solid #8a6d1d; background: #fff; padding: 1.3rem 1.4rem; }
.bn-card__no { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--slate); }
.bn-card h3 { margin: 0.4rem 0 0.7rem; font-size: 1.1rem; font-variation-settings: "wdth" 88, "wght" 700; }
.bn-card p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--ink-90); }
.bn-card__rec { color: var(--accent-dark); }

/* ---------- Matrix ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--hair); background: #fff; }
.matrix-table { border-collapse: collapse; width: 100%; background: #fff; }
.matrix-table th {
  font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: left; color: var(--slate); font-weight: 400;
  padding: 0.7rem 0.9rem; border-bottom: 1.5px solid var(--ink);
}
.matrix-table td {
  padding: 0.75rem 0.9rem; font-size: 0.88rem;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: top;
}
.matrix-table td:first-child { font-variation-settings: "wdth" 92, "wght" 620; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* ---------- Proposal ---------- */
.prop-pilot {
  border: 1.5px solid var(--accent); background: var(--accent-wash);
  padding: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: 1rem;
}
.prop-pilot h3 { margin: 0.3rem 0 0.7rem; font-size: clamp(1.3rem, 3vw, 1.8rem); font-variation-settings: "wdth" 84, "wght" 740; }
.prop-pilot p { margin: 0 0 0.4rem; max-width: 80ch; }
.phase-list { list-style: none; margin: 0; padding: 0; counter-reset: ph; }
.phase-list li {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.8rem 0; border-top: 1px solid var(--hair);
}
.phase-list li:last-child { border-bottom: 1px solid var(--hair); }
.phase-list b { font-variation-settings: "wdth" 90, "wght" 660; }
.phase-list span { font-size: 0.92rem; color: var(--slate); }
.risk-table { border-collapse: collapse; width: 100%; }
.risk-table th {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate); font-weight: 400;
  text-align: left; padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1.5px solid var(--ink);
}
.risk-table td {
  padding: 0.6rem 0.6rem 0.6rem 0; font-size: 0.88rem;
  border-bottom: 1px solid var(--hair-soft); vertical-align: top;
}
.risk-table td:first-child { color: #8c3a30; }
.risk-table td:last-child { color: var(--accent-dark); }
.roadmap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
.roadmap__step {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 0.2rem;
  border: 1px solid var(--hair); border-left: 3px solid var(--accent);
  background: #fff; padding: 0.8rem 0.95rem;
}
.roadmap__step b { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.roadmap__step span { font-size: 0.86rem; color: var(--ink-90); }
.roadmap__arrow { align-self: center; font-family: var(--font-mono); color: var(--slate); }

/* ---------- Deliverables grid ---------- */
.deliv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; }
.deliv-item {
  display: flex; align-items: baseline; gap: 0.7rem;
  border: 1px solid var(--hair); background: #fff;
  padding: 0.9rem 1.1rem; font-size: 0.95rem;
  font-variation-settings: "wdth" 92, "wght" 600;
}
.deliv-item span { font-family: var(--font-serif); font-style: italic; color: var(--accent-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .demo-cols { grid-template-columns: 1fr; }
  .fn-card__grid { grid-template-columns: 1fr; }
  .demo-tabs { flex-direction: column; }
  .demo-tabs [role="tab"] { text-align: left; }
  .bar-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .bar-row__value { text-align: left; }
  .roadmap { flex-direction: column; }
  .roadmap__arrow { display: none; }
}

/* ---------- Portal additions ---------- */
/* prepared-for bar: repurpose the banner slot in brand navy */
.demo-banner { background: var(--ink); }
.masthead__client {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate);
}
.gate__gsignin { display: flex; justify-content: center; margin: 0.4rem 0 0.2rem; }
.admin-logout { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.admin-form { display: grid; gap: 0.9rem; }
.admin-form textarea { font-family: var(--font-mono); font-size: 0.8rem; }
.admin-form .btn { justify-self: start; }

/* ---------- Engagement checklist (admin) ---------- */
.linklike { background:none; border:none; padding:0; font:inherit; color:var(--accent-dark); text-decoration:underline; cursor:pointer; }
.progress-inline { display:inline-flex; align-items:center; gap:0.6rem; }
.progress-inline__track { display:inline-block; width:120px; height:10px; background:var(--paper-2); border:1px solid var(--hair-soft); }
.progress-inline__track--lg { width:100%; height:16px; }
.progress-inline__fill { display:block; height:100%; background:var(--accent); }
.progress-hero { display:grid; gap:0.5rem; margin-bottom:2.2rem; }

.phase-block { border:1px solid var(--hair); background:#fff; margin-bottom:0.7rem; }
.phase-block > summary { display:flex; align-items:center; gap:0.8rem; padding:0.9rem 1.2rem; cursor:pointer; list-style:none; }
.phase-block > summary::-webkit-details-marker { display:none; }
.phase-block__status { width:12px; height:12px; border:1.5px solid var(--slate); flex:0 0 auto; }
.phase-block--in_progress .phase-block__status { background:#e2b93b; border-color:#8a6d1d; }
.phase-block--done .phase-block__status { background:var(--accent); border-color:var(--accent-dark); }
.phase-block__body { padding:0 1.2rem 1rem; border-top:1px solid var(--hair-soft); }

.step-row { padding:1rem 0; border-bottom:1px solid var(--hair-soft); display:grid; gap:0.5rem; }
.step-row:last-child { border-bottom:none; }
.step-row__head { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.step-row__head b { flex:1 1 200px; font-variation-settings:"wdth" 92, "wght" 640; }
.step-row__head select { font-family:var(--font-mono); font-size:0.78rem; padding:0.3rem 0.4rem; border:1px solid var(--hair); border-bottom:1.5px solid var(--ink); background:#fff; }
.step-row__save { padding:0.3rem 0.8rem; font-size:0.75rem; }
.step-row__inst { margin:0; font-size:0.9rem; color:var(--ink-90); max-width:88ch; }
.step-row__meta { margin:0; font-family:var(--font-mono); font-size:0.72rem; color:var(--slate); }
.step-row textarea { font-family:var(--font-grot); font-size:0.88rem; border:1px solid var(--hair); padding:0.5rem 0.7rem; resize:vertical; }
.step-row--done .step-row__head b { color:var(--slate); text-decoration:line-through; text-decoration-color:var(--hair); }
.step-row--skipped .step-row__head b { color:var(--slate); font-style:italic; }

/* ---------- Client progress timeline ---------- */
.phase-timeline { list-style:none; margin:0; padding:0; }
.phase-timeline__item { display:flex; gap:1.2rem; padding:1.1rem 0; border-top:1px solid var(--hair-soft); }
.phase-timeline__marker {
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border:1.5px solid var(--slate); color:var(--slate);
  font-variation-settings:"wdth" 80, "wght" 750; font-size:1rem;
}
.phase-timeline__item--in_progress .phase-timeline__marker { border-color:#8a6d1d; color:#8a6d1d; }
.phase-timeline__item--done .phase-timeline__marker { background:var(--accent); border-color:var(--accent); color:#fff; }
.phase-timeline__title { margin:0.2rem 0 0.3rem; font-size:1.1rem; font-variation-settings:"wdth" 88, "wght" 700; display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
.phase-timeline__desc { margin:0; color:var(--slate); font-size:0.94rem; }
.phase-timeline__item--done .phase-timeline__desc,
.phase-timeline__item--done .phase-timeline__title { color:var(--ink-90); }