/* SaaS & technology (scripts/v47/pages/solutions--saas-technology.py). Pale-green accent,
   a release-week board of tiles in the context section, capabilities in monospace files. */
#af-mock .af-scope{--saas-accent:#9bb86f;--saas-line:#e3e6df}

/* Context: paragraph and board side by side. */
#af-mock .story-context{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4.5vw;align-items:start}
#af-mock .story-context>p{font-size:clamp(22px,2vw,27px);max-width:19em}

/* The release-week board: a mosaic of request tiles. */
#af-mock .saas-board{border:1px solid var(--line,#e2e5e9);background:var(--saas-line)}
#af-mock .saas-board header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 16px;background:#fff}
#af-mock .saas-board header .eyebrow{margin:0;font-size:9.5px}
#af-mock .saas-board header>span+span{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#8d9480}
#af-mock .saas-board ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;border-top:1px solid var(--saas-line)}
#af-mock .saas-board li{display:flex;flex-direction:column;gap:7px;padding:15px 16px 14px;background:#fff;position:relative}
#af-mock .saas-board li.is-wide{grid-column:1/-1}
#af-mock .saas-board li:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--saas-accent)}
#af-mock .saas-board li[data-verdict=hold]:after{background:#e0df93}
#af-mock .saas-board li[data-verdict=no]:after{background:repeating-linear-gradient(90deg,#d8b99c 0 4px,transparent 4px 8px)}
#af-mock .saas-board .saas-tool{display:inline-flex;align-items:center;gap:6px;font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8b9080}
#af-mock .saas-board .saas-tool img{display:block;width:15px;height:15px;object-fit:contain}
#af-mock .saas-board b{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#0a0a0a}
#af-mock .saas-board .saas-what{font-size:12.5px;line-height:1.5;color:#5a6072}
#af-mock .saas-board li[data-verdict=no] .saas-what{color:#8b8f97}
#af-mock .saas-board em{margin-top:auto;align-self:flex-start;font-style:normal;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border:1px solid #00000014;border-radius:3px;background:#f4f6ef;color:#5f7040}
#af-mock .saas-board li[data-verdict=hold] em{background:#faf7dd;color:#7c6b22}
#af-mock .saas-board li[data-verdict=no] em{background:#f7f0ea;color:#8a5f3d}
#af-mock .saas-board footer{padding:12px 16px;background:#fff;font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93}

/* What changes: three columns, monospace file-style headers. */
#af-mock .story-capabilities{gap:0 42px}
#af-mock .story-capabilities article{border-top:1px solid #d9ddd3;padding:20px 0 30px}
#af-mock .story-capabilities article>span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:#93a678}
#af-mock .story-capabilities article>span:before{content:'// '}
#af-mock .story-capabilities h3{font-size:19.5px;line-height:1.35;margin:14px 0 10px}
#af-mock .story-capabilities p{font-size:13.5px;max-width:42ch}
#af-mock .story-capabilities article:hover .cap-thread i{background:var(--saas-accent)}

/* Workflows and closing at the pale-green end of the palette. */
#af-mock .story-workflows summary>span{color:#93a678}
#af-mock .story-closing{background:linear-gradient(145deg,#e8f0dd,#f1f2e2 55%,#f5ecd9)}

@media(max-width:700px){#af-mock .story-context{grid-template-columns:1fr}#af-mock .saas-board ol{grid-template-columns:1fr}}

/* "In practice": the tenants as rooms — one lit, the others behind a wall with no door
   (scripts/v47/pages/solutions--saas-technology.py). */
#af-mock .saas-map{border:1px solid var(--line,#e2e5e9);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .saas-map-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:17px 26px;border-bottom:1px solid var(--line,#e2e5e9);
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a927c;
}
#af-mock .saas-map-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#3f4b39}

#af-mock .saas-rooms{display:grid;grid-template-columns:minmax(0,1.3fr) 54px minmax(0,1fr) 54px minmax(0,.9fr);align-items:stretch}
#af-mock .saas-room{padding:24px 24px 26px}
#af-mock .saas-room[data-room=here]{background:#fbfcf8}
#af-mock .saas-room[data-room=off]{background:repeating-linear-gradient(135deg,#fcfbf9,#fcfbf9 8px,#f6f3ee 8px,#f6f3ee 16px)}
#af-mock .saas-tag{
  display:inline-block;margin-bottom:12px;padding:5px 10px;border-radius:30px;
  border:1px solid #b9cf94;background:#e6f0d4;color:#3f5d1e;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;
}
#af-mock .saas-room > b{display:block;font:400 22px/1.2 Georgia,serif;color:#0a0a0a}
#af-mock .saas-room[data-room=off] > b{color:#7f7568}
#af-mock .saas-room-sub{display:block;margin-top:7px;font:10px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:#9aa287}
#af-mock .saas-room ul{list-style:none;margin:20px 0 0;padding:0}
#af-mock .saas-room li{border:1px solid var(--line,#e2e5e9);border-radius:9px;background:#fff;padding:13px 15px;margin-bottom:12px}
#af-mock .saas-room li:last-child{margin-bottom:0}
#af-mock .saas-room li b{font:500 14.5px/1.4 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .saas-room li i{display:block;margin-top:8px;font:normal 12.5px/1.65 'DM Sans',sans-serif;color:#69707c}
#af-mock .saas-map .saas-tool{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 9px;
  border:1px solid var(--line,#e2e5e9);border-radius:30px;background:#fff;white-space:nowrap;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8b9080;
}
#af-mock .saas-map .saas-tool img{display:block;width:14px;height:14px;object-fit:contain}
#af-mock .saas-room li[data-verdict=ok]{border-left:3px solid #c3d9a0}
#af-mock .saas-room li[data-verdict=hold]{border-left:3px solid #e0df93;background:#fdfbf1}
#af-mock .saas-room li[data-verdict=no]{border:1px dashed #e0d3c6;border-left:3px solid #f0b98c;background:#fff}
#af-mock .saas-room li[data-verdict=no] b{color:#7a6b60;text-decoration:line-through;text-decoration-color:#e0c4ad}
#af-mock .saas-sign{
  display:flex;align-items:flex-end;gap:10px;margin-top:12px;
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#9a9378;
}
#af-mock .saas-sign u{display:block;flex:1;border-bottom:1px solid #c9bd92;text-decoration:none}
#af-mock .saas-locked{
  display:block;margin-top:18px;font:11px/1.7 'IBM Plex Mono',monospace;color:#9a9186;
}

#af-mock .saas-wall{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(180deg,#efece4,#efece4 6px,#e4e0d5 6px,#e4e0d5 12px);
  border-left:1px solid #cfcabd;border-right:1px solid #cfcabd;
}
#af-mock .saas-wall span{writing-mode:vertical-rl;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.2em;color:#8c867a}
#af-mock .saas-wall .saas-wall-sub{color:#b0a89a;letter-spacing:.14em}
#af-mock .saas-map-foot{
  margin:0;padding:14px 26px;border-top:1px solid var(--line,#e2e5e9);background:#fbfbf8;
  font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93;
}

@media(max-width:960px){
  #af-mock .saas-rooms{grid-template-columns:minmax(0,1fr)}
  #af-mock .saas-wall{flex-direction:row;padding:10px;border-left:0;border-right:0;border-top:1px solid #cfcabd;border-bottom:1px solid #cfcabd}
  #af-mock .saas-wall span{writing-mode:horizontal-tb}
}