/* The site's main pages (home, posting, settings), laid out after the
   original sediment.html mock-up: its hero, readout strip, section heads,
   card grid, carousel and footer, in the theme's own colours. Its
   violet-to-blue gradients, glows and gradient text are left out on purpose. */

.sd-page .nav a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sd-page h1, .sd-page h2 { font-weight: 800; letter-spacing: -0.03em; }
.sd-label, .sd-dt {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem;
}
.sd-depth { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
a.sd-depth { text-decoration: none; }
/* A link beside a heading that goes somewhere more ("Changes show in its history →"): looks like one. */
a.sd-more { display: inline-flex; align-items: center; gap: 0.35em; color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.25em; }
a.sd-more:hover { color: var(--accent); text-decoration-color: currentColor; }
a.sd-more .icon { width: 1.1em; height: 1.1em; }
.nowrap { white-space: nowrap; }
.sd-note { max-width: 56ch; color: var(--muted); margin: 0.6rem 0 1.4rem; }

.sd-hero { padding: clamp(3rem, 12vh, 7rem) 0 clamp(2rem, 7vh, 4rem); }
.sd-hero.compact { padding: 1.5rem 0 1rem; }
.sd-hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.3rem); line-height: 1.02; max-width: 16ch; margin: 0; }
.sd-hero h1 em { font-style: normal; color: var(--accent); }
.sd-hero.compact h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.sd-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }
.sd-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text);
}
.sd-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sd-sub { margin: 1.4rem 0 0; max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--muted); }
.sd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.8rem 0 0; }
/* The hero's own buttons are bigger than the ones in bars and cards (site.css). */
.sd-hero .sd-actions .sd-btn { min-height: 2.75rem; padding: 0.65rem 1.25rem; font-size: 0.95rem; }

.sd-readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 2.4rem 0 0;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--surface);
}
.sd-readout > div { padding: 1rem 1.1rem; border-right: 1px solid var(--line); }
.sd-readout > div:last-child { border-right: 0; }
.sd-readout dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sd-readout dd { margin: 0.35rem 0 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; }
.sd-readout.stacked { grid-template-columns: 1fr 1fr; margin-top: 1.4rem; }
.sd-readout.stacked > div:nth-child(2n) { border-right: 0; }
.sd-readout.stacked > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
  .sd-readout:not(.stacked) { grid-template-columns: 1fr 1fr; }
  .sd-readout:not(.stacked) > div:nth-child(2n) { border-right: 0; }
  .sd-readout:not(.stacked) > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.sd-section { padding: clamp(2.2rem, 7vh, 4.5rem) 0 0; scroll-margin-top: 4rem; }
.sd-section.first { padding-top: 1rem; }
.sd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.sd-head h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.sd-head.small { margin-top: 2rem; }
.sd-head.small h2 { font-size: 1.3rem; }
.sd-rule { height: 1px; background: var(--line); margin: 1rem 0 1.6rem; }
.sd-deep { margin-top: 1rem; }

.sd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.sd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.sd-stack { display: grid; gap: 1rem; }
@media (max-width: 900px) { .sd-grid3, .sd-grid2 { grid-template-columns: minmax(0, 1fr); } }
.sd-card {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem 1.25rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px);
  border-top: 2px solid var(--line);
}
.sd-card:hover { border-top-color: var(--accent); }
.sd-card p { margin: 0; }
.sd-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.sd-kind {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
}
.sd-card-body { display: grid; gap: 0.6rem; color: inherit; text-decoration: none; }
.sd-card-body h3 { margin: 0; font-size: 1.28rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.sd-card-body p { color: var(--muted); font-size: 0.94rem; white-space: pre-line; }
.sd-card-body:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }
.sd-card-body img { width: 100%; max-height: 13rem; object-fit: cover; border-radius: var(--radius); }
.sd-card-body .code { max-height: 11rem; overflow: hidden; font-size: 0.78rem; }
.sd-card-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; white-space: pre-line; }
.sd-card-body:hover .sd-card-text { text-decoration: underline; text-decoration-thickness: 1px; }
.sd-card audio { height: 2.2rem; }
.sd-by { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.sd-by a:not(.avatar) { color: var(--text); text-decoration: none; font-weight: 600; }
.sd-by .sd-depth { margin-left: auto; }
.sd-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.sd-tag {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 0.15rem 0.45rem; border-radius: var(--radius); text-decoration: none;
}
a.sd-tag:hover { color: var(--text); border-color: var(--text); }
.sd-meter { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; padding-top: 0.3rem; }
.sd-meter form { margin: 0; }
.sd-track { flex: 1; height: 4px; border-radius: 99px; background: var(--layer-1); overflow: hidden; }
.sd-track span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
/* How full, in steps of 5% (the meter filter's, out of 20). */
.sd-track .w0 { width: 0; } .sd-track .w5 { width: 5%; } .sd-track .w10 { width: 10%; } .sd-track .w15 { width: 15%; }
.sd-track .w20 { width: 20%; } .sd-track .w25 { width: 25%; } .sd-track .w30 { width: 30%; } .sd-track .w35 { width: 35%; }
.sd-track .w40 { width: 40%; } .sd-track .w45 { width: 45%; } .sd-track .w50 { width: 50%; } .sd-track .w55 { width: 55%; }
.sd-track .w60 { width: 60%; } .sd-track .w65 { width: 65%; } .sd-track .w70 { width: 70%; } .sd-track .w75 { width: 75%; }
.sd-track .w80 { width: 80%; } .sd-track .w85 { width: 85%; } .sd-track .w90 { width: 90%; } .sd-track .w95 { width: 95%; }
.sd-track .w100 { width: 100%; }

.sd-carousel { position: relative; }
.sd-carousel-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.4rem; }
.sd-carousel-top .sd-note { margin-bottom: 0; }
.sd-arrows { display: flex; flex: none; gap: 0.5rem; margin: 0; }
.sd-arrow {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: calc(var(--radius) + 4px);
  background: var(--bg); color: var(--text); border: 1px solid var(--line); font-size: 1.3rem; line-height: 1;
}
.sd-arrow:hover:not(:disabled) { border-color: var(--text); filter: none; }
.sd-arrow:disabled { opacity: 0.35; cursor: default; }
.sd-track-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.2rem 0.2rem 1rem; scrollbar-width: thin; }
.sd-slide {
  flex: 0 0 clamp(15rem, 30%, 20rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px);
  color: var(--text); text-decoration: none;
}
.sd-slide:hover { border-color: var(--text); }
.sd-slide-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.sd-slide-title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.02em; }
.sd-slide-text { flex: 1; color: var(--muted); font-size: 0.9rem; }
.sd-dots { display: flex; justify-content: center; gap: 7px; margin-top: 0.4rem; }
.sd-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: var(--line); transition: width 0.2s; }
.sd-dot:hover { filter: none; background: var(--muted); }
.sd-dot[aria-current="true"] { width: 22px; background: var(--accent); }
.sd-strata { display: flex; flex-direction: column; gap: 2px; width: 26px; flex: none; }
.sd-strata i { display: block; height: 2px; background: var(--line); }
.sd-strata i.on { background: var(--accent); }
@media (max-width: 640px) { .sd-slide { flex-basis: 82%; } }

.sd-foot { margin-top: 4rem; padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--line); background: var(--surface); }
.sd-wrap { max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter); }
.sd-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.sd-foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.sd-foot-grid a { color: var(--text); text-decoration: none; font-size: 0.95rem; }
.sd-foot-grid a:hover { text-decoration: underline; }
.sd-foot .brand { color: var(--text); }
.sd-foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 3rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .sd-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .sd-foot-grid { grid-template-columns: 1fr; } }

/* Posting */
.sd-form textarea[name="body"] { width: 100%; min-height: 10rem; font-size: 1.1rem; padding: 0.9rem 1rem; border-radius: calc(var(--radius) + 6px); }
.sd-form .tag-picker input, .sd-form select { width: 100%; }
.sd-form ul { list-style: none; padding: 0; margin: 0.3rem 0; }
.sd-field { margin: 1.6rem 0 0; }
/* One row of every kind on a wide screen, however many kinds there are. */
.sd-kinds { border: 0; padding: 0; margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.7rem; }
.sd-kinds legend { padding: 0; }
.sd-kind-card {
  position: relative; display: grid; align-content: start; gap: 0.25rem; padding: 0.9rem 1rem 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); border-top: 2px solid var(--line);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sd-kind-card:hover { border-color: var(--line-hover); }
.sd-kind-card input { position: absolute; opacity: 0; }
.sd-kind-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sd-kind-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-kind-icon {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: 0 0 0.45rem;
  border-radius: var(--r-control); background: var(--tint); color: var(--muted); transition: background-color 0.12s, color 0.12s;
}
.sd-kind-icon .icon { width: 1.15rem; height: 1.15rem; }
.sd-kind-card:has(input:checked) .sd-kind-icon { background: var(--accent); color: var(--on-accent); }
.sd-kind-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
@media (max-width: 760px) { .sd-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Under the workspace: who sees the idea and how it's filed, in one panel
   divided like the mock-up's readout strip; or, for an iteration, its note. */
.publish { margin: 1.4rem 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.publish-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line); }
.publish-head .sd-label { margin: 0; }
.publish-head p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.publish-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
@media (min-width: 640px) { .publish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .publish-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr); } }
.publish-grid > .field, .publish-cell { margin: 0; padding: 1rem 1.2rem 1.15rem; background: var(--surface); align-content: start; }
.publish-cell > .field { margin: 0; }
.publish-grid > .field.check { display: grid; }
/* Lock it, and turning off additions and collaborating: one under another. */
.publish-switches { display: grid; gap: 0.9rem; }
.publish-more { display: grid; gap: 0.9rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); }
.publish-more:not(:has(> :not([hidden]))) { display: none; }
.publish-limited { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.4rem 1.5rem; }
.publish-limited .field { margin: 0; }
.publish-limited-note { grid-column: 1 / -1; }
.publish-more .suggestions { margin: 0; align-items: center; }
.suggestions-label { margin-right: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.publish-body { padding: 1rem 1.2rem 1.15rem; }
.publish-body .field { margin: 0; }
.publish-foot {
  display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface)); color: var(--muted); font-size: 0.85rem;
}
.publish-foot strong { color: var(--text); font-weight: 600; }

.sd-narrow { max-width: 32rem; }


.avatar.xl { width: 5.5rem; height: 5.5rem; font-size: 1.7rem; }
.tl-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem;
}
.tl-notice form { margin: 0; }
.tl-notice > span { flex: 1 1 16rem; }

/* ── Home, front page: featured ideas and the carousels ─────────────── */
.sd-featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.1rem; }
.sd-feature {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); border-top: 2px solid var(--accent);
}
.sd-feature.lead { grid-row: span 2; }
.sd-feature-media img { display: block; width: 100%; height: 11rem; object-fit: cover; }
.sd-feature.lead .sd-feature-media img { height: clamp(14rem, 32vw, 24rem); }
/* A lead without a picture gets the cross-section instead (sd/strata.html). */
.sd-feature > .strata-art { border-bottom: 1px solid var(--line); }
.sd-feature.lead .sd-feature-text { font-size: 1.1rem; }
.sd-feature-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.2rem 1.25rem 1.1rem; flex: 1; }
.sd-feature-body p { margin: 0; }
.sd-feature h3 { margin: 0; font-size: 1.28rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.sd-feature.lead h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; }
.sd-feature h3 a { color: var(--text); text-decoration: none; }
.sd-feature h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.sd-feature-text { color: var(--muted); white-space: pre-line; }
.sd-feature .sd-by { margin-top: auto; }
.sd-feature .sd-by a:not(.avatar) { color: var(--text); font-weight: 600; text-decoration: none; }
@media (max-width: 800px) {
  .sd-featured { grid-template-columns: minmax(0, 1fr); }
  .sd-feature.lead { grid-row: auto; }
}
/* ── The cross-section (sd/strata.html): beside log in and sign up, and
   in a Featured lead without a picture. Everything takes the theme's
   colours: the layers its strata, the ideas its cards, the surface its
   accent, like the top of the ruler down the side of the site. ──────── */
.strata-art { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; }
.sa-band-0 { fill: var(--layer-1); }
.sa-band-1 { fill: var(--layer-2); }
.sa-band-2 { fill: var(--layer-3); }
.sa-band-3 { fill: var(--layer-4); }
.sa-band-4 { fill: var(--layer-5); }
.sa-band-5 { fill: var(--bedrock); }
.sa-tex { fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: 0.3; }
.sa-tex circle { stroke: none; }
.sa-tex-0 { stroke: var(--on-layer-1); fill: var(--on-layer-1); }
.sa-tex-1 { stroke: var(--on-layer-2); fill: var(--on-layer-2); }
.sa-tex-2 { stroke: var(--on-layer-3); }
.sa-tex-3 { stroke: var(--on-layer-4); }
.sa-tex-4 { stroke: var(--on-layer-5); }
.sa-tex-5 { stroke: var(--on-bedrock); }
.sa-root { fill: none; stroke: var(--on-layer-1); stroke-width: 1.2; stroke-linecap: round; opacity: 0.35; }
.sa-fault { fill: none; stroke: var(--on-layer-4); stroke-width: 1.6; opacity: 0.5; }
.sa-surface { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }

.sa-card rect { rx: min(var(--radius), 8px); }
.sa-card .bar { fill: var(--muted); }
.sa-card.live .bar { fill: var(--accent); }
.sa-card .face { fill: var(--surface); }
.sa-card .edge { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sa-ink { fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sa-ink.strong { stroke: var(--text); }
.sa-cavity rect { fill: none; stroke: var(--on-layer-5); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.75; vector-effect: non-scaling-stroke; }
.sa-trail { stroke: var(--surface); stroke-width: 10; opacity: 0.35; }
.sa-path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.1 9; }
.sa-chev { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sa-crumb { fill: var(--layer-2); }

/* Words are sized in the drawing's own units, which shrink with the box
   it's in: so the smaller the box, the more units, keeping them about the
   size of the ruler's numbers down the side of the site. Left off where
   they'd still be too small to read. */
.auth-ground, .sd-feature.lead { container-type: inline-size; }
.sa-text { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; }
@container (max-width: 38rem) { .sa-text { font-size: 22px; } }
@container (min-width: 46rem) { .sa-text { font-size: 15px; } }
@container (max-width: 30rem) { .sa-text { display: none; } }
.sa-note, .sa-num { fill: var(--muted); }
.sa-num { letter-spacing: 0.02em; text-transform: none; }
.sa-num.zero { fill: var(--text); }
.sa-name-0 { fill: var(--on-layer-1); }
.sa-name-1 { fill: var(--on-layer-2); }
.sa-name-2 { fill: var(--on-layer-3); }
.sa-name-3 { fill: var(--on-layer-4); }
.sa-name-4 { fill: var(--on-layer-5); }
.sa-name-5 { fill: var(--on-bedrock); }
.sa-ruler { fill: var(--bg); }
.sa-ruler-edge { fill: none; stroke: var(--line); }
.sa-tick { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sa-tick.minor { stroke: var(--line-strong); stroke-width: 1; }
.sa-zero { fill: none; stroke: var(--accent); stroke-width: 3; }

.sd-card-slide { flex: 0 0 clamp(16rem, 31%, 21rem); scroll-snap-align: start; display: flex; }
.sd-card-slide .sd-card { flex: 1; }
@media (max-width: 640px) { .sd-card-slide { flex-basis: 84%; } }

/* ── Home, feed: one column of whole ideas, like other social sites ──── */
.fd { max-width: 56rem; margin: 0 auto; }
.fd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0 1.2rem; }
.fd-bar h1 { margin: 0; font-size: 2.2rem; line-height: 1; }
.fd-bar h1 .sd-depth { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
.fd-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fd-composer, .fd-post {
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px);
}
.fd-composer { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.8rem; align-items: center; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.fd-prompt { color: var(--muted); text-decoration: none; font-size: 1.05rem; }
.fd-prompt:hover { color: var(--text); }
.fd-kinds { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.85rem; }
.fd > .tl-notice { margin: 0 0 1rem; }
.fd-list { display: grid; gap: 1rem; }
.fd-post { display: grid; gap: 0.75rem; padding: 1rem 1.1rem 0.8rem; }
.fd-post p { margin: 0; }
.fd-head { display: flex; align-items: center; gap: 0.7rem; }
.fd-who { display: grid; line-height: 1.25; min-width: 0; }
.fd-who .handle a { color: inherit; text-decoration: none; }
.fd-who .handle a:hover { text-decoration: underline; }
.fd-media { display: block; margin: 0 -1.1rem; background: var(--layer-1); }
.fd-media img { display: block; width: 100%; max-height: 38rem; object-fit: contain; }
.fd-media.poster { background: #fff; }
.fd-code { margin: 0; max-height: 30rem; }
.fd-post audio { width: 100%; height: 2.4rem; }
.fd-text { font-size: 1.05rem; line-height: 1.55; }
.fd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 0.88rem; }
.fd-actions form { margin: 0; }
.fd-open { margin-left: auto; }
.tl-depth { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.tl-depth i { width: 0.6rem; height: 0.6rem; border: 1px solid var(--line); }
.tl-depth .layer-0 { background: var(--accent); border-color: var(--accent); }
.tl-depth .layer-1 { background: var(--layer-1); }
.tl-depth .layer-2 { background: var(--layer-2); }
.tl-depth .layer-3 { background: var(--layer-3); }
.tl-depth .layer-4 { background: var(--layer-4); }
.tl-depth .layer-5 { background: var(--layer-5); }
@media (max-width: 560px) {
  .fd-composer, .fd-post { border-radius: 0; border-left: 0; border-right: 0; margin-left: -1rem; margin-right: -1rem; }
  .fd-media { margin: 0 -1.1rem; }
}

/* ── Settings ───────────────────────────────────────────────────────── */
/* Like a professional app's settings: the sections down the left, grouped,
   and the one you're on beside them, as a heading and then cards. Each card
   has a title, rows of settings (what it is on the left, the box on the
   right, or one under the other when the card is narrow), and a foot with
   its button. On a phone the sections are a row of tabs over the page. */
.settings { display: grid; gap: 1.2rem; max-width: 74rem; margin: 0.4rem auto 0; }
.settings-nav { display: grid; gap: 1.2rem; align-content: start; min-width: 0; }
.settings-me { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.5rem; border-radius: var(--r-control); color: var(--text); text-decoration: none; }
.settings-me:hover { background: var(--tint); }
.settings-me-name { display: grid; min-width: 0; line-height: 1.25; }
.settings-me-name strong, .settings-me-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-me-name span { color: var(--muted); font-size: 0.84rem; }
.settings-groups { display: grid; gap: 1.1rem; }
.settings-group-name { margin: 0 0 0.35rem; padding: 0 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.settings-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.settings-group :is(a, .settings-out) {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: var(--r-control);
  color: var(--muted); font-size: 0.92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.settings-group form { margin: 0; }
.settings-out { width: 100%; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.settings-group :is(a, .settings-out):hover { background: var(--tint); color: var(--text); }
.settings-group a[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--text); font-weight: 600; }
.settings-group a[aria-current="page"] .icon { color: var(--accent); }
.settings-count { margin-left: auto; padding: 0 0.45rem; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 0.74rem; font-weight: 600; }
@media (min-width: 901px) {
  .settings { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .settings-nav { position: sticky; top: 4.8rem; }
}
@media (max-width: 900px) {
  .settings-me { display: none; }
  .settings-groups { display: flex; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .settings-group-name { display: none; }
  .settings-group ul { display: flex; gap: 0.25rem; }
  /* Getting the app and logging out: a small row of their own under the tabs. */
  .settings-device { margin-top: -0.7rem; }
  .settings-device ul { justify-content: flex-end; flex-wrap: wrap; }
  .settings-device :is(a, .settings-out) { padding: 0.3rem 0.55rem; font-size: 0.86rem; }
}

.settings-main { display: grid; gap: 1.25rem; align-content: start; min-width: 0; max-width: 54rem; }
.settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; padding: 0.2rem 0 1.15rem; border-bottom: 1px solid var(--line); }
.settings-head > div { flex: 1 1 24rem; min-width: 0; }
.settings-head h1 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; }
.settings-lede { margin: 0.5rem 0 0; max-width: 62ch; color: var(--muted); }
.settings-lede:empty { display: none; }
.settings-crumb { margin: 0 0 0.6rem; }
.settings-crumb a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.settings-crumb a:hover { color: var(--text); }
.settings-acts { display: flex; gap: 0.5rem; margin: 0; }

.setting-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); container-type: inline-size; }
.setting-card.attention { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.setting-card.narrow { max-width: 44rem; }
.setting-card-head ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.9rem; }
.setting-card-head { padding: 1.1rem 1.3rem 1rem; }
.setting-card-head h2 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.setting-card-head p { margin: 0.3rem 0 0; max-width: 68ch; color: var(--muted); font-size: 0.9rem; }
.setting-card-body { margin: 0; padding: 0 1.3rem; border-top: 1px solid var(--line); }
.setting-card-body.padded { padding: 1.1rem 1.3rem 1.3rem; }
.setting-card-body + .setting-card-body { border-top-style: dashed; }
.setting-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem 1rem; padding: 0.75rem 1.3rem;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.setting-card-foot p { margin: 0 auto 0 0; color: var(--muted); font-size: 0.85rem; }
.setting-card-foot form { margin: 0; }

.setting-row { display: grid; gap: 0.55rem; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.setting-card-body > .setting-row:first-of-type, .setting-rows > .setting-row:first-of-type { border-top: 0; }
.setting-text { display: grid; gap: 0.2rem; align-content: start; margin: 0; }
.setting-label { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.setting-control { display: grid; gap: 0.4rem; align-content: start; min-width: 0; margin: 0; }
.setting-control :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select, textarea) { width: 100%; }
.setting-control code { font-size: 0.88rem; }
.setting-row.invalid .setting-label { color: var(--danger); }
/* A yes/no setting: its words, and a switch at the end of the row. */
.setting-row.toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.2rem; }
.setting-row.toggle .setting-control { justify-items: end; }
@container (min-width: 36rem) {
  .setting-row:not(.toggle) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2rem; }
  .setting-row:not(.toggle) .setting-text { padding-top: 0.45rem; }
  .setting-list .setting-row:not(.toggle) .setting-text { padding-top: 0; }
}
.setting-preview { display: flex; align-items: center; gap: 0.8rem; }
.setting-preview > span:last-child { display: grid; line-height: 1.3; }
.setting-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }

/* Lists in a card: keys, themes, children, invites, a row each. */
.setting-items { list-style: none; }
.setting-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.setting-item:first-child { border-top: 0; }
.setting-item.wrap { flex-wrap: wrap; }
.setting-item-icon, .setting-empty-icon {
  display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-control); background: var(--tint); color: var(--muted);
}
.setting-item-name { display: grid; flex: 1 1 12rem; gap: 0.1rem; min-width: 0; color: var(--text); text-decoration: none; }
a.setting-item-name:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.setting-item-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.setting-item-meta { flex: none; color: var(--muted); font-size: 0.8rem; }
.setting-item-acts { display: flex; flex: none; align-items: center; gap: 0.4rem; margin: 0 0 0 auto; }
.setting-item-acts form { margin: 0; }
.setting-item .chip { flex: none; }
@container (max-width: 30rem) { .setting-item-meta { display: none; } }

/* Adding an AI (ai/_key_form.html): providers as cards to pick from, the
   sign-in button above the key box, and the model rows dimmed while the
   provider's asked what it offers. */
.provider-picker { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.provider-picker legend { padding: 0; margin-bottom: 0.6rem; }
.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 0.6rem; }
.provider-card {
  position: relative; display: grid; align-content: start; gap: 0.2rem; padding: 0.75rem 0.9rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 0.12s, box-shadow 0.12s;
}
.provider-card:hover { border-color: var(--line-hover); }
.provider-card input { position: absolute; opacity: 0; }
.provider-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint); }
.provider-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.provider-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-weight: 700; }
.provider-tag { padding: 0.05rem 0.4rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 600; }
.provider-about { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.provider-picker.invalid legend { color: var(--danger); }
@media (forced-colors: active) { .provider-card:has(input:checked) { border: 3px solid Highlight; } }
.sign-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 0.2rem; }
.sign-in .muted { font-size: 0.85rem; }
[data-models][aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s 0.15s; }
.setting-empty { display: flex; align-items: center; gap: 0.9rem; padding: 1.2rem 1.3rem 1.3rem; color: var(--muted); }
.setting-empty p { margin: 0; }

/* Settings in a side panel elsewhere (a child's, on their page). */
.setting-rows { container-type: inline-size; margin: 0.4rem 0 0; }
.panel-form { margin: 0; }
.danger-zone { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* Settings, Appearance: the preset themes as small pictures of the site,
   each in its own colours, type and corners. */
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem 0.9rem; margin: 0; }
.theme-card { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; filter: none; }
.theme-card:hover { filter: none; }
.theme-card-page {
  display: grid; grid-template-rows: auto 1fr; height: 6.6rem; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  transition: transform 0.15s, box-shadow 0.15s;
}
.theme-card:hover .theme-card-page { transform: translateY(-2px); box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.45); }
.theme-card[aria-pressed="true"] .theme-card-page { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-card:focus-visible { outline: none; }
.theme-card:focus-visible .theme-card-page { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-card-page i { display: block; }
.tc-top { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tc-brand { width: 18px; height: 5px; margin-right: auto; border-radius: 2px; background: var(--accent); }
.tc-nav { width: 11px; height: 3px; border-radius: 2px; background: var(--muted); opacity: 0.6; }
.tc-body { display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 6px; padding: 7px 8px 8px; }
.tc-card { display: grid; align-content: start; gap: 4px; padding: 6px 7px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tc-aa { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1; color: var(--text); }
.tc-line { height: 3px; border-radius: 2px; background: var(--muted); opacity: 0.55; }
.tc-line.short { width: 60%; }
.tc-btn { width: 28px; height: 8px; margin-top: 2px; border-radius: calc(var(--radius) * 0.5 + 1px); background: var(--accent); }
.tc-core { display: flex; flex-direction: column; overflow: hidden; border-radius: 2px; }
.tc-core i { flex: 1; }
.tc-core i:nth-child(1) { flex: 0.5; background: var(--accent); }
.tc-core i:nth-child(2) { background: var(--layer-2); }
.tc-core i:nth-child(3) { background: var(--layer-4); }
.tc-core i:nth-child(4) { flex: 1.5; background: var(--layer-5); }
.theme-card-name { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.88rem; font-weight: 500; }
.theme-card[aria-pressed="true"] .theme-card-name { font-weight: 700; }
.theme-card-tick { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.theme-card-tick .icon { width: 0.8rem; height: 0.8rem; stroke-width: 2.5; }

/* Laid-out pages: nav links to the right in mono capitals, as in the mock-up. */
.sd-page .nav { margin-left: auto; }
.sd-page .who-am-i { margin-left: 0.6rem; }
.sd-eyebrow .sep { opacity: 0.4; }

/* Home: the type-of-idea menu and the Feed / Front page button. A menu is a
   <details>, so it works without JavaScript; static/js/site.js closes it
   when you click elsewhere and keeps it on the screen. */
.sd-menu { position: relative; display: inline-block; }
.sd-menu summary { list-style: none; }
.sd-menu summary::-webkit-details-marker { display: none; }
.sd-menu[open] summary { border-color: var(--text); }
.sd-menu > ul {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 12rem; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.35);
}
.sd-menu > ul a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.sd-menu > ul a:hover { background: var(--layer-1); color: var(--on-layer-1); }
.sd-menu > ul a[aria-current="true"] { font-weight: 600; box-shadow: inset 3px 0 var(--accent); }
/* Export, in an app bar: everything an idea or a starter project downloads
   as and the storage it can go to, in labelled groups, under one button at
   the end of the bar rather than a growing row of them. It opens lined up
   with the button's right edge. On a phone, where the bar's buttons wrap
   under its title, it drops under the button from the bar's left edge
   instead, no wider than the bar, so it stays on the screen even without
   JavaScript (static/js/site.js nudges one back on anywhere else). */
.sd-menu > summary .icon:last-child { width: 0.95em; height: 0.95em; margin-right: -0.25em; transition: rotate 0.15s; }
.sd-menu[open] > summary .icon:last-child { rotate: 180deg; }
.sd-menu[open] > summary.primary { border-color: var(--accent-press); }
.sd-menu-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: max-content; min-width: 15rem; max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.45);
}
@media (max-width: 720px) {
  .app-bar:has(> .app-acts > .sd-menu) { position: relative; }
  .app-acts > .sd-menu { position: static; }
  .app-acts > .sd-menu > .sd-menu-pop { top: auto; right: 0; left: 0; width: auto; min-width: 0; margin-top: 6px; }
}
.sd-menu-pop ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.sd-menu-label { margin: 0; padding: 0.5rem 0.65rem 0.3rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sd-menu-pop ul + .sd-menu-label { margin-top: 0.3rem; padding-top: 0.65rem; border-top: 1px solid var(--line); }
.sd-menu-item, button.sd-menu-item {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.5rem 0.65rem;
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--text);
  font: inherit; font-size: 0.9rem; font-weight: 500; line-height: 1.3; text-align: start; text-decoration: none; cursor: pointer; filter: none;
}
.sd-menu-item:hover { background: var(--tint-strong); filter: none; }
.sd-menu-item:focus-visible { background: var(--tint-strong); outline: 2px solid var(--accent); outline-offset: -2px; }
.sd-menu-item > .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.sd-menu-item:hover > .icon { color: var(--text); }
.sd-menu-item > span { display: grid; gap: 0.1rem; min-width: 0; }
.sd-menu-item small { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.tl-more { display: flex; justify-content: center; padding: 1.2rem 1rem; }
.tl-end { margin: 0; padding: 1.2rem 1rem; text-align: center; }

/* ── App pages ──────────────────────────────────────────────────────── */
/* Every page but the feed works like an app on a wide screen: a bar across
   the top with what the page is and what you can do, the thing itself in the
   main column, and the tools and settings for it in panels beside it, which
   stay in view as you scroll. On a phone it's all one column again, the main
   column first. */
.app-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem 1.5rem;
  padding: 0.5rem 0 1.2rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line);
}
.app-bar > :first-child { flex: 1 1 22rem; min-width: 0; }
.app-bar h1 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; }
.app-bar h1 .muted { font-size: 0.55em; font-weight: 400; letter-spacing: 0; }
.app-bar .sd-label { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin: 0 0 0.55rem; }
.app-bar .sd-label a { color: inherit; }
.app-bar .sd-label a:hover { color: var(--text); }
.app-bar .sd-note, .app-bar .meta { margin: 0.55rem 0 0; }
.app-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.app-acts form { margin: 0; }
.app-bar .sep { opacity: 0.45; }

.app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.app-main { min-width: 0; }
.app-main > :first-child, .panel > :first-child { margin-top: 0; }
.app-main > :last-child, .panel > :last-child { margin-bottom: 0; }
/* A side column is only ever as wide as its track, whatever's put in it:
   its panels can't grow past it (minmax(0, 1fr), min-width: 0), long words
   and addresses break, buttons wrap their words, boxes fill it, and it never
   scrolls sideways; anything that still won't fit is clipped, not left to
   push the column wider. */
.app-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; overflow-wrap: anywhere; overflow-x: clip; overflow-clip-margin: 4px; }
.app-side > * { min-width: 0; }
.app-side .panel { margin: 0; }
.app-side .sd-btn { max-width: 100%; white-space: normal; text-align: center; }
.app-side :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select, textarea) { width: 100%; min-width: 0; }
@media (min-width: 1001px) {
  .app { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "main side"; column-gap: 2rem; }
  .app.left { grid-template-columns: 17rem minmax(0, 1fr); grid-template-areas: "side main"; }
  .app.wide-side { grid-template-columns: minmax(0, 1fr) 26rem; }
  /* Two panel columns: both on the right, one over the other, here; one each side on a wider screen. */
  .app.three { grid-template-rows: auto 1fr; grid-template-areas: "main side" "main end"; }
  .app > .app-main { grid-area: main; }
  .app > .app-side { grid-area: side; }
  .app > .app-side.end { grid-area: end; }
  .app:not(:has(> .app-side)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .app-side.sticky { position: sticky; top: 4.8rem; max-height: calc(100vh - 6rem); overflow: hidden auto; scrollbar-width: thin; }
  /* A sticky panel sticks within the whole grid, not its own row, so two
     stacked in one column would slide over each other: they scroll here. */
  .app.three > .app-side.sticky { position: static; max-height: none; overflow: visible; overflow-x: clip; }
}
@media (min-width: 1500px) {
  .app.three { grid-template-columns: 17rem minmax(0, 1fr) 21rem; grid-template-rows: none; grid-template-areas: "side main end"; }
  .app.three > .app-side.sticky { position: sticky; max-height: calc(100vh - 6rem); overflow: hidden auto; }
}

/* Panels on these pages: the cards' rounder corners, a label for a title. */
.sd-page .panel { padding: 1rem 1.15rem; border-radius: calc(var(--radius) + 8px); }
.panel h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }
.panel .members li:last-child { border-bottom: 0; }
.panel .actions { margin: 0.8rem 0 0; }
.panel-title .count { float: right; letter-spacing: 0; }
.app-side .panel p { margin: 0.5rem 0; }

.app-side .sd-readout { margin: 0; }
.app-side .members li { padding: 0.5rem 0; }
.members.asked li { display: grid; gap: 0.1rem; }

/* Ideas, circles and keys in a grid rather than one long column. */
.sd-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; }
.sd-card .sd-actions { margin: auto 0 0; gap: 0.5rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.8rem; margin: 0.6rem 0; }
.card-grid > .card { margin: 0; }
/* "Nothing here" inside a coloured layer, in that layer's text colour. */
.stratum .card-grid > p.muted { color: inherit; opacity: 0.8; }
.card-grid > .card.entry { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); }
.sd-page .stratum { border-radius: calc(var(--radius) + 8px); padding: 0.8rem 1.1rem 1.1rem; margin: 0 0 0.8rem; scroll-margin-top: 5rem; }
.stratum > h2 { margin: 0.2rem 0 0.4rem; }

/* A list of links down a side panel: the sections of a page, or its versions. */
.side-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-nav a {
  display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 0.92rem;
}
.side-nav a:hover { background: var(--layer-1); color: var(--on-layer-1); }
.side-nav a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 var(--accent); }
.side-nav .sd-depth { white-space: nowrap; }

/* The core sample: the surface and down the core, side by side. */
.core-split { display: grid; gap: 1rem; align-items: start; }
.core-split .stratum { margin: 0; }
@media (min-width: 901px) { .core-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Prospecting and drafts: new ideas your AI found in old ones, each to keep,
   and the ones kept, each to work on. */
.prospects { margin: -0.4rem 0 1rem; }
.prospect-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.drafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.8rem; }
.draft { display: flex; flex-direction: column; margin: 0; scroll-margin-top: 5rem; }
.draft > .text > :first-child { margin-top: 0; }
.draft > .code { max-height: 24rem; overflow: auto; }
.draft > .thumb { display: block; max-width: 100%; max-height: 16rem; margin: 0 0 0.6rem; border-radius: var(--radius); object-fit: contain; }
.draft > audio { width: 100%; margin: 0 0 0.6rem; }
.draft > .sd-card-top { margin: 0 0 0.5rem; }
.draft > :last-child { margin: auto 0 0; padding-top: 0.6rem; }
.draft form { margin: 0; }
.draft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.draft:target { outline: 2px solid var(--accent); outline-offset: 2px; }

/* An idea's history: the timeline, with words kept to a readable width. */
.history.app-main { margin: 0; }
.history .event { scroll-margin-top: 5rem; }
.history .event-note, .history .event > .text { max-width: 80ch; }

/* A layer column you can click: each band goes to that layer. */
.core-column.links { height: auto; }
.core-column.links .band { min-height: 2.1rem; padding: 0; }
.core-column.links a {
  display: flex; flex: 1; justify-content: space-between; align-items: center; align-self: stretch; padding: 0 0.6rem;
  color: inherit; text-decoration: none; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.core-column.links a:hover, .core-column.links [aria-current] { box-shadow: inset 4px 0 var(--accent); }

/* ── One idea, opened ───────────────────────────────────────────────── */
.app-by { display: flex; align-items: center; gap: 0.9rem; }
.app-by .who { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.app-by .handle { display: block; }
.work {
  padding: 1.2rem 1.4rem 0.9rem; margin: 0 0 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); border-top: 2px solid var(--accent);
}
.work-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 1rem; }
.work-head .tl-depth { margin-left: auto; }
.work > .text { font-size: 1.3rem; }
.work > .text > :first-child { margin-top: 0; }
.work > .code { font-size: 0.92rem; padding: 1rem 1.1rem; }
.work img.media { max-height: 78vh; margin: 0 auto; }
.work audio, .work .waveform { max-width: none; }
.work .tags { margin: 1rem 0 0; }
.work-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.work-foot form { margin: 0; }
.work-foot .push { margin-left: auto; }
.idea-section { margin: 0 0 1.8rem; }
.idea-section > .sd-head { margin: 0 0 0.8rem; }
.idea-section > .sd-head h2 { font-size: 1.4rem; }
.additions .addition { padding: 0.8rem 1rem; margin: 0 0 0.7rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--layer-3); border-radius: calc(var(--radius) + 4px); }
.app-side .stage { font-size: 0.66rem; }
.panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.panel .badge + .muted, .panel .badge + span { font-size: 0.88rem; }

/* ── Signing in: a picture of the ground beside the form ───────────── */
.auth { display: grid; gap: 1.5rem; max-width: 64rem; margin: 1rem auto 0; }
.auth-ground { border-radius: calc(var(--radius) + 8px); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
/* The line sits in the sky over the ground. */
.auth-ground p { margin: 0; padding: 1.3rem 1.4rem 0.9rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.auth .panel { margin: 0; }
.auth form p { margin: 0 0 0.9rem; }
.auth input:not([type="checkbox"]) { width: 100%; }
/* Continue with Google, Microsoft and the rest above the form, then a rule with "or" on it. */
.sign-in-with { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.sign-in-with form { margin: 0; }
.sign-in-with .sd-btn { width: 100%; justify-content: center; gap: 0.55rem; }
.provider-logo { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.auth-or { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
@media (min-width: 821px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; }
  /* Kept in view down the longer sign up form. */
  .auth-ground { position: sticky; top: 4.5rem; }
}
/* A page that stands alone (templates/_error_alone.html): just the panel. */
.auth.alone { grid-template-columns: minmax(0, 30rem); justify-content: center; margin-top: 2rem; }
.auth .agree { margin: 0.8rem 0 0; }

/* ── The privacy, terms and contact pages: a column to read ──────── */
.legal { max-width: 46rem; margin: 1rem auto 0; line-height: 1.6; }
.legal h2 { margin: 2.2rem 0 0.6rem; }
.legal h3 { margin: 1.6rem 0 0.3rem; }
.legal h3 + p { margin-top: 0; }
.legal li + li { margin-top: 0.45rem; }
.legal .sd-label a { color: inherit; }
/* Blanks for whoever runs the site to fill in. */
mark.blank { padding: 0 0.2em; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }

/* ── Asking and adding ─────────────────────────────────────────────── */
/* One control for every Ask and Add: a composer, like a chat or comment
   box. The words go straight in, the choices sit in a bar at its foot, and
   its one action is at the right of that bar: a square arrow to send to
   your AI, a worded button to put something on the site. .needs-text keeps
   that action quiet until there's something to send. Last in the file, so
   it wins ties with .app-side's full-width boxes. */
.sd-page h2.panel-title { font-weight: 400; letter-spacing: 0.06em; }  /* .sd-page h2 (800, tight) was beating .panel-title's own */
.sd-composer {
  --composer-r: min(calc(var(--r-control) + 5px), var(--r-card));
  display: flex; flex-direction: column; min-width: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--composer-r);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sd-composer:hover:not(:focus-within) { border-color: var(--line-hover); }
.sd-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.sd-composer:has([aria-invalid="true"]) { border-color: var(--danger); }
.sd-composer > .errorlist { margin: 0.55rem 0.8rem 0; }
.sd-composer > textarea, .sd-composer > input:is([type="text"], [type="password"], :not([type])) {
  display: block; width: 100%; margin: 0; padding: 0.65rem 0.8rem 0.3rem;
  border: 0; background: none; box-shadow: none; font-size: 0.94rem; line-height: 1.5;
}
.sd-composer > textarea { min-height: 3.6rem; max-height: 22rem; resize: none; field-sizing: content; }
@supports not (field-sizing: content) { .sd-composer > textarea { resize: vertical; } }
.sd-composer :is(textarea, input)::placeholder { opacity: 1; }  /* it's the box's only visible label: full muted, which themes keep readable */
.sd-composer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.35rem 0.35rem 0; }
.sd-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.6rem; padding: 0.3rem; }
.sd-composer-end { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.sd-composer-note { color: var(--muted); font-size: 0.8rem; }
.sd-composer + .helptext { margin-top: 0.5rem; }
/* The action: the arrow, or a worded Add. Quiet while the box is empty
   (not for a picture, sound or model: the file is what's added). Still clickable,
   so its words stay readable: muted pulled towards the text, on the tint. */
.sd-btn.send.icon .icon { width: 1.1rem; height: 1.1rem; margin: 0; stroke-width: 2.1; }
.sd-btn.send:disabled { cursor: progress; }
.sd-composer.needs-text:has(> :is(textarea, input:not([type="hidden"])):placeholder-shown):not(:has(input[name="kind"]:checked:not([value="text"], [value="code"]))) .sd-btn.send {
  background: var(--tint-strong); border-color: transparent; color: color-mix(in srgb, var(--muted) 60%, var(--text)); box-shadow: none;
}
/* Choices in the foot: which AI, the code language. */
.sd-composer-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; height: 2rem; padding: 0 0.45rem; border-radius: var(--r-control); color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.sd-composer-chip:has(select):hover { background: var(--tint); color: var(--text); }
.sd-composer-chip > .icon { width: 0.95rem; height: 0.95rem; }
.sd-composer .sd-composer-chip select {
  width: auto; max-width: 10rem; min-height: 0; padding: 0 1.1rem 0 0; border: 0; box-shadow: none; background-color: transparent;
  background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; background-size: 4px 4px; color: inherit; font: inherit; text-overflow: ellipsis; cursor: pointer;
}
.sd-composer .sd-composer-chip input { width: 6.5rem; min-height: 0; padding: 0.2rem 0.45rem; font-size: 0.8rem; }
.sd-composer-chip:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Main-column composers: bigger, with the settings cards' shaded foot. */
.sd-composer.framed > textarea { min-height: 6.5rem; max-height: 60vh; padding: 0.85rem 1rem 0.5rem; font-size: 1rem; }
.sd-composer.framed .sd-composer-head { padding: 0.5rem 0.5rem 0; }
.sd-composer.framed .sd-composer-foot {
  padding: 0.45rem 0.5rem 0.45rem 0.6rem; border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--composer-r) - 1px) calc(var(--composer-r) - 1px); background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.content-form.sd-composer:has(input[name="kind"][value="code"]:checked) > textarea { font-family: var(--font-mono); font-size: 0.86rem; }
/* One line with its button inside: adding a person (and your password, inviting a second parent), the Ctrl+I box. */
/* nowrap: site.css's form.inline wraps. The box takes what's left, from nothing, so a narrow panel never pushes the button down. */
.sd-composer.inline { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.35rem; padding: 0.25rem 0.25rem 0.25rem 0.65rem; }
.sd-composer.inline > .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--muted); }
.sd-composer.inline > input:is([type="text"], [type="password"], :not([type])) { flex: 1 1 0; width: 0; min-width: 0; padding: 0.3rem 0.15rem; }
.sd-composer.inline > .sd-btn { flex: none; }
/* What a kind needs, in bands between the words and the foot. */
.sd-composer-part { display: grid; gap: 0.6rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); }
.sd-composer-part[hidden] { display: none; }
.sd-composer.framed .sd-composer-part { padding-inline: 1rem; }
.sd-composer-part.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-block: 0.5rem; }
.sd-composer-part > label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sd-composer-part > input:is([type="text"], :not([type])) { width: min(14rem, 100%); padding: 0.3rem 0.5rem; font-size: 0.86rem; }
.sd-page .sd-composer-part p { margin: 0; }
/* A native file input takes dropped files: the dashed box is an honest drop zone. */
.sd-composer .sd-drop input[type="file"] {
  display: block; width: 100%; padding: 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-control);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface)); cursor: pointer;
}
.sd-composer .sd-drop input[type="file"]:hover { border-color: var(--accent); }
.sd-composer [data-picture-from] { display: inline-flex; justify-self: start; gap: 2px; min-inline-size: 0; margin: 0; padding: 2px; border: 0; border-radius: calc(var(--r-control) + 2px); background: var(--tint); }
.sd-composer [data-picture-from][hidden] { display: none; }
.sd-composer .recorder { margin: 0; }
.sd-composer .recorder .waveform { flex: 1 1 100%; max-width: none; margin: 0; padding: 0 0.6rem; border-radius: var(--r-control); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }  /* a track to record onto */
.sd-btn.record-button .icon { color: var(--danger); }
.sd-btn.record-button.recording { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.sd-composer .draw-pad .tools { gap: 2px; margin: 0 0 0.5rem; }
.draw-pad .tools label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.draw-pad .tools .sep { width: 1px; height: 1.3rem; margin: 0 0.35rem; background: var(--line); }
/* Scoped: the studio's full screen and the viewer's mute buttons use aria-pressed too. */
.draw-pad .sd-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: transparent; color: var(--accent); }
.draw-pad input[type="color"] { width: 2rem; height: 2rem; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); cursor: pointer; }
.draw-pad input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.draw-pad input[type="color"]::-webkit-color-swatch { border: 0; border-radius: max(2px, calc(var(--r-control) - 3px)); }
/* A rule of its own: a browser that doesn't know one pseudo-element drops a whole list. */
.draw-pad input[type="color"]::-moz-color-swatch { border: 0; border-radius: max(2px, calc(var(--r-control) - 3px)); }
/* One of a few: the workspaces' .ws-seg for page forms. */
.sd-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; min-inline-size: 0; margin: 0; padding: 2px; border: 0; border-radius: calc(var(--r-control) + 2px); background: var(--tint); }
.sd-seg-opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 1.85rem; height: 1.75rem; padding: 0 0.5rem;
  border-radius: var(--r-control); color: var(--muted); font-size: 0.8rem; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.sd-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sd-seg-opt:hover { color: var(--text); }
.sd-seg-opt:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--line); }
.sd-seg-opt:has(input:checked) .icon { color: var(--accent); }
.sd-seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.sd-seg-opt .icon { width: 1rem; height: 1rem; }
.sd-seg.compact .sd-seg-opt { padding: 0 0.4rem; }
.sd-seg.compact .sd-seg-opt:not(:has(input:checked)) .sd-seg-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A side panel's form ends like a settings card, when it's the panel's last part. */
.sd-page .panel .panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; margin: 1.1rem -1.15rem -1rem; padding: 0.7rem 1.15rem;
  border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.sd-page .panel .panel-foot > p { flex: 1 1 9rem; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
/* No AI key yet: settings' empty state, anywhere. */
.sd-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.5rem 0.85rem; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.sd-empty > .setting-empty-icon { grid-row: span 2; }
.sd-page .sd-empty p { margin: 0; }
.sd-empty > .sd-btn { justify-self: start; }
/* You, beside what you're adding. */
.compose-by { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.8rem; margin: 1rem 0 0; }
.compose-by > .avatar { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .compose-by { grid-template-columns: minmax(0, 1fr); }
  .compose-by > .avatar { display: none; }
}
.compose-section { margin-top: 1.6rem; }
.members:has(+ .member-add) { margin-bottom: 0; }
.member-add { max-width: 28rem; margin-top: 0.75rem; }
/* #add links (ai:keys#add, an idea's #add) land on the form, under the sticky header, which wraps taller on a phone. */
.setting-card, .sd-composer[id] { scroll-margin-top: 5rem; }
@media (max-width: 640px) { .setting-card, .sd-composer[id] { scroll-margin-top: 7.5rem; } }
.prospect-form select { min-height: 2.35rem; padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.88rem; }  /* as tall as Go prospecting */
/* +1 and Add to it under posts: the same size, on the new corners. */
.plus button.tally { border-color: var(--line-strong); border-radius: var(--r-control); font-weight: 600; }
.plus button.tally:hover { background: var(--tint); border-color: var(--line-hover); color: var(--text); }
.plus button.tally.on { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
:is(.fd-actions, .work-foot) .plus button.tally { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.65rem; }
:is(.fd-actions, .work-foot) a.tally { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; padding: 0 0.55rem; border-radius: var(--r-control); }
:is(.fd-actions, .work-foot) a.tally:hover { background: var(--tint); }
.tally .icon { width: 0.95rem; height: 0.95rem; }
.fd-actions { gap: 0.25rem 0.5rem; }
/* Accepting a parent invite asks for the child's password beside the button. */
.invite-accept { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.invite-accept input { width: 11rem; }
/* Connecting another account (accounts/security.html): the password, then a button for each provider. */
.connect-accounts { justify-content: flex-start; }
.connect-accounts p { flex: 1 0 100%; }
.connect-accounts input[type="password"] { width: 13rem; }
.connect-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.connect-buttons .sd-btn { gap: 0.45rem; }

/* Setting up two-step sign-in: the QR code beside the key to type instead. */
.two-step-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.two-step-scan .qr { flex: none; width: 12rem; padding: 0.4rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.two-step-scan .qr svg { display: block; width: 100%; height: auto; }
.two-step-key { font-size: 1.05rem; letter-spacing: 0.06em; word-spacing: 0.3em; overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem 1.4rem; margin: 0; padding-left: 1.6rem; font-size: 1.05rem; }
.passkey-login { margin: 0.9rem 0 0; }
.passkey-login .sd-btn { width: 100%; justify-content: center; }

/* ── Linked projects (links): the list under an idea, its history entries, the dashboard's list ── */
/* An idea's linked projects (links/_projects.html), under the work: a list
   of connected things, like settings' lists. Each row has its service's
   mark, its name and how it's going, and its owner's buttons, on one line
   where there's room; where there isn't (a phone, a starter project's side
   panel), the buttons go under the words. A long name wraps rather than
   push anything out. What its buttons did is said just above it. */
/* Its buttons come back to it (#linked): just under the sticky header, which wraps taller on a phone. */
.linked-projects { scroll-margin-top: 5rem; }
@media (max-width: 640px) { .linked-projects { scroll-margin-top: 7.5rem; } }
.linked-projects > .message { margin: 0 0 0.8rem; }
.linked-list {
  container-type: inline-size; margin: 0; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.linked {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark body acts";
  align-items: center; gap: 0.5rem 0.9rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line);
}
.linked-list > li:first-child { border-top: 0; }
.linked-mark {
  grid-area: mark; align-self: start; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-control); background: var(--tint); color: var(--muted);
}
.linked-mark .icon { width: 1.2rem; height: 1.2rem; }
.linked-body { grid-area: body; display: grid; gap: 0.15rem; min-width: 0; margin: 0; }
.linked-list .linked-body p { margin: 0; }  /* side panels space their paragraphs out */
.linked-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; min-height: 1.6rem; font-weight: 600; overflow-wrap: anywhere; }
.linked-name a { color: var(--text); text-decoration: none; }
.linked-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.linked-name a .icon { width: 0.9em; height: 0.9em; margin-left: 0.25em; color: var(--muted); }
.linked-name .linked-meta { font-weight: 400; }
.linked-meta { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.linked-meta .dot {
  display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%;
  background: var(--accent); animation: pulse 1.2s ease-in-out infinite;
}
.linked-problem { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.85rem; overflow-wrap: anywhere; }
.linked-problem .icon { flex: none; margin-top: 0.2em; color: var(--danger); }  /* by the first line */
.linked-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.3rem; }
.linked-acts form { margin: 0; }
.linked-acts .sd-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
@container (max-width: 40rem) {
  .linked { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark body" ". acts"; }
  .linked-acts { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .linked-meta .dot { animation: none; } }
/* In a side panel the rows sit straight in it, between its own lines. */
.panel > .linked-list { background: none; border: 0; border-radius: 0; }
.panel > .linked-list > .linked { padding-inline: 0; }
.panel > .linked-list > .linked:first-child { padding-top: 0.2rem; }
.panel > .linked-list > .linked:last-child { padding-bottom: 0; }
.project-change .event-mark { border-radius: 3px; transform: rotate(45deg); background: var(--layer-2); }
.project-change.lifted .event-mark { background: var(--accent); }
.change-notes, .change-files { margin: 0.4rem 0; padding-left: 1.1rem; font-size: 0.9rem; }
.change-files { list-style: none; padding-left: 0; }
.pull-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.5rem 0 0; }
.tl-notice.project-changes { display: block; }
.change-list { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* ── Staff area ─────────────────────────────────────────────────────── */
/* Laid out like Settings (its sections down the left, cards beside them),
   with a row of numbers at the top of a page and small inline forms. */
.staff-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.7rem; }
.staff-tile {
  display: grid; align-content: start; gap: 0.2rem; padding: 0.9rem 1rem; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
a.staff-tile:hover { border-color: var(--line-hover); }
.staff-tile.attention { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.staff-tile strong { font-size: 1.5rem; line-height: 1.15; }
.staff-tile .muted { font-size: 0.82rem; }
.staff-tile-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.staff-search { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.staff-search input { flex: 1 1 14rem; }
.staff-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.staff-inline input { flex: 1 1 10rem; min-width: 0; }
.setting-card-head .staff-inline { margin-top: 0.6rem; }
.staff-reported .idea { margin: 0; }
.staff-locked { max-width: 40rem; margin: 2rem auto; }
.badge.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

/* Reporting an idea or an addition: a menu with the reasons as a list. */
.report-form { display: grid; gap: 0.6rem; padding: 0.5rem 0.6rem 0.6rem; }
.report-form fieldset { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.report-form legend { margin-bottom: 0.3rem; font-weight: 600; }
.report-form label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.report-form .report-details { display: grid; gap: 0.3rem; }
.report-form textarea { width: 100%; }
.report-form .sd-btn { justify-self: end; }
.additions .addition:has(> .report-menu) { position: relative; }
.addition:has(> .report-menu) > .meta { padding-right: 4.5rem; }
.addition > .report-menu { position: absolute; top: 0.8rem; right: 1rem; }
/* It opens from inside the addition's padding, so on a phone it's kept that
   much narrower, or it would start a pixel past the screen's left edge. */
.addition > .report-menu > .sd-menu-pop { max-width: min(24rem, calc(100vw - 4rem)); }
.report-menu > summary.link, a.report-menu { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; }
a.report-menu:not(:hover) { color: var(--muted); }

/* Get the app (core/app.html): a card of steps for each kind of device. */
.get-app h2 { margin: 0; font-size: 1.25rem; }
.get-app ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* On a phone the front page's hero starts near the top, not a screen's
   worth of sand down. */
@media (max-width: 640px) { .sd-hero:not(.compact) { padding-top: 1rem; } }

/* Settings, Notifications (jobs/notifications.html): a group of switches
   per kind, each under its name, inside one card. */
fieldset.setting-group { min-width: 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line); }
fieldset.setting-group > legend { float: left; width: 100%; padding: 1rem 0 0.1rem; margin: 0; }
fieldset.setting-group > legend + * { clear: both; }

[data-devices] { display: contents; }