/* An artifact on the Tests page (#230): a chart that takes the whole window.
   Tokens come from app.css (--blue, --green, --ink, --muted, --line, --bg).
   The three column colors and the four box kinds are the original picture's. */
:root {
  --art-slate: #4b5563;
  /* #262: the colors a column added by staff can take. Dark enough for the
     header's white words in both themes, like slate. */
  --art-amber-col: #8a5a00; --art-teal: #0f766e; --art-purple: #5b3fa0;
  --art-amber: #c9890f; --art-amber-bg: #fff7e6;
  --art-money: #1f9d55; --art-money-bg: #eefaf2;
  --art-exists: #8a97a3;
  --art-shadow: 0 1px 2px rgba(20, 40, 60, .08);
  /* #264: colors that used to be written into their rules, so dark mode can
     redefine them. Light values are unchanged. */
  --art-chip-bg: #eef1f4;
  --art-homes-bg: #efe6fb; --art-homes-ink: #5b2d91;
  --art-hear-bg: #e3f6ea; --art-hear-ink: #00913f;
  --art-column-bg: rgba(3, 78, 162, .035);
}
html, body.artifact-body { height: 100%; }
body.artifact-body { display: block; min-height: 100vh; background: var(--bg); }
.artifact { display: flex; flex-direction: column; min-height: 100vh; }

/* The bar across the top: the way back, the title, and the walk-through. */
.artifact-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem; background: var(--card); border-bottom: 3px solid var(--green);
  position: sticky; top: 0; z-index: 30; }
.artifact-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--blue);
  font-weight: 700; text-decoration: none; padding: .35rem .7rem .35rem .4rem;
  border: 2px solid var(--blue); border-radius: 6px; white-space: nowrap; }
.artifact-back:hover { background: var(--tint); }
.artifact-back svg { width: 1.1rem; height: 1.1rem; }
.artifact-heading { flex: 1 1 24rem; min-width: 0; }
.artifact-heading h1 { font-size: 1.2rem; margin: 0; line-height: 1.25; color: var(--blue); }
.artifact-heading p { margin: .1rem 0 0; color: var(--muted); }
.artifact-tools { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.artifact-tools .button { padding: .25rem .7rem; font-size: .9rem; line-height: 1.4; }
.artifact-where { min-width: 7rem; text-align: center; font-weight: 600; font-size: .9rem; color: var(--muted); }

/* The stage: the chart, and the detail panel beside it once a step is picked. */
.artifact-stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.artifact-stage.has-detail { grid-template-columns: minmax(0, 1fr) 24rem; }
.artifact-main { padding: 1rem 1.25rem 1.5rem; min-width: 0; }

/* The key, as filters. */
.artifact-key { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center;
  margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); }
.key-item { display: inline-flex; align-items: center; gap: .4rem; background: none;
  border: 1px solid transparent; border-radius: 999px; padding: .15rem .6rem .15rem .35rem;
  font: inherit; color: inherit; cursor: pointer; }
button.key-item:hover { background: var(--card); border-color: var(--line); }
button.key-item[aria-pressed="true"] { background: var(--card); border-color: var(--ink); color: var(--ink); }
.key-note { cursor: default; }
.key-swatch { width: 1.1rem; height: .75rem; border: 2px solid var(--art-exists); border-radius: 3px; background: var(--card); }
.kind-design .key-swatch { border-color: var(--blue); }
.kind-decision .key-swatch { border-color: var(--art-amber); background: var(--art-amber-bg); }
/* #258: decisions are diamonds, in the key as on the chart. */
.kind-decision .key-swatch { width: .8rem; height: .8rem; border-radius: 1px; transform: rotate(45deg); }
.kind-money .key-swatch { border-color: var(--art-money); background: var(--art-money-bg); }
.key-dash { width: 1.3rem; border-top: 2px dashed var(--art-slate); }

/* The grid: a column per board column (#262: 1 to 6, three by default), one
   row for the headers, one per row of boxes. The sections and lists are
   display: contents so every box sits in the one grid and the rows line up
   across the columns, as they do in the picture. Each section says which
   grid column it takes (--col), and its boxes inherit that. */
.artifact-main:has(.artifact-grid.is-wide) { overflow-x: auto; }
.artifact-grid { position: relative; display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows), auto);
  column-gap: 2.75rem; row-gap: 1.2rem; align-items: start; }
.artifact-column, .column-steps { display: contents; }
.column-steps { list-style: none; margin: 0; padding: 0; }
.artifact-grid.is-wide { grid-template-columns: repeat(var(--cols), minmax(13rem, 1fr)); }
.artifact-column > *, .artifact-column .step-cell { grid-column: var(--col); }
.column-bg { grid-row: 2 / -1; align-self: stretch; margin: -.6rem; border-radius: 10px;
  background: var(--art-column-bg); border: 1px dashed var(--line); z-index: 0; }
.column-head { grid-row: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: .05rem; width: 100%; padding: .55rem .9rem; border: 0; border-radius: 8px;
  color: #fff; text-align: left; font: inherit; cursor: pointer; z-index: 1; }
.column-head strong { font-family: "Nunito Sans", Arial, sans-serif; font-size: 1.05rem; }
.column-head .small { color: inherit; opacity: .9; }
.tone-blue .column-head { background: var(--brand); }
.tone-green .column-head { background: var(--green-dark); }
.tone-slate .column-head { background: var(--art-slate); }
.tone-amber .column-head { background: var(--art-amber-col); }
.tone-teal .column-head { background: var(--art-teal); }
.tone-purple .column-head { background: var(--art-purple); }
.column-head[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.step-cell { grid-row: calc(var(--row) + 2); z-index: 2; min-width: 0; }

/* A box. */
.step { display: flex; flex-direction: column; gap: .3rem; width: 100%; text-align: left;
  font: inherit; color: var(--ink); background: var(--card); cursor: pointer;
  border: 2px solid var(--art-exists); border-radius: 8px; padding: .65rem .85rem;
  box-shadow: var(--art-shadow); transition: box-shadow .15s, opacity .2s, transform .15s; }
.step:hover { box-shadow: 0 4px 14px rgba(3, 78, 162, .16); transform: translateY(-1px); }
.step:focus-visible, .column-head:focus-visible, .key-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.step.kind-design { border-color: var(--blue); }
.step.kind-decision { border-color: var(--art-amber); background: var(--art-amber-bg); }
.step.kind-money { border-color: var(--art-money); background: var(--art-money-bg); }
.step[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 0 6px 18px rgba(0, 0, 0, .14); }
.step-head { font-family: "Nunito Sans", Arial, sans-serif; font-weight: 700; font-size: 1rem;
  line-height: 1.3; display: flex; align-items: center; gap: .5rem; }
.step-number { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff;
  background: var(--art-exists); font-size: .8rem; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; }
.kind-design .step-number { background: var(--brand); }
.kind-decision .step-number { background: var(--art-amber); }
.kind-money .step-number { background: var(--art-money); }
.step-text { font-size: .9rem; line-height: 1.45; }
.step-where { display: none; }
.step-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.step-tag { font-size: .72rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
  background: var(--art-chip-bg); color: var(--muted); }
/* #258: a decision. The button keeps its rectangle for the arrows to meet at
   its edge midpoints -- the diamond's four points -- and draws the diamond
   inside it. Only the title shows; the words are in the panel and the list. */
.step.is-decision { position: relative; isolation: isolate; max-width: 20rem; min-height: 9.5rem;
  margin: 0 auto; padding: 2.2rem 4.4rem; align-items: center; justify-content: center; text-align: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.step.is-decision .step-head { justify-content: center; flex-direction: column; gap: .3rem; font-size: .95rem; }
.step.is-decision .step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step-diamond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(20, 40, 60, .12)); }
.step-diamond polygon { fill: var(--art-amber-bg); stroke: var(--art-amber); stroke-width: 2; vector-effect: non-scaling-stroke; }
.step.is-decision:hover, .step.is-decision[aria-pressed="true"],
.artifact-grid.is-focused .step.is-decision.is-lit { box-shadow: none; }
.step.is-decision:hover .step-diamond, .artifact-grid.is-focused .step.is-decision.is-lit .step-diamond { filter: drop-shadow(0 4px 8px rgba(3, 78, 162, .22)); }
.step.is-decision[aria-pressed="true"] .step-diamond polygon { stroke: var(--ink); stroke-width: 4; }
.step-tag.tag-homes { background: var(--art-homes-bg); color: var(--art-homes-ink); }
.step-tag.tag-hear { background: var(--art-hear-bg); color: var(--art-hear-ink); }

/* Dimming: when a kind, a column or a step is picked, everything else steps back. */
.artifact-grid.is-focused .step:not(.is-lit) { opacity: .32; }
.artifact-grid.is-focused .handoff:not(.is-lit) { opacity: .18; }
.artifact-grid.is-focused .step.is-lit { box-shadow: 0 4px 14px rgba(3, 78, 162, .16); }

/* The arrows: an SVG the size of the grid, laid over it, redrawn from where
   the boxes are. pointer-events none so the boxes under it stay clickable. */
.artifact-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible; }
.handoff { fill: none; stroke: var(--art-slate); stroke-width: 2.25; transition: opacity .2s; }
.handoff.is-shared { stroke-dasharray: 7 5; }
.handoff.is-lit { stroke: var(--blue); stroke-width: 3.25; }
#arrow-head path { fill: var(--art-slate); }
.handoff-label { font: 700 .78rem "Open Sans", Arial, sans-serif; fill: var(--ink);
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; transition: opacity .2s; }
.handoff-label.is-lit { fill: var(--blue); }
.artifact-grid.is-focused .handoff-label:not(.is-lit) { opacity: .18; }
.list-kind { font-weight: 700; color: var(--muted); }

.artifact-source { margin: 1.2rem 0 0; color: var(--muted); max-width: 70rem; }

/* The detail panel. */
.artifact-detail { position: sticky; top: 4.2rem; align-self: start; max-height: calc(100vh - 4.2rem);
  overflow: auto; background: var(--card); border-left: 1px solid var(--line);
  padding: 1rem 1.25rem 1.25rem; }
.artifact-detail[hidden] { display: none; }
.detail-close { float: right; border: 0; background: none; font-size: 1.4rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: .1rem .35rem; }
.detail-close:hover { color: var(--ink); }
.detail-column { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.artifact-detail h2 { font-size: 1.15rem; margin: .2rem 0 .4rem; color: var(--blue); }
.artifact-detail h3 { font-size: .85rem; margin: 1rem 0 .3rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.artifact-detail ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.artifact-detail li { margin: .2rem 0; }
.artifact-detail li a { color: var(--blue); }
.artifact-detail .is-shared-note { color: var(--muted); }

/* The chart as a list: there for a screen reader and for a browser without
   the script, which also reads the handoffs out of it. */
.artifact-text { padding: 0 1.25rem 2rem; max-width: 60rem; }
body.has-script .artifact-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); padding: 0; }

/* Narrow: one column, in step order, no arrows; each box says where it sits.
   The detail panel becomes a sheet at the bottom. */
@media (max-width: 900px) {
  .artifact-main { padding: .75rem 1rem 1.25rem; }
  .artifact-grid, .artifact-grid.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: .7rem; }
  .artifact-column > *, .artifact-column .step-cell { grid-column: 1; }
  .column-head, .column-bg, .artifact-arrows { display: none; }
  .step-cell { grid-row: calc(var(--n) + 1); }
  .step-where { display: block; color: var(--muted); }
  .artifact-stage.has-detail { grid-template-columns: minmax(0, 1fr); }
  .artifact-detail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 55vh;
    border-left: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .14);
    border-radius: 12px 12px 0 0; z-index: 40; }
  .artifact-heading h1 { font-size: 1.05rem; }
  .artifact-heading p { display: none; }
  .artifact-bar { position: static; gap: .5rem; }
}

/* #236: native form controls make every editing operation keyboard accessible.
   #262: two tabs, and rows that look like cards, dragged by a handle (the
   arrow keys move a focused handle). Theme tokens, so dark mode applies. */
#board-editor { width: min(1200px, 96vw); max-height: 94vh; padding: 1.4rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); }
#board-editor::backdrop, #board-preview::backdrop { background: #152e38aa; }
/* A display rule must not undo `hidden` (the card form is a grid). */
#board-editor [hidden] { display: none !important; }
.editor-header { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; position: sticky; top: -1.4rem; background: var(--card); z-index: 3; padding: .7rem 0; }
.editor-header h2 { margin-right: auto; }
.editor-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin: .5rem 0 1rem; }
.editor-tabs [role=tab] { font: inherit; font-weight: 700; padding: .5rem 1.1rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; color: var(--muted); cursor: pointer; }
.editor-tabs [role=tab][aria-selected=true] { color: var(--blue); border-bottom-color: var(--blue); }
.editor-tabs [role=tab]:focus-visible, .drag-handle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.editor-fields, .editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.editor-fields label, .row-fields label { display: grid; gap: .3rem; }
.editor-fields input, .editor-fields textarea, .editor-fields select,
.row-fields input, .row-fields select { width: 100%; padding: .5rem; box-sizing: border-box; }
.editor-fields textarea { min-height: 5rem; }
.editor-fields .wide { grid-column: 1 / -1; }
#panel-setup h3 { margin: 1.4rem 0 .2rem; }
.editor-list { list-style: none; margin: .7rem 0; padding: 0; display: grid; gap: .5rem; }
.editor-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--art-shadow); }
.editor-row.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.editor-row.is-dragging { opacity: .45; }
.editor-row.drop-before { box-shadow: 0 -3px 0 var(--blue); }
.editor-row.drop-after { box-shadow: 0 3px 0 var(--blue); }
.drag-handle { display: inline-flex; padding: .2rem; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.drag-handle .icon { width: 20px; height: 20px; }
.row-body { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: baseline; }
.row-body strong { overflow-wrap: anywhere; }
.row-number { grid-row: span 2; min-width: 1.7rem; text-align: center; font-weight: 700; color: var(--muted); }
.row-meta { grid-column: 2; color: var(--muted); }
.link-row .row-body { display: block; }
.row-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1.6fr minmax(8rem, .7fr); gap: .6rem; }
.row-fields label:last-child { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .4rem; }
.row-fields label:last-child select { grid-column: 2; }
.tone-swatch { align-self: center; width: 1.1rem; height: 1.1rem; border-radius: 4px; }
.tone-swatch.tone-blue { background: var(--blue); }
.tone-swatch.tone-green { background: var(--green-dark); }
.tone-swatch.tone-slate { background: var(--art-slate); }
.tone-swatch.tone-amber { background: var(--art-amber-col); }
.tone-swatch.tone-teal { background: var(--art-teal); }
.tone-swatch.tone-purple { background: var(--art-purple); }
#add-card, #add-column { display: inline-flex; align-items: center; gap: .35rem; }
#add-card .icon, #add-column .icon { width: 18px; height: 18px; }
#card-panel h4 { margin: 1.2rem 0 .2rem; }
#board-preview { width: 95vw; height: 92vh; }
#board-preview iframe { display: block; width: 100%; height: calc(100% - 3rem); border: 0; }
@media(max-width: 750px) { .editor-layout, .editor-fields, .row-fields { grid-template-columns: 1fr; } }
/* #262: a column that still holds cards cannot be removed; its trash can says why. */
#board-editor .button.icon-only.is-delete:disabled { cursor: not-allowed; opacity: .55; }
#board-editor .button.icon-only.is-delete:disabled .icon { color: var(--muted); }

/* #264: dark mode on a board. The board page does not go through base.html,
   so it now takes the same pre-paint lines (_theme_head.html), and app.css's
   tokens turn dark under it; these are the board's own. The column and step
   fills that carry white words stay dark in both modes (--brand, slate,
   amber, money); --exists is a border, so it only steps down. */
[data-theme="dark"] {
  --art-amber-bg: #3a2f12; --art-money-bg: #15301f;
  --art-exists: #71849a;
  --art-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --art-chip-bg: #2a333d;
  --art-homes-bg: #2d2542; --art-homes-ink: #c9b8f7;
  --art-hear-bg: #173a26; --art-hear-ink: #8fdcae;
  --art-column-bg: rgba(141, 189, 245, .05);
}
/* Slate arrows would sink into the dark page; they take the muted ink. */
[data-theme="dark"] .handoff { stroke: var(--muted); }
[data-theme="dark"] #arrow-head path { fill: var(--muted); }
[data-theme="dark"] .key-dash { border-top-color: var(--muted); }
[data-theme="dark"] .handoff.is-lit { stroke: var(--blue); }