/* Site pages (landing, catalog, today, search, studies, me, staff) —
   structure for the portal templates, written against data-* hooks and
   the theme's tokens only. layout.css already styles the shell; this
   file adds what the site pages need. It loads before the theme, so a
   theme can restyle these pages too. */

/* Masthead additions: the site nav */
[data-region="site-nav"] { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-left: auto; font-size: 0.9rem; }
[data-region="site-nav"] a { padding: 0.35rem 0.75rem; border-radius: 999px; color: var(--color-text); opacity: 0.8; }
[data-region="site-nav"] a:hover { background: var(--hover-wash); text-decoration: none; opacity: 1; }
[data-region="site-nav"] a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-contrast); opacity: 1; }
@media (max-width: 720px) { [data-region="masthead"] { flex-wrap: wrap; } [data-region="site-nav"] { order: 3; width: 100%; margin-left: 0; justify-content: space-between; } }

/* Narrow screens: the site nav and the account move into a drawer from the
   side, opened by the menu button. A browser without popover keeps the
   wrapped bar above. */
@supports selector(:popover-open) {
  @media (max-width: 720px) {
    [data-region="masthead"] { flex-wrap: nowrap; }
    [data-region="masthead"] > [data-action="theme"] { margin-left: auto; }
    [data-action="menu"], [data-action="menu-close"] {
      display: inline-grid; place-items: center; flex: 0 0 auto;
      width: 2.2rem; height: 2.2rem; padding: 0;
      border: 1px solid var(--color-surface-border); border-radius: 999px;
      background: transparent; color: var(--color-text); cursor: pointer;
    }
    [data-action="menu-close"] { align-self: flex-end; }
    [data-region="drawer"] { display: none; }
    [data-region="drawer"]:popover-open {
      display: flex; flex-direction: column; gap: 1.25rem;
      position: fixed; inset: 0 0 0 auto; margin: 0;
      width: min(20rem, 85vw); height: 100dvh; max-height: none;
      padding: 1rem 1.25rem; overflow-y: auto;
      border: 0; border-left: 1px solid var(--color-surface-border);
      background: var(--color-bg); color: var(--color-text);
      box-shadow: -12px 0 32px oklch(0% 0 0 / 0.3);
      transition: transform 0.2s ease;
    }
    @starting-style { [data-region="drawer"]:popover-open { transform: translateX(100%); } }
    [data-region="drawer"]::backdrop { background: oklch(0% 0 0 / 0.45); }
    [data-region="drawer"] [data-region="site-nav"] {
      flex-direction: column; flex-wrap: nowrap; gap: 0.25rem;
      order: 0; width: auto; margin: 0; font-size: 1.05rem;
    }
    [data-region="drawer"] [data-region="site-nav"] a { padding: 0.7rem 1rem; }
    [data-region="drawer"] [data-region="account"] {
      flex-direction: column; align-items: flex-start; gap: 0.75rem;
      padding: 1rem 1rem 0; border-top: 1px solid var(--color-surface-border);
      font-size: 0.95rem;
    }
    html:has([data-region="drawer"]:popover-open) { overflow: hidden; }
  }
  @media (prefers-reduced-motion: reduce) { [data-region="drawer"]:popover-open { transition: none; } }
}

/* Lightbox */
dialog[data-role="lightbox"] { border: 0; padding: 0; background: transparent; max-width: min(96vw, 64rem); width: 100%; }
dialog[data-role="lightbox"]::backdrop { background: oklch(0% 0 0 / 0.8); }
dialog[data-role="lightbox"] [data-role="player"] { aspect-ratio: 16 / 9; }
dialog[data-role="lightbox"] iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
dialog[data-role="lightbox"] form { text-align: right; }
dialog[data-role="lightbox"] form button { background: transparent; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }

/* Generic site page pieces */
[data-page] > h1 { font-size: 2.25rem; }
[data-role="lede"] { color: var(--color-muted); font-size: 1.1rem; max-width: 40rem; }
[data-card] { background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); border: var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--radius); padding: 1.5rem; margin: 0 0 1rem; }
[data-card] > h2 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; font-weight: 600; margin-bottom: 1rem; }
[data-card] > h2 + p { margin-top: 0; }
[data-grid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
[data-grid="wide"] { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
[data-grid] [data-card] { margin: 0; }
[data-actions] { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
[data-button] { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-accent); color: var(--color-accent); font-weight: 600; font-family: var(--font-heading); text-decoration: none; background: transparent; font: inherit; cursor: pointer; }
[data-button]:hover { text-decoration: none; background: var(--hover-wash); }
[data-button="primary"] { background: var(--color-accent); color: var(--color-accent-contrast); }
[data-button="primary"]:hover { background: var(--color-accent); opacity: 0.9; }
[data-role="eyebrow"] { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; margin: 0 0 0.25rem; }
[data-stat] { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; text-align: center; }
[data-stat] strong { display: block; font-size: 2rem; font-family: var(--font-heading); line-height: 1.1; background: var(--title-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-stat] span { font-size: 0.8rem; color: var(--color-muted); }
[data-meter] { height: 0.5rem; border-radius: 999px; background: var(--hover-wash); overflow: hidden; margin: 0.35rem 0 0.75rem; }
[data-meter] > i { display: block; height: 100%; border-radius: 999px; background: var(--accent-fill); }
[data-list] { list-style: none; margin: 0; padding: 0; }
[data-list] > li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--color-rule); }
[data-list] > li:first-child { border-top: 0; }
[data-list] [data-role="day"] { min-width: 3.5ch; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; opacity: 0.5; }
[data-list] [data-role="ref"] { margin-left: auto; color: var(--color-muted); font-size: 0.9rem; white-space: nowrap; }
[data-pill] { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.75rem; background: var(--hover-wash); color: var(--color-muted); }
[data-pill="ok"] { background: color-mix(in oklab, #00b8db 22%, transparent); color: var(--color-text); }
[data-pill="warn"] { background: color-mix(in oklab, #ec4899 20%, transparent); color: var(--color-text); }
[data-pill="accent"] { background: var(--color-accent); color: var(--color-accent-contrast); }
table[data-table] { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table[data-table] th { text-align: left; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; padding: 0.5rem 0.6rem; }
table[data-table] td { padding: 0.55rem 0.6rem; border-top: 1px solid var(--color-rule); vertical-align: top; }
[data-tablewrap] { overflow-x: auto; }
form[data-form] label { display: block; margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--color-muted); }
form[data-form] input, form[data-form] select, form[data-form] textarea { display: block; width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-rule); border-radius: 0.6rem; background: var(--answer-bg); color: var(--color-text); font: inherit; }
form[data-form] fieldset { border: 1px solid var(--color-rule); border-radius: 0.6rem; padding: 0.75rem 1rem; margin: 0 0 1rem; }
form[data-form] fieldset label { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.25rem 0; }
form[data-form] fieldset input { display: inline; width: auto; margin: 0; }
[data-cols] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { [data-cols] { grid-template-columns: minmax(0, 1fr); } }
[data-note] { font-size: 0.85rem; color: var(--color-muted); }
[data-wash] { background: var(--hover-wash); border-radius: 0.75rem; padding: 0.9rem 1.1rem; }

/* Landing */
[data-page="home"] > h1 { display: none; }
[data-role="hero"] { text-align: center; padding: 2.5rem 1rem 2rem; }
[data-role="hero"] img { max-height: 11rem; }
[data-role="hero"] p { font-family: var(--font-heading); font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 700; max-width: 34rem; margin: 1rem auto 1.5rem; background: var(--title-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-role="hero"] [data-actions] { justify-content: center; }
[data-role="feature"] { display: grid; grid-template-columns: 14rem 1fr; gap: 1.25rem; align-items: center; }
[data-role="feature"] img { border-radius: 0.75rem; cursor: pointer; width: 100%; }
[data-role="feature"] h3 { margin: 0 0 0.2rem; }
@media (max-width: 640px) { [data-role="feature"] { grid-template-columns: 1fr; } }
[data-role="paintings"] { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0 0.75rem; scroll-snap-type: x mandatory; }
[data-role="paintings"] a { flex: 0 0 auto; scroll-snap-align: start; }
[data-role="paintings"] img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 0.6rem; box-shadow: 0 4px 12px oklch(0% 0 0 / 0.35); display: block; }
[data-role="videos"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
[data-role="videos"] a { display: block; color: var(--color-text); font-size: 0.85rem; }
[data-role="videos"] a:hover { text-decoration: none; }
[data-role="videos"] img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.6rem; display: block; margin-bottom: 0.35rem; }
[data-role="glance"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
[data-role="glance"] strong { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; }
[data-role="glance"] span { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; }

/* Catalog */
[data-role="course-card"] [data-role="painting-strip"] { margin-bottom: 0.75rem; }
[data-role="course-card"] h3 a { color: var(--color-text); }
[data-role="languages"] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; }
[data-role="languages"] a { padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-surface-border); color: var(--color-text); font-size: 0.85rem; }
[data-role="languages"] a:hover { background: var(--hover-wash); text-decoration: none; }

/* Today */
[data-role="today-lesson"] h2 { font-size: 1.6rem; margin: 0.25rem 0; }
[data-role="today-lesson"] [data-role="eyebrow"] { font-size: 0.8rem; }
[data-role="today-controls"] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
[data-role="today-controls"] label { font-size: 0.85rem; color: var(--color-muted); }
[data-role="today-controls"] input { display: block; margin-top: 0.3rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-rule); border-radius: 0.6rem; background: var(--answer-bg); color: var(--color-text); font: inherit; }

/* Search */
[data-role="search-form"] { display: flex; gap: 0.6rem; flex-wrap: wrap; }
[data-role="search-form"] input[type="search"] { flex: 1 1 18rem; padding: 0.7rem 1rem; border: 1px solid var(--color-rule); border-radius: 999px; background: var(--answer-bg); color: var(--color-text); font: inherit; font-size: 1.05rem; }
[data-role="search-form"] select { padding: 0.6rem 0.8rem; border: 1px solid var(--color-rule); border-radius: 999px; background: var(--answer-bg); color: var(--color-text); font: inherit; }
[data-role="results"] { list-style: none; padding: 0; margin: 1rem 0 0; }
[data-role="results"] > li { padding: 0.9rem 0; border-top: 1px solid var(--color-rule); }
[data-role="results"] > li:first-child { border-top: 0; }
[data-role="results"] a { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
[data-role="results"] p { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--color-muted); }
[data-role="results"] mark { background: oklch(85% 0.15 90 / 0.5); color: inherit; border-radius: 0.2rem; padding: 0 0.1rem; }
[data-role="results"] [data-role="eyebrow"] { margin-top: 0.15rem; }

/* Certificate */
[data-role="certificate"] { text-align: center; padding: 3rem 2rem; border: 3px double var(--color-accent); }
[data-role="certificate"] h2 { font-size: 2rem; opacity: 1; letter-spacing: 0; text-transform: none; }
[data-role="certificate"] [data-role="name"] { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin: 1rem 0; }
[data-role="certificate"] [data-role="verify"] { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; opacity: 0.6; }

@media print { [data-region="site-nav"], [data-action="theme"], [data-actions] { display: none; } }

/* ---- Home layouts ----------------------------------------------------
   Structure only: the home page holds every layout, and data-layout on
   <html> picks the one shown: Faithful for a visitor, Today for a
   signed-in student, or the reader's choice in the Appearance panel.
   Faithful without it.
   Colours, fonts and corners come from the theme's tokens, so any layout
   goes with any theme. */
[data-layout-view] { display: none; }
html:not([data-layout]) [data-layout-view="faithful"],
html[data-layout="classic"] [data-layout-view="classic"],
html[data-layout="faithful"] [data-layout-view="faithful"],
html[data-layout="gallery"] [data-layout-view="gallery"],
html[data-layout="today"] [data-layout-view="today"],
html[data-layout="journey"] [data-layout-view="journey"],
html[data-layout="together"] [data-layout-view="together"],
html[data-layout="portrait"] [data-layout-view="portrait"] { display: block; }

/* main has a 0.25rem edge (Classic's cards pad themselves); these
   layouts put text at the edge, so they add to it: 16px in all. */
[data-layout-view]:not([data-layout-view="classic"]) { padding-inline: 0.75rem; }
[data-layout-view] > section, [data-layout-view] > [data-cols] { margin: 0 0 2.5rem; }
[data-layout-view] h3 { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0.25rem 0 0.5rem; color: var(--color-heading, var(--color-text)); }
[data-layout-view] figure { margin: 0; }
[data-layout-view] img { display: block; max-width: 100%; }
[data-layout-view] a:hover { text-decoration: none; }

/* Page heads: a big headline, a lede, two buttons. */
[data-role="home-head"] { padding: 2.5rem 0 2rem; }
[data-role="home-head"] h2 { font-family: var(--font-heading); font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; margin: 0.25rem 0 1rem; letter-spacing: -0.01em; background: var(--title-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-role="home-head"] h2 em { font-style: normal; color: var(--color-accent); -webkit-text-fill-color: var(--color-accent); }

/* Shared: day 1 as a card, the three steps, quotes. */
[data-role="home-lesson"] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: center; }
[data-role="home-lesson"] img, [data-role="today-hero"] img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
[data-role="home-lesson"] h4 { font-family: var(--font-heading); font-size: 1.5rem; margin: 0.2rem 0 0.75rem; }
[data-layout-view] blockquote { margin: 0.75rem 0; font-size: 1.05rem; font-style: italic; }
[data-layout-view] blockquote small { display: block; margin-top: 0.4rem; font-size: 0.8rem; font-style: normal; color: var(--color-muted); }
@media (max-width: 640px) { [data-role="home-lesson"] { grid-template-columns: 1fr; } }
[data-role="home-steps"] > a { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.25rem; border: var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--color-text); }
[data-role="home-steps"] > a:hover { background: var(--hover-wash); }
[data-role="home-steps"] strong { font-family: var(--font-heading); font-size: 1.1rem; }

/* Gallery: one plate, then the wall. */
[data-role="plate"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
[data-role="plate"] img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 40px oklch(0% 0 0 / 0.25); }
[data-role="plate"] h3 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
@media (max-width: 640px) { [data-role="plate"] { grid-template-columns: 1fr; } }
[data-role="wall"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.5rem 1rem; margin-top: 1.25rem; }
[data-role="wall"] a { color: var(--color-text); }
[data-role="wall"] img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) / 2); box-shadow: 0 6px 16px oklch(0% 0 0 / 0.2); transition: transform 0.15s ease; }
[data-role="wall"] a:hover img { transform: translateY(-3px); }
[data-role="wall"] figcaption, [data-role="strip"] figcaption { display: flex; flex-direction: column; margin-top: 0.45rem; font-size: 0.85rem; }
[data-role="wall"] figcaption span, [data-role="strip"] figcaption span { color: var(--color-muted); font-size: 0.78rem; }
[data-role="rooms"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); border-top: 1px solid var(--color-rule); }
[data-role="rooms"] a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0.25rem; border-bottom: 1px solid var(--color-rule); color: var(--color-text); }
[data-role="rooms"] a:hover { background: var(--hover-wash); }
[data-role="rooms"] strong { font-family: var(--font-heading); font-size: 1.15rem; }
[data-role="rooms"] small { color: var(--color-muted); }

/* Today first: progress, the lesson as the hero, three step links. */
[data-role="progress"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0; font-size: 0.85rem; color: var(--color-muted); }
[data-role="progress"] [data-meter] { flex: 1 1 8rem; margin: 0; }
[data-role="today-hero"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: center; }
[data-role="today-hero"] h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; margin: 0.25rem 0 0.5rem; }
@media (max-width: 720px) { [data-role="today-hero"] { grid-template-columns: 1fr; } }
[data-role="step-links"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 2.5rem; }
[data-role="step-links"] a { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.75rem; padding: 0.9rem 1rem; border: var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--color-text); }
[data-role="step-links"] a:hover { background: var(--hover-wash); }
[data-role="step-links"] span { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 700; }
[data-role="step-links"] small { color: var(--color-muted); }
@media (max-width: 720px) { [data-role="step-links"] { grid-template-columns: 1fr; } }
[data-role="series-rows"] a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.85rem 0.25rem; border-top: 1px solid var(--color-rule); color: var(--color-text); }
[data-role="series-rows"] a:hover { background: var(--hover-wash); }
[data-role="series-rows"] small { display: block; color: var(--color-muted); }
/* Today: the book's painting beside the progress line, each series as a
   small fan of its paintings, and icons inside the buttons. */
[data-role="progress"] [data-role="book-icon"] { width: 2rem; height: 2rem; border-radius: 0.4rem; object-fit: cover; }
[data-role="series-icon"] { flex: 0 0 auto; display: flex; width: 3.4rem; height: 2.4rem; }
[data-role="series-icon"] img { width: 1.8rem; height: 2.4rem; object-fit: cover; border-radius: 0.3rem; box-shadow: 0 0 0 2px var(--color-bg); }
[data-role="series-icon"] img + img { margin-left: -1.1rem; }
[data-role="series-rows"] a > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
[data-role="today-hero"] [data-button] { display: inline-flex; align-items: center; gap: 0.45rem; }
[data-role="today-hero"] [data-button] svg { flex: 0 0 auto; }
[data-role="series-rows"] a > span:last-child { white-space: nowrap; color: var(--color-accent); font-weight: 600; }
[data-role="strip"] { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.25rem 0 0.75rem; scroll-snap-type: x mandatory; }
[data-role="strip"] a { flex: 0 0 8rem; scroll-snap-align: start; color: var(--color-text); }
[data-role="strip"] img { width: 8rem; height: 8rem; object-fit: cover; border-radius: calc(var(--radius) / 2); }

/* Journey: the path scrolls sideways; site.js fills it to the chosen day. */
[data-role="path"] { display: flex; gap: 0; overflow-x: auto; padding: 0.5rem 0 1rem; }
[data-role="station"] { flex: 0 0 var(--w); padding-right: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
[data-role="station"] > a { color: var(--color-text); font-family: var(--font-heading); }
[data-role="station"] > small { color: var(--color-muted); font-size: 0.78rem; }
[data-role="rail"] { position: relative; height: 0.4rem; margin: 0.9rem 0 0; border-radius: 999px; background: var(--hover-wash); }
[data-role="rail"] i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--color-ok); }
[data-role="marks"] { position: relative; height: 1.4rem; margin-top: -0.85rem; }
[data-role="marks"] a { position: absolute; top: 0.25rem; width: 0.85rem; height: 0.85rem; margin-left: -0.425rem; border-radius: 999px; border: 2px solid var(--color-muted); background: var(--color-bg); }
[data-role="marks"] a[data-done] { border-color: var(--color-ok); background: var(--color-ok); }
[data-role="marks"] a[data-here] { transform: scale(1.5); border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 4px oklch(70% 0.1 230 / 0.25); }
[data-role="station"] ul { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--color-muted); }
[data-role="station"] ul i { color: var(--color-ok); }
[data-role="where"] label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
[data-role="where"] input { width: 100%; accent-color: var(--color-ok); }
[data-role="where"] output { display: block; margin-top: 0.75rem; font-size: 1.1rem; }
[data-role="where"] output b { color: var(--color-ok); }

/* Together: a photo hero, photo cards, a moving strip of languages. */
[data-role="photo-hero"] { position: relative; margin: 1rem 0 2.5rem; border-radius: var(--radius); overflow: hidden; min-height: 26rem; display: grid; align-items: end; }
[data-role="photo-hero"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-role="photo-hero"] > div { position: relative; padding: 2rem; color: #fff; background: linear-gradient(transparent, oklch(15% 0.04 250 / 0.85) 45%); }
[data-role="photo-hero"] h2 { font-family: var(--font-heading); font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; margin: 0.25rem 0 0.75rem; color: #fff; }
[data-role="photo-hero"] h2 em { font-style: normal; color: var(--color-ok); }
[data-role="photo-hero"] [data-role="eyebrow"] { opacity: 0.85; }
[data-role="photo-hero"] [data-button]:not([data-button="primary"]) { color: #fff; border-color: #fff; }
[data-role="photo-card"] { padding: 0; overflow: hidden; }
[data-role="photo-card"] img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.9rem; }
[data-role="photo-card"] > :not(img) { padding: 0 1.25rem; }
[data-role="photo-card"] > :last-child { padding-bottom: 1.25rem; }
[data-role="series-shelf"] { margin: 1.25rem 0 0; }
[data-role="series-shelf"] > p { margin: 0 0 0.5rem; }
[data-role="series-shelf"] a { color: var(--color-text); }
[data-role="series-shelf"] small { color: var(--color-muted); }
[data-role="lane"] { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
[data-role="lane"] > div { display: flex; gap: 0.6rem; width: max-content; animation: home-lane 40s linear infinite; }
[data-role="lane"] a { padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-surface-border); color: var(--color-text); white-space: nowrap; }
@keyframes home-lane { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { [data-role="lane"] > div { animation: none; flex-wrap: wrap; width: auto; } }

/* Portrait: one word per book; the painting shows on hover or focus. */
[data-role="word-band"] { margin: 1.5rem 0 0; }
[data-role="word-band"] > p small { color: var(--color-muted); }
[data-role="words"] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
[data-role="words"] a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 9rem; min-height: 5.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); overflow: hidden; border: var(--card-border); background: var(--card-bg); color: var(--color-text); }
[data-role="words"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
[data-role="words"] strong, [data-role="words"] small { position: relative; }
[data-role="words"] strong { font-family: var(--font-heading); font-size: clamp(1.3rem, 3.5vw, 1.9rem); line-height: 1.1; color: var(--color-accent); }
[data-role="words"] small { font-size: 0.75rem; color: var(--color-muted); }
[data-role="words"] a:is(:hover, :focus-visible) img { opacity: 1; }
[data-role="words"] a:is(:hover, :focus-visible) :is(strong, small) { color: #fff; text-shadow: 0 1px 8px oklch(0% 0 0 / 0.8); }

/* Faithful: a photo hero tinted brand navy, one green word, white pills;
   then the numbers. Brand colours come from the publisher's brand tokens,
   with the theme's as fallback. */
[data-role="brand-hero"] { position: relative; margin: 1rem 0 0; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; min-height: 28rem; display: grid; align-items: center; }
[data-role="brand-hero"] img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
[data-role="brand-hero"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in oklab, var(--brand-navy, #022c53) 94%, transparent) 30%, color-mix(in oklab, var(--brand-navy, #022c53) 55%, transparent)); }
[data-role="brand-hero"] > div { position: relative; z-index: 2; padding: 2.5rem clamp(1.25rem, 5vw, 3rem); max-width: 40rem; color: #fff; }
[data-role="brand-hero"] [data-role="eyebrow"] { color: var(--brand-cyan, var(--color-accent)); opacity: 1; font-weight: 700; }
[data-role="brand-hero"] h2 { font-family: var(--font-heading); font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.05; margin: 0.3rem 0 1rem; color: #fff; }
[data-role="brand-hero"] h2 em { font-style: normal; color: var(--brand-green, var(--color-ok)); }
[data-role="brand-hero"] p { font-size: 1.1rem; color: rgb(255 255 255 / 0.88); }
[data-role="brand-hero"] [data-button] { border-radius: 999px; border-color: #fff; color: #fff; background: transparent; }
[data-role="brand-hero"] [data-button="primary"] { background: #fff; color: var(--brand-navy, #022c53); }
[data-role="brand-stats"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius); background: var(--brand-blue, var(--color-accent)); color: #fff; text-align: center; }
[data-role="brand-stats"] b { display: block; font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.1; }
[data-role="brand-stats"] span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
@media (max-width: 560px) { [data-role="brand-stats"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-role="series-cards"] > a { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; color: var(--color-text); }
[data-role="series-cards"] > a:hover { background: var(--hover-wash); }
[data-role="series-cards"] strong { font-family: var(--font-heading); font-size: 1.2rem; }
[data-role="series-cards"] [data-role="eyebrow"] { color: var(--brand-cyan, var(--color-accent)); opacity: 1; font-weight: 700; }

/* ---- Reading plan (/reading-plan/) ----------------------------------
   Years, then series, then weeks of seven days; each day one passage.
   Week blocks flow in columns and never split across them. */
[data-page="reading-plan"] [data-actions] { margin: 1rem 0 1.5rem; }
[data-role="plan-jump"] { margin: 0 0 2rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--hover-wash); }
[data-role="plan-jump"] p { margin: 0.25rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
[data-role="plan-jump"] b { min-width: 5rem; font-family: var(--font-heading); }
[data-role="plan-year"] > h2 { margin: 2.5rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-accent); }
[data-role="plan-year"] h2 small, [data-role="plan-series"] h3 small { margin-inline-start: 0.6rem; font-family: inherit; font-size: 0.8rem; font-weight: 400; color: var(--color-muted); }
[data-role="plan-series"] { margin: 1.75rem 0 0; }
[data-role="plan-series"] > h3 { margin: 0 0 0.4rem; scroll-margin-top: 1rem; }
[data-role="plan-books"] { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.85rem; }
[data-role="plan-books"] a { padding: 0.1rem 0.6rem; border: 1px solid var(--color-rule); border-radius: 999px; text-decoration: none; color: var(--color-text); }
[data-role="plan-books"] a:hover { background: var(--hover-wash); }
[data-role="plan-weeks"] { columns: 3 15rem; column-gap: 1.5rem; }
[data-role="plan-week"] { break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
[data-role="plan-week"] h4 { margin: 0; padding: 0.3rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--hover-wash); color: var(--color-muted); }
[data-role="plan-week"] ol { list-style: none; margin: 0; padding: 0; }
[data-role="plan-week"] li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.3rem 0.75rem; border-top: 1px solid var(--color-rule); scroll-margin-top: 1rem; }
[data-role="plan-week"] li:first-child { border-top: 0; }
[data-role="plan-week"] li:target { background: var(--hover-wash); }
[data-role="plan-week"] [data-role="day"] { min-width: 3ch; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: var(--color-muted); text-align: end; }
[data-role="plan-week"] a { color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
[data-role="plan-week"] a:hover { text-decoration: underline; }

@media print {
  [data-region="masthead"], [data-region="footer"], [data-region="site-nav"], [data-role="plan-jump"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  main { max-width: none; padding: 0; }
  [data-page="reading-plan"] h1 { margin-top: 0; }
  [data-role="plan-year"] + [data-role="plan-year"] { break-before: page; }
  [data-role="plan-year"] > h2 { margin-top: 0; border-color: #000; }
  [data-role="plan-series"] { break-inside: auto; }
  [data-role="plan-series"] > h3 { break-after: avoid; }
  [data-role="plan-books"] { display: none; }
  [data-role="plan-weeks"] { columns: 4 8rem; column-gap: 0.75rem; }
  [data-role="plan-week"] { border-color: #888; }
  [data-role="plan-week"] h4 { background: #eee; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  [data-role="plan-week"] li { padding: 0.1rem 0.4rem; border-color: #ccc; }
  [data-role="plan-week"] a, [data-role="plan-week"] [data-role="day"] { color: #000; }
}
/* World map of study groups. Tokens only; static, no animation. */
[data-role="world-map"] { margin: 1.25rem 0; }
[data-role="world-map"] svg { display: block; width: 100%; height: auto; max-width: 100%; }
[data-role="world-map"] path { fill: var(--color-surface-border); stroke: var(--color-bg); stroke-width: 0.5; }
[data-role="world-map"] path[data-groups], [data-role="world-map"] circle { fill: var(--color-accent); }
[data-role="world-map"] circle { stroke: var(--color-bg); stroke-width: 1; }
[data-role="world-map"] [data-groups]:hover, [data-role="world-map"] [data-groups]:focus, [data-role="world-map"] [data-groups][data-active] { fill: var(--color-text); outline: none; }
[data-role="world-map"] figcaption { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 0.5rem; font-size: 0.9rem; color: var(--color-muted); }
[data-role="map-key"] { display: inline-flex; align-items: center; gap: 0.4rem; }
[data-role="map-key"] i { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--color-accent); display: inline-block; }
[data-role="map-readout"] { color: var(--color-text); font-weight: 600; min-height: 1.4em; }
[data-role="country-list"] { list-style: none; margin: 0.75rem 0 0; padding: 0; columns: 3 14rem; column-gap: 2rem; }
[data-role="country-list"] li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border-bottom: 1px solid var(--color-surface-border); break-inside: avoid; }
[data-role="country-list"] b { font-variant-numeric: tabular-nums; }
[data-page="groups"] summary { cursor: pointer; font-weight: 600; }
/* Start a study ---------------------------------------------------- *
   The picker reuses the course index's series tiles and book cards
   (layout.css); this adds the choosing: ticked lessons, a tray that
   lists them in order, and the search. Theme tokens only. */
[data-page="study-new"] { --pick-wash: color-mix(in oklab, var(--color-accent) 14%, transparent); }
[data-page="study-new"] [data-role="sr-only"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-page="study-new"] [data-role="step-num"] {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem;
  border-radius: 999px; background: var(--color-accent); color: var(--color-accent-contrast);
  font-size: 0.8rem; letter-spacing: 0; opacity: 1;
}
[data-page="study-new"] [data-card] > h2 { display: flex; align-items: center; opacity: 0.8; }
[data-page="study-new"] [data-actions] { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0 2rem; }
[data-page="study-new"] [data-actions] [data-button] { padding: 0.7rem 1.6rem; }

[data-role="name-row"] { display: grid; grid-template-columns: 2fr 1fr; gap: 0 1rem; }
@media (max-width: 40rem) { [data-role="name-row"] { grid-template-columns: 1fr; } }

/* Picker and tray side by side where there is room. */
[data-role="builder-grid"] { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
@media (max-width: 60rem) { [data-role="builder-grid"] { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 64rem) { main:has([data-page="study-new"]) { max-width: min(76rem, calc(100vw - 3rem)); } }

[data-role="picker-search"] { margin: 0 0 1rem; }
form[data-form] [data-role="picker-search"] input { margin: 0; padding: 0.7rem 1rem; border-radius: 999px; }
[data-role="pick-status"] { min-height: 1.2em; margin: 0.4rem 0 0 1rem; }

/* Paced by script (data-paced): a series shows its books when picked, a
   book its lessons. With no script everything is open, ticks and all. */
[data-page="study-new"] [data-role="series-nav"] { margin-bottom: 0.75rem; }
[data-page="study-new"] [data-role="series-hint"] { margin: 0 0 1rem; text-align: start; }
[data-page="study-new"] [data-role="series-title"] { font-size: 1.15rem; margin: 1rem 0 0.75rem; }
[data-paced] [data-role="series"], [data-paced] [data-role="book-lessons"] { display: none; }
[data-paced] [data-role="series"][data-open], [data-paced] [data-role="book-lessons"][data-open] { display: block; }
[data-paced][data-searching] [data-role="series"], [data-paced][data-searching] [data-role="book-lessons"] { display: block; }
[data-paced][data-searching] [data-role="series-nav"], [data-paced][data-searching] [data-role="series-hint"],
[data-paced][data-searching] [data-role="book-grid"] { display: none; }
[data-paced]:not([data-searching]) [data-role="series-title"] { display: none; }
[data-pick-row][hidden], [data-role="series"][hidden], [data-role="book-lessons"][hidden] { display: none !important; }

/* A count of what is ticked, on the tiles. */
[data-role="picked-count"] { color: var(--color-accent); font-weight: 700; }
[data-role="picked-count"]:empty, [data-role="book-count"] b:empty { display: none; }
[data-role="book-count"] b { color: var(--color-accent); font-weight: 700; }
[data-role="book-count"] b::before, [data-role="picked-count"]::before { content: "· "; color: var(--color-muted); font-weight: 400; }
[data-page="study-new"] [data-role="series-nav"] a, [data-page="study-new"] [data-role="book-card"] { border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--card-bg); }
[data-page="study-new"] [data-role="series-nav"] a[data-has-picks], [data-page="study-new"] [data-role="book-card"][data-has-picks] { border-color: color-mix(in oklab, var(--color-accent) 60%, var(--color-rule)); }
[data-page="study-new"] [data-role="book-card"][aria-current], [data-page="study-new"] [data-role="series-nav"] a[aria-current] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }

[data-page="study-new"] [data-role="book-lessons"] { padding: 1rem; border: 1px solid var(--color-rule); border-radius: var(--radius); margin: 0 0 1rem; background: var(--answer-bg); }
[data-page="study-new"] [data-role="book-lessons"] h4 { margin: 0; font-size: 1.2rem; }
[data-role="book-actions"] { margin-left: auto; display: inline-flex; gap: 0.5rem; }
[data-role="book-actions"] [data-button] { padding: 0.3rem 0.85rem; font-size: 0.85rem; }
[data-role="book-actions"] [data-button]:disabled { opacity: 0.4; cursor: default; }

[data-role="pick-list"] { list-style: none; margin: 0; padding: 0; columns: 15rem; column-gap: 0.75rem; }
[data-role="pick-list"] li { break-inside: avoid; margin: 0 0 0.25rem; }
form[data-form] [data-role="pick-list"] label {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; padding: 0.55rem 0.7rem;
  border: 1px solid transparent; border-radius: 0.6rem; cursor: pointer;
  color: var(--color-text); font-size: 0.92rem; line-height: 1.3;
}
form[data-form] [data-role="pick-list"] label:hover { background: var(--hover-wash); }
form[data-form] [data-role="pick-list"] label:has(input:checked) { background: var(--pick-wash); border-color: color-mix(in oklab, var(--color-accent) 55%, transparent); }
form[data-form] [data-role="pick-list"] label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; }
form[data-form] [data-role="pick-list"] input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; accent-color: var(--color-accent); }
[data-role="pick-list"] [data-role="day"] { flex: 0 0 auto; min-width: 2.4ch; padding-top: 0.15rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; opacity: 0.6; }
[data-role="lesson-text"] { display: flex; flex-direction: column; min-width: 0; }
[data-role="lesson-text"] small { color: var(--color-muted); font-size: 0.78rem; }
[data-role="pick-empty"] { color: var(--color-muted); text-align: center; padding: 1.5rem 0; }

/* The tray: what the study is so far, in meeting order. Sticky beside
   the picker; after it on a phone, with a bar that jumps to it. */
[data-role="tray"] { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--answer-bg); max-height: calc(100vh - 2rem); }
[data-role="tray-head"] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
[data-role="tray-head"] h3 { margin: 0; font-size: 1.05rem; }
[data-role="tray-count"] { margin: 0; color: var(--color-muted); font-size: 0.9rem; }
[data-role="tray-count"] b { color: var(--color-accent); font-size: 1.5rem; font-family: var(--font-heading); }
[data-role="tray-empty"] { margin: 0; padding: 1rem; border: 1px dashed var(--color-rule); border-radius: 0.6rem; text-align: center; }
[data-role="tray-list"] { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; max-height: 26rem; }
[data-role="tray-list"] li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0.25rem; border-top: 1px solid var(--color-rule); font-size: 0.88rem; line-height: 1.3; }
[data-role="tray-list"] li:first-child { border-top: 0; }
[data-role="tray-list"] .n { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--pick-wash); color: var(--color-text); font-size: 0.75rem; font-weight: 700; }
[data-role="tray-list"] .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
[data-role="tray-list"] .t small { color: var(--color-muted); font-size: 0.76rem; }
[data-role="tray-list"] button { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
[data-role="tray-list"] button:hover { background: var(--hover-wash); color: var(--color-text); }
[data-role="tray-list"] button:focus-visible { outline: 2px solid var(--color-accent); }
[data-role="tray-error"] { margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.6rem; background: color-mix(in oklab, #ec4899 20%, transparent); }
[data-role="tray-error"][hidden], [data-role="tray"] [hidden] { display: none; }
[data-role="tray"] [data-action="clear-all"] { align-self: flex-start; padding: 0.3rem 0.9rem; font-size: 0.85rem; }

/* Phone: the tray follows the picker; a bar with the count stays at the
   bottom and jumps to it. */
[data-role="pick-bar"] { display: none; }
@media (max-width: 60rem) {
  [data-role="tray"] { position: static; max-height: none; }
  [data-role="pick-bar"] {
    position: fixed; z-index: 20; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.45rem 0.5rem 0.45rem 1.1rem; border: 1px solid var(--color-rule); border-radius: 999px;
    background: var(--card-bg); box-shadow: 0 6px 24px oklch(0% 0 0 / 0.3);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  [data-role="pick-bar"] b { color: var(--color-accent); font-size: 1.1rem; }
  [data-role="pick-bar"] [data-button] { padding: 0.4rem 1.1rem; }
  [data-page="study-new"] { padding-bottom: 4rem; }
}
@media (max-width: 36rem) { [data-page="study-new"] [data-card] { padding: 1rem; } [data-role="pick-list"] { columns: 1; } }
@media (prefers-reduced-motion: reduce) { [data-page="study-new"] * { transition: none !important; } }

[data-page="legal"] h2 { margin-top: 1.5rem; font-size: 1.25rem; }
[data-page="legal"] h2:first-child { margin-top: 0; }
/* The student guide (School.Site.Guide): contents, then the text. */
[data-page="guide"] { max-width: 48rem; margin: 0 auto; }
[data-page="guide"] h1 { margin-bottom: 1rem; }
[data-role="guide-contents"] h2 { margin: 0 0 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
[data-role="guide-contents"] ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
[data-role="guide-contents"] li { margin: 0 0 0.4rem; break-inside: avoid; }
@media (max-width: 36rem) { [data-role="guide-contents"] ol { columns: 1; } }
[data-role="guide-body"] { line-height: 1.6; }
[data-role="guide-body"] > :first-child { margin-top: 0; }
[data-page="guide"] [data-role="guide-body"] h2 { margin: 2.25rem 0 0.5rem; font-size: 1.45rem; text-transform: none; letter-spacing: normal; opacity: 1; font-weight: 700; color: var(--color-heading); scroll-margin-top: 1rem; }
[data-page="guide"] [data-role="guide-body"] h2:first-child { margin-top: 0; }
[data-role="guide-body"] h3 { margin: 1.5rem 0 0.35rem; font-size: 1.1rem; scroll-margin-top: 1rem; }
[data-role="guide-body"] li { margin: 0.25rem 0; }
[data-role="guide-body"] [data-role="scroll"] { overflow-x: auto; margin: 0.75rem 0; }
[data-role="guide-body"] table { border-collapse: collapse; min-width: 100%; }
[data-role="guide-body"] th, [data-role="guide-body"] td { text-align: left; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--color-rule); }
[data-role="guide-body"] th { color: var(--color-muted); font-weight: 600; }

[data-region="footer"] [data-role="legal-links"] { display: flex; gap: 1rem; justify-content: center; margin-top: 0.25rem; }

/* Student-only links (Today, Me) are hidden from a visitor. <html> gets
   data-signed-in before first paint (remembered) and after /api/me. */
:root:not([data-signed-in]) [data-auth="student"] { display: none !important; }

/* Bible studies (real): the study page's buttons stand clear of the cards
   below; the invite link with its Copy button; form and status messages. */
[data-page="study"] [data-role="study-actions"] { margin: 1rem 0 1.75rem; }
[data-page="study"] [data-list] li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
[data-page="study"] [data-list] li [data-role="ref"] { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 0.5rem; align-items: center; flex-shrink: 0; }
[data-page="study"] [data-list] li [data-button] { padding: 0.15rem 0.6rem; font-size: 0.8rem; }
[data-role="invite-row"] { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
[data-role="invite-row"] input { flex: 1; min-width: 0; padding: 0.5rem; border-radius: 0.6rem; border: 1px solid var(--color-rule); background: var(--answer-bg); color: var(--color-text); }
[data-role="invite-form"] textarea { width: 100%; }
[data-role="form-error"] { margin: 1rem 0 0; padding: 0.5rem 0.75rem; border-radius: 0.6rem; background: color-mix(in oklab, #ec4899 20%, transparent); }
[data-studies] [hidden] { display: none !important; }
[data-page="studies"] > section { margin: 0 0 1.5rem; }
[data-page="study-join"] [data-card] { max-width: 40rem; }

/* Time zone search field and its list of matches. */
[data-role="tz-combo"] { position: relative; margin: 0 0 0.9rem; }
[data-role="tz-combo"] > label { display: block; font-size: 0.9rem; color: var(--color-muted); }
[data-role="tz-combo"] [role="listbox"] { position: absolute; z-index: 20; inset-inline: 0; top: 100%; margin: 0.25rem 0 0; padding: 0.25rem; list-style: none; max-height: 16rem; overflow-y: auto; border: 1px solid var(--color-rule); border-radius: 0.6rem; background: var(--color-surface, var(--answer-bg)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
[data-role="tz-combo"] [role="listbox"][hidden] { display: none; }
[data-role="tz-combo"] [role="option"] { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem; border-radius: 0.4rem; cursor: pointer; color: var(--color-text); }
[data-role="tz-combo"] [role="option"] small { color: var(--color-muted); white-space: nowrap; }
[data-role="tz-combo"] [role="option"]:hover, [data-role="tz-combo"] [role="option"][aria-selected="true"] { background: var(--hover-wash); }
[data-role="tz-combo"] [data-role="tz-none"] { padding: 0.45rem 0.6rem; color: var(--color-muted); }

/* ---- Me (site.js "Me"): courses and studies, keeping at it, which parts,
   what I have found (Jef's design 7, 2026-11-08). Built on the theme's
   tokens; chart colors are Tailwind cyan, pink and purple (500 on light,
   400 on dark). ---- */
[data-page="me"] {
  --me-cyan: #00B8DB; --me-pink: #EC4899; --me-purple: #A855F7;
  --me-track: color-mix(in oklab, var(--color-muted) 18%, transparent);
  --me-tint-c: color-mix(in oklab, var(--me-cyan) 11%, transparent);
  --me-tint-p: color-mix(in oklab, var(--me-purple) 11%, transparent);
  --me-tint-k: color-mix(in oklab, var(--me-pink) 12%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-page="me"] { --me-cyan: #00D3F2; --me-pink: #F472B6; --me-purple: #C084FC; } }
:root[data-theme="dark"] [data-page="me"] { --me-cyan: #00D3F2; --me-pink: #F472B6; --me-purple: #C084FC; }
[data-page="me"] > section { margin-top: 2rem; }
.me-card { background: var(--color-surface); border: 1px solid var(--color-surface-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.15rem 1.25rem 1.3rem; }
.me-card h2, [data-role="me-found"] h2 { color: var(--color-heading); font-size: 1.35rem; line-height: 1.2; letter-spacing: normal; text-transform: none; font-family: var(--font-heading); }
[data-page="me"] [data-card] h2, [data-page="me"] [data-role="me-found"] h2 { margin: 0.2rem 0 0.35rem; }

/* 1. Courses and studies: one row each, opening to its checklist. */
[data-role="me-quick"] { display: grid; gap: 0.75rem; }
.me-row { background: var(--color-surface); border: 1px solid var(--color-surface-border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.me-row[open] { border-color: var(--color-accent); }
.me-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.9rem; align-items: center; padding: 0.85rem 1.1rem; }
.me-row > summary::-webkit-details-marker { display: none; }
.me-thumb { width: 3.25rem; height: 3.25rem; border-radius: 10px; object-fit: cover; grid-row: span 2; background: var(--me-track); display: block; }
.me-kind { grid-column: 2; font: 700 0.72rem/1.2 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.me-title { grid-column: 2; font-weight: 700; color: var(--color-heading); line-height: 1.25; }
.me-title span { font-weight: 400; color: var(--color-muted); }
.me-state { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.6rem; }
.me-pill { display: inline-block; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; background: var(--me-tint-k); color: var(--color-heading); }
.me-pill[data-state="done"] { background: var(--me-tint-c); }
.me-chev { width: 0.55rem; height: 0.55rem; border: solid var(--color-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -0.2rem; transition: transform 0.15s; }
.me-row[open] .me-chev { transform: rotate(-135deg); margin-top: 0.25rem; }
.me-open { padding: 0 1.1rem 1.15rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .me-open { grid-template-columns: 1.1fr 1fr; } }
.me-when { margin: 0 0 0.3rem; }
.me-check { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.me-check label { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.25rem; border-radius: 8px; cursor: pointer; }
@media (hover: hover) { .me-check label:hover { background: var(--me-tint-c); } }
.me-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
.me-whole { margin-top: 0.3rem; padding-top: 0.35rem; border-top: 1px solid var(--color-rule); font-weight: 600; }
.me-side { background: var(--color-bg); border: 1px solid var(--color-surface-border); border-radius: 12px; padding: 0.9rem 1rem; font-size: 0.95rem; }
.me-side strong { color: var(--color-heading); }
.me-side p { margin: 0.45rem 0 0; }
.me-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.me-meter { height: 0.5rem; border-radius: 999px; background: var(--me-track); overflow: hidden; margin: 0.4rem 0; }
.me-meter i { display: block; height: 100%; background: var(--me-cyan); border-radius: 999px; }
.me-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0.2rem; }
.me-dots i { width: 1.2rem; height: 1.2rem; border-radius: 50%; font: 700 0.6rem/1.2rem var(--font-body); text-align: center; font-style: normal; background: var(--me-cyan); color: #fff; }
.me-dots i[data-s="next"] { background: var(--me-pink); }
.me-dots i[data-s="later"] { background: transparent; border: 1.5px dashed var(--color-muted); color: var(--color-muted); line-height: 0.95rem; }
.me-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--color-rule); font-size: 0.9rem; color: var(--color-muted); }
.me-start input { font: inherit; color: var(--color-text); padding: 0.3rem 0.5rem; border: 1px solid var(--color-surface-border); border-radius: 0.5rem; background: transparent; }
@media (max-width: 520px) {
  .me-row > summary { grid-template-columns: auto 1fr; padding: 0.8rem 0.9rem; }
  .me-thumb { width: 2.75rem; height: 2.75rem; grid-row: span 3; }
  .me-state { grid-column: 2; grid-row: auto; justify-content: space-between; margin-top: 0.3rem; }
  .me-open { padding: 0 0.9rem 1rem; }
}

/* 2. Keeping at it: a year of days. */
.me-heat-wrap { overflow-x: auto; padding-bottom: 0.35rem; margin-top: 0.75rem; }
.me-heat { display: grid; grid-auto-flow: column; grid-template-rows: auto repeat(7, 0.8rem); gap: 3px; width: max-content; }
.me-m { font-size: 0.72rem; color: var(--color-muted); height: 1rem; white-space: nowrap; }
.me-d, .me-legend i { width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block; background: var(--me-track); }
[data-l="1"].me-d, .me-legend i[data-l="1"] { background: color-mix(in oklab, var(--me-cyan) 42%, var(--color-surface)); }
[data-l="2"].me-d, .me-legend i[data-l="2"] { background: color-mix(in oklab, var(--me-cyan) 70%, var(--color-surface)); }
[data-l="3"].me-d, .me-legend i[data-l="3"] { background: var(--me-cyan); }
.me-today { outline: 2px solid var(--me-pink); outline-offset: 1px; }
.me-legend i.me-today-key { background: transparent; outline: 2px solid var(--me-pink); outline-offset: -2px; }
.me-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.6rem; }
.me-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.me-runs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
.me-runs div { background: var(--me-tint-c); border-radius: 12px; padding: 0.7rem 0.85rem; }
.me-runs strong { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--color-heading); }
.me-runs span { display: block; font-size: 0.82rem; line-height: 1.3; color: var(--color-muted); }
.me-story { margin: 0.9rem 0 0; }

/* 3. Which parts: five rings. */
.me-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.me-ring { text-align: center; color: var(--color-heading); }
.me-ring svg { width: 6.25rem; height: 6.25rem; }
.me-ring b { display: block; margin-top: 0.25rem; }
.me-ring small { display: block; color: var(--color-muted); font: 700 0.7rem/1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.me-note { margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: var(--me-tint-c); font-size: 0.93rem; }

/* 4. What I have found. */
.me-refl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.me-refl div { background: var(--me-tint-p); border-radius: var(--radius); padding: 1rem 1.15rem; }
.me-refl strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--color-heading); }
.me-refl span { color: var(--color-muted); font-size: 0.9rem; }
.me-names-h { margin-top: 2rem !important; }
.me-found-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 0.4rem; }
.me-found-head h3, .me-found-head span { margin: 0; font: 700 0.75rem/1.2 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.me-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.6rem; }
.me-name { position: relative; border-radius: 12px; overflow: hidden; background: var(--color-surface); border: 2px solid var(--color-surface-border); }
.me-name img, .me-name > span { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--me-track); }
.me-name div { padding: 0.4rem 0.5rem 0.5rem; }
.me-name small { display: block; font: 700 0.62rem/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.me-name b { display: block; color: var(--color-heading); font-size: 0.9rem; line-height: 1.2; }
.me-name[data-s="found"] { border-color: var(--me-cyan); }
.me-name[data-s="found"]::after { content: "Found"; position: absolute; top: 0.4rem; right: 0.4rem; background: var(--me-cyan); color: #fff; font: 700 0.6rem/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.45rem; border-radius: 999px; }
.me-name[data-s="going"] { border-color: var(--me-pink); }
.me-name[data-s="going"] .me-meter { margin: 0.3rem 0 0; height: 0.3rem; }
.me-name[data-s="going"] .me-meter i { background: var(--me-pink); }
.me-name[data-s="wait"] { border-style: dashed; }
.me-name[data-s="wait"] img { filter: grayscale(1); opacity: 0.45; }
@media (max-width: 520px) {
  .me-names { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .me-name b { font-size: 0.8rem; }
  .me-name div { padding: 0.3rem 0.4rem 0.4rem; }
  .me-refl strong { font-size: 1.6rem; }
}