/* Shared design tokens and components for all HTML mocks.
   Provisional rules extracted from the home mock (design-rules.md §3). */
@import url("motion.css");

:root {
  /* Surfaces and text */
  --color-bg: #FAF8EF;
  --color-frame: #E9E5D8;
  --color-surface: #F1EDE0; /* cards: set apart from the page without a hue */
  --color-ink: #25143D;
  --color-muted: #6E6480;
  --color-line: #E6E0CF;
  --color-dashed: #B9B0C8;

  /* Violet is reserved for actions and selection. Never a book color. */
  --color-action: #6747D8;
  --color-on-action: #FFFFFF;

  /* Book colors (one per article, assigned from this set) */
  --book-coral: #E68D78;
  --book-mint: #ACD4C8;
  --book-amber: #E6BF59;
  --book-blue: #85AFE0;

  /* Type */
  --font: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --fs-hero: 44px;      /* key numbers (weekly sentences) */
  --fs-number: 36px;    /* secondary numbers (streak) */
  --fs-heading: 22px;   /* section headings */
  --fs-title-lg: 21px;  /* emphasized item title */
  --fs-title: 16px;     /* item title */
  --fs-body: 15px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-tab: 11px;
  --fs-support: 14px;
  --fs-diff-number: 20px;
  --fw-bold: 700;
  --fw-regular: 400;
  --fw-medium: 600;

  /* Space and shape */
  --page-x: 16px;
  --space-book-gap: 1.5px;
  --space-tiny: 2px;
  --space-fine: 3px;
  --space-compact: 6px;
  --space-control: 10px;
  --space-card: 14px;
  --space-wide: 18px;
  --space-section: 22px;
  --space-heading: 26px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius-card: 12px;
  --radius-round: 999px;
  --icon-stroke: 1.9;
  --phone-width: 390px;
  --phone-height: 844px;
  --touch-target: 44px;
  --page-top: 20px;
  --swipe-delete-width: 88px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-frame); font-family: var(--font); color: var(--color-ink); }

/* Phone frame */
/* The frame owns the viewport; only main (or a meaning sheet) scrolls. */
.phone { position: relative; width: var(--phone-width); max-width: 100%; height: min(var(--phone-height), 100dvh); min-height: 0; margin: 0 auto; overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; }
.phone > main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; padding: var(--page-top) var(--page-x) var(--space-4); }
.phone > main::-webkit-scrollbar, .meaning-sheet::-webkit-scrollbar { display: none; }
.meaning-sheet { scrollbar-width: none; }
.phone > .fixed-top, .phone > footer, .phone > .tabbar, .phone > .undo-note { flex-shrink: 0; background: var(--color-bg); }
.phone > .fixed-top { padding: var(--page-top) var(--page-x) 0; }
.phone > .fixed-top:not(.reader-nav) + main { padding-top: 0; }
.phone > .fixed-top.reader-nav { padding: var(--space-2) var(--page-x) 0; }
.phone > .reading-progress { flex-shrink: 0; }
.phone > footer { border-top: 1px solid var(--color-line); padding: var(--space-4) var(--page-x) max(var(--space-5), env(safe-area-inset-bottom)); }
.phone > [hidden] { display: none; }

/* Headings */
.heading { font-size: var(--fs-heading); font-weight: var(--fw-bold); margin: var(--space-heading) 0 var(--space-3); }

/* Article card: no article color. Cards differ from the page by surface only, so no color asks "what does this mean?".
   Emphasis for the article to read now comes from an ink outline and size, not from hue. */
.card { position: relative; display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-card); padding: var(--space-card) var(--space-4); overflow: hidden; background: var(--color-surface); color: var(--color-ink); border: 0; }
.card.next, .card.today { box-shadow: inset 0 0 0 2px var(--color-ink); }
.card .body { flex: 1; min-width: 0; }
.card .title { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.35; }
.card .meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); margin-top: var(--space-compact); opacity: .9; }
.card .meta i { width: 1px; height: 11px; background: currentColor; opacity: .4; }
.card .meta svg { vertical-align: -2px; margin-right: var(--space-fine); }
.card.next { padding-top: var(--page-top); padding-bottom: var(--page-top); }
.card.next .title { font-size: var(--fs-title-lg); }
.card.done .title, .card.done .meta { opacity: .75; }

/* Marks and buttons */
.done-mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-tiny); font-size: var(--fs-tab); font-weight: var(--fw-medium); }
.go { width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--color-action); color: var(--color-on-action); display: grid; place-items: center; flex: 0 0 auto; }
.btn-primary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; border-radius: var(--radius-card); background: var(--color-action); color: var(--color-on-action); font-size: var(--fs-body); font-weight: var(--fw-bold); border: 0; width: 100%; }
.btn-secondary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font-size: var(--fs-body); font-weight: var(--fw-bold); border: 1.5px solid var(--color-line); width: 100%; }

/* Dashed "add one more" slot */
.add-slot { display: flex; align-items: center; justify-content: center; gap: var(--space-control); margin-top: var(--space-2); height: 52px; border: 1.5px dashed var(--color-dashed); border-radius: var(--radius-card); font-size: var(--fs-body); font-weight: var(--fw-bold); position: relative; }
.add-slot::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: var(--space-tiny); background: var(--color-ink); opacity: .7; }

/* Tab bar */
.tabbar { display: flex; border-top: 1px solid var(--color-line); padding: var(--space-2) 0 var(--space-section); background: var(--color-bg); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-fine); font-size: var(--fs-tab); font-weight: var(--fw-medium); color: var(--color-muted); text-decoration: none; }
.tabbar a.on { color: var(--color-action); }
.tabbar a.on::after { content: ""; width: 44px; height: 3px; border-radius: var(--space-tiny); background: var(--color-action); margin-top: var(--space-tiny); }