/* ============================================================
   css/layout.css — the page shell: site header + nav (and its phone drawer), the
   .page-* column layout, footer, the "crawl back out" button.

   Load order (header.php → stylesheets.php): base → layout → components
   → pages → responsive. This file is 2 of 5; later files win ties.

   CONTENTS
      1. SITE HEADER AND PAGE BODY — logo, search, account links, nav bar
      2. CRAWL BACK OUT — the floating back-to-top button
      3. FOOTER
      4. DESK-ONLY PAGES — tending's phone notice
      5. PAGE COLUMNS — .page-layout, .page-main
      6. SIDE COLUMNS — .page-nav (left), .page-sidebar (right)
      7. PHONE HEADER — the search and menu icon buttons
   ============================================================ */

/* ============================================================
   SITE HEADER AND PAGE BODY — logo, search, account links, nav bar
   ============================================================ */

/* --- Two-row AO3-style header --- */
.site-header {
  background: var(--surface);
  /* positioned + lifted so tooltips from the nav bar paint over
     .site-main, which is itself positioned and comes later in the DOM */
  position: relative;
  z-index: 60;
}

/* Row 1: logo + account, on white */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-logo);
  font-weight: bold;
  color: var(--red);
  white-space: nowrap;
}

.site-logo:hover { text-decoration: none; color: var(--red-dark); }

/* the SVG is tightly cropped, so no zoom hack needed — just size the box
   and let the image fill it while keeping its aspect ratio. */
.site-logo-img-wrap {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-logo-text { line-height: 1; }

/* three separate destinations, so they need to read as three. At 16px with no
   divider they ran together as one line of text. */
.header-account {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.header-account > * { padding: 0 14px; }

.header-account > * + * { border-left: 1px solid var(--border); }

.greeting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: var(--fs-body);
}

.greeting:hover { text-decoration: none; }

/* creature icon sits in a soft circle, echoing the avatar treatment elsewhere */
.greeting:hover { text-decoration: none; color: var(--red); }

.greeting i { width: 14px; height: 14px; }

/* black at rest, red on hover — red-on-white for every link made the bar
   shout, and gave no signal about which one you were pointing at */
.account-link {
  color: var(--ink);
  font-size: var(--fs-ui);
}

.account-link:hover { color: var(--red); text-decoration: none; }

/* logout stays muted and italic: it's the one you rarely want */
.account-link.logout { font-style: italic; color: var(--grey); }

.account-link.logout:hover { color: var(--red); }

/* logout is a POST, so it's a form with a button; the button wears the link's look */
button.account-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

/* Row 2: red nav bar */
.header-nav-bar {
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.header-nav-bar .site-nav { flex: 1; justify-content: flex-start; }

/* (.header-page-title removed — the active nav link already shows the page) */
.header-nav-bar .site-search { flex: 1; display: flex; justify-content: flex-end; }

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.site-nav a {
  color: var(--pink);
  font-size: var(--fs-body);
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--surface);
  text-decoration: none;
}

.site-nav a.active {
  font-weight: bold;
  border-bottom: 2px solid var(--surface);
}

/* search bar lives in the red nav row, on the right */
.site-search {
  min-width: 180px;
  max-width: 320px;
  /* the search field is pinned to the right end of the nav bar */
  margin-left: auto;
}

.site-search input {
  width: 100%;
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--surface);
  color: var(--ink);
}

/* the body area below the header: main content + right sidebar */
.site-body {
  display: flex;
  min-height: calc(100vh - 56px);
}

.site-main {
  flex: 1;
  padding: 20px 24px;
  position: relative;
}

/* ============================================================
   CRAWL BACK OUT — the floating back-to-top button
   ============================================================ */

/* ------------------------------------------------------------
   CRAWL BACK OUT — floating, bottom-left
   ------------------------------------------------------------ */
.crawl-out {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--red);
  font-family: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--shadow-md);
  transition: background-color 0.1s, color 0.1s;
}

.crawl-out:hover { background: var(--red); color: var(--surface); border-color: var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--red-dark);
  color: var(--pink);
  text-align: center;
  padding: 10px 18px;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.footer-tagline {
  color: var(--surface);
  font-size: var(--fs-ui);
}

/* outline heart, inherits the footer text colour */
.footer-heart {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

.footer-heart svg { width: 13px; height: 13px; stroke: currentColor; }

/* ============================================================
   DESK-ONLY PAGES — tending's phone notice
   ============================================================ */

/* tending (community.php) is desk work: on a phone the page is swapped for a
   notice (see the mobile block). Desktop never sees the notice. */
.desk-only-notice { display: none; }

/* ============================================================
   PAGE COLUMNS — .page-layout, .page-main
   ============================================================ */

.page-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.page-main { flex: 1; min-width: 0; }

/* ============================================================
   SIDE COLUMNS — .page-nav (left), .page-sidebar (right)
   ============================================================ */

/* travels with you, same as the filter sidebar. The eight views stay fixed;
   only the pile tree scrolls, since that's the part that grows. */
.page-nav {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* sticky makes its own stacking context; without a z-index the
     positioned fic cards in .page-main paint over the folder tooltips */
  z-index: 5;
}

.page-nav > .nav-folder,
.page-nav > .nav-divider,
.page-nav > .nav-section-label { flex-shrink: 0; }

/* The sidebar travels with you. It's taller than the viewport, so it needs its
   own scroll — otherwise sticky pins the top and "apply" becomes unreachable. */
.page-sidebar {
  /* 250px read as an afterthought beside ~320px fic cards */
  width: 300px;
  flex-shrink: 0;
  padding: 0;
  position: sticky;
  top: 12px;
  /* `top: 12px` only applies once it STICKS. At the top of the page the sidebar
     starts below the header, so a 100vh-24px cap ran off the bottom and you had
     to scroll the page before the panel's own scroll made sense. Leaving room
     for the header means it fits from the start. */
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

.page-sidebar .filter-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;   /* the form itself never scrolls */
}

/* fixed top: page actions and the panel title */
.page-sidebar .sidebar-actions,
.page-sidebar .sidebar-title { flex-shrink: 0; }

/* ONLY the filters scroll, so the scrollbar sits between the buttons above and
   apply below rather than running the panel's whole height */
.page-sidebar .filter-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* room so the last filter isn't flush against the scrollbar */
  padding-right: 4px;
}

/* fixed bottom: apply stays reachable without scrolling back down */
.page-sidebar .filter-actions {
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 12px;
}

/* when deep dive is open, widen the sidebar for two columns */
.page-sidebar.expanded { width: 460px; }

/* the page title is the first thing in the middle column; no top margin so it
   lines up with the nav card and the sidebar beside it */
.page-main > .page-title { margin-top: 0; }

/* first section heading after the title shouldn't add its usual big top gap */
.page-main > .page-title + .mode-toggle { margin-bottom: 16px; }

/* ============================================================
   PHONE HEADER — the search and menu icon buttons
   ============================================================ */

.header-mobile-actions { display: none; }

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px, not the 24px the icon needs — a thumb is not a cursor */
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--grey);
  cursor: pointer;
}

.header-icon-btn i, .header-icon-btn svg { width: 20px; height: 20px; }

.header-icon-btn:hover { border-color: var(--red); color: var(--red); }