/* ============================================================
   AI Strategy Canvas — self-contained page stylesheet
   Depends only on the custom properties defined in style.css
   (--ink, --ink-2, --ink-3, --paper, --card, --rule, --rule-hard,
    --sans, --cond, --mono). style.css is not modified.

   Load order in _base.html:
     style.css  →  ai_strategy.css  →  ai_strategy_canvas.css
   ============================================================ */

/* ---------- page frame ----------
   Gutter matches .masthead-in (1400px / 28px) so the canvas edge
   lines up with the MODEL CATALOG wordmark above it. */
.strategy-shell{
  max-width:1400px;
  margin:0 auto;
  padding:30px 28px 100px;
  font-family:var(--sans);
  color:var(--ink);
}

.strategy-shell h1,
.strategy-shell h2,
.strategy-shell h3{font-family:var(--cond);letter-spacing:-.015em}

/* ---------- intro ---------- */
.strategy-shell .section-block{
  border:0;background:none;padding:0;
  margin:0 0 26px;
  border-bottom:1px solid var(--rule);
  padding-bottom:24px;
}
.strategy-shell .eyebrow{
  font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}
.strategy-shell h1{font-size:38px;font-weight:700;line-height:1.04;margin:8px 0 12px}
.strategy-shell .lead{margin:0;max-width:66ch;color:var(--ink-2);font-size:15px;line-height:1.55}

/* ---------- sticky section nav ---------- */
.canvas-nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:2px;
  overflow-x:auto;
  background:var(--card);
  border:1px solid var(--rule-hard);
  padding:6px;margin:0 0 20px;
}
.canvas-nav a{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 12px;text-decoration:none;color:var(--ink-2);
  font-size:13px;font-weight:500;border:1px solid transparent;
}
.canvas-nav a:hover{background:#e9eeee;color:var(--ink)}
.canvas-nav a.is-on{background:var(--ink);color:#fff}
.canvas-nav a.is-on .n{color:rgba(255,255,255,.62)}
.canvas-nav a:focus-visible{outline:2px solid var(--t2);outline-offset:-2px}
.canvas-nav .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:-.02em}
.canvas-nav a.is-done .n::after{content:" ✓"}
.density-toggle{margin-left:auto;flex:0 0 auto}

.form-section{scroll-margin-top:78px}

/* ---------- form shell ---------- */
.structured-canvas{display:block;padding:0;border:0;background:none;margin:0}

/* Two-column spec-sheet layout: section identity on the left,
   fields on the right. Mirrors .pattern-row in ai_strategy.css. */
.form-section{
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  gap:0 36px;
  background:var(--card);
  border:1px solid var(--rule);
  padding:26px 28px;
  margin:0 0 14px;
}
.derived-section{border-left:3px solid var(--ink)}

.form-section-head{display:block;border:0;padding:0;margin:0}
.form-section-head .step{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--rule-hard);padding:3px 7px;margin-bottom:10px;
}
.form-section-head h2{font-size:21px;font-weight:700;margin:0 0 6px;line-height:1.15}
.form-section-head p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.section-toggle{margin-top:14px}

.form-section-body{min-width:0}
.form-section.is-collapsed{padding-bottom:22px}
.form-section.is-collapsed .form-section-body{display:none}

/* ---------- text inputs ---------- */
.structured-canvas label{
  display:flex;flex-direction:column;gap:7px;
  font-size:13px;font-weight:600;
  margin:0 0 22px;
}
.structured-canvas label small{font-weight:400;color:var(--ink-3)}

.structured-canvas select,
.structured-canvas textarea,
.structured-canvas input[type="text"]{
  font:400 14px var(--sans);
  color:var(--ink);
  border:1px solid var(--rule-hard);
  background:var(--card);
  padding:9px 11px;
  max-width:520px;
}
.structured-canvas textarea{min-height:104px;max-width:none;resize:vertical;line-height:1.5}
.structured-canvas select:focus-visible,
.structured-canvas textarea:focus-visible,
.structured-canvas input:focus-visible{outline:2px solid var(--t2);outline-offset:-1px}

/* ---------- checkbox groups ---------- */
.structured-canvas fieldset{
  border:0;padding:0;margin:0 0 26px;
  border-top:1px solid var(--rule);
  padding-top:16px;
}
.structured-canvas fieldset:first-child{border-top:0;padding-top:0}

.structured-canvas legend{
  font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:0;margin:0 0 10px;
}
.structured-canvas legend small{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-3);margin-left:6px;
}

.group-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.group-filter{
  flex:1 1 240px;min-width:0;max-width:340px;
  font:400 13px var(--sans);
  padding:7px 10px;border:1px solid var(--rule-hard);background:var(--card);
}
.group-count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  color:var(--ink-3);border:1px solid var(--rule);
  padding:5px 8px;white-space:nowrap;
}
.group-count.has-selection{color:var(--ink);border-color:var(--ink-3);background:#e9eeee}

/* secondary button */
.ghost{
  background:none;border:1px solid var(--rule-hard);
  color:var(--ink-2);padding:6px 11px;
  font:500 12px var(--sans);cursor:pointer;
}
.ghost:hover{color:var(--ink);border-color:var(--ink)}
.ghost:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.ghost[hidden]{display:none}
.ghost.on-dark{color:#c3cbd0;border-color:#3a444d}
.ghost.on-dark:hover{color:#fff;border-color:#fff}

/* tiles */
.check-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:6px;
}
.structured-canvas.is-compact .check-grid{display:flex;flex-wrap:wrap}
.structured-canvas.is-compact .check-chip{flex:0 0 auto}

.check-chip{
  display:flex;flex-direction:row;align-items:center;gap:9px;
  margin:0;padding:9px 11px;
  border:1px solid var(--rule);background:#f6f8f8;
  font-size:13px;font-weight:400;line-height:1.35;
  cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease;
}
.check-chip:hover{border-color:var(--rule-hard);background:#eef2f2}
.check-chip:has(input:checked){border-color:var(--ink);background:var(--card);font-weight:500}
.check-chip:has(input:focus-visible){outline:2px solid var(--t2);outline-offset:1px}
.check-chip:has(input:disabled){opacity:.4;cursor:not-allowed}
.check-chip input{margin:0;flex:0 0 auto;accent-color:var(--ink)}
.check-chip.is-hidden{display:none}
.auto-chip{border-style:dashed}
fieldset.is-auto .check-chip:not(.auto-chip){opacity:.42}

.group-empty{font-size:12.5px;color:var(--ink-3);margin:9px 0 0}
.group-hint{font-size:12.5px;color:var(--t6);margin:9px 0 0}

/* ---------- KPIs ---------- */
.kpi-group{margin:0 0 18px}
.kpi-group h3{
  font-family:var(--cond);font-size:13px;font-weight:600;
  color:var(--ink-2);margin:0 0 7px;
}
.kpi-grid{display:grid;gap:6px}
.kpi-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,200px);
  gap:6px;align-items:stretch;
}
.kpi-row .check-chip{height:100%}
.kpi-row input[type="text"]{width:100%;max-width:none;font-size:13px;padding:8px 10px}
.kpi-row.is-hidden,.kpi-group.is-hidden{display:none}

/* ---------- sticky footer ---------- */
.sticky-foot{position:sticky;bottom:0;z-index:25;margin-top:16px}

.review-tray{
  background:var(--card);border:1px solid var(--rule-hard);border-bottom:0;
  padding:16px 22px;max-height:36vh;overflow:auto;
}
.review-tray[hidden]{display:none}
.review-group{border-top:1px solid var(--rule);padding:11px 0}
.review-group:first-child{border-top:0;padding-top:0}
.review-group b{
  display:block;font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px;
}
.review-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;border:1px solid var(--rule);background:#f6f8f8;
  padding:4px 5px 4px 9px;margin:0 5px 5px 0;
}
.review-chip button{
  background:none;border:0;padding:0 3px;color:var(--ink-3);
  font:500 14px/1 var(--sans);cursor:pointer;
}
.review-chip button:hover{color:var(--ink)}

.submit-bar{
  display:flex;justify-content:space-between;align-items:center;gap:22px;
  background:var(--ink);color:#fff;padding:16px 22px;margin:0;
}
.submit-bar>div:first-child{display:flex;flex-direction:column;gap:2px}
.submit-bar strong{font-family:var(--cond);font-size:15px;font-weight:600}
.submit-bar span{font-family:var(--mono);font-size:11px;letter-spacing:-.02em;color:#9aa6ad}
.submit-actions{display:flex;gap:9px;align-items:center}
.submit-bar button[type="submit"]{
  background:#fff;color:var(--ink);border:1px solid #fff;
  padding:9px 16px;font:600 13px var(--sans);cursor:pointer;
}
.submit-bar button[type="submit"]:hover{background:#e3e8e9}

/* ---------- result payload ---------- */
.payload-card{
  background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--ink);
  padding:26px 28px;margin-top:22px;
}
.payload-card h2{font-size:22px;margin:8px 0 6px}
.payload-card h3{font-family:var(--cond);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:20px 0 6px}
.payload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 4px}
.payload-grid>div{border:1px solid var(--rule);padding:11px 12px;display:flex;flex-direction:column;gap:4px}
.payload-grid b{font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.summary-list{border-top:1px solid var(--rule);padding:13px 0}
.summary-list>b{display:block;font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.payload-card .chips{display:flex;flex-wrap:wrap;gap:5px}
.payload-card .chips span{font-size:12px;border:1px solid var(--rule);background:#f6f8f8;padding:4px 8px}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .form-section{grid-template-columns:1fr;gap:0}
  .form-section-head{
    border-bottom:1px solid var(--rule);
    padding-bottom:14px;margin-bottom:20px;
    position:relative;
  }
  .section-toggle{position:absolute;top:0;right:0;margin-top:0}
  .payload-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .strategy-shell{padding:22px 16px 90px}
  .strategy-shell h1{font-size:29px}
  .form-section{padding:20px 18px}
  .check-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
  .payload-grid{grid-template-columns:1fr}
  .submit-bar{flex-direction:column;align-items:stretch}
  .submit-actions{width:100%}
  .submit-actions button{flex:1 1 auto}
  .structured-canvas select,.structured-canvas textarea{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .check-chip{transition:none}
}


/* ============================================================
   SECTION PAGES — index, patterns, use cases, prioritize, roadmap
   Same tokens, same furniture as the canvas above.
   ============================================================ */

/* A plain content block, as opposed to .section-block which is
   the page header treatment (hairline rule underneath). */
.list-block{margin:0 0 26px}
.section-heading{margin:0 0 14px}
.section-heading h2{font-family:var(--cond);font-size:22px;font-weight:700;
  letter-spacing:-.015em;margin:5px 0 0}

/* ---------- flow strip (index hero) ---------- */
.flow-strip{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;
  margin:22px 0 0;
}
.flow-strip span{border:1px solid var(--rule);background:var(--card);padding:7px 10px}
.flow-strip b{color:var(--ink-3);font-weight:400;padding:0 1px}

/* ---------- index: entry cards ---------- */
.strategy-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:12px;margin:0 0 30px;
}
.strategy-card{
  display:block;background:var(--card);border:1px solid var(--rule);
  padding:20px;text-decoration:none;color:inherit;
  transition:border-color .12s ease;
}
.strategy-card:hover{border-color:var(--ink)}
.strategy-card:focus-visible{outline:2px solid var(--t2);outline-offset:-2px}
.strategy-card .num{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--rule-hard);padding:3px 7px;margin-bottom:11px;
}
.strategy-card h2{font-family:var(--cond);font-size:18px;font-weight:700;
  letter-spacing:-.015em;margin:0 0 6px}
.strategy-card p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ---------- index: pattern index rows ---------- */
.pattern-list{border:1px solid var(--rule);background:var(--card)}
.pattern-row{
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;
  padding:13px 18px;border-top:1px solid var(--rule);
  text-decoration:none;color:inherit;
}
.pattern-row:first-child{border-top:0}
.pattern-row:hover{background:#f6f8f8}
.pattern-row:focus-visible{outline:2px solid var(--t2);outline-offset:-2px}
.pattern-row strong{font-family:var(--cond);font-size:15px;font-weight:600}
.pattern-row span{font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ---------- patterns page ---------- */
.pattern-card{
  background:var(--card);border:1px solid var(--rule);
  padding:24px 26px;margin:0 0 14px;scroll-margin-top:78px;
}
.pattern-card.selected{border-left:3px solid var(--ink)}
.pattern-title{display:flex;gap:15px;align-items:flex-start;margin:0 0 18px}
.pattern-title .num{
  flex:0 0 auto;margin-top:4px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--rule-hard);padding:3px 7px;
}
.pattern-title h2{font-family:var(--cond);font-size:21px;font-weight:700;
  letter-spacing:-.015em;margin:0 0 5px}
.pattern-title p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:82ch}

.flow-box{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:-.02em;
  background:var(--ink);color:#dfe6e8;
  padding:14px 16px;margin:0 0 22px;overflow:auto;
}
.flow-box.big{text-align:center;font-size:14px;padding:22px;margin:24px 0 0}

.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.three-col h3{
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 9px;padding:0 0 7px;border-bottom:1px solid var(--rule);
}
.three-col ul{margin:0;padding-left:16px}
.three-col li{font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:5px}

/* ---------- use cases ---------- */
.filter-bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--rule-hard);
  padding:8px 10px;margin:0 0 18px;
}
.filter-bar .filter-label{
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin-right:2px;
}
.filter-bar .divider{width:1px;align-self:stretch;background:var(--rule);margin:0 6px}
.filter-btn{
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  padding:5px 10px;font:500 12px var(--sans);cursor:pointer;
}
.filter-btn:hover{border-color:var(--ink);color:var(--ink)}
.filter-btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-btn:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.filter-count{margin-left:auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:-.02em;color:var(--ink-3)}

.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(322px,1fr));gap:12px}
.case-card{background:var(--card);border:1px solid var(--rule);padding:22px 24px}
.case-card.is-hidden{display:none}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 13px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  color:var(--ink-2);border:1px solid var(--rule);padding:4px 8px}
.risk{
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;border:1px solid;white-space:nowrap;
}
.risk-high{color:var(--t6);border-color:var(--t6);background:rgba(122,35,32,.06)}
.risk-medium{color:var(--t4);border-color:var(--t4);background:rgba(163,101,28,.07)}
.risk-low{color:var(--t1);border-color:var(--t1);background:rgba(31,95,78,.07)}

.case-card h2{font-family:var(--cond);font-size:18px;font-weight:700;
  letter-spacing:-.015em;margin:0 0 8px;line-height:1.2}
.case-card h3{
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:18px 0 8px;padding:0 0 6px;border-bottom:1px solid var(--rule);
}
.case-card p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.case-card .chips{display:flex;flex-wrap:wrap;gap:5px}
.case-card .chips span{font-size:12px;border:1px solid var(--rule);
  background:#f6f8f8;padding:4px 8px}
.filter-empty{
  border:1px dashed var(--rule-hard);background:var(--card);
  padding:28px;text-align:center;font-size:13px;color:var(--ink-2);
}
.filter-empty[hidden]{display:none}

/* ---------- prioritize ---------- */
.score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:9px}
.score-field{
  display:flex;flex-direction:column;gap:7px;margin:0;
  border:1px solid var(--rule);background:#f6f8f8;padding:12px 13px;
  font-size:13px;font-weight:500;
}
.score-field select{
  font:400 14px var(--sans);max-width:none;width:100%;
  border:1px solid var(--rule-hard);background:var(--card);padding:8px 10px;
}
.score-field.friction{background:#fbf7f3;border-color:#e0d3c6}

.result-card{
  background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--ink);
  padding:26px 28px;margin-top:22px;
}
.result-card h2{font-family:var(--cond);font-size:24px;font-weight:700;
  letter-spacing:-.015em;margin:8px 0 14px}
.result-card h3{font-family:var(--cond);font-size:15px;font-weight:600;
  margin:0 0 18px;color:var(--ink-2)}
.score-badge{
  display:inline-block;font-family:var(--mono);font-size:30px;font-weight:500;
  letter-spacing:-.03em;color:var(--ink);
  border:1px solid var(--ink);padding:12px 18px;margin:0 0 12px;
}
.score-breakdown{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:0 20px;
}
.score-breakdown span{
  display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--rule);padding:9px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:-.02em;color:var(--ink-2);
}
.score-breakdown b{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink)}

/* ---------- roadmap ---------- */
.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.roadmap-card{
  background:var(--card);border:1px solid var(--rule);
  border-top:3px solid var(--ink-3);padding:22px 24px;
}
/* horizon colour follows the sequential ramp already in style.css */
.roadmap-card:nth-child(1){border-top-color:var(--t1)}
.roadmap-card:nth-child(2){border-top-color:var(--t3)}
.roadmap-card:nth-child(3){border-top-color:var(--t5)}
.roadmap-head{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px}
.horizon{
  flex:0 0 auto;margin-top:4px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--rule-hard);padding:3px 7px;
}
.roadmap-card h2{font-family:var(--cond);font-size:19px;font-weight:700;
  letter-spacing:-.015em;margin:0 0 3px;line-height:1.15}
.roadmap-head p{margin:0;font-family:var(--mono);font-size:11px;
  letter-spacing:-.02em;color:var(--ink-3)}
.roadmap-card>p{margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.roadmap-card h3{
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:18px 0 8px;padding:0 0 6px;border-bottom:1px solid var(--rule);
}
.roadmap-card ul{margin:0;padding-left:16px}
.roadmap-card li{font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:5px}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .three-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .roadmap{grid-template-columns:1fr}
  .pattern-row{grid-template-columns:220px minmax(0,1fr);gap:16px}
}
@media(max-width:680px){
  .three-col{grid-template-columns:1fr;gap:18px}
  .case-grid{grid-template-columns:1fr}
  .pattern-row{grid-template-columns:1fr;gap:5px}
  .pattern-card{padding:20px 18px}
  .score-grid{grid-template-columns:1fr}
  .filter-bar{padding:7px 8px}
  .filter-count{width:100%;margin:2px 0 0}
  .flow-box{font-size:11.5px}
}


/* ============================================================
   PHASE 1 JOB STATE STRIP
   Sits above the submit bar inside .sticky-foot.
   ============================================================ */

.job-strip{
  background:var(--card);
  border:1px solid var(--rule-hard);border-bottom:0;
  padding:14px 22px;
}
.job-strip[hidden]{display:none}

.job-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 9px}
.job-step{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  color:var(--ink-3);border:1px solid var(--rule);padding:5px 9px;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.job-step.is-active{
  color:var(--ink);border-color:var(--ink);background:#eef2f2;
  animation:job-pulse 1.4s ease-in-out infinite;
}
.job-step.is-done{color:var(--t1);border-color:var(--t1);background:rgba(31,95,78,.06)}
.job-step.is-done::after{content:" ✓"}

@keyframes job-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

.job-message{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.job-message a{color:var(--ink);font-weight:600}
.job-ref{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  color:var(--ink-3);margin-left:6px;
}

.job-strip.is-error{border-color:var(--t6)}
.job-strip.is-error .job-message{color:var(--t6)}
.job-strip.is-error .job-step{animation:none}

/* required field that failed the completeness check */
.structured-canvas :is(select,textarea,input):invalid:not(:placeholder-shown){
  border-color:var(--t6);
}

@media(prefers-reduced-motion:reduce){
  .job-step.is-active{animation:none}
}
@media(max-width:680px){
  .job-strip{padding:12px 16px}
}


/* ============================================================
   SUBMISSIONS LIST
   ============================================================ */

.briefs-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;
}
.briefs-count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  color:var(--ink-3);
}
.poll-state{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:-.02em;color:var(--ink-3);
}
.poll-state[hidden]{display:none}

.briefs-table{border:1px solid var(--rule);background:var(--card)}

.briefs-head,
.brief-row{
  display:grid;
  grid-template-columns:64px 180px minmax(0,1fr) 200px 116px;
  gap:20px;
  padding:13px 18px;
  align-items:start;
}

.briefs-head{
  border-bottom:1px solid var(--rule-hard);
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}

.brief-row{border-top:1px solid var(--rule)}
.brief-row:first-of-type{border-top:0}
.brief-row:hover{background:#f6f8f8}
.brief-row.is-new{border-left:3px solid var(--ink);padding-left:15px}

.brief-id{
  font-family:var(--mono);font-size:12px;letter-spacing:-.02em;
  color:var(--ink-3);padding-top:1px;
}
.brief-area{font-size:13px;font-weight:500;line-height:1.4}

/* Problem text: clamped to two lines, full text already in the DOM. */
.problem-text{
  margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.brief-problem.is-expanded .problem-text{-webkit-line-clamp:unset;overflow:visible}
.problem-text.is-empty{color:var(--ink-3)}
.problem-toggle{
  background:none;border:0;padding:4px 0 0;cursor:pointer;
  font:500 11.5px var(--sans);color:var(--ink-3);text-decoration:underline;
}
.problem-toggle:hover{color:var(--ink)}
.problem-toggle[hidden]{display:none}

.brief-status{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.status-badge{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  border:1px solid var(--rule);padding:4px 8px;white-space:nowrap;
}
.status-processing,
.status-saving{
  color:var(--ink);border-color:var(--ink);background:#eef2f2;
  animation:job-pulse 1.6s ease-in-out infinite;
}
.status-complete{color:var(--t1);border-color:var(--t1);background:rgba(31,95,78,.06)}
.status-link a{font-size:12px;color:var(--ink);font-weight:600}

.brief-date{
  display:flex;flex-direction:column;gap:1px;
  font-size:12px;color:var(--ink-2);
}
.brief-date small{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;color:var(--ink-3);
}

/* brief flash when a row's status changes under the poll */
.brief-row.just-updated{animation:row-flash 2s ease-out}
@keyframes row-flash{
  0%{background:#e4ecea}
  100%{background:transparent}
}

.briefs-empty{
  border:1px dashed var(--rule-hard);background:var(--card);
  padding:44px 28px;text-align:center;
}
.briefs-empty p{margin:0 0 14px;font-size:14px;color:var(--ink-2)}

@media(max-width:1040px){
  .briefs-head{display:none}
  .brief-row{
    grid-template-columns:1fr;gap:7px;padding:16px 18px;
  }
  .brief-row.is-new{padding-left:15px}
  .brief-id::before{content:"ID ";color:var(--ink-3)}
  .brief-area{font-size:15px;font-weight:600}
  .brief-status{flex-direction:row;align-items:center;gap:10px}
}

@media(prefers-reduced-motion:reduce){
  .status-processing,.status-saving,.brief-row.just-updated{animation:none}
}