/* ==========================================================================
   Жизнесвод — application screens.

   Tokens, base typography and the shared primitives (buttons, inputs, glass,
   badges, disclosure, public shell, auth card) live in design-system.css,
   which is loaded first. This file only lays out the authenticated app's own
   screens and maps its older class names (.cta, button.primary, .chip, ...)
   onto those primitives so every screen shares one visual language.

   No colour, radius, shadow or spacing literals belong here: use tokens.
   The app's CSP is `style-src 'self'` -- no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Authenticated web shell v0.1

   One reusable frame for every signed-in screen: a slim header (wordmark), a
   section switcher for the current area, the page content in a centred column,
   and the floating dock (design-system.css, FloatingNav) above the bottom edge.
   Content stays clean and opaque; glass is reserved for the navigation.
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--container);
  margin: 0 auto;
  /* The bottom padding is the dock's footprint plus breathing room, so the last
     line of any page always scrolls clear of the floating bar. */
  padding: var(--space-3) var(--gutter) var(--dock-clearance);
}

/* Keep focused fields and in-page anchors out from under the dock too. */
html {
  scroll-padding-bottom: var(--dock-clearance);
}

.app-header {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  margin-bottom: var(--space-2);
}

.app-header .wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}

/* Section switcher: the secondary screens of the current dock area. Wraps on
   desktop; on narrow screens it is one row that scrolls sideways inside itself
   (never the page). */
.section-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
}

.section-nav .chip {
  flex: none;
  min-height: var(--control-height-sm);
  white-space: nowrap;
}

.section-nav .chip.on {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint-border);
  color: var(--color-accent-strong);
  font-weight: 600;
}

/* Primary call-to-action link inside a page (first-run overview). */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-5);
  border: 1px solid rgba(18, 70, 88, 0.55);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #267a90 0%, var(--color-accent) 100%);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.cta:hover {
  color: var(--color-on-accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #21708a 0%, var(--color-accent-hover) 100%);
  box-shadow: var(--shadow-accent-hover), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}

/* Public state (login / registration): the app chrome (header, section
   switcher, dock) is replaced by the public header (see design-system.css).
   Before the first auth check has resolved nothing is shown, so the app
   chrome never flashes. */
body.auth-only .app-only { display: none; }
body.booting .app-only,
body.booting .public-header { visibility: hidden; }
body.booting .main { align-items: center; justify-content: center; min-height: 50vh; }

.main { min-height: 50vh; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
}

h2 {
  font-size: var(--text-xl);
  margin: var(--space-10) 0 var(--space-3);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.lede {
  color: var(--color-text-secondary);
  max-width: 42rem;
  margin: 0 0 var(--space-8);
  font-size: var(--text-md);
}

.muted { color: var(--color-text-secondary); }
.small { font-size: var(--text-sm); }

.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
}

.count {
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1), var(--glass-highlight);
}

.count b {
  display: block;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.count span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.card, .empty, form.entry, .inspect-block, .chapter, .toc {
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1), var(--glass-highlight);
}

.empty { color: var(--color-text-secondary); }

/* Public Deployment v0.1 -- small utility classes replacing what used to
   be inline style="" attributes, so the app's strict CSP (style-src
   'self', no 'unsafe-inline') covers every page without exception. */
.mt-0 { margin-top: 0; }
.pre-wrap { white-space: pre-wrap; }

/* minmax(0, 1fr): a card with a wide field inside must shrink, not stretch the
   column past the viewport. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.item-title {
  margin: 0 0 6px;
  font-size: var(--text-md);
}

.meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.plain-list {
  list-style: none;
  margin: 0.25rem 0 0.75rem;
  padding: 0;
}

.plain-list li { padding: 0.15rem 0; }

.quote {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.banner {
  background: rgba(255, 178, 132, 0.14);
  border: 1px solid rgba(138, 75, 15, 0.24);
  color: var(--color-warn);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Form controls of the app screens (mapped onto the .input look)
   -------------------------------------------------------------------------- */

label {
  display: block;
  margin: var(--space-4) 0 6px;
  font-weight: 600;
}

input[type="text"], textarea, select {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-text);
  box-shadow: inset 0 1px 2px rgba(16, 26, 44, 0.04);
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

input[type="text"]:hover, textarea:hover, select:hover { border-color: var(--color-control-border-hover); }

input[type="text"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-focus);
  background: #ffffff;
  box-shadow: var(--ring-focus);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2343526a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}

textarea { min-height: 220px; resize: vertical; }

input[type="file"] {
  width: 100%;
  font: inherit;
  padding: var(--space-3) 0;
}

/* --------------------------------------------------------------------------
   Buttons of the app screens (older class names -> shared primitives)
   -------------------------------------------------------------------------- */

.actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

button.primary {
  min-height: var(--touch-target);
  padding: 0 var(--space-5);
  border: 1px solid rgba(18, 70, 88, 0.55);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #267a90 0%, var(--color-accent) 100%);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

button.primary:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #21708a 0%, var(--color-accent-hover) 100%);
  box-shadow: var(--shadow-accent-hover), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}

button.primary:disabled { opacity: 0.6; cursor: not-allowed; }

button.danger {
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  background: var(--glass-bg-strong);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

button.danger:hover:not(:disabled) { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
button.danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* Every other class-less <button> in the app is a secondary (glass) button. */
button:not([class]) {
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  background: var(--glass-bg-strong);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1), var(--glass-highlight);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

button:not([class]):hover:not(:disabled) {
  background: #ffffff;
  border-color: rgba(16, 26, 44, 0.28);
  box-shadow: var(--shadow-2), var(--glass-highlight);
  transform: translateY(-1px);
}

button:not([class]):disabled { opacity: 0.55; cursor: not-allowed; }

/* Chips: <a class="chip"> / <button class="chip"> -- small glass pills. */
.channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--glass-bg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

a.chip:hover, button.chip:hover:not([disabled]) {
  background: #ffffff;
  color: var(--color-text);
  border-color: rgba(16, 26, 44, 0.28);
}

.chip.on {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.chip[disabled] { opacity: 0.55; cursor: not-allowed; }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Book / source views
   -------------------------------------------------------------------------- */

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 42rem;
}

.chapter-card summary,
.section-card summary {
  cursor: pointer;
  font-weight: 600;
}

.chapter-card[open] summary,
.section-card[open] summary { margin-bottom: var(--space-3); }

.section-card {
  margin-top: 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--color-divider);
}

.book-summary { margin: 0 0 var(--space-5); }

.review-panel summary { color: var(--color-text); }

.chapter h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.subhead {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
}

.toc { padding: var(--space-4) var(--space-8); max-width: 42rem; }

.toc-nested {
  margin: 6px 0 10px;
  padding-left: 1.2rem;
}

.toc-sub { list-style: circle; }

.layout-block { background: var(--color-bg-subtle); }

.layout-block .quote {
  font-size: var(--text-sm);
}

.degraded { border-style: dashed; }

.dev-view {
  margin-top: var(--space-8);
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
}

.dev-view summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.error { color: var(--color-danger); }

.dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px var(--space-4);
  font-size: var(--text-sm);
}

.dl dt { color: var(--color-text-secondary); }
.dl dd { margin: 0; }

pre.prose {
  white-space: pre-wrap;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
}

details { margin-top: var(--space-3); }

a.plain { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Privacy screens
   -------------------------------------------------------------------------- */

.privacy-panel {
  display: grid;
  gap: var(--space-4);
}

.privacy-row {
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1), var(--glass-highlight);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
}

.privacy-row > div:first-child { flex: 1; }

.privacy-row.danger-row { border-color: var(--color-danger-border); }

.privacy-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  margin: 0;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.switch input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-accent);
}

.erasure-flow {
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: var(--color-danger-tint);
}

.erasure-confirm ul {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: 1.2rem;
}

.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  margin: var(--space-4) 0 0;
}

.confirm-checkbox input { margin-top: 3px; accent-color: var(--color-accent); }

.privacy-status:empty { display: none; }

/* --------------------------------------------------------------------------
   Life record, human experience
   -------------------------------------------------------------------------- */

.life-record-item {
  border-left: 3px solid var(--color-accent-tint-border);
  padding-left: var(--space-4);
}

.life-record-meta { margin-top: var(--space-2); }

.he-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-4);
  margin: 4px 0 var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 10px;
}

.he-tab {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.he-tab.active,
.he-tab:hover {
  color: var(--color-text);
  font-weight: 600;
}

.he-form select { padding: 0.65rem 2.5rem 0.65rem 0.75rem; }

.he-results { margin-top: var(--space-6); }

.he-types { display: flex; flex-wrap: wrap; gap: 6px; }
.he-types .chip { color: var(--color-text-secondary); background: var(--color-bg-subtle); }

.he-provenance { margin-top: 10px; }

.he-provenance-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.he-provenance-toggle:hover { background: #ffffff; color: var(--color-text); }

.he-provenance-body { margin-top: var(--space-2); }

.he-mq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.he-mq-column h3 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

@media (max-width: 800px) {
  .he-mq-columns { grid-template-columns: 1fr; }

  .privacy-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dl { grid-template-columns: 1fr; }

  /* Section switcher: one row that scrolls inside itself, full-bleed, with
     44px targets. */
  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-1) var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav .chip { min-height: var(--touch-target); padding: 0 var(--space-3); }
}

/* --------------------------------------------------------------------------
   Tags, corrections
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.tag-badge {
  display: inline-block;
  border: 1px solid var(--color-accent-tint-border);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-accent-strong);
  background: var(--color-accent-tint);
  text-decoration: none;
}

.tag-badge:hover { background: rgba(29, 100, 120, 0.16); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tag-detach {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
}

.tag-detach:hover { background: var(--color-accent-tint); color: var(--color-accent-strong); }

.tag-form {
  display: flex;
  gap: var(--space-2);
  margin-top: 10px;
}

.tag-form input[type="text"] {
  width: auto;
  flex: 1;
  min-width: 0; /* let the field shrink so a narrow phone never scrolls sideways */
  padding: 0.55rem 0.8rem;
  font-size: var(--text-sm);
}

.tag-form button {
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.entries-search { margin-bottom: var(--space-4); }

.tag-history {
  margin: 4px 0 var(--space-4);
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.correction-form,
.dispute-form {
  flex-direction: column;
  align-items: stretch;
}

.correction-form textarea,
.dispute-form textarea {
  width: auto;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: var(--text-sm);
  resize: vertical;
}

.correction-form input[type="text"] {
  width: auto;
  padding: 0.55rem 0.8rem;
  font-size: var(--text-sm);
}

.correction-form button,
.dispute-form button {
  align-self: flex-start;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.current-version { border-color: var(--color-accent-tint-border); }

/* Main dashboard: period chips + headline action; quotes are the person's own words. */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.dash-periods { flex-wrap: wrap; margin: var(--space-4) 0; }
.dash-quotes { display: grid; gap: var(--space-3); }
.dash-month h3 { margin: var(--space-4) 0 var(--space-2); }
.dash-quote .quote { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .dash-head .cta { width: 100%; text-align: center; }
}

/* Sign-in methods: password / e-mail code switch, text-link buttons. */
.method-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.auth-form[hidden], #code-panel[hidden], #code-request-form[hidden], #code-verify-form[hidden] { display: none; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-accent, inherit);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:disabled { color: var(--color-text-secondary); cursor: default; text-decoration: none; }
.auth-forgot { margin-top: var(--space-3); }
.auth-passkey { margin-top: var(--space-4); text-align: center; }