/* Web App Shell visual system v0.1.2. Portable, dependency-free source. */
:root {
  color-scheme: light;
  --shell-bg: #e7ecf3;
  --shell-bg-top: #f2f5f9;
  --shell-surface: rgba(248, 250, 253, .94);
  --shell-solid: #fbfcfe;
  --shell-soft: #e7ecf3;
  --shell-hover: #dde5ef;
  --shell-canvas: #fbfaf6;
  --shell-text: #202735;
  --shell-muted: #687386;
  --shell-border: rgba(44, 55, 72, .13);
  --shell-border-strong: rgba(44, 55, 72, .21);
  --shell-focus: rgba(10, 102, 255, .19);
  --shell-accent: #0a66ff;
  --shell-shadow: 0 1px 2px rgba(17,24,39,.04), 0 6px 18px rgba(17,24,39,.05);
  --shell-float: 0 18px 50px rgba(17,24,39,.16), 0 3px 12px rgba(17,24,39,.08);
  --shell-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --shell-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { background: linear-gradient(180deg, var(--shell-bg-top), var(--shell-bg)); color: var(--shell-text); font-family: var(--shell-font-body); letter-spacing: -.008em; }
button, input, textarea { font-family: var(--shell-font-body); }
button { border: 1px solid var(--shell-border); border-radius: 9px; background: linear-gradient(180deg, var(--shell-solid), var(--shell-soft)); color: var(--shell-text); min-height: 34px; padding: 7px 12px; box-shadow: 0 1px 1px rgba(0,0,0,.025); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
button:hover { background: var(--shell-hover); border-color: var(--shell-border-strong); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--shell-focus); }
.shell-save-unavailable { margin: -2px 0 2px; color: var(--shell-muted); font-size: 11px; line-height: 1.25; }
[data-settings-panel] [data-shell-save]:disabled { cursor: not-allowed; opacity: .55; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.topbar { position: relative; z-index: 20; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px 9px; background: var(--shell-surface); border: 1px solid var(--shell-border); border-radius: 18px; box-shadow: var(--shell-shadow); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
.shell-brand { flex: 1 1 210px; min-width: 0; overflow: hidden; }
.shell-brand h1 { overflow: hidden; margin: 0; color: var(--shell-text); font-family: var(--shell-font-heading); font-size: 24px; font-weight: 760; line-height: 1.05; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.shell-subtitle { margin-top: 4px; color: var(--shell-text); font-size: 14px; font-weight: 560; letter-spacing: .01em; }
.shell-description { margin-top: 3px; color: var(--shell-muted); font-size: 12px; font-weight: 400; }
.toolbar { flex: 0 0 auto; min-width: 0; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; -ms-overflow-style: none; scrollbar-width: none; }
.toolbar::-webkit-scrollbar, .shell-action-row::-webkit-scrollbar { display: none; }
.shell-action-row { display: flex; flex: 1 0 100%; align-items: center; justify-content: flex-end; gap: 6px; overflow-x: auto; overflow-y: visible; padding-top: 0; -ms-overflow-style: none; scrollbar-width: none; }
.shell-action-row > button { min-height: 34px; font-size: 11px; font-weight: 650; letter-spacing: .045em; white-space: nowrap; }
.toolbar > button { min-height: 34px; font-size: 11px; font-weight: 650; letter-spacing: .045em; white-space: nowrap; }
.shell-preview-controls { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--shell-border); border-radius: 10px; background: rgba(251,252,254,.72); }
.shell-preview-controls button, .shell-search > button, .shell-settings > button { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid var(--shell-border); border-radius: 9px; background: var(--shell-solid); box-shadow: 0 1px 1px rgba(0,0,0,.025); }
.shell-preview-controls button[aria-pressed="true"] { background: var(--shell-solid); box-shadow: var(--shell-shadow); }
.shell-preview-controls svg, .shell-search svg, .shell-settings svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shell-search, .shell-settings { position: relative; display: inline-flex; flex: 0 0 auto; }
.shell-settings { width: 34px; height: 34px; }
.shell-search { width: 34px; height: 34px; transition: width 180ms ease; }
.shell-search:has([data-search-toggle][aria-expanded="true"]) { width: clamp(190px, 20ch, 230px); }
.shell-search [data-search-panel] { position: absolute; z-index: 1300; top: 0; right: 0; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--shell-border); border-radius: 10px; background: var(--shell-solid); box-shadow: var(--shell-shadow); }
.shell-search [data-search-panel][hidden], [data-settings-panel][hidden] { display: none; }
.shell-search [data-search-panel] input { flex: 1 1 auto; width: 0; min-width: 0; height: 32px; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--shell-text); }
.shell-search [data-search-panel] input:focus-visible { outline: 0; box-shadow: none; }
.shell-search [data-search-count] { flex: 0 0 auto; min-width: 50px; color: var(--shell-muted); font-size: 12px; font-weight: 650; text-align: center; white-space: nowrap; }
.shell-search [data-search-close] { flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; box-shadow: none; }
.shell-search [data-search-results] { position: absolute; top: calc(100% + 7px); left: 0; right: 0; display: grid; gap: 3px; max-height: min(42vh, 280px); overflow: auto; padding: 6px; border: 1px solid var(--shell-border); border-radius: 12px; background: var(--shell-solid); box-shadow: var(--shell-float); }
.shell-search [data-search-results]:empty { display: none; }
.shell-search [data-search-results] button { min-height: 30px; padding: 6px 8px; border: 0; background: transparent; text-align: left; box-shadow: none; }
.shell-search [data-search-results] button:hover { background: var(--shell-hover); }
[data-settings-backdrop] { position: fixed; z-index: 2147483646; inset: 0; background: rgba(32, 39, 53, .12); }
[data-settings-backdrop][hidden] { display: none; }
[data-settings-panel] { position: fixed; z-index: 2147483647; top: 54px; right: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 54px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 18px; border: 1px solid var(--shell-border-strong); border-radius: 16px; background: var(--shell-solid); box-shadow: var(--shell-float); }
[data-settings-panel]::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shell-settings-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--shell-text); font-size: 13px; letter-spacing: .08em; }
.shell-settings-panel-heading [data-settings-close] { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; box-shadow: none; }
[data-settings-panel] button { width: 100%; text-align: left; }
[data-settings-panel] .shell-settings-panel-heading button { width: 30px; text-align: center; }
.shell-settings-field { display: grid; gap: 5px; color: var(--shell-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.shell-settings-field input[type="text"] { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--shell-border); border-radius: 9px; background: var(--shell-surface); color: var(--shell-text); font-size: 14px; font-weight: 500; letter-spacing: -.008em; }
.print-layout-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--shell-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.print-layout-field legend { padding: 0; }
.print-orientation-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.print-orientation-option { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--shell-border); border-radius: 9px; background: var(--shell-surface); color: var(--shell-text); font-size: 12px; font-weight: 600; letter-spacing: normal; cursor: pointer; }
.print-orientation-option:has(input:checked) { border-color: var(--shell-accent); box-shadow: 0 0 0 1px var(--shell-accent); }
.print-orientation-option:has(input:focus-visible) { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
.print-orientation-option input { inline-size: 15px; block-size: 15px; margin: 0; accent-color: var(--shell-accent); }
.print-orientation-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 20px; color: currentColor; }
.print-orientation-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.print-layout-hint { margin: -3px 0 0; color: var(--shell-muted); font-size: 11px; line-height: 1.35; }
.shell-settings-field:has(input[type="color"]) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.shell-settings-field input[type="color"] { width: 28px; min-width: 28px; height: 28px; padding: 2px; border: 1px solid var(--shell-border); border-radius: 5px; background: var(--shell-surface); cursor: pointer; }
.drawing-replacement { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--shell-border); border-radius: 10px; background: var(--shell-surface); }
.drawing-replacement > strong, .drawing-source-choice legend, .drawing-url-form > label, .drawing-current-source-label { color: var(--shell-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.drawing-replacement p { margin: 0; color: var(--shell-muted); font-size: 11px; line-height: 1.35; }
.drawing-source-choice { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.drawing-source-choice legend { padding: 0; }
.drawing-replacement input[type="file"] { width: 100%; color: var(--shell-text); font-size: 12px; }
.drawing-url-form { display: grid; gap: 5px; }
.drawing-url-form > div { display: flex; gap: 6px; }
.drawing-url-form input { min-width: 0; flex: 1 1 auto; min-height: 34px; padding: 7px 9px; border: 1px solid var(--shell-border); border-radius: 9px; background: var(--shell-solid); color: var(--shell-text); font-size: 12px; }
[data-settings-panel] .drawing-url-form button { width: auto; min-height: 34px; padding: 7px 9px; white-space: nowrap; font-size: 12px; }
.drawing-current-source { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.drawing-current-source p { overflow-wrap: anywhere; color: var(--shell-text); }
.remove-drawing-button { justify-self: start; width: auto !important; min-height: 32px !important; padding: 6px 9px !important; color: #832b2b; font-size: 12px; }
.remove-drawing-button:disabled { cursor: not-allowed; opacity: .48; }
.drawing-replacement-status[data-error="true"] { color: #a63825; }
.presentation-publish-status { margin: -3px 0 1px; color: var(--shell-muted); font-size: 11px; line-height: 1.35; }
.presentation-publish-status[data-error="true"] { color: #a63825; }
[data-settings-panel] #publishPresentationButton:disabled { cursor: progress; opacity: .68; }
.shell-settings-about { display: grid; gap: 2px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--shell-border); color: var(--shell-muted); font-size: 11px; line-height: 1.35; }
.media-backfill { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--shell-border); color: var(--shell-muted); font-size: 11px; line-height: 1.4; }
.media-backfill[hidden] { display: none; }
.media-backfill > strong { color: var(--shell-text); letter-spacing: .08em; }
.media-backfill p { margin: 0; }
.media-backfill-status[data-error="true"] { color: #9b2c2c; }
.shell-settings-about strong { color: var(--shell-text); font-weight: 650; }

/* Preview states match the real device widths while keeping the canvas
   coordinate system contained in the preview body. */
html[data-preview-size="tablet"] body { width: min(820px, 100vw); margin-inline: auto; }
html[data-preview-size="phone"] body { width: min(390px, 100vw); margin-inline: auto; }
html[data-preview-size="phone"] .topbar { padding: 8px; gap: 8px; }
html[data-preview-size="phone"] .shell-brand { min-width: 0; }
html[data-preview-size="phone"] .shell-brand h1 { font-size: 21px; }
html[data-preview-size="phone"] .shell-subtitle,
html[data-preview-size="phone"] .shell-description { display: none; }
html[data-preview-size="tablet"] .toolbar,
html[data-preview-size="tablet"] .shell-action-row { width: 100%; justify-content: flex-start; }
html[data-preview-size="phone"] .toolbar > button { min-height: 30px; padding: 5px 8px; }
html[data-preview-size="phone"] .shell-preview-controls button,
html[data-preview-size="phone"] .shell-search > button,
html[data-preview-size="phone"] .shell-settings > button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
html[data-preview-size="phone"] .shell-search { height: 30px; width: 30px; }
html[data-preview-size="phone"] .shell-settings { height: 30px; width: 30px; }
html[data-preview-size="phone"] .shell-search:has([data-search-toggle][aria-expanded="true"]) { width: min(100%, 270px); }
html[data-preview-size="phone"] [data-settings-panel] { top: 52px; right: max(8px, calc((100vw - min(390px, 100vw)) / 2 + 8px)); }
/* Tablet preview keeps the brand/utilities on row one and the drawing
   actions on their own full-width row.  Grid avoids the old flex/100%-basis
   interaction that could collapse the brand when nowrap was active. */
html[data-preview-size="tablet"] .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; flex-wrap: initial; padding: 9px 12px; }
html[data-preview-size="tablet"] .shell-brand { grid-column: 1; grid-row: 1; min-width: 0; }
html[data-preview-size="tablet"] .toolbar { width: auto; justify-content: flex-end; }
html[data-preview-size="tablet"] .shell-utility-toolbar { grid-column: 2; grid-row: 1; }
html[data-preview-size="tablet"] .shell-action-row { grid-column: 1 / -1; grid-row: 2; width: auto; justify-content: flex-end; }
html[data-preview-size="tablet"] [data-settings-panel] { top: 52px; right: max(12px, calc((100vw - min(820px, 100vw)) / 2 + 12px)); }

/* Phone previews keep their compact utilities beside the brand. The direct
   drawing actions intentionally occupy a separate second row. */
html[data-preview-size="phone"] .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; flex-direction: initial; flex-wrap: initial; }
html[data-preview-size="phone"] .shell-brand { grid-column: 1; grid-row: 1; min-width: 0; }
html[data-preview-size="phone"] .shell-utility-toolbar { display: flex; grid-column: 2; grid-row: 1; width: auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; overflow: visible; }
html[data-preview-size="phone"] .shell-action-row { grid-column: 1 / -1; grid-row: 2; width: auto; justify-content: flex-start; }

@media (min-width: 1025px) {
  body { padding: 12px; gap: 10px; }
  .sheet { min-height: 0; overflow: hidden; border: 1px solid var(--shell-border-strong); border-radius: 20px; background: var(--shell-canvas); box-shadow: 0 18px 46px rgba(28,39,58,.13), 0 2px 8px rgba(28,39,58,.06); }
  .workspace { border-radius: 19px; }
}
@media (max-width: 1024px) {
  body { padding: 0; }
  .topbar, .sheet, .workspace { border-radius: 0; box-shadow: none; }
  .toolbar { flex: 0 0 auto; width: auto; justify-content: flex-end; }
  .shell-action-row { width: 100%; justify-content: flex-start; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  /* Real intermediate widths use the same stable two-row structure as the
     tablet preview, rather than letting three flex items distribute across
     expanded wrap lines. */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; flex-wrap: initial; padding: 9px 12px; }
  .shell-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .shell-utility-toolbar { grid-column: 2; grid-row: 1; width: auto; justify-content: flex-end; }
  .shell-action-row { grid-column: 1 / -1; grid-row: 2; width: auto; justify-content: flex-end; }
}
@media (max-width: 700px) {
  /* Match the phone preview in real narrow windows. The previous column flex
     layout interpreted the action row's 100% basis as header height, leaving
     a large empty banner before the canvas. */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; flex-direction: initial; flex-wrap: initial; padding: 8px; }
  .shell-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .shell-brand h1 { font-size: 21px; }
  .shell-subtitle, .shell-description { display: none; }
  .toolbar { width: auto; justify-content: flex-end; gap: 6px; }
  .shell-utility-toolbar { display: flex; grid-column: 2; grid-row: 1; width: auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; overflow: visible; }
  .shell-action-row { grid-column: 1 / -1; grid-row: 2; width: auto; flex: 0 0 auto; justify-content: flex-start; gap: 6px; }
  .shell-action-row > button { flex: 0 0 auto; }
  .shell-search:has([data-search-toggle][aria-expanded="true"]) { width: min(100%, 270px); }
}
@media print {
  body { padding: 0; gap: 0; background: #fff; }
  .topbar, .sheet { border-radius: 0; box-shadow: none; }
  .sheet { border: 0; background: transparent; }
}
/* Shared Chrona-style canvas zoom rail. Hosts place it in a positioned
   workspace; this layer owns presentation only, never scene geometry. */
.shell-zoom-rail {
  position: absolute; z-index: 50; top: 18px; right: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: auto; padding: 8px 7px 9px;
  border: 1px solid rgba(0,0,0,.10); border-radius: 13px;
  background: rgba(246,246,248,.84);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08);
  pointer-events: auto;
}
.shell-zoom-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0;
  border: 1px solid rgba(0,0,0,.10); border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.06)), rgba(246,246,248,.84);
  color: #202735; font-size: 23px; font-weight: 380; line-height: 1;
  box-shadow: 0 4px 14px rgba(17,24,39,.10);
  backdrop-filter: blur(24px) saturate(1.45); -webkit-backdrop-filter: blur(24px) saturate(1.45);
}
.shell-zoom-button:hover { box-shadow: 0 6px 18px rgba(17,24,39,.14); }
.shell-zoom-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(17,24,39,.12); }
.shell-zoom-button:disabled { cursor: not-allowed; opacity: .48; }
.shell-zoom-reset { font-size: 18px; font-weight: 520; }
.canvas-state-saved-notice {
  position: fixed; z-index: 120;
  max-width: min(220px, calc(100vw - 24px)); padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px;
  background: #fff; color: #202735;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  font-size: 13px; font-weight: 650; line-height: 1.2;
  pointer-events: none;
}
.shell-zoom-scale { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #555b63; font-size: 11px; font-weight: 650; letter-spacing: .045em; line-height: 1; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.shell-zoom-scale input[type="range"] { width: 30px; height: 152px; margin: 0; padding: 0; accent-color: #555b63; writing-mode: vertical-lr; direction: rtl; cursor: ns-resize; }
.shell-zoom-scale input[type="range"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--shell-focus); }
@media print { .shell-zoom-rail { display: none; } }