/* ==================================================================== *
 *  Akamai Media portal chrome
 *  Canonical. Every client portal and every portal page starts here.
 *
 *  Copy this file into the portal's /assets/ and link it. Do not fork it
 *  per client, and do not restate its rules in a page-level <style>.
 *  Page-specific styling goes in its own block BELOW this link, and
 *  styles only the artifact, never the chrome.
 *
 *      <link rel="stylesheet" href="/assets/akamai-portal.css">
 *      ... markup from page-template.html ...
 *      <script src="/assets/akamai-portal.js" defer></script>
 *
 *  Descends from mrcs-portal-chrome.css, which was MRCS-only and carried
 *  no footer and no content container, so every page invented its own.
 *  That is what produced five different page widths across four clients.
 * ==================================================================== */

/* ---- Harbor - Tide. Locked 2026-07-14. Never redefine these. -------- */
:root {
  --ap-anchor:  #12303C;   /* darkest surfaces, topbar, footer */
  --ap-primary: #2D6E86;   /* brand blue, links, accents */
  --ap-marine:  #245F79;   /* mid tone */
  --ap-seafoam: #79B3A6;   /* accent, hover on dark */
  --ap-surface: #EFF3F3;   /* page background */
  --ap-paper:   #F7FAFA;   /* card background */
  --ap-ink:     #10222A;   /* body text */
  --ap-muted:   #5a6b70;   /* secondary text */
  --ap-line:    #dbe6e6;   /* borders, rules */

  --ap-ok:      #2FA36B;   /* functional status only */
  --ap-ok-bg:   #e8f6ee;

  --ap-hero:    linear-gradient(160deg, #102E3A 0%, #245F79 58%, #2E7E7C 130%);
  --ap-shadow:  0 20px 60px -24px rgba(18, 48, 60, .28);

  /* Three widths, one per page type. There are no others. See the
     container block below and the table in README.md. */
  --ap-w-cards: 960px;    /* card lists: hubs, sub-hubs, card-deck pages */
  --ap-w-read:  820px;    /* prose on a deliverable page */
  --ap-w-page:  1400px;   /* a wide artifact, and a genuinely full-width row */
}

/* ---- Page shell ----------------------------------------------------- */
.ap-body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ap-ink);
  background: var(--ap-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ap-body h1,
.ap-body h2,
.ap-body h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--ap-anchor);
  letter-spacing: -.01em;
  line-height: 1.14;
  margin: 0;
}
/* :where() so the default link colour carries ZERO specificity. Written as
   `.ap-body a` it scored 0-1-1 and silently beat every single-class rule
   below it, including `.ap-home { color:#fff }`, which put a navy house
   icon on the navy hero at 1.03:1 on every migrated page. A later line
   does not win when an earlier one is more specific.
   See memory technique-media-query-loses-to-specificity. */
.ap-body :where(a) { color: var(--ap-anchor); text-decoration: none; }
.ap-body *, .ap-body *::before, .ap-body *::after { box-sizing: border-box; }

.ap-wrap { max-width: var(--ap-w-page); margin: 0 auto;
           padding-left: 32px; padding-right: 32px; width: 100%; }

/* ---- Topbar. Sticky, transparent over the hero, frosts on scroll. --- */
.ap-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  transition: background .25s ease, box-shadow .25s ease;
}
.ap-topbar .ap-wrap,
.ap-topbar .ap-cards,
.ap-topbar .ap-read,
.ap-topbar .ap-wide { position: relative; z-index: 2; }
.ap-topbar.is-stuck {
  background: rgba(16, 46, 58, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
}

/* padding-block only. A `padding: 15px 0` shorthand here would zero the horizontal
   padding .ap-wrap sets on the same element, and the topbar icons clip at the
   viewport edge. See memory technique-shorthand-padding-zeroes-the-other-axis. */
.ap-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding-top: 15px; padding-bottom: 15px; }
.ap-nav-left { display: flex; align-items: center; gap: 16px; min-width: 0; }

.ap-home { display: inline-flex; align-items: center; color: #fff; transition: color .2s; flex: 0 0 auto; }
.ap-home:hover { color: var(--ap-seafoam); }
.ap-home svg { width: 24px; height: 24px; }

.ap-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .28); flex: 0 0 auto; }

/* Holds the PAGE name. The client name goes in .ap-eyebrow. */
.ap-section {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Breadcrumb step between the home icon and .ap-section. Added 2026-08-13, made
   mandatory 2026-09-15. Mark: breadcrumbs are a way to see the whole parent-child
   relationship, and they are about way-finding, so they should accommodate that
   purpose. The shape is home / parent / ... / immediate parent / current page, every
   step linked except the last, which is redundant because the reader is already there.
   The link carries the ANCHOR of the tab or section that holds this deliverable, not
   the bare project URL, so the trail retraces the path the reader actually took.
   Same type as .ap-section, dimmed so the current page still reads as current.
   Standard: reference/akamai-media/deliverable-standard.md section 4b. */
.ap-crumb {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); white-space: nowrap; transition: color .2s;
  flex: 0 0 auto;
}
.ap-crumb:hover { color: #fff; }

.ap-brand { display: inline-flex; opacity: .95; transition: opacity .2s; flex: 0 0 auto; }
.ap-brand:hover { opacity: 1; }
.ap-brand img { height: 24px; width: auto; display: block; }

/* ---- Hero. The topbar rides over it, hence the negative margin. ----- */
.ap-hero {
  background: var(--ap-hero);
  color: #fff;
  margin-top: -66px;
  padding: 106px 0 34px;
  position: relative;
  overflow: hidden;
}
.ap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 400px at 88% -18%, rgba(45, 110, 134, .5), transparent 60%);
  pointer-events: none;
}
.ap-hero .ap-wrap,
.ap-hero .ap-cards,
.ap-hero .ap-read,
.ap-hero .ap-wide { position: relative; z-index: 2; }

.ap-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .03em; color: #a9d2c9; margin-bottom: 10px; }
.ap-hero h1 { font-size: clamp(26px, 4vw, 36px); color: #fff; margin-bottom: 10px; }
.ap-hero p  { font-size: 15px; color: #d3e4e4; line-height: 1.6; max-width: 640px; margin: 0; }
.ap-hero a  { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Content containers. Three, one per page type, and the choice is
 *      not free. Picking a fourth width is what produced the drift.
 *
 *  .ap-cards 960px. Any page whose content is a list of cards: portal
 *            hubs, sub-hubs, and deliverable pages built as a card deck.
 *            This is the width `workflows/client-portal-setup.md` requires
 *            and `portal_lint.py` enforces on hubs.
 *  .ap-read  820px. Prose on a deliverable page: headings, paragraphs,
 *            tables, notes, cards of text. The default on any page that
 *            is not a hub.
 *  .ap-wide  1400px. Only an artifact that genuinely needs the room: a
 *            sitemap grid, a wide comparison, a full-bleed image.
 *
 *  All three centre on the same axis, so a page mixing .ap-read prose
 *  with an .ap-wide diagram keeps one centre line at every viewport.
 *  Do not try to align their left edges.
 *
 *  THE TOPBAR, THE HERO AND THE CONTENT ALL TAKE THE SAME CONTAINER.
 *  One left edge down the whole page: house icon, eyebrow, h1, first
 *  card. Swap all three together or none.
 *
 *  This file used to exempt the topbar and give it .ap-wrap at 1400px.
 *  Measured on 2026-08-06 at a 1440px viewport, that put the house icon
 *  at x=52 against an h1 at x=272, a 220px offset, with the Akamai mark
 *  hanging the same distance off the right. Mark called it on sight. The
 *  reason stated here for the hero is the reason: a wide row over a
 *  narrow column reads as a mistake, and the topbar is not special.
 *  .ap-wrap survives only for a page that genuinely runs full width.
 * -------------------------------------------------------------------- */
.ap-main { flex: 1; padding: 36px 0 80px; }
/* padding-inline only, never the `padding` shorthand. The topbar row carries a
   container class AND .ap-nav on the same element, so a `padding: 0 32px` here
   zeroes .ap-nav's 15px top and bottom the moment source order puts it later.
   That is what collapsed the topbar from 54px to 24px on 2026-08-06, icon flush
   against y=0, the instant the topbar was moved off .ap-wrap onto .ap-cards.
   .ap-nav already carried this warning in the other direction; the containers
   needed it too. See memory technique-shorthand-padding-zeroes-the-other-axis. */
.ap-cards,
.ap-read,
.ap-wide { margin: 0 auto; padding-left: 32px; padding-right: 32px; width: 100%; }
.ap-cards{ max-width: var(--ap-w-cards); }
.ap-read { max-width: var(--ap-w-read); }
.ap-wide { max-width: var(--ap-w-page); }

/* ---- Card -----------------------------------------------------------*/
.ap-card {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: 20px;
  box-shadow: var(--ap-shadow);
  padding: 30px 32px;
  margin-bottom: 22px;
}
.ap-card h2 { font-size: 21px; margin-bottom: 4px; }
.ap-card-sub { font-size: 14px; color: var(--ap-muted); max-width: 70ch; margin: 0; }
.ap-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ---- Status pill. Functional colour only. ---------------------------*/
.ap-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  background: var(--ap-surface); color: var(--ap-muted);
}
.ap-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ap-pill.is-ready { background: var(--ap-ok-bg); color: #1c7d4e; }

/* ---- Tile row. Comparison or step tiles inside a card. --------------*/
.ap-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.ap-tiles.is-two { grid-template-columns: repeat(2, 1fr); }
.ap-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  border: 1px solid var(--ap-line); border-radius: 14px; padding: 18px 18px 16px;
  transition: background .18s, border-color .18s, transform .18s;
}
.ap-tile:hover { background: var(--ap-surface); border-color: var(--ap-primary); transform: translateY(-2px); }
.ap-tile .ap-step { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ap-primary); }
.ap-tile b { display: block; font-size: 15px; font-weight: 600; color: var(--ap-anchor); margin-top: 8px; }
.ap-tile span { display: block; font-size: 13px; color: var(--ap-muted); margin-top: 3px; line-height: 1.45; }
.ap-tile .ap-go { font-size: 13px; font-weight: 600; color: var(--ap-primary); margin-top: 14px; }
.ap-tile.is-new { border-color: #bcd6d2; background: #f4f9f8; }
.ap-tile.is-new:hover { background: #eaf4f2; }
.ap-tile.is-dead { opacity: .62; pointer-events: none; }
.ap-tile.is-dead .ap-go { color: var(--ap-muted); }

/* ---- Secondary block inside a card ----------------------------------*/
.ap-extra { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--ap-line); }
.ap-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-muted); margin-bottom: 10px; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ap-chip {
  font-size: 13px; font-weight: 500; color: var(--ap-anchor);
  border: 1px solid var(--ap-line); border-radius: 999px; padding: 7px 15px;
  transition: background .18s, border-color .18s;
}
.ap-chip:hover { background: var(--ap-surface); border-color: var(--ap-primary); }
.ap-note { font-size: 13.5px; color: var(--ap-muted); margin: 14px 0 0; line-height: 1.6; }
.ap-note strong { color: var(--ap-anchor); font-weight: 600; }

/* ---- Footer ---------------------------------------------------------*/
.ap-footer { background: var(--ap-anchor); color: #8fa8b0; padding: 30px 0; text-align: center; font-size: 12.5px; }
.ap-footer img { height: 26px; width: auto; margin-bottom: 10px; }
.ap-footer .ap-llc { color: #fff; font-weight: 600; margin-bottom: 2px; font-size: 13px; }

/* ---- Responsive -----------------------------------------------------*/
@media (max-width: 860px) {
  .ap-tiles, .ap-tiles.is-two { grid-template-columns: 1fr; }
  .ap-tile { flex-direction: row; align-items: center; justify-content: space-between; }
  .ap-tile .ap-go { margin-top: 0; white-space: nowrap; }
}
@media (max-width: 640px) { .ap-card { padding: 24px 20px; } }
@media (max-width: 620px) {
  .ap-wrap, .ap-cards, .ap-read, .ap-wide { padding-left: 20px; padding-right: 20px; }
  .ap-hero { padding-top: 96px; padding-bottom: 26px; }
  .ap-section, .ap-crumb { font-size: 11px; letter-spacing: .12em; }
  /* Mark, 2026-09-15: a breadcrumb is way-finding, so the linked step that carries
     you back up is the one part that cannot be dropped. It used to be hidden here to
     save room. Instead the trail stays whole and .ap-section, which already has
     overflow/ellipsis, truncates to absorb the width. The reader is on that page
     already, so its name is the cheapest thing to shorten. */
  .ap-nav-left { min-width: 0; }
  .ap-crumb { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-topbar, .ap-tile, .ap-chip, .ap-home, .ap-brand { transition: none; }
  .ap-tile:hover { transform: none; }
}

/* Anything wide enough to overflow scrolls inside itself. The page body
   must never scroll horizontally. Wrap wide tables and diagrams in this. */
.ap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }