/* StarSync site shell. Only what the kit (kit/starsync-ui.css) does not have. */

.site { --ss-fs: 16px; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site main { display: block; flex: 1 0 auto; }
.site-head, .site-foot { flex: none; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.section { padding: 48px 0; border-top: 1px solid var(--ss-line); }
@media (min-width: 720px) { .section { padding: 72px 0; } }
.section:first-child, .section.no-rule { border-top: 0; }

.eyebrow { font: 500 12px/1.4 var(--ss-font-mono); color: var(--ss-text-2); letter-spacing: 0; margin: 0 0 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--ss-bg); border-bottom: 1px solid var(--ss-line); }
.site-head-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }

.ss a.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ss-text); text-decoration: none; }
.ss-logo { display: block; position: relative; width: 30px; height: 30px; flex: none; }
.ss-logo img { display: block; width: 100%; height: 100%; }
.site-brand-name { font: 600 18px/1 var(--ss-font-head); letter-spacing: -0.01em; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.ss .site-nav a { color: var(--ss-text-2); font-size: 15px; text-decoration: none; padding: 6px 0; }
.ss .site-nav a:hover { color: var(--ss-text); text-decoration: none; }
.ss .site-nav a[aria-current="page"] { color: var(--ss-text); }

/* Tools menu (button + panel) */
.site-menu { position: relative; }
.site-menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ss-text-2); }
.site-menu-btn:hover, .site-menu-btn[aria-expanded="true"], .site-menu-btn.is-current { color: var(--ss-text); }
.site-menu-btn svg { transition: transform var(--ss-ease); }
.site-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-menu-panel { position: absolute; top: calc(100% + 14px); left: -16px; width: 340px; padding: 8px; background: var(--ss-surface);
  border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-lg); transform-origin: 32px 0; }
.site-menu-panel[hidden] { display: none; }
/* Open/close motion lives in site.js (2026-10-12): desktop = the panel grows out of the button (fade + small drop and
   scale, 200 ms, quick 130 ms fade on close), rows arrive one after another; phone menu = the list unrolls in place.
   Reversible mid-way. None with reduced motion. */
.site-menu-list { list-style: none; margin: 0; padding: 0; }
.ss .site-menu-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: var(--ss-r);
  color: var(--ss-text); }
.ss .site-menu-list a:hover, .ss .site-menu-list a[aria-current="page"] { background: var(--ss-raised); }
.site-menu-name { font-size: 15px; font-weight: 500; }
.site-menu-desc { grid-column: 1; font-size: 13px; color: var(--ss-text-2); }
.site-menu-tag { grid-column: 2; grid-row: 1; align-self: center; font: 500 11px/1 var(--ss-font-mono); color: var(--ss-text-2); }
.ss .site-nav .site-menu-all { display: block; margin: 6px 0 0; padding: 12px 12px 6px; border-top: 1px solid var(--ss-line); font-size: 14px; color: var(--ss-text-2); }
.ss .site-nav .site-menu-all:hover, .ss .site-nav .site-menu-all[aria-current="page"] { color: var(--ss-text); }

/* Theme switch: three icon buttons in one pill on desktop (System / Light / Dark); labelled rows in the phone menu */
.site-theme { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r); }
.site-theme-title { display: none; }
.site-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 30px; height: 28px; padding: 0;
  border: 0; border-radius: calc(var(--ss-r) - 2px); background: transparent; color: var(--ss-text-3); font: inherit; cursor: pointer; }
.site-theme button:hover { color: var(--ss-text); }
.site-theme button[aria-pressed="true"] { background: var(--ss-raised); color: var(--ss-text); }
.site-theme button:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.site-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-burger { display: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: transparent; cursor: pointer;
               flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: var(--ss-r); }
.site-burger-bar { display: block; width: 20px; height: 2px; background: var(--ss-text); border-radius: 1px;
                   transition: transform var(--ss-ease), opacity var(--ss-ease); }
.nav-open .site-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .site-burger-bar:nth-child(2) { opacity: 0; }
.nav-open .site-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phone menu (Shrav 2026-10-12): a full-height sheet under the header, so the page never shows through below it and
   there is no "where does the menu end" line. Links at the top, theme at the bottom. */
@media (max-width: 820px) {
  .site-burger { display: flex; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
              height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
              padding-bottom: env(safe-area-inset-bottom); background: var(--ss-bg); border-top: 1px solid var(--ss-line); }
  .nav-open .site-nav { display: flex; }
  .site-nav .site-theme { margin-top: auto; }
  .ss .site-nav a { font-size: 18px; padding: 16px; border-top: 1px solid var(--ss-line); }
  .ss .site-nav a:first-child { border-top: 0; }
  .site-nav .site-theme { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border: 0; border-top: 1px solid var(--ss-line); border-radius: 0; }
  .site-nav .site-theme-title { display: block; flex: 1 0 100%; font: 500 12px/1 var(--ss-font-mono); color: var(--ss-text-3); text-transform: uppercase; letter-spacing: .06em; }
  .site-nav .site-theme button { flex: 1; width: auto; height: 44px; border: 1px solid var(--ss-line-strong); font-size: 16px; color: var(--ss-text-2); }
  .site-nav .site-theme button[aria-pressed="true"] { border-color: var(--ss-text-3); }
  .site-nav .site-theme-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  /* Tools menu inside the phone menu: a row like the others, the list opens in place underneath */
  .site-menu-btn { width: 100%; justify-content: space-between; min-height: 56px; padding: 16px; font-size: 18px; }
  .site-menu-panel { position: static; width: auto; padding: 0 8px 8px; border: 0; border-radius: 0; background: none; }
  .ss .site-nav .site-menu-list a, .ss .site-nav .site-menu-all { border-top: 0; font-size: 16px; }
  .ss .site-nav .site-menu-list a { padding: 12px 16px 12px 24px; }
  .ss .site-nav .site-menu-all { padding: 12px 16px 12px 24px; margin: 0; }
  .site-menu + a, .site-nav > .site-menu ~ a { border-top: 1px solid var(--ss-line); }
  .site-nav > a:last-of-type { border-bottom: 1px solid var(--ss-line); }
}
/* Phone menu motion: opening unrolls the sheet from the header (340 ms) while the rows drop in one after another;
   closing is a quick 160 ms fade so it never lags behind the tap. Browsers without @starting-style just snap open. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .site-nav { opacity: 0; transition: opacity .16s ease-out, display .16s allow-discrete; }
  .nav-open .site-nav { opacity: 1; clip-path: inset(0); transition: clip-path .34s cubic-bezier(.16, 1, .3, 1), display 0s allow-discrete; }
  @starting-style { .nav-open .site-nav { clip-path: inset(0 0 100% 0); } }
  .nav-open .site-nav > * { animation: ss-nav-row .38s cubic-bezier(.16, 1, .3, 1) backwards; }
  .nav-open .site-nav > :nth-child(2) { animation-delay: 30ms; }
  .nav-open .site-nav > :nth-child(3) { animation-delay: 60ms; }
  .nav-open .site-nav > :nth-child(4) { animation-delay: 90ms; }
  .nav-open .site-nav > :nth-child(5) { animation-delay: 120ms; }
  .nav-open .site-nav > :nth-child(n+6) { animation-delay: 150ms; }
  @keyframes ss-nav-row { from { opacity: 0; transform: translateY(-8px); } }
}
/* Always reserve the scrollbar space, so short pages (no scrollbar) and long ones line up: no header jump between pages. */
html { scrollbar-gutter: stable; }
html.nav-locked { overflow: hidden; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--ss-line); padding: 32px 0; color: var(--ss-text-2); font-size: 14px; }
.site-foot-inner { display: flex; flex-direction: column; gap: 20px; }
.site-foot-about { display: flex; flex-direction: column; gap: 4px; }
.site-foot-name { display: inline-flex; align-items: center; gap: 8px; font: 600 18px/1.2 var(--ss-font-head); color: var(--ss-text); letter-spacing: -0.01em; }
.site-foot-name img { display: block; flex: none; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.site-foot-links .ss-mono { font-size: 13px; }
.ss .site-foot a { color: var(--ss-text-2); text-decoration: none; }
.ss .site-foot a:hover { color: var(--ss-text); text-decoration: underline; }
@media (min-width: 720px) {
  .site-foot-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .site-foot-links { justify-content: flex-end; }
}

/* ---------- Placeholder hero / stub pages ---------- */
.stub { padding: 48px 16px 64px; }
@media (min-width: 720px) { .stub { padding: 72px 32px 96px; } }

/* ---------- Colour (Shrav, 2026-10-10): random palette colours each visit, no colour per tool ----------
   ss-palette.js deals --rc (and --rc2, the next colour) onto every [data-rc] element. */
[data-rc] .ss-num, .ss-num[data-rc] { color: var(--rc, var(--ss-accent)); }

/* Overscan-style spill on hover: the left and right edges pick up colour, like lit side screens.
   A flat tint plus a 2px edge, no blur and no lift, so it never reads as an "AI glow". */
.spill { position: relative; }
.spill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--ss-accent)) 13%, transparent),
    transparent 20%, transparent 80%, color-mix(in srgb, var(--rc2, var(--ss-accent)) 13%, transparent));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent),
    inset -2px 0 0 color-mix(in srgb, var(--rc2, var(--ss-accent)) 75%, transparent); }
/* Mouse: on hover. Touch screens (Shrav picked 3A, 2026-10-12): no sticky tap-hover; instead site.js lights a card
   (.is-lit) while it crosses the middle of the screen as you scroll, and it fades out as it moves on. */
@media (hover: hover) { .spill:hover::after { opacity: 1; } }
.spill:focus-within::after, .spill.is-lit::after { opacity: 1; }
@media (hover: none) { .spill::after { transition-duration: .45s; } }
@media (prefers-reduced-motion: reduce) { .spill::after { transition: none; } }

/* Closing rings (templates/_rings.html), one look everywhere (Shrav, 2026-10-11): three dotted orbits with a planet
   each in this visit's palette colours, turning slowly, still with reduced motion. Each page CSS only places them.
   Below 1000 px every page puts them in the bottom-right corner, mostly off-screen, so they never sit behind words. */
.rings { position: absolute; z-index: 0; pointer-events: none; }
.rings .ring { fill: none; stroke: var(--rc, var(--ss-text-3)); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.rings .pl { fill: var(--rc, var(--ss-accent)); stroke: var(--ss-bg); stroke-width: 4; }
.rings .orbit { transform-box: view-box; transform-origin: 300px 300px; animation: ss-orbit 120s linear infinite; }
.rings .o2 { animation-duration: 180s; animation-direction: reverse; }
.rings .o3 { animation-duration: 260s; }
@keyframes ss-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rings .orbit { animation: none; } }
@media (max-width: 999px) {
  .ss .rings { left: auto; top: auto; right: -235px; bottom: -235px; width: 380px; height: 380px; transform: none; opacity: .7; }
}

/* Headings and short lead/closing lines break into even lines instead of leaving a word or two alone on the last
   line (Shrav, 2026-10-11). Browsers without text-wrap just wrap normally. */
.ss h1, .ss h2, .ss h3, .ss .ss-lead, .ss .page-line, .ss .feature-pitch, .ss .closing-text, .ss .custom-text { text-wrap: balance; }

/* Phones and tablets: small text links get a 44px-tall tap area without moving anything (padding + equal negative margin) */
@media (pointer: coarse) {
  .ss .tools-row .tools-go, .ss .tools-row a.tools-name, .ss .ad-links a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .ss .ss-check { min-height: 44px; align-items: center; }
}

/* "Pause motion" under a moving map (Tools page, tool pages) */
.page-motion { display: block; margin: 4px 0 0 auto; min-height: 44px; padding: 0 10px; background: transparent; border: 0;
  color: var(--ss-text-3); font: 500 12px/1 var(--ss-font-mono); cursor: pointer; border-radius: var(--ss-r); }
.page-motion:hover { color: var(--ss-text); }
.page-motion[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .page-motion { display: none !important; } }
/* Under the map: the "Tap a planet" line (phones only, where the planets carry no names) and Pause on the right */
.tools-orbit-foot { display: flex; align-items: center; gap: 12px; }
.tools-orbit-foot .page-motion { margin-top: 0; flex: none; white-space: nowrap; }
.ss .tools-orbit-hint { display: none; margin: 0; font-size: 12px; color: var(--ss-text-3); }
@media (max-width: 479px) { .ss .tools-orbit-hint { display: block; } }

/* Staging placeholders: anything not ready yet (screenshots, quotes, clips). Grep "ph-" before going live. */
.ph-box { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  border: 1px dashed var(--ss-line-strong); border-radius: var(--ss-r-lg); background: var(--ss-raised);
  color: var(--ss-text-3); font: 400 12px/1.5 var(--ss-font-mono); }
/* ph-text = draft words waiting on Shrav: a small "Draft" tag in front, no background (the amber wash and the
   dotted outline were both rejected). On a block (div) the tag sits in the top-right corner instead. */
.ph-text::before { content: "Draft"; display: inline-block; margin-right: 8px; padding: 3px 7px; vertical-align: 1px;
  border: 1px solid color-mix(in srgb, var(--ss-warn) 55%, transparent); border-radius: 999px;
  color: var(--ss-warn); font: 500 10px/1 var(--ss-font-mono); letter-spacing: .06em; text-transform: uppercase; }
div.ph-text { position: relative; }
div.ph-text::before { position: absolute; top: 0; right: 0; margin: 0; }

/* Page changes: a short cross-fade between pages on this site (Shrav 2026-10-12). The header is its own layer and swaps
   without fading, so only the page body fades. Browsers without cross-page view transitions (Firefox today) just load
   the page normally. Off with reduced motion. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
::view-transition-group(site-head), ::view-transition-old(site-head), ::view-transition-new(site-head) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Icon list (2026-10-12): a small rounded tile with a line icon in this visit's palette colour (data-rc), text beside
   it. Overscan "What you get", Inbox Workshop "You bring / You get". Two columns from 720 px unless .one. */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .icon-list:not(.one) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icon-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ss-text); font-size: 16px; line-height: 1.45; }
.icon-list i { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--rc, var(--ss-accent)) 16%, transparent); color: var(--rc, var(--ss-accent)); }
.icon-list span { padding-top: 7px; }

/* Footer on phones (design check 16, 2026-10-12): links in a two-column list, each a full 44 px tap row, so the tap
   areas never overlap (the old padding + negative margin trick made neighbouring rows' boxes cross). */
@media (max-width: 719px) {
  .site-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: stretch; }
  .site-foot-links .ss-mono { grid-column: 1 / -1; order: 99; padding-top: 12px; }
  .ss .site-foot-links a { display: flex; align-items: center; min-height: 44px; }
}

/* Steps: "How it works" (Overscan) and "How it goes" (Custom work, Inbox Workshop), one look (Shrav 2026-10-12).
   Cards with a picture (Overscan) or an icon on top, a numbered circle and dashed arrows to the next step, both in that
   step's palette colour. Side by side: the arrow crosses the gap at the middle of the top row. Stacked: it points down
   the 40 px gap between cards. Arrow maths: card padding 24 + border 1, arrow = gap - 8 long, centred in the gap. */
.how { --how-gap: 40px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--how-gap); grid-template-columns: minmax(0, 1fr); }
.how > li { position: relative; padding: 24px; }
.how-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.how-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--rc, var(--ss-accent)) 16%, transparent); color: var(--rc, var(--ss-accent)); }
.how-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); border-radius: 50%; font-size: 13px; color: var(--ss-text); }
.how-top .how-n { margin: 0; }
.ss .how-h { font-size: 19px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.01em; }
.ss .how p { margin: 0; color: var(--ss-text-2); font-size: 15px; line-height: 1.55; }
@media (min-width: 820px) { .how.three { --how-gap: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .how.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px) {
  .how.three > li + li .how-top::before { content: ""; position: absolute; top: 50%; left: calc(-21px - var(--how-gap)); width: calc(var(--how-gap) - 16px);
    border-top: 2px dashed color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); transform: translateY(-1px); }
  .how.three > li + li .how-top::after { content: ""; position: absolute; top: 50%; left: -37px; transform: translateY(-50%);
    border-left: 8px solid color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
}
@media (min-width: 1000px) {
  .how.four > li + li .how-top::before { content: ""; position: absolute; top: 50%; left: calc(-21px - var(--how-gap)); width: calc(var(--how-gap) - 16px);
    border-top: 2px dashed color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); transform: translateY(-1px); }
  .how.four > li + li .how-top::after { content: ""; position: absolute; top: 50%; left: -37px; transform: translateY(-50%);
    border-left: 8px solid color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
}
@media (max-width: 819px) {
  .how.three > li + li::before { content: ""; position: absolute; left: 50%; top: -36px; height: 22px;
    border-left: 2px dashed color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); transform: translateX(-1px); }
  .how.three > li + li::after { content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
    border-top: 8px solid color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); border-left: 5px solid transparent; border-right: 5px solid transparent; }
}
@media (max-width: 999px) {
  .how.four > li + li::before { content: ""; position: absolute; left: 50%; top: -36px; height: 22px;
    border-left: 2px dashed color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); transform: translateX(-1px); }
  .how.four > li + li::after { content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
    border-top: 8px solid color-mix(in srgb, var(--rc, var(--ss-accent)) 75%, transparent); border-left: 5px solid transparent; border-right: 5px solid transparent; }
}