/* Locus — base styles (cream paper + book-cover colours) */

:root {
  --cream: #f8f5f0;
  --paper: #fdfbf7;
  --band: #f0ebe2; /* linen: the background of section heading rows on cream pages */
  --ink: #222220;
  --ink-2: #6b665d;
  --ink-3: #a29c91;
  --line: rgba(29, 28, 26, 0.14);

  /* the two sizes the stylesheet uses; every size on screen comes from LocusTheme.TYPE */
  --t-body: 17px;
  --t-label: 15px;

  /* one typeface everywhere; --serif kept as a name so older styles still resolve */
  /* Helvetica Neue is built into iPhone and Mac; Inter Tight is the look-alike everywhere else */
  --sans: 'Helvetica Neue', 'Inter Tight', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --serif: var(--sans);

  --discard: #c2452a;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* never draw a focus box around anything you tap or type in (user's rule, every page) */
*:focus, *:focus-visible { outline: none; }
html, body { height: 100%; }
body {
  background: #ece6da;
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }

/* === app column: full screen on phones, a centred phone-width column elsewhere === */
.app {
  position: relative;
  width: 100%; max-width: 480px;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
}
/* no outline around the column on wide screens: a grey hairline blended into pale bands
   (sage, mist) and made them look a pixel wider than the rest */

/* top spacing that respects the notch when added to the home screen */
.status-bar { height: calc(env(safe-area-inset-top, 0px) + 14px); flex-shrink: 0; }

/* === page system === */
.page-host { position: absolute; inset: 0; background: var(--cream); }
.page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.page > .content {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }

@keyframes pgFwdIn  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pgFwdOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-22px); } }
@keyframes pgBackIn { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes pgBackOut{ from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(30px); } }
@keyframes pgUpIn   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pgUpOut  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
.pg-fwd-in   { animation: pgFwdIn  0.32s cubic-bezier(0.2,0.7,0.2,1) both; }
.pg-fwd-out  { animation: pgFwdOut 0.26s cubic-bezier(0.4,0,1,0.5) both; }
.pg-back-in  { animation: pgBackIn 0.30s cubic-bezier(0.2,0.7,0.2,1) both; }
.pg-back-out { animation: pgBackOut 0.26s cubic-bezier(0.4,0,1,0.5) both; }
.pg-up-in    { animation: pgUpIn 0.36s cubic-bezier(0.16,1,0.3,1) both; }
.pg-up-out   { animation: pgUpOut 0.22s cubic-bezier(0.4,0,1,0.5) both; }
/* same-frame pages (drawer ↔ capture): the frame swaps instantly (it's identical), and only the
   content fades in, so there is never more than one page's text on screen */
@keyframes softIn { from { opacity: 0; } to { opacity: 1; } }
.soft-in { animation: softIn 0.2s ease-out both; }

/* === toast === */
.toast-host {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 0; right: 0;
  display: flex; justify-content: center; z-index: 300;
  pointer-events: none; padding: 0;
}
.toast {
  font-family: var(--sans); font-size: var(--t-label);
  color: var(--cream); background: var(--ink);
  /* a full-width ink strip, square like the rest of the grid */
  width: 100%; min-height: 52px; padding: 0 18px; border-radius: 0; /* sits exactly over the header row */
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  animation: toastIn 0.34s cubic-bezier(0.2,0.8,0.2,1) both;
}
.toast.exit { animation: toastOut 0.28s ease both; }
.toast button {
  pointer-events: auto; /* only a real button catches taps; otherwise the header underneath stays usable */
  background: none; border: none; color: var(--cream);
  font-family: var(--sans); font-size: var(--t-label); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

/* === misc === */
/* narrow windows (phone, side pane): fill the width, no strip of page background beside the app */
@media (max-width: 640px) { .app { max-width: none; } }
.scroll-y { overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-y::-webkit-scrollbar { display: none; }

.hl { background: rgba(242, 201, 76, 0.45); padding: 0 1px; border-radius: 2px; }

/* === launch: Locus typed on cream === */
/* each letter pops up from slightly below and settles, like a key striking paper */
.type-in {
  display: inline-block;
  animation: typeIn 0.26s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes typeIn {
  from { opacity: 0; transform: translateY(0.22em); }
  to   { opacity: 1; transform: none; }
}
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }

/* drawer page content settles in after the card has filled the screen */
.drawer-in { animation: drawerIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the card that grows to fill the screen (and shrinks back) */
.card-expand {
  position: absolute; z-index: 450; pointer-events: none;
  transition: top 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
              width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-radius 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}