/* The card: a paper sheet on the lapis night (Akshouini's "day" palette: lapis ink on paper, vermilion goes deep).
   Shared by the create, sign, manage and reveal pages. Page-specific styles go in their own files, not here.

   Markup contract:
   <article class="sheet">                         the card (paper)
     <header class="cover">
       <p class="occasion">Happy birthday</p>       small caps line
       <h1 class="to">Asha</h1>                     the name, big Garamond
       <p class="from">From the design team</p>     italic
     </header>
     <ol class="notes">                             messages
       <li class="note ink-lapis|ink-verm|ink-teal|ink-ochre">
         <p class="body">…</p><p class="sig">— Ravi</p>
       </li>
     </ol>
   </article> */

.sheet {
  --s-fg: var(--lapis);
  --s-soft: rgba(10, 18, 64, 0.66);
  --s-line: rgba(10, 18, 64, 0.14);
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
  background: var(--paper);
  color: var(--s-fg);
  border-radius: 4px;                              /* a sheet, not an app card */
  box-shadow: 0 30px 80px rgba(4, 8, 32, 0.55), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
}
.sheet a { color: var(--verm-ink); }

.cover { text-align: center; padding-bottom: clamp(20px, 4vw, 40px); margin-bottom: clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--s-line); }
.cover .occasion { font: 500 14px/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; color: var(--verm-ink); margin: 0 0 18px; }
.cover .to { font: 500 clamp(48px, 10vw, 112px)/1 var(--serif); letter-spacing: -0.01em; margin: 0; color: var(--lapis); overflow-wrap: anywhere; }
.cover .message { font: 400 clamp(20px, 2.6vw, 26px)/1.4 var(--serif); color: var(--lapis); max-width: 30ch; margin: 18px auto 0;
  text-wrap: balance; overflow-wrap: anywhere; }
.cover .from { font: italic 400 clamp(19px, 2.4vw, 24px)/1.3 var(--serif); color: var(--s-soft); margin: 16px 0 0; }

/* notes flow in columns like signatures on a real card */
.notes { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: clamp(20px, 4vw, 44px); }
.note { break-inside: avoid; margin: 0 0 clamp(20px, 3vw, 30px); padding: 4px 0 0; }
.note .body { font: 400 20px/1.5 var(--serif); margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note .sig { font: italic 400 18px/1.3 var(--serif); margin: 0; }
.note .sig::before { content: '— '; }
.note .tools { margin-top: 4px; font-size: 14px; color: var(--s-soft); }
.note .tools button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* the four inks a signer can pick; matte, from the Akshouini palette */
.ink-lapis { color: var(--lapis); }
.ink-verm { color: var(--verm-ink); }
.ink-teal { color: var(--teal-ink); }
.ink-ochre { color: #9a5b0a; }
.inks { display: flex; gap: 10px; }
.inks label { position: relative; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.inks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.inks span { display: block; width: 100%; height: 100%; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 2px var(--lapis-lo) inset; }
.inks input:checked + span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px currentColor; }
.inks input:focus-visible + span { outline: 2px solid var(--teal-hi); outline-offset: 4px; }

.empty { text-align: center; font: italic 400 21px/1.4 var(--serif); color: var(--s-soft); padding: 20px 0; }

/* "Made with" mark under a shared card (policy §2): quiet, on the night, links to make your own */
.madewith { display: block; width: fit-content; margin: 40px auto 28px; color: var(--muted); text-decoration: none;
  font: 400 15px/1 var(--serif); letter-spacing: 0.04em; }
.madewith b { font-weight: 500; color: var(--fg-strong); }
.madewith:hover b { color: var(--teal-hi); }

/* reveal: notes rise in one by one (r.html adds .reveal to .sheet, then .on per note); none under reduced motion */
.reveal .note { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal .note.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal .note { opacity: 1; transform: none; } }

@media (max-width: 560px) { .sheet { border-radius: 0; margin: 0 calc(-1 * var(--gutter)); } .note .body { font-size: 19px; } }