:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --surface: #fffefa;
  --ink: #23333a;
  --muted: #59676d;
  --line: #dedfd8;
  --accent: #244c56;
  --accent-hover: #193f49;
  --accent-soft: #e5efed;
  --gold: #b87b26;
  --danger: #953e3e;
  --shadow: 0 12px 34px #283b3b0b, 0 2px 6px #283b3b09;
  font-family: Lexend, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { line-height: 1.5; }
/* I comandi e il foglio non sono testo: su iPad non devono diventare
   un'unica selezione azzurra insieme all'immagine della pagina. */
.study-screen { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.study-screen input, .study-screen textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, label[for] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), .file-row label { cursor: pointer; }
button:disabled { opacity: .47; cursor: default; }
:focus-visible { outline: 3px solid #34798c; outline-offset: 3px; }
.hidden { display: none !important; }

.btn, .btn-page, .btn-icon, .tab, .switch-btn, .chip {
  min-height: 44px;
  border-radius: 11px;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost, .btn-ghost-danger { background: var(--surface); border-color: var(--line); }
.btn-ghost:hover:not(:disabled), .btn-ghost[aria-pressed="true"] { background: var(--accent-soft); border-color: #adc4c0; }
.btn-ghost-danger { color: var(--danger); }
.btn-ghost-danger:hover { background: #f9ece9; }
.btn-icon, .btn-page {
  min-width: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 1.5rem;
  line-height: 1;
}
.btn-page:hover:not(:disabled), .btn-icon:hover { background: var(--accent-soft); }
.btn-link, .btn-text-del {
  min-height: 44px;
  padding: .4rem .6rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .84rem;
}
.btn-link { color: var(--accent); text-decoration: underline; }
.btn-text-del:hover { color: var(--danger); }

.home-header {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: calc(.85rem + env(safe-area-inset-top)) max(1.25rem, calc((100% - 1140px) / 2));
  border-bottom: 1px solid var(--line);
  background: #fffefa;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; letter-spacing: -.025em; }
.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: var(--accent);
  font: 600 24px Georgia, serif;
}
.workspaces-container {
  max-width: 1196px;
  margin: 0 auto;
  padding: clamp(2rem, 5.7vw, 5rem) clamp(1.25rem, 4vw, 1.75rem) 3rem;
}
.library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.15rem 1.5rem;
  margin-bottom: 2rem;
}
.eyebrow, .cover-caption {
  margin: 0;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-title { margin: .2rem 0 0; font: 500 clamp(2.8rem, 6vw, 4.6rem)/1.03 Georgia, serif; letter-spacing: -.055em; }
.library-description { margin: .85rem 0 0; color: var(--muted); }
.workspaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 1.25rem;
}
.workspace-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.workspace-card:hover { border-color: #afc3be; }
.ws-card-cover {
  --cover-bg: #dcebe7;
  --cover-ink: #3c625e;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 112px;
  padding: 18px 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cover-bg);
  color: var(--cover-ink);
}
[data-cover="1"] .ws-card-cover { --cover-bg: #dfe7ef; --cover-ink: #4a627b; }
[data-cover="2"] .ws-card-cover { --cover-bg: #eee7d8; --cover-ink: #725937; }
.ws-card-cover::before, .ws-card-cover::after {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 158px;
  border: 1px solid currentColor;
  border-radius: 56% 0 0 56%;
  opacity: .16;
  content: "";
  pointer-events: none;
}
.ws-card-cover::before { top: -50px; right: -90px; transform: rotate(-19deg); }
.ws-card-cover::after { top: -19px; right: -107px; transform: rotate(-19deg); }
.book-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #ffffff88; border-radius: 14px; background: #ffffff69; }
.cover-caption { color: inherit; }
.ws-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.2rem; }
.ws-card-title { margin: 0; font-size: 1.12rem; font-weight: 600; overflow-wrap: anywhere; }
.ws-card-sub { flex: 1; margin: .42rem 0 1rem; color: var(--muted); font-size: .84rem; }
.ws-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.btn-open-book { color: var(--accent); }
.empty-library { color: var(--muted); }

.study-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
.top-bar, .study-tabs, .playback-controls, .study-status {
  padding-inline: max(.9rem, env(safe-area-inset-left)) max(.9rem, env(safe-area-inset-right));
}
.top-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding-top: calc(.55rem + env(safe-area-inset-top));
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.active-title { margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.95rem, 2.1vw, 1.22rem); font-weight: 600; }
.study-tabs { display: flex; gap: .4rem; padding-top: .5rem; padding-bottom: .5rem; }
.tab, .switch-btn {
  padding: .35rem .85rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
}
.tab[aria-pressed="true"], .switch-btn[aria-pressed="true"] { border-color: #b8ccc8; background: var(--accent-soft); color: var(--accent); }
.tab:hover, .switch-btn:hover:not(:disabled) { color: var(--accent); }
.study-status { padding-top: .6rem; padding-bottom: .6rem; background: #fbedd8; font-size: .87rem; }
.playback-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  background: var(--accent-soft);
  color: var(--accent);
}
#playback-title { flex: 1; min-width: 110px; font-size: .88rem; font-weight: 600; }
.split-workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0 max(.75rem, env(safe-area-inset-right)) .75rem max(.75rem, env(safe-area-inset-left));
}
.book-panel, .map-panel, .notes-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.book-panel { flex: 0 0 auto; width: 48%; max-width: 68%; }
.map-panel, .notes-panel { flex: 1; }
.split-divider {
  display: grid;
  width: 16px;
  flex: 0 0 16px;
  place-items: center;
  touch-action: none;
  cursor: col-resize;
}
.split-divider::after { width: 3px; height: 38px; border-radius: 3px; background: #9aadaa; content: ""; }

.panel-bar, .selection-tools, .reader-message, .connect-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  padding: .55rem clamp(.65rem, 1.8vw, 1.1rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.book-bar, .reader-tools, .notes-bar { justify-content: space-between; }
.page-nav, .view-switch, .speed-control, .map-actions, .node-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .42rem;
}
.page-nav { flex-wrap: nowrap; }
.page-label, .speed-control { font-size: .84rem; color: var(--muted); }
#page-num-input, #tts-speed {
  min-height: 44px;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
}
#page-num-input { width: 53px; text-align: center; }
#tts-speed { appearance: none; padding: .35rem 1.65rem .35rem .6rem; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23244c56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .5rem center no-repeat; }
.view-switch { gap: 2px; }
.reader-message { color: var(--muted); font-size: .87rem; background: #f8f6ed; }
.selection-tools { background: #eef4f1; }
.selection-tools { position: absolute; z-index: 8; bottom: .5rem; left: .5rem; right: .5rem; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.selection-tools .btn-icon { margin-left: auto; }
.book-content, .notes-content, .map-canvas-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.book-content { padding: clamp(.7rem, 2vw, 1.45rem); background: #faf8f2; }
.easy-reader-view, .notes-playback, .pdf-page-container { position: relative; }
.easy-reader-view { display: grid; gap: .3rem; max-width: 57ch; margin: 0 auto; padding-bottom: 2rem; }
.sentence-card { padding: .58rem .64rem; border-radius: 10px; }
.sentence-card:hover { background: #fffdf6; }
.sentence-text {
  margin: 0;
  font-size: clamp(1.11rem, 1.9vw, 1.29rem);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: .016em;
  word-spacing: .085em;
  overflow-wrap: anywhere;
}
.heading-card .sentence-text { margin-bottom: .3rem; font-size: 1.42rem; font-weight: 600; line-height: 1.42; }
.reading-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.reading-overlay span { position: absolute; border-radius: 3px; }
.reading-overlay .saved-underline { border-bottom: 3px solid var(--gold); border-radius: 0; }
.chosen-passage { background: #b9b0f34d; mix-blend-mode: multiply; }
.spoken-passage { background: #f9d66c55; mix-blend-mode: multiply; }
.pdf-page-container {
  width: min(100%, 780px);
  margin: 0 auto;
  overflow: hidden;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
#pdf-render-canvas { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.pdf-text-fit { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-size-adjust: none; -webkit-text-size-adjust: none; pointer-events: none; -webkit-user-select: none; user-select: none; }
.textLayer span, .textLayer br {
  position: absolute;
  white-space: pre;
  color: transparent;
  cursor: text;
  transform-origin: 0 0;
}
.textLayer ::selection { background: #428b9990; }
.sample-page { min-height: 36rem; padding: 2rem; }

.notes-content { padding: clamp(.65rem, 1.5vw, 1rem); background: #f4f3ed; }
.notes-sheet { padding: clamp(.65rem, 1.5vw, 1rem); border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.notes-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .8rem; }
.notes-heading h2 { margin: 0; font-size: 1.23rem; }
.notes-status, .notes-hint { color: var(--muted); font-size: .8rem; }
.notes-status { min-height: 1.5em; }
.notes-hint { margin: .55rem 0 1rem; }
#notes-input, .notes-playback {
  display: block;
  width: 100%;
  min-height: 860px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 36px;
  letter-spacing: .014em;
  overflow-wrap: anywhere;
}
#notes-input, .notes-playback > div[data-text-start] { padding: 36px; }
#notes-input { resize: none; overflow: hidden; white-space: pre-wrap; }
.notes-playback { white-space: pre-wrap; }
.notes-playback > div[data-text-start] { white-space: pre-wrap; }
.notes-playback.is-empty::after { position: absolute; top: 36px; left: 36px; right: 36px; color: var(--muted); content: 'Il tuo spazio per scrivere, disegnare e sottolineare.'; pointer-events: none; }
.notes-paper-frame { position: relative; width: 100%; max-width: 640px; margin-inline: auto; }
.notes-paper { position: relative; width: 640px; min-height: 860px; transform-origin: top left; background: #fffdf6; background-image: repeating-linear-gradient(transparent 0 35px, #dfe6df 35px 36px); box-shadow: 0 0 0 1px #d6ddd6; }
.notes-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }
.notes-ink path { pointer-events: none; }
.book-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }
.book-ink path { pointer-events: none; }
.book-ink[data-tool="pen"], .book-ink[data-tool="highlighter"] { cursor: crosshair; }
.book-ink[data-tool="eraser"] { cursor: cell; }
.book-ink-toolbar { display: block; }
.book-ink-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .35rem; }
.book-ink-actions > .btn { min-height: 36px; font-size: .78rem; padding: .3rem .6rem; }
.book-tool-hint { margin: .4rem 0 0; color: var(--muted); font-size: .78rem; }
.reader-alternative { border-bottom: 1px solid var(--line); }
.reader-alternative > summary { min-height: 32px; padding: .35rem 1.1rem; color: var(--muted); font-size: .75rem; cursor: pointer; }
.reader-alternative .reader-tools { border-bottom: 0; }
.ink-settings { position: relative; color: var(--muted); font-size: .78rem; }
.ink-settings summary { padding: .45rem; cursor: pointer; min-height: 36px; }
.ink-settings .ink-options { position: absolute; z-index: 9; top: 100%; left: 0; width: min(300px, 60vw); padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
[data-tool="pen"] .notes-ink, [data-tool="highlighter"] .notes-ink { cursor: crosshair; }
[data-tool="eraser"] .notes-ink { cursor: cell; }
.ink-toolbar { gap: .35rem; }
.ink-tools, .ink-options { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ink-tools .switch-btn { padding-inline: .6rem; }
.ink-options { width: 100%; }
.ink-options label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }
.ink-options input, .ink-options select { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ink-options input[type="color"] { width: 44px; padding: 4px; }
.ink-options select { font-size: .8rem; max-width: 92px; }
.ink-options .btn { padding-inline: .65rem; font-size: .8rem; }
.finger-drawing { display: flex; align-items: center; gap: .4rem; min-height: 36px; color: var(--muted); font-size: .78rem; }
.finger-drawing input { width: 18px; height: 18px; accent-color: var(--accent); }
.extend-paper { margin-top: .9rem; }
.textLayer [data-text-start], .sample-page [data-text-start], .sentence-text, .notes-playback { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.textLayer [data-text-start] { pointer-events: none; }
#book-panel:not([data-book-tool="select"]) [data-text-start] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lasso-surface { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lasso-surface[data-active="true"] { pointer-events: auto; touch-action: pinch-zoom; cursor: crosshair; }
.lasso-path { stroke: var(--accent); stroke-width: 2.25; stroke-dasharray: 6 4; fill: #7563d512; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }

.map-bar { align-items: flex-start; }
.node-context-bar { padding-left: .45rem; border-left: 1px solid var(--line); }
.connect-notice { justify-content: space-between; background: var(--accent-soft); color: var(--accent); font-size: .85rem; }
.map-canvas-viewport { position: relative; background: #f7f8f3; background-image: radial-gradient(#677f7c35 1px, transparent 1px); background-size: 22px 22px; }
.map-canvas { position: relative; min-width: 100%; min-height: 100%; }
.map-edges-svg, .map-edge-labels, .map-nodes-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-edges-svg { z-index: 1; overflow: visible; }
.map-edge-labels { z-index: 2; }
.map-nodes-layer { z-index: 3; }
.edge-line { stroke: #6e8093; stroke-width: 2px; fill: none; marker-end: url(#arrowhead); }
.edge-label-pill {
  position: absolute;
  transform: translate(-50%, -50%);
  min-height: 34px;
  padding: .26rem .6rem;
  border: 1px solid #bdcdcc;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: .8rem;
  white-space: nowrap;
  pointer-events: auto;
}
.map-node {
  position: absolute;
  width: 200px;
  min-height: 64px;
  padding: .8rem .9rem;
  border: 1.5px solid #bccbc8;
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 5px 15px #23333a13;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.map-node:active { cursor: grabbing; }
.map-node.selected-node, .map-node.connect-source { border-color: var(--accent); background: var(--accent-soft); }
.map-node.connect-source { border-style: dashed; }
.map-node.speaking-node { border-color: var(--gold); background: #fff3c5; }
.node-title-text { font-size: .94rem; line-height: 1.45; overflow-wrap: anywhere; }

.modal-overlay {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 1rem;
  overflow: auto;
  background: #172c36a1;
}
.modal-card {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  width: min(100%, 450px);
  padding: clamp(1rem, 4vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 15px 50px #10293144;
}
.modal-card h2 { margin: 0; font-size: 1.18rem; }
.clean-input { width: 100%; padding: .7rem .75rem; border: 1px solid #bbc9c7; border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 1rem; }
textarea.clean-input { resize: vertical; }
.file-row, .preset-chips, .modal-actions, .phonetic-helper { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.file-status { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.chip, .btn-inline { padding: .4rem .65rem; border: 1px solid #b8ccc8; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.phonetic-helper { padding: .65rem; border-radius: 9px; background: #fcf1c7; font-size: .84rem; }
.spacer { flex: 1; }

[data-layout="book"] :is(.split-divider, .notes-panel, .map-panel),
[data-layout="split"][data-side="notes"] .map-panel,
[data-layout="split"][data-side="map"] .notes-panel { display: none; }
[data-layout="book"] .book-panel { flex: 1; width: auto !important; max-width: none; }
@media (max-width: 699px) {
  [data-layout="split"] { flex-direction: column; gap: .5rem; }
  [data-layout="split"] .split-divider { display: none; }
  [data-layout="split"] .book-panel { flex: 0 0 34%; width: 100% !important; max-width: none; }
  [data-layout="split"] .book-panel > :is(.book-bar, .book-ink-toolbar, .reader-alternative, .reader-message, .selection-tools) { display: none; }
}
@media (max-width: 480px) {
  .top-bar { gap: .45rem; }
  .top-bar .btn { padding-inline: .6rem; }
  .book-bar { gap: .3rem; }
  .book-bar .switch-btn { padding-inline: .5rem; }
  .split-workspace { padding-inline: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.textLayer { transform-origin: 0 0; }
.textLayer[data-main-rotation="90"] { transform: rotate(90deg) translateY(-100%); }
.textLayer[data-main-rotation="180"] { transform: rotate(180deg) translate(-100%, -100%); }
.textLayer[data-main-rotation="270"] { transform: rotate(270deg) translateX(-100%); }