/* ---------- 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; } }

/* ---------- Cursor skin --------------------------------------------------
   The agent-panel mocks wear Cursor's own dark theme inside the site frame:
   the logo and chat tab in the bar, the prompt as a bordered box, quiet
   "Thought / Read / Called" step rows, and the composer with its Agent and
   model pickers at the foot. The one yellow row is still the human's call. */
.ax-win.ax-cursor {
    --ax-ink: #d8d8dd;
    --ax-dim: #8e8e96;
    --ax-line: #2f2f31;
    --ax-soft: #141414;
    --ax-ok: #5fd08f;
    --ax-no: #f47067;
    --ax-warn: #e5b95c;
    background: #181818;
}
.ax-cursor .ax-bar { padding: 7px 10px; }
.ax-cursor .ax-bar::before { content: none; }
.ax-cursor .ax-bar b { display: inline-flex; align-items: center; gap: 6px; }
.ax-logo { flex: none; fill: currentColor; }
/* the open chat's tab: lit, with the bar's edge cut away under it */
.ax-cursor .ax-tab {
    align-self: stretch;
    margin: -7px 0 -8px;
    padding: 7px 10px 8px;
    border-inline: 1px solid var(--ax-line);
    background: #181818;
    color: var(--ax-ink);
    overflow: hidden; text-overflow: ellipsis;
}
.ax-cursor .ax-pill { background: transparent; border-color: #3a3a3d; }
.ax-cursor .ax-me {
    align-self: stretch; max-width: none;
    background: #212123; border: 1px solid #3a3a3d; border-radius: 8px;
}
.ax-step { margin: 0; font-size: var(--ax-fs-sm); color: var(--ax-dim); }
.ax-step b { font-weight: 500; color: color-mix(in srgb, var(--ax-ink) 80%, transparent); }
.ax-step span { opacity: .75; }
.ax-step span::before { content: "· "; }
.ax-cursor .ax-agent > .ax-h { margin-top: 4px; }
.ax-cursor .ax-code { background: #1f1f21; }
.ax-cursor .ax-code .k { color: #83d6c5; }
.ax-cursor .ax-code .s { color: #e394dc; }
.ax-cursor code.ax-inline { background: #2a2a2d; color: #e6e6ea; }
.ax-cursor .ax-list li.you { color: var(--frgd); }
.ax-cursor .ax-tag.rule { color: #87c3ff; }
.ax-cursor .ax-tag.stop { color: #181818; }

.ax-composer {
    display: flex; flex-direction: column; gap: 6px;
    margin: 0 10px 10px; padding: 8px 9px 7px;
    border: 1px solid #3a3a3d; border-radius: 8px;
    background: #212123;
    font-size: var(--ax-fs-sm); color: var(--ax-dim);
}
.ax-composer > p { margin: 0; opacity: .7; }
.ax-ctx {
    width: fit-content; padding: 0 6px;
    border: 1px solid #3a3a3d; border-radius: 4px;
    font-family: var(--ax-mono); font-size: var(--ax-fs-xs);
}
.ax-composer__row { display: flex; align-items: center; gap: 10px; }
.ax-mode { padding: 1px 8px; border-radius: 99px; background: #303033; color: var(--ax-ink); }
.ax-send {
    display: grid; place-items: center; margin-left: auto;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--ax-ink); color: #181818; font-weight: 700; line-height: 1;
}

/* 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;
}

/* ---------- Mail, ticket, meeting and filter skins ----------------------
   Used on the Case Studies Revamp page: an inbox, a Jira queue and backlog,
   an email thread, a Teams invite, an intranet survey and the selector.
   Markup is divs and spans only, so the site's p/li rules never leak in. */

.ax-av {
    flex: none; display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #e9e7f5; color: #3b3563;
    font-size: var(--ax-fs-xs); font-weight: 700; letter-spacing: .02em;
}
.ax-av.me { background: var(--action); color: var(--frgd); outline: 1px solid var(--frgd); }
.ax-av.bu { background: #e3f0ea; color: #1f5a3f; }
.ax-av.sa { background: #fde8e3; color: #8a2f1c; }

/* inbox rows */
.ax-mail { display: flex; flex-direction: column; }
.ax-mail > div {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px;
    padding: 7px 2px; border-bottom: 1px solid var(--ax-line);
}
.ax-mail > div:last-child { border-bottom: 0; }
.ax-mail > div > div > span, .ax-mail small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-mail .who { color: var(--ax-dim); }
.ax-mail .subj { color: var(--ax-ink); }
.ax-mail small { color: var(--ax-dim); font-size: var(--ax-fs-sm); }
.ax-mail time { color: var(--ax-dim); font-size: var(--ax-fs-sm); white-space: nowrap; }
.ax-mail .new .who, .ax-mail .new .subj { font-weight: 700; color: var(--ax-ink); }
.ax-mail .new { box-shadow: inset 2px 0 0 #2d5b8a; }

/* Jira rows and status lozenges */
.ax-jira { display: flex; flex-direction: column; }
.ax-jira > div {
    display: grid; grid-template-columns: 12px 52px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    padding: 6px 2px; border-bottom: 1px solid var(--ax-line);
}
.ax-jira > div:last-child { border-bottom: 0; }
.ax-jira .key { font-family: var(--ax-mono); font-size: var(--ax-fs-sm); color: #2d5b8a; white-space: nowrap; }
.ax-jira .sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-jira .ty { width: 12px; height: 12px; border-radius: 3px; background: #4bade8; }
.ax-jira .ty.task { background: #4bade8; }
.ax-jira .ty.q { background: #904ee2; border-radius: 50%; }
.ax-jira .ty.bug { background: #e5493a; border-radius: 50%; }
.ax-jira .loop { background: var(--ax-warn-bg); }
.ax-jira .grp {
    display: block; padding: 5px 2px 3px; border-bottom: 1px solid var(--ax-line);
    font-size: var(--ax-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-dim);
}
.ax-jira .grp.loop { color: var(--ax-warn); }
.ax-loz {
    display: inline-block; white-space: nowrap; border-radius: 3px; padding: 0 5px;
    font-size: var(--ax-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #dfe1e6; color: #42526e;
}
.ax-loz.prog { background: #deebff; color: #0747a6; }
.ax-loz.done { background: #e3fcef; color: #006644; }
.ax-loz.wait { background: #eae6ff; color: #403294; }
.ax-loz.re { background: var(--ax-warn-bg); color: var(--ax-warn); outline: 1px solid color-mix(in srgb, var(--ax-warn) 35%, transparent); }

/* email thread */
.ax-thread { display: flex; flex-direction: column; gap: 8px; }
.ax-subj { font-size: 12px; font-weight: 700; color: var(--ax-ink); line-height: 1.35; }
.ax-msg { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--ax-line); }
.ax-msg .hd { display: flex; justify-content: space-between; gap: 8px; color: var(--ax-dim); font-size: var(--ax-fs-sm); }
.ax-msg .hd b { color: var(--ax-ink); font-weight: 600; font-size: var(--ax-fs); }
.ax-msg .tx { display: block; margin-top: 2px; }
.ax-msg.folded { color: var(--ax-dim); font-size: var(--ax-fs-sm); }
.ax-msg.folded .ax-av { background: transparent; border: 1px dashed var(--ax-line); color: var(--ax-dim); }
.ax-diff { font-family: var(--ax-mono); font-size: var(--ax-fs-sm); }
.ax-diff .del { color: var(--ax-no); text-decoration: line-through; }
.ax-diff .add { color: var(--ax-ok); }

/* meeting card */
.ax-meet { display: flex; flex-direction: column; gap: 8px; }
.ax-meet .when { display: flex; gap: 10px; align-items: center; }
.ax-meet .day {
    flex: none; width: 36px; border: 1px solid var(--ax-line); border-radius: 6px; overflow: hidden; text-align: center;
    font-size: var(--ax-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.ax-meet .day span { display: block; background: #5b5fc7; color: #fff; padding: 1px 0; }
.ax-meet .day b { display: block; font-size: 14px; line-height: 1.5; color: var(--ax-ink); }
.ax-meet .t { font-size: 12px; font-weight: 700; line-height: 1.3; }
.ax-meet .ax-faces { display: flex; align-items: center; }
.ax-meet .ax-faces .ax-av { margin-right: 3px; }
.ax-meet .ax-faces .more { margin-left: 12px; color: var(--ax-dim); font-size: var(--ax-fs-sm); }
.ax-meet .agenda { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid var(--ax-line); }
.ax-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-btn {
    display: inline-block; border: 1px solid var(--ax-line); border-radius: 5px; padding: 2px 10px;
    font-size: var(--ax-fs-sm); font-weight: 600; background: #fff; color: var(--ax-ink);
}
.ax-btn.pri { background: #5b5fc7; border-color: #5b5fc7; color: #fff; }
.ax-btn.on { background: var(--action); border-color: var(--frgd); color: var(--frgd); }

/* survey widget */
.ax-q { display: flex; flex-direction: column; gap: 6px; }
.ax-q + .ax-q { padding-top: 10px; border-top: 1px solid var(--ax-line); }
.ax-q .lbl { font-weight: 600; }
.ax-scale { display: flex; gap: 4px; }
.ax-scale span {
    display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ax-line); border-radius: 50%;
    font-size: var(--ax-fs-sm); color: var(--ax-dim);
}
.ax-field {
    border: 1px solid var(--ax-line); border-radius: 5px; padding: 5px 8px; min-height: 30px;
    color: var(--ax-ink); background: #fbfbfa;
}

/* selector: filters, range, result cards */
.ax-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.ax-drop {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ax-line); border-radius: 5px;
    padding: 2px 8px; font-size: var(--ax-fs-sm); background: #fff; white-space: nowrap;
}
.ax-drop::after { content: "▾"; color: var(--ax-dim); font-size: 8px; }
.ax-drop.set { border-color: var(--frgd); background: var(--accent); font-weight: 600; }
.ax-drop.more::after { content: none; }
.ax-range { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: var(--ax-fs-sm); color: var(--ax-dim); }
.ax-range .rail { position: relative; height: 6px; margin: 6px 0; border-radius: 99px; background: #eee; }
.ax-range .rail i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--frgd); }
.ax-range .rail b {
    position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--frgd);
}
.ax-range .stops { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--ax-fs-xs); }
.ax-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .ax-cards { grid-template-columns: 1fr; } }
.ax-card { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--ax-line); border-radius: 6px; overflow: hidden; }
.ax-card .img { height: 44px; background: repeating-linear-gradient(135deg, #f1f1ef 0 6px, #e9e9e6 6px 12px); }
.ax-card .t { padding: 0 8px; font-weight: 700; line-height: 1.3; }
.ax-card .tags { padding: 0 8px; display: flex; flex-wrap: wrap; gap: 3px; }
.ax-card .tags span { font-size: var(--ax-fs-xs); background: var(--ax-soft); border-radius: 3px; padding: 0 4px; color: var(--ax-dim); }
.ax-card .go { padding: 0 8px 8px; color: #2d5b8a; font-weight: 600; font-size: var(--ax-fs-sm); }
.ax-count { display: flex; justify-content: space-between; color: var(--ax-dim); font-size: var(--ax-fs-sm); }
.ax-cls.stack > div { grid-template-columns: 1fr; gap: 3px; }
.ax-jira.compact > div { grid-template-columns: 12px minmax(0, 1fr); align-items: start; }
.ax-jira.compact .ty { margin-top: 3px; }
.ax-jira.compact .st { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px; min-width: 0; }
.ax-jira.compact .sum { flex-basis: 100%; white-space: normal; }
.ax-mail .subj { white-space: normal; }
.ax-diff .ln { display: block; }
.ax-count span:last-child { white-space: nowrap; }
@media (max-width: 560px) { .ax-cards .ax-card:nth-child(n+3) { display: none; } }

/* ---------- Process boards ----------------------------------------------
   A workshop canvas, framework grid, sheet, option lanes or wireflow, drawn
   zoomed out inside the window skin: the shape and volume of the work read,
   the detail does not. One inline SVG per board (scripts/process-boards.py),
   so it scales as a unit. They are pictures: no zoom, no links, no focus. */
.ax-board__canvas {
    display: block; width: 100%; height: auto;
    background: #fbfbfa;
    pointer-events: none; user-select: none; -webkit-user-select: none;
}
.ax-board text { font-family: inherit; }
.bd-dot { fill: #dcdcd8; }
.bd-f { fill: #fff; stroke: #c9c9c4; stroke-width: 1; }
.bd-k { fill: #6b6b6b; }
.bd-i { fill: #ececea; }
.bd-g { fill: #dededa; }
.bd-gk { fill: #212121; fill-opacity: .28; }
.bd-gl { fill: none; stroke: #dededa; stroke-width: 1; }
.bd-h { fill: var(--action); stroke: var(--frgd); stroke-width: 1.2; }
.bd-ovh { fill: none; stroke: var(--frgd); stroke-width: 2.5; }
.bd-ovk { fill: #212121; fill-opacity: .4; }
.bd-no { fill: #fbe9e5; stroke: #e2b1a6; stroke-width: 1; stroke-dasharray: 4 3; }
.bd-hd { fill: #fff; stroke: #212121; stroke-width: 1.5; }
.bd-hl { fill: #ececea; stroke: #212121; stroke-width: 1.5; }
.bd-c { fill: #fff; stroke: #dededa; stroke-width: 1; stroke-dasharray: 3 3; }
.bd-chip { fill: #f6f6f4; stroke: #c9c9c4; stroke-width: 1; }
.bd-t { font-size: 22px; font-weight: 600; fill: #212121; }
.bd-T { font-size: 28px; font-weight: 700; fill: #212121; }
.bd-N { font-size: 40px; font-weight: 700; fill: #212121; }
.bd-Nw { font-size: 26px; font-weight: 700; fill: #fff; }
.bd-ts { font-size: 17px; font-weight: 500; fill: #4a4a4a; }
.bd-tn { font-size: 17px; font-weight: 500; fill: #212121; }
.bd-th { font-size: 17px; font-weight: 600; fill: #fff; }
.bd-l { fill: none; stroke: #b5b5b0; stroke-width: 1.2; }
.bd-lk { fill: none; stroke: #212121; stroke-width: 1.5; }
.bd-ld { fill: none; stroke: #9a9a95; stroke-width: 1.5; stroke-dasharray: 5 5; }
.bd-lno { fill: none; stroke: #a23a22; stroke-width: 1.5; }
.bd-ah { fill: #212121; }
.bd-r { fill: #212121; fill-opacity: .03; stroke: #c9c9c4; stroke-width: 1; stroke-dasharray: 5 4; }
.bd-rk { fill: #fff; stroke: #212121; stroke-width: 1.5; }
.bd-rok { fill: #e6f4ec; stroke: #9fd0b4; stroke-width: 1; }
.bd-rno { fill: #fbe9e5; stroke: #e2b1a6; stroke-width: 1; }
.bd-s1 { fill: #ffe58a; }
.bd-s2 { fill: #ffc9d4; }
.bd-s3 { fill: #bfe3ff; }
.bd-s4 { fill: #c9f0c2; }
.bd-ring { fill: #fff; stroke: #6b6b6b; stroke-width: 2.5; }
.bd-vote { fill: #212121; }
.bd-ok { fill: #1f7a4d; }
.bd-bad { fill: #a23a22; }
.bd-tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-pok { fill: #bfe5cf; }
.bd-pwarn { fill: #ffe3a1; }
.bd-pno { fill: #f3c0b5; }
.bd-ed { fill: #23252b; }
.bd-edl { fill: #5d6370; }