/* ==================================================================== *
 *  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 at Mark's
   direction. The home icon returns to the portal ROOT, which on a multi-project portal
   is not the page the client came from. A deliverable sits under a project, so it needs
   a step back to that project page as well. Same type as .ap-section, dimmed so the
   current page still reads as current. Drop it on a deliverable that has no project
   page above it. */
.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; }
  /* Three steps plus a logo will not fit a phone. The crumb goes; the home icon
     still gets them out, and .ap-section keeps saying where they are. */
  .ap-crumb, .ap-crumb + .ap-sep { display: none; }
}

@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; }