/* Solutions / Sales & RevOps (scripts/v47/pages/solutions--sales-revops.py).
   Page accent: the palette's yellow, pushed olive. Holds the territory board and this
   page's readability tightening. */

/* --- Page character. ---------------------------------------------------------------- */
#af-mock .story-context-section{background:#f8f8e8}
#af-mock .story-context-section .section-head .eyebrow,
#af-mock .practice-section .section-head .eyebrow{color:#8a862c}
#af-mock .story-capabilities article>span,
#af-mock .story-workflows summary>span{color:#9d9736}

/* --- Readability. ------------------------------------------------------------------- */
#af-mock .story-context>p{font-size:25px;line-height:1.6;max-width:22em}
#af-mock .story-capabilities p,
#af-mock .story-workflows p,
#af-mock .faq p{max-width:62ch}
/* Seven short controls: two columns, each headline on its own ruled line. */
#af-mock .story-capabilities{grid-template-columns:1fr 1fr;gap:0 66px}
#af-mock .story-capabilities article{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;padding:24px 0 20px}
#af-mock .story-capabilities article>span{grid-column:1;grid-row:1;padding-top:4px}
#af-mock .story-capabilities h3{grid-column:2;grid-row:1;margin:0;font-size:21px;line-height:1.3}
#af-mock .story-capabilities p{grid-column:2;grid-row:2;margin:10px 0 0}
#af-mock .story-capabilities .cap-thread{grid-column:2;grid-row:3}
@media(max-width:860px){#af-mock .story-capabilities{grid-template-columns:1fr}}

/* --- The board: territory lines, then the fields the agent may write. ---------------- */
#af-mock .story-context{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:5vw;align-items:start}
#af-mock .rv-board{margin:0;border:1px solid #e2e2c2;border-radius:8px;background:#fff;
  box-shadow:0 18px 44px #8a862c14;overflow:hidden}
#af-mock .rv-board figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid #ecebd3;background:#fcfcf0;font-size:9px!important}
#af-mock .rv-board figcaption .eyebrow{margin:0;color:#8a862c}
#af-mock .rv-systems{display:flex;align-items:center;gap:10px}
#af-mock .rv-systems img{display:block;height:17px;width:auto;object-fit:contain}
#af-mock .rv-rows{list-style:none;margin:0;padding:0}
#af-mock .rv-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:2px;
  align-items:baseline;padding:12px 18px;border-bottom:1px solid #f2f2e2}
#af-mock .rv-rows b{grid-column:1;font:500 14px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .rv-detail{grid-column:1;grid-row:2;font:11.5px/1.6 'IBM Plex Mono',monospace;color:#97957a}
#af-mock .rv-rows em{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;font-style:normal;
  white-space:nowrap;font:10px 'IBM Plex Mono',monospace;letter-spacing:.07em;text-transform:uppercase;
  color:#5f7040}
#af-mock .rv-rows li[data-state=hold] em{color:#96742a}
#af-mock .rv-rows li[data-state=out] em{color:#a85f2e}
#af-mock .rv-rows li[data-state=out] b,#af-mock .rv-rows li[data-state=out] .rv-detail{color:#b3b1a0}
#af-mock .rv-fields{padding:16px 18px;border-bottom:1px solid #ecebd3;background:#fcfcf0}
#af-mock .rv-fields .eyebrow{display:block;margin:0 0 11px;color:#8a862c}
#af-mock .rv-fields ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
#af-mock .rv-fields li{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:30px;
  border:1px solid #d8e2c6;background:#f4f8ea;color:#4f5c39;
  font:11px 'IBM Plex Mono',monospace}
#af-mock .rv-fields li:before{content:'\2713';font-size:10px;color:#7d9a53}
#af-mock .rv-fields li[data-write=no]{border-color:#e6d6c6;background:#faf3ec;color:#a79a8e;
  text-decoration:line-through}
#af-mock .rv-fields li[data-write=no]:before{content:'\2715';color:#c08351;text-decoration:none}
#af-mock .rv-note{margin:0;padding:14px 18px 16px;font-size:12px!important;line-height:1.7;
  color:#88866f;max-width:none}
@media(max-width:860px){
  #af-mock .story-context{grid-template-columns:1fr;gap:32px}
  #af-mock .story-context>p{max-width:none}
}

/* --- 02 / In practice: the agents x systems grid ---------------------------------- */
#af-mock .rv-grid-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line,#e2e5e9);margin-bottom:26px;
}
#af-mock .rv-grid-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6f7a62;
}
#af-mock .rv-grid-sub{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .rv-grid-scroll{
  overflow-x:auto;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  box-shadow:0 18px 44px #5a60720f;
}
#af-mock .rv-grid table{width:100%;border-collapse:collapse;min-width:820px}
#af-mock .rv-grid thead th{
  text-align:left;vertical-align:bottom;padding:16px 18px;white-space:normal;
  border-bottom:1px solid var(--line,#e2e5e9);background:#fbfcf6;font-weight:400;
}
#af-mock .rv-grid thead th img{display:block;height:17px;width:auto;max-width:26px;object-fit:contain;margin-bottom:9px}
#af-mock .rv-grid thead th span{
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#5f6a55;
}
#af-mock .rv-grid-corner{
  font:9px 'IBM Plex Mono',monospace!important;letter-spacing:.1em!important;
  text-transform:none!important;color:#a0a796!important;
}
#af-mock .rv-grid tbody th{
  text-align:left;vertical-align:top;padding:18px;white-space:normal;font-weight:400;
  border-bottom:1px solid #f2f3ec;border-right:1px solid #f0f1ea;background:#fcfdfa;width:186px;
}
#af-mock .rv-grid tbody th b{
  display:block;font:400 13.5px 'IBM Plex Mono',monospace;color:#20241f;margin-bottom:6px;
}
#af-mock .rv-grid tbody th span{font-size:12px;line-height:1.55;color:#8d9482}
#af-mock .rv-grid tbody td{
  vertical-align:top;padding:18px;border-bottom:1px solid #f2f3ec;border-right:1px solid #f4f5ee;
  display:table-cell;
}
#af-mock .rv-grid tbody tr:last-child th,#af-mock .rv-grid tbody tr:last-child td{border-bottom:0}
#af-mock .rv-grid tbody td:last-child{border-right:0}
#af-mock .rv-grid tbody td>i{
  display:block;width:13px;height:13px;border-radius:3px;margin-bottom:10px;
  background:#7f9152;border:1px solid #6d8043;
}
#af-mock .rv-grid tbody td>span{display:block;font-size:12.5px;line-height:1.6;color:#4a5048}
#af-mock .rv-grid td.is-part>i{background:linear-gradient(90deg,#7f9152 0 50%,#eef2e4 50% 100%)}
#af-mock .rv-grid td.is-hold{background:#fdfaed}
#af-mock .rv-grid td.is-hold>i{background:#e9d383;border-color:#cbb463;border-radius:50%}
#af-mock .rv-grid td.is-hold>span{color:#6a5c2c}
#af-mock .rv-grid td.is-no{background:#fafaf7}
#af-mock .rv-grid td.is-no>i{
  position:relative;background:#f3f0ea;border-color:#ddd9d0;overflow:hidden;
}
#af-mock .rv-grid td.is-no>i::after{
  content:'';position:absolute;left:-3px;top:5px;width:19px;height:1px;
  background:#b58e6d;transform:rotate(-45deg);
}
#af-mock .rv-grid td.is-no>span{color:#9aa096}
#af-mock .rv-grid-key{
  list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px clamp(18px,2.4vw,34px);
}
#af-mock .rv-grid-key li{
  display:flex;align-items:center;gap:9px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.05em;color:#6c7365;
}
#af-mock .rv-grid-key i{
  display:block;width:11px;height:11px;border-radius:3px;background:#7f9152;border:1px solid #6d8043;
}
#af-mock .rv-grid-key .is-part i{background:linear-gradient(90deg,#7f9152 0 50%,#eef2e4 50% 100%)}
#af-mock .rv-grid-key .is-hold i{background:#e9d383;border-color:#cbb463;border-radius:50%}
#af-mock .rv-grid-key .is-no i{background:#f3f0ea;border-color:#ddd9d0}
#af-mock .rv-grid-foot{
  margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line,#e2e5e9);
  font-size:13.5px;line-height:1.85;color:#5a6072;max-width:80ch;
}

@media(max-width:860px){
  #af-mock .rv-grid tbody th{width:150px}
}