/* Simulated app screens in the build demonstrations (inc/apps.php; owner review 17 Oct 2026, "Real workflow, neutral
   look"). One neutral window style for every app: the real app's layout, fields and statuses, but no vendor colours,
   fonts or logos. Status colours are generic (grey, amber, green, red) and all text meets WCAG AA on its background.
   Each window is a size container, so its layout follows the space it is given (hero cell, build page, phone): columns
   marked .opt drop out when it is narrow, .opt2 when it is very narrow. */
.app{--a-ink:#1F2328;--a-mute:#57606A;--a-line:#D0D7DE;--a-soft:#F6F8FA;--a-hl:#FFF5D1;--a-dark:#24292F;
  container-type:inline-size;margin:8px 0 0;background:#fff;color:var(--a-ink);border:1px solid var(--a-line);border-radius:8px;overflow:hidden;
  font:400 .78rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.app :where(p,ul,ol,dl,dd){margin:0}
.app :where(ul,ol){padding:0;list-style:none}
.app :where(b){font-weight:600}
.app-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--a-soft);border-bottom:1px solid var(--a-line);font-size:.72rem;color:var(--a-mute);white-space:nowrap}
.app-bar:before{content:"";flex:none;width:30px;height:8px;background:radial-gradient(circle,#C4CBD2 3.5px,transparent 4px) 0 0/11px 8px repeat-x}
.app-bar b{color:var(--a-ink);font-weight:700}
.app-path{min-width:0;overflow:hidden;text-overflow:ellipsis}
.app-bar em{margin-left:auto;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px dashed var(--a-mute);border-radius:3px;padding:0 5px}
.app-body{padding:10px 12px 12px}
.app-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:8px;font-size:.9rem;font-weight:700}
.app-h small{flex-basis:100%;font-size:.7rem;font-weight:400;color:var(--a-mute)}
.app-foot{margin-top:8px;font-size:.7rem;color:var(--a-mute)}
.app-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.66rem;font-weight:600;line-height:1.5;white-space:nowrap;background:#EAEEF2;color:#3D444D}
.app-pill.is-wait{background:#FFEFC2;color:#5E4300}
.app-pill.is-ok{background:#DAF2E1;color:#17602E}
.app-pill.is-bad{background:#FBE1E1;color:#8E1D1B}
.app-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:10px}
.app-btns span{padding:3px 12px;border:1px solid #AFB8C1;border-radius:4px;font-size:.72rem;font-weight:600;background:#fff}
.app-btns .is-primary{background:var(--a-dark);border-color:var(--a-dark);color:#fff}
.app-tabs{display:flex;flex-wrap:wrap;gap:0 14px;margin-bottom:8px;border-bottom:1px solid var(--a-line);font-size:.72rem;color:var(--a-mute)}
.app-tabs span{padding:2px 0 5px;margin-bottom:-1px;border-bottom:2px solid transparent}
.app-tabs .is-on{color:var(--a-ink);font-weight:600;border-bottom-color:var(--a-ink)}
.app-fields{display:grid;gap:3px;margin-bottom:8px}
.app-fields div{display:flex;justify-content:space-between;gap:10px}
.app-fields dt{color:var(--a-mute)}
.app-fields dd{text-align:right}
.app-fields.is-inline{display:flex;flex-wrap:wrap;gap:2px 16px}
.app-fields.is-inline div{justify-content:flex-start;gap:6px}
.app-fields.is-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px 12px}
.app-fields.is-grid div,.hs-about .app-fields div{display:grid;gap:0;align-content:start}
.app-fields.is-grid dt,.hs-about dt{font-size:.66rem}
.app-fields.is-grid dd,.hs-about dd{text-align:left;overflow-wrap:anywhere}
.app-fields.is-totals{width:min(100%,220px);margin:6px 0 0 auto}
.app-fields.is-totals div:last-child{padding-top:3px;border-top:2px solid var(--a-ink);font-weight:700}
.app-fields.is-totals div:last-child dt{color:var(--a-ink)}
.app-scroll{overflow-x:auto}
.app-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.app-table th,.app-table td{padding:4px 6px;border-bottom:1px solid var(--a-line);text-align:left;vertical-align:top;font-weight:400}
.app-table th:first-child,.app-table td:first-child{padding-left:0}
.app-table th:last-child,.app-table td:last-child{padding-right:0}
.app-table thead th{font-size:.66rem;font-weight:600;color:var(--a-mute);white-space:nowrap}
.app-table tbody th{font-weight:500}
.app-table .num{text-align:right;white-space:nowrap}
.app-table tr.is-hl>*{background:var(--a-hl)}
.app-checks{display:grid;gap:4px}
.app-checks li{display:flex;gap:8px;align-items:flex-start}
.app-checks span{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;font-size:.62rem;font-weight:800;background:#DAF2E1;color:#17602E}
.app-checks .is-bad span{background:#FFEFC2;color:#5E4300}
.app-decision{margin-top:8px;padding:6px 8px;border:1px solid var(--a-line);border-left:3px solid var(--a-dark);border-radius:4px;background:var(--a-soft)}

/* Simpro: job stage chevrons, then one box per cost centre; an unapproved variation is highlighted, as at invoicing */
.sp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;margin-bottom:6px}
.sp-title{font-size:.9rem;font-weight:700}
.sp-title span{margin-left:4px;font-weight:400;color:var(--a-mute)}
.sp-stages{display:flex;font-size:.64rem}
.sp-stages li{padding:2px 9px 2px 13px;margin-left:-3px;background:#EAEEF2;color:var(--a-mute);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%,6px 50%)}
.sp-stages li:first-child{margin-left:0;padding-left:8px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%)}
.sp-stages .is-on{background:var(--a-dark);color:#fff;font-weight:600}
.sp-cc{margin-top:6px;border:1px solid var(--a-line);border-radius:6px;overflow:hidden}
.sp-cch{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:4px 8px;background:var(--a-soft);font-size:.74rem}
.sp-cch small{color:var(--a-mute)}
.sp-cch .app-pill{margin-left:auto}
.sp-cc .app-table th,.sp-cc .app-table td{padding:3px 8px;border:0;border-top:1px solid var(--a-line)}
.sp-cc .app-table td:not(.num){color:var(--a-mute)}
.sp-cc.is-flag{border-color:#D9A520}
.sp-cc.is-flag .sp-cch,.sp-cc.is-flag .app-table>*>tr>*{background:var(--a-hl)}

/* Outlook: message list beside the reading pane; a draft is marked in red, as Outlook does */
.ol-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);margin:-10px -12px -12px}
.ol-list{padding:8px 0;border-right:1px solid var(--a-line);background:var(--a-soft)}
.ol-list .app-tabs{margin:0 10px 4px}
.ol-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 6px;padding:5px 10px;border-left:3px solid transparent}
.ol-list li b,.ol-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.ol-list li b{white-space:normal;overflow-wrap:anywhere} /* a long sender wraps instead of being cut (WB-DIA-12) */
.ol-list li span{grid-column:1/-1;color:var(--a-mute);white-space:normal}
.ol-list li small{grid-row:1;grid-column:2;font-size:.64rem;color:var(--a-mute)}
.ol-list li.is-on{background:#fff;border-left-color:var(--a-dark)}
.ol-list li.is-unread b{font-weight:700}
.ol-read{padding:10px 12px 12px}
.ol-subj{margin-bottom:6px;font-size:.9rem;font-weight:700}
.ol-from{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center;margin-bottom:8px}
.ol-av{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#DDE3E9;font-size:.68rem;font-weight:700}
.ol-from small{color:var(--a-mute)}
.ol-text{line-height:1.5}
.ol-text.is-draft{padding:8px 10px;border:1px solid var(--a-line);border-radius:4px}
.ol-draft{color:#A4211D;font-weight:600}

/* HubSpot: contact details beside the activity timeline */
.hs-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:12px}
.hs-feed{display:grid;gap:6px}
.hs-feed li{display:grid;padding-left:10px;border-left:2px solid var(--a-line)}
.hs-feed small{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--a-mute)}
.hs-deal{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:8px;padding:6px 8px;border:1px solid var(--a-line);border-radius:6px}
.hs-deal small{flex-basis:100%;font-size:.66rem;color:var(--a-mute)}

/* Jotform: a published form, questions with filled answers */
.jf-title{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--a-line);font-size:.92rem;font-weight:700}
.jf-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 12px}
.jf-q{display:grid;gap:2px}
.jf-q span{font-size:.7rem;font-weight:600}
.jf-q b{padding:3px 8px;border:1px solid #AFB8C1;border-radius:4px;font-weight:400}
.app-jotform .app-btns{justify-content:flex-start}

/* Airtable: grid view with row numbers and field-type marks */
.at-view{margin-left:auto;color:var(--a-ink)}
.app-table.is-grid th,.app-table.is-grid td{padding:3px 8px;border:1px solid var(--a-line);white-space:nowrap}
.app-table.is-grid thead th{background:var(--a-soft)}
.app-table.is-grid i{margin-right:4px;font-style:normal;color:var(--a-mute)}
.app-table .at-n{width:1%;text-align:center;font-size:.66rem;color:var(--a-mute)}

/* Sent email list */
.em-list li{display:grid;padding:6px 0;border-bottom:1px solid var(--a-line)}
.em-list li:first-child{padding-top:0}
.em-list li:last-child{padding-bottom:0;border-bottom:0}
.em-list small{font-size:.68rem;color:var(--a-mute)}
.em-list span{color:var(--a-mute)}

/* n8n: the canvas, trigger node rounded on the left; nodes run left to right, or top to bottom when narrow */
.n8-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:8px}
.n8-run{margin-left:auto;padding:2px 10px;border-radius:4px;background:var(--a-dark);color:#fff;font-size:.7rem;font-weight:600}
.n8-canvas{display:flex;gap:22px;padding:16px 12px;border:1px solid var(--a-line);border-radius:6px;background:#F5F5F5 radial-gradient(#CDD3D9 1px,transparent 1.2px) 0 0/14px 14px}
.n8-canvas li{position:relative;flex:1 1 0;min-width:0;display:grid;gap:1px;padding:7px 9px;background:#fff;border:1px solid #AFB8C1;border-radius:10px}
.n8-canvas li:not(:last-child):after{content:"";position:absolute;top:50%;left:100%;width:22px;height:2px;background:#8C959F}
.n8-canvas li.is-trigger{border-radius:22px 10px 10px 22px;padding-left:14px}
.n8-canvas li.is-ai{box-shadow:inset 3px 0 0 var(--orange,#FF6B00)}
.n8-canvas li.is-you{box-shadow:inset 3px 0 0 #D9A520}
.n8-canvas b{font-size:.74rem;line-height:1.25}
.n8-canvas small{font-size:.64rem;color:var(--a-mute);line-height:1.3}

/* Outcome artefacts (owner, 21 Oct 2026): what a choice leaves behind. The byline says who drafted it (Claude, the site's
   orange) and who chose, sent or approved it (a person, the site's yellow); the rest is the same neutral window. */
.ax-by{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--a-line);font-size:.7rem;color:var(--a-mute)}
.ax-by span{padding:1px 7px}
.ax-by .is-ai,.ax-by .is-you{border:1px solid var(--a-line);border-left:3px solid var(--orange,#FF6B00);border-radius:3px;background:var(--a-soft);color:var(--a-ink);font-weight:600}
.ax-by .is-you{border-left-color:#D9A520}
/* Email: From, To and when, the body (tracked changes marked), a table quoted in it, the attachment */
.ml-head{display:grid;gap:2px;padding-bottom:7px;border-bottom:1px solid var(--a-line)}
.ml-head div{justify-content:flex-start;gap:8px}
.ml-head dt{flex:none;width:2.8em}
.ml-head dd{min-width:0;text-align:left;overflow-wrap:anywhere}
.ml-body{display:grid;gap:6px;line-height:1.5}
.app-mail ins,.app-mail del{padding:0 1px;border-radius:2px}
.app-mail ins{text-decoration:none;background:#DAF2E1;color:#17602E;box-shadow:inset 0 -1px 0 #17602E}
.app-mail del{background:#FBE1E1;color:#8E1D1B}
.ml-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:8px;font-size:.7rem;color:var(--a-mute)}
.ml-tbl{margin:0}
.ml-tbl th,.ml-tbl td{padding:3px 6px}
.ml-tbl tbody tr:last-child>*{border-bottom:0}
.ml-att{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 8px;border:1px solid var(--a-line);border-radius:4px;font-size:.72rem}
.ml-att span{padding:0 4px;border-radius:2px;background:#FBE1E1;color:#8E1D1B;font-size:.62rem;font-weight:800}
.ol-read .ml-tbl{margin:6px 0}
.ol-read .ol-text+.ol-text{margin-top:6px}
/* Slack: the channel, then a message with its avatar, name, App tag and time, and a card of fields under it */
.sk-ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:-10px -12px 10px;padding:7px 12px;border-bottom:1px solid var(--a-line)}
.sk-ch b{font-size:.86rem}
.sk-ch small{font-size:.7rem;color:var(--a-mute)}
.sk-msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:1px 9px}
.sk-av{grid-row:span 3;display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#DDE3E9;font-weight:700}
.sk-av.is-app{background:var(--a-dark);color:#fff}
.sk-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.sk-who small{font-size:.7rem;color:var(--a-mute)}
.sk-app{padding:0 4px;border-radius:2px;background:#EAEEF2;color:var(--a-mute);font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sk-txt{line-height:1.45}
.sk-card{margin-top:6px;padding:6px 10px;border:1px solid var(--a-line);border-left:4px solid #AFB8C1;border-radius:4px}
.sk-ct{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:5px;font-weight:600}
.sk-card .app-fields{margin:0}
/* A note on a record: the new note first and highlighted, then the follow-up task */
.nt-list{display:grid;gap:6px}
.nt-list li{display:grid;gap:1px;padding:6px 8px;border:1px solid var(--a-line);border-radius:4px}
.nt-list li.is-new{border-color:#D9A520;background:var(--a-hl)}
.nt-list small,.nt-task small{font-size:.7rem;color:var(--a-mute)}
.nt-task{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:6px 8px;border:1px dashed #AFB8C1;border-radius:4px}
.nt-box{flex:none;width:14px;height:14px;margin-top:2px;border:2px solid var(--a-mute);border-radius:3px}
.nt-task p{display:grid}
/* MYOB bill: its Notes field carries the approval */
.mb-note{display:grid;gap:2px;margin-top:8px;padding:6px 8px;border:1px solid var(--a-line);border-radius:4px;background:var(--a-soft)}
.mb-note small{font-size:.66rem;font-weight:600;color:var(--a-mute)}

@container (max-width:560px){
  .n8-canvas{flex-direction:column;gap:14px}
  .n8-canvas li:not(:last-child):after{top:100%;left:24px;width:2px;height:14px}
}
@container (max-width:460px){
  .ol-split{grid-template-columns:1fr}
  .ol-list{display:none}
  .hs-grid{grid-template-columns:1fr;gap:8px}
  .app-table .opt{display:none}
}
@container (max-width:360px){
  .app-body{padding:8px 10px 10px}
  .ol-split{margin:-8px -10px -10px}
  .sk-ch{margin:-8px -10px 10px;padding:7px 10px}
  .app-table th,.app-table td,.app-table.is-grid th,.app-table.is-grid td{padding:3px 4px}
  .app-table thead th,.app-table.is-grid th{white-space:normal}
  .app-table.is-grid i{display:none}
  .app-tabs{gap:0 10px}
  .sp-stages{flex-wrap:wrap;row-gap:3px}
  .sp-cc .app-table th,.sp-cc .app-table td{padding:3px 5px}
  .sp-cc .app-table td:not(.num){overflow-wrap:anywhere}
}
/* Narrow window (phone): the path says nothing in a few characters, so it makes room for the name and the badge */
@container (max-width:350px){
  .app-path{display:none}
}
@container (max-width:240px){
  .app-table .opt2,.app-table .at-n{display:none}
}

/* Two screens side by side (supplier bill page) */
.app-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;max-width:62rem;margin-top:14px}
.app-pair .app{margin:0}
.wrap>.app{margin:14px 0}
.app-note{margin:10px 0 14px;font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.app-pair{grid-template-columns:1fr}}

/* Phones (owner decision 20 Oct 2026): text in the simulated screens is at least 11 px (.69rem). */
@media (max-width:700px){
  .app-bar em,.app-pill,.app-table thead th,.app-table .at-n,.app-fields.is-grid dt,.hs-about dt,.sp-stages,.ol-list li small,.ol-av,.hs-feed small,.hs-deal small,.em-list small,.n8-canvas small,.n8-run,.app-checks span,.sp-cch small,.ol-from small,.ml-att span,.sk-app,.mb-note small{font-size:.69rem}
}