/* =============================================================================
   The book, professional edition: an editorial report.

   Contents
   1. Tokens
   2. Header, desk and cover
   3. Pages and tabs
   4. Page contents
   5. The map
   6. Page turning and controls
   7. Phone layout

   The notebook (book.css) is the base, and this file only restyles it, while
   <html> carries data-edition="professional" (see edition.js). Everything is
   nested under that one selector, and the file loads after book.css, so it
   wins wherever the two disagree. It is linked with media="screen": the book
   always prints as the notebook.

   White paper, navy ink and one teal accent. No handwriting, tilts, tape or
   ruled lines. Every chapter keeps its colour, as a band along the top of its
   pages and as its tab. One look only: the dark theme does not apply here, so
   the theme toggle hides.
   ========================================================================== */

:root[data-edition="professional"] {
  /* 1. Tokens ============================================================= */

  color-scheme: light;

  /* The inks. */
  --navy: #14233a;
  --slate: #3a4a5f;
  --slate-light: #5f6c80;
  --teal: #0e6b73;

  /* The site's tokens (main.css), for the header and the edition menu. */
  --bg: #f7f8fa;
  --bg-sunk: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --border: #dde2e8;
  --border-strong: #c3ccd6;
  --ink: var(--navy);
  --ink-soft: var(--slate);
  --ink-muted: var(--slate-light);
  --accent: var(--teal);
  --accent-tint: #e1eff0;
  --grain-opacity: 0;
  --shadow-lift:
    0 2px 4px rgba(20, 35, 58, 0.06), 0 22px 44px -22px rgba(20, 35, 58, 0.4);

  /* The book's tokens (book.css). Headings are set in the text face, and
     every handwritten note is typeset. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-hand: var(--font-body);

  --desk: #e7ebf0;
  --desk-2: #d9dfe6;
  --desk-glow: rgba(255, 255, 255, 0.85);
  --paper: #ffffff;
  --paper-edge: #e3e7ec;
  --parchment: #fbfbf9;
  --cover: #1c2c44;
  --cover-dark: #111d2f;

  /* Dark enough to carry white type, on the tab of the chapter on screen. */
  --study: #4f7d5e;
  --work: #a8602f;
  --beyond: #3f6d9c;
  --extra: #8a6a1c;
  --focus: #77599f;

  /* This edition's own: hairlines, and the tint behind chips and notes. */
  --rule: #dde2e8;
  --rule-strong: #b9c3ce;
  --chip: #f3f5f8;
  --you-are-here: #c0392b;

  & .book {
    --ink: var(--navy);
    --ink-soft: var(--slate);
    --ink-faint: var(--slate-light);
    --pen: var(--slate);
    /* The notebook's red is its accent. Here the accent is teal. */
    --red: var(--teal);
  }

  /* 2. Header, desk and cover ============================================= */

  & [data-theme-toggle] {
    display: none;
  }

  & .book {
    border-radius: 6px;
    box-shadow:
      inset 0 0 0 1px var(--cover-dark),
      0 2px 3px rgba(20, 35, 58, 0.2),
      0 30px 60px -30px rgba(20, 35, 58, 0.55);
  }

  /* No ribbon in a report. */
  & .book::after {
    display: none;
  }

  & .book__pages {
    box-shadow:
      0 2px 0 var(--paper-edge),
      0 4px 0 #d5dbe2,
      0 6px 0 var(--paper-edge);
  }

  & .book__pages::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(20, 35, 58, 0.05) 40%,
      rgba(20, 35, 58, 0.16) 50%,
      rgba(20, 35, 58, 0.05) 60%,
      transparent
    );
  }

  /* 3. Pages and tabs ===================================================== */

  & .page {
    --chapter: var(--cover);
    padding-inline: 2.6rem;
    background-image: none;
  }

  & .page[data-chapter="study"] {
    --chapter: var(--study);
  }
  & .page[data-chapter="work"] {
    --chapter: var(--work);
  }
  & .page[data-chapter="focus"] {
    --chapter: var(--focus);
  }
  & .page[data-chapter="beyond"] {
    --chapter: var(--beyond);
  }
  & .page[data-chapter="skills"] {
    --chapter: var(--extra);
  }

  /* The chapter's colour, as a band along the top of the page. */
  & .page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--chapter);
  }

  & .page.side-left {
    box-shadow: inset -16px 0 20px -18px rgba(20, 35, 58, 0.3);
  }

  & .page.side-right {
    box-shadow: inset 16px 0 20px -18px rgba(20, 35, 58, 0.3);
  }

  & .page__num {
    bottom: 1rem;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }

  & .side-left .page__num {
    left: 2.6rem;
  }

  & .side-right .page__num,
  & .page:not(.side-left) .page__num {
    right: 2.6rem;
  }

  /* Index tabs: grey card with the chapter's colour on the outer edge. The
     one on screen fills with it. */
  & .tab {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--chip);
    border-radius: 0 3px 3px 0;
    box-shadow:
      inset -3px 0 0 var(--tab),
      1px 1px 3px rgba(20, 35, 58, 0.18);
  }

  & .tab:hover,
  & .tab[aria-current="true"] {
    color: #fff;
    background: var(--tab);
  }

  & .tab--map {
    --tab: var(--cover);
  }
  & .tab--focus {
    --tab: var(--focus);
  }

  /* 4. Page contents ====================================================== */

  & .page h2 {
    letter-spacing: -0.015em;
  }

  /* A short accent rule under each chapter title. */
  & .page h2::after {
    content: "";
    display: block;
    width: 1.1em;
    height: 2px;
    margin-top: 0.1em;
    background: var(--red);
  }

  & .kicker {
    font-size: 0.74em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* A pen note becomes an aside: italic, set off by a rule. */
  & .pen {
    padding-left: 0.85em;
    border-left: 2px solid var(--rule-strong);
    font-family: var(--font-book);
    font-size: 1em;
    font-style: italic;
    line-height: var(--leading);
    transform: none;
  }

  & .pen a {
    color: var(--red);
  }

  & .picked + .pen {
    margin-top: calc(var(--leading) * 0.5);
  }

  & .page__note {
    top: calc(var(--leading) * 1.5);
    right: 2.6rem;
    font-size: 0.78em;
    line-height: var(--leading);
    color: var(--ink-faint);
    rotate: none;
  }

  & .page__note a {
    color: var(--red);
  }

  & .picked__label {
    font-size: 0.7em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  & .picked ul,
  & .marks {
    gap: 0.4em;
  }

  & .picked li,
  & .marks li {
    padding: 0 0.6em;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--chip);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.75;
  }

  & .from {
    margin-top: 0.2em;
    font-family: var(--font-book);
    font-size: 0.88em;
    font-style: italic;
  }

  /* Post-its become notes in the margin of a report: a tint, a hairline and
     a rule in the note's colour. */
  & .postit {
    --note: var(--extra);
    padding: 0.65em 1em 0.7em;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--note);
    border-radius: 2px;
    background: var(--chip);
    color: var(--ink);
    box-shadow: none;
    transform: none;
  }

  & .postit--pink {
    --note: #b35c70;
  }
  & .postit--blue {
    --note: var(--beyond);
  }
  & .postit--green {
    --note: var(--study);
  }

  & .postit summary {
    font-size: 1.05em;
    line-height: 1.4;
  }

  & .postit summary::after {
    color: var(--red);
    opacity: 1;
  }

  & .postit summary small {
    font-size: 0.78em;
    color: var(--ink-faint);
    opacity: 1;
  }

  /* A figure, like a key number in a report. */
  & .postit--static {
    padding: 0.55em 1em 0.6em;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--ink-soft);
  }

  & .postit--static strong {
    margin-bottom: 0.1em;
    font-family: var(--font-display);
    font-size: 2.3em;
    font-weight: 600;
    line-height: 1.05;
    color: var(--red);
  }

  & .tape {
    display: none;
  }

  & .polaroid {
    padding: 0.35em;
    border: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: 0 10px 22px -16px rgba(20, 35, 58, 0.45);
    rotate: none;
  }

  & .polaroid figcaption {
    margin-top: 0.3em;
    font-size: 0.72em;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    text-align: left;
  }

  & .featured .polaroid:has(> a:hover, > a:focus-visible) {
    rotate: none;
    scale: 1.015;
  }

  & .featured__note {
    font-size: 0.82em;
    letter-spacing: 0.02em;
    line-height: 1.25;
    rotate: none;
  }

  & .featured .featured__note {
    color: var(--red);
  }

  & .featured .featured__note:hover,
  & .featured .featured__note:focus-visible {
    color: var(--ink);
    text-decoration: underline;
  }

  & .featured__note svg {
    stroke-width: 1.6;
  }

  & .featured__swoosh {
    display: none;
  }

  & .card-note {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--card, var(--red));
    background: var(--paper);
    box-shadow: 0 10px 22px -18px rgba(20, 35, 58, 0.4);
  }

  & .card-note .kicker {
    font-size: 0.66em;
  }

  /* No paperclip. */
  & .card-note--clip::before {
    display: none;
  }

  /* The certificate: a double frame, square to the page. The outer line is
     a shadow, so that the focus ring still shows. */
  & .stamp {
    padding: 0.6em 1.4em;
    border: 1px solid var(--ink);
    border-radius: 1px;
    box-shadow:
      0 0 0 3px var(--paper),
      0 0 0 4px var(--ink);
    color: var(--ink-soft);
    letter-spacing: 0.14em;
    rotate: none;
    opacity: 1;
  }

  & .stamp strong {
    color: var(--ink);
  }

  & a.stamp:hover {
    color: var(--red);
  }

  & .pencil-line {
    margin-left: 0.3rem;
    border-left: 1px solid var(--rule-strong);
  }

  & .pencil-line li {
    padding-left: 1.1em;
  }

  & .pencil-line li::before {
    left: calc(-0.25em - 0.5px);
    top: calc(var(--leading) / 2 - 0.25em);
    width: 0.5em;
    height: 0.5em;
    border: 0;
    background: var(--red);
  }

  & .pencil-line b {
    margin-right: 0.45em;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  & .arrows li::before {
    font-weight: 700;
  }

  /* 5. The map ============================================================
     A plate from an atlas: clean paper with a graticule, a neat line round
     it, and the trail as a line with stations. Every place sits in a white
     circle, ringed in the colour of its kind. */

  & .page--map {
    padding-inline: 1.6rem;
  }

  & .map {
    filter: none;
    rotate: none;
  }

  & .map__paper {
    --grid: rgba(20, 35, 58, 0.055);
    background-color: var(--parchment);
    /* One line every 50 units of the 600 x 720 grid the places sit on. */
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: calc(100% / 12) calc(100% / 14.4);
    background-blend-mode: normal;
    box-shadow:
      0 0 0 1px var(--rule-strong),
      0 14px 30px -20px rgba(20, 35, 58, 0.55);
    clip-path: none;
  }

  /* The drawing's colours and lines are presentation attributes in
     index.html, for the notebook. CSS overrides them. */
  & .map__art {
    color: var(--ink);
  }

  & .map__frame {
    stroke-width: 1;
    opacity: 0.55;
  }

  & .map__island {
    fill: #edf1f5;
    stroke: #9aa8b8;
    stroke-width: 1.2;
    opacity: 1;
  }

  & .map__sea {
    stroke: #86a7c7;
    stroke-width: 1.3;
    opacity: 1;
  }

  & .map__trail {
    stroke: var(--ink);
    stroke-width: 3;
    stroke-dasharray: none;
  }

  & .map__within {
    stroke: var(--ink-soft);
    stroke-width: 1.6;
    stroke-dasharray: 0.5 5;
    opacity: 1;
  }

  & .map__within--sea {
    stroke: var(--beyond);
  }

  & .map__parallel {
    stroke: var(--ink-faint);
    stroke-width: 1.4;
    stroke-dasharray: 6 5;
    opacity: 1;
  }

  & .map__here {
    stroke: var(--you-are-here);
    stroke-width: 3.5;
  }

  & .map__title {
    color: var(--ink-soft);
  }

  & .map__title p {
    font-size: 2.2cqw;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  & .map__title p:last-child {
    font-family: var(--font-book);
    font-size: 3.3cqw;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  & .map__title h1 {
    margin: 0.9cqw 0 0.2cqw;
    font-size: 6.4cqw;
    letter-spacing: -0.01em;
  }

  /* The legend, boxed, under the title. */
  & .map__key {
    left: 50%;
    right: auto;
    gap: 3cqw;
    width: max-content;
    padding: 0.9cqw 2.2cqw;
    translate: -50% 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    font-size: 2.1cqw;
    letter-spacing: 0.02em;
  }

  & .place__icon {
    color: var(--ink);
  }

  & .place__icon::before {
    inset: 10%;
    border: 0.45cqw solid var(--wash);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0.3cqw 0.9cqw rgba(20, 35, 58, 0.16);
  }

  & .place__icon svg {
    width: 56%;
    height: 56%;
    stroke-width: 2.8;
  }

  & .place--focus .place__icon {
    --wash: var(--focus);
  }

  /* A landmark: a plain circle in a dashed grey ring. */
  & .place--static .place__icon::before {
    display: block;
    border-style: dashed;
    border-color: var(--rule-strong);
    box-shadow: none;
  }

  /* Karla sets larger than Caveat: the notebook's sizes, scaled. */
  & .place__label {
    font-size: calc(var(--label) * 0.74);
    line-height: 1.1;
  }

  & .place__label small {
    margin-top: 0.15em;
    font-size: calc(var(--note) * 0.78);
  }

  & .place a:hover .place__icon,
  & .place a:focus-visible .place__icon {
    transform: scale(1.08);
  }

  /* 6. Page turning and controls ========================================== */

  & .leaf > .page::after {
    background: linear-gradient(90deg, rgba(20, 35, 58, 0.2), transparent 60%);
  }

  & .turn {
    box-shadow: 0 6px 14px -6px rgba(20, 35, 58, 0.55);
  }

  & .corner--next::before {
    background: linear-gradient(
      315deg,
      var(--desk) 50%,
      #e2e6eb 50%,
      #ffffff 80%
    );
    box-shadow: -3px -3px 6px rgba(20, 35, 58, 0.15);
  }

  & .corner--prev::before {
    background: linear-gradient(
      45deg,
      var(--desk) 50%,
      #e2e6eb 50%,
      #ffffff 80%
    );
    box-shadow: 3px -3px 6px rgba(20, 35, 58, 0.15);
  }

  /* 7. Phone layout ======================================================= */

  @media (max-width: 59.99em) {
    & .page {
      padding-inline: 1.25rem;
    }

    & .page--map {
      padding-inline: 0.8rem;
    }

    & .page:not(.side-left) .page__num,
    & .page__note {
      right: 1.25rem;
    }

    & .tab {
      border-radius: 0 0 3px 3px;
      box-shadow:
        inset 0 -3px 0 var(--tab),
        1px 1px 3px rgba(20, 35, 58, 0.18);
    }
  }
}

/* The map as a list, on a phone. */
@container map-page (max-width: 22rem) {
  :root[data-edition="professional"] {
    & .map__title p {
      font-size: 0.7rem;
    }

    & .map__title p:last-child {
      font-size: 1rem;
    }

    & .map__title h1 {
      font-size: 1.75rem;
    }

    & .map__places::before {
      border-left: 2px solid var(--ink);
      opacity: 1;
    }

    & .place__icon::before {
      border-width: 2px;
    }
  }
}