/* Shared by the four case studies (airtel, amp-d, forum-one, costrategix):
   the small parts that give a page its texture. Linked AFTER each page's own
   <style>, so these rules win over the page's older ones of equal weight.

     .ico            one line icon, drawn in the text colour (a CSS mask)
     .callout        a boxed aside with an icon: passed on, trade-off,
                     what testing changed, still open
     #summary        the question as a highlighted box, then two cards
                     (my part, outcome)
     .cards          a row of small icon cards for a set of findings
     .status-dot     the dot before a status

   Colours come from each page's own tokens (--ink, --rule, --accent or
   --blue), so the kit follows the page's theme and accent. */

:root { --kit: var(--accent, var(--blue)); }

/* ---- icons ------------------------------------------------------------------ */
.ico {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  vertical-align: -3px;
}
.ico-question { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2a3 3 0 0 1 5.7 1c0 1.9-2.9 2.6-2.9 4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E"); }
.ico-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
.ico-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.ico-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h12l-2.2 4L17 12H5'/%3E%3C/svg%3E"); }
.ico-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.ico-scales { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M5 7h14'/%3E%3Cpath d='M5 7l-3 6.5a3 3 0 0 0 6 0zM19 7l-3 6.5a3 3 0 0 0 6 0z'/%3E%3C/svg%3E"); }
.ico-loop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v5h-5'/%3E%3Cpath d='M4 19v-5h5'/%3E%3Cpath d='M19.4 10A8 8 0 0 0 5.6 7.4L4 9M4.6 14a8 8 0 0 0 13.8 2.6L20 15'/%3E%3C/svg%3E"); }
.ico-open { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='3.2 3.2'/%3E%3Cpath d='M12 8v4.5M12 16h.01'/%3E%3C/svg%3E"); }
.ico-bulb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.8 10.6c.7.6 1.1 1.4 1.3 2.4h5c.2-1 .6-1.800 1.300-2.400A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.ico-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9 4.800-9 4.800-9-4.800z'/%3E%3Cpath d='M3 13.200l9 4.800 9-4.800'/%3E%3C/svg%3E"); }
.ico-cursor { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.500l14 8.200-6.300 1.800-1.900 6.300z'/%3E%3C/svg%3E"); }
.ico-compass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.600 8.400l-2 5.200-5.200 2 2-5.200z'/%3E%3C/svg%3E"); }
.ico-wrench { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.500 6.200a4.200 4.200 0 0 0-5.300 5.500L3.500 17.400l3.100 3.100 5.700-5.700a4.200 4.200 0 0 0 5.500-5.300l-2.600 2.600-2.500-.7-.7-2.500z'/%3E%3C/svg%3E"); }
.ico-grid { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='13.500' y='4' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='4' y='13.500' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='13.500' y='13.500' width='6.5' height='6.5' rx='1.2'/%3E%3C/svg%3E"); }
.ico-book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.500A2.500 2.500 0 0 1 7.500 3H19v14.500H7.500A2.500 2.500 0 0 0 5 20z'/%3E%3Cpath d='M5 20a2.500 2.500 0 0 0 2.500 1H19v-3.500'/%3E%3C/svg%3E"); }
.ico-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5.500c0 4.800-3.300 8.200-8 9.500-4.700-1.300-8-4.700-8-9.500V6z'/%3E%3Cpath d='M8.800 12l2.300 2.300 4.100-4.300'/%3E%3C/svg%3E"); }
.ico-userplus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.500' cy='8' r='4'/%3E%3Cpath d='M2.500 20.500a7 7 0 0 1 14 0M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
.ico-list { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h11M4 11h11M4 16h6'/%3E%3Ccircle cx='16' cy='17.500' r='2.300'/%3E%3Cpath d='M18.300 17.500V9l3 1.200'/%3E%3C/svg%3E"); }
.ico-message { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11.500H9.500L4 20.500z'/%3E%3C/svg%3E"); }

/* ---- callouts ---------------------------------------------------------------
   Each kind has its own icon and ground, so they can be told apart at a
   glance: what was passed on is quiet and grey, a trade-off and a change from
   testing carry the page's accent, an open question is outlined and dashed. */
.callout {
  margin: 28px 0 0;
  padding: 16px 18px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
.callout .kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-70); }
.callout .body-copy { margin: 0; }
.callout.is-tradeoff, .callout.is-testing { background: color-mix(in srgb, var(--kit) 8%, transparent); }
.callout.is-tradeoff .kicker, .callout.is-testing .kicker { color: var(--kit); }
.callout.is-tradeoff .body-copy, .callout.is-testing .body-copy { color: var(--ink); }
.callout.is-open { background: none; border: 1px dashed var(--rule-strong, var(--rule)); }
.callout + .body-copy { margin-top: 26px; }

/* ---- the summary: question, my part, outcome ---------------------------------- */
:is(#summary, #summary-2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 20px;
}
:is(#summary, #summary-2) > div {
  padding: 20px 22px 22px;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
:is(#summary, #summary-2) > div + div { border: 1px solid var(--rule); }
:is(#summary, #summary-2) > div:first-child {
  grid-column: 1 / -1;
  padding: 22px 24px 24px;
  border-color: transparent;
  background: color-mix(in srgb, var(--kit) 8%, transparent);
}
:is(#summary, #summary-2) .kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
:is(#summary, #summary-2) > div:first-child .kicker { color: var(--kit); }
:is(#summary, #summary-2) > div:first-child .body-copy {
  font-size: 19px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
@media (max-width: 700px) {
  :is(#summary, #summary-2) { grid-template-columns: 1fr; }
  :is(#summary, #summary-2) > div:first-child .body-copy { font-size: 17px; line-height: 26px; }
}

/* ---- icon cards --------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.cards li {
  padding: 16px 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.cards .ico-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 9px;
  color: var(--kit);
  background: color-mix(in srgb, var(--kit) 10%, transparent);
}
.cards .ico-box .ico { width: 18px; height: 18px; }
.cards b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--wght-700);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cards span.t {
  display: block;
  font-size: 13px;
  line-height: 19px;
  font-weight: var(--wght-500);
  letter-spacing: -0.01em;
  color: var(--ink-70);
}
.cards + .body-copy, .cards + .callout { margin-top: 26px; }
/* Stacked, a card lies on its side: icon left, text right. */
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
  .cards li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .cards .ico-box { grid-row: 1 / span 2; margin-bottom: 0; }
}

/* ---- little things ------------------------------------------------------------ */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #2E9E5B;
  vertical-align: 2px;
}
.status-dot.is-beta { background: #E0A323; }
:is(#takeaway, #takeaway-2) .rail .kicker { display: flex; align-items: center; gap: 8px; }