/* ============================================================
   life-compass — shared styles
   Loaded by both life-compass.html and life-compass-editor.html.
   Page-specific layout stays inline in each page; everything here
   is used by both, so the palette and controls only exist once.

   Loaded with <link rel="stylesheet">, which works over file:// —
   unlike fetch(), which browsers block there.
   ============================================================ */

:root {
  --paper: #f5f6fb;
  --paper2: #e9ebf5;
  --card: #ffffff;
  --ink: #23263b;
  --ink-soft: #5b5f7a;
  --accent: #4a4e9e;
  --border: #e3e5f0;
  --danger: #b34f6b;
  --ok: #3f8a55;
  /* Quadrant hues */
  --tr: #3f8a55; /* Core Memory */
  --tl: #b9781f; /* Designed Delight */
  --bl: #b34f6b; /* Quiet Miss */
  --br: #2f6c93; /* Spirited Stumble */
  /* Recency swatches, newest -> oldest */
  --sw1: #222222;
  --sw2: #666666;
  --sw3: #aaaaaa;
  --sw4: #eeeeee;
}

html[data-theme="dark"] {
  --paper: #14161f;
  --paper2: #1a1d29;
  --card: #1c1f2b;
  --ink: #e7e8f0;
  --ink-soft: #9a9dbb;
  --accent: #8b8ff0;
  --border: #2c2f3f;
  --danger: #e08aa0;
  --ok: #6fbf86;
  --tr: #6fbf86;
  --tl: #e0a94c;
  --bl: #e08aa0;
  --br: #6fa8cc;
  /* "Full darkness" means maximum visibility, so in dark mode the
     recency scale inverts: newest is white, fading toward the
     background instead of toward black. */
  --sw1: #ffffff;
  --sw2: #c7cae0;
  --sw3: #8b8fae;
  --sw4: #565971;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  margin: 0;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper2) 100%);
  transition: background 0.2s ease, color 0.2s ease;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  margin: 0;
  letter-spacing: 0.2px;
}

.card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 20px 40px -20px rgba(0,0,0,0.35);
  transition: background 0.2s ease;
}

.nav-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.15s ease;
  text-align: center;
}
.nav-link:hover { background: var(--paper2); }

/* --- Icon toggles (sun/moon, recency/uniform) --- */
.icon-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.icon-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.icon-switch .track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.icon-switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.icon-switch input:checked + .track .thumb { transform: translateX(24px); }
.icon-switch .thumb svg {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.switch-theme .track { background: linear-gradient(90deg, #bcd4ee, #dce8f7); }
html[data-theme="dark"] .switch-theme .track { background: linear-gradient(90deg, #2a2d45, #14161f); }
.switch-theme .icon-sun { color: #e8a23c; opacity: 1; transform: scale(1); }
.switch-theme .icon-moon { color: #6b6fc9; opacity: 0; transform: scale(0.6); }
.switch-theme input:checked + .track .icon-sun { opacity: 0; transform: scale(0.6); }
.switch-theme input:checked + .track .icon-moon { opacity: 1; transform: scale(1); }

.switch-emphasis .track { background: #d6d9e6; }
html[data-theme="dark"] .switch-emphasis .track { background: #33364a; }
.switch-emphasis input:checked + .track { background: var(--accent); }
.switch-emphasis .icon-fade { color: var(--ink-soft); opacity: 1; transform: scale(1); }
.switch-emphasis .icon-solid { color: var(--accent); opacity: 0; transform: scale(0.6); }
.switch-emphasis input:checked + .track .icon-fade { opacity: 0; transform: scale(0.6); }
.switch-emphasis input:checked + .track .icon-solid { opacity: 1; transform: scale(1); color: white; }

/* --- Passphrase gate (src/passphrase.js) ---
   Covers the whole viewport until the data is decrypted. Opaque, not
   translucent: the page behind it has no events in it yet, and a
   half-visible empty chart reads as broken rather than as locked. */
.lc-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper2) 100%);
}
.lc-gate.show { display: flex; }

.lc-gate-card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 20px 40px -20px rgba(0,0,0,0.35);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.lc-gate-card h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  margin: 0 0 6px;
  color: var(--ink);
}

.lc-gate-sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Off-screen rather than display:none. Password managers routinely skip
   hidden inputs, and the username field below only earns its place if the
   manager can see it — but it must never be visible to a person, nor
   reachable by keyboard. */
.lc-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.lc-gate-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease;
}
.lc-gate-input:focus { border-color: var(--accent); }
.lc-gate-input:disabled { opacity: 0.6; }

.lc-gate-error {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  color: var(--danger);
}
.lc-gate-error.show { display: block; }

.lc-gate-btn {
  width: 100%;
  margin-top: 16px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.lc-gate-btn:disabled { opacity: 0.65; cursor: default; }

.lc-gate-note {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--ink-soft);
  /* Only worth saying while they are waiting on it. */
  visibility: hidden;
}
.lc-gate.busy .lc-gate-note { visibility: visible; }

/* Silent restore: the overlay still covers the page, so the half-built
   page underneath is never visible, but the prompt itself is not drawn.
   Painting the card and removing it again a moment later is what made
   navigating between the two pages flash a login modal. */
.lc-gate.restoring .lc-gate-card { display: none; }

.lc-gate-restoring {
  display: none;
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
/* Only once the wait is long enough that silence would read as a hang. */
.lc-gate.restoring.slow .lc-gate-restoring { display: block; }

/* An unrecoverable load failure: no point offering an input. */
.lc-gate-card.fatal .lc-gate-input,
.lc-gate-card.fatal .lc-gate-btn,
.lc-gate-card.fatal .lc-gate-note { display: none; }