/* Remaster the original documents without replacing their content or tools. */
@import url('./site-shell.css');

html body { font-family: var(--mono); font-size: 14px; line-height: 1.8; }
body :is(button, input, textarea, select, code, pre, .font-mono) { font-family: var(--mono); }
body :is(button, input, textarea, select, .code-block, .part-thumb, .part-thumb-placeholder,
  .json-modal-box, .docs-card, .docs-code, .level-tag, .docs-mark, .docs-badge, .docs-tag, .docs-search-input, .docs-category-btn,
  .docs-suggestion-btn, .level-card, .run-command, .nav-dropdown-list, .nav-dropdown-list a,
  [class~="rounded"], [class~="rounded-lg"], [class~="rounded-full"]) { border-radius: 0; box-shadow: none; }
body :is(.shadow-lg, .shadow-xl) { box-shadow: none; }
body :is(button, .copy-btn, .docs-copy-btn, .docs-expand-btn) { min-height: 40px; }
body button:not(:disabled) { cursor: pointer; }
body button:disabled { opacity: .4; cursor: not-allowed; }
body :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
body button:hover:not(:disabled) { border-color: var(--accent); }
body main :is(input, textarea, select) { color: var(--text); border-color: var(--line); }
body main input:not(#timer-minutes):not(#timer-seconds) { min-height: 44px; }
body main svg { flex-shrink: 0; }

body .workshop-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
body #fs-btn { min-height: 40px; padding: 8px 12px; border-color: var(--line); }

/* Page titles retain original filenames as document labels. */
body :is(.workshop-page-title, .hero) { width: min(1320px, calc(100% - 96px)); margin: 0 auto; padding: 48px 0 56px; text-align: left; border: 0; border-bottom: 1px solid var(--line); }
body .workshop-file { display: flex; align-items: center; gap: 10px; color: var(--muted); }
body .workshop-filename { font: 12px/1.8 var(--mono); margin: 0; overflow-wrap: anywhere; }
body .workshop-file svg { width: 16px; height: 16px; flex-shrink: 0; }
body :is(.workshop-page-title h1, .hero h1) { max-width: 1150px; margin: 24px 0 0; font: 400 clamp(64px, 8vw, 112px)/.95 var(--display); letter-spacing: 0; text-wrap: balance; color: var(--text); }
body .hero h1 span { color: var(--accent); }
body .hero-badge { padding: 0; margin: 0; border: 0; border-radius: 0; background: none; font: 12px/1.8 var(--mono); letter-spacing: .1em; color: var(--accent); }
body .hero-description { max-width: 760px; margin: 28px 0 0; font-size: 14px; line-height: 1.9; }

/* The original reading order, grids, tables and form controls stay intact. */
body > main[class] { width: min(1120px, calc(100% - 96px)); max-width: none; margin: 0 auto; padding: 48px 0 80px; }
body > main.guide { width: min(1120px, calc(100% - 96px)); padding-top: 0; }
body main > section + section { margin-top: 56px; }
body main :is(h2[class], .section-title) { font: 400 42px/1.15 var(--display); letter-spacing: 0; text-transform: none; color: var(--text); }
body main h2 > span { color: var(--accent); }
body main h3, body main h3[class] { font: 400 30px/1.2 var(--display); color: var(--text); }
body main h2, body main h2[class] { margin-bottom: 24px; }
body main h3, body main h3[class] { margin-bottom: 18px; }
body main :is(.objective-card, .rules-tips-card, .name-card, .part-card), body main #timer-card { padding: 28px; }
body main .absolute.w-1 { display: none; }
body main .objective-card, body main > section:first-child > .shadow-lg { padding: 0 0 32px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
body main .rules-tips-grid { gap: 32px; }
body main .rules-tips-card { padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
body main .rules-tips-card li { line-height: 1.8; }
body main > section > .grid > .rounded-lg { padding: 28px; background: transparent; }
body main .part-label { font-size: 14px; }
body #timer-card { border-color: var(--line); }
body #timer-card h3 { color: var(--muted); font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
body #timer-start { background: var(--accent); color: #000; border-color: var(--accent); padding-inline: 20px; }
body #action-buttons { flex-wrap: wrap; }
body #total-display { font-weight: 400; }
body.fs-mode > main[class] { width: 96vw; }
body.fs-mode .workshop-page-title { width: 96vw; }

/* Prime guide: readable, open sections and the same square workbench controls. */
body .guide .section { padding: 48px 0; margin: 0; }
body .guide .section > p { max-width: 900px; font-size: 14px; line-height: 1.9; }
body .section-label { gap: 24px; margin-bottom: 28px; }
body .section-number { border: 0; padding: 0; min-width: 24px; background: none; color: var(--accent); }
body .rules-list { gap: 0; }
body .rules-list li { padding: 22px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 14px; }
body .rule-marker { color: var(--accent); }
body .rules-list li strong { white-space: normal; }
body .levels-grid { gap: 28px; }
body .level-card { padding: 24px 0; border: 0; border-top: 1px solid var(--accent); background: transparent; }
body .level-card h3 { font: 400 30px/1.2 var(--display); }
body .level-tag { border: 0; padding: 0; background: none; color: var(--accent); }
body .code-header { padding: 12px 20px; }
body .cm { color: var(--muted); }
body .docs-search-input { background: #080808; font-family: var(--mono); }
body .docs-category-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
body .docs-card { padding: 24px; background: transparent; }
body main .docs-card h3.docs-title { font: 600 17px/1.5 var(--mono); margin-bottom: 0; overflow-wrap: anywhere; }
body .docs-code, body .docs-code.collapsed { background: #080808; }
body :is(.docs-title, .docs-summary, .docs-code, .docs-card, .docs-search-row) { min-width: 0; }
body :is(.docs-badge, .docs-tag) { background: transparent; }

@media (max-width: 1000px) {
  body .levels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body :is(.workshop-page-title, .hero), body > main[class] { width: calc(100% - 48px); }
  body #auto-save-indicator { order: 2; }
  body :is(.workshop-page-title, .hero) { padding: 32px 0 36px; }
  body :is(.workshop-page-title h1, .hero h1) { font-size: clamp(52px, 12vw, 72px); text-wrap: initial; }
  body .workshop-filename { font-size: 10px; }
  body > main[class] { padding: 36px 0 56px; }
  body > main.guide { padding-top: 0; }
  body main :is(h2[class], .section-title) { font-size: 34px; }
  body main h3, body main h3[class] { font-size: 28px; }
  body main :is(.name-card, .part-card), body main #timer-card, body main > section > .grid > .rounded-lg { padding: 20px; }
  body main .rules-tips-grid { gap: 0; }
  body .guide .section { padding: 36px 0; }
  body .section-label { gap: 14px; }
  body .docs-card { padding: 18px; }
  body .docs-card-top, body .docs-card-actions { flex-direction: column; align-items: flex-start; }
  body .docs-action-group { margin-left: 0; }
  body .rules-list li { gap: 14px; }
  body .json-modal-box { padding: 20px; }
}

body .rules-list li:first-child, body .rules-list li:last-child { border-radius: 0; }

body #viewing-banner.hidden + #instructions-section { margin-top: 0; }
body .part-grid, body .part-grid > div, body .part-grid input { min-width: 0; }