/* house.css - THE LIVING HOUSE SHARED LAYER
 *
 *   One house, many rooms. This file is the house: the quiet top bar every room
 *   wears, and the ground every room stands on. A room includes this plus its own
 *   stylesheet, and nothing else.
 *
 * THE GROUND LIVES HERE AND NOWHERE ELSE.
 *   Change a value in THE GROUNDS below and every wired room follows in one motion.
 *   That is the whole reason this file exists rather than a bar pasted into twelve
 *   pages. The prototypes carried the same night palette copied into three separate
 *   files; three copies of one answer is how a house drifts.
 *
 * CHOOSING A GROUND
 *   Default is `lifted`. To see any room in another ground, add ?ground=<name> to
 *   its URL - no UI, nothing persisted, nothing a visitor can reach. To change the
 *   whole house, edit DEFAULT_GROUND in house.js. One word.
 *
 *   lifted   Jane's own near-black, raised to the lightness where her low-key
 *            photographs stop dissolving into the page. The chosen ground,
 *            2026-07-28. Neutral, so a wall of other people's palettes and her
 *            own warm pictures both sit on it without being tinted.
 *   warm     the same lightness, nudged warm. Inside-the-house feeling.
 *   navy     the palette Codex designed for the Living House prototypes, and the
 *            one the homepage uses. Kept because the homepage is built on it and
 *            because Jane may still want it everywhere.
 *   deep     the site's original near-black, for comparison. Cards lose their
 *            edges against her photographs on this one - that is the fault the
 *            lifted ground was made to fix. Kept so the fix stays checkable.
 */

/* ---------------------------------------------------------------- THE GROUNDS */

body.night,
body[data-theme="night"] {
  /* the original - Codex's prototype blue (#17233a), Jane's call at 2:50am on go-live
     night: "the original makes it pop." Bluer and one step lighter than the navy that
     shipped at midnight; the paper continues the night sky, so the seam between her
     photographs and the house nearly disappears. navy (#111827) and lifted both remain
     as named grounds - ?ground=navy, ?ground=lifted. */
  --paper: #17233a;
  --paper2: #101a2c;
  --card: #22304a;
  --plate: #283753;

  /* THE INK BELONGS TO THE GROUND, and until 2026-07-28 the DEFAULT ground was the only
     one that forgot it. `navy` and `front-door` each declared a full set; `lifted`
     declared four surface colours and stopped. home.css says so in its own words -
     "paper, card and ink come from the ground in house.css now" - so a page on the
     default ground was relying on ink that nothing supplied.

     It never showed, because every consumer so far ALSO loaded quarterly.css, which
     carries its own night ink. The front door does not load quarterly.css. It only
     looked right because it was pinned to `front-door`, a ground that happened to be
     complete - so the moment it moved to the default, its two headlines rendered dark
     bronze on a dark ground and were nearly unreadable.

     A default that works only when something else covers for it is not a default. The
     full set lives here now, so any page on `lifted` is legible on its own. */
  --ink: #f5eedf;
  --soft: #c8c0b1;
  --faint: #a59c90;
  --accent: #dfb56e;
  --accent2: #f2cf93;
  --qrule: rgba(238, 221, 193, .24);
  --qrule2: rgba(238, 221, 193, .12);
}

body.night[data-ground="original"],
body[data-theme="night"][data-ground="original"] {
  --paper: #17233a;
  --paper2: #101a2c;
  --card: #22304a;
  --plate: #283753;
}

body.night[data-ground="lifted"],
body[data-theme="night"][data-ground="lifted"] {
  /* the warm charcoal that was the default until 2026-07-29 - kept, never deleted */
  --paper: #181a20;
  --paper2: #14161b;
  --card: #212430;
  --plate: #262a33;
}

body.night[data-ground="warm"],
body[data-theme="night"][data-ground="warm"] {
  --paper: #1a1815;
  --paper2: #161411;
  --card: #262218;
  --plate: #2b2620;
}

body.night[data-ground="navy"],
body[data-theme="night"][data-ground="navy"] {
  --paper: #111827;
  --paper2: #0b111d;
  --card: #1b2433;
  --plate: #202b3c;
  --ink: #f5eedf;
  --soft: #c8c0b1;
  --faint: #a59c90;
  --accent: #dfb56e;
  --accent2: #f2cf93;
  --qrule: rgba(238, 221, 193, .24);
  --qrule2: rgba(238, 221, 193, .12);
}

/* The front door's own atmosphere. It is navy on purpose: the threshold depicts a
   night sky with a cabin and a star crossing it, which the rooms do not. Declared
   HERE rather than welded into home.css, so the front door is a coat like any other
   and "make the whole house one ground" is a deletion, not a rewrite. */
body.night[data-ground="front-door"],
body[data-theme="night"][data-ground="front-door"] {
  --paper: #111827;
  --paper2: #0b111d;
  --card: #1b2433;
  --ink: #f5eedf;
  --soft: #c8c0b1;
  --faint: #a59c90;
}

body.night[data-ground="deep"],
body[data-theme="night"][data-ground="deep"] {
  --paper: #0d0e11;
  --paper2: #14161b;
  --card: #14161b;
  --plate: #181b21;
}

/* The bar and panel are drawn FROM the ground rather than given their own colours,
   so a new ground never needs a matching pair of chrome values invented for it. */
body {
  --house-bar: color-mix(in srgb, var(--paper) 88%, transparent);
  --house-panel: color-mix(in srgb, var(--paper2) 97%, transparent);
  --house-shadow: rgba(0, 0, 0, .34);
  /* 100vh, not 100%. min-height:100% is inert unless html carries a definite height,
     which it never did - so a short page's body stopped above the fold and whatever
     colour html wore showed beneath it. Found 2026-07-28 as a cream band across the
     bottom of the night media room. */
  min-height: 100vh;
  transition: color .75s ease, background-color .75s ease, background-image .75s ease;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

/* THE CREAM BAND, and why html needs its own night rule. `html { background:
   var(--paper) }` reads --paper AT THE HTML ELEMENT - and every night value of --paper
   is declared on BODY (`body.night { ... }`). Custom properties inherit downward, never
   up, so html resolved the day cream on every night page, forever. It showed wherever
   the page ran shorter than the viewport, and it is what Safari's rubber-band overscroll
   reveals at the top and bottom of every night page. The min-height fix above hides the
   in-page band; this rule fixes the colour at its source so overscroll shows night too.
   One value re-declared, matching the lifted ground - the price of html sitting above
   the element the grounds are declared on. */
html:has(body.night),
html:has(body[data-theme="night"]) {
  background: #17233a;
}

/* GRAIN BY LIGHT (Jane's toggle test, 2026-07-29): on cream the grain is paper tooth
   and belongs; on the original blue it reads as sensor noise over a colour that needs
   no help. Day textured, night clean. */
body.night .grain,
body[data-theme="night"] .grain { display: none; }

/* Only a page that actually wears the bar reserves room for it. */
body.has-house-bar { padding-top: 54px; }
@media (max-width: 720px) { body.has-house-bar { padding-top: 96px; } }

/* ------------------------------------------------------------------- THE BAR */

.house-layer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 70;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px clamp(18px, 4vw, 48px);
  color: var(--ink);
  border-bottom: 1px solid var(--qrule2);
  background: var(--house-bar);
  box-shadow: 0 8px 28px transparent;
  backdrop-filter: blur(14px);
  transition: color .75s ease, border-color .75s ease, background .75s ease, box-shadow .75s ease;
}

.house-layer:has(.rooms-panel:not([hidden])) {
  box-shadow: 0 14px 40px var(--house-shadow);
}

.house-anchor {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.house-anchor span {
  font-family: var(--qserif);
  font-size: 18px;
  font-weight: 420;
  letter-spacing: -.02em;
}

.house-anchor small {
  color: var(--faint);
  font: 600 12px/1 var(--qsans);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.house-tools,
.house-light {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rooms-button,
.house-light button {
  min-height: 36px;
  padding: 8px 12px;
  color: var(--faint);
  border: 1px solid var(--qrule2);
  background: transparent;
  cursor: pointer;
  font: 600 12px/1 var(--qsans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.rooms-button:hover,
.rooms-button[aria-expanded="true"],
.house-light button:hover {
  color: var(--accent2);
  border-color: var(--accent);
}

.house-light {
  gap: 0;
  padding: 2px;
  border: 1px solid var(--qrule2);
  border-radius: 999px;
}

.house-light button {
  min-width: 54px;
  min-height: 30px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
}

.house-light button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--accent);
}

/* ----------------------------------------------------------------- THE PANEL */

.rooms-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: clamp(18px, 4vw, 48px);
  width: min(680px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  color: var(--ink);
  border: 1px solid var(--qrule);
  background: var(--house-panel);
  box-shadow: 0 24px 70px var(--house-shadow);
  backdrop-filter: blur(14px);
}

.rooms-panel[hidden] {
  display: none;
}

.rooms-panel > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px;
  border-right: 1px solid var(--qrule2);
}

.rooms-panel > div:nth-child(3) {
  border-right: 0;
}

.rooms-panel span {
  margin-bottom: 7px;
  color: var(--accent);
  font: 600 12px/1.35 var(--qsans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rooms-panel a {
  align-self: flex-start;
  color: var(--soft);
  font-family: var(--qserif);
  font-size: 16px;
  text-decoration: none;
}

.rooms-panel a:hover,
.rooms-panel a:focus-visible,
.rooms-panel a[aria-current="page"] {
  color: var(--accent2);
}

.rooms-panel > .rooms-shared-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border-top: 1px solid var(--qrule2);
  border-right: 0;
}

.rooms-panel .rooms-shared-actions a {
  padding: 13px 22px;
  color: var(--faint);
  font: 600 12px/1.2 var(--qsans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rooms-panel .rooms-shared-actions .rooms-home {
  width: auto;
  margin-left: auto;
}

/* --------------------------------------------------------------- THE ACCOUNT */

.house-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.house-auth a,
.house-auth button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--faint);
  border: 1px solid var(--qrule2);
  background: transparent;
  cursor: pointer;
  font: 600 12px/1 var(--qsans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}

.house-auth a:hover,
.house-auth a:focus-visible,
.house-auth button:hover,
.house-auth button:focus-visible {
  color: var(--accent2);
  border-color: var(--accent);
}

.house-auth-signed-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.house-auth-heart {
  color: var(--accent);
}

.house-auth-menu-button {
  min-width: 36px;
  justify-content: center;
}

.house-auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  border: 1px solid var(--qrule);
  background: var(--house-panel);
  box-shadow: 0 18px 44px var(--house-shadow);
}

.house-auth-menu[hidden] {
  display: none;
}

.house-auth-menu a,
.house-auth-menu button {
  justify-content: flex-start;
  border: 0;
}

.house-auth-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- THE ROOM UNDERNEATH THE BAR */

.qflag {
  padding-top: clamp(22px, 3.4vw, 34px);
}

.qhead {
  padding-top: clamp(34px, 5vw, 58px);
}

.guestbook-invitation {
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 22px 34px;
  text-align: center;
}

.guestbook-invitation a {
  color: var(--accent);
  font-family: var(--qserif);
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid var(--qrule2);
}

.guestbook-invitation a:hover {
  color: var(--accent2);
  border-bottom-color: var(--accent);
}

.draft-room-mark {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 72;
  padding: 6px 8px;
  color: var(--faint);
  border: 1px solid var(--qrule2);
  background: var(--house-bar);
  font: 600 12px/1 var(--qsans);
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Keep a preserved panel's close control above tall living previews. */
.pov .pclose {
  z-index: 4;
}

/* ------------------------------------------------------------------- NARROWER */

@media (max-width: 720px) {
  .house-layer {
    min-height: 96px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 16px;
  }

  .house-anchor {
    padding-top: 8px;
  }

  .house-anchor small {
    display: none;
  }

  .house-tools {
    gap: 6px;
  }

  .rooms-button,
  .house-auth a,
  .house-auth button {
    min-height: 36px;
    padding-inline: 9px;
  }

  .house-light button {
    min-width: 48px;
  }

  .rooms-panel {
    top: 96px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    grid-template-columns: 1fr;
  }

  .rooms-panel > div {
    display: grid;
    grid-template-columns: 1.45fr repeat(2, 1fr);
    align-items: baseline;
    gap: 8px 12px;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--qrule2);
  }

  .rooms-panel span {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .rooms-panel a {
    font-size: 15px;
  }

  .rooms-panel > .rooms-shared-actions {
    display: flex;
    padding: 0;
  }

  .rooms-panel .rooms-shared-actions a {
    padding: 13px 16px;
    font-size: 12px;
  }

  .qflag {
    padding-top: 20px;
  }

  .qhead {
    padding-top: 34px;
  }

  .draft-room-mark {
    right: 8px;
    bottom: 8px;
    max-width: 145px;
    text-align: center;
  }
}

/* No exceptions to the 12px floor. quarterly.css and studio.css keep it with zero
   violations; every sub-12px size in the Living House was introduced by the Living
   House, including four at 8px. Raised 2026-07-28 after Jane read one off the screen. */
@media (max-width: 410px) {
  .house-layer {
    align-content: center;
  }

  .house-anchor span {
    font-size: 16px;
  }

  .rooms-button,
  .house-auth a,
  .house-auth button {
    font-size: 12px;
  }

  .house-light button {
    min-width: 44px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .grain {
    display: none;
  }
}