/* Blynken base style (Blynken-Design/STYLE.md). Theme tokens arrive as CSS
   variables set inline by base.html; everything here is base and never
   changes per theme. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-stack);
  font-size: 19px;
  line-height: 2.0;
  letter-spacing: 0.02em;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The shell's outer cap, and the widths rule (Ray, 2026-09-20, ADR-C-HA:
   "the pages only use about half of my screen"). Work pages - lists, forms,
   controls - fill the space between the navigation and the right column:
   .readingcol, .charcol and .homecol carry no cap of their own. What keeps a
   cap is prose, because a line much past ninety characters loses the eye on
   its way back: --prose-max, read by every block of running text. Single
   form fields keep a sensible width through --field-max. */
:root { --prose-max: 820px; --field-max: 760px; }
/* Laptop widths (Ray, D28, 2026-10-06; FT-185). The page's side padding, the
   gap between columns and the right-hand column shrink together as the window
   narrows, in a straight line between their full size (72px, 84px and 420px, at
   1900px wide and over - nothing changes there) and 40px, 40px and 300px at
   1280px, held at each end by clamp(). At 1280 the middle column of a page with
   a right column was 303px wide and the character editor's boxes 97px; it is
   about 575px now. One set of numbers: tune them here. The banner, the menu and
   the columns share --page-pad, so the wordmark stays over the left menu. */
:root {
  --page-pad: clamp(40px, 5.1613vw - 26.0645px, 72px);
  --col-gap: clamp(40px, 7.097vw - 50.84px, 84px);
  --id-col: clamp(300px, 19.355vw + 52.26px, 420px);
}
.page { max-width: 1900px; margin: 0 auto; }

/* Banner: the black wordmark left; on the right, the viewer's name with
   Sign out beneath when signed in, the one petrol Sign in button when not. */
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px var(--page-pad) 18px var(--page-pad);
}
.banner .wordmark { width: 230px; height: auto; display: block; }
/* Who is signed in, top right, with Sign out beneath (Ray, 2026-09-29). */
.whoami { text-align: right; line-height: 1.5; }
.whoami .whoname { font-size: 17px; font-weight: 600; }
.whoami a { font-size: 15px; }

/* Section menu. Active = 600 + petrol underline. */
.secmenu {
  display: flex;
  gap: 42px;
  padding: 12px var(--page-pad) 30px var(--page-pad);
  font-size: 15.5px;
}
.secmenu .item { display: flex; align-items: center; gap: 9px; }
.secmenu .item.active {
  font-weight: 600;
  border-bottom: 3px solid var(--highlight);
  padding-bottom: 3px;
}

/* Navigation column + work pane + optional image column. */
.columns { display: flex; gap: var(--col-gap); padding: 44px var(--page-pad) 120px var(--page-pad); }
.navcol {
  width: 230px;
  flex-shrink: 0;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  /* A name with no spaces breaks at the column's edge instead of running out
     over the page (FT-186). The name limit is 60 characters; one word of 60
     letters is 476px wide. */
  overflow-wrap: anywhere;
}
.pane { flex-grow: 1; min-width: 0; }
.imagecol { width: 280px; flex-shrink: 0; }

.navhead {
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 40px 0 6px 0;
}
.navhead.first { margin-top: 0; }
/* The current page / active realm or character in the navigation column. */
.navcurrent { font-weight: 600; color: var(--highlight); }
a.navcurrent { color: var(--highlight); }

/* Theme image box at the navigation column's foot (220 x 510). */
.themebox { margin-top: auto; padding-top: 72px; }
.themebox .panel {
  width: 220px;
  height: 510px;
  background: var(--panel);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.06em;
  overflow: hidden;
}
.themebox .panel img { max-width: 100%; max-height: 100%; }

/* Voice classes. */
.pagetitle { font-size: 38px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
/* A character's signature line, under its name (FT-22). */
.signatureline {
  margin-top: 6px;
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  max-width: var(--prose-max);
  overflow-wrap: anywhere;
}
.small { font-size: 16px; }
.italic { font-style: italic; }
.meta { font-size: 16px; font-style: italic; }
/* Pressable voice: petrol italic. */
.press { font-style: italic; color: var(--highlight); }
a.press { color: var(--highlight); }

/* Forms (STYLE.md "Forms"): half-tint fill, muted-highlight bottom rule. */
.label { font-size: 17px; margin-bottom: 4px; }
.field {
  background: var(--field);
  border: none;
  border-bottom: 1px solid var(--fieldrule);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 18px;
  line-height: 1.7;
  font-family: inherit;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.field:focus { outline: 1px solid var(--fieldrule); }
/* A field that cannot change right now - the Retreat-only fields of a live
   character (ADR-C-HQ), a running story's locked parts - reads as grey, not
   as a box that silently ignores typing. */
.field:disabled, [data-locked] .field { opacity: 0.45; cursor: not-allowed; }
/* A running story's reached milestones: sent with the form, not changeable. */
.field[readonly] { opacity: 0.45; }
/* Required-field marks and the save notice (problems #5 and #6, 2026-09-07). */
.req { color: var(--alert); font-weight: 700; }
.savenote { display: inline-block; font-size: 17px; font-weight: 600; padding: 8px 14px; border-left: 3px solid var(--alert); }
.savenote.good { border-left-color: #2f7d4f; }
/* Changes that save in place (FT-135, app.js): a refusal shows at the top of the
   section the person was working in, and a control that has been pressed waits.
   A part selector saves on its own, so its button is hidden while script runs. */
.livemsg { margin-bottom: 12px; }
.js-on [data-autosave-button] { display: none; }
.linkbutton:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
/* The pick list on the problem log form wears the field style too. */
select.field { appearance: auto; height: auto; cursor: pointer; }
.note { font-size: 16px; font-style: italic; margin-top: 4px; }
/* Text a moderator took down, shown beside the emptied field so the owner can
   see what was objected to (FT-83). Kept as written: line breaks stay. */
.removedbox { margin-top: 10px; max-width: var(--prose-max); }
.removedtext { white-space: pre-wrap; border-left: 3px solid var(--alert); padding-left: 12px; margin-top: 4px; line-height: 1.6; }

/* The page's one accent button. */
.btn {
  background: var(--highlight);
  color: #ffffff;
  font-size: 17px;
  padding: 9px 30px;
  border-radius: 3px;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
}
a.btn { color: #ffffff; }
a.btn:hover { text-decoration: none; }
.btn.compact { font-size: 16px; padding: 8px 26px; }
/* The second of two buttons (Enter retreat beside Pause): same shape, quieter. */
.btn.quiet { background: var(--bg); color: var(--highlight); border: 1px solid var(--fieldrule); }

/* A button that reads as a pressable text link (e.g. "Send it again"). */
.linkbutton {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
}
.linkbutton:hover { text-decoration: underline; }
/* A save that reads as a text link, as the owner page's actions do (ADR-C-LO;
   the editor's saves since ADR-C-LR, Ray 2026-10-11: "make the buttons link"). */
.linkbutton.savelink { font-weight: 600; font-size: 17px; }

/* Browse pages (B2): the landing map and the section lists. */
.landingmap { display: flex; gap: 96px; margin-top: 44px; }
.landingsection { flex: 1; min-width: 0; }
.secname { font-size: 26px; font-weight: 600; }
/* The settled group treatment: title above the line, the line binds the list. */
.seclist {
  border-left: 2px solid var(--highlight);
  padding-left: 30px;
  margin-top: 14px;
}
.realmrow { margin-top: 26px; }
.realmrow.first { margin-top: 0; }
.realmrow .realmname { font-size: 21px; font-weight: 500; }

.countsline { margin-top: 4px; }
.sortrow { margin: 14px 0 0 16px; }
.entrylist { margin-top: 26px; margin-left: 32px; max-width: 900px; }
.entry { margin-top: 34px; }
.entry.first { margin-top: 0; }
.entry .entryname { font-size: 20px; font-weight: 600; line-height: 1.35; }
.entry .entrydesc { font-size: 16px; line-height: 1.5; }
.morerow { margin: 40px 0 0 32px; }
.proposalshead { margin-top: 88px; }

/* Navigation column extras: the state filter and the search box. */
.navsub { margin-left: 16px; font-size: 16px; }
.navsearch { margin-top: 40px; }
/* A search box says it is one: the field and its button on one line. */
.navsearch .searchrow { display: flex; gap: 8px; align-items: center; }
.navsearch .searchrow .field { flex: 1 1 auto; min-width: 0; }
.navsearch .searchrow .btn { flex: 0 0 auto; }

/* Right column rows (Pinned, From the shelves) — indented 16px. */
.siderow { margin-top: 22px; margin-left: 16px; }
.siderow.first { margin-top: 14px; }
.siderow .sidename { font-size: 20px; font-weight: 500; }
.sidemore { margin: 18px 0 0 16px; }
.shelvescaption { line-height: 1.4; margin-top: -4px; }

/* Realm page (B3, arrangement B). */
.readingcol { max-width: none; }
.crumbs { font-size: 16px; margin-bottom: 26px; }
.navquest { font-weight: 600; font-size: 19px; }
.epigraph { margin-top: 44px; font-size: 21px; font-style: italic; line-height: 1.9; }
.factsgrid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
}
.factlabel { margin: 0; display: block; }
.paneblock { margin-top: 88px; }
.threadrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  gap: 20px;
}
.threadrow.tight { margin-bottom: 12px; }
.subrealm { margin-top: 56px; }
.subrealm.first { margin-top: 10px; }
.subrealm.nested { margin-top: 22px; }
.subrealmname { font-size: 22px; font-weight: 600; }
.subrealm.nested .subrealmname { font-size: 20px; }
.subthreads { margin-top: 12px; margin-left: 32px; }
.subrealm.nested .subthreads { margin-top: 8px; }

/* Image column pieces. */
.imagebox {
  width: 280px;
  height: 210px;
  background: var(--tint);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
  box-sizing: border-box;
}
.imagebox .imgname {
  font-size: 32px;
  font-style: italic;
  color: var(--highlight);
  line-height: 1.2;
}
.byline { font-style: italic; font-size: 21px; margin-top: 12px; }
.actions { margin-top: 40px; }
.actions div, .actions form { margin-top: 6px; }
.actions > :first-child { margin-top: 0; }

/* Thread page (B4). Posts separated by space alone, no rules. */
.storysofar { margin-top: 72px; }
.summarybody { font-size: 18px; }
.post { margin-top: 88px; }
.post.marked { display: flex; gap: 22px; }
.postbody { flex-grow: 1; min-width: 0; }
.passage { white-space: pre-line; }
.post:not(.marked) .passage { line-height: 2.05; }
.mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--tint);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--highlight);
  margin-top: 6px;
}
.postfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 20px;
}
.react { font-size: 16px; font-style: italic; font-weight: 600; color: var(--highlight); }
button.react.mine { font-weight: 600; text-decoration: underline; }
.reactform { display: inline; }
.pollblock { margin-top: 16px; }
.polloption { display: flex; gap: 14px; align-items: baseline; }
.threadfoot { margin-top: 96px; }
.summarytier { margin-top: 26px; }
.summarytier summary { cursor: pointer; }

/* Character pages (Batch D): 560-600px reading column, 360px identity. */
.charcol { max-width: none; }
.idcol { width: var(--id-col); flex-shrink: 0; }
.idbox {
  width: 100%;
  height: 250px;
  background: var(--tint);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
  box-sizing: border-box;
}
.idbox .imgname {
  font-size: 32px;
  font-style: italic;
  color: var(--highlight);
  line-height: 1.2;
  /* The picture slot shows the name; one long word stays inside it (FT-186). */
  overflow-wrap: anywhere;
  min-width: 0;
}
.moodcaption { margin-top: 20px; font-size: 19px; line-height: 1.7; }
.idtext { margin-left: 16px; font-size: 17px; line-height: 1.7; white-space: pre-line; }
/* One-line-looking boxes that still take a line break (Ray, 2026-09-15):
   Enter sends, Shift+Enter starts a new line; the box grows as it fills. */
textarea.entersend { resize: none; overflow: hidden; line-height: 1.45; }
.pagepost { margin-top: 64px; white-space: pre-line; max-width: var(--prose-max); }
.pagepost.first { margin-top: 40px; }
.journalentry { margin-top: 64px; max-width: var(--prose-max); }

/* Owner home (D1): center column + the chat panel. */
.homecol { max-width: none; }
.chatpanel { background: var(--panel); border-radius: 4px; margin-top: 6px; }
.chatlog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 8px 16px;
  font-size: 16px;
  line-height: 1.6;
  min-height: 430px;
}
.chatrow { display: flex; }
.chatrow.mine { justify-content: flex-end; }
.chatrow.theirs { justify-content: flex-start; }
/* No bubbles (Ray, 2026-09-20): a thin highlight rule marks who is speaking.
   The keeper's words sit right, rule on the right; the character's sit left,
   rule on the left. The class is still "bubble"; only the look changed. */
.chatrow .bubble { max-width: 85%; padding: 2px 14px; }
.chatrow.mine .bubble { border-right: 2px solid var(--highlight); text-align: right; }
.chatrow.theirs .bubble { border-left: 2px solid var(--highlight); text-align: left; }
.chatmeta { font-size: 13px; font-style: italic; }
.chatsend {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px 16px 16px;
}

/* Character Directory (D4). */
.alphabetrow { margin-top: 26px; letter-spacing: 0.08em; }
.dirlist { margin-top: 40px; }
.dirrow {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  /* 26px, was 40px (Ray, 2026-09-20: the directory is getting too big). */
  margin-top: 26px;
}
.dirrow.first { margin-top: 0; }
.dirinterests { margin-top: 40px; line-height: 2.1; }

/* My Characters: Latest postings (Ray, 2026-09-20). One line of who, where
   and when beside the monogram, then three lines of the post. */
.postings { margin-top: 8px; }
.posting { display: block; margin-top: 24px; color: inherit; text-decoration: none; }
.posting:first-child { margin-top: 14px; }
.postinghead { display: flex; gap: 12px; align-items: center; }
.mark.small { width: 32px; height: 32px; font-size: 16px; margin-top: 0; }
.postingline { font-size: 15px; line-height: 1.35; min-width: 0; }
.postingname { font-weight: 600; }
.postingbody {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.posting:hover .postingname { text-decoration: underline; }

/* Character editor (D2): sliders and the isolated delete. */
.sliderhead { display: flex; align-items: center; gap: 20px; }
.sliderrow { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.slidertrack { position: relative; width: 260px; height: 14px; flex-shrink: 0; }
.slidertrack .rail {
  position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: #d9d9d9;
}
.slidertrack .tick {
  position: absolute; top: 3px; width: 1px; height: 8px; background: #d9d9d9;
}
.slidertrack .dash {
  position: absolute; top: 1px; width: 2px; height: 12px;
  background: var(--fieldrule); transform: translateX(-50%);
}
.slidertrack .dot {
  position: absolute; top: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--highlight); transform: translateX(-50%);
}
.sliderbox {
  width: 52px; padding: 2px 10px; font-size: 16px; text-align: center;
}
.loreentry { margin-top: 56px; }
.loreentry.first { margin-top: 40px; }
.deletezone { margin-top: 120px; }

/* The narrow signed-out pages (sign in, create account, reset). */
.authwrap { max-width: 440px; padding: 44px var(--page-pad) 120px var(--page-pad); }
.authwrap.wide { max-width: 520px; }
.formcol {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 44px;
}

/* A field and its button on one line (Settings: where Blynken opens). */
.fieldrow { display: flex; gap: 14px; align-items: center; }

/* Editor form rows: bold label left of the box, the cap under it (Ray,
   2026-08-30). The label column is fixed so every field lines up. */
.formrow { display: flex; gap: 24px; align-items: flex-start; }
.formlabel {
  width: 150px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 600;
  padding-top: 10px;
}
.formfield { flex-grow: 1; min-width: 0; max-width: var(--prose-max); }
.formfield.narrow { max-width: 340px; }
/* A numbered entry (example posts): the number sits beside its box. */
.numbered { display: flex; gap: 14px; align-items: flex-start; }
.numbered.more { margin-top: 14px; }
.numbered .numbermark {
  width: 22px;
  flex-shrink: 0;
  padding-top: 10px;
  font-size: 16px;
  font-style: italic;
  color: var(--highlight);
  text-align: right;
}
.numberedbody { flex-grow: 1; min-width: 0; }
/* Live field counter, tucked close under its box (Ray, 2026-08-30) — the
   default note gap left it floating between the field above and the label
   below. Over the cap turns the theme's one alert colour. */
.formfield .note { margin-top: 0; line-height: 1.5; }
.counter.over { color: var(--alert); }

/* Tile grids for quirks and interests (ADR-C-FW). The numbered boxes are
   the real form; app.js folds them into two columns of tiles - a written
   entry shows the start of its sentence, pressing it opens the box across
   the row, and one dashed tile adds the next. Without JavaScript the boxes
   stand as they are. */
[hidden] { display: none !important; }
.tiles.enhanced { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 14px; }
.tiles.enhanced .numbered { grid-column: 1 / -1; margin-top: 0; }
.tile {
  background: var(--field);
  border: none;
  border-bottom: 1px solid var(--fieldrule);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.tile:focus-visible { outline: 1px solid var(--fieldrule); }
.tile .tilenum { font-size: 16px; font-style: italic; color: var(--highlight); flex-shrink: 0; }
.tile .tilepeek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tile.add { background: transparent; border-bottom: 1px dashed var(--fieldrule); color: var(--highlight); font-style: italic; font-weight: 600; }
.tilefoot { display: flex; gap: 22px; font-size: 16px; line-height: 1.5; }
.tilefoot button.press {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; font-style: italic; font-weight: 600;
  color: var(--highlight); cursor: pointer;
}
/* Example posts: the add line under the written boxes (ADR-C-FW). */
.entries.enhanced .numbered[hidden] + .numbered.more { margin-top: 0; }
.addline { margin-top: 14px; padding-left: 36px; font-size: 17px; }
.addline button.press {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; font-style: italic; font-weight: 600;
  color: var(--highlight); cursor: pointer;
}

/* The shell's "no API key" notice at the top of the navigation column
   (ADR-C-FZ): the alert rule of a save notice, small, with the way in. */
.keynotice { font-size: 16px; line-height: 1.6; font-weight: 600; padding: 6px 0 6px 12px; border-left: 3px solid var(--alert); margin-bottom: 30px; }
.keynotice .press { display: block; margin-top: 4px; font-weight: 600; }

/* Notices (ADR-C-JT; Ray, 2026-10-06): the header link with its number, and the
   Notices page of the control panel. One block, so it is easy to find and to
   change. Unread is told by weight AND by a hidden word, never by colour alone. */
/* One line, so a narrow header never parts the word from its number. */
.whoami .noticeslink { display: block; white-space: nowrap; }
.noticecount { font-style: normal; font-weight: 700; }
/* Read by a screen reader, not drawn. */
.visuallyhidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.noticelist { margin-top: 36px; max-width: var(--prose-max); }
.noticerow { margin-top: 30px; }
.noticerow:first-child { margin-top: 0; }
.noticerow .noticewhen { font-size: 15px; }
.noticerow .noticetext { margin-top: 2px; line-height: 1.7; overflow-wrap: anywhere; }
.noticerow.unread .noticetext { font-weight: 700; }
.noticeacts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 16px; }
.noticeacts form { margin: 0; }

/* The Character Creator (Character Creator spec section 3; provisional layout
   until the design pass). A marketplace row carries the rating as its mark. */
.creatorrow { display: flex; gap: 20px; margin-top: 26px; align-items: center; }
.creatorrating {
  flex-shrink: 0; min-width: 76px; text-align: center; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px;
  border: 1px solid var(--fieldrule); border-radius: 4px;
}
.creatorrating.mature { font-weight: 700; border-color: var(--alert); }
.creatorprompt, .sheetjson {
  white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.55;
  padding: 14px 16px; border: 1px solid var(--fieldrule); border-radius: 4px;
  max-height: 60vh; overflow: auto; margin-top: 12px;
}
/* The Creator's sheet as labelled fields (ADR-C-GL). */
.sheetfields {
  font-size: 15px; line-height: 1.55; word-break: break-word;
  padding: 14px 16px; border: 1px solid var(--fieldrule); border-radius: 4px;
  max-height: 60vh; overflow: auto; margin-top: 12px;
}
.sheetfield + .sheetfield { margin-top: 14px; }
.sheetlabel { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.sheetvalue { white-space: pre-wrap; }
.sheetlist { margin: 2px 0 0 18px; padding: 0; }
.sheetlist li + li { margin-top: 2px; }
.sheetentry { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--fieldrule); }
.sheetentry + .sheetentry { margin-top: 10px; }
.sheetrow + .sheetrow { margin-top: 2px; }
.sheetsub { font-style: italic; margin-right: 8px; }
.sheetpanel .note.good, .note.good { border-left: 3px solid var(--highlight); padding-left: 10px; }
.creatorbuild .chatlog { max-height: 60vh; overflow: auto; }

/* The Character Creator as its own module (Ray, 2026-09-20): a tinted head
   across the whole page in the site menu's place, pages that use the pane's
   full width instead of the 600px reading column, and the way to the
   generators standing out at the top of its navigation. */
.modulehead {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 22px var(--page-pad);
  background: var(--tint);
  border-bottom: 3px solid var(--highlight);
}
.modulehead .modulename {
  font-family: var(--title-stack);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
}
.modulehead .modulename:hover { text-decoration: none; }
.modulehead .moduleline { font-size: 16px; font-style: italic; }
/* The "edit" link under a realm's name in the Story Editor navigation. */
.navedit { margin: -8px 0 4px 16px; line-height: 1.4; }
.navedit.deep { margin-left: 32px; }
.creatorwide { max-width: none; }
.creatorwide .creatorprompt { max-width: 900px; }
.creatorform { max-width: 1000px; }
.creatorlead { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.creatorlead a { color: var(--highlight); }

/* --- The Ledger (ADR-C-GW; Ray's Claude Design handoff, 2026-09-19) --------
   The Grounds read as ruled registers: a heavy rule opens a register, hairline
   rules part its rows, and columns align on a grid. Hierarchy by weight, size,
   capitals and italics; the highlight only on "today", sort and overflow
   links and the lowercase utility links. No right image column on these
   pages. Values are the handoff's. */
.ledgercol { max-width: none; }
.ledgercol .crumbs { margin-bottom: 18px; }
.ledgerstate { font-size: 16px; font-style: italic; margin-top: 8px; }
.ledgerdesc { font-size: 20px; font-style: italic; margin-top: 22px; line-height: 1.8; }
.reghead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 52px; gap: 24px;
}
.reghead .navhead { margin-top: 0; }
.reghead .regnote { font-size: 16px; font-style: italic; }
.regsort { font-size: 16px; }
.regsort .on { font-weight: 600; }
.regsort a { font-style: italic; color: var(--highlight); }
.register { border-top: 2px solid #111111; margin-top: 8px; }
.register.light { border-top: 1px solid #d8d5d0; }
.regrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 240px;
  column-gap: 24px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid #e3e0db;
}
.regrow.wide { grid-template-columns: minmax(0, 1fr) 150px 240px; padding: 12px 0; }
/* ADR-C-HO: a sub-realm sits under its realm, indented a step per level,
   with the house's thin rule down its left side in place of a box. */
.regrow.sub {
  margin-left: calc(var(--depth, 1) * 28px); padding-left: 16px;
  border-left: 2px solid #d8d5d0;
}
.regrow.cols {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; padding: 8px 0;
}
.regrow .num { text-align: right; font-size: 16px; }
.regrow .when { font-size: 16px; }
.regrow .title { font-weight: 500; }
/* Unread (ADR-C-HE): weight says it, the word confirms it. Bold = "yours to
   look at" in the house weight semantics; the word is accent text, so bold
   and never small. */
.regrow .title.unread a { font-weight: 700; }
.newtag { font-size: 15px; font-style: italic; font-weight: 600; color: var(--highlight); margin-left: 6px; }
/* ADR-C-HO (Ray, 2026-09-26): one size down from 20px. */
.regrow .name { font-size: 18px; font-weight: 600; }
.regrow .under { font-size: 15px; font-style: italic; line-height: 1.6; }
.today { color: var(--highlight); font-weight: 600; }
.waitrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: 17px; padding: 8px 0; border-bottom: 1px solid #eceae6;
}
.waitrow .by { font-size: 15px; font-style: italic; white-space: nowrap; }
.regmore { margin-top: 10px; font-size: 16px; }
/* ADR-C-HO: the landing's title is the three jump links. */
.pagetitle.jumps { font-size: 30px; }
.pagetitle.jumps a { color: var(--highlight); }
.reghead[id] { scroll-margin-top: 24px; }
.regmore a { font-style: italic; font-weight: 600; color: var(--highlight); }
.navutil { font-size: 16px; font-style: italic; }
.navutil a, .navutil .linkbutton { color: var(--highlight); font-style: italic; font-size: 16px; }
.navutil form { display: inline; }
.navindent { margin-left: 16px; }
.navpart { font-size: 16px; font-style: italic; }

/* The Ledger conversation page (handoff 4a). */
.ledgercol.conversation { max-width: 960px; }
.register.posts { margin-top: 24px; }
.lpost { padding: 12px 0; border-bottom: 1px solid #e3e0db; }
.lpost.reply { padding-left: 56px; }
.lposthead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.lname { font-size: 16px; font-weight: 600; }
/* ADR-C-HY — unread posts in a conversation, for a signed-in reader. The
   page's `web.unread_post_marker` picks one treatment: bold_name makes the
   names of posts already read plain and the names of unread posts bold;
   grey_read fades posts already read. */
.marker-bold_name .lpost.seen .lname { font-weight: 400; }
.marker-bold_name .lpost.unseen .lname { font-weight: 700; }
.marker-grey_read .lpost.seen { opacity: var(--read-post-opacity, 0.6); }
/* ADR-C-HZ — the line above the first unread post, and "Mark all as read". */
.unreadline { display: flex; align-items: center; gap: 14px; margin: 28px 0 10px;
  color: var(--highlight); font-style: italic; font-size: 15px; font-weight: 600;
  scroll-margin-top: 24px; }
.unreadline::before, .unreadline::after { content: ""; flex: 1; border-top: 2px solid var(--highlight); }
.reghead .markread { font-size: 16px; }
.ltag { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-left: 6px; }
/* The monogram column: the 46px mark, the mood word under it. */
.lpost.marked { display: flex; gap: 18px; align-items: flex-start; }
.lmarkcol { width: 78px; flex-shrink: 0; text-align: center; }
.lmarkcol .mark { margin: 4px auto 0 auto; text-decoration: none; }
.lmain { flex: 1 1 auto; min-width: 0; }
.lwhen { font-size: 15px; font-style: italic; white-space: nowrap; }
.lbody { margin-top: 0; line-height: 1.65; max-width: var(--prose-max); white-space: pre-wrap; }
.lpost.narrator .lbody { font-style: italic; }
/* Ray, 2026-09-26: the post's byline - signature left, mood word right, at
   the reactions' size. */
.lsig { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 10px; font-size: 16px; font-style: italic; }
.lsigmood { text-align: right; white-space: nowrap; }
.lfoot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 15px; font-style: italic; }
.lfoot a { color: var(--highlight); }
.lfold { padding: 12px 0; border-bottom: 1px solid #e3e0db; font-size: 16px; font-style: italic; }
.lfold a { color: var(--highlight); font-weight: 600; }

/* The Ledger on the Grounds landing and the section pages (handoff 2a). */
.regrow.pair { grid-template-columns: minmax(0, 1fr) 340px; padding: 12px 0; }
.register.entrylist { margin-top: 18px; }
.groundsmeta { font-size: 16px; font-style: italic; margin-top: 8px; }
.groundsmeta a { color: var(--highlight); font-weight: 600; font-style: italic; }
/* A register row's own words stay on one line (handoff 2a: "one-line
   description"); the whole text is one hover away and on the realm's page. */
.regrow .under.oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The Characters navigation and the character home page (Ray, 2026-09-20,
   ADR-C-GZ). The ways to make a character lead the panel; posts and the
   journal sit in their own scrolling boxes so the page keeps its shape; the
   private chat scrolls inside its panel and opens on its latest words. */
.navmake { font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.navmake a { color: var(--highlight); }
.scrollbox {
  max-height: 560px;
  overflow-y: auto;
  padding: 18px 22px;
  background: var(--panel);
  border-radius: 4px;
}
.scrollbox .pagepost.first { margin-top: 0; }
.scrollbox .pagepost { margin-top: 40px; }
.chatlog.scrolls { max-height: 430px; overflow-y: auto; }

/* Widths (ADR-C-HA): running text and lone form fields inside the now
   uncapped work columns. */
.summarybody, .epigraph, .note, .countsline { max-width: var(--prose-max); }
.readingcol .field, .charcol .field, .homecol .field { max-width: var(--field-max); }
.readingcol textarea.field, .charcol textarea.field, .homecol textarea.field { max-width: var(--prose-max); }
.scrollbox { max-width: calc(var(--prose-max) + 44px); box-sizing: border-box; }

/* The character pages redrawn (ADR-C-LO, Ray 2026-10-10; Blynken-Design
   STYLE.md "Character pages"). Boxes and separation lines are allowed here,
   used judiciously, and the type is smaller: "I like the larger size, we just
   can't afford it." The petrol line runs down the side of a block of text;
   labels, dates and titles line up with the text, not with the line. */
.charcard { background: var(--panel); border: 1px solid #d8d5d0; border-radius: 4px;
  padding: 22px 24px; display: flex; gap: 26px; align-items: flex-start; }
.cardpic { width: 150px; height: 150px; flex-shrink: 0; background: var(--tint); border-radius: 4px;
  display: flex; align-items: flex-end; padding: 10px 12px; box-sizing: border-box;
  color: var(--highlight); font-style: italic; font-size: 19px; line-height: 1.2;
  overflow: hidden; overflow-wrap: anywhere; }
.charcard.slim .cardpic { width: 96px; height: 96px; font-size: 15px; }
.cardwho { min-width: 0; flex: 1; }
.cardname { font-size: 30px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.charcard.slim .cardname { font-size: 28px; }
/* Mood words arrive lower case; the capital is a style (Ray: "it feels odd
   not being capitalized"). */
.cardmood { font-size: 19px; font-weight: 600; line-height: 1.35; text-transform: capitalize; }
.cardfelt { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.cardsig { font-size: 18px; font-style: italic; line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.cardstats { font-size: 15px; font-style: italic; line-height: 1.55; margin-top: 10px; }
.cardlinks { font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
.cardlinks a { color: var(--highlight); font-style: italic; font-weight: 600; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 44px; }
.sectitle { font-size: 24px; font-weight: 600; line-height: 1.3; }
.secnote { font-size: 15px; font-style: italic; line-height: 1.3; }
.ppostlist { margin-top: 18px; }
.ppost { padding: 7px 0 26px 0; border-bottom: 1px solid #e3e0db; }
.phead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: 15px; font-style: italic; line-height: 1.5; padding-left: 20px; }
.phead .pmood { text-transform: capitalize; }
.pmain { border-left: 2px solid var(--highlight); padding-left: 18px; margin-top: 6px; }
.pbody { font-size: 18px; line-height: 1.6; max-width: var(--prose-max); white-space: pre-line; overflow-wrap: anywhere; }
.psig { font-size: 15px; font-style: italic; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; }
.pmore { margin-top: 12px; font-size: 15.5px; padding-left: 20px; }
.pmore a { color: var(--highlight); font-style: italic; font-weight: 600; }
.panelbox { background: var(--panel); border: 1px solid #d8d5d0; border-radius: 4px; padding: 16px 22px 20px 22px; }
.panelbox + .panelbox { margin-top: 22px; }
.pfield { margin-top: 18px; }
.flabel { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  line-height: 1.6; margin-bottom: 4px; padding-left: 16px; }
.ftext { font-size: 16px; line-height: 1.55; border-left: 2px solid var(--highlight); padding-left: 14px;
  white-space: pre-line; overflow-wrap: anywhere; }
/* The Profile box cuts each field at web.profile_clip_lines lines; the full
   text is on the full description page. */
.ftext.clip { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clip-lines, 5); line-clamp: var(--clip-lines, 5); overflow: hidden; }
.pfoot { margin-top: 18px; font-size: 16px; line-height: 1.6; padding-left: 16px; }
.pfoot a { color: var(--highlight); font-style: italic; font-weight: 600; }
.cardutil { font-size: 15px; font-style: italic; line-height: 1.9; margin-top: 18px; }
.cardutil a { color: var(--highlight); }
.desclist { margin-top: 40px; }
.descfield + .descfield { margin-top: 30px; }
.desclabel { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  line-height: 1.6; margin-bottom: 6px; padding-left: 20px; }
.desctext { font-size: 18px; line-height: 1.6; max-width: var(--prose-max); white-space: pre-line;
  border-left: 2px solid var(--highlight); padding-left: 18px; overflow-wrap: anywhere; }
.listblock + .listblock { margin-top: 22px; }
.listtitle { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  line-height: 1.6; padding-left: 16px; }
.plainlist { font-size: 16.5px; line-height: 1.85; margin-top: 4px; border-left: 2px solid var(--highlight);
  padding-left: 14px; overflow-wrap: anywhere; }
.plainlist .small { font-size: 14.5px; font-style: italic; }
/* The owner's own page (ADR-C-LO, board O). */
.ownerrow { display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  flex-wrap: wrap; margin-top: 14px; font-size: 16px; line-height: 1.6; }
.owneracts { white-space: nowrap; }
.owneracts a, .owneracts .linkbutton { color: var(--highlight); font-style: italic; font-weight: 600; font-size: 16px; }
.owneracts .sep, .moodbtns .sep { margin: 0 8px; }
.ownerstatus { font-size: 15px; font-style: italic; }
.heldline { margin-top: 6px; font-size: 16px; line-height: 1.6; }
.heldline a { font-weight: 600; }
.heldline span { font-size: 15px; font-style: italic; }
/* ADR-C-MS: the Models on Blynken list on the API key page. */
.modeltable { border-collapse: collapse; font-size: 16px; }
.modeltable th { text-align: left; font-weight: 600; padding: 6px 18px 8px 0; border-bottom: 1px solid var(--fieldrule); white-space: nowrap; }
.modeltable td { padding: 7px 18px 7px 0; border-bottom: 1px solid var(--fieldrule); vertical-align: top; }
.modeltable td:first-child { word-break: break-all; }
.modelcard { margin-top: 6px; }
.jlist { margin-top: 20px; }
.jitem + .jitem { margin-top: 28px; }
.jitem .phead { padding-left: 20px; }
.jitem.mine { display: flex; flex-direction: column; align-items: flex-end; }
.jitem.mine .phead { padding-left: 0; padding-right: 20px; justify-content: flex-end; }
.jmain { margin-top: 6px; }
.jitem.theirs .jmain { border-left: 2px solid var(--highlight); padding-left: 18px; max-width: var(--prose-max); }
.jitem.mine .jmain { border-right: 2px solid var(--highlight); padding-right: 18px; text-align: right; max-width: 72%; }
.jbody { font-size: 18px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.jwait { font-size: 14.5px; font-style: italic; line-height: 1.5; margin-top: 6px; }
.jwait .linkbutton { color: var(--highlight); font-style: italic; font-size: 14.5px; }
.talkfoot { margin-top: 34px; }
.replybox { display: flex; gap: 14px; align-items: flex-end; }
.replybox textarea { flex: 1; min-width: 0; font-size: 17px; line-height: 1.5; }
.replysend { color: var(--highlight); font-style: italic; font-weight: 600; font-size: 17px; padding-bottom: 8px; }
.replyfoot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 8px;
  font-size: 15px; font-style: italic; line-height: 1.6; }
.replyfoot label { font-style: normal; }
.replyfoot .linkbutton { color: var(--highlight); font-style: italic; font-weight: 600; font-size: 15px; margin-left: 10px; }
/* ADR-C-LX (Ray, 2026-10-12): the realm page's line of links under the
   description - "Realm details" and "Enroll a character" - in the highlight,
   bold italic, never small (ADR-C-LU: the link stands out). Enroll opens a
   list floating over the posts: a tint panel (STYLE.md: tint fill, radius 4,
   no border), the names plain text that take the highlight on hover. */
.realmlinks { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 34px; }
.realmlinks a, .realmlinks summary { color: var(--highlight); font-size: 19px; font-weight: 600; font-style: italic; }
.realmlinks a:hover, .enrolpick > summary:hover { text-decoration: underline; }
/* ADR-C-MO: the link down to the page's Documents list, at the line's right end. */
.realmlinks .tosection { margin-left: auto; }
/* ADR-C-MQ: the realm recap, folded shut above the conversations. */
.recapbox { margin-top: 26px; }
.recapbox > summary { cursor: pointer; color: var(--highlight); font-size: 19px; font-weight: 600; font-style: italic; }
.recapitem { margin-top: 18px; }
.recaptext { white-space: pre-line; margin-top: 6px; }
.enrolpick { position: relative; }
.enrolpick > summary { list-style: none; cursor: pointer; }
.enrolpick > summary::-webkit-details-marker { display: none; }
.enrollist { position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; min-width: 280px; max-width: calc(100vw - 48px); max-height: 360px; overflow-y: auto; box-sizing: border-box; background: var(--tint); border-radius: 4px; padding: 16px 24px 18px; }
.enrolhint { font-size: 15px; font-style: italic; margin-bottom: 8px; }
.enrolname { display: block; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 19px; color: var(--ink); cursor: pointer; text-align: left; }
.enrolname:hover, .enrolname:focus-visible { color: var(--highlight); text-decoration: underline; }
/* The Realm details page: the facts open it, so they sit closer to the title. */
.factsgrid.detailsfacts { margin-top: 30px; }
.enr { margin-top: 12px; }
.enrname { font-size: 17px; font-weight: 600; line-height: 1.5; }
.enrline { font-size: 15px; font-style: italic; line-height: 1.5; }
.enrline a, .enrline .linkbutton { color: var(--highlight); font-style: italic; font-size: 15px; }
/* The Steering box carries no highlight lines (Ray: "it doesn't help and
   takes up too much space"); its contents line up with the labels. */
.steertext { padding-left: 16px; }
.moodbtns { font-size: 16.5px; line-height: 1.6; }
.moodbtns .linkbutton { color: var(--highlight); font-style: italic; font-size: 16.5px; }
.moodbtns .linkbutton.chosen { font-weight: 600; }
.whisperentry { display: flex; gap: 12px; align-items: center; padding-left: 16px; }
.whisperentry textarea { flex: 1; min-width: 0; font-size: 15.5px; }
.whisperentry .linkbutton { color: var(--highlight); font-weight: 600; font-size: 16px; flex-shrink: 0; }
.whisperlist { margin-top: 10px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.whisper + .whisper { margin-top: 10px; }
.whisperlist .linkbutton, .gift .linkbutton { color: var(--highlight); font-style: italic; font-size: 15px; }
.gift { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.steerlinks { margin-top: 18px; font-size: 16px; line-height: 1.9; padding-left: 16px; }
.steerlinks a { color: var(--highlight); font-style: italic; font-weight: 600; }

/* Blynken 2.0 member pages (Phase 1): the character list, the deck editor
   (layout A, one long page), the model page, the guided help. */
.memberwrap { max-width: 1100px; padding: 44px var(--page-pad) 120px var(--page-pad); }
.narrowcol { max-width: 560px; }
.narrowcol.widecol { max-width: 760px; }
.crumbs { font-size: 16px; margin-bottom: 6px; }
.charlist { margin-top: 24px; }
.charrow { display: flex; gap: 18px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #e4e1dc; }
.charname { font-size: 20px; font-weight: 600; }
.choicepair { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.deckhead { padding: 44px var(--page-pad) 0 var(--page-pad); }
.deckstatus { font-size: 16px; font-style: italic; }
.readyline { margin-top: 14px; font-size: 17px; }
.readyline b { font-weight: 600; }
form.inline { display: inline; }
.deckcolumns { padding-top: 28px; }
.deckcolumns .navcol a.navsub { display: block; margin: 2px 0 2px 16px; }
.decksection { margin: 0 0 56px 0; max-width: 820px; }
.decksection .label { margin-top: 16px; }
.fieldrow2 { display: flex; gap: 24px; }
.fieldrow2 > div { flex: 1; min-width: 0; }
.subhead { font-size: 18px; font-weight: 600; margin: 28px 0 0 0; }
.field.example { margin-top: 8px; }
.heldnote { color: var(--alert); font-style: italic; font-size: 16px; margin: 6px 0; }
.slidername { width: 170px; font-size: 16px; }
.narrowfield { max-width: 260px; }
.savebar { margin: 0 0 64px 0; }
.goalrow { border-left: 2px solid var(--highlight); padding: 2px 0 2px 16px; margin: 0 0 16px 0; }
.goalrow.ended { border-left-color: #d8d5d0; }
.goalform { margin-top: 22px; }
.endpick { border: none; padding: 0; margin: 6px 0 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 16px; }
.endpick legend { float: left; margin-right: 6px; }
.datefield { width: auto; padding: 4px 10px; font-size: 16px; }
.samplepost { margin-top: 10px; padding: 14px 18px; background: #fff; border-left: 2px solid var(--highlight); white-space: pre-wrap; }
@media (max-width: 760px) {
  .deckcolumns { flex-direction: column; }
  .fieldrow2 { flex-direction: column; gap: 0; }
  .slidertrack { width: 120px; }
}