/* Bókarbrúin — lifandi kennsluefni */
:root { --sidebar: 248px; }
.brand strong em { display:block; margin-top:3px; color:var(--teal-dark); font-size:.67rem; letter-spacing:.025em; font-style:normal; }
.brand strong { white-space:nowrap; }
.app-header { grid-template-columns:minmax(218px,var(--sidebar)) minmax(120px,1fr) auto; }
.button { min-height:42px; }
.package-actions { display:grid;gap:8px; margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line); }
.package-actions button,.package-link { padding:11px 12px;min-height:44px;text-align:left;border:1px solid #bdd3d2;background:#fff;border-radius:10px;color:var(--navy);font-weight:750;font-size:.78rem; }
.package-actions button:first-child { background:#e5f3ed;border-color:#b6d9cb;color:#076965; }
.package-actions small { font-size:.67rem;line-height:1.55;color:var(--muted); }
.library-panel .privacy-note { margin-top:8px; }
.editor-topbar { display:flex;flex-wrap:wrap;gap:10px; }
.editor-topbar .page-controls { margin-right:auto; }
#media-toggle { background:#e5f3ed; border-color:#bad9ce; }
#media-count { background:var(--teal-dark);color:#fff;border-radius:20px;padding:2px 7px; font-size:.7rem; }
.work-surface { display:grid;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;position:relative; }
.work-surface.has-media { grid-template-columns:minmax(0,1fr) 322px; }
.media-panel { min-height:0;overflow:auto;padding:20px 16px;background:#f9faf7;border-left:1px solid #c9dcd6; }
.media-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
.media-heading small { font-size:.59rem;letter-spacing:.12em;font-weight:800;color:var(--teal-dark); }
.media-heading h2 { font-size:1.12rem;letter-spacing:-.03em; margin:5px 0; }
.media-heading button,.dialog-heading>button { flex:none;width:40px;height:40px;border:1px solid #d2dfdc;border-radius:50%;background:white;color:var(--navy);font-size:1.3rem; }
.media-intro,.media-footnote { color:var(--muted);font-size:.75rem;line-height:1.55; }
.media-footnote { font-size:.65rem; }
.media-card { background:white;border:1px solid #d5e3dd; border-radius:16px;padding:14px;margin:14px 0;box-shadow:0 5px 14px #12342c06; }
.media-card-heading { display:flex;align-items:center;justify-content:space-between; }
.media-card-heading small { font-size:.58rem;letter-spacing:.12em;color:var(--teal-dark);font-weight:850; }
.media-card-heading button { background:transparent;border:0;font-size:1.15rem;color:var(--muted);min-width:36px;min-height:36px; }
.media-field { display:grid;gap:6px;font-size:.67rem;color:var(--muted);margin:6px 0 12px; }
.media-field input,.media-field textarea { width:100%;min-width:0;resize:vertical; padding:9px 10px;background:#fafcfb;border:1px solid #d7e4df;border-radius:8px;color:var(--ink);line-height:1.4; }
.media-field input { font-weight:750; }
.media-card audio,.media-card video { display:block;width:100%;max-height:330px;border-radius:10px;margin:10px 0; }
.media-card video { background:#092c45; }
.media-card a { display:inline-block;color:var(--teal-dark);font-weight:750;font-size:.73rem;padding:9px 0;text-underline-offset:3px; }
.youtube-holder { border-radius:12px;background:#0b3557;overflow:hidden; }
.youtube-play { min-height:140px;width:100%;background:linear-gradient(130deg,#0b3557,#0a625d);border:0;color:white;font-size:.9rem;font-weight:750; }
.youtube-holder iframe { display:block;width:100%;aspect-ratio:16/9;border:0; }
.media-help { font-size:.65rem;color:var(--muted);line-height:1.55; }
.empty-media { display:grid;gap:10px;text-align:center;padding:32px 14px;border:1px dashed #c4d8ce;border-radius:16px;margin:24px 0;color:var(--muted); }
.empty-media>span { width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#e3f0e6;font-size:1.8rem;margin:auto;color:var(--teal-dark); }
.empty-media strong { color:var(--navy); }
.empty-media p { margin:0;font-size:.77rem;line-height:1.6; }
.clip-controls { font-size:.69rem;margin:12px 0; }
.clip-controls summary { cursor:pointer;line-height:1.5;color:var(--teal-dark); }
.clip-fields { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0; }
.clip-fields label { display:grid;gap:5px; }
.clip-fields label:last-child { grid-column:1/-1;display:flex;align-items:center;gap:8px; }
.clip-fields input[type=number] { width:100%;min-height:36px;border:1px solid #ccdcd5;border-radius:6px;padding:5px; }
.clip-controls button { min-height:38px;border:1px solid #ccdcd5;border-radius:6px;background:#f1f7f3;color:var(--teal-dark);padding:6px 10px; }
.selection-tools { grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;background:#e8f6ee;border:1px solid #c1ded0;border-radius:10px;font-size:.73rem; }
.selection-tools strong { margin-right:auto; }
.selection-tools button { min-height:38px;border:1px solid #c1ded0;background:white;border-radius:8px;padding:7px 12px;color:var(--teal-dark);font-weight:750; }
.selection-tools label { display:flex;gap:8px;align-items:center; }
.selection-tools input { width:100px;accent-color:var(--teal-dark); }
.living-dialog { color:var(--ink);background:#fffefa;border:1px solid #cddfd7;border-radius:24px;padding:28px;width:min(650px,calc(100vw - 28px));max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #04263750; }
.living-dialog::backdrop { background:#072d4666;backdrop-filter:blur(3px); }
.dialog-heading { display:flex!important;justify-content:space-between!important;align-items:flex-start;gap:12px; }
.dialog-heading small { color:var(--teal-dark);font-weight:850;font-size:.62rem;letter-spacing:.13em; }
.dialog-heading h2 { margin:6px 0 12px;font-size:1.65rem;letter-spacing:-.04em;color:var(--navy); }
.dialog-hint { font-size:.78rem;color:var(--muted);line-height:1.6; }
.add-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 18px; }
.add-grid button { display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:5px;text-align:left;padding:17px 14px;background:#f6f8f2;border:1px solid #d5e2d6;border-radius:14px;color:var(--navy);transition:background .15s,transform .15s; }
.add-grid button:hover:not(:disabled) { background:#eaf4e8;transform:translateY(-2px); }
.add-grid button>span { grid-row:1/3;align-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:white;color:var(--teal-dark);font-size:1.6rem; }
.add-grid button strong { font-size:.89rem; }
.add-grid button small { font-size:.68rem;color:var(--muted);line-height:1.45; }
.package-link { width:100%;background:transparent; }
.text-editor-panel { position:fixed;inset:0;z-index:auto;display:block;gap:unset; }
.text-editor-panel:not([open]) { display:none; }
.text-editor-panel>label { display:block;font-size:.75rem;letter-spacing:0;margin:16px 0 8px; }
.text-editor-panel .rich-controls { display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:12px;padding:15px;background:#f0f5ee;border-radius:14px; }
.rich-controls label { display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.73rem; }
.rich-controls .size-stepper { display:flex;align-items:center;gap:6px; }
.rich-controls input[type=number] { width:60px;min-height:40px;text-align:center;border:1px solid #c7d9cf;border-radius:7px;background:#fff; }
.rich-controls input[type=color] { width:34px;height:34px;padding:2px;border:1px solid #c7d9cf;border-radius:7px; }
.rich-controls select { min-height:38px;max-width:145px;font-size:.73rem;border:1px solid #c7d9cf;border-radius:7px;background:#fff;padding:6px; }
.text-editor-panel button { min-height:40px;font-size:.78rem;border-radius:8px; }
.text-editor-panel .rich-controls button { color:var(--teal-dark);background:#fff;border:1px solid #c7d9cf; }
.text-editor-panel .rich-controls button[aria-pressed=true] { color:#fff;background:var(--teal-dark);border-color:var(--teal-dark); }
.format-buttons { display:flex;gap:4px; }
.format-buttons button { min-width:40px; }
#text-editor { min-height:170px;max-height:38dvh;font-family:Arial,sans-serif;line-height:1.22;padding:14px;border-color:#b5ccbf; }
.text-editor-panel .dialog-actions { display:flex;justify-content:flex-end;gap:10px; }
.text-editor-panel .dialog-actions .button-gold { color:var(--navy-deep);border-color:var(--gold);background:var(--gold); }
.youtube-form { display:grid;gap:16px; }
.youtube-form>label { display:grid;gap:7px;font-size:.8rem;font-weight:750; }
.youtube-form input { min-height:46px;width:100%;border:1px solid #c8dacf;border-radius:10px;padding:10px 12px;color:var(--ink);background:#fff; }
#youtube-error { margin:0;color:var(--danger);font-size:.8rem; }
#youtube-error:empty { display:none; }
.primary-tools { overflow-x:auto; }
@media (min-width:1550px) { .work-surface.has-media { grid-template-columns:minmax(0,1fr) 365px; } }
@media (max-width:1120px) {
  :root { --sidebar:218px; }
  .work-surface.has-media { grid-template-columns:minmax(0,1fr) 295px; }
  .app-header { grid-template-columns:1fr auto; }
  .document-heading { display:none; }
}
@media (max-width:920px) { .workspace { grid-template-columns:1fr; } .app-header { grid-template-columns:1fr auto; } }
@media (max-width:680px) {
  .brand strong em { font-size:.57rem;white-space:normal; }
  .brand-mark { display:none; }
  .app-header { gap:5px; }
  .header-actions #add-button { width:auto;min-width:88px;font-size:.72rem;padding:0 10px; }
  .header-actions #add-button span { font-size:1rem; }
  .header-actions { gap:5px; }
  .header-actions .button { width:38px; }
  .header-actions .icon-button { width:30px; }
  .editor-topbar { gap:6px; }
  .primary-tools { gap:3px; }
  .mode-button { min-width:50px;flex:1 0 50px;padding-inline:4px; }
  .mode-button strong { font-size:.62rem; }
  .work-surface.has-media { grid-template-columns:minmax(0,1fr); }
  .media-panel { position:absolute;inset:0;z-index:12;border-left:0;padding:18px; }
  .selection-tools { gap:6px; }
  .selection-tools strong { width:100%; }
  .living-dialog { border-radius:18px;padding:20px;width:calc(100vw - 20px); }
  .dialog-heading h2 { font-size:1.3rem; }
  .add-grid { gap:8px;margin:16px 0; }
  .add-grid button { display:flex;flex-direction:column;gap:8px;padding:12px; }
  .add-grid button strong { font-size:.8rem; }
  .add-grid button small { font-size:.66rem; }
  .text-editor-panel .rich-controls { padding:10px;gap:10px; }
  .workspace { min-height:580px;height:calc(100dvh - var(--header)); }
  .canvas-scroller { padding:16px 8px; }
  .tool-options { gap:7px; }
}
@media print { .media-panel,.selection-tools,.package-actions,.living-dialog { display:none!important; } }
/* Keep tool groups on their own rows at every width. */
.brand strong em { color:#96dfd3; }
.teacher-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:10px; }
.primary-tools { flex:1 1 auto;min-width:0; }
.tool-options { display:flex;flex-wrap:wrap;gap:8px; }
.layer-controls { flex:1 0 100%;order:2;justify-content:space-between;border-top:1px solid #edf1f1;padding-top:8px; }
.selection-tools { flex:1 0 100%;order:3; }
@media(max-width:680px) { .primary-tools { flex-basis:100%; }.tool-options { width:100%; }.teacher-toolbar { gap:7px; } }

/* Give imported books the available height; keep utilities within reach. */
.library-panel { padding-top:16px; overflow-y:auto; overscroll-behavior:contain; }
.library-panel > * { flex-shrink:0; }
.library-heading { margin-bottom:12px; }
.library-panel .upload-button { min-height:60px; padding:10px; }
.library-list-heading { margin-top:16px; }
.document-list {
  flex:1 0 240px;
  min-height:240px;
  padding:3px;
  scrollbar-gutter:stable;
  scroll-padding-block:6px;
}
.document-list:empty { display:none; }
.document-list:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; border-radius:12px; }
.document-card { padding:8px 6px; }
.empty-library { flex:1 0 auto; }
.library-utilities { margin-top:12px; padding-top:8px; border-top:1px solid var(--line); }
.library-utilities > summary {
  min-height:44px;
  padding:11px 4px;
  color:var(--teal-dark);
  font-size:.78rem;
  font-weight:750;
  line-height:1.5;
  cursor:pointer;
}
.library-utilities > summary:hover { color:var(--navy); }
.library-utilities > summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:6px; }
.library-utilities .package-actions { margin:4px 0 8px; padding-top:0; border-top:0; }

.book-help-intro { margin-top:20px; padding:16px; border:1px solid #b9d9cf; border-radius:14px; background:#eef8f3; }
.book-help-intro > strong { color:var(--navy); font-size:.9rem; }
.book-help-intro p,.book-help-link { font-size:.8rem; line-height:1.65; }
.book-help-intro a,.book-help-link a,.add-help a,.youtube-form .dialog-hint a { color:var(--teal-dark); font-weight:750; text-underline-offset:3px; }
.book-help-intro a { font-size:.8rem; line-height:1.6; }
.add-help { margin-top:16px; border-top:1px solid #cddfd7; font-size:.8rem; line-height:1.65; }
.add-help summary { min-height:44px; padding:14px 2px; color:var(--teal-dark); font-weight:750; cursor:pointer; }
.add-help summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.add-help h3 { margin:16px 0 8px; color:var(--navy); font-size:.95rem; }
.add-help ol { padding-left:24px; }
.add-help li { margin:8px 0; padding-left:3px; }


/* Námsbrú v24.1 · Stóra vinnurýmið í Bókarbrúnni */
.view-controls { display:flex; align-items:center; gap:6px; }
.workspace-mode-button { white-space:nowrap; }
.fullscreen-button { flex:0 0 auto; }
.close-library { width:34px; height:34px; place-items:center; color:var(--muted); border:1px solid var(--line); border-radius:9px; background:#fff; font-size:1.15rem; }
.close-library:hover { color:var(--navy); border-color:#9accc6; background:#edf7f4; }

@media (min-width:921px) {
  .close-library { display:grid; }
  body.library-collapsed:not(.is-focus-mode) .workspace { grid-template-columns:minmax(0,1fr); }
  body.library-collapsed:not(.is-focus-mode) .library-panel { display:none; }
  body.library-collapsed:not(.is-focus-mode) .library-toggle { display:inline-flex; }
}

body.is-focus-mode { --header:52px; --sidebar:0px; }
body.is-focus-mode .app-header {
  min-height:var(--header);
  grid-template-columns:auto minmax(100px,1fr) auto;
  gap:10px;
  padding:5px 10px;
}
body.is-focus-mode .brand { gap:7px; }
body.is-focus-mode .brand-mark { width:30px; height:30px; border-width:1.5px; }
body.is-focus-mode .brand-mark::before,
body.is-focus-mode .brand-mark::after { width:14px; }
body.is-focus-mode .brand-mark i { width:5px; height:5px; }
body.is-focus-mode .brand small,
body.is-focus-mode .brand strong em { display:none; }
body.is-focus-mode .brand strong { font-size:.92rem; }
body.is-focus-mode .document-heading { min-width:0; gap:1px; }
body.is-focus-mode .document-heading strong { max-width:none; font-size:.78rem; }
body.is-focus-mode .document-heading span { font-size:.57rem; }
body.is-focus-mode .header-actions { gap:5px; }
body.is-focus-mode .header-actions .button,
body.is-focus-mode .header-actions .icon-button { min-height:34px; border-radius:8px; font-size:.68rem; }
body.is-focus-mode .header-actions .button { padding:5px 9px; }
body.is-focus-mode .header-actions .icon-button { width:34px; }
body.is-focus-mode .workspace { height:calc(100dvh - var(--header)); grid-template-columns:minmax(0,1fr); }
body.is-focus-mode .library-panel { display:none; }
body.is-focus-mode .library-toggle { display:inline-flex; }
body.is-focus-mode .editor { grid-template-rows:auto auto minmax(0,1fr); }
body.is-focus-mode .editor-topbar { min-height:42px; gap:7px; padding:3px 8px; }
body.is-focus-mode .teacher-toolbar { min-height:52px; gap:6px; padding:4px 8px; box-shadow:0 3px 10px rgba(12,49,70,.04); }
body.is-focus-mode .primary-tools { gap:2px; padding:2px; border-radius:10px; }
body.is-focus-mode .mode-button { min-width:43px; min-height:40px; gap:0; padding:3px 6px; }
body.is-focus-mode .mode-button strong { display:none; }
body.is-focus-mode .mode-button > span { font-size:1rem; }
body.is-focus-mode .tool-options { gap:5px; }
body.is-focus-mode .tool-options label > span { display:none; }
body.is-focus-mode .tool-button,
body.is-focus-mode .utility-button,
body.is-focus-mode .zoom-control select,
body.is-focus-mode .compact-select select { min-height:34px; }
body.is-focus-mode .color-control input { width:34px; height:34px; }
body.is-focus-mode .layer-controls { flex:0 1 auto; order:0; gap:5px; border-top:0; padding-top:0; }
body.is-focus-mode .layer-controls fieldset label span { min-height:32px; padding:5px 7px; }
body.is-focus-mode .selection-tools { order:3; flex:1 0 100%; }
body.is-focus-mode .statusbar { display:none; }
body.is-focus-mode .canvas-scroller { padding:12px; }
body.is-focus-mode .workspace-mode-button { color:#fff; border-color:var(--navy); background:var(--navy); }
body.is-focus-mode .workspace-mode-button .workspace-mode-label::after { content:" · virkt"; }

@media (max-width:1180px) and (min-width:921px) {
  body.is-focus-mode .teacher-toolbar { align-items:flex-start; }
  body.is-focus-mode .layer-controls { flex:1 0 100%; order:2; border-top:1px solid #edf1f1; padding-top:5px; }
}

@media (max-width:920px) {
  .workspace-mode-button { display:none; }
  .fullscreen-button { display:none; }
}