/* addy.land design system.
   This file is the structure of every page plus the default theme's tokens (Bento). A theme is
   public/themes/<id>.css: it overrides the tokens below under :root[data-theme="<id>"] and may add
   its own touches to the same classes. Components only use tokens, never raw colors, so a theme
   that changes the tokens changes the whole site. /design shows every component. */

@font-face {
  font-family: 'Polymath Display';
  src: url('/fonts/PolymathDisp-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #ece8e3;
  --bg-image: none;                 /* patterns or gradients drawn over --bg */
  --surface: #ffffff;               /* cards, panels, inputs */
  --surface-2: #f5f2ee;             /* quiet fills inside surfaces */
  --surface-3: #e9e4df;             /* hover fills, tags */
  --ink: #1a0b10;                   /* dark panels and the active nav item */
  --on-ink: #ffffff;

  /* Text */
  --text: #1a0b10;
  --dim: #7a6a70;
  --faint: #a2959a;
  --link: #c0321e;

  /* Lines */
  --line: rgba(26, 11, 16, 0.08);
  --line-strong: rgba(26, 11, 16, 0.18);

  /* Actions and states */
  --accent: #1a0b10;                /* primary buttons */
  --accent-hover: #3a1f28;
  --accent-ink: #ffffff;
  --highlight: #e6b33b;             /* focus rings, selection, "on" states */
  --danger: #c8372a;
  --ok: #188a5c;

  /* The brand band: six slices gold to blue, flat and as tile gradients */
  --hue-0: #e6b33b;
  --hue-1: #e8862e;
  --hue-2: #dc3a22;
  --hue-3: #a31d2c;
  --hue-4: #5b2a92;
  --hue-5: #2147d6;
  --on-hue: #ffffff;
  --tile-0: linear-gradient(140deg, #e2c04a, #e5a034);
  --tile-1: linear-gradient(140deg, #eba53c, #d8521e);
  --tile-2: linear-gradient(140deg, #e04a2a, #a81c22);
  --tile-3: linear-gradient(140deg, #b0202a, #5a2478);
  --tile-4: linear-gradient(140deg, #5a2a90, #2a3cc8);
  --tile-5: linear-gradient(140deg, #2a4ee0, #1430b0);
  --band: linear-gradient(90deg, #d4b03a 0%, #e5a034 22%, #d8321e 42%, #9a1820 56%, #4a2280 70%, #1f40d4 86%, #1434cc 100%);

  /* Type */
  --font-display: 'Polymath Display', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --display-transform: none;
  --display-style: normal;
  --body-size: 15px;
  --title-size: 46px;

  /* Shape */
  --radius: 26px;                   /* cards and panels */
  --radius-sm: 14px;                /* buttons, inputs, small boxes */
  --radius-xs: 8px;
  --tile-radius: 28%;
  --tile-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -10px 24px rgba(0, 0, 0, 0.14);

  /* Cards (apps) */
  --card-bg: var(--surface);
  --card-text: var(--text);
  --card-border: 0 solid transparent;
  --card-shadow: 0 0 #0000;           /* shadows are never `none`: some rules add a ring in front */
  --card-hover-shadow: 0 20px 40px -26px rgba(26, 11, 16, 0.45);
  --card-hover-lift: -3px;
  --card-pad: 20px;

  /* Panels (rail blocks, form cards, lists, doors) */
  --panel-bg: var(--surface);
  --panel-border: 0 solid transparent;
  --panel-shadow: 0 0 #0000;

  /* Buttons */
  --button-bg: var(--surface);
  --button-text: var(--text);
  --button-border: 1px solid var(--line-strong);
  --button-hover-bg: var(--surface-2);
  --button-radius: var(--radius-sm);
  --button-shadow: 0 0 #0000;
  --button-font: var(--font-body);
  --button-weight: 600;
  --button-transform: none;
  --button-tracking: 0;

  /* Inputs */
  --input-bg: var(--surface);
  --input-border: 1px solid var(--line-strong);
  --input-radius: var(--radius-sm);

  /* Header */
  --header-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --header-text: var(--text);
  --header-border: 0 solid transparent;
  --nav-bg: var(--surface);
  --nav-text: var(--dim);
  --nav-on-bg: var(--ink);
  --nav-on-text: var(--on-ink);

  /* Layout */
  --page: 1180px;
  --gap: 14px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); }
body { margin: 0; background: var(--bg-image), var(--bg); background-color: var(--bg); color: var(--text); font: var(--body-size)/1.55 var(--font-body); min-height: 100vh; display: flex; flex-direction: column; }
body > main, body > .marketing { flex: 1; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
code { font: 0.9em var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
::selection { background: color-mix(in srgb, var(--highlight) 40%, transparent); }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Display type: every heading the site draws in the display face. */
.page-title, .section-head h2, .app-head h1, .profile-head h1, .form-card h2, .empty-large h1,
.app-about h2, .app-facts h2, .form-divider, .app-card-name, .m-copy h2, .door h2, .m-shelf h3,
.readme h3, .readme h4, .readme h5, .waitlist-card h1 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform); font-style: var(--display-style);
}

/* The spectrum field some themes draw behind the page (brand-field.js). */
.theme-field, .theme-grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.theme-grain { z-index: -1; background-size: 256px 256px; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: var(--button-weight) 14px/1 var(--button-font); color: var(--button-text); text-decoration: none; white-space: nowrap;
  text-transform: var(--button-transform); letter-spacing: var(--button-tracking);
  padding: 11px 17px; border-radius: var(--button-radius); border: var(--button-border); background: var(--button-bg);
  box-shadow: var(--button-shadow); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.button:hover { background: var(--button-hover-bg); }
.button:active { transform: translateY(1px); }
.button.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.on { border-color: var(--highlight); color: var(--text); box-shadow: inset 0 0 0 1px var(--highlight), var(--button-shadow); }
.button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.button.danger:hover { border-color: var(--danger); }
.button.small { padding: 8px 13px; font-size: 13px; }
.button.block { display: flex; width: 100%; margin-top: 12px; }
.button .count { color: var(--dim); font-weight: 400; }
.button.accent .count { color: inherit; opacity: 0.7; }
.inline-form { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Header and footer ---------- */

.site-header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); color: var(--header-text); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: var(--header-border); }
.site-header-inner { max-width: var(--page); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.wordmark { display: block; line-height: 0; color: var(--header-text); text-decoration: none; }
.wordmark .logo { display: block; height: 36px; width: auto; }
.site-nav { display: flex; gap: 2px; background: var(--nav-bg); border-radius: 999px; padding: 4px; }
.nav-link { text-decoration: none; color: var(--nav-text); font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.nav-link:hover { color: var(--header-text); }
.nav-link[aria-current="page"] { color: var(--nav-on-text); background: var(--nav-on-bg); }
.site-account .nav-link { background: none; }
.site-account .nav-link[aria-current="page"] { color: var(--header-text); background: none; text-decoration: underline; text-underline-offset: 4px; }
.site-search { flex: 1; max-width: 400px; margin-left: auto; }
.site-search input { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: var(--input-border); border-color: transparent; border-radius: 999px; padding: 10px 16px; }
.site-search input::placeholder { color: var(--faint); }
.site-account { display: flex; align-items: center; gap: 12px; }
.wordmark + .site-account { margin-left: auto; }
.header-avatar { display: block; line-height: 0; border-radius: 50%; }
.header-avatar[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--highlight); }

.site-footer { margin-top: 80px; border-top: 1px solid var(--line); }
.site-footer-inner { max-width: var(--page); margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--dim); font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ---------- Page scaffolding ---------- */

.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 40px 24px 0; }
/* .page.narrow used to cap forms and settings at 700px; every page now uses the full width. */
.page-title { font-size: var(--title-size); line-height: 1.02; }
.lede { color: var(--dim); font-size: 17px; margin: 12px 0 26px; max-width: 60ch; }
.back-link { color: var(--dim); text-decoration: none; font-size: 14px; }
.back-link::before { content: '‹ '; }
.back-link:hover { color: var(--text); }

.feed-section { margin-bottom: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head h2 { font-size: 26px; line-height: 1.15; }
.section-link { color: var(--dim); font-size: 14px; font-weight: 500; text-decoration: none; }
.section-link:hover { color: var(--text); }

.banner { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 20px; }
.banner-notice { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.banner-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.banner-quiet { color: var(--dim); background: var(--panel-bg); border: 1px solid var(--line); }
.public-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-public { margin-top: 40px; }
.admin-public > p { margin-bottom: 16px; }

.empty { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 28px; display: grid; gap: 12px; justify-items: start; color: var(--text); }
.empty-large { padding: 52px 40px; background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); }
.empty-large h1 { font-size: 34px; line-height: 1.1; }
.empty-large p { color: var(--dim); max-width: 52ch; }

.pill { font-size: 11px; font-weight: 600; color: var(--dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; }
.pill-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* ---------- Avatars and tiles ---------- */

.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ink); color: var(--on-ink); font-family: var(--font-body); font-weight: 700; line-height: 1; }

.tile { display: grid; place-items: center; flex-shrink: 0; border-radius: var(--tile-radius); line-height: 1; box-shadow: var(--tile-shadow); }
.tile-small { width: 40px; height: 40px; font-size: 20px; }
.tile-medium { width: 56px; height: 56px; font-size: 28px; }
.tile-large { width: 96px; height: 96px; font-size: 48px; }
.tile-image { overflow: hidden; background: #ffffff; }
.tile-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-hue-0 { background: var(--tile-0); }
.tile-hue-1 { background: var(--tile-1); }
.tile-hue-2 { background: var(--tile-2); }
.tile-hue-3 { background: var(--tile-3); }
.tile-hue-4 { background: var(--tile-4); }
.tile-hue-5 { background: var(--tile-5); }
/* Each card knows its band slice, for themes that color whole cards. */
.hue-0 { --hue: var(--hue-0); }
.hue-1 { --hue: var(--hue-1); }
.hue-2 { --hue: var(--hue-2); }
.hue-3 { --hue: var(--hue-3); }
.hue-4 { --hue: var(--hue-4); }
.hue-5 { --hue: var(--hue-5); }

/* ---------- App cards ---------- */

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--gap); }
.app-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--card-bg); color: var(--card-text); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: transform 0.2s, box-shadow 0.2s; }
.app-card:hover { transform: translateY(var(--card-hover-lift)); box-shadow: var(--card-hover-shadow); }
.app-card-link { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: var(--card-pad) var(--card-pad) 12px; text-decoration: none; flex: 1; min-width: 0; }
.app-card-text { display: grid; gap: 4px; min-width: 0; width: 100%; }
.app-card-name { font-size: 20px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-card-tagline { color: var(--dim); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 var(--card-pad) calc(var(--card-pad) - 4px); font-size: 13px; font-weight: 500; color: var(--dim); min-height: 34px; }
.app-card-creator { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.app-card-creator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-card-creator:hover { color: var(--card-text); }
.counts { display: inline-flex; gap: 10px; white-space: nowrap; }

.creator-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.creator-row > a:first-child { line-height: 0; }
.creator-row-text { flex: 1; display: grid; text-decoration: none; min-width: 0; }
.creator-row-text strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-row-text span { color: var(--dim); font-size: 12px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; font-weight: 500; text-decoration: none; color: var(--text); background: var(--surface-3); border-radius: 999px; padding: 5px 11px; }
.tag:hover, .tag.is-on { background: var(--ink); color: var(--on-ink); }
.tag.is-on .dim, .tag:hover .dim { color: inherit; opacity: 0.7; }

/* ---------- Panels: rail blocks, lists, form cards ---------- */

.rail-block, .activity, .form-card, .member-list, .waitlist-card, .door, .claim-banner, .remix-card {
  background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: var(--radius);
}

/* ---------- Home ---------- */

.home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.home-rail { position: sticky; top: 92px; display: grid; gap: var(--gap); }
.rail-block { padding: 20px; }
.rail-block h2 { font: 700 15px/1.2 var(--font-body); margin-bottom: 10px; }
.rail-app { display: flex; gap: 12px; align-items: center; padding: 7px 0; text-decoration: none; }
.rail-app > span:last-child { display: grid; min-width: 0; }
.rail-app strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-app .dim { font-size: 12px; }
.rail-block .section-link { display: block; margin-top: 10px; text-align: center; }

.activity { list-style: none; margin: 0; padding: 6px 0; }
.activity-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--line); }
.activity-item:first-child { border-top: 0; }
.activity-text p { font-size: 14px; }
.activity-text a { font-weight: 600; text-decoration: none; }
.activity-text a:hover { text-decoration: underline; }
.activity-notes { color: var(--dim); font-size: 13px !important; margin-top: 2px !important; }
.activity-item time { font-size: 12px; white-space: nowrap; }

/* ---------- Explore ---------- */

.explore-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.tabs { display: flex; gap: 2px; background: var(--nav-bg); border-radius: 999px; padding: 4px; width: fit-content; }
.tab { text-decoration: none; color: var(--nav-text); font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--nav-on-text); background: var(--nav-on-bg); }
.tab .dim { color: inherit; opacity: 0.6; }
.settings-tabs { margin-bottom: 22px; }
.people-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 4px 20px; margin-bottom: 24px; }
.explore .feed-section { margin-top: 48px; }

/* ---------- App page ---------- */

.app-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-bottom: 28px; }
.app-head h1 { font-size: 36px; line-height: 1.02; }
.app-tagline { font-size: 15px; color: var(--text); margin-top: 6px; max-width: 60ch; }
.app-head .tile-large { width: 104px; height: 104px; font-size: 52px; }
.app-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font-size: 14px; }
.app-byline a { text-decoration: none; }
.app-byline a:hover { text-decoration: underline; }
.byline-creator { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 360px; }

/* Split button: a main action joined to a chevron that opens a small menu (a <details>). */
.split-button { position: relative; display: inline-flex; }
.split-button .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-menu > summary { list-style: none; }
.split-menu > summary::-webkit-details-marker { display: none; }
.split-button .split-toggle { height: 100%; padding: 0 11px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: color-mix(in srgb, var(--accent-ink) 16%, var(--accent)); }
.split-toggle svg { width: 16px; height: 16px; transition: transform 0.15s; }
.split-menu[open] .split-toggle svg { transform: rotate(180deg); }
.split-menu .menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; padding: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 40px -16px rgba(26, 11, 16, 0.35); }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--radius-xs); font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
a.menu-item:hover { background: var(--surface-2); }
.menu-item.is-disabled { color: var(--faint); cursor: default; }
.menu-note { font-size: 12px; font-weight: 600; color: var(--faint); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; }

.app-window { border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6); }
.app-window-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; color: color-mix(in srgb, var(--on-ink) 70%, transparent); font-size: 13px; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 22%, transparent); }
.app-window-title { flex: 1; text-align: center; font-weight: 600; }
.app-window-pop { color: inherit; text-decoration: none; }
.app-window-pop:hover { color: var(--on-ink); }
.app-window iframe { display: block; width: 100%; height: min(72vh, 760px); border: 0; background: #fff; }
.app-phone { display: grid; justify-items: center; gap: 14px; padding: 8px 0 4px; }
/* A phone the app runs in: a 330×717 screen showing the app at an iPhone's 390 points wide, scaled
   down (330 / 390) so text and spacing look the size they would on a phone. Like a real iPhone, the
   top 59 points (50px here) are the status bar with the Dynamic Island, filled with the app's own
   background color (--phone-top, from its theme-color or Manage); the app starts below it. */
.phone { padding: 11px; border-radius: 52px; background: #1a0b10; box-shadow: inset 0 0 0 2px #3a2a30, 0 40px 90px -40px rgba(0, 0, 0, 0.6); }
.phone-screen { position: relative; width: 330px; height: 717px; overflow: hidden; border-radius: 41px; background: var(--phone-top, #ffffff); }
.phone-island { position: absolute; top: 9px; left: 50%; width: 107px; height: 31px; transform: translateX(-50%); border-radius: 999px; background: #000000; }
.phone iframe { color-scheme: light dark; position: absolute; top: 50px; left: 0; display: block; width: 390px; height: 788px; border: 0; transform: scale(0.84615); transform-origin: 0 0; background: #ffffff; }
/* The app sees the device's light or dark setting, as on a phone (color-scheme on the frame; it
   would otherwise get the site theme's scheme), and the status bar follows the same setting. */
@media (prefers-color-scheme: dark) { .phone-screen:not(.is-light) { background: var(--phone-top-dark, var(--phone-top, #ffffff)); } }
/* Apps set to always light or always dark in Manage. */
.phone-screen.is-light iframe { color-scheme: light; }
.phone-screen.is-dark { background: var(--phone-top-dark, var(--phone-top, #ffffff)); }
.phone-screen.is-dark iframe { color-scheme: dark; }
.color-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.color-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.color-pick input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer; }
@media (max-width: 380px) { .phone { zoom: 0.85; } }
.app-window-note { font-size: 13px; margin: 12px 2px 0; }
.app-window-note a { color: var(--link); text-decoration: none; }
.app-window-note + .app-window-note { margin-top: 4px; }
.app-info + .app-footnote { margin-top: 28px; }

.app-info { margin-top: 40px; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
/* About and the facts are two cards side by side. */
.app-info .app-about, .app-info .app-facts { padding: 32px; background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: var(--radius); }
.app-info .app-facts { padding: 28px; }
/* The end of an app page: room to breathe, then links home and to Addy. */
.page.app-page { padding-bottom: 160px; }
.app-credits { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 120px; font-size: 14px; }
.app-credits-and { color: var(--faint); }
.app-credits .pill { margin-left: 2px; }
.app-credits a { color: var(--dim); text-decoration: none; }
.app-credits a:hover { color: var(--text); }

/* Segmented control: two radio buttons styled as a pill with the chosen segment raised. */
.segment-input { position: absolute; opacity: 0; pointer-events: none; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 22px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.segmented label { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--dim); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.segmented label:hover { color: var(--text); }
#about-description:checked ~ .segmented label[for="about-description"],
#about-readme:checked ~ .segmented label[for="about-readme"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(26, 11, 16, 0.14), 0 0 0 1px var(--line); }
#about-description:focus-visible ~ .segmented label[for="about-description"],
#about-readme:focus-visible ~ .segmented label[for="about-readme"] { outline: 2px solid var(--highlight); outline-offset: 2px; }
#about-description:checked ~ .about-pane-readme,
#about-readme:checked ~ .about-pane-description { display: none; }
.app-about h2, .app-facts h2 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; }
.app-about h2:not(:first-child) { margin-top: 36px; }
.prose { max-width: 66ch; display: grid; gap: 12px; font-size: 15px; }
.app-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: 14px; }
.app-facts dt { color: var(--dim); }
.app-facts dd { margin: 0; }
.app-facts h2 { margin-top: 28px; }
.app-facts code { font-size: 12px; }
.app-facts a { color: var(--text); text-decoration-color: var(--line-strong); }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.history p { color: var(--dim); font-size: 13px; }

/* ---------- Profile ---------- */

.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; margin-bottom: 40px; }
.profile-head h1 { font-size: 42px; line-height: 1.05; }
.profile-bio { max-width: 60ch; margin-top: 10px; display: grid; gap: 8px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 14px; color: var(--dim); }
.profile-stats a { text-decoration: none; }
.profile-stats strong { color: var(--text); font-weight: 700; }
.profile-website { color: var(--link) !important; }
.people-list { margin-top: 20px; }

/* ---------- Forms ---------- */

.form-card { padding: 26px; margin-bottom: 20px; display: grid; gap: 16px; }
.form-card form { display: grid; gap: 16px; }
.form-card h2 { font-size: 22px; line-height: 1.2; }
.field { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: var(--dim); border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: 7px; }
.optional { color: var(--faint); font-weight: 400; }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="password"], .field textarea, .admin-invite input {
  font: inherit; font-size: 15px; font-weight: 400; color: var(--text); background: var(--input-bg); border: var(--input-border); border-radius: var(--input-radius); padding: 11px 13px; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.5; }
/* Rich editor (public/rich-editor.js) for descriptions: a toolbar over an editable area, styled like a field. */
.rich-editor { border: var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); overflow: hidden; }
.rich-editor:focus-within { outline: 2px solid var(--highlight); outline-offset: -1px; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rich-button { min-width: 34px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; }
.rich-button:hover { background: var(--surface-3); }
.rich-button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.rich-bold { font-weight: 800; }
.rich-italic { font-style: italic; font-family: Georgia, serif; }
.rich-surface { min-height: 200px; max-height: 60vh; overflow-y: auto; padding: 14px 16px; color: var(--text); font-size: 15px; font-weight: 400; line-height: 1.6; outline: 0; }
.rich-surface.is-empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; position: absolute; }
.rich-surface > :first-child { margin-top: 0; }
.field input:focus, .field textarea:focus, .admin-invite input:focus { outline: 2px solid var(--highlight); outline-offset: -1px; }
.field-row { display: flex; gap: 12px; }
.field-icon { width: 84px; }
.field-icon input { text-align: center; font-size: 22px !important; padding: 7px !important; }
.field-grow { flex: 1; }
.hint { font-size: 12px; margin-top: -10px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; padding: 4px 0; }
.choice input { margin-top: 4px; accent-color: var(--accent); }
.choice > span { display: grid; }
.choice strong { font-weight: 600; }
.choice .dim { font-size: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.file-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.file-picker { display: grid; gap: 8px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 14px; color: var(--text); font-size: 14px; font-weight: 600; }
.file-picker input { font-size: 12px; color: var(--dim); max-width: 100%; }
input[type="file"]::file-selector-button { font: var(--button-weight) 13px/1 var(--button-font); color: var(--button-text); background: var(--button-bg); border: var(--button-border); border-radius: var(--button-radius); box-shadow: var(--button-shadow); padding: 8px 12px; margin-right: 10px; cursor: pointer; }
.files-field .dim { font-size: 12px; }
.manage-head { display: flex; align-items: center; gap: 16px; margin: 14px 0 24px; }
.manage-head > div { flex: 1; }
.versions { list-style: none; padding: 0; margin: 0; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.version-row:first-child { border-top: 0; padding-top: 0; }
.version-row .dim { font-size: 13px; }
.danger-zone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent), var(--panel-shadow); }
.message .actions { margin-top: 8px; }
.form-divider { font-size: 22px; line-height: 1.2; margin: 36px 0 6px; }
.form-divider + .dim { margin-bottom: 16px; }
.handle-input { display: flex; align-items: center; gap: 4px; background: var(--input-bg); border: var(--input-border); border-radius: var(--input-radius); padding: 0 13px; }
.handle-input:focus-within { outline: 2px solid var(--highlight); outline-offset: -1px; }
.handle-input input { flex: 1; border: 0 !important; outline: 0 !important; padding: 11px 0 !important; background: transparent !important; }
[data-handle-status].is-error { color: var(--danger); }
[data-handle-status].is-ok { color: var(--ok); }

/* ---------- GitHub imports ---------- */

.claim-banner { display: grid; gap: 12px; justify-items: start; padding: 20px 22px; margin-bottom: 32px; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--highlight), var(--panel-shadow); }
.claim-banner a:not(.button) { color: var(--link); text-decoration: none; }
.claim-banner a:not(.button):hover { text-decoration: underline; }
.claim-banner p { max-width: 72ch; }
.claim-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.home-main .claim-banner { margin-bottom: 36px; }

/* ---------- Waiting list and admin ---------- */

.waitlist-card { display: grid; justify-items: start; gap: 14px; padding: 34px; margin-top: 12px; }
.waitlist-card .lede { margin: 0; }
.waitlist-card > .dim { font-size: 14px; }
.waitlist-card a:not(.button) { color: var(--link); text-decoration: none; }
.admin-invite { display: flex; align-items: end; gap: 12px; margin: 0 0 24px; max-width: 520px; }
.admin-invite .field { flex: 1; }
.member-list { list-style: none; margin: 0; padding: 6px 0; }
.member-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.member-row:first-child { border-top: 0; }
.member-row > a { line-height: 0; }
.member-text p { font-size: 14px; }
.member-text a { text-decoration: none; }
.member-text .dim { font-size: 13px; margin-top: 2px; }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 0; }

/* ---------- Admin (members, waitlist, emails) ---------- */

.admin-tabs { margin-bottom: 22px; }
.admin .form-card { margin: 0 0 var(--gap); }
.admin .form-card h2 { font-size: 20px; }
.admin .form-card ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* A row of numbers that filter what's below (the waitlist funnel). */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 8px; margin: 0 0 var(--gap); }
.stat-strip a { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); text-decoration: none; color: var(--text); }
.stat-strip a:hover { background: var(--surface-2); }
.stat-strip a[aria-current] { background: var(--nav-on-bg); color: var(--nav-on-text); }
.stat-strip strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 1; }
.stat-strip span { font-size: 12px; font-weight: 600; opacity: 0.75; }
/* Metrics (/admin/metrics): number tiles, views per day, breakdown tables. */
.metrics-tiles > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); color: var(--text); }
.metrics-tiles strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 1; }
.metrics-tiles span { font-size: 12px; font-weight: 600; opacity: 0.75; }
.metrics-chart { margin: 8px 0 32px; padding: 20px 22px 14px; background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: var(--radius); }
.metrics-chart .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.metrics-chart svg { display: block; width: 100%; height: 180px; }
.metrics-fill { fill: var(--accent); }
.metrics-hit { fill: transparent; }
.metrics-bar:hover .metrics-fill { fill: var(--highlight); }
.metrics-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 28px 24px; }
.metrics-table .section-head, .metrics-recent .section-head { margin-bottom: 10px; }
.metrics-table > p { margin: -4px 0 10px; }
.metrics .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metrics-recent { margin-top: 36px; }

/* Inline controls on one line that wrap (filters, small forms). */
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 0 0 var(--gap); }
.filter-bar .field { min-width: min(220px, 100%); }
.filter-bar .choice { padding-bottom: 10px; }
.field input[type="search"], .field input[type="number"], .field select {
  font: inherit; font-size: 15px; font-weight: 400; color: var(--text); background: var(--input-bg); border: var(--input-border); border-radius: var(--input-radius); padding: 10px 13px; width: 100%;
}

.field select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; line-height: 1.5;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Tables of records (the waitlist roster). */
.data-table-wrap { overflow-x: auto; background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.data-table thead th { border-top: 0; font-size: 12px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.data-table a { font-weight: 600; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.data-table .pill { margin-left: 4px; }
.data-table thead .sort-link { display: inline-flex; gap: 6px; align-items: center; color: inherit; font-weight: inherit; }
.data-table thead [aria-sort] .sort-link { color: var(--text); }
.data-table thead .sort-link span { font-size: 9px; }

/* Email previews. */
.email-sample { gap: 10px; }
.email-sample-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: start; }
.email-sample-head h2 { margin-bottom: 4px; }
.email-subject { font-size: 14px; }
.email-frame { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--radius-sm); background: #fff; }
.email-text { white-space: pre-wrap; margin: 0; padding: 12px 14px; font: 13px/1.5 var(--font-mono); background: var(--surface-2); border-radius: var(--radius-sm); }
.email-sample summary { cursor: pointer; color: var(--dim); font-size: 14px; font-weight: 500; }

/* ---------- Appearance (theme picker) ---------- */

.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--gap); }
.theme-option { position: relative; display: flex; flex-direction: column; background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: var(--radius); overflow: hidden; }
.theme-option.is-current { box-shadow: inset 0 0 0 2px var(--highlight), var(--panel-shadow); }
.theme-choose { display: grid; gap: 4px; text-align: left; padding: 14px 14px 10px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.theme-swatch { position: relative; display: block; height: 116px; border-radius: calc(var(--radius) - 10px); background: var(--sw-page); overflow: hidden; margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.sw-title { position: absolute; left: 14px; top: 10px; font: 600 28px/1 var(--sw-font), var(--font-display); color: var(--sw-text); }
.sw-cards { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sw-cards i { height: 44px; border-radius: 8px; background: var(--sw-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-text) 14%, transparent); }
.sw-cards i:nth-child(2) { background: linear-gradient(140deg, #e8862e, #d8321e); }
.sw-button { position: absolute; right: 14px; top: 14px; width: 42px; height: 16px; border-radius: 999px; background: var(--sw-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-text) 20%, transparent); }
.theme-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.theme-blurb { color: var(--dim); font-size: 13px; line-height: 1.4; }
.theme-preview { margin: 0 14px 14px; font-size: 13px; font-weight: 600; color: var(--link); text-decoration: none; }
.theme-preview:hover { text-decoration: underline; }

/* ---------- Account and sign-in (the access backend's pages, see AccessShell) ---------- */

.auth-page { padding-top: 56px; }
.auth-card { width: 100%; max-width: 440px; margin: 0 auto; padding: 34px 30px; gap: 0; grid-template-columns: minmax(0, 1fr); }
.account-panel { grid-template-columns: minmax(0, 1fr); }
.auth-card h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 32px; line-height: 1.1; margin-bottom: 8px; }
.auth-card > p { margin-bottom: 20px; }
.auth-card .stack, .account-panel .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.auth-card .button:not(.small) { display: flex; width: 100%; padding: 13px 16px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.2; }
.auth-card .banner { margin-bottom: 16px; }
.auth-card .divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 13px; margin: 20px 0; }
.auth-card .divider::before, .auth-card .divider::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.auth-card details, .account-panel details { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.auth-card summary, .account-panel summary { cursor: pointer; color: var(--dim); font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.auth-card .email-option { border-top: 0; padding-top: 0; margin-top: 6px; text-align: center; }
.auth-card .email-option summary { display: inline-block; list-style: none; margin-bottom: 0; color: var(--link); }
.auth-card .email-option summary::-webkit-details-marker { display: none; }
.auth-card .email-option summary:hover { text-decoration: underline; }
.auth-card .email-option[open] summary { margin-bottom: 16px; }
.auth-card .email-option form { text-align: left; }
.auth-card .link { display: inline-block; margin-top: 4px; color: var(--link); font-size: 14px; text-decoration: none; }
.auth-card .link:hover { text-decoration: underline; }
.auth-card input.code, .account-panel input.code { font: 600 24px/1 var(--font-mono); letter-spacing: 6px; text-align: center; }
.auth-card input.code::placeholder { font: 400 16px/1 var(--font-body); letter-spacing: 0; }

.account-panel { padding: 0; gap: 0; overflow: hidden; }
.account-panel > section { padding: 24px 28px; border-top: 1px solid var(--line); }
.account-panel > section:first-of-type { border-top: 0; }
.account-panel h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 34px; line-height: 1.05; }
.account-panel h2 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
.account-panel > section > p { margin-bottom: 14px; }
.account-panel .profile { display: flex; align-items: center; gap: 18px; padding: 28px; }
.account-panel .profile > div { min-width: 0; overflow-wrap: anywhere; }
.account-panel .avatar { width: 64px; height: 64px; font-size: 26px; }
.account-panel .meta { margin-top: 2px; color: var(--dim); font-size: 14px; }
.account-panel .badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.account-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.account-panel .row:first-child { border-top: 0; padding-top: 0; }
.account-panel .row strong { font-weight: 600; }
.account-panel .row .dim { font-size: 13px; }
.account-panel form { margin: 0; }
.account-panel .link-actions { margin-top: 16px; }
.account-panel .plan { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.account-panel .plan strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; }
.account-panel .stack > .button { justify-self: start; }
.account-banner { padding: 20px 28px 0; }
.account-banner .banner { margin: 0; }

/* The Addy app's sign-in window: just the mark and the card. */
.chromeless-mark { display: flex; justify-content: center; padding: 36px 24px 0; color: var(--text); line-height: 0; }
.chromeless-mark .logo { height: 44px; width: auto; }
.chromeless .auth-page { padding-top: 24px; padding-bottom: 40px; }

/* ---------- Design system page ---------- */

.design-switcher { margin-bottom: 40px; }
.design-row { margin-top: 14px; align-items: center; }
.design-block .actions { align-items: center; }
.design-type { display: grid; gap: 14px; }
.design-home { margin-bottom: 48px; }
.design-access { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--gap); align-items: start; }
.design-access .auth-card { max-width: none; }

/* ---------- Front page (marketing) ---------- */

.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #fff; background: #d8321e var(--band); }
.hero-field, .hero-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-grain { background-size: 256px 256px; }
.hero-nav { position: absolute; top: 0; right: 0; display: flex; gap: 6px; padding: calc(18px + env(safe-area-inset-top)) 22px; }
.hero-nav a { color: #fff; text-decoration: none; font: 500 14px/1.4 'Inter', sans-serif; padding: 7px 12px; border-radius: 9px; text-shadow: 0 1px 10px rgba(60, 0, 10, 0.25); }
.hero-nav a:hover { background: rgba(255, 255, 255, 0.14); }
.hero-center { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 30px); padding: 80px 24px 56px; text-align: center; }
.hero-logo { line-height: 0; animation: rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-logo .logo { display: block; width: clamp(200px, 22.5vw, 304px); height: auto; color: #fff; filter: drop-shadow(0 6px 30px rgba(60, 0, 10, 0.18)); }
.hero-tagline { max-width: 34rem; font: 600 clamp(22px, 2.6vw, 36px)/1.1 'Polymath Display', 'Inter', sans-serif; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 1px 14px rgba(60, 0, 10, 0.2); animation: rise 900ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-words { display: grid; justify-items: center; gap: 4px; }
.hero-subline { font: 600 clamp(16px, 1.4vw, 20px)/1.25 'Polymath Display', 'Inter', sans-serif; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 10px rgba(60, 0, 10, 0.25); animation: rise 900ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: rise 900ms 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-primary { background: #fff; color: #1a0b10; border-color: #fff; padding: 13px 20px; font-size: 15px; }
.hero-primary:hover { background: #fff6e8; border-color: #fff6e8; }
.hero-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.55); padding: 13px 20px; font-size: 15px; background: rgba(40, 0, 10, 0.12); }
.hero-secondary:hover { border-color: #fff; background: rgba(40, 0, 10, 0.22); }
.hero-scroll { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; text-decoration: none; font-size: 18px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(40, 0, 10, 0.12); }
.hero-scroll:hover { background: rgba(40, 0, 10, 0.25); }
.hero-links { display: flex; gap: 22px; font-size: 14px; animation: rise 900ms 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-links a { color: #fff; text-decoration: none; font-weight: 500; text-shadow: 0 1px 10px rgba(60, 0, 10, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 1px; }
.hero-links a:hover { border-bottom-color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.m-section { max-width: var(--page); margin: 0 auto; padding: 96px 24px 0; }
.m-copy { max-width: 640px; margin-bottom: 36px; }
.m-copy h2, .door h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.02; margin-bottom: 14px; text-wrap: balance; }
.m-copy p { color: var(--dim); font-size: 17px; max-width: 58ch; }
.m-more { margin-top: 24px; }

.m-try .m-copy { margin-bottom: 24px; }
.try-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.try-tab { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dim); font-size: 14px; font-weight: 600; padding: 6px 14px 6px 6px; border-radius: var(--radius-sm); border: var(--panel-border); background: var(--panel-bg); box-shadow: var(--panel-shadow); }
.try-tab:hover { color: var(--text); }
.try-tab[aria-selected="true"] { color: var(--nav-on-text); background: var(--nav-on-bg); }
.try-tab .tile-small { width: 32px; height: 32px; font-size: 17px; }
.try-window iframe { height: min(70vh, 720px); }
.try-meta[hidden] { display: none; }
.try-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.try-meta .byline-creator { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.try-meta .byline-creator > span { display: grid; line-height: 1.3; font-size: 14px; }
.try-meta .byline-creator strong { font-weight: 700; }
.try-source { flex: 1; font-size: 14px; min-width: 240px; }
.try-source a { color: var(--link); text-decoration: none; }
.try-actions { display: flex; gap: 8px; }

.m-creators { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.m-creators a { display: grid; justify-items: center; gap: 8px; text-decoration: none; font-size: 13px; color: var(--dim); width: 84px; text-align: center; }
.m-creators a:hover { color: var(--text); }
.m-creators span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.m-callout { margin-top: 28px; max-width: 62ch; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--panel-bg); box-shadow: inset 0 0 0 1.5px var(--highlight); font-size: 15px; }
.m-callout a { color: var(--link); text-decoration: none; font-weight: 600; }

.m-shelf { margin-top: 32px; }
.m-shelf:first-of-type { margin-top: 0; }
.m-shelf h3 { font-size: 21px; line-height: 1.2; margin-bottom: 14px; }

.remix-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: remix; }
.remix-steps li { display: grid; gap: 10px; align-content: start; counter-increment: remix; }
.remix-step { color: var(--dim); font-size: 14px; }
.remix-step::before { content: counter(remix) '. '; color: var(--text); font-weight: 700; }
.remix-card { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 80px; }
.remix-card > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.remix-card strong { font-weight: 700; font-size: 15px; }
.remix-card .dim { font-size: 13px; line-height: 1.35; }
.remix-card .pill { color: var(--text); border-color: var(--highlight); white-space: nowrap; }
.remix-ask { display: grid; gap: 4px; background: var(--surface-2); }
.remix-ask-label { font-size: 12px; color: var(--dim); }
.remix-ask p { font-size: 15px; }
.m-remixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.m-remixes a { color: var(--text); font-weight: 600; text-decoration: none; }

.m-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 24px; }
.door { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; justify-items: start; padding: 34px; }
.door h2 { margin-bottom: 0; }
.door p { color: var(--dim); font-size: 16px; max-width: 46ch; }

/* Claim your handle (front page hero and the doors) */
.handle-claim { display: grid; gap: 10px; justify-items: center; animation: rise 900ms 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.handle-field { position: relative; display: flex; align-items: center; width: min(360px, calc(100vw - 48px)); min-height: 56px; overflow: hidden; background: #fff; border-radius: 999px; padding: 6px 6px 6px 22px; box-shadow: 0 12px 40px -12px rgba(40, 0, 10, 0.45); cursor: text; transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.handle-field:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 12px 40px -12px rgba(40, 0, 10, 0.45); }
.handle-prefix { color: #9a928c; font-size: 16px; font-weight: 500; white-space: nowrap; margin-right: 2px; }
.handle-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1a0b10; font: 500 16px/1 'Inter', sans-serif; padding: 10px 0; }
.handle-field input::placeholder { color: #b3aca6; }
.handle-go { flex-shrink: 0; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #1a0b10; color: #fff; cursor: pointer; }
.handle-go svg { width: 20px; height: 20px; }
.handle-go:hover { background: #33141e; }
.handle-go:disabled { opacity: 0.45; cursor: default; }
.handle-status { min-height: 1.4em; font-size: 14px; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 10px rgba(60, 0, 10, 0.3); text-align: center; }
.handle-status.is-ok::before { content: '✓ '; }
.handle-status.is-error { color: #fff; font-weight: 600; }
.handle-alt { border: 0; background: none; color: rgba(255, 255, 255, 0.85); font: 500 13px/1.4 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.handle-alt:hover { color: #fff; }
.handle-alt:disabled { opacity: 0.5; cursor: default; }
.handle-claim.is-enhanced .handle-go { opacity: 0; transform: translateY(130%); pointer-events: none; transition: transform 380ms cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 200ms ease; }
.handle-claim.is-enhanced.is-free .handle-go { opacity: 1; transform: none; pointer-events: auto; }
.handle-claim.is-enhanced .handle-alt { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s 200ms; }
.handle-claim.is-enhanced.is-free .handle-alt { opacity: 1; visibility: visible; transition: opacity 240ms ease 120ms; }
/* It starts as a "Claim your handle" button and opens into the field. */
.handle-start { display: none; }
.handle-claim.is-enhanced .handle-start { display: block; position: absolute; inset: 0; border: 0; border-radius: 999px; background: #fff; color: #1a0b10; font: 600 17px/1 'Polymath Display', 'Inter', sans-serif; padding-top: 2px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.handle-claim.is-enhanced:not(.is-open) .handle-field { width: 220px; cursor: pointer; }
.handle-claim.is-enhanced:not(.is-open) .handle-start { opacity: 1; pointer-events: auto; transition: opacity 220ms ease 120ms; }
.handle-claim.is-enhanced:not(.is-open) .handle-prefix,
.handle-claim.is-enhanced:not(.is-open) .handle-field input { visibility: hidden; }
.handle-start:hover { background: #fff6e8; }
/* "Taken" / "Invalid" badge: rises into the field like the arrow. */
.handle-taken { display: none; }
.handle-claim.is-enhanced .handle-taken { display: inline-flex; align-items: center; gap: 5px; position: absolute; right: 12px; top: 50%; height: 32px; margin-top: -16px; padding: 0 12px 0 9px; border-radius: 999px; background: #fdecea; color: #c0352b; font: 600 14px/1 'Inter', sans-serif; opacity: 0; transform: translateY(150%); pointer-events: none; transition: transform 380ms cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 200ms ease; }
.handle-claim.is-enhanced.is-taken .handle-taken { opacity: 1; transform: none; }
.handle-taken svg { width: 14px; height: 14px; }
.door .handle-claim { animation: none; justify-items: start; width: 100%; grid-template-columns: minmax(0, 1fr); }
.door .handle-field { max-width: 100%; }
.door .handle-field { box-shadow: none; border: 1px solid var(--line-strong); }
.door .handle-status, .door .handle-alt { color: var(--dim); text-shadow: none; text-align: left; }
.door .handle-status.is-error { color: var(--danger); }
.door .handle-status.is-ok { color: var(--ok); }

/* ---------- README on app pages ---------- */

.readme { max-width: 70ch; font-size: 15px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.readme > * + * { margin-top: 14px; }
.readme h3, .readme h4, .readme h5 { line-height: 1.2; margin-top: 28px; }
.readme h3 { font-size: 22px; }
.readme h4 { font-size: 18px; }
.readme h5 { font-size: 15px; color: var(--dim); }
.readme > :first-child { margin-top: 0; }
.readme p { margin: 0; }
.readme a { color: var(--link); text-decoration: none; }
.readme a:hover { text-decoration: underline; }
.readme ul, .readme ol { padding-left: 22px; margin-bottom: 0; }
.readme li + li { margin-top: 4px; }
.readme li > ul, .readme li > ol { margin-top: 4px; }
.readme code { font-size: 0.88em; }
.readme pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.readme pre code { background: none; padding: 0; font-size: inherit; }
.code-block { margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; }
.code-block code { background: none; padding: 0; font-size: inherit; }
.readme blockquote { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--dim); }
.readme hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.readme img { max-width: 100%; height: auto; border-radius: var(--radius-xs); vertical-align: middle; }
.readme-table { overflow-x: auto; }
.readme table { border-collapse: collapse; font-size: 14px; }
.readme th, .readme td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.readme th { background: var(--surface-2); font-weight: 600; }
.readme-source { margin-top: 18px; font-size: 13px; }
.readme-source a { color: var(--dim); }

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
  .home, .app-body { grid-template-columns: 1fr; }
  .app-info .app-about, .app-info .app-facts { padding: 22px; }
  .home-rail { position: static; }
  .app-head { grid-template-columns: auto 1fr; }
  .app-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

@media (max-width: 860px) {
  .remix-steps, .m-doors { grid-template-columns: minmax(0, 1fr); }
  .door { padding: 24px; }
}

@media (max-width: 720px) {
  /* The header wraps to three rows here; keeping it stuck to the top would hide a third of the screen. */
  .site-header { position: relative; }
  .auth-page { padding-top: 24px; }
  .auth-card { padding: 26px 20px; }
  .account-panel > section, .account-panel .profile { padding: 20px; }
  .site-header-inner { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
  .wordmark .logo { height: 30px; }
  .site-nav .nav-link:first-child:not(:only-child) { display: none; }
  .site-search { order: 3; max-width: none; flex-basis: 100%; margin-left: 0; }
  .site-account { margin-left: auto; gap: 8px; }
  .activity-item { grid-template-columns: auto 1fr; }
  .activity-item time { grid-column: 2; margin-top: -6px; }
  .page { padding: 26px 16px 0; }
  .page-title { font-size: calc(var(--title-size) * 0.72); }
  .app-head h1 { font-size: 24px; }
  .tile-large { width: 72px; height: 72px; font-size: 36px; }
  .profile-head { grid-template-columns: auto 1fr; }
  .profile-action { grid-column: 1 / -1; }
  .file-pickers { grid-template-columns: 1fr; }
  .app-window iframe { height: 70vh; }
  .m-section { padding-top: 72px; }
  .member-row { grid-template-columns: auto 1fr; }
  .member-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .admin-invite { flex-direction: column; align-items: stretch; }
}

@media (max-width: 520px) {
  .handle-prefix { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-tagline, .hero-subline, .hero-actions, .handle-claim, .hero-links { animation: none; }
  .handle-field { transition: none; }
  .handle-claim.is-enhanced .handle-go, .handle-claim.is-enhanced .handle-taken { transform: none; transition: opacity 150ms ease; }
  .app-card, .app-card:hover { transition: none; transform: none; }
}