/* simpleSite's one stylesheet (simpleSite/AGENTS.md "Templates and static files"): no inline
   styles anywhere. Three parts: the house tokens and elements every page shares, the owner's
   back office (`body.owner`, `templates/owner_base.html`) with the door pages (`body.door`:
   sign-in and re-authentication), then the public site. */
:root {
  color-scheme: light dark;
  --ink: #1d1d1b;
  --paper: #fbfaf7;
  --muted: #6b6a66;
  --accent: #f2c230;
  --line: #d9d6cf;
  --brick: #9b2c22;
  --field: #ffffff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The highlighter stroke's band under a marked word (lower and thinner on dark paper, where
     light glyphs over yellow would lose contrast). */
  --stroke-top: 58%;
  --stroke-bottom: 92%;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ecebe6; --paper: #1b1b1a; --muted: #a3a29c; --line: #3a3936; --brick: #e8867a; --field: #232321; --stroke-top: 80%; --stroke-bottom: 97%; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
.page { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.muted { color: var(--muted); }
.notice { border-left: 4px solid var(--accent); padding: .5rem .75rem; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.stack { display: grid; gap: .75rem; max-width: 24rem; }
.stack label { display: grid; gap: .25rem; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
input, textarea, select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--field); color: inherit; }
input { accent-color: var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
textarea.code, input.code { font-family: var(--mono); font-size: .9rem; }
/* Buttons: one primary action a page, in the house yellow; every other button is outlined; a
   `.danger` button (delete, retire, block, revoke, disconnect, end) is outlined in brick. */
button, .button { font: inherit; padding: .4rem .9rem; border: 1px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; }
button.primary, .button.primary, .scene-play { background: var(--accent); border-color: #1d1d1b; color: #1d1d1b; font-weight: 600; }
button.danger, .button.danger { color: var(--brick); border-color: var(--brick); }
button.quiet, .button.quiet { border-color: var(--line); color: var(--muted); }
button:disabled { opacity: .5; cursor: default; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; border-bottom: 2px solid var(--ink); }
td form { display: inline; }
.stack.wide { max-width: 40rem; }
.stack .check { display: flex; gap: .5rem; align-items: center; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
fieldset { border: 1px solid var(--line); border-radius: 4px; display: grid; gap: .5rem; min-width: 0; }
form.inline { display: inline; }
blockquote.note { white-space: pre-wrap; margin: .25rem 0 .5rem 1rem; }

/* The owner's back office: a desk. A rail on the left lists the back office's contents in five
   groups; the current section carries the yellow highlighter stroke (`body.s-<section>` from the
   template's `section` block, matched to the rail's addresses). The column is left-aligned,
   44rem wide; headings, prose and the rail are serif, controls and tables sans. */
.owner { font-family: var(--serif); }
.owner input, .owner textarea, .owner select, .owner button, .owner .button, .owner table { font-family: var(--sans); }
.owner textarea.code, .owner input.code, .owner code { font-family: var(--mono); }
.desk { display: grid; grid-template-columns: 13rem minmax(0, 1fr); min-height: 100vh; }
.rail { padding: 2rem 1.25rem 2rem 1.5rem; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 1.25rem; font-size: .95rem; }
.rail-home { font-size: 1.1rem; text-decoration: none; font-weight: 600; letter-spacing: -.01em; justify-self: start; }
.owner .rail h2 { margin: 0 0 .25rem; font: inherit; font-size: .8rem; color: var(--muted); }
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.rail a { text-decoration: none; display: inline-block; padding: .05rem 0; }
.rail a:hover { text-decoration: underline; }
.rail form { margin-top: .5rem; justify-self: start; }
.rail .quiet { font-size: .85rem; padding: .25rem .6rem; }
.desk > .page { margin: 0; padding: 2.5rem 2rem 4rem; }
.mark, .rail a.here { background: linear-gradient(transparent var(--stroke-top), var(--accent) var(--stroke-top), var(--accent) var(--stroke-bottom), transparent var(--stroke-bottom)); }
.s-home .rail a[href="/owner"], .s-posts .rail a[href="/owner/posts"], .s-articles .rail a[href="/owner/articles"],
.s-feeds .rail a[href="/owner/feeds"], .s-pages .rail a[href="/owner/pages"], .s-design .rail a[href="/owner/design"],
.s-site .rail a[href="/owner/site"], .s-identities .rail a[href="/owner/identities"], .s-inbox .rail a[href="/owner/inbox"],
.s-readers .rail a[href="/owner/readers"], .s-federation .rail a[href="/owner/federation"],
.s-connections .rail a[href="/owner/federation/connections"], .s-following .rail a[href="/owner/following"],
.s-spaces .rail a[href="/owner/spaces"], .s-messages .rail a[href="/owner/messages"],
.s-sessions .rail a[href="/owner/sessions"], .s-password .rail a[href="/owner/password"] {
  background: linear-gradient(transparent var(--stroke-top), var(--accent) var(--stroke-top), var(--accent) var(--stroke-bottom), transparent var(--stroke-bottom));
  font-weight: 600;
}
/* Narrow screens: the rail becomes one scrolling line above the page (the group names stay for
   assistive technology), so the page starts at once. */
@media (max-width: 56rem) {
  .desk { grid-template-columns: 1fr; }
  .rail { display: flex; align-items: center; gap: 1rem; overflow-x: auto; white-space: nowrap; border-right: 0; border-bottom: 1px solid var(--line); padding: .75rem 1rem; font-size: .9rem; }
  .rail section { display: contents; }
  .owner .rail h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .rail ul { display: flex; gap: 1rem; }
  .rail section + section ul::before { content: ""; border-left: 1px solid var(--line); }
  .rail form { margin: 0; }
  .desk > .page { padding: 1.5rem 1rem 3rem; }
  /* With the owner script: the group names are a row of buttons; the open group's links show
     below the row (`owner.mjs`). */
  .rail.js { flex-wrap: wrap; white-space: normal; overflow: visible; gap: .5rem .6rem; }
  .rail.js section { display: contents; }
  .owner .rail.js h2 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 0; }
  .rail.js h2 .name { display: none; }
  .rail.js .group { display: inline-block; font: .9rem/1.4 var(--serif); padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); }
  .rail.js section.open .group { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .rail.js ul { display: none; }
  .rail.js section.open ul { display: flex; flex-wrap: wrap; order: 1; flex-basis: 100%; gap: .35rem 1.1rem; margin-top: .25rem; padding-top: .6rem; border-top: 1px solid var(--line); }
  .rail.js section + section ul::before { content: none; }
}
.rail .group { display: none; }
.owner h1 { font-size: 2rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.owner h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 .5rem; letter-spacing: -.005em; }
.owner h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.owner p, .owner li { line-height: 1.55; }
.owner p { margin: .5rem 0; }
.owner .page > p:first-of-type, .owner .page-head + p { margin-top: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .button { align-self: center; }
.kicker { margin: 0; color: var(--muted); font-size: .95rem; }
/* Related pages: the parent list first, then the siblings, separated by hairline rules. */
.related { font-size: .95rem; margin: 0 0 1.25rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 0; }
.related li + li { border-left: 1px solid var(--line); margin-left: .75rem; padding-left: .75rem; }
.related a { text-decoration: none; }
.related a:hover { text-decoration: underline; }
/* Ways to start something new (a post shape, a page kind): small outlined links in a row. */
.choices { list-style: none; margin: .5rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.choices a { font: .9rem/1.4 var(--sans); padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.choices a:hover { border-color: var(--ink); }
/* Forms: a label's name above its control, with the hint in small. */
.owner .stack label { font: .9rem/1.4 var(--sans); font-weight: 600; }
.owner .stack label small, .owner legend small, .owner .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.owner .stack label small { display: block; margin-top: -.1rem; }
.owner .stack .check { font-weight: 400; }
.owner .stack .check input { margin: 0; }
.owner legend { font: .9rem/1.4 var(--sans); font-weight: 600; padding: 0 .25rem; }
.owner fieldset { padding: .75rem .9rem .9rem; }
.owner .stack > button, .owner .stack > .row { justify-self: start; margin-top: .25rem; }
.owner .notice { margin: 0 0 1rem; }
.owner .muted { font-size: .95rem; }
/* Lists of people and things: hairline rules, the action at the end of the line. */
.lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.lines > li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.lines > li > form { margin-left: auto; }
.lines > li > form .check { display: inline-flex; gap: .3rem; align-items: center; font: .9rem var(--sans); margin-right: .5rem; }
.lines .button, .lines button { font-size: .85rem; padding: .25rem .7rem; }
.lines .meta { color: var(--muted); font-size: .9rem; }
.lines .count { color: var(--muted); font-size: .9rem; font-family: var(--sans); }
/* Entries: the Inbox's decisions, a conversation, a space's log. */
.entries-log { list-style: none; margin: 0; padding: 0; }
.entries-log > li { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.entries-log > li > p { margin: 0; }
.entries-log .meta { color: var(--muted); font-size: .9rem; font-family: var(--sans); }
.entries-log .decide { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-family: var(--sans); font-size: .9rem; }
.entries-log .decide form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.entries-log .decide label { display: inline-flex; gap: .3rem; align-items: center; }
.entries-log .decide button { font-size: .85rem; padding: .25rem .7rem; }
.entries-log .bio { margin: 0; }
.entries-log blockquote.note { margin: 0 0 0 1rem; padding-left: .75rem; border-left: 2px solid var(--line); color: var(--muted); }
/* A quiet place at the end of a page for what cannot be undone. */
.ends { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ends h2 { margin-top: 0; }
.owner .row > form { margin: 0; }
/* The home: the site's name, then the ways to write, then the rooms. */
.desk-title { font-size: 2.4rem; }
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rooms > li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.rooms > li:first-child { border-top: 1px solid var(--line); }
.rooms a { text-decoration: none; font-weight: 600; }
.rooms a:hover { text-decoration: underline; }
.rooms .what { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 36rem) { .rooms > li { grid-template-columns: 1fr; gap: .1rem; } }
.owner dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; font-family: var(--sans); font-size: .95rem; }
.owner dt { color: var(--muted); }
.owner dd { margin: 0; overflow-wrap: anywhere; }
.owner table a { text-decoration: none; }
.owner table a:hover { text-decoration: underline; }
.owner td.deed { text-align: right; padding-right: 0; white-space: nowrap; }
.owner td .inline button, .owner td > form button { font-size: .85rem; padding: .25rem .7rem; }
.owner .page-banner { max-width: 100%; }
.filters { font-family: var(--sans); font-size: .9rem; }
/* The door: sign in and the password confirmation, one column, nothing else on the page. */
.door .page { max-width: 24rem; padding-top: 14vh; }
.door h1 { font: 400 1.75rem/1.2 var(--serif); margin: 0 0 .25rem; letter-spacing: -.01em; }
.door .stack label { font-size: .9rem; font-weight: 600; }
.door .stack > button { justify-self: start; }

/* The public site. The Design paints through /_www/design.css (custom properties) and the
   classes on <body>: t- typography, d- density, c- cards, l- links, h- header, f- feed layout. */
.site a { color: inherit; text-decoration: underline; }
/* Links take the accent only when the Design sets a palette (its accent passed 3:1); the house
   accent is a button colour, not a link colour on paper. */
.site.l-accent a { color: var(--link-accent, inherit); }
.site-head { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 0; display: grid; gap: .75rem; }
.site-id { display: flex; gap: .75rem; align-items: center; }
.site-title { font-size: 1.4rem; font-weight: 700; color: inherit; text-decoration: none; }
.site .site-title { color: inherit; text-decoration: none; }
.tagline { margin: 0; color: var(--muted); }
.site-banner, .page-banner { width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; }
.avatar { border-radius: 50%; object-fit: cover; }
.avatar.large { width: 96px; height: 96px; }
.site-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: 0; margin: 0; }
.site-menu a[aria-current="page"] { font-weight: 700; }
.site-foot { max-width: 44rem; margin: 0 auto; padding: 0 1rem 2rem; }
.site-foot .legal { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .9rem; }
.profile-head { display: flex; gap: 1rem; align-items: center; }
.handle { font-size: 1.3rem; overflow-wrap: anywhere; }
.bio { white-space: pre-line; }
.profile-links { padding-left: 1.2rem; }
.prose { overflow-wrap: break-word; }
.prose img { max-width: 100%; height: auto; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.site.t-editorial { font-family: Georgia, "Iowan Old Style", serif; font-size: 18px; }
.site.t-compact { font-size: 15px; }
.site.d-airy .page { padding: 3rem 1rem; line-height: 1.7; }
.site.d-dense .page { padding: 1rem; line-height: 1.35; }
.site.c-bordered .entries > li { border: 1px solid var(--line); border-radius: 6px; padding: .75rem; }
.site.c-flat .entries > li { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); padding: .75rem; }
.entries { list-style: none; padding: 0; display: grid; gap: .75rem; }
.site.f-grid .entries { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.entries.layout-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.entries.layout-single { grid-template-columns: 1fr; }
.post-title { font-size: 1.15rem; margin: 0 0 .25rem; }
.post-meta { font-size: .85rem; margin: .5rem 0 0; }
.post .prose figure { margin: .5rem 0; }
.feed-list { padding-left: 1.2rem; }

/* Scenes (scene-runtime/AGENTS.md "Embedding": the embedding page styles the poster, the badge,
   the Play button, the error and the controls; the host positions its iframe over the frame). */
.scene { margin: .5rem 0; }
.scene-frame { position: relative; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.scene-frame > img { display: block; width: 100%; height: auto; }
.scene-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scene-badge { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .8rem; }
.scene-play { position: absolute; bottom: .5rem; right: .5rem; }
.scene-error { position: absolute; bottom: .5rem; left: .5rem; margin: 0; padding: .2rem .5rem; background: var(--paper); border-radius: 4px; }
.scene-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.scene-controls { display: grid; gap: .5rem; margin: .5rem 0; }
.scene-control { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Calendar feed pages and article lists. */
.calendar-views ul { list-style: none; display: flex; gap: 1rem; padding: 0; }
.calendar-views a[aria-current="page"] { font-weight: 700; }
.calendar-day h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.calendar-time { margin: 0 0 .25rem; font-size: .85rem; }
.article.single .prose { font-size: 1.05rem; }
.newsletter-item-row { border-top: 1px solid var(--line); padding-top: .5rem; }
.card { border: 1px solid var(--line); border-radius: .4rem; padding: .5rem .75rem; list-style: none; }
blockquote.note { white-space: pre-wrap; margin: .25rem 0 .5rem 1rem; }
.descriptor { border: 1px solid var(--line); border-radius: .4rem; padding: .75rem 1rem; }