/*
 * The Skiathos Guide — the AI playbook page.
 *
 * Scoped under body.biz, and only the ap- prefix, so nothing here can reach a
 * visitor page or collide with the other business tools.
 *
 * The whole design problem on this page is that there are twenty-two jobs and
 * a reader who has been on their feet since seven. So: one shape, repeated
 * twenty-two times, closed by default, with the two numbers that let you
 * compare rows at a glance sitting in the mono face on every single row.
 * Nothing expands, nothing slides, nothing draws attention to itself. The
 * only movement on the page is a chevron turning.
 *
 * Colours are the six from the brief and the local biz tokens business.css
 * already declares, so dark mode follows without a second set of rules.
 */

body.biz {
  --ap-radius: 18px;
  --ap-radius-s: 12px;
  --ap-hair: color-mix(in srgb, var(--deep) 12%, transparent);
}

/* The opening four. business.css sets .cols2 p to margin 0, which is right
   for one paragraph and wrong for two, so the second one gets its air back. */
body.biz .ap-cols p + p { margin-top: 10px; }

/* ============================================================ the type bar
 * Six buttons and an "everything". Picking one is the whole interaction on
 * this page, so it gets room, and every target clears 44px.
 */
.ap-typebar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.ap-type {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  background: var(--biz-panel);
  color: var(--biz-ink);
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ap-type:hover { border-color: var(--pine); }
.ap-type:focus-visible { outline: 2px solid var(--bougie); outline-offset: 2px; }
.ap-type.is-on {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
:root[data-theme="dark"] body.biz .ap-type.is-on,
body.biz .ap-type.is-on { color: #fff; }

.ap-status {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .01em;
  color: var(--biz-soft);
}
.ap-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--biz-line);
  border-radius: var(--ap-radius-s);
  background: var(--biz-panel);
  font-size: .92rem;
  color: var(--biz-soft);
  max-width: 70ch;
}

/* ======================================================= the starting three
 * The answer to "I have ten minutes". Bigger than everything else on the
 * page, and the only place a first step is printed in full above the fold.
 */
.ap-start {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: none;
}
.ap-startcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  padding: 22px 20px 20px;
}
/* Pushes the link to the floor of the card, so three cards of different
   heights still finish on the same line. */
.ap-startcard .ap-jump { margin-top: auto; }
.ap-startcard .ap-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-size: .8rem;
  margin-bottom: 12px;
}
.ap-startcard h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--biz-ink);
}
.ap-startcard .ap-one {
  margin: 0 0 14px;
  font-size: .95rem;
  color: var(--biz-soft);
}
.ap-startcard .ap-step {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--ap-radius-s);
  background: color-mix(in srgb, var(--pine) 9%, transparent);
  font-size: .93rem;
  color: var(--biz-ink);
}
.ap-startcard .ap-step b { color: var(--pine); font-weight: 600; }
:root[data-theme="dark"] body.biz .ap-startcard .ap-step b { color: var(--shallow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-startcard .ap-step b { color: var(--shallow); }
}
.ap-startcard .ap-tags { margin-bottom: 14px; }
.ap-jump {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ap-jump:hover { border-bottom-color: currentColor; }
:root[data-theme="dark"] body.biz .ap-jump { color: var(--shallow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-jump { color: var(--shallow); }
}

/* ================================================================ the groups */
.ap-group + .ap-group { margin-top: 34px; }
.ap-group[hidden] { display: none; }
.ap-group-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.32rem;
  color: var(--biz-ink);
  border-bottom: 1px solid var(--biz-line);
  padding-bottom: 10px;
}
.ap-group-n {
  color: var(--bougie);
  font-size: .72rem;
}
.ap-group-c {
  margin-left: auto;
  font-size: .68rem;
  color: var(--biz-soft);
  letter-spacing: .04em;
}
.ap-list { display: grid; gap: 8px; }

/* ============================================================== one job row
 * A native <details>. It opens with scripting off, it is in the tab order for
 * free, and a screen reader announces it as expandable without any help.
 */
.ap-job {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  overflow: hidden;
}
.ap-job[open] { border-color: color-mix(in srgb, var(--pine) 40%, var(--biz-line)); }
.ap-job > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.ap-job > summary::-webkit-details-marker { display: none; }
.ap-job > summary:focus-visible { outline: 2px solid var(--bougie); outline-offset: -2px; }
.ap-job > summary:hover { background: color-mix(in srgb, var(--sandy) 26%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-job > summary:hover { background: rgba(255,255,255,.03); }
}
:root[data-theme="dark"] body.biz .ap-job > summary:hover { background: rgba(255,255,255,.03); }

.ap-sum { flex: 1 1 auto; min-width: 0; }
.ap-sum-h {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--biz-ink);
  margin-bottom: 5px;
}
.ap-sum-l {
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--biz-soft);
  margin-bottom: 10px;
}
.ap-chev {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--biz-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--biz-soft);
  transition: transform .3s var(--ease);
}
.ap-chev svg { width: 12px; height: 12px; }
.ap-job[open] .ap-chev { transform: rotate(180deg); }

/* ------------------------------------------------------------ the two facts
 * Time and cost, always in the same order, always in the mono face, so a
 * reader can run their eye down the column and compare rows without opening
 * a single one. That is the entire reason this page is skimmable.
 */
.ap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ap-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ap-hair);
  background: color-mix(in srgb, var(--sandy) 34%, transparent);
  font-size: .68rem;
  letter-spacing: -.01em;
  color: var(--biz-ink);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-tag i {
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--biz-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
}
:root[data-theme="dark"] body.biz .ap-tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }

/* Difficulty: marks and words together. The marks are decoration and the
   words are the answer, so nobody has to read a colour or count a shape. */
.ap-diff {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .02em;
  color: var(--biz-soft);
  padding: 5px 2px;
}
.ap-dots { display: inline-flex; gap: 3px; }
.ap-dots i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border: 1px solid var(--pine);
}
.ap-dots i.on { background: var(--pine); }
.ap-dots i.off { background: transparent; opacity: .45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-dots i { border-color: var(--shallow); }
  :root:not([data-theme="light"]) body.biz .ap-dots i.on { background: var(--shallow); }
}
:root[data-theme="dark"] body.biz .ap-dots i { border-color: var(--shallow); }
:root[data-theme="dark"] body.biz .ap-dots i.on { background: var(--shallow); }

/* Two chips the script adds: the group name, when a job has been moved down
   to the "not for you" list, and the marker on your starting three. */
.ap-gtag {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep) 10%, transparent);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--biz-soft);
}
.ap-starttag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bougie);
  background: transparent;
  color: var(--bougie);
  font-size: .62rem;
  letter-spacing: .04em;
}
.ap-job.ap-is-start { border-color: color-mix(in srgb, var(--bougie) 30%, var(--biz-line)); }

/* ============================================================= the open job
 * Always the same order: worth, cost, first step, watch out, what the machine
 * does, what stays with you, the rule, the sources. Same order twenty-two
 * times means the third one you read is already familiar.
 */
.ap-body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--biz-line);
  margin-top: 2px;
}
.ap-who {
  margin: 14px 0 16px;
  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--biz-soft);
}
.ap-grid { display: grid; gap: 14px; }
.ap-block { margin-bottom: 14px; }
.ap-grid .ap-block { margin-bottom: 0; }
.ap-block h4 {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bougie);
  margin: 0 0 7px;
}
.ap-block p {
  margin: 0 0 9px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--biz-ink);
  max-width: 68ch;
}
.ap-block p:last-child { margin-bottom: 0; }

.ap-first, .ap-warn, .ap-legal {
  padding: 14px 16px;
  border-radius: var(--ap-radius-s);
  margin-top: 14px;
}
.ap-first { background: color-mix(in srgb, var(--pine) 9%, transparent); }
.ap-first h4 { color: var(--pine); }
.ap-warn  { background: color-mix(in srgb, var(--bougie) 8%, transparent); }
.ap-legal { background: color-mix(in srgb, var(--deep) 7%, transparent); }
.ap-legal h4 { color: var(--deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-first,
  :root:not([data-theme="light"]) body.biz .ap-legal { background: rgba(255,255,255,.045); }
  :root:not([data-theme="light"]) body.biz .ap-warn { background: color-mix(in srgb, var(--bougie) 16%, transparent); }
  :root:not([data-theme="light"]) body.biz .ap-first h4,
  :root:not([data-theme="light"]) body.biz .ap-legal h4 { color: var(--shallow); }
}
:root[data-theme="dark"] body.biz .ap-first,
:root[data-theme="dark"] body.biz .ap-legal { background: rgba(255,255,255,.045); }
:root[data-theme="dark"] body.biz .ap-warn { background: color-mix(in srgb, var(--bougie) 16%, transparent); }
:root[data-theme="dark"] body.biz .ap-first h4,
:root[data-theme="dark"] body.biz .ap-legal h4 { color: var(--shallow); }

/* ------------------------------------------------------------- the sources
 * A fact from a published source is a link. A fact this guide established
 * itself is plain text with the words "our own research" next to it, so the
 * two can never be mistaken for one another.
 */
.ap-srcs { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--biz-line); }
.ap-srcs h4 {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin: 0 0 8px;
}
.ap-srcs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-srcs li {
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--biz-soft);
  word-break: break-word;
}
.ap-srcs a { color: var(--pine); }
:root[data-theme="dark"] body.biz .ap-srcs a { color: var(--shallow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-srcs a { color: var(--shallow); }
}
.ap-srcs li b {
  font-weight: 500;
  color: var(--bougie);
  white-space: nowrap;
}
.ap-src-internal { font-family: var(--font-sans); font-size: .8rem; }
.ap-src-note { color: var(--biz-soft); opacity: .8; }
.ap-srcs-page { border-top: 1px solid var(--biz-line); margin-top: 30px; padding-top: 18px; }
.ap-srcs-page li span { font-family: var(--font-sans); font-size: .82rem; }

/* ======================================================= the ones that are
 * not for you. Quiet, lower down, and never hidden. */
.ap-elsewhere[hidden] { display: none; }
.ap-elsewhere { background: var(--biz-quiet); }
.ap-elsewhere .ap-job { opacity: .82; }
.ap-elsewhere .ap-job[open] { opacity: 1; }

/* ================================================================ the money */
.ap-moneys { display: grid; gap: 16px; }
.ap-money {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  padding: 20px 18px 16px;
  border-top: 3px solid var(--pine);
}
.ap-money-start { border-top-color: var(--shallow); }
.ap-money-real  { border-top-color: var(--bougie); }
.ap-money h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--biz-ink);
}
.ap-money > p {
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--biz-soft);
}
.ap-money ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ap-money li {
  font-size: .92rem;
  line-height: 1.4;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ap-hair);
}
.ap-money li:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-money li a {
  color: var(--biz-ink);
  text-decoration: underline;
  text-decoration-color: var(--biz-line);
  text-underline-offset: 3px;
}
.ap-money li a:hover { text-decoration-color: var(--pine); }
/* The price sits under the name, not floated to the right edge. A price that
   wraps to its own line and then aligns right reads as a different row. */
.ap-money li .mono {
  display: block;
  margin-top: 4px;
  font-size: .66rem;
  color: var(--biz-soft);
}
.ap-money-n {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ap-hair);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
}

/* ================================================================ the rules */
.ap-rules {
  list-style: none;
  counter-reset: aprule;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 74ch;
}
.ap-rules li {
  counter-increment: aprule;
  position: relative;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  padding: 20px 18px 18px 18px;
}
.ap-rules li::before {
  content: counter(aprule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .74rem;
  margin-bottom: 10px;
}
.ap-rules-2 { counter-reset: aprule 4; }
.ap-rules h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--biz-ink);
}
.ap-rules p {
  margin: 0 0 9px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--biz-ink);
}
.ap-rules p:last-child { margin-bottom: 0; }
.ap-rules-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 30px 0 12px;
  color: var(--biz-ink);
}
.ap-wrong {
  margin-top: 26px;
  padding: 20px 18px;
  border-radius: var(--ap-radius);
  background: color-mix(in srgb, var(--bougie) 8%, transparent);
  max-width: 74ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ap-wrong { background: color-mix(in srgb, var(--bougie) 18%, transparent); }
}
:root[data-theme="dark"] body.biz .ap-wrong { background: color-mix(in srgb, var(--bougie) 18%, transparent); }
.ap-wrong h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: var(--biz-ink);
}
.ap-wrong ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ap-wrong li {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--biz-soft);
  padding-left: 18px;
  position: relative;
}
.ap-wrong li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bougie);
}
.ap-wrong li b { color: var(--biz-ink); font-weight: 600; }

/* ============================================================== this week */
.ap-week {
  list-style: none;
  counter-reset: apweek;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 74ch;
}
.ap-week li {
  counter-increment: apweek;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  padding: 16px 18px 16px 54px;
  position: relative;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--biz-soft);
}
.ap-week li::before {
  content: counter(apweek);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .74rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-week li b { color: var(--biz-ink); font-weight: 600; }

/* =================================================================== wider
 * Mobile is the design. These are the two places extra width genuinely helps:
 * the starting three side by side, and the money split into its three columns.
 */
@media (min-width: 620px) {
  .ap-job > summary { padding: 18px 20px; gap: 16px; }
  .ap-body { padding: 6px 20px 22px; }
  .ap-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ap-sum-h { font-size: 1.12rem; }
}
@media (min-width: 860px) {
  .ap-start { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .ap-moneys { grid-template-columns: repeat(3, 1fr); }
  .ap-startcard { padding: 26px 22px 22px; }
}

/* Reduced motion: the chevron stops turning too. There is nothing else. */
@media (prefers-reduced-motion: reduce) {
  .ap-chev, .ap-type { transition: none; }
}

/* =====================================================================
 * SHARED BUSINESS-GUIDE COMPONENTS               prefix: bg-
 * ---------------------------------------------------------------------
 * This file started as the stylesheet for one page. It is now linked by
 * all six business guides, because they all needed the same thing: fewer
 * words, more pictures, and one qualifier said once instead of six times.
 *
 * Everything above this line is .ap- and belongs to the playbook page.
 * Everything below is .bg- and is shared. Nothing here touches a visitor
 * page: every selector is under body.biz or a bg- class that only the
 * business guides use.
 * ===================================================================== */

/* --------------------------------------------------------- token bridge
 * icons.css speaks the visitor-page tokens (--line, --bg-alt, --text).
 * On a business page those should be the calmer biz ones. Scoped to the
 * components themselves, so no other element on the page shifts colour.
 * --ic-key is deliberately left alone: icons.css already flips it for
 * dark mode, and pine on a dark panel would disappear.
 */
body.biz .sg-cap,
body.biz .sg-stats,
body.biz .sg-stat,
body.biz .sg-facts,
body.biz .sg-steps,
body.biz .sg-compare,
body.biz .sg-verdict,
body.biz .sg-callout,
body.biz .sg-shift,
body.biz .sg-spark,
body.biz .ic-badge,
body.biz .bg-tldr,
body.biz .bg-cards,
body.biz .bg-bars,
body.biz .bg-fig,
body.biz .bg-diagram,
body.biz .bg-chips,
body.biz .bg-ticks,
body.biz .bg-year {
  --line: var(--biz-line);
  --bg-alt: var(--biz-panel);
  --bg-sunk: var(--biz-quiet);
  --text: var(--biz-ink);
  --text-soft: var(--biz-soft);
}

/* ------------------------------------------------- the whole page in five
 * Sits directly under the masthead of every guide. Somebody with one
 * minute reads this and leaves with the answer.
 */
.bg-tldr {
  max-width: 74ch;
  padding: 20px 20px 18px;
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  background: var(--biz-panel);
}
.bg-tldr > .sg-cap { margin: 0 0 13px; }
.bg-tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.bg-tldr li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--biz-soft);
}
.bg-tldr li > .ic {
  width: 1.3em; height: 1.3em;
  margin-top: .1em;
  color: var(--ic-key, var(--pine));
  vertical-align: 0;
}
.bg-tldr li b { color: var(--biz-ink); font-weight: 600; }
.bg-tldr-f {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px dashed var(--biz-line);
  font-family: var(--font-mono);
  font-size: .71rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--biz-soft);
}
.bg-tldr-f a { color: var(--pine); }
:root[data-theme="dark"] .bg-tldr-f a,
.bg-tldr-f a:hover { color: var(--shallow); }

/* ------------------------------------------------------------- icon cards
 * The replacement for a run of h3 + paragraph. One icon, one heading,
 * one or two short lines. Never more.
 */
.bg-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg-card {
  padding: 17px 18px 16px;
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  background: var(--biz-panel);
}
.bg-card h3 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--biz-ink);
}
.bg-card h3 > .ic {
  flex: none;
  margin-top: .1em;
  color: var(--ic-key, var(--pine));
  vertical-align: 0;
}
.bg-card p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--biz-soft); }
.bg-card p + p { margin-top: 9px; }
.bg-card p b, .bg-card p strong { color: var(--biz-ink); font-weight: 600; }
.bg-card .mono { font-family: var(--font-mono); color: var(--biz-ink); }
.bg-card ul { margin: 9px 0 0; }
.bg-card .sg-facts { margin: 10px 0 0; }
.bg-cards.plain .bg-card { border: 0; background: none; padding: 0; }
.bg-cards.plain { gap: 22px; }

@media (min-width: 620px) {
  .bg-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 900px) {
  .bg-cards.three { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------- icon bullets
 * A list where every line starts with a picture instead of a dot. The
 * icon is always decorative: the bold words beside it carry the meaning.
 */
.bg-ticks {
  list-style: none;
  margin: 12px 0 2px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.bg-ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--biz-soft);
}
.bg-ticks li > .ic {
  margin-top: .12em;
  color: var(--ic-key, var(--pine));
  vertical-align: 0;
}
.bg-ticks.quiet li > .ic { color: var(--biz-soft); }
/* Boxed: the compact alternative to a row of cards, when each line is
   one sentence and a card each would be four screens of scrolling. */
.bg-ticks.boxed {
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid var(--biz-line);
  border-radius: var(--ap-radius);
  background: var(--biz-panel);
  gap: 13px;
}
.bg-ticks li b { color: var(--biz-ink); font-weight: 600; }
.bg-ticks li .mono { font-family: var(--font-mono); color: var(--biz-ink); }
.bg-ticks.wide { max-width: 70ch; }

/* A group of four numbers reads better two by two than three and an orphan.
   And auto-fit cannot collapse its spare track here, because the .sg-cap
   above the row already spans every one of them, so a two or three item row
   has to say how many columns it wants. */
.sg-stats.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .sg-stats.four { grid-template-columns: repeat(4, 1fr); } }
.sg-stats.two   { grid-template-columns: repeat(2, 1fr); }
.sg-stats.three { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 620px) { .sg-stats.two { grid-template-columns: repeat(2, 1fr); max-width: 520px; } }

/* icons.css calms every callout on a business page down to the panel colour,
   which takes the warm sand off the "watch out" variant too. Give it back:
   still warm sand, still not red, but now visibly a different thing. */
body.biz .sg-callout.warn {
  background: color-mix(in srgb, var(--sandy) 34%, var(--biz-panel));
  border-color: color-mix(in srgb, var(--sandy) 60%, var(--biz-line));
  border-left-color: color-mix(in srgb, var(--sandy) 34%, var(--biz-ink));
}

/* --------------------------------------------------------------- chips
 * Time, cost, difficulty. A number with a picture beside it, and the
 * word that says what the number is.
 */
.bg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.bg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  background: var(--biz-quiet);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .01em;
  line-height: 1.5;
  color: var(--biz-ink);
  white-space: nowrap;
}
.bg-chip > .ic { color: var(--biz-soft); vertical-align: 0; }
.bg-chips.tight { gap: 6px; margin-bottom: 12px; }
.bg-chips.tight .bg-chip { padding: 4px 9px 4px 7px; font-size: .68rem; gap: 5px; }
.bg-chip i { font-style: normal; color: var(--biz-soft); }

/* Inside a job, the pink mono h4 is the heading. A caption under it has to
   sit below that, not above it, so it drops the shout and keeps sentence case. */
.ap-block > .sg-cap {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--biz-soft);
  margin: 14px 0 4px;
}
.ap-block > .sg-cap:first-of-type { margin-top: 0; }
.ap-block .sg-compare { margin: 8px 0 4px; }
.ap-block .sg-verdict { margin-bottom: 4px; font-size: .92rem; }
.ap-block .sg-facts.boxed { margin: 6px 0 4px; }
.ap-block .bg-ticks { margin: 8px 0 0; }
.ap-block .sg-side > h4 { font-family: var(--font-display); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--biz-ink); }

/* --------------------------------------------------------------- bars
 * A count you can see. Length carries the value, and the value is
 * printed in mono beside the label, so colour carries nothing.
 */
.bg-bars {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  gap: 13px;
  max-width: 62ch;
}
.bg-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.bg-bar-k { font-size: .92rem; line-height: 1.35; color: var(--biz-ink); }
.bg-bar-v {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .86rem;
  color: var(--biz-ink);
  white-space: nowrap;
}
.bg-bar-v small { font-size: .82em; color: var(--biz-soft); margin-left: 3px; }
.bg-bar-n {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--biz-soft);
}
.bg-bar-t {
  grid-column: 1 / -1;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--biz-line) 70%, transparent);
  overflow: hidden;
}
.bg-bar-f { display: block; height: 100%; border-radius: 999px; background: var(--pine); }
.bg-bar.is-key .bg-bar-f { background: var(--bougie); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-bar:not(.is-key) .bg-bar-f { background: var(--shallow); }
}
:root[data-theme="dark"] .bg-bar:not(.is-key) .bg-bar-f { background: var(--shallow); }

/* ------------------------------------------------------ photos and graphics */
.bg-fig, .bg-diagram { margin: 22px 0; }
.bg-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ap-radius);
  border: 1px solid var(--biz-line);
}
.bg-fig.wide img { aspect-ratio: 16 / 8; object-fit: cover; }
.bg-fig figcaption,
.bg-diagram figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .035em;
  line-height: 1.55;
  color: var(--biz-soft);
}
.bg-diagram { max-width: 430px; }
.bg-diagram.wide { max-width: 620px; }
.bg-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The parts an inline diagram is built from. Named, so every diagram on
   every guide is drawn from the same six colours and follows dark mode. */
.bg-dg-panel { fill: var(--biz-panel); stroke: var(--biz-line); stroke-width: 1; }
.bg-dg-sunk  { fill: var(--biz-quiet); stroke: var(--biz-line); stroke-width: 1; }
.bg-dg-rule  { fill: none; stroke: var(--biz-line); stroke-width: 1; }
.bg-dg-flow  { fill: none; stroke: var(--ic-key, var(--pine)); stroke-width: 1.6; stroke-linecap: round; }
.bg-dg-head  { fill: var(--ic-key, var(--pine)); }
.bg-dg-ic    { fill: none; stroke: var(--ic-key, var(--pine)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bg-dg-t     { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: var(--biz-ink); }
.bg-dg-s     { font-family: var(--font-sans); font-size: 11px; fill: var(--biz-soft); }
.bg-dg-n     { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; fill: var(--biz-soft); }
.bg-dg-fill  { fill: var(--ic-key, var(--pine)); }

/* ------------------------------------------------------------- the year
 * Twelve months as one picture. Bar height is the sea temperature, the
 * number is printed above the bars that matter, and the month letter sits
 * under every one. It holds together down to 320px.
 */
.bg-year { margin: 20px 0; max-width: 620px; }
.bg-year svg { display: block; width: 100%; height: auto; }
.bg-year-bar { fill: color-mix(in srgb, var(--pine) 70%, transparent); }
.bg-year-bar.is-peak { fill: var(--bougie); }
.bg-year-m { font-family: var(--font-mono); font-size: 10px; fill: var(--biz-soft); }
.bg-year-v { font-family: var(--font-mono); font-size: 10px; fill: var(--biz-ink); }
.bg-year-band { fill: color-mix(in srgb, var(--sandy) 70%, transparent); }
.bg-year-band.is-open { fill: color-mix(in srgb, var(--shallow) 34%, transparent); }
.bg-year-bl { font-family: var(--font-sans); font-size: 10.5px; fill: var(--biz-ink); }
.bg-year figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .035em;
  line-height: 1.55;
  color: var(--biz-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-year-bar:not(.is-peak) { fill: color-mix(in srgb, var(--shallow) 62%, transparent); }
}
:root[data-theme="dark"] .bg-year-bar:not(.is-peak) { fill: color-mix(in srgb, var(--shallow) 62%, transparent); }

/* --------------------------------------------------- icons in the small bits
 * The playbook chips gain a picture. The group headings gain one too.
 */
.ap-tag > .ic { color: var(--biz-soft); vertical-align: -.15em; margin-right: 1px; }
.ap-group-h > .ic { color: var(--ic-key, var(--pine)); margin-right: 2px; vertical-align: -.16em; }
.ap-money h3 > .ic { color: var(--ic-key, var(--pine)); margin-right: 8px; vertical-align: -.16em; }
.ap-rules li > h3 > .ic { color: var(--ic-key, var(--pine)); margin-right: 8px; vertical-align: -.16em; }

/* --------------------------------------------------------------- spacing
 * A graphic wants air above it and none below, because the words that
 * explain it come next.
 */
body.biz .section-head + .bg-cards,
body.biz .section-head + .bg-bars,
body.biz .section-head + .sg-stats { margin-top: 4px; }
body.biz .bg-cards + .caveat,
body.biz .bg-bars + .caveat,
body.biz .sg-stats + .caveat { margin-top: 24px; }
body.biz .sg-callout + .caveat { margin-top: 20px; }

/* Lists inside a card are already short. Give them their own measure. */
body.biz .bg-card .plainlist { max-width: none; }
body.biz .bg-card .plainlist li { font-size: .92rem; }

/* -------------------------------------------------------------- narrow */
/* Phones do the reading. Everything below tightens the air between the parts
   without touching the type, because a card costs height that a paragraph
   does not, and the page still has to be scrollable by somebody standing up. */
@media (max-width: 430px) {
  .bg-cards { gap: 10px; }
  .bg-ticks { gap: 9px; margin: 10px 0 2px; }
  .bg-ticks.boxed { padding: 13px 14px; gap: 11px; }
  .bg-bars { gap: 11px; margin: 14px 0; }
  .sg-steps .sg-step { padding-bottom: 16px; }
  .bg-tldr { padding: 16px 15px 14px; }
  .bg-tldr ul { gap: 11px; }
  .bg-tldr li { grid-template-columns: 20px 1fr; gap: 10px; font-size: .93rem; }
  .bg-tldr-f { margin-top: 13px; padding-top: 11px; }
  .bg-card { padding: 14px 15px 13px; }
  .bg-chip { font-size: .69rem; padding: 5px 9px 5px 8px; }
  .bg-chips.tight { margin-bottom: 10px; }
  .bg-fig, .bg-diagram, .bg-year { margin: 16px 0; }
  body.biz .sg-callout { margin: 14px 0; }
}