/* Presentations: the editor. Dark, like the other ITpris Verktyg tools. Desktop: slides | canvas | inspector.
   Phones (under 700 px): canvas on top, the slides as a strip; the inspector is a bottom sheet. */
:root {
  --bg: #0e0e10; --panel: #16161a; --panel2: #1e1e24; --line: #2a2a31; --line2: #3a3a44;
  --text: #f1ede4; --dim: #a29e95; --acc: #a2fff6; --acc-ink: #0e0e10; --danger: #ff6b86; --focus: #5ad1ff;
}
/* Light, for the Light theme (theme.js sets data-theme light; Classic 98 and the dark themes keep the dark palette above). */
:root[data-theme="light"] {
  --bg: #ebe7de; --panel: #f8f6f1; --panel2: #efebe3; --line: #dcd6c9; --line2: #c9c2b3;
  --text: #0a0a0a; --dim: #55514a; --acc: #006f64; --acc-ink: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow-x: hidden; }
body { font: 14px/1.4 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-flex { flex: 1 1 auto; }

.app { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }   /* top bar, document tabs, the editor, status */
.body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 272px; min-height: 0; }

/* top bar */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; white-space: nowrap; }
/* The shared header buttons (Drive, Tour, View, Theme, Apps: shared/ui/hbtn.css) wear the look of .tb-btn. */
.top { --tlbx-hbtn-h: 34px; --tlbx-hbtn-bg: var(--panel2); --tlbx-hbtn-line: var(--line); --tlbx-hbtn-fs: 14px; }
.brand { display: grid; place-items: center; width: 30px; height: 30px; color: var(--acc); flex: 0 0 auto; }
.brand svg { width: 24px; height: 24px; fill: currentColor; }
.appname b { font-family: Archivo, "Inter Tight", sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.doc-title input { width: 180px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; font-weight: 600; }
.doc-title input:hover, .doc-title input:focus { border-color: var(--line2); background: var(--panel2); outline: none; }
.tb-group { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-left: 1px solid var(--line); flex: 0 0 auto; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.tb-btn:hover:not(:disabled) { border-color: var(--line2); }
.tb-btn:disabled { opacity: 0.4; cursor: default; }
.tb-btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; }
.tb-btn.icon { min-width: 34px; padding: 0 8px; font-size: 16px; line-height: 1; }
.sel { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
.sel select { height: 34px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; max-width: 160px; }
@media (max-width: 1320px) { .appname { display: none; } }
/* Desktop: two rows. The first holds the document, Save, Present and the shared buttons; the Insert tools and the
   Layout/Theme selects (.tb-tools) sit on a toolbar row under a full-width rule (.top::after). Orders above 999: the
   View slot (shared/viewmode/viewmode.css) keeps the end of the first row. */
@media (min-width: 701px) {
  .top { padding-bottom: 6px; }
  .top::after { content: ""; order: 1000; flex: 0 0 calc(100% + 28px); height: 1px; margin: 2px -14px 0; background: var(--line); }
  .top .tb-tools { order: 1001; }
  .top .tb-tools:not(.tb-tools ~ .tb-tools) { border-left: 0; padding-left: 0; }
}
.save-state { color: var(--dim); font-size: 12px; padding: 0 6px; flex: 0 0 auto; }
.save-state.dirty { color: var(--acc); }

/* slides */
.slides-pane { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.slides-list { list-style: none; margin: 0; padding: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.thumb-li { position: relative; flex: 0 0 auto; }
.thumb { position: relative; display: block; width: 100%; padding: 4px; background: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; color: var(--dim); }
.thumb:hover { border-color: var(--line2); }
.thumb.on { border-color: var(--acc); color: var(--text); }
.thumb.hid .thumb-cv { opacity: 0.35; }
.thumb-cv { display: block; width: 100%; height: auto; border-radius: 4px; background: #202026; }
.thumb-n { position: absolute; left: 10px; bottom: 10px; font-size: 11px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); color: #fff; }
.thumb.drop-before { box-shadow: 0 -4px 0 var(--focus); }
.thumb.drop-after { box-shadow: 0 4px 0 var(--focus); }
.slide-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-top: 1px solid var(--line); }
.slide-tools button { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; cursor: pointer; }
.slide-tools button:hover { border-color: var(--line2); }

/* canvas */
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #16161a; }
.ss-drop { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 6; }
.stage canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.editor { position: absolute; z-index: 2; margin: 0; border: 1px dashed var(--focus); border-radius: 2px; outline: none; resize: none; overflow: hidden; background: rgba(14, 14, 16, 0.25); white-space: pre-wrap; word-wrap: break-word; }
.editor[hidden] { display: none; }

/* inspector */
.inspector { min-height: 0; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 4px 0 24px; }
.inspector.sf-has-foot { display: flex; flex-direction: column; padding-bottom: 0; }   /* Save and Present at its foot (ui/main.js) */
.inspector.sf-has-foot > * { flex-shrink: 0; }
.grp { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.grp h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.row > span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row input[type="number"], .row input[type="text"], .row select, .row textarea { width: 100%; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.row textarea { resize: vertical; }
.row input[type="color"] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.row input[type="checkbox"] { justify-self: start; width: 16px; height: 16px; accent-color: var(--acc); }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btns button { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; cursor: pointer; font-size: 13px; }
.btns button:hover { border-color: var(--line2); }
.btns button.danger { color: var(--danger); }
.hint { color: var(--dim); padding: 0 16px; }
.anim { border-top: 1px solid var(--line); padding: 8px 0 2px; }
.anim-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.anim-head select { flex: 1 1 auto; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.anim-head button { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.anim-head button:disabled { opacity: 0.35; cursor: default; }
.anim-head button.danger { color: var(--danger); }
.anim-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.anim-add select { min-width: 0; flex: 1 1 110px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.anim-add button { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; cursor: pointer; font-size: 13px; }

/* status */
.status { display: flex; align-items: center; gap: 16px; padding: 6px 14px; background: var(--panel); border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; }

/* present */
.present { position: fixed; inset: 0; z-index: 5000; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.present canvas { display: block; }
.present.black canvas { visibility: hidden; }
.present-count { position: absolute; right: 16px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.present-count.show { opacity: 1; }
.present-stage { position: relative; overflow: hidden; background: #000; }
.present-layer { position: absolute; left: 0; top: 0; display: block; }

/* template dialogs: starter and saved templates as cards with a preview of the first slide */
.tpl-dlg { width: min(720px, calc(100vw - 32px)); }
.tpl-h { margin: 14px 0 8px; font: 600 13px/1.2 "Inter Tight", system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.tpl-h:first-child { margin-top: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); padding: 8px; min-width: 0; }
.tpl-pick { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; min-width: 0; }
.tpl-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #000; }
.tpl-none { background: repeating-linear-gradient(45deg, var(--panel) 0 8px, var(--line) 8px 16px); }
.tpl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.tpl-sub { color: var(--dim); font-size: 12px; }
.tpl-acts { display: flex; gap: 6px; margin-top: 8px; }
.tpl-acts .sui-btn { padding: 4px 10px; font-size: 12px; }
.tpl-note { color: var(--dim); margin: 6px 0; }

/* shared dialogs and menus pick up the editor's tokens */
.sui-dlg { --sui-acc: var(--acc); }

@media (max-width: 1100px) {
  .body { grid-template-columns: 170px minmax(0, 1fr) 240px; }
}
.sl-phone { display: none; }
/* phones: one column, canvas first, then the slide strip; the inspector is a bottom sheet (ui/main.js, shared/ui/sheet.js
   gives its place, motion and ×), opened with Properties in the top bar */
@media (max-width: 700px) {
  .app { height: auto; min-height: 100%; display: flex; flex-direction: column; }
  .body { display: flex; flex-direction: column; min-height: 0; }
  .stage { order: 1; height: min(62vw, 58vh); min-height: 200px; border-bottom: 1px solid var(--line); }
  .slides-pane { order: 2; border-right: 0; border-bottom: 1px solid var(--line); }
  .slides-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 12px 16px; gap: 10px; }
  .thumb-li { width: 128px; }
  .slide-tools { border-top: 0; padding: 0 16px 12px; }
  .top .sl-phone { display: inline-flex; }
  .inspector { --ssh-z: 70; border-left: 0; padding: 0 0 24px; }   /* over the spotlight dock (z 60) */
  .grp { padding: 12px 16px; }
  .hint { padding: 0 16px; }
  .top { padding: 8px 16px; flex-wrap: wrap; row-gap: 6px; overflow: visible; }
  .top .tb-flex { display: none; }
  .tb-group { border-left: 0; padding: 0 6px 0 0; }
  .doc-title { flex: 1 1 150px; min-width: 0; }
  .doc-title input { width: 100%; }
  .sel select { max-width: 150px; }
  .status { display: none; }
  .row { grid-template-columns: 92px minmax(0, 1fr); }
}