/*
  Styles for the shared-note page (index.html). Values copied from
  design/Shared.dc.html and SharedDark.dc.html; colors are the app's tokens
  (src/theme/tokens.js). The paper stays light with plum ink in dark mode.
  Fonts are served from /fonts (subset WOFF2 of the app's fonts, SIL OFL).
*/

@font-face { font-family: 'Caveat'; font-weight: 500; font-display: swap; src: url('/fonts/Caveat_500Medium.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url('/fonts/Caveat_600SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url('/fonts/Caveat_700Bold.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/Fraunces_600SemiBold_Italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('/fonts/Nunito_600SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('/fonts/Nunito_700Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/fonts/Nunito_800ExtraBold.woff2') format('woff2'); }

:root {
  --bg: #FFF6EC;
  --surface: #FFFFFF;
  --border: #EADBCB;
  --text: #4A2C4F;
  --text-muted: #7A5A7D;
  --primary-bg: #4A2C4F;
  --primary-text: #FFF6EC;
  --primary-shadow: 0 10px 24px rgba(74, 44, 79, 0.28);
  --paper-shadow: 0 20px 40px rgba(74, 44, 79, 0.18);
  --scrim: rgba(74, 44, 79, 0.35);
  --wax: #C9506B;
  /* Paper (same in both modes). */
  --ink: #4A2C4F;
  --ink-muted: #7A5A7D;
  --paper-line: #F4D6DD;
  --paper-cream: #FFFDF8;
  --paper-blush: #F7B7C3;
  --paper-peach: #FFD3B0;
  --paper-lavender: #CDB9F0;
  --paper-sage: #BFD8C2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1F1426;
    --surface: #2E1F36;
    --border: #47334F;
    --text: #F6E9F0;
    --text-muted: #CDB8D2;
    --primary-bg: #F7B7C3;
    --primary-text: #2A1830;
    --primary-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    --paper-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    --scrim: rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* The 390-wide mockup column, centred on wide screens and filling the
   height so the buttons sit at the bottom on phones. */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
}

.logo { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 22px; }

.view { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.view[hidden] { display: none; }
.intro { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; text-align: center; }
.subline { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); text-align: center; }
.gone { gap: 8px; margin-top: 18vh; }

/* The note paper: ruled every 34px (a 1px line at 33px), rotated 1.2°.
   The rules are shifted down by the top padding (+1px) so each one sits
   under a line of handwriting, like the app's paper, instead of cutting
   through the words. */
.paper {
  width: min(320px, 100%);
  transform: rotate(1.2deg);
  border-radius: 6px;
  background-color: var(--paper-cream);
  background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 33px, var(--paper-line) 33px, var(--paper-line) 34px);
  background-position: 0 25px;
  box-shadow: var(--paper-shadow);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.paper.blush { background-color: var(--paper-blush); }
.paper.peach { background-color: var(--paper-peach); }
.paper.lavender { background-color: var(--paper-lavender); }
.paper.sage { background-color: var(--paper-sage); }
.paper p { margin: 0; }
.recipient { font-family: 'Caveat', cursive; font-size: 30px; font-weight: 700; line-height: 34px; }
.body { font-family: 'Caveat', cursive; font-size: 25px; font-weight: 500; line-height: 34px; white-space: pre-line; }
.signoff { font-family: 'Caveat', cursive; font-size: 25px; font-weight: 600; line-height: 34px; text-align: right; color: var(--ink-muted); }

.warmth { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.warmth[hidden] { display: none; }
.heart { fill: var(--wax); }

.spacer { flex-grow: 1; min-height: 8px; }

.actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.button.primary { height: 58px; border-radius: 29px; background: var(--primary-bg); color: var(--primary-text); font-size: 17px; box-shadow: var(--primary-shadow); }
.button.primary svg { stroke: var(--primary-text); }
.button.outline { height: 52px; border-radius: 26px; border: 2px solid var(--text); color: var(--text); font-size: 16px; }
.button:active { opacity: 0.85; }
.button:focus-visible, .link:focus-visible, .reason:focus-visible, .sheet-cancel:focus-visible { outline: 3px solid var(--wax); outline-offset: 2px; }

.footnote { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; }
.footnote[hidden] { display: none; }
.link {
  font: inherit; font-weight: 800; color: var(--text); text-decoration: underline;
  background: none; border: 0; padding: 12px 2px; margin: -12px 0; cursor: pointer; /* 44px tall tap area */
}

/* Report sheet: like the app's ActionSheet (surface, 24px top corners). */
.sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
}
.sheet-title { margin: 0; padding: 12px 8px; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; color: var(--text-muted); }
.reasons { display: flex; flex-direction: column; }
.reason, .sheet-cancel {
  font: inherit; font-size: 16px; font-weight: 800; color: var(--text);
  background: none; border: 0; text-align: left; min-height: 52px; padding: 0 8px; cursor: pointer;
}
.reason + .reason { border-top: 1px solid var(--border); }
.reason:disabled { opacity: 0.5; }
.sheet-cancel { width: 100%; margin-top: 8px; border-radius: 16px; background: var(--bg); color: var(--text-muted); text-align: center; }