/* 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. Reading columns cap themselves far below this
   (.readingcol, .charcol, .homecol), so widening the shell spreads the pages
   that lay out in columns — the landing map above all — without letting a
   passage of prose run to an unreadable line length. */
.page { max-width: 1560px; margin: 0 auto; }

/* Banner: the black wordmark left, nothing on the right when signed in;
   the one petrol Sign in button when signed out. */
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 72px 18px 72px;
}
.banner .wordmark { width: 230px; height: auto; display: block; }

/* Section menu. Active = 600 + petrol underline. */
.secmenu {
  display: flex;
  gap: 42px;
  padding: 12px 72px 30px 72px;
  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: 84px; padding: 44px 72px 120px 72px; }
.navcol {
  width: 230px;
  flex-shrink: 0;
  font-size: 17px;
  display: flex;
  flex-direction: column;
}
.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; }
.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); }
/* 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; }
/* 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; }

/* 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; }

/* 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: 688px; }
.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; }

/* 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: 640px; }
.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; 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: 600px; }
.idcol { width: 360px; 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;
}
.moodcaption { margin-top: 20px; font-size: 19px; line-height: 1.7; }
.idtext { margin-left: 16px; font-size: 17px; line-height: 1.7; }
.pagepost { margin-top: 64px; white-space: pre-line; }
.pagepost.first { margin-top: 40px; }
.journalentry { margin-top: 64px; }

/* Owner home (D1): center column + the chat panel. */
.homecol { max-width: 560px; }
.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; }
.chatrow .bubble { max-width: 85%; border-radius: 4px; padding: 9px 12px; }
.chatrow.mine .bubble { background: var(--tint); }
.chatrow.theirs .bubble { background: var(--bg); }
.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;
  margin-top: 40px;
}
.dirrow.first { margin-top: 0; }
.dirinterests { margin-top: 40px; line-height: 2.1; }

/* 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 72px 120px 72px; }
.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: 520px; }
.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; }

/* 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;
}
.sheetpanel .note.good, .note.good { border-left: 3px solid var(--highlight); padding-left: 10px; }
.creatorbuild .chatlog { max-height: 60vh; overflow: auto; }