/* /solutions/legal-services — page-specific styles.
   Accent: a deep ink-green. The context section carries this page's own illustration, a
   ruled matter ledger with dotted leaders (scripts/v47/pages/solutions--legal-services.py). */

#af-mock .story-context{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:5vw;align-items:center}
#af-mock .story-context > p{font-size:27px;line-height:1.5;max-width:20em}
#af-mock .story-context-section{background:#f3f5ee}

/* A ledger page: a double rule under the head, a ruled gutter for the matter numbers. */
#af-mock .lg-ledger{
  margin:0;background:#fffefb;border:1px solid #dcdfd2;border-radius:3px;
  padding:19px 24px 17px;box-shadow:0 18px 40px -34px #3f4a2e;
}
#af-mock .lg-ledger-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:3px double #cfd4c2;
}
#af-mock .lg-ledger-head .eyebrow{margin:0;font:9px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#7d856c}
#af-mock .lg-ledger-src{display:flex;align-items:center;gap:7px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#939a85}
#af-mock .lg-ledger-src img{display:block;width:15px;height:15px;object-fit:contain}

#af-mock .lg-ledger-rows{list-style:none;margin:0;padding:0}
#af-mock .lg-ledger-rows li{
  display:grid;grid-template-columns:86px minmax(0,1fr) auto;column-gap:16px;
  align-items:baseline;padding:13px 0 12px;border-bottom:1px solid #eceee4;
}
#af-mock .lg-ledger-rows li b{
  grid-column:1;font:10px 'IBM Plex Mono',monospace;font-weight:400;color:#8b927d;
  border-right:1px solid #e3e6da;margin-right:-8px;padding-right:16px;align-self:stretch;padding-top:3px;
}
#af-mock .lg-ledger-rows li span{
  grid-column:2;display:flex;align-items:baseline;gap:10px;min-width:0;
  font:400 16px/1.3 Georgia,serif;color:#23261e;
}
#af-mock .lg-ledger-rows li span i{
  font:normal 9px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#9aa189;white-space:nowrap;
}
#af-mock .lg-ledger-rows li span::after{           /* dotted leader to the access column */
  content:'';flex:1 1 auto;min-width:18px;border-bottom:1px dotted #c8ccbc;transform:translateY(-4px);
}
#af-mock .lg-ledger-rows li em{
  grid-column:3;font:normal 9px 'IBM Plex Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#4f5a3a;white-space:nowrap;
}
#af-mock .lg-ledger-rows li u{text-decoration:none}
#af-mock .lg-ledger-rows li[data-wall=shut] span{color:#8d9284}
#af-mock .lg-ledger-rows li[data-wall=shut] u{text-decoration:line-through;text-decoration-color:#c2c7b5}
#af-mock .lg-ledger-rows li[data-wall=shut] span::after{border-bottom-style:dashed}
#af-mock .lg-ledger-rows li[data-wall=shut] em{
  color:#40492f;background:#eceee2;border:1px solid #d5dac8;border-radius:30px;padding:5px 11px;
}
#af-mock .lg-ledger-rows li[data-wall=shut] b{color:#a8ac9c}
#af-mock .lg-ledger-rows li[data-wall=temp] em{color:#6e7758}
#af-mock .lg-ledger-rows li[data-wall=open] em::before{content:'· ';color:#7d8d56}

#af-mock .lg-ledger-foot{
  margin:14px 0 0;font:11px/1.75 'IBM Plex Mono',monospace;color:#7b8270;max-width:48ch;
}

/* "What changes" and the workflow list: shorter measure, an ink-green thread. */
#af-mock .story-capabilities h3{font-size:22px;line-height:1.3}
#af-mock .story-capabilities article:hover .cap-thread i{background:#5f6a4b}
#af-mock .story-workflows p{max-width:52ch}

@media(max-width:900px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context > p{font-size:24px;max-width:none}
}
@media(max-width:560px){
  #af-mock .lg-ledger-rows li{grid-template-columns:78px minmax(0,1fr)}
  #af-mock .lg-ledger-rows li span::after{content:none}
  #af-mock .lg-ledger-rows li em{grid-column:2;grid-row:2;margin-top:5px}
}

/* "In practice": one search, its results, and the matter that is not searched at all
   (scripts/v47/pages/solutions--legal-services.py). */
#af-mock .lg-check{border:1px solid #e2e5e9;border-radius:12px;background:#fff;overflow:hidden}
#af-mock .lg-check-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:17px 26px;border-bottom:1px solid #e2e5e9;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a927c;
}
#af-mock .lg-check-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#4a4636}

#af-mock .lg-query{padding:26px 26px 22px;background:#12140f;color:#e9ece0}
#af-mock .lg-prompt{
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#9db06f;
}
#af-mock .lg-query p{
  margin:10px 0 0;font:16px/1.6 'IBM Plex Mono',monospace;color:#f2f4e9;max-width:70ch;
}
#af-mock .lg-caret{
  display:inline-block;width:8px;height:16px;margin-left:6px;vertical-align:-3px;background:#c3d9a0;
  animation:lg-blink 1.1s steps(1,end) infinite;
}
@keyframes lg-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#af-mock .lg-caret{animation:none}}
#af-mock .lg-scope{
  display:block;margin-top:16px;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#8d9680;
}

#af-mock .lg-hits{list-style:none;margin:0;padding:0}
#af-mock .lg-hits li{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;column-gap:22px;row-gap:5px;
  padding:16px 26px;border-bottom:1px solid #eef0ec;align-items:baseline;
}
#af-mock .lg-hits li b{grid-column:1;font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#9aa287}
#af-mock .lg-hits li span:not([class]){grid-column:2;font:500 15.5px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .lg-hits li i{grid-column:2;font:normal 13px/1.65 'DM Sans',sans-serif;color:#69707c;max-width:70ch}
#af-mock .lg-tool{
  grid-column:3;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid #e2e5e9;border-radius:30px;background:#fff;white-space:nowrap;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8b9080;
}
#af-mock .lg-tool img{display:block;width:14px;height:14px;object-fit:contain}
#af-mock .lg-hits li[data-hit=off]{background:repeating-linear-gradient(135deg,#fbfaf7,#fbfaf7 7px,#f6f3ee 7px,#f6f3ee 14px)}
#af-mock .lg-hits li[data-hit=off] b{color:#b0a598}
#af-mock .lg-hits li[data-hit=off] span:not([class]){color:#8a8073;text-decoration:line-through;text-decoration-color:#cdc3b6}
#af-mock .lg-tool-off{border-style:dashed;border-color:#d8cfbe;color:#8a7f70;background:#fff}

#af-mock .lg-outgoing{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 26px;border-top:1px solid #e2e5e9;background:#fdfbf1;
}
#af-mock .lg-outgoing .eyebrow{
  margin:0;font-size:9.5px;letter-spacing:.15em;color:#6e5a12;
  border:1px solid #e2d290;background:#f6efcf;border-radius:30px;padding:6px 11px;
}
#af-mock .lg-outgoing p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:14px;color:#3f453a}
#af-mock .lg-sign{
  margin-left:auto;display:flex;align-items:flex-end;gap:12px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#9a9378;
}
#af-mock .lg-sign i{display:block;width:170px;border-bottom:1px solid #c9bd92}
#af-mock .lg-check-foot{
  margin:0;padding:14px 26px;border-top:1px solid #e2e5e9;background:#fbfbf8;
  font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93;
}

@media(max-width:860px){
  #af-mock .lg-query p{font-size:14px}
  #af-mock .lg-hits li{grid-template-columns:minmax(0,1fr);row-gap:7px;padding:16px 18px}
  #af-mock .lg-tool{grid-column:1;grid-row:auto;justify-self:start}
  #af-mock .lg-sign{margin-left:0}
  #af-mock .lg-sign i{width:120px}
}