/* Peano — application additions on top of tokens.css and bundle.css.
   bundle.css is the design preview sheet; this file only adds what a real,
   server-rendered page needs: links, keyboard focus, flashes, and full-height
   layout. Every value is a token from tokens.css. */

/* The document scrolls; the preview sheet's fixed-height frame does not apply.
   Rails stick to the top bar and scroll on their own when taller than the viewport. */
html, body { height: 100%; }
.p-app { min-height: 100vh; }
.p-body { align-items: stretch; }
.p-main { overflow: visible; }
.p-rail { position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }

/* Real anchors and buttons that carry design classes. */
a { color: inherit; text-decoration: none; }
a.p-btn, button.p-btn { text-decoration: none; }
a.p-rail__i { text-decoration: none; }
a.p-link, .p-link { color: var(--accent); transition: color var(--duration-fast) var(--ease-out); }
a.p-link:hover, .p-link:hover { color: var(--accent-hover); }
.p-wm a { color: inherit; }

/* Keyboard focus ring, the design's .is-focus applied for real. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-input:focus { outline: none; border-color: var(--accent); }

/* Forms. */
.p-form { max-width: 360px; }
.p-form .p-btn--block { margin-top: var(--space-2); }
.p-input--error:focus { border-color: var(--danger); }

/* Notices: the auth screen's failure and success panels, reused as flashes. */
.p-notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; line-height: 18px; color: var(--ink);
}
.p-notice--danger { border-color: var(--danger); background: var(--danger-wash); }
.p-notice--danger .p-notice__g { color: var(--danger); }
.p-notice--accent { border-color: var(--accent); background: var(--accent-wash); }
.p-notice--accent .p-notice__g { color: var(--accent); }
.p-notice__g { flex: none; }

/* Fragment arrival, per BRAND.md: duration-base on ease-out. */
.htmx-added, .htmx-settling { animation: p-arrive var(--duration-base) var(--ease-out); }
@keyframes p-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Auth screens: one 360px column on ground, space-24 top inset. */
.p-auth { max-width: 360px; margin: 0 auto; padding: var(--space-24) var(--space-8) var(--space-20); }
.p-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); cursor: pointer; }
.p-consent input { margin: 2px 0 0; width: 14px; height: 14px; flex: none; accent-color: var(--accent-fill); }

/* Lesson lists: rows and rail items are real links. */
a.p-li { text-decoration: none; color: inherit; }
.p-mark:not([class*="--"]) { border-color: var(--border-strong); }

/* Prose block: markdown output onto the design's rules. */
.p-prose h3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: var(--space-8) 0 var(--space-3); }
.p-prose h2:first-child, .p-prose h3:first-child { margin-top: 0; }
.p-prose code { font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-sm); padding: 1px 5px; }
.p-prose pre { font-family: var(--font-mono); font-size: 14px; line-height: 24px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; margin: 0 0 var(--space-6); }
.p-prose pre code { background: none; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.p-prose blockquote { border-left: 2px solid var(--accent-fill); padding-left: var(--space-5); margin: 0 0 var(--space-6); }
.p-prose blockquote p { color: var(--ink); }
.p-prose blockquote > p:first-child > strong:first-child { display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.p-prose em { font-style: italic; }
.p-prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* Code block: operators stay code-ink. */
.p-code .o { color: var(--code-ink); }

/* Placeholder for block types that are not rendered yet. */
.p-block--soon { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); max-width: var(--measure-prose); }

/* Mentor editor. */
.p-editor { display: flex; flex: 1 1 auto; min-height: 0; }
.p-editor__list { width: 320px; }
.p-editor__panel { padding: var(--space-8); max-width: 820px; }
a.p-bl { text-decoration: none; }
.p-bl__k--on { color: var(--accent); }
.p-textarea { font-family: var(--font-mono); font-size: 13px; line-height: 20px; min-height: 240px; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.p-textarea--prose { font-family: var(--font-sans); font-size: 14px; white-space: pre-wrap; }
select.p-input { appearance: none; -webkit-appearance: none; }
.p-table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.p-table__h { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.p-table__r { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.p-table__r:last-child { border-bottom: 0; }
.p-table__r .p-input { padding: var(--space-1) var(--space-3); font-size: 13px; }
details.p-menu-wrap > summary { list-style: none; cursor: pointer; }
details.p-menu-wrap > summary::-webkit-details-marker { display: none; }
.p-chip--draft { color: var(--caution); border-color: var(--caution); }
.p-row-actions { display: flex; gap: var(--space-2); align-items: center; }
.p-row-actions form { display: inline; }
.p-file { font-size: 13px; color: var(--ink-muted); }

/* Quiz: options are real radio labels; the input itself is hidden. */
.p-opt--pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-opt--pick { position: relative; }
.p-opt--pick:has(input:checked) { border-color: var(--ink-dim); color: var(--ink); }
.p-opt--pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Demo controls. */
.p-range { flex: 1 1 auto; accent-color: var(--accent-fill); height: 3px; min-width: 80px; }
.p-demo__c > * { white-space: nowrap; }
.p-demo__fallback[hidden] { display: none; }

/* Slide mode: one full-viewport section at a time. */
.p-deck { min-height: 100vh; background: var(--ground); }
.p-deck__slide { min-height: 100vh; }
.p-deck__slide[hidden] { display: none; }
.p-slide--top { justify-content: flex-start; padding-top: var(--space-16); }
.p-slide__split { display: flex; gap: var(--space-16); align-items: flex-start; }
.p-slide__split > :first-child { flex: 1 1 45%; max-width: var(--measure-prose); }
.p-slide__split > :last-child { flex: 1 1 55%; min-width: 0; }
.p-slide__prose .p-prose p, .p-slide__prose .p-prose li { font-size: 20px; line-height: 34px; letter-spacing: -0.018em; }
.p-slide__prose .p-prose ul, .p-slide__prose .p-prose ol { font-size: 20px; line-height: 34px; }
.p-slide__prose .p-prose code { font-size: 17px; }
.p-code--lg .p-code__g { font-size: 14px; line-height: 28px; }
.p-code--lg .p-code__l { font-size: 16px; line-height: 28px; }
.p-kbd--dim { opacity: .4; }
.p-deck__small { display: none; }
@media (max-width: 639px) {
  .p-deck__small { display: block; }
  .p-deck__slide { display: none !important; }
}

/* Playground block. */
.p-pg__editor { background: var(--code-bg); border-bottom: 1px solid var(--border); }
.p-pg__monaco { width: 100%; min-height: 120px; }
.p-pg__mobile { display: none; padding: var(--space-4); }
.p-pg__out .p-out { white-space: pre-wrap; word-break: break-word; }
.p-pg .p-btn[disabled] { background: var(--surface-raised); color: var(--ink-dim); border-color: var(--border); box-shadow: none; }
.monaco-editor .margin, .monaco-editor .monaco-editor-background { background: var(--code-bg) !important; }

/* Focused playground: 60/40 split, editor never below editor-min. */
.p-focus { display: flex; flex-direction: column; min-height: 100vh; }
.p-focus__body { flex: 1 1 auto; display: flex; min-height: 0; }
.p-focus__editor { flex: 1 1 60%; min-width: var(--editor-min); display: flex; flex-direction: column; background: var(--code-bg); }
.p-focus__tabs { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.p-focus__tab--on { color: var(--ink); border-bottom: 2px solid var(--accent-fill); padding-bottom: 6px; margin-bottom: -8px; }
.p-focus__monaco { flex: 1 1 auto; min-height: 320px; }
.p-focus__out { flex: 1 1 40%; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--ground); min-width: 0; }
.p-focus__panel { flex: 1 1 auto; overflow: auto; }
.p-focus__panel .p-out { white-space: pre-wrap; word-break: break-word; }
.p-focus__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); gap: var(--space-3); font-size: 13px; color: var(--ink-faint); }
@media (max-width: 1099px) {
  .p-focus__body { flex-direction: column; }
  .p-focus__editor { min-width: 0; }
  .p-focus__out { border-left: 0; border-top: 1px solid var(--border); }
}
.p-pg__bar > .p-row:first-child { min-width: 0; flex: 1 1 auto; }
.p-pg__bar > .p-row:first-child > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-pg__bar > .p-row:last-child { flex: none; }

/* Exam. */
.p-exam { display: flex; flex-direction: column; min-height: 100vh; }
.p-exam .p-body { flex: 1 1 auto; }
.p-navgrid a.p-nc { text-decoration: none; }
.p-nc--key { width: 12px; height: 12px; aspect-ratio: auto; flex: none; font-size: 0; }
.p-li .p-nc--key { font-size: 12.5px; }

/* The hidden attribute must beat display rules on classed elements. */
[hidden] { display: none !important; }

/* ---------- Mobile: the reading view at 390px ------------------------------ */
.p-mobilehead { display: none; }
.p-code__swipe { display: none; }
.p-editor__small { display: none; }
@media (max-width: 639px) {
  /* Top bar: wordmark, context, avatar. */
  .p-top--flat { padding: 0 var(--space-4); gap: var(--space-3); }
  .p-top .p-ctx { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-top [data-user-name] { display: none; }

  /* Rails collapse. Contents go behind ☰ (a checkbox toggle), progress
     moves into the mobile header. */
  .p-rail, .p-rail--r { display: none; }
  .p-mobilehead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .p-mobilehead__t { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .p-mobilehead__toggle { display: none; }
  .p-mobilehead__btn { cursor: pointer; color: var(--ink-muted); font-size: 18px; line-height: 1; padding: var(--space-1) var(--space-2); }
  .p-mobilehead__toggle:checked ~ .p-body > #lesson-contents { display: block; position: static; width: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .p-body { flex-direction: column; }
  .p-main > div[style*="measure-prose"] { padding: var(--space-6) var(--space-5) var(--space-10) !important; }

  /* Type: body-mobile is the one responsive style; the title steps down. */
  .p-prose p, .p-prose li { line-height: 27px; }
  .p-main h1.display-2 { font-size: 30px; line-height: 36px; letter-spacing: -0.012em; }
  .p-col { padding: var(--space-8) var(--space-4); }
  .display-2 { font-size: 30px; line-height: 36px; }

  /* Code goes full-bleed and scrolls; never wraps. */
  .p-block .p-code { margin-left: calc(var(--space-5) * -1); margin-right: calc(var(--space-5) * -1); border-radius: 0; border-left: 0; border-right: 0; }
  .p-code__swipe { display: inline; }

  /* The inline playground collapses to a button. */
  .p-pg__editor, .p-pg__out, .p-pg__open, [data-pg-reset], [data-pg-run] { display: none; }
  .p-block .p-pg__mobile { display: block; }
  .p-pg .p-pg__mobile { display: block; }

  /* Mark complete pins to a bottom bar, the only sticky chrome on mobile. */
  #lesson-footer { position: sticky; bottom: 0; background: var(--surface-float); box-shadow: var(--shadow-overlay); margin: var(--space-6) calc(var(--space-5) * -1) 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
  #lesson-footer .p-btn { font-size: 13px; padding: var(--space-1) var(--space-3); }

  /* Home rows stack their metrics. */
  .p-li { flex-wrap: wrap; }
  .p-li > div[style*="width:220px"] { width: 100% !important; order: 10; }

  /* Focused playground stacks with the output under the editor. */
  .p-focus__editor { min-width: 0; }
  .p-focus__monaco { min-height: 260px; }
  .p-focus .p-chain { display: none; }

  /* The mentor editor is not offered; say so. */
  .p-editor { display: none; }
  .p-editor__small { display: block; }
}
@media (max-width: 639px) {
  body { overflow-x: hidden; }
  .p-block, .p-card { max-width: 100%; min-width: 0; }
  .p-chip { white-space: nowrap; }
  #lesson-footer { flex-wrap: nowrap; gap: var(--space-2); }
  #lesson-footer > a.p-btn--quiet { max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  #lesson-footer .p-row { gap: var(--space-2); }
}

/* Search box in the top bar and result snippets. */
.p-search { display: flex; align-items: center; gap: var(--space-2); }
.p-search__in { width: 220px; padding: var(--space-1) var(--space-3); font-size: 13px; }
.p-search__kbd { display: inline-block; }
.p-search__snippet { font-size: 13px; line-height: 20px; color: var(--ink-faint); margin-top: var(--space-2); max-width: var(--measure-prose); }
.p-search__snippet mark { background: var(--accent-wash); color: var(--ink); padding: 0 2px; border-radius: var(--radius-sm); }
@media (max-width: 899px) { .p-search__in { width: 140px; } .p-search__kbd { display: none; } }
@media (max-width: 639px) { .p-search { display: none; } }

/* Runnable listing output. */
.p-code__out { border-top: 1px solid var(--border); }
.p-code__out .p-out { white-space: pre-wrap; word-break: break-word; }

/* Activity strip: 12 weeks × 7 days. */
.p-days { display: flex; gap: 3px; }
.p-days__w { display: flex; flex-direction: column; gap: 3px; }
.p-day { display: block; width: 11px; height: 11px; border-radius: 2px; background: var(--surface-raised); border: 1px solid var(--border); }
.p-day--some { background: var(--accent-wash); border-color: var(--accent-wash); }
.p-day--many { background: var(--accent-fill); border-color: var(--accent-fill); }