/* LuaRN v1.8.0 responsive design and layout safety layer */
:root { --lrn-content-max: 1380px; --lrn-page-gutter: clamp(12px, 3vw, 42px); }
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; min-width: 320px; max-width: 100%; overflow-x: clip; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; min-width: 320px; max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
.app-shell, .shell { width: min(var(--lrn-content-max), 100%); max-width: 100%; margin-inline: auto; min-width: 0; }
.app-shell { padding-left: var(--lrn-page-gutter); padding-right: var(--lrn-page-gutter); }
.shell { padding-left: clamp(12px, 2.5vw, 28px); padding-right: clamp(12px, 2.5vw, 28px); }
.topbar, .top, .topbar-right, .suite-nav, .hero, .workspace-heading, .panel-heading, .endpoint-panel, footer { min-width: 0; }
.topbar, .top, .topbar-right, .suite-nav, .hero-actions, .hero-links, .button-row, .key-actions, .endpoint-links, .api-dashboard-actions { flex-wrap: wrap; }
.suite-nav { max-width: 100%; }
.suite-nav a, .api-nav-link, .local-pill, .version-pill { max-width: 100%; }
.brand, .brand-text, .brand-copy, .heading-copy, .file-info, .output-result, .source-editor-wrap, .code-editor, .workflow-step, .api-doc-card, .key-card, .panel { min-width: 0; }
.workspace-grid, .api-cards-grid, .grid, .layout, .grid-two, .columns, .form-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-grid > *, .api-cards-grid > *, .grid > *, .layout > *, .grid-two > *, .columns > *, .form-grid > *, .stats > * { min-width: 0; }
pre, code, textarea, input, select, button { max-width: 100%; }
pre, code, .api-code, .token, .snippet, .created code, .created pre, .api-reference-table code { overflow-wrap: anywhere; word-break: break-word; }
pre, .api-code, .token, .snippet, .output-code { max-width: 100%; }
input, select, textarea { min-width: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
:focus-visible { outline-color: #a8ceff; outline-offset: 3px; }
.output-format-control.output-contract { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid rgba(141,187,243,.18); border-radius: 12px; background: linear-gradient(135deg, rgba(141,187,243,.06), rgba(255,255,255,.015)); }
.output-contract > span { color: #9eacc0; font: 800 9px/1.4 ui-monospace, monospace; letter-spacing: .13em; }
.output-contract > strong { color: #e1efff; font-size: 12px; }
.output-contract > small { color: #91a0b2; font-size: 11px; line-height: 1.65; }
@media (max-width: 980px) {
  :root { --lrn-page-gutter: clamp(14px, 2.5vw, 26px); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-heading { align-items: flex-start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns, .grid-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .topbar, .top { align-items: flex-start; justify-content: space-between; height: auto; min-height: 0; padding-top: 12px; padding-bottom: 14px; }
  .topbar-right { flex: 1 1 100%; justify-content: flex-start; }
  .suite-nav { justify-content: flex-start; gap: 6px; width: 100%; }
  .suite-nav a { flex: 0 1 auto; padding: 8px 9px; font-size: 11px; white-space: normal; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-copy { min-width: 0; }
  .hero-visual { width: min(100%, 460px); margin-inline: auto; }
  .workspace-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .engine-chip, .api-status-pill, .status-strip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .api-section-heading { flex-direction: column; align-items: flex-start; }
  .api-cards-grid, .grid, .layout { grid-template-columns: minmax(0, 1fr); }
  .api-wide-card { grid-column: auto; }
  .endpoint-panel { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .full { grid-column: auto; }
  .api-reference-table > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .panel-heading { align-items: flex-start; }
  .api-doc-card { padding: clamp(14px, 4vw, 20px); }
}
@media (max-width: 480px) {
  :root { --lrn-page-gutter: 12px; }
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .shell { padding-left: 12px; padding-right: 12px; }
  .brand { gap: 8px; }
  .brand-copy small, .brand-text small { letter-spacing: .07em; }
  .local-pill, .version-pill { white-space: normal; overflow-wrap: anywhere; font-size: 8px; }
  .hero h1 { font-size: clamp(2.15rem, 11.5vw, 3.1rem); letter-spacing: -.06em; overflow-wrap: anywhere; }
  .hero-description { font-size: 13px; }
  .hero-points { gap: 9px 12px; }
  .hero-points span { min-width: 0; }
  .panel, .source-panel, .result-panel { padding: clamp(13px, 3.5vw, 18px); border-radius: 14px; }
  .panel-heading { gap: 9px; }
  .step-badge { white-space: normal; }
  .output-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .output-metrics > div { min-width: 0; padding-inline: 5px; }
  .output-metrics > div > span { white-space: normal; }
  .output-metrics strong { overflow-wrap: anywhere; }
  .code-editor { grid-template-columns: 32px minmax(0, 1fr); }
  .output-code { min-width: 0; font-size: 11px; padding-inline: 10px; overflow: auto; }
  .button-row > *, .hero-actions > *, .api-dashboard-actions > * { max-width: 100%; }
  .key-actions button { flex: 1 1 120px; }
  .stats { gap: 8px; }
  .stats article { min-width: 0; padding: 12px; }
  .stats strong { font-size: clamp(20px, 7vw, 27px); overflow-wrap: anywhere; }
  .chart { gap: 3px; }
  .day-bar time { white-space: normal; text-align: center; overflow-wrap: anywhere; }
  footer { flex-wrap: wrap; gap: 10px 14px; }
}
@media (max-width: 350px) {
  .suite-nav a { flex: 1 1 calc(50% - 6px); }
  .output-metrics { grid-template-columns: minmax(0, 1fr); }
  .output-metrics > div { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 0; }
  .output-metrics > div:last-child { border-bottom: 0; }
  .hero h1 { font-size: 2.1rem; }
  .floating-chip { max-width: 49%; white-space: normal; }
}
/* Consistent surfaces, focus treatment, and lightweight interaction feedback. */
:root { --lrn-focus: rgba(145, 190, 245, .68); --lrn-surface-border: rgba(145, 177, 216, .19); }
a { text-underline-offset: .18em; }
.panel, .stats article, .api-doc-card, .key-card, .luarn-widget-card { border-color: var(--lrn-surface-border); }
.panel, .stats article, .api-doc-card, .key-card { box-shadow: 0 14px 44px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.018); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--lrn-focus); outline-offset: 2px; }
.primary, .secondary, .primary-button, .secondary-button, .download-button, .hero-cta, .api-action-button, .luarn-widget-primary, .luarn-widget-secondary { transition: border-color .16s ease, background-color .16s ease, filter .16s ease, transform .16s ease; }
.primary:not(:disabled):hover, .secondary:not(:disabled):hover, .primary-button:not(:disabled):hover, .secondary-button:not(:disabled):hover, .download-button:not(:disabled):hover, .hero-cta:hover, .api-action-button:not(:disabled):hover, .luarn-widget-primary:not(:disabled):hover, .luarn-widget-secondary:not(:disabled):hover { filter: brightness(1.06); }
.api-input, .panel input, .panel select, .input, .luarn-widget-input, .luarn-widget-textarea { min-width: 0; max-width: 100%; }
.api-message, .message, .process-note, .engine-notice p, .notice p { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .panel { transition: border-color .18s ease, box-shadow .18s ease; }
  .panel:hover { border-color: rgba(145,177,216,.27); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Single-line output option */
.format-toggle { display:flex; align-items:flex-start; gap:10px; min-width:0; cursor:pointer; margin-top:5px; }
.format-toggle input { flex:0 0 auto; width:17px; height:17px; margin:1px 0 0; accent-color:#90bcef; }
.format-toggle-copy { display:grid; gap:4px; min-width:0; }
.format-toggle-copy > strong { color:#e1efff; font-size:12px; }
.format-toggle-copy > small { color:#91a0b2; font-size:11px; line-height:1.65; }
.format-toggle:focus-within { outline:2px solid rgba(141,187,243,.65); outline-offset:4px; border-radius:4px; }