/*
 * Occupemo Web — PAPER style (the notebook world).
 * Spec: docs/superpowers/specs/2026-07-07-paper-style-design.md
 *
 * Every rule is scoped under html.paper — this file is inert for Clean users
 * (the default). The class + the Kalam webfont are applied pre-paint by
 * theme-init.js; runtime toggling lives in assets/js/styleMode.js.
 *
 * Task-2 scope: type (Kalam display face), sheets (the To-Dos paper treatment
 * generalized to primary cards), and hand-drawn card edges (pre-baked SVG
 * border-image — no per-element filters). Controls/motifs are Task 3.
 *
 * Contract: NO spacing/layout metric changes (Kalam sizes are re-tuned down
 * ~8% because handwriting faces render large — line boxes stay within a
 * couple px of Clean), charts/data-viz untouched, form-field internals
 * untouched, motion + reduced-motion behavior untouched.
 */

html.paper {
  /* Kalam (marker-pen handwriting; 400 + 700). Bricolage is the fallback so a
     failed font load degrades to the Clean display face, never Comic Sans. */
  --paper-display: 'Kalam', 'Bricolage Grotesque', 'Segoe Print', cursive;

  /* Ruled baselines — fainter than the To-Dos sheet's own rule (those align
     to real rows; these are the page texture showing through). */
  --paper-rule: color-mix(in srgb, var(--color-border) 55%, transparent);
  --paper-pitch: 28px;

  /* Hand-drawn edges — two radius tiers, pre-baked irregular rounded rects
     (seeded jitter <=0.8/120 viewBox units: "drawn with a ruler by hand").
     Stroke is --color-border-dark baked per mode (border-image cannot read
     currentColor from a data URI). lg: 16px-radius cards at 20px corner
     width; md: 10px-radius cards at 14px. */
  --paper-edge-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 33.57 2 C 49.17 2.73, 69.96 1.87, 85.55 2 A 32.45 32.29 0 0 1 118 34.45 C 117.79 49.91, 118.44 70.53, 118 85.99 A 32.01 32.23 0 0 1 85.99 118 C 70.33 117.55, 49.45 117.93, 33.79 118 A 31.79 32.31 0 0 1 2 86.21 C 2.57 70.42, 2.73 49.36, 2 33.57 A 31.57 31.32 0 0 1 33.57 2 Z' fill='none' stroke='%23B9AE97' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-edge-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 28.84 2 C 47.07 1.34, 71.38 1.7, 89.61 2 A 28.39 28.33 0 0 1 118 30.39 C 117.53 48.26, 117.45 72.08, 118 89.94 A 28.06 28.44 0 0 1 89.94 118 C 71.87 117.81, 47.76 117.53, 29.69 118 A 27.69 27.91 0 0 1 2 90.31 C 2.58 71.87, 1.55 47.28, 2 28.84 A 26.84 26.31 0 0 1 28.84 2 Z' fill='none' stroke='%23B9AE97' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Task 3 — motifs. The underline + ring are MASKS (black strokes; painted
     via background-color on the pseudo-element) so they track live CSS
     tokens — accent stays Theme-Studio-composable, counts track
     currentColor. The divider is a baked-ink image (same two border-dark
     strokes as the edges) because it paints on the element itself. All
     preserveAspectRatio='none' — one confident stroke stretched to fit. */
  --paper-underline-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M 2 4.6 C 30 2.6, 72 6.2, 118 3.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-ring-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Cpath d='M 49 5.5 C 58 7.5, 62.5 13.5, 61.5 20 C 60 29, 46 34, 31 33.4 C 17 32.8, 3.5 28, 2.6 18.6 C 1.8 10, 13 3.6, 29 2.7 C 37 2.2, 48 3, 54 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6' preserveAspectRatio='none'%3E%3Cpath d='M 2 3.4 C 40 2.1, 90 4.7, 140 3.0 C 175 1.9, 215 4.2, 238 3.2' fill='none' stroke='%23B9AE97' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dark ("night notebook"): same geometry, dark border-dark stroke; rules
   recede further on the dark ground. Both dark paths are covered — the
   explicit .dark class AND system dark before JS stamps a class (mirrors
   styles.css). */
html.paper.dark {
  --paper-rule: color-mix(in srgb, var(--color-border) 45%, transparent);
  --paper-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6' preserveAspectRatio='none'%3E%3Cpath d='M 2 3.4 C 40 2.1, 90 4.7, 140 3.0 C 175 1.9, 215 4.2, 238 3.2' fill='none' stroke='%2357503F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-edge-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 33.57 2 C 49.17 2.73, 69.96 1.87, 85.55 2 A 32.45 32.29 0 0 1 118 34.45 C 117.79 49.91, 118.44 70.53, 118 85.99 A 32.01 32.23 0 0 1 85.99 118 C 70.33 117.55, 49.45 117.93, 33.79 118 A 31.79 32.31 0 0 1 2 86.21 C 2.57 70.42, 2.73 49.36, 2 33.57 A 31.57 31.32 0 0 1 33.57 2 Z' fill='none' stroke='%2357503F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-edge-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 28.84 2 C 47.07 1.34, 71.38 1.7, 89.61 2 A 28.39 28.33 0 0 1 118 30.39 C 117.53 48.26, 117.45 72.08, 118 89.94 A 28.06 28.44 0 0 1 89.94 118 C 71.87 117.81, 47.76 117.53, 29.69 118 A 27.69 27.91 0 0 1 2 90.31 C 2.58 71.87, 1.55 47.28, 2 28.84 A 26.84 26.31 0 0 1 28.84 2 Z' fill='none' stroke='%2357503F' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html.paper:not(.light) {
    --paper-rule: color-mix(in srgb, var(--color-border) 45%, transparent);
    --paper-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6' preserveAspectRatio='none'%3E%3Cpath d='M 2 3.4 C 40 2.1, 90 4.7, 140 3.0 C 175 1.9, 215 4.2, 238 3.2' fill='none' stroke='%2357503F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --paper-edge-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 33.57 2 C 49.17 2.73, 69.96 1.87, 85.55 2 A 32.45 32.29 0 0 1 118 34.45 C 117.79 49.91, 118.44 70.53, 118 85.99 A 32.01 32.23 0 0 1 85.99 118 C 70.33 117.55, 49.45 117.93, 33.79 118 A 31.79 32.31 0 0 1 2 86.21 C 2.57 70.42, 2.73 49.36, 2 33.57 A 31.57 31.32 0 0 1 33.57 2 Z' fill='none' stroke='%2357503F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --paper-edge-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M 28.84 2 C 47.07 1.34, 71.38 1.7, 89.61 2 A 28.39 28.33 0 0 1 118 30.39 C 117.53 48.26, 117.45 72.08, 118 89.94 A 28.06 28.44 0 0 1 89.94 118 C 71.87 117.81, 47.76 117.53, 29.69 118 A 27.69 27.91 0 0 1 2 90.31 C 2.58 71.87, 1.55 47.28, 2 28.84 A 26.84 26.31 0 0 1 28.84 2 Z' fill='none' stroke='%2357503F' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ============================================================
   1. Type — headings/titles in Kalam 700, section labels in
      Kalam 400. Body, numbers, forms, buttons stay Manrope.
      Kalam has no width/optical axes → variation-settings reset;
      negative tracking (a Bricolage tune) reads cramped in
      handwriting → zeroed.
   ============================================================ */
html.paper h1,
html.paper h2,
html.paper h3,
html.paper .page-title,
html.paper .text-hero,
html.paper .text-h1,
html.paper .text-h2 {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  letter-spacing: 0;
  font-weight: 700;
}

/* Prominent titles — sizes re-tuned down ~8% (Kalam renders large) so line
   boxes and layout stay within a couple px of Clean. */
html.paper .page-title { font-size: 26px; }

html.paper .dashboard-greeting {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  font-size: 31px;
  letter-spacing: 0;
}

html.paper .section-title {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  font-size: 18.5px;
  letter-spacing: 0;
}

html.paper .schedule-page-title {
  font-family: var(--paper-display);
  font-size: 24.5px;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  html.paper .schedule-page-title { font-size: 20px; }
}

html.paper .todos-pane-title {
  font-family: var(--paper-display);
  font-size: 31px;
}
@media (max-width: 640px) {
  html.paper .todos-pane-title { font-size: 24.5px; }
}

html.paper .now-hero-name {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  font-size: 24.5px;
  font-weight: 700; /* Kalam has no 800 — avoid synthetic bold */
  letter-spacing: 0;
}

html.paper .add-task-modal-title {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  font-size: 22px;
  letter-spacing: 0;
}

html.paper .onboarding-title {
  font-family: var(--paper-display);
  font-variation-settings: normal;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

html.paper .morning-nudge-title { font-family: var(--paper-display); font-size: 18px; }
html.paper .progress-blank-title { font-family: var(--paper-display); font-variation-settings: normal; font-size: 15px; letter-spacing: 0; }
html.paper .todos-empty-title { font-family: var(--paper-display); font-size: 16px; }
html.paper .todos-completed-label { font-family: var(--paper-display); font-size: 16px; }
html.paper .todo-list-editor-title { font-family: var(--paper-display); font-size: 19px; }
html.paper .auth-card-title { font-family: var(--paper-display); font-variation-settings: normal; letter-spacing: 0; }

/* Section labels — small handwritten margin notes (Kalam 400). Bumped a step
   so 400-weight handwriting stays comfortably scannable; muted ink is 4.5:1+
   on cream and 5.6:1 on the dark bg (measured), and both labels sit at 700 in
   Clean so the AA large-text carve-out is not needed — the ratio passes at
   any size. */
html.paper .schedule-section-label,
html.paper .todos-rail-title {
  font-family: var(--paper-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Numbers explicitly stay non-handwritten (spec): .progress-fraction,
   .todos-pane-count-num, goals ring %, analytics donut values keep their
   Clean faces — no rule needed, just don't touch them here. */

/* ============================================================
   2. Sheets — the To-Dos paper treatment, generalized.
      Every primary card becomes a flat paper sheet: surface
      ground, shadow off (flat print), hand-drawn edge.
   ============================================================ */
html.paper .card,
html.paper .now-hero-card,
html.paper .auth-card {
  box-shadow: none;
  border: 1px solid transparent;
  border-image: var(--paper-edge-lg) 40 / 20px stretch;
}

/* Ruled baselines where content is written line-by-line: dashboard cards and
   the schedule generator/preview sheets. Analytics + goals keep the PLAIN
   sheet (dense stats/charts fight ruled texture — judgment call per spec). */
html.paper .dashboard-content .card,
html.paper .schedule-page .card {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--paper-pitch) - 1px),
    var(--paper-rule) calc(var(--paper-pitch) - 1px),
    var(--paper-rule) var(--paper-pitch)
  );
}

/* Timeline / preview block cards — smaller sheets, md edge tier. */
html.paper .block-card {
  box-shadow: none;
  border: 1px solid transparent;
  border-image: var(--paper-edge-md) 40 / 14px stretch;
}

/* The CURRENT block keeps its accent "now" affordance: border-image would
   swallow the accent border, so drop it there and keep the accent ring. */
html.paper .block-row.current .block-card {
  border-image: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-surface);
}

/* Break blocks keep their dashed border (border-image would erase it). */
html.paper .block-row.break-block .block-card { border-image: none; }

/* The To-Dos sheet is already the notebook — it just gets the drawn edge
   (its red margin rule stays EXCLUSIVE to To-Dos per spec). */
html.paper .todos-pane {
  border: 1px solid transparent;
  border-image: var(--paper-edge-lg) 40 / 20px stretch;
}

/* The "Now" hero keeps its live ring (drawn outside the sheet edge). */
html.paper .now-hero-card::after { border-radius: 16px; }

/* ============================================================
   3. Controls (Task 3) — drawn-outline buttons that fill on
      hover/press ("ink pooling"), hand-drawn oval chips/pills,
      pen-ring select circles. Every state preserved: hover,
      focus-visible (untouched — the accent outline rings stay),
      selected, disabled. NO borders are added anywhere — drawn
      rings are inset box-shadows + irregular radii, so box
      metrics are byte-identical to Clean.
   ============================================================ */

/* Hand-drawn rectangles: irregular corner radii on all buttons —
   "cut with scissors, not a die". */
html.paper .btn { border-radius: 13px 15px 12px 16px / 16px 12px 15px 13px; }
html.paper .btn-sm { border-radius: 10px 12px 9px 12px / 12px 9px 12px 10px; }

/* Primary: drawn accent outline at rest; the ink pools on hover/press
   (fast background transition — already in .btn's transition list).
   Label tokens follow the ink-on-ember dark law exactly as Clean does:
   rest text = --color-accent-on-surface (AA-tuned accent text per mode),
   filled text = --color-on-accent (white in light, ink in dark). */
html.paper .btn-primary {
  background-color: transparent;
  color: var(--color-accent-on-surface);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
html.paper .btn-primary:hover:not(:disabled),
html.paper .btn-primary:active:not(:disabled) {
  background-color: var(--color-accent-fill);
  color: var(--color-on-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-fill);
}

/* Ghost buttons: the 1px border reads as pen with the irregular radius —
   nudge it to the ink tone. (Secondary + danger keep their fills: soft
   accent wash = highlighter; destructive stays filled for clarity.) */
html.paper .btn-ghost { border-color: var(--color-border-dark, var(--color-border)); }

/* Pills (technique picker, duration/type segmented controls): the tray
   capsule disappears — on paper, unselected options are just written
   words; the SELECTED one keeps its fill and gains a drawn oval ring. */
html.paper .pill-group { background-color: transparent; }
html.paper .pill { border-radius: 12px 14px 11px 14px / 14px 11px 14px 12px; }
html.paper .pill-selected {
  box-shadow: inset 0 0 0 1.5px var(--color-border-dark, var(--color-border));
}

/* Chips (filter chips, category picker, category badges, level pill):
   hand-drawn ovals via generous irregular radii. All state colors
   (hover accent, active fill, selected tint) are untouched. */
html.paper .chip,
html.paper .category-option,
html.paper .category-badge,
html.paper .xp-card-level-pill,
html.paper .matrix-cell-count {
  border-radius: 11px 13px 10px 14px / 14px 10px 13px 11px;
}

/* Weekday repeat toggles (Add-Event recurrence controls): the M/T/W squares
   join the chip vocabulary — hand-cut irregular radii + pen-ink border at
   rest. Hover and the selected day's accent border + fill are untouched
   (the clean rules still set those colors; only geometry + rest ink here). */
html.paper .weekday-btn {
  border-radius: 13px 11px 14px 10px / 10px 14px 11px 13px;
}
html.paper .weekday-btn:not(.is-on):not(:hover) {
  border-color: var(--color-border-dark, var(--color-border));
}

/* Select circles (schedule task/event picker) adopt the pen-ring posture
   the To-Dos checks have: muted-ink ring, slightly off-round. Selected
   stays accent-FILLED (state clarity per spec). */
html.paper .task-select-checkbox {
  border-color: var(--color-text-muted);
  border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%;
}

/* ============================================================
   4. Motifs (Task 3) — pencil-underlined section labels,
      pen-circled count numerals, drawn dividers.
   ============================================================ */

/* Pencil underline under section labels — the To-Dos pane-title vocabulary
   (a single confident accent stroke, fully drawn at rest) generalized.
   Absolutely-positioned pseudo + mask: zero layout shift, tracks the live
   accent token (Theme Studio composes). fit-content keeps the stroke
   hugging the words on block labels; nothing downstream reads their width. */
html.paper .section-title,
html.paper .schedule-section-label,
html.paper .todos-rail-title,
html.paper .goals-section-heading,
html.paper .ach-section-heading:not(:has(.ach-cta-link)) {
  position: relative;
  width: fit-content;
}
html.paper .section-title::after,
html.paper .schedule-section-label::after,
html.paper .todos-rail-title::after,
html.paper .goals-section-heading::after,
html.paper .ach-section-heading:not(:has(.ach-cta-link))::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -5px;
  bottom: -4px;
  height: 5px;
  background-color: var(--color-accent);
  -webkit-mask: var(--paper-underline-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--paper-underline-mask) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* Pen-circled numerals — only where counts already exist as discrete
   elements (spec: promote, don't invent). Same open-ring gesture as the
   To-Dos pane count. */
html.paper .progress-fraction {
  position: relative;
  /* block-level div — shrink to the numerals so the ring hugs "n/m",
     not the card width. Nothing reads this element's width. */
  width: fit-content;
}
html.paper .progress-fraction::after {
  content: '';
  position: absolute;
  inset: -9px -14px -7px -12px;
  background-color: var(--color-accent);
  -webkit-mask: var(--paper-ring-mask) center / 100% 100% no-repeat;
  mask: var(--paper-ring-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}

html.paper .todos-list-count,
html.paper .matrix-cell-count {
  position: relative;
}
html.paper .matrix-cell-count { background: transparent; }
html.paper .todos-list-count::after,
html.paper .matrix-cell-count::after {
  content: '';
  position: absolute;
  inset: -4px -6px;
  background-color: currentColor; /* rings track the count's own ink */
  -webkit-mask: var(--paper-ring-mask) center / 100% 100% no-repeat;
  mask: var(--paper-ring-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Drawn dividers — content hairlines (border-top) become one confident
   stroke. Padded elements paint it as a background at the top edge; the
   1px border goes transparent so metrics don't move. Chrome hairlines
   (sidebar, bottom nav) stay ruled — they're furniture, not the page. */
html.paper .add-task-modal-actions,
html.paper .onboarding-actions,
html.paper .modal-completion,
html.paper .estimation-footer,
html.paper .add-event-card .generator-actions {
  border-top-color: transparent;
  background-image: var(--paper-divider);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 4px;
}
html.paper .reflection-insights {
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-image: var(--paper-divider), var(--paper-divider);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left bottom;
  background-size: 100% 4px, 100% 4px;
}
/* The settings <hr> has a zero-height box — draw via an overlay pseudo. */
html.paper .settings-divider {
  position: relative;
  border-top-color: transparent;
}
html.paper .settings-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 4px;
  background: var(--paper-divider) no-repeat left top / 100% 4px;
  pointer-events: none;
}

/* ============================================================
   5. Remaining pages (Task 3) — calendar/analytics/goals/matrix/
      achievements/settings. Their .card surfaces were already
      sheeted by §2; below are only the page-local surfaces and
      title retunes Task 2 didn't reach. Charts, heatmaps, the
      calendar day grid, and form internals stay precise (spec §3).
   ============================================================ */

/* Page-title retunes (h1/h2 already switch face via §1 — Kalam renders
   large, so sizes come down ~8% to hold Clean's line boxes). */
html.paper .analytics-title,
html.paper .calendar-title { font-size: 24.5px; letter-spacing: 0; }
html.paper .settings-section-title { font-size: 18.5px; letter-spacing: 0; }

/* Quadrant titles + small uppercase section headings — handwritten margin
   notes, same treatment as the schedule section labels. */
html.paper .matrix-cell-title {
  font-family: var(--paper-display);
  font-weight: 700; /* Kalam has no 800 */
  font-size: 15px;
  letter-spacing: 0;
}
html.paper .goals-section-heading,
html.paper .ach-section-heading {
  font-family: var(--paper-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Page-local sheets → drawn edges (lg tier for 16px-radius cards, md for
   12px). Flat print: shadows off, hover lifts keep their transform. */
html.paper .matrix-cell,
html.paper .xp-card,
html.paper .streak-card--hero {
  box-shadow: none;
  border: 1px solid transparent;
  border-image: var(--paper-edge-lg) 40 / 20px stretch;
}
/* Drag-over target keeps its quadrant-color affordance (border-image would
   swallow it — same carve-out pattern as the current schedule block). */
html.paper .matrix-cell.drop-target {
  border-image: none;
  border-color: var(--quadrant-color);
}

html.paper .goal-card,
html.paper .ach-badge {
  box-shadow: none;
  border: 1px solid transparent;
  border-image: var(--paper-edge-md) 40 / 14px stretch;
}
html.paper .goal-card:hover {
  box-shadow: none; /* flat print — the translateY lift is the affordance */
}