/* glossa — la barra di aggiunta in alto, le viste a sinistra, la lista come registro denso a destra.
   Tipografia ispirata alle riviste scientifiche (Nature): serif da lettura per titoli, abstract e citazioni
   (Source Serif 4), sans sobrio per l'interfaccia (Source Sans 3), etichette in maiuscoletto spaziato, filetti sottili. */
:root {
  --bg: #F6F6F2;
  --surface: #FFFFFF;
  --ink: #121A17;
  --muted: #5A6762;
  --line: #DCE0DC;
  --brand: #0B4A3D;
  --accent: #0B5D4B;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EBE7; /* tinta neutra, appena verde: niente menta */
  --star: #B87A06;
  --warn: #9A4A12;
  --warn-soft: #F7E8DC;
  --read: #3E5A9C;
  --read-soft: #E2E8F5;
  /* sottolineature: tinta sul testo e filetto delle citazioni */
  --hl-yellow: rgba(250, 204, 21, 0.38); --hl-yellow-edge: #C99A06;
  --hl-blue: rgba(96, 165, 250, 0.34);   --hl-blue-edge: #3E74C7;
  --hl-red: rgba(248, 113, 113, 0.34);   --hl-red-edge: #C2453D;
  --hl-green: rgba(74, 222, 128, 0.32);  --hl-green-edge: #2F9A5B;
  --paper: #FFFFFF; --reader-bg: #DDE3E0;
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1513; --surface: #17201D; --ink: #E3EAE7; --muted: #95A39D; --line: #2A3532;
    --brand: #93BFB1; --accent: #7FB5A5; --accent-ink: #0B1512; --accent-soft: #1E2B27; --star: #E5B040;
    --warn: #E7A06A; --warn-soft: #3A2618; --read: #9DB3E8; --read-soft: #1D2640; --hl-yellow-edge: #E5B040; --hl-blue-edge: #7FA8EA; --hl-red-edge: #E88B84; --hl-green-edge: #6CCB93; --reader-bg: #0B100E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1513; --surface: #17201D; --ink: #E3EAE7; --muted: #95A39D; --line: #2A3532;
  --brand: #93BFB1; --accent: #7FB5A5; --accent-ink: #0B1512; --accent-soft: #1E2B27; --star: #E5B040;
  --warn: #E7A06A; --warn-soft: #3A2618; --read: #9DB3E8; --read-soft: #1D2640; --hl-yellow-edge: #E5B040; --hl-blue-edge: #7FA8EA; --hl-red-edge: #E88B84; --hl-green-edge: #6CCB93; --reader-bg: #0B100E;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  background: var(--bg); color: var(--ink);
  margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 96px;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
kbd {
  font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface); color: var(--ink);
}
.app { max-width: 1120px; margin: 0 auto; display: grid; gap: 24px; }

/* Header and add bar */
.top { display: grid; gap: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; margin: 0; }
.proto { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.adder {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.adder:focus-within, .adder.flash { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.adder input {
  flex: 1 1 260px; min-width: 0; border: 0; background: transparent; padding: 10px 10px;
  font-size: 17px; outline: none;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; padding: 9px 14px; font-weight: 500; font-size: 14px;
  border: 1px solid var(--line); background: var(--surface);
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--warn); }
.hints { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; align-items: center; }
.try { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.try button {
  font-family: var(--font-mono); font-size: 12px; border: 1px dashed var(--line); background: transparent;
  border-radius: 6px; padding: 2px 8px; color: var(--ink);
}
.try button:hover { border-color: var(--accent); color: var(--accent); }

/* Body */
.body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.side {
  display: grid; gap: 18px; align-content: start; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px);
  /* più lunga dello schermo: scorre da sola, così le ultime voci restano raggiungibili */
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; margin-right: -6px; scrollbar-width: thin;
}
.side h2 { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.navlist { display: grid; gap: 2px; }
.navbtn {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  border: 0; background: transparent; border-radius: 7px; padding: 6px 10px; font-size: 14.5px;
}
.navbtn:hover { background: var(--surface); }
.navbtn.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.navbtn .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; font-weight: 400; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 10px; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--bg); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.tagbtn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.tagbtn.on { border-color: var(--accent); background: var(--accent-soft); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 13px; color: var(--muted); align-items: center; margin: 0; }
.keys dt { justify-self: start; }
.keys dd { margin: 0; }

main { min-width: 0; display: grid; gap: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0; text-wrap: balance; }
.toolbar input[type="search"] {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 12px; min-width: 0; width: min(280px, 100%);
}
.note {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px;
}
.note button { border: 0; background: transparent; color: var(--accent); font-weight: 500; padding: 0; }

/* List */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.item { border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item.is-sel { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.item.is-new { animation: arrive .6s ease-out; }
@keyframes arrive { from { background: var(--accent-soft); } }
.row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; }
.pill {
  border: 0; border-radius: 999px; padding: 3px 0; font-size: 12px; font-weight: 600; width: 100%;
  margin-top: 2px; letter-spacing: 0.01em;
}
.pill-to_read { background: var(--accent-soft); color: var(--accent); }
.pill-reading { background: var(--warn-soft); color: var(--warn); }
.pill-read { background: var(--read-soft); color: var(--read); }
.txt { min-width: 0; cursor: pointer; }
.ttl { font-weight: 600; font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.is-pending .ttl { color: var(--muted); font-weight: 500; }
.sub { color: var(--muted); font-size: 13px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 10px; overflow-wrap: anywhere; }
.kind { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.aside { display: flex; align-items: center; gap: 8px; }
.mini { color: var(--star); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.fav { border: 0; background: transparent; font-size: 19px; line-height: 1; color: var(--line); padding: 2px 4px; }
.fav:hover { color: var(--muted); }
.fav.on { color: var(--star); }
.spin {
  display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; margin-right: 6px; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.panel { padding: 2px 14px 16px calc(14px + 104px + 12px); display: grid; gap: 12px; }
.warn { font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 6px 10px; }
.fld { display: grid; gap: 4px; }
.fld > span, .lbl { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fld input, .fld textarea {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 10px; width: 100%; min-width: 0; resize: vertical;
}
.prow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; }
.stars button { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--line); padding: 0 2px; }
.stars button.on { color: var(--star); }
.stars:hover button { color: var(--star); }
.stars button:hover ~ button { color: var(--line); }
.hint { font-size: 12.5px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--surface); }
.tags input { border: 0 !important; padding: 3px 4px !important; flex: 1 1 120px; outline: none; background: transparent; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); border-radius: 999px; padding: 1px 4px 1px 10px; font-size: 13px; }
.chip button { border: 0; background: transparent; color: var(--muted); padding: 0 4px; font-size: 14px; line-height: 1; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.sugg button { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.links a { color: var(--accent); text-decoration: none; font-weight: 500; }
.links a:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { padding: 6px 12px; font-size: 13.5px; }
.prov { font-size: 12.5px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; margin: 0; }

/* Drop overlay and toast */
.drop {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}
.drop div {
  border: 2.5px dashed var(--accent); border-radius: 18px; padding: 48px 40px; text-align: center; background: var(--surface);
  font-family: var(--font-display); font-size: 24px; font-weight: 600; max-width: 100%;
}
.drop small { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; }
.toast {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 32px));
  background: var(--ink); color: var(--bg); border-radius: 12px; padding: 10px 10px 10px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.toast .msg { flex: 1 1 200px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.toast button { border: 0; background: transparent; color: var(--bg); font-weight: 600; font-size: 13.5px; padding: 6px 8px; border-radius: 6px; text-decoration: underline; text-underline-offset: 3px; }
.toast button:hover { background: rgb(127 127 127 / 0.25); }

@media (max-width: 860px) {
  .body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .pill { grid-column: 1 / -1; width: auto; justify-self: start; padding: 2px 10px; margin: 0; }
  .panel { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Accesso, configurazione, conferma rapida */
.center-card {
  max-width: 420px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 24px; display: grid; gap: 12px;
}
.center-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0; }
.center-card p { margin: 0; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 6px; }
.stack label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 6px; }
.stack input { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 9px 12px; min-width: 0; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack .inline { margin-top: 12px; }
.formmsg { margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--muted); }
.formmsg.err { color: var(--warn); }
a.btn { text-decoration: none; color: var(--ink); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

.who { font-size: 13px; color: var(--muted); margin-left: auto; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 500; font-size: 13.5px; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.tools { display: grid; gap: 8px; justify-items: start; }
.bookmarklet {
  display: inline-block; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 999px; padding: 3px 12px; cursor: grab;
}
.hint { font-size: 12.5px; color: var(--muted); }
.thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.abstract { font-size: 13.5px; color: var(--muted); max-width: 72ch; margin: 0; }
.abstract summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.sync { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- catalogazione */
.active-proj { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.active-proj select {
  font: inherit; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid transparent;
  border-radius: 999px; padding: 3px 10px; max-width: 220px;
}
.navbtn .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.newproj input { width: 100%; border: 1px dashed var(--line); background: transparent; border-radius: 7px; padding: 5px 10px; font-size: 13.5px; margin-top: 4px; }
.newproj input:focus { border-style: solid; background: var(--surface); }
.tree { display: grid; gap: 1px; }
.tbtn { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 6px; padding: 4px 8px; font-size: 13.5px; line-height: 1.3; }
.tbtn:hover { background: var(--surface); }
.tbtn.on { background: var(--accent-soft); font-weight: 600; }
.tbtn .n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 400; }
.tbtn.l0 { font-weight: 600; }
.tbtn.l1 { padding-left: 18px; }
.tbtn.l2 { padding-left: 30px; font-size: 13px; color: var(--muted); }
.tbtn.l2.on { color: var(--ink); }
.saved { display: flex; align-items: center; }
.saved .navbtn { flex: 1; min-width: 0; }
.saved .x { border: 0; background: transparent; color: var(--muted); padding: 2px 6px; font-size: 15px; opacity: 0; }
.saved:hover .x, .saved .x:focus-visible { opacity: 1; }

.filterbar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fchip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
.fchip button { border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 0 5px; }
.saveform { display: inline-flex; gap: 6px; align-items: center; }
.saveform input { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 8px; min-width: 0; width: 200px; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.projectbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.pstats { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0; }
.pstats strong { font-family: var(--font-display); font-size: 17px; }
.pstats span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pacts { display: flex; flex-wrap: wrap; gap: 6px; }

.tchip, .pchip { font-size: 12px; border-radius: 5px; padding: 0 6px; line-height: 1.6; }
.tchip { background: var(--read-soft); color: var(--read); }
.pchip { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.hcount { color: var(--star); font-weight: 600; }
.chip.pchip-on { background: var(--accent); color: var(--accent-ink); }
.chip.pchip-on button { color: var(--accent-ink); opacity: .8; }
.topicline { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13.5px; }
.fld select { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 10px; width: 100%; min-width: 0; }
.hline { font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------- citazioni e diario */
.notes { display: grid; gap: 14px; }
.notesbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.nacts { display: flex; gap: 6px; flex-wrap: wrap; }
.qgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.qhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.qtitle { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.qitem { font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.qtitle .sub { margin: 0; }
.qcount { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quote { border-left: 3px solid var(--hl-yellow-edge); padding: 2px 0 2px 12px; display: grid; gap: 4px; }
.quote.c-blue { border-color: var(--hl-blue-edge); } .quote.c-red { border-color: var(--hl-red-edge); } .quote.c-green { border-color: var(--hl-green-edge); }
.quote blockquote { margin: 0; font-size: 15px; line-height: 1.55; max-width: 72ch; overflow-wrap: anywhere; }
.qmeta { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.qtag { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.c-yellow > .qmeta .qtag { color: var(--hl-yellow-edge); } .c-blue > .qmeta .qtag { color: var(--hl-blue-edge); }
.c-red > .qmeta .qtag { color: var(--hl-red-edge); } .c-green > .qmeta .qtag { color: var(--hl-green-edge); }
.qact { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.qact .linkbtn { font-size: 12.5px; }
.linkbtn.danger { color: var(--warn); }
.qnote { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 6px; margin-left: -6px; font-size: 13.5px; color: var(--muted); resize: vertical; max-width: 72ch; width: 100%; }
.qnote:hover, .qnote:focus { border-color: var(--line); background: var(--bg); color: var(--ink); }
.day { display: grid; gap: 10px; }
.day h3 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.daysum { margin: -6px 0 0; color: var(--muted); font-size: 13px; }
.readlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.readlist .pill { width: auto; padding: 1px 8px; margin: 0 6px 0 0; }
.readlist .linkbtn { color: var(--ink); font-size: 14px; }

/* ---------------------------------------------------------------- reader PDF */
body.reading { overflow: hidden; }
.reader {
  position: fixed; inset: 0; z-index: 30; background: var(--reader-bg); display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.rbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.rtitle { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpage { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rzoom { display: inline-flex; gap: 4px; }
.rzoom .btn { padding: 5px 11px; }
.rbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.rpages { overflow: auto; padding: 16px; outline: none; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.rstack { display: grid; justify-content: center; align-content: start; gap: 14px; width: max-content; min-width: 100%; }
.rp { position: relative; background: var(--paper); box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.rp canvas { display: block; }
.rpnum { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #9AA59F; font-size: 13px; }
.hlLayer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hl { position: absolute; border-radius: 2px; mix-blend-mode: multiply; background: var(--hl-yellow); transition: outline-color .3s; outline: 2px solid transparent; }
.hl.c-blue { background: var(--hl-blue); } .hl.c-red { background: var(--hl-red); } .hl.c-green { background: var(--hl-green); }
.hl.flash { outline-color: var(--accent); }
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: hidden; opacity: 1; line-height: 1; z-index: 2; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(13, 107, 89, 0.28); }
.textLayer br::selection { background: transparent; }
.rmsg { margin: 48px auto; max-width: 52ch; text-align: center; color: var(--muted); display: grid; gap: 8px; }
.rmsg.err p { margin: 0; }
.rmsg a { color: var(--accent); }
.rside { width: 300px; overflow: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 12px; }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rlist li { border-left: 3px solid var(--hl-yellow-edge); padding-left: 8px; }
.rlist li.c-blue { border-color: var(--hl-blue-edge); } .rlist li.c-red { border-color: var(--hl-red-edge); } .rlist li.c-green { border-color: var(--hl-green-edge); }
.rlist button { border: 0; background: transparent; text-align: left; padding: 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.rp-n { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rnote { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.rempty { color: var(--muted); font-size: 13.5px; margin: 0; }
.rtool, .rpop { position: fixed; z-index: 35; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .22); }
.rtool { display: flex; gap: 2px; padding: 4px; }
.sw { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; font-size: 13px; font-weight: 500; padding: 6px 9px; border-radius: 7px; }
.sw:hover, .sw.on { background: rgb(127 127 127 / .3); }
.sw span { width: 12px; height: 12px; border-radius: 3px; background: #FACC15; }
.sw.c-blue span { background: #60A5FA; } .sw.c-red span { background: #F87171; } .sw.c-green span { background: #4ADE80; }
.rpop { width: 280px; padding: 10px; display: grid; gap: 8px; }
.rpop textarea { width: 100%; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 6px 8px; resize: vertical; }
.swrow, .poprow { display: flex; gap: 4px; justify-content: space-between; }
.rpop .linkbtn { color: var(--accent); }
.rpop .linkbtn.danger { color: var(--warn); }
@media (max-width: 860px) {
  /* telefono: il pannello scende dall'alto sopra la pagina (non toglie spazio alla lettura) ed è sopra i livelli del PDF */
  .rside {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; max-height: min(72%, 560px); z-index: 20;
    border-left: 0; border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgb(0 0 0 / .28); padding: 10px 14px 14px;
    overscroll-behavior: contain;
  }
  .rside .rtabs { position: sticky; top: -10px; background: var(--surface); padding-top: 4px; margin-top: -4px; z-index: 1; }
  .rbody { position: relative; }
  /* una sola riga di comandi: il resto dello schermo al PDF (il titolo è in cima al pannello) */
  .rbar { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
  .rbar .btn { padding: 7px 10px; }
  .rtitle { display: none; }
  .rpage { flex: 1; text-align: center; }
  .rsidelbl { display: none; }
  .rsideicon { display: inline-block !important; }
  .rside-title { display: block !important; }
}
@media (max-width: 860px) {
  .qact { margin-left: 0; }
}

/* reader su telefono: zoom col pizzico, barre a tutta larghezza lontane dal menu di selezione di Android */
@media (pointer: coarse) {
  .rzoom { display: none; }
  .rtool {
    left: 8px !important; right: 8px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between; flex-wrap: wrap;
  }
  .rtool .sw { padding: 10px 8px; font-size: 13.5px; flex: 1 1 auto; justify-content: center; }
  .rpop { left: 8px !important; right: 8px; width: auto; top: calc(64px + env(safe-area-inset-top, 0px)) !important; }
  .rpop .sw { padding: 10px 14px; }
  .rpop textarea { font-size: 16px; }
}
.sw.note { border-left: 1px solid rgb(127 127 127 / .35); border-radius: 0 7px 7px 0; }

/* ---------------------------------------------------------------- gruppi */
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11.5px; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.avatar.a1 { background: #0D6B59; } .avatar.a2 { background: #3E5A9C; } .avatar.a3 { background: #9A4A12; } .avatar.a4 { background: #7A3E8C; }
.avatar.a5 { background: #2F7D8C; } .avatar.a6 { background: #8C6A12; } .avatar.a7 { background: #B23A5B; } .avatar.a8 { background: #4D6B2A; }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 0 7px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.joinnote { margin: 0; background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.groupview { display: grid; gap: 14px; }
.ghead { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.gtop { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-start; }
.gtitle { min-width: 0; }
.gtitle h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.gtitle .sub { margin: 2px 0 0; }
.gfaces { display: flex; }
.gfaces .avatar { border: 2px solid var(--surface); margin-left: -6px; }
.gfaces .more { font-size: 12px; color: var(--muted); align-self: center; margin-left: 6px; }
.gstats { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.gacts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.iam { margin-left: auto; font-size: 13px; color: var(--muted); }
.gpanel { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; font-size: 14px; }
.gpanel p { margin: 0; }
.linkrow { display: flex; gap: 6px; flex-wrap: wrap; }
.linkrow input { flex: 1 1 220px; min-width: 0; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 10px; font-family: var(--font-mono); font-size: 12.5px; }
.linkrow input[type="email"] { font-family: var(--font-body); font-size: 14px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mname { display: grid; min-width: 0; flex: 1 1 160px; font-weight: 600; }
.mname small { font-weight: 400; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.role { font-size: 12px; color: var(--muted); }
.glist .row.grow { grid-template-columns: 28px minmax(0, 1fr) auto; }
.newdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
.gcounts { gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inlib { color: var(--accent); font-weight: 700; }
.glist .panel.gpanelx { padding-left: calc(14px + 28px + 12px); }
.thread { display: grid; gap: 8px; }
.thread h4 { margin: 4px 0 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmt { display: flex; gap: 8px; align-items: flex-start; }
.cbody { min-width: 0; flex: 1; }
.cmeta { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.cmeta strong { color: var(--ink); font-size: 13px; }
.cmeta .linkbtn { font-size: 12px; margin-left: auto; }
.cbody p { margin: 2px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer { display: flex; gap: 6px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; resize: vertical; font-size: 14px; }
.ghl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ghl .quote { gap: 6px; }
.ghl .qmeta strong { color: var(--ink); font-size: 13px; }
.hnote { margin: 0; font-size: 13.5px; color: var(--muted); }
.ghl .clist { padding-left: 4px; }
.gchip { font-size: 12px; color: var(--read); }
.chip.gchip-on { background: var(--read-soft); }
.chip.gchip-on .linkbtn { color: var(--read); font-size: 13px; }
.sharesel { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 2px 8px; font-size: 13px; color: var(--muted); }
.hl.other { background: transparent !important; border-bottom: 2px solid var(--hl-yellow-edge); mix-blend-mode: normal; }
.hl.other.c-blue { border-color: var(--hl-blue-edge); } .hl.other.c-red { border-color: var(--hl-red-edge); } .hl.other.c-green { border-color: var(--hl-green-edge); }
.pauthor, .pnote { margin: 0; font-size: 13.5px; }
.pnote { color: var(--muted); }
.pthread { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; max-height: 260px; overflow: auto; }
.pthread textarea { width: 100%; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 6px 8px; resize: vertical; }
.pthread .btn { justify-self: end; }
@media (max-width: 860px) {
  .glist .panel.gpanelx { padding-left: 14px; }
  .iam { margin-left: 0; }
}

/* ---------------------------------------------------------------- menu laterale */
.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 6px; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary h2 { margin: 0; }
.sec > summary::after { content: "▾"; color: var(--muted); font-size: 12px; transition: transform .15s; padding: 0 4px; }
.sec:not([open]) > summary::after { transform: rotate(-90deg); }
details.sec[open] > summary { margin-bottom: 6px; }
.sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.newproj { display: flex; gap: 6px; margin-top: 6px; }
.newproj input { flex: 1; min-width: 0; margin-top: 0; }
.newproj .btn { flex: none; }
.newproj input:placeholder-shown + .btn { opacity: .55; }
.side-head, .menubtn, .scrim { display: none; }
.iconbtn { border: 0; background: transparent; font-size: 24px; line-height: 1; padding: 4px 10px; border-radius: 8px; color: var(--ink); }
.iconbtn:hover { background: var(--surface); }

@media (max-width: 860px) {
  .menubtn {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    border-radius: 999px; padding: 6px 14px 6px 12px; font-weight: 600; font-size: 14px; max-width: 60vw; overflow: hidden;
  }
  #menuLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand h1 { display: none; }
  .side {
    position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); max-height: none; margin: 0;
    background: var(--bg); box-shadow: 6px 0 24px rgb(0 0 0 / .25); gap: 16px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .side.open { transform: none; visibility: visible; transition: transform .2s ease; }
  .side-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 18px; }
  .side .navbtn { padding-top: 9px; padding-bottom: 9px; }
  .side-keys { display: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / .35); }
  .scrim[hidden] { display: none; }
  body.menu-open { overflow: hidden; }
}

/* ---------------------------------------------------------------- scheda dell'articolo */
.pact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pact .btn { padding: 7px 14px; font-size: 14px; }
.pact a.btn.primary { color: var(--accent-ink); }
.pact .stars { margin-left: 4px; }
.psec { border-top: 1px solid var(--line); }
.psec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; min-height: 40px;
}
.psec > summary::-webkit-details-marker { display: none; }
.psec > summary::before { content: "▸"; color: var(--muted); font-size: 12px; width: 10px; flex: none; transition: transform .15s; }
.psec[open] > summary::before { transform: rotate(90deg); }
.psec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.psl { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; flex: none; min-width: 88px; }
.psp { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.psec[open] .psp { visibility: hidden; }
.psb { display: grid; gap: 12px; padding: 2px 0 12px 22px; }
.psb textarea { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 10px; resize: vertical; color: var(--ink); }
.psb .abstract { max-width: 72ch; }
@media (max-width: 860px) {
  .psb { padding-left: 4px; }
  .psl { min-width: 76px; }
  .pact .btn { flex: 1 1 auto; text-align: center; }
  .pact .stars { flex-basis: 100%; margin-left: 0; }
}
/* sul telefono le scorciatoie da tastiera e il trascinamento non servono */
@media (max-width: 860px) { .hints > span { display: none; } }

/* ---------------------------------------------------------------- segnalibro e PDF mancante */
.prog { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pbar { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.rmissing { max-width: 560px; margin: 8vh auto; display: grid; gap: 10px; text-align: left; line-height: 1.5; }
.rmissing p { margin: 0; }
.rattach { cursor: pointer; display: inline-block; }

/* ---------------------------------------------------------------- suggerimento dell'estensione */
.exthint {
  position: fixed; z-index: 40; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 40px));
  display: flex; gap: 8px; align-items: flex-start; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 8px 16px 18px; box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.exthint[hidden] { display: none; }
.exthint-body { display: grid; gap: 8px; flex: 1; min-width: 0; }
.exthint p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.exthint-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exthint-never { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.extdialog { max-width: 560px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 22px 24px; }
.extdialog::backdrop { background: rgb(0 0 0 / .4); }
.extdialog h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; }
.extdialog ol { padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; font-size: 14px; }
.extdialog li[hidden] { display: none; }
.extdialog form { text-align: right; }


/* ---------------------------------------------------------------- tipografia da rivista scientifica */
body { font-size: 15.5px; line-height: 1.5; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* testata: il nome in serif nero-verde con un filetto spesso sotto, come le testate delle riviste */
.brand { padding-bottom: 10px; border-bottom: 3px solid var(--brand); align-items: center; }
.brand h1 { font-family: var(--font-serif); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1; color: var(--brand); }
.center-card h1 { font-family: var(--font-serif); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; color: var(--brand); }
.toolbar h2, .gtitle h3, .day h3, .extdialog h2, .side-head { font-family: var(--font-serif); letter-spacing: -0.01em; }
.toolbar h2 { font-size: 26px; font-weight: 700; }
/* titoli degli articoli in serif, come nei sommari delle riviste */
.ttl { font-family: var(--font-serif); font-weight: 600; font-size: 17.5px; line-height: 1.3; letter-spacing: -0.005em; }
.sub { font-size: 13.5px; }
/* etichetta del tipo come le rubriche di Nature ("Article", "News"): maiuscoletto spaziato nel colore della testata */
.kind { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.side h2, .psl, .fld > span, .lbl { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em; }
/* lettura: abstract, citazioni, note e diario in serif */
.abstract, .abstract p, .psb .abstract { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--ink); }
.quote blockquote { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; }
.psb textarea, .fld textarea { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.5; }
.rtitle { font-family: var(--font-serif); font-weight: 600; }
.rlist button { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.45; }
.rlist .rp-n { font-family: var(--font-body); }
.drop { font-family: var(--font-serif); }
/* elenco: righe separate da filetti sottili, più aria, niente ombre */
.item + .item { border-top-color: var(--line); }
.mono, code, kbd { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- lettura diretta dalla riga */
.rowread {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 999px; padding: 6px 12px;
}
.rowread:hover { background: var(--accent); color: var(--accent-ink); }
.item.is-sel .rowread { display: none; } /* con la scheda aperta c'è già il pulsante grande */
.lead { display: grid; justify-items: start; }
.rowread-m { display: none; }
@media (max-width: 860px) {
  .rowread { padding: 6px 12px; }
  .rowread-d { display: none; }
  .rowread-m { display: inline-flex; }
  /* telefono: stato e pulsante di lettura sulla stessa riga, sopra il titolo */
  .row .lead { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
  .row .lead .pill { grid-column: auto; }
}

/* ---------------------------------------------------------------- reader: ricerca, indice, figure, riferimenti */
.rtbtn { padding: 6px 10px; }
.rtbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rfind { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rfind input { flex: 1 1 auto; min-width: 0; max-width: 420px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--bg); color: var(--ink); }
.rfcount { font-size: 13px; color: var(--muted); min-width: 7em; font-variant-numeric: tabular-nums; }
.textLayer mark.fm { background: rgba(255, 176, 0, 0.42); color: transparent; border-radius: 2px; padding: 0; }
.textLayer mark.fcur { background: rgba(255, 106, 0, 0.7); box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.5); }
/* figure: bordo invece del colore pieno, per non coprire il grafico */
.hl.area { background: transparent !important; mix-blend-mode: normal; border: 2px solid var(--hl-yellow-edge); border-radius: 3px; }
.hl.area.c-blue { border-color: var(--hl-blue-edge); } .hl.area.c-red { border-color: var(--hl-red-edge); } .hl.area.c-green { border-color: var(--hl-green-edge); }
.hl.area.other { border-style: dashed; border-bottom-width: 2px; }
.hl.area.drawing { border: 2px dashed var(--accent); background: rgba(13, 93, 75, 0.08) !important; }
.area-mode .rpages { cursor: crosshair; touch-action: none; }
.area-mode .textLayer, .area-mode .linkLayer { pointer-events: none; }
.area-mode .textLayer ::selection { background: transparent; }
/* link del PDF */
.linkLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rlink { position: absolute; pointer-events: auto; display: block; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 2px; }
.rlink:hover, .rlink:focus-visible { background: rgba(13, 93, 75, 0.14); outline: none; }
/* anteprima di un riferimento */
.rref { position: fixed; z-index: 30; width: min(340px, calc(100vw - 16px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgb(0 0 0 / .22); padding: 12px 14px; display: grid; gap: 10px; }
.rreftext { margin: 0; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; max-height: 220px; overflow: auto; overflow-wrap: anywhere; }
.rref .poprow { flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
/* pannello laterale: schede e indice */
.rtabs { display: flex; gap: 4px; margin: -4px 0 10px; border-bottom: 1px solid var(--line); }
.rtabs button { border: 0; background: transparent; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.rtoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rtoc button { border: 0; background: transparent; text-align: left; width: 100%; padding: 5px 6px; border-radius: 6px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.rtoc button:hover { background: var(--bg); }
.rtoc .d0 button { font-weight: 600; } .rtoc .d1 button { padding-left: 18px; } .rtoc .d2 button { padding-left: 30px; font-size: 13px; color: var(--muted); } .rtoc .d3 button { padding-left: 42px; font-size: 13px; color: var(--muted); }
/* immagini delle figure */
.rthumb { display: block; max-width: 100%; max-height: 160px; margin-top: 4px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.pimg { max-width: 100%; max-height: 200px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.qfig { margin: 0; display: grid; gap: 4px; }
.qfig img { max-width: min(100%, 640px); max-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.qfig img:not([src]) { min-height: 80px; min-width: 160px; background: var(--bg); }
.qfig figcaption { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) {
  .rtl { display: none; }
  .rfind input { max-width: none; }
  .rfcount { min-width: 0; }
}
.offl { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.offtoggle { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }
.ricon { width: 17px; height: 17px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rtbtn { display: inline-flex; align-items: center; gap: 4px; }
.rlist button { display: block; width: 100%; min-width: 0; } .rthumb { max-width: calc(100% - 2px); }

/* reader: barra, ricerca e pagine sempre nelle stesse righe (la ricerca, se chiusa, non occupa spazio) */
.reader > .rbar { grid-row: 1; }
.reader > .rfind { grid-row: 2; position: relative; z-index: 2; }
.reader > .rbody { grid-row: 3; }
.rpop .poprow { align-items: center; flex-wrap: wrap; gap: 10px; }
.rpop .poprow .linkbtn.danger { margin-left: auto; }

/* ---------------------------------------------------------------- telefono: nome in alto, pulsante + per aggiungere */
.fab, .sheet { display: none; }
.sheet[open] { display: block; }
.sheet {
  border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 560px; margin: auto auto 0; background: var(--surface); color: var(--ink);
}
.sheet::backdrop { background: rgb(0 0 0 / .4); }
.sheet form { display: grid; gap: 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; }
.sheet textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); color: var(--ink); font-size: 16px; resize: none; }
.sheet-row { display: flex; gap: 8px; }
.sheet-row .btn { flex: 1; text-align: center; }
.sheet-proj { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.sheet-proj select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); color: var(--ink); font-size: 16px; }
.sheet-save { padding: 12px; font-size: 16px; }
@media (max-width: 860px) {
  .brand { align-items: center; gap: 12px; flex-wrap: nowrap; padding-bottom: 8px; }
  .brand h1 { display: block; font-size: 28px; order: 0; }
  .menubtn { order: 1; margin-left: auto; max-width: 52vw; }
  .who { order: 2; margin-left: 0; }
  .who #userEmail, .who .sep { display: none; }
  .adder, .hints { display: none; }
  .fab {
    display: flex; align-items: center; justify-content: center; position: fixed; z-index: 35;
    right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; border-radius: 50%; border: 0; font-size: 32px; line-height: 1; font-weight: 400;
    background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgb(0 0 0 / .3);
  }
  body.reading .fab, body.menu-open .fab { display: none; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 861px) { .rside { position: relative; z-index: 5; } }
.rside-close { display: none; margin-left: auto; border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 2px 8px; color: var(--muted); }
.rtabs { align-items: center; }
@media (max-width: 860px) {
  .rside-close { display: block; }
  .rtabs button[role="tab"] { padding: 10px 10px; font-size: 14px; }
  .rtoc button { padding: 10px 8px; font-size: 15px; }
  .rsidebtn { white-space: nowrap; }
}

/* titolo della vista: sul telefono è anche il pulsante del menu */
.vtbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: default; }
.vtcaret { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); flex: none; }
@media (max-width: 860px) {
  .vtbtn { cursor: pointer; border-radius: 8px; padding: 2px 6px 2px 0; }
  .vtbtn:active { background: var(--surface); }
  .vtcaret { display: block; transition: transform .2s; }
  .vtbtn[aria-expanded="true"] .vtcaret { transform: rotate(180deg); }
  .who { margin-left: auto; }
}

.rsideicon { display: none; }
.rside-title { display: none; margin: 0 0 6px; font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 1.3; }
.rsidebtn { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------- scoprire: esplora, novità, ritrattazioni */
.retr { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #B42318; border-radius: 4px; padding: 1px 6px; }
.warn.bad { background: #FDECEA; color: #7A1A12; border-color: #F3B8B0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warn.bad { background: #3A1512; color: #F5B7AE; border-color: #6B2A23; } }
.xtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.xtabs button { border: 0; background: transparent; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.xtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.xtabs .n { font-weight: 400; color: var(--muted); }
.xlist, .nlist { list-style: none; margin: 0; padding: 0; display: grid; }
.xrow, .nrow { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.xtxt { flex: 1; min-width: 0; }
.xttl { font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.xttl:hover { text-decoration: underline; }
.xtxt .retr { margin-left: 6px; vertical-align: 2px; }
.xsaved { font-size: 12.5px; color: var(--accent); font-weight: 600; white-space: nowrap; padding-top: 3px; }
.xlist .btn, .nact .btn { flex: none; }
.xfollow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.xfollow .lbl { margin-right: 4px; }
.xfollow .fchip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xfollow .fchip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.news { display: grid; gap: 16px; }
.nhead { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.nhead h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; }
.flist { display: flex; flex-wrap: wrap; gap: 6px; }
.nlist { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.nrow { flex-wrap: wrap; }
.nrow:last-child { border-bottom: 0; }
.nkind { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: flex; gap: 8px; }
.nrow.bad .nkind { color: #B42318; }
.ndate { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.nrow.unseen { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; margin-left: -16px; padding-right: 0; }
.nact { display: flex; gap: 10px; align-items: center; }
@media (max-width: 860px) { .nact { flex-basis: 100%; } .xrow { flex-wrap: wrap; } .xrow .btn { margin-left: auto; } }

/* ---------------------------------------------------------------- scrivere: bibliografia e importazione */
.toolrow { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.toolrow select { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--surface); color: var(--ink); }
.extdialog.wide { max-width: 720px; width: calc(100vw - 32px); }
.extdialog .inline { margin: 10px 0; }
.extdialog select, .extdialog input:not([type="file"]) { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--ink); min-width: 0; }
.biblio-prev { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg); font-family: var(--font-serif); font-size: 15px; line-height: 1.5; }
.imp { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; justify-items: start; }
.imp h3 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.imp .inline input { flex: 1 1 160px; }
.toolrow input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--surface); color: var(--ink); font: inherit; min-width: 0; }
.racc { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; justify-items: start; }
.racc .hint { margin-left: 6px; }

/* Sezioni della lista: «Nuovi» in cima, poi la vista */
.lsec { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px 7px; border-top: 1px solid var(--line);
  font: 600 11.5px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: color-mix(in srgb, var(--line) 22%, var(--surface)); }
.lsec:first-child { border-top: 0; }
.lsec .n { font-weight: 500; letter-spacing: 0; }
.lsec .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 2px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsec .linkbtn { text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-left: auto; }
.lsec.lnew { color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.lsec + .item { border-top: 1px solid var(--line); }
@media (max-width: 860px) { .lsec .hint { display: none; } }

/* Temi nel menu laterale: come le altre voci, con la matita per rinominare o unire */
.tree .trow { display: flex; align-items: center; gap: 2px; }
.tree .trow .tbtn { flex: 1; min-width: 0; align-items: center; padding: 6px 10px; font-size: 14.5px; border-radius: 7px; }
.tree .trow .tbtn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .trow .tbtn .n { font-size: 13px; }
.tedit { flex: none; border: 0; background: transparent; color: var(--muted); border-radius: 6px; width: 28px; height: 28px; padding: 0;
  font-size: 13px; line-height: 1; opacity: 0; transition: opacity .12s; }
.trow:hover .tedit, .tedit:focus-visible, .trow .tbtn.on + .tedit { opacity: 1; }
.tedit:hover { background: var(--surface); color: var(--accent); }
@media (hover: none) { .tedit { opacity: .55; } }
#classifyNote { margin: 6px 10px 0; }
.themeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.themeline select { flex: 1 1 220px; min-width: 0; }
.themeline .hint { font-size: 12.5px; }
#themeDialog .fld { display: grid; gap: 4px; margin: 10px 0; }
#themeDialog input, #themeDialog select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; background: var(--surface); color: var(--ink); }
#themeDialog .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#themeDialog #themeDelete { margin-left: auto; }
#themeDialog { width: min(440px, calc(100vw - 32px)); }
#themeDialog form { text-align: left; }

/* ---------------------------------------------------------------- testata essenziale */
.brand { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.brand h1 { margin: 0; }
.wordmark { color: inherit; text-decoration: none; border-radius: 6px; }
.wordmark:hover { color: var(--accent); }
.brand .active-proj { margin-left: auto; }
.topicon { display: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; border-radius: 50%; }
.topicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 860px) {
  body { padding-top: 10px; }
  .app { gap: 12px; }
  .brand { padding-bottom: 6px; border-bottom-width: 2px; gap: 8px; }
  .brand h1 { font-size: 24px; }
  .brand .active-proj { display: none; }
  .topicon { display: inline-flex; margin-left: auto; color: var(--ink); }
  body.searching .topicon { color: var(--accent); background: var(--accent-soft); }
  .toolbar { gap: 8px; }
}

/* ---------------------------------------------------------------- menu: filtri e ingranaggio in fondo */
#tagsWrap { margin-top: 10px; }
.side-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.gearbtn { width: 100%; color: var(--muted); }
.gearbtn > span { display: inline-flex; align-items: center; gap: 10px; }
.gear { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.gearbtn:hover { color: var(--ink); }

/* ---------------------------------------------------------------- impostazioni */
.settings { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); overflow: auto; }
.settings .sheet-head { margin-bottom: 4px; }
.settings .sheet-head h2 { margin: 0; }
.set { display: grid; gap: 8px; justify-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.set:first-of-type { border-top: 0; }
.set h3 { margin: 0 0 2px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.set .toolrow { width: 100%; }
.set .toolrow input { width: 100%; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
.set .seg button { min-width: 40px; min-height: 34px; }
.set .hint { font-size: 13px; }
@media (max-width: 860px) {
  .settings { width: calc(100vw / var(--zoom, 1)); max-width: none; height: calc(100dvh / var(--zoom, 1)); max-height: none; margin: 0; border-radius: 0; border: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .set-keys { display: none; }
  .setrow .seg { flex: 1 1 100%; display: flex; }
  .setrow .seg button { flex: 1; }
}

/* ---------------------------------------------------------------- dimensione del testo (per dispositivo) */
html[data-fs="s"] { --zoom: .92; }
html[data-fs="l"] { --zoom: 1.12; }
html[data-fs="xl"] { --zoom: 1.25; }
html[data-fs] #appView, html[data-fs] .extdialog, html[data-fs] .sheet, html[data-fs] .toast { zoom: var(--zoom, 1); }

/* ---------------------------------------------------------------- Lettura: tre schede */
.readnav { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.readtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.readtabs button { border: 0; background: none; padding: 8px 12px 9px; font-size: 14.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.readtabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.readtabs button:hover { color: var(--ink); }
@media (max-width: 860px) { .readtabs button { flex: 1; justify-content: center; padding: 10px 6px; } }

/* ---------------------------------------------------------------- guida in tre passi */
.guide { width: min(460px, calc(100vw - 32px)); padding: 26px 26px 18px; }
.gslide { display: grid; gap: 10px; justify-items: center; text-align: center; min-height: 270px; align-content: start; }
.gslide h2 { margin: 6px 0 0; font-family: var(--font-serif); font-size: 22px; }
.gslide p { margin: 0; line-height: 1.5; font-size: 15px; }
.gslide .hint { font-size: 13.5px; color: var(--muted); }
.gico { width: 64px; height: 64px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  background: var(--accent-soft); border-radius: 18px; padding: 8px; }
.gico .gmark { fill: var(--hl-yellow); stroke: none; }
.gmob { display: none; }
@media (max-width: 860px) { .gmob { display: block; } .gdesk { display: none; } }
.gfoot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gdots { display: flex; gap: 6px; margin-right: auto; }
.gdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.gdots i.on { background: var(--accent); width: 18px; border-radius: 4px; }

/* ---------------------------------------------------------------- selezione più precisa nel reader */
/* si seleziona solo il testo (non la pagina, il numero, la tela): la selezione non "scappa" fuori dalle righe */
.rp { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.textLayer :is(span, br) { -webkit-user-select: text; user-select: text; z-index: 1; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; -webkit-user-select: none; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
/* regolazione parola per parola (sul telefono) */
.radj { display: none; }
@media (pointer: coarse) {
  .radj { display: flex; align-items: center; gap: 4px; flex-basis: 100%; padding: 4px 2px 0; border-top: 1px solid var(--line); margin-top: 2px; font-size: 12.5px; color: var(--muted); }
  .radj button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; min-width: 40px; height: 36px; font-size: 18px; line-height: 1; }
  .radj button:active { background: var(--accent-soft); }
  .radj span:not(.radj-gap) { padding: 0 2px 0 4px; }
  .radj-gap { flex: 1; }
}

/* ---------------------------------------------------------------- righe: stato solo quando serve, stella accanto a «Leggi» */
.row.nopill { grid-template-columns: minmax(0, 1fr) auto; }
.row.nopill .lead { display: none; }
.fav-m { display: none; }
@media (max-width: 860px) {
  .row.nopill .lead { display: flex; }
  .fav-m { display: inline-block; margin-left: auto; font-size: 21px; padding: 4px 6px; }
  .fav-d { display: none; }
  .row:not(.nolead) .aside:empty, .row:not(.nolead) .aside:not(:has(> :not(.fav-d):not(.rowread-d))) { display: none; }
  .row:not(.nolead):not(:has(.mini)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- scorrimento delle righe (telefono) */
@media (max-width: 860px) { .item > .row { touch-action: pan-y; } }
.item.swiping { position: relative; overflow: hidden; }
.item.swiping > .row { position: relative; z-index: 1; background: var(--surface); will-change: transform; }
.item.swiping.is-sel > .row { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.swipebg { position: absolute; left: 0; right: 0; top: 0; z-index: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-weight: 600; font-size: 14.5px; color: var(--muted); background: color-mix(in srgb, var(--line) 60%, var(--surface)); }
.swipebg span { opacity: 0; transition: opacity .1s; }
.swipebg.right .sl, .swipebg.left .sr2, .swipebg.hint span { opacity: 1; }
.swipebg.armed { color: #fff; }
.swipebg.armed[data-to="read"] { background: var(--accent); color: var(--accent-ink); }
.swipebg.armed[data-to="to_read"] { background: var(--read); color: var(--bg); }
.swipebg.armed[data-to="reading"] { background: var(--warn); color: var(--bg); }
.swipebg.hint { background: linear-gradient(90deg, var(--accent-soft) 50%, color-mix(in srgb, var(--read) 22%, var(--surface)) 50%); color: var(--ink); }
.row.peek { animation: peek 2.2s ease-in-out; }
@keyframes peek { 0%, 100% { transform: none; } 22%, 34% { transform: translateX(84px); } 50% { transform: none; } 66%, 78% { transform: translateX(-84px); } }
@media (prefers-reduced-motion: reduce) { .row.peek { animation: none; } }


/* ================================================================ navigazione: schede e barra in basso */
.toolbar { align-items: center; }
.vtitle.sr { position: absolute; }
.libtabs, .toolbar .readtabs { flex: 1 1 auto; min-width: 0; }
.readtabs .n { font-size: 12px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.readtabs button[aria-selected="true"] .n { color: var(--accent); }
.tshort { display: none; }
.searchwrap { display: flex; align-items: center; gap: 4px; }
#searchClose { display: none; }
.mainnav .navlist + .navlist { margin-top: 2px; }
.bnav { display: none; }

@media (max-width: 860px) {
  /* testata: solo il nome, grande come era il titolo della vista; sotto, le schede */
  .brand h1 { font-size: 30px; }
  .brand { padding-bottom: 8px; }
  .toolbar { display: block; }
  .libtabs button, .toolbar .readtabs button { flex: 1 1 auto; padding: 11px 4px 10px; font-size: 14.5px; }
  .libtabs .n { display: none; }
  .tlong { display: none; } .tshort { display: inline; font-size: 17px; line-height: 1; }
  .mainnav { display: none; } /* Libreria e Lettura sono nella barra in basso */

  /* ricerca: si apre dal tasto in basso; il campo sta in alto, così la tastiera non copre i risultati */
  .searchwrap { display: none; }
  body.searching .brand, body.searching .libtabs { display: none; }
  body.searching .searchwrap {
    display: flex; position: sticky; top: 0; z-index: 20; padding: 6px 0 8px; background: var(--bg);
  }
  body.searching .searchwrap input[type="search"] { display: block; flex: 1; width: auto; font-size: 16px; padding: 10px 12px; border-radius: 10px; }
  body.searching #searchClose { display: inline-flex; }
  /* barra in basso: Libreria · Lettura · + · Cerca · Menu */
  .bnav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; z-index: 36; left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .bnbtn { position: relative; display: grid; justify-items: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 8px 0 6px; }
  .bnbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bnbtn.on, .bnbtn[aria-expanded="true"] { color: var(--accent); }
  .bnbtn.on svg { stroke-width: 2.2; }
  .bbadge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 11px/17px var(--font-body); font-style: normal; }
  .bnplus { justify-self: center; width: 52px; height: 52px; margin-top: -18px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 30px; line-height: 1; box-shadow: 0 6px 16px rgb(0 0 0 / .25); }
  body.reading .bnav { display: none; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* menu: un foglio che sale dal basso, sopra la barra */
  .side {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 82vh; border-radius: 18px 18px 0 0;
    transform: translateY(105%); box-shadow: 0 -8px 30px rgb(0 0 0 / .25);
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  }
  .side.open { transform: none; }
  .side-head { position: sticky; top: -10px; z-index: 1; background: var(--bg); padding: 6px 0 4px; }
  .side-head::before { content: ""; position: absolute; left: 50%; top: -2px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
}


/* telefono: prima il titolo, poi in basso a destra (sotto il pollice) stella e «Leggi»/«Riprendi» */
@media (max-width: 860px) {
  .row .txt { order: 1; }
  .row .lead { order: 2; margin-top: 2px; }
  .row .aside { order: 3; }
  .row.nolead .aside { order: 0; }
  .lead .fav-m { margin-left: auto; }
  .lead .rowread-m { padding: 8px 16px; font-size: 14px; }
}


/* Lettura: le esportazioni in un menu discreto, accanto al conteggio */
.notesbar { align-items: center; }
.nexport { position: relative; margin-left: auto; }
.nexport > summary { list-style: none; cursor: pointer; font-size: 13.5px; color: var(--accent); font-weight: 600; padding: 4px 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.nexport > summary::-webkit-details-marker { display: none; }
.nexport > summary::after { content: "▾"; font-size: 11px; }
.nexport[open] > summary { background: var(--accent-soft); }
.nmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; display: grid; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .16); }
.nmenu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 7px; font-size: 14px; color: var(--ink); }
.nmenu button:hover { background: var(--accent-soft); }
@media (max-width: 860px) {
  body.searching .filterbar { display: none !important; } /* durante la ricerca basta il campo */
  body.searching .searchwrap input[type="search"]::-webkit-search-cancel-button { display: none; }
}

/* telefono: le schede (stati della libreria, sezioni di Lettura) in basso, sopra la barra, dove arriva il pollice.
   Scorrendo in giù si nascondono per lasciare spazio, scorrendo in su tornano. */
@media (max-width: 860px) {
  body { padding-bottom: 150px; }
  .libtabs, .toolbar .readtabs {
    position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 4px; padding: 6px 8px; margin: 0; overflow-x: auto;
    background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); border-bottom: 0; transition: transform .2s ease, opacity .2s ease;
  }
  .libtabs button, .toolbar .readtabs button {
    flex: 1 1 auto; border: 0; margin: 0; border-radius: 999px; padding: 8px 6px; font-size: 14px; min-height: 36px;
  }
  .libtabs button[aria-selected="true"], .toolbar .readtabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); border-bottom-color: transparent; }
  body.tabs-hide .libtabs, body.tabs-hide .toolbar .readtabs { transform: translateY(calc(100% + 64px)); opacity: 0; pointer-events: none; }
  body.reading .libtabs, body.reading .toolbar .readtabs { display: none; }
  .toast { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
  .toolbar { min-height: 0; }
}

/* telefono: il menu è una pagina (progetti, gruppi, temi, filtri, impostazioni) al posto della lista */
@media (max-width: 860px) {
  .side {
    position: static; z-index: auto; /* è un elemento della griglia: con z-index finirebbe sopra la barra in basso */
    transform: none; visibility: visible; display: none; width: auto; max-height: none; overflow: visible;
    margin: 0; padding: 4px 0 0; border-radius: 0; box-shadow: none; background: none; transition: none;
  }
  body.menu-open .side { display: grid; gap: 18px; }
  body.menu-open main, body.menu-open .libtabs, body.menu-open .toolbar .readtabs { display: none !important; }
  body.menu-open { overflow: visible; }
  .side-head { display: none; }
  .scrim { display: none !important; }
  body.menu-open .bnbtn.on { color: var(--muted); }
  body.menu-open .bnbtn.on svg { stroke-width: 1.8; }
  .side .navbtn { padding-top: 11px; padding-bottom: 11px; }
  .side-foot { margin-top: 6px; }
}
.sheet-main .btn { padding: 14px 10px; font-size: 16px; font-weight: 600; }

/* ---------------------------------------------------------------- riga dei filtri sopra la lista */
.filterbar { gap: 6px 8px; }
.fchip.pchip-f { padding: 0; }
.fchip .fpick { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; padding: 5px 10px 5px 12px; border-radius: 999px; white-space: nowrap; }
.fchip .fpick span { color: var(--muted); font-size: 11px; }
.fchip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-weight: 600; }
.fchip.on .fpick { padding-right: 2px; }
.fchip.on > button[data-clear] { padding: 0 9px 0 4px; }
.filterbar .linkbtn { font-size: 13px; white-space: nowrap; }
@media (max-width: 860px) {
  .filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .filterbar::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
  #topicsWrap { display: none !important; } /* sul telefono i temi si scelgono dalla riga dei filtri */
}

/* elenco da cui scegliere un filtro */
.pick { width: min(420px, calc(100vw - 32px)); padding: 16px 18px; }
.pick .sheet-head h2 { margin: 0; }
.picklist { display: grid; gap: 2px; margin-top: 8px; max-height: 60vh; overflow-y: auto; }
.pkrow { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.pkrow > button[data-pv] { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 11px 10px; border-radius: 8px; font-size: 15px; color: var(--ink); min-width: 0; }
.pkrow > button[data-pv] > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkrow > button[data-pv]:hover { background: var(--accent-soft); }
.pkrow.on > button[data-pv] { font-weight: 600; background: var(--accent-soft); }
.pkrow .n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pkrow .ck { color: var(--accent); }
.pkrow .tedit { opacity: .7; width: 36px; height: 36px; }
.pickfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-size: 13px; }
@media (max-width: 860px) {
  .pick { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 18px 18px 0 0; border: 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .pick .picklist { max-height: 62vh; }
}

/* scheda selezionata ben visibile: sul computer filetto spesso e testo pieno, sul telefono pillola piena */
.readtabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-width: 3px; border-bottom-color: var(--accent); }
@media (max-width: 860px) {
  .libtabs button[aria-selected="true"], .toolbar .readtabs button[aria-selected="true"] {
    background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 1px 4px rgb(0 0 0 / .18);
  }
  .libtabs button:not([aria-selected="true"]), .toolbar .readtabs button:not([aria-selected="true"]) { color: var(--muted); }
  /* barra in basso: la sezione attiva ha una pillola dietro l'icona */
  .bnbtn svg { padding: 3px 14px; width: 52px; height: 30px; border-radius: 15px; box-sizing: border-box; transition: background .15s; }
  .bnbtn.on svg, .bnbtn[aria-expanded="true"] svg { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  .bnbtn.on, .bnbtn[aria-expanded="true"] { color: var(--ink); }
  .bnbtn.on svg, .bnbtn[aria-expanded="true"] svg { color: var(--accent); }
  body.menu-open .bnbtn.on svg { background: none; color: var(--muted); }
  body.menu-open .bnbtn.on { color: var(--muted); }
  .readtabs .badge { background: var(--accent-ink); color: var(--accent); }
}
/* barra laterale più alta dello schermo: scorre, ma la barra di scorrimento non ruba spazio alle voci */
@media (min-width: 861px) { .side { scrollbar-width: none; grid-template-columns: minmax(0, 1fr); } .side::-webkit-scrollbar { display: none; } }


/* telefono: impostazioni aperte sotto l'ingranaggio, nella pagina del menu (non una finestra sopra) */
@media (max-width: 860px) {
  .side .settings.inmenu { position: static; inset: auto; width: auto; height: auto; max-height: none; overflow: visible; margin: 0;
    padding: 4px 2px 8px; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; zoom: 1; }
  .side .settings.inmenu .sheet-head h2 { font-size: 18px; }
  .gearbtn[aria-expanded="true"] { color: var(--ink); background: var(--surface); }
  .gearbtn::after { content: "▾"; margin-left: auto; font-size: 12px; transition: transform .15s; }
  .gearbtn[aria-expanded="true"]::after { transform: rotate(180deg); }
}
/* nomi dei colori delle sottolineature */
.hlnames { display: grid; gap: 6px; width: 100%; }
.hlname { display: flex; align-items: center; gap: 10px; }
.hlname .sw { flex: none; display: inline-flex; padding: 0; border: 0; background: none; }
.hlname .sw span { width: 18px; height: 18px; }
.hlname input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--ink); font: inherit; }
#hlPreset { flex-wrap: wrap; }

@media (max-width: 860px) { .side .settings.inmenu .sheet-head h2 { text-transform: none; letter-spacing: -0.01em; color: var(--ink); font-family: var(--font-serif); font-weight: 700; margin: 0; } }

/* ---------------------------------------------------------------- logo: una sottolineatura a matita, come un appunto */
.brand { border-bottom: 1px solid var(--line) !important; }
.wordmark { position: relative; display: inline-block; padding-bottom: 6px; }
.pencil { position: absolute; left: .5em; top: .77em; width: calc(100% - .56em); height: .44em; overflow: visible; pointer-events: none; }
/* il tratto parte dopo la «g» (non ne taglia la coda) e sta appena sotto le altre lettere */
.pencil path { fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; }
.pencil .p1 { stroke-width: 2.4; opacity: .85; stroke-dasharray: 130; stroke-dashoffset: 130; animation: pencil-draw .9s .15s cubic-bezier(.4, .1, .3, 1) forwards; }
.pencil .p2 { stroke-width: 1.5; opacity: .55; stroke-dasharray: 120; stroke-dashoffset: 120; animation: pencil-draw .7s .75s cubic-bezier(.4, .1, .3, 1) forwards; }
@keyframes pencil-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pencil path { animation: none; stroke-dashoffset: 0; } }
.wordmark:hover .pencil path { stroke: var(--accent); }

/* ---------------------------------------------------------------- accesso dell'ente */
.access { width: min(520px, calc(100vw - 32px)); }
.access form, .access { text-align: left; }
.access .fld { display: grid; gap: 4px; margin: 10px 0 4px; }
.access input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.accres { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.accres button { width: 100%; display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14.5px; color: var(--ink); }
.accres button:hover, .accres button.on { background: var(--accent-soft); }
.accres button.on { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.accres .hint { padding: 6px 10px; }
.accor { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.accfound { margin: 8px 0; padding: 9px 12px; border-radius: 9px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.accfound .hint { display: block; font-size: 12px; word-break: break-all; }
.access .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.access .actions .danger { margin-left: auto; }
.accsrc { margin-top: 12px; font-size: 12px; }
.accard { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.accard.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.accard p { margin: 0; }
.accacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 860px) {
  .access { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 18px 18px 0 0; border: 0; max-height: 92vh; overflow-y: auto;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* impostazioni: la × resta sempre visibile mentre si scorre (prima spariva insieme all'ingranaggio) */
.settings .sheet-head { position: sticky; top: -22px; z-index: 3; background: var(--surface); margin: -10px 0 4px; padding: 10px 0 8px; border-bottom: 1px solid transparent; }
.settings .sheet-head #settingsClose { width: 40px; height: 40px; font-size: 22px; }
@media (max-width: 860px) {
  .side .settings.inmenu { width: 100%; justify-self: stretch; }
  .side .settings.inmenu .sheet-head { top: 0; background: var(--bg); padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px; margin: 0 0 4px; border-bottom-color: var(--line); }
  .side .settings.inmenu .sheet-head #settingsClose { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
}

/* barra dei colori: compatta e sopra la selezione (il testo che segue resta visibile).
   Con i nomi di base (Giallo, Blu…) basta il colore; i nomi scelti dall'utente si vedono in piccolo */
.rtool .sw b { font-weight: 500; }
.rtool.plain .sw b { display: none; }
.rtool .sw > span { width: 16px; height: 16px; border-radius: 50%; }
.rtool.plain .sw:not(.note) { padding: 7px 9px; }
@media (pointer: coarse) {
  .rtool { padding: 4px 6px; }
  .rtool.plain .sw:not(.note) { padding: 9px 10px; flex: 1 1 0; }
  .rtool:not(.plain) .sw { font-size: 12.5px; padding: 8px 6px; }
  .radj { padding-top: 2px; }
  .radj button { height: 32px; }
}

/* pannello delle citazioni nel reader: si allarga trascinando il bordo (computer); la larghezza è ricordata */
@media (min-width: 861px) { .rside { width: var(--rside-w, 300px); } }
.rsizer { display: none; }
@media (min-width: 861px) and (pointer: fine) {
  .rbody { position: relative; }
  .rsizer { display: block; position: absolute; top: 0; bottom: 0; right: var(--rside-w, 300px); width: 12px; margin-right: -6px; z-index: 6; cursor: col-resize; touch-action: none; }
  .rsizer[hidden] { display: none; }
  .rsizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: transparent; transition: background .15s; }
  .rsizer:hover::after, .rsizer:focus-visible::after, .reader.resizing .rsizer::after { background: var(--accent); }
  .rsizer:focus-visible { outline: none; }
  .reader.resizing, .reader.resizing * { cursor: col-resize !important; user-select: none !important; }
}

/* sorgenti automatiche (impostazioni → dal browser) */
.autosrc { display: grid; gap: 6px; width: 100%; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.autosrc .setlbl { font-weight: 600; font-size: 14.5px; }
.autolist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.autolist[hidden] { display: none; }
.autolist li { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 12px; background: var(--bg); font-size: 13.5px; }
.autolist .iconbtn { width: 28px; height: 28px; font-size: 16px; }
.autoform { display: flex; gap: 8px; width: 100%; }
.autoform input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--ink); font: inherit; }