/* public.css — self-contained styles for the static public DRC export.
   Tokens come from assets/dark.css; @font-face lifted from chrome.css. */
@font-face { font-family: 'Haas'; src: url('/Fonts/NeueHaas/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Haas'; src: url('/Fonts/NeueHaas/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Haas'; src: url('/Fonts/NeueHaas/NeueHaasDisplayBold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'MonoM'; src: url('/Fonts/PP%20Neue%20Montreal%20Mono%20-%20Free%20for%20Personal%20Use%20v1.0/otf/PPNeueMontrealMono-Book.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MonoM'; src: url('/Fonts/PP%20Neue%20Montreal%20Mono%20-%20Free%20for%20Personal%20Use%20v1.0/otf/PPNeueMontrealMono-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body.public {
  background: var(--bg); color: var(--text);
  font-family: 'Haas', system-ui, sans-serif; font-weight: var(--body-weight, 500);
  -webkit-font-smoothing: antialiased;
}
/* published-card hero heading (static export + live locked) — mirrors the
   editable DRC's "Daily Report Card" block (.module-h/.module-title/.module-sub
   live in chrome.css, which is NOT bundled here; .drc-grade/.daily-grade/.lbl
   come from drc.css, which IS bundled). Big title left, Daily Grade + controls
   right. Replaces the old thin top bar. */
.pub-head { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.module-h {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.module-title { font-weight: 500; font-size: 30px; letter-spacing: -0.035em; line-height: 1; }
.module-sub {
  font-family: 'MonoM', monospace; font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.02em; margin-top: 4px;
}
/* controls row under the grade (theme toggle + copy-link + unpublish) — where
   the editable card's Synthesize / push-to-calendar buttons sit. */
/* full-width controls bar below the header: owner actions (copy-link + unpublish)
   sit left, the theme toggle is pushed to the right edge. */
.pub-ctl { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.pub-ctl .theme-toggle { margin-left: auto; }

/* sun/moon theme toggle + copy-link button — shared 30px box (toggle markup in
   _theme_toggle.html.j2; both wired by public.js) */
.theme-toggle, .copy-link {
  width: 30px; height: 30px; padding: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px); color: var(--text-dim); cursor: pointer;
}
.theme-toggle:hover, .copy-link:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg, .copy-link svg { width: 15px; height: 15px; }
/* "Copied" flash on the copy-link button */
.copy-link .cl-flash {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-family: 'MonoM', monospace; font-size: 10px; letter-spacing: .04em;
  color: var(--accent); background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px); padding: 2px 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.copy-link.copied .cl-flash { opacity: 1; }
[data-theme="light"] .theme-toggle .ic-sun { display: none; }
[data-theme="dark"]  .theme-toggle .ic-moon { display: none; }
/* unpublish button shares the exact 30px box + 15px icon of the toggle/copy
   (drc.css ships it at 30x28 / 14px — too small/short next to the others) */
/* chrome.css (which gives .btn its panel background) is NOT bundled here, so
   force a transparent button bg — the box interior shows the card bg, like the
   copy-link / theme-toggle boxes. Solid lime disc inside, accent border. */
body.public .drc-pub { width: 30px; height: 30px; padding: 0; background: transparent; }
body.public .drc-pub svg { width: 15px; height: 15px; }

.public-main { max-width: 880px; margin: 0 auto; padding: 44px 24px 56px; }
/* body text matches the AI Review summary for readability (14px / 1.72) */
.ro-text { white-space: pre-wrap; font-size: 14px; line-height: 1.72; color: var(--text); }

/* card panels — chrome.css (which owns the editable DRC's .card look) is NOT
   linked here, and public.css is only ever loaded on the public/locked pages
   (never alongside chrome.css), so mirror the .card panel styling to match the
   editable DRC sections. Plain .card specificity lets .card.ai-review override. */
.public-main > .card { margin-bottom: 18px; }
.public-main > .card:last-child { margin-bottom: 0; }
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.card-title { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--text); }
.card-sub { font-family: 'MonoM', monospace; font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.02em; }

/* micro-label utilities (lifted from chrome.css; chrome.css is not bundled here) */
.mono { font-family: 'MonoM', monospace; font-weight: 500; }
.lbl {
  font-family: 'MonoM', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

/* public calendar grid */
.pub-month { margin-bottom: 28px; }
.pub-month-label { color: var(--text-dim); font-family: 'MonoM', monospace; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.pub-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pub-cell { aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); padding: 6px; color: var(--text-faint); font-size: 12px; }
.pub-cell.out { opacity: .35; }
.pub-cell a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); }
.pub-cell.has a { color: var(--text); }
.pub-cell .pc-grade { margin-top: auto; color: var(--accent); font-family: 'MonoM', monospace; font-weight: 700; }