/* ---------- Approach mocks ----------------------------------------------
   Small coded product mocks that sit under each approach step in a case
   study: an IDE agent panel, a file, a Figma tool call, a Notion space.
   Each is a neutral product skin inside the site's hard-edged frame, with
   a Departure Mono caption in the "Label · punchline" form. Everything is
   static markup, no images, so the text stays readable and searchable. */

.main > .ax-mock,
.main > .caseStudyInProgress > .ax-mock {
    box-sizing: border-box;
    width: calc(var(--content-col) - var(--gap) / 2);
    max-width: none;
    margin: 1.5rem 0 2rem;
    margin-left: calc(var(--heading-col) + var(--gap) / 2);
}
@media only screen and (max-width: 768px) {
    .main > .ax-mock,
    .main > .caseStudyInProgress > .ax-mock {
        float: none;
        clear: both;
        width: 100%;
        margin-left: 0;
    }
}

.ax-mock {
    --ax-ink: #212121;
    --ax-dim: #6b6b6b;
    --ax-line: #e4e4e4;
    --ax-soft: #f6f6f4;
    --ax-ok: #1f7a4d;
    --ax-no: #a23a22;
    --ax-warn: #8a5a00;
    --ax-warn-bg: #fff4d6;
    /* one type scale for every mock: body, secondary, uppercase labels */
    --ax-fs: 10.5px;
    --ax-fs-sm: 9.5px;
    --ax-fs-xs: 8.5px;
    --ax-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    text-align: left;
}

.ax-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 560px) { .ax-row { grid-template-columns: 1fr; } }

/* window */
.ax-win {
    border: 1.5px solid var(--frgd);
    border-radius: 8px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--shadow);
    overflow: hidden;
    color: var(--ax-ink);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif;
    font-size: var(--ax-fs);
    line-height: 1.5;
    min-width: 0;
}
.ax-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: var(--ax-soft);
    border-bottom: 1px solid var(--ax-line);
    font-size: var(--ax-fs-sm); color: var(--ax-dim);
    white-space: nowrap; overflow: hidden;
}
.ax-bar::before {
    content: ""; flex: none; width: 34px; height: 8px;
    background:
        radial-gradient(circle at 4px 4px, #d9d9d6 3.5px, transparent 4px),
        radial-gradient(circle at 17px 4px, #d9d9d6 3.5px, transparent 4px),
        radial-gradient(circle at 30px 4px, #d9d9d6 3.5px, transparent 4px);
}
.ax-bar b { color: var(--ax-ink); font-weight: 600; }
.ax-bar .sp { margin-left: auto; }
.ax-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ax-body > * { margin: 0; }

/* chat turns */
.ax-me {
    align-self: flex-end; max-width: 85%;
    background: #ececec; border-radius: 10px 0 10px 10px;
    padding: 7px 10px;
}
.ax-agent { display: flex; flex-direction: column; gap: 6px; }
.ax-agent > p { margin: 0; }

/* pills, tags */
.ax-pill {
    display: inline-flex; align-items: center; gap: 5px; width: fit-content;
    border: 1px solid var(--ax-line); border-radius: 99px;
    padding: 1px 8px; font-size: var(--ax-fs-sm); color: var(--ax-dim); background: #fff;
}
.ax-pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-ok); }
.ax-pill.on { background: var(--action); border-color: var(--frgd); color: var(--frgd); font-weight: 600; }
.ax-tag {
    display: inline-block; font-size: var(--ax-fs-xs); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
    justify-self: start; width: fit-content;
    border: 1px solid currentColor;
}
.ax-tag.rule { color: #2d5b8a; }
.ax-tag.rec  { color: var(--ax-ok); }
.ax-tag.q    { color: var(--ax-warn); }
.ax-tag.stop { color: #fff; background: var(--ax-no); border-color: var(--ax-no); }

/* check lists */
.ax-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.main .ax-list li { margin: 0; padding: 0 0 0 20px; position: relative; line-height: 1.45; }
.ax-list li::before {
    position: absolute; left: 0; top: 0;
    width: 14px; text-align: center; font-weight: 700;
}
.ax-list li.ok::before { content: "✓"; color: var(--ax-ok); }
.ax-list li.no::before { content: "✕"; color: var(--ax-no); }
.ax-list li.warn::before { content: "!"; color: var(--ax-warn); }
.ax-list li.ask::before { content: "?"; color: var(--frgd); }
.ax-list li.you {
    background: var(--action); border: 1px solid var(--frgd); border-radius: 6px;
    padding: 5px 8px 5px 26px; margin-top: 2px;
}
.ax-list li.you::before { left: 7px; top: 5px; }
.ax-list .dim { color: var(--ax-dim); }
.ax-h {
    font-size: var(--ax-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ax-dim);
}

/* code / file */
.ax-code {
    font-family: var(--ax-mono); font-size: var(--ax-fs-sm); line-height: 1.65;
    background: #fbfbfa; border: 1px solid var(--ax-line); border-radius: 6px;
    padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ax-code .c { color: var(--ax-dim); }
.ax-code .k { color: #2d5b8a; }
.ax-code .s { color: var(--ax-ok); }
.ax-code .stale { text-decoration: line-through; text-decoration-color: var(--ax-no); color: var(--ax-dim); }
.ax-code .flag {
    display: block; font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-size: var(--ax-fs-sm);
    color: var(--ax-warn); background: var(--ax-warn-bg); border-radius: 4px;
    padding: 1px 6px; margin: 1px 0 4px;
}
code.ax-inline { font-family: var(--ax-mono); font-size: var(--ax-fs-sm); background: #f1f1ef; border-radius: 4px; padding: 0 4px; }

.ax-banner {
    display: flex; gap: 8px; align-items: center;
    background: var(--ax-warn-bg); color: var(--ax-warn);
    border: 1px solid color-mix(in srgb, var(--ax-warn) 35%, transparent);
    border-radius: 6px; padding: 5px 9px; font-size: var(--ax-fs-sm);
}

/* meter */
.ax-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: var(--ax-fs-sm); color: var(--ax-dim); }
.ax-meter .track { height: 6px; background: #eee; border-radius: 99px; overflow: hidden; }
.ax-meter .fill { display: block; height: 100%; background: var(--ax-no); border-radius: 99px; }

/* option / decision cards */
.ax-opt {
    border: 1px solid var(--ax-line); border-radius: 7px; padding: 9px 10px;
    display: flex; flex-direction: column; gap: 6px; background: #fff;
}
.ax-opt.picked { border: 1.5px solid var(--frgd); box-shadow: 2px 2px 0 var(--shadow); background: var(--accent); }
.ax-opt h5 { margin: 0; font-size: var(--ax-fs); font-weight: 700; display: flex; justify-content: space-between; gap: 6px; align-items: center; }

/* risk chip + anatomy */
.ax-chip {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    border: 1px solid #e0b24a; background: #fff6df; color: #6b4a00;
    border-radius: 99px; padding: 3px 11px; font-size: var(--ax-fs); font-weight: 600;
}
.ax-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a31a; }
.ax-anat { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: var(--ax-fs); margin: 0; }
.ax-anat dt { color: var(--ax-dim); font-size: var(--ax-fs-sm); white-space: nowrap; }
.ax-anat dd { margin: 0; }
.ax-rules { display: flex; flex-wrap: wrap; gap: 5px; }

/* notion-ish database rows */
.ax-db { display: flex; flex-direction: column; }
.ax-db > div {
    display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center;
    padding: 6px 4px; border-bottom: 1px solid var(--ax-line); font-size: var(--ax-fs);
}
.ax-db > div:last-child { border-bottom: 0; }
.ax-db .material-symbols-outlined { font-size: 13px; color: var(--ax-dim); }
.ax-db small { color: var(--ax-dim); font-size: var(--ax-fs-sm); white-space: nowrap; }
.ax-db b { font-weight: 600; }

/* two table shells */
.ax-shell { border: 1px solid var(--ax-line); border-radius: 6px; overflow: hidden; font-size: var(--ax-fs-sm); }
.ax-shell .hd { background: var(--ax-soft); padding: 4px 8px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.ax-shell .r { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 6px; padding: 5px 8px; border-top: 1px solid var(--ax-line); }
.ax-shell .r.four { grid-template-columns: 1.2fr .9fr .8fr .9fr; }
.ax-shell i { display: block; height: 5px; border-radius: 3px; background: #e2e2df; align-self: center; }
.ax-shell i.w6 { width: 60%; } .ax-shell i.w8 { width: 80%; } .ax-shell i.w4 { width: 40%; }
.ax-shell i.hl { background: var(--action); outline: 1px solid var(--frgd); }

/* classified answers */
.ax-cls { display: flex; flex-direction: column; gap: 7px; }
.ax-cls > div {
    display: grid; grid-template-columns: 136px 1fr; gap: 10px; align-items: start;
    padding-bottom: 7px; border-bottom: 1px solid var(--ax-line);
}
.ax-cls > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ax-cls p { margin: 0; }
.ax-cls small { display: block; color: var(--ax-dim); font-size: var(--ax-fs-sm); }
@media (max-width: 560px) { .ax-cls > div { grid-template-columns: 1fr; gap: 3px; } }

/* caption, as on the Cense slides: "Label · punchline" */
.ax-mock > figcaption {
    margin-top: 10px;
    font-family: var(--font-meta);
    font-size: var(--text-functional-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--frgd) 65%, transparent);
}
.ax-mock > figcaption b { color: var(--frgd); font-weight: 400; }
.ax-mock .dim { color: var(--ax-dim); font-weight: 400; }
.ax-body.ax-row { display: grid; }
@media (max-width: 560px) { .ax-body.ax-row { grid-template-columns: 1fr; } }

/* Approach steps: a hard rule above each numbered step so the eight stages
   read as separate chapters instead of one long run of text and mocks. */
.main > h3[id^="approach-"],
.main > .caseStudyInProgress > h3[id^="approach-"] {
    margin-top: 3.5rem !important;
    padding-top: 1.25rem;
    border-top: 1.5px solid var(--frgd);
}
.main > h2 + h3[id^="approach-"],
.main > p + h3[id="approach-1"] {
    margin-top: 2.25rem !important;
}