/* sheet.css — foglio di scrittura a tutta view + toolbar stili */

#stage-write{
  position:fixed;
  left:var(--nav-w); right:0; top:0; bottom:0;
  z-index:5;
  display:flex; flex-direction:column;
  background:#fff;
  transition:opacity .25s, left .22s cubic-bezier(.4,0,.2,1);
}
body.nav-collapsed #stage-write{ left:var(--rail-w); }
body.home #stage-write,
body.reading #stage-write{
  opacity:0; pointer-events:none; visibility:hidden;
}

#fmt{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:8px 12px;
  border-bottom:1.5px solid #000;
  background:#fff;
}
#fmt button{
  appearance:none; cursor:pointer;
  font:700 10px/1 'Space Mono',monospace;
  letter-spacing:0.06em; text-transform:lowercase;
  color:rgba(0,0,0,0.55); background:#fff;
  border:1.5px solid rgba(0,0,0,0.2);
  padding:7px 9px;
}
#fmt button:hover,
#fmt button.on{ color:#000; border-color:#000; background:rgba(0,0,0,0.04); }
#fmt .fmt-sep{
  width:1px; height:18px; background:rgba(0,0,0,0.15); margin:0 4px;
}
#fmt .fmt-grow{ flex:1; }
#fmt #fmt-save{
  color:#000; border-color:#000;
}
#fmt .fmt-ink-size{
  display:inline-flex; align-items:center; gap:6px;
  font:700 10px/1 'Space Mono',monospace;
  letter-spacing:0.06em; text-transform:lowercase;
  color:rgba(0,0,0,0.55);
  margin-left:4px;
}
#fmt .fmt-ink-size[hidden]{ display:none !important; }
#fmt .fmt-ink-size input[type="range"]{
  width:88px; height:18px; margin:0; cursor:pointer;
  accent-color:#000;
}
#fmt .fmt-ink-size #fmt-grid-step-val{
  min-width:1.6em; color:#000;
}
#fmt .fmt-ink-color{
  display:inline-flex; align-items:center; gap:6px;
  font:700 10px/1 'Space Mono',monospace;
  letter-spacing:0.06em; text-transform:lowercase;
  color:rgba(0,0,0,0.55);
  margin-left:4px;
}
#fmt .fmt-ink-color[hidden]{ display:none !important; }
#fmt .fmt-ink-color input[type="color"]{
  width:28px; height:22px; padding:0; border:1.5px solid rgba(0,0,0,0.25);
  background:#fff; cursor:pointer;
}

#sheet-wrap{
  position:relative;
  flex:1; min-height:0;
  overflow:hidden;
  touch-action:none;
  background:#fff;
  cursor:default;
}
#sheet-wrap.panning{ cursor:grabbing; }
body.pan-mode #sheet-wrap{ cursor:grab; }
body.draw3d-mode #sheet-wrap{ cursor:move; }
body.ink-erase #world3d,
body.ink-erase #sheet-wrap{ cursor:cell; }
#sheet-empty{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; padding:24px;
  pointer-events:none;
  text-align:center;
}
#sheet-empty[hidden]{ display:none !important; }
#sheet-empty .sheet-empty-lead{
  margin:0;
  font:700 14px/1.3 'Space Mono',monospace;
  letter-spacing:0.08em; text-transform:lowercase;
  color:#000;
}
#sheet-empty .sheet-empty-sub{
  margin:0 0 8px;
  font:400 11px/1.4 'Space Mono',monospace;
  letter-spacing:0.06em; text-transform:lowercase;
  color:rgba(0,0,0,0.45);
}
#sheet-empty .sheet-empty-more{
  margin:12px 0 0;
  font:400 10px/1.4 'Space Mono',monospace;
  letter-spacing:0.08em; text-transform:lowercase;
  color:rgba(0,0,0,0.28);
}
#sheet-empty .sheet-empty-acts{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  pointer-events:auto;
}
#sheet-empty .sheet-empty-acts button{
  appearance:none; cursor:pointer;
  font:700 11px/1 'Space Mono',monospace;
  letter-spacing:0.08em; text-transform:lowercase;
  color:#000; background:#fff;
  border:1.5px solid #000; padding:12px 14px;
}
#sheet-empty .sheet-empty-acts button:hover{
  background:#000; color:#fff;
}
#sheet-world{
  position:absolute; left:0; top:0;
  width:0; height:0;
  overflow:visible;
  transform-origin:0 0;
  will-change:transform;
  z-index:2;
  pointer-events:none;
}
.plane-layer{
  position:absolute; left:0; top:0;
  width:0; height:0;
  overflow:visible;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.plane-layer .sheet-block{
  pointer-events:auto;
}
.plane-layer.is-active-plane{
  z-index:2;
}
.plane-tools{
  display:none;
  position:absolute;
  left:0; top:-32px;
  gap:4px;
  align-items:center;
  z-index:6;
  pointer-events:auto;
}
body.draw3d-mode .plane-layer.is-active-plane .plane-tools{
  display:flex;
}
.plane-ink-mark{
  display:none;
  position:absolute;
  left:0; top:-32px;
  z-index:6;
  pointer-events:auto;
}
body.ink-mode .plane-layer.is-active-plane .plane-ink-mark{
  display:block;
}
.plane-ink-mark-btn{
  appearance:none; cursor:default;
  width:28px; height:28px; padding:0;
  font:700 14px/1 'Space Mono',monospace;
  color:#000; background:#fff;
  border:1.5px solid #000;
}
body.ink-pick-plane #world3d,
body.ink-pick-plane #sheet-wrap{
  cursor:pointer;
}
.plane-tools button{
  appearance:none; cursor:pointer;
  width:28px; height:28px; padding:0;
  font:700 14px/1 'Space Mono',monospace;
  color:#000; background:#fff;
  border:1.5px solid #000;
}
.plane-tools button:hover{ background:#000; color:#fff; }
.plane-tools button:disabled{
  opacity:0.35; cursor:default;
}
.plane-tools button:disabled:hover{
  background:#fff; color:#000;
}
.plane-tool-move,
.plane-tool-rot{ cursor:grab; touch-action:none; }
.plane-layer.is-dragging-plane .plane-tool-move,
.plane-layer.is-dragging-plane .plane-tool-rot{ cursor:grabbing; }
#sheet-blocks{
  position:absolute; left:0; top:0;
  z-index:1;
  pointer-events:none;
}
#sheet-blocks .sheet-block{
  pointer-events:auto;
}
#world3d{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  touch-action:none;
  z-index:1;
}
body.ink-mode #world3d,
body.draw3d-mode #world3d{
  pointer-events:auto; cursor:crosshair;
}
.sheet-block{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:80px;
  min-height:48px;
  outline:none;
  background:transparent;
  border:1px solid transparent;
  container-type:size;
  container-name:block;
}
.sheet-block--text{
  min-width:160px;
  min-height:80px;
}
.sheet-block.is-active,
.sheet-block.is-dragging,
.sheet-block.is-resizing{
  border-color:rgba(0,0,0,0.22);
  background:rgba(255,255,255,0.85);
  z-index:3;
}
.sheet-block-bar{
  display:none;
  position:absolute; top:-28px; left:0;
  gap:4px; align-items:center;
  z-index:4;
}
.sheet-block.is-active .sheet-block-bar,
.sheet-block.is-dragging .sheet-block-bar,
.sheet-block.is-resizing .sheet-block-bar,
.sheet-block:hover .sheet-block-bar{
  display:flex;
}
.sheet-block-bar button{
  appearance:none; cursor:pointer;
  width:24px; height:24px; padding:0;
  font:700 12px/1 'Space Mono',monospace;
  color:#000; background:#fff;
  border:1.5px solid #000;
}
.sheet-block-bar button:hover{ background:#000; color:#fff; }
.sheet-block-drag{ cursor:grab; touch-action:none; }
.sheet-block.is-dragging .sheet-block-drag{ cursor:grabbing; }
.sheet-block-del{ display:none; font-size:16px; line-height:1; }
.sheet-block.is-dragging .sheet-block-del,
.sheet-block.is-active .sheet-block-del,
.sheet-block.is-resizing .sheet-block-del{
  display:block;
}
.sheet-block-resize{
  display:none;
  position:absolute; right:0; bottom:0;
  width:16px; height:16px;
  cursor:nwse-resize; touch-action:none;
  z-index:5;
  background:
    linear-gradient(135deg, transparent 55%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.45) 70%, transparent 70%),
    linear-gradient(135deg, transparent 75%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.45) 90%, transparent 90%);
}
.sheet-block.is-active .sheet-block-resize,
.sheet-block.is-resizing .sheet-block-resize,
.sheet-block:hover .sheet-block-resize{
  display:block;
}
/* tipografia fluida: segue la scatola (cq*), non rem/root */
.sheet-block-body{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  outline:none;
  overflow:auto;
  font-family:'Space Mono',monospace;
  font-weight:400;
  font-size:clamp(12px, calc(2.4cqw + 0.55cqh), 26px);
  line-height:1.6;
  color:#000; caret-color:#000;
  tab-size:2;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.sheet-block-body:empty:before{
  content:attr(data-placeholder);
  color:rgba(0,0,0,0.28);
  pointer-events:none;
}
body.ink-mode .plane-layer,
body.draw3d-mode .plane-layer,
body.pan-mode .plane-layer{
  pointer-events:none;
  user-select:none;
}
body.ink-mode #sheet-blocks,
body.draw3d-mode #sheet-blocks,
body.pan-mode #sheet-blocks{
  pointer-events:none;
  user-select:none;
}
body.ink-mode .sheet-block,
body.draw3d-mode .sheet-block,
body.pan-mode .sheet-block{
  caret-color:transparent;
}
.sheet-block h1{ font-size:1.55em; font-weight:700; margin:0 0 0.6em; line-height:1.25; }
.sheet-block h2{ font-size:1.28em; font-weight:700; margin:0 0 0.55em; line-height:1.3; }
.sheet-block h3{ font-size:1.1em; font-weight:700; margin:0 0 0.5em; line-height:1.35; }
.sheet-block p{ margin:0 0 0.85em; }
.sheet-block blockquote{
  margin:0 0 0.85em; padding-left:14px;
  border-left:2px solid rgba(0,0,0,0.35);
  color:rgba(0,0,0,0.72);
}
.sheet-block ul, .sheet-block ol{ margin:0 0 0.85em; padding-left:1.4em; }
.sheet-block li{ margin:0.2em 0; }
.sheet-block pre{
  margin:0 0 0.85em; padding:12px 14px;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.12);
  font:400 0.92em/1.5 'Space Mono',monospace; overflow-x:auto;
}
.sheet-block code{
  font-family:'Space Mono',monospace;
  background:rgba(0,0,0,0.05); padding:0.05em 0.25em;
}
.sheet-block pre code{ background:none; padding:0; }
.sheet-block strong{ font-weight:700; }
.sheet-block em{ font-style:italic; }

/* lista scritti in nav */
#scritti-list{ display:flex; flex-direction:column; gap:8px; }
.scritto{
  display:flex; flex-direction:column; gap:8px;
  padding:12px; border:1.5px solid rgba(0,0,0,0.16);
  font:400 12px/1.4 'Space Mono',monospace;
}
.scritto:hover{ border-color:#000; }
.scritto .sc-title{
  font-weight:700; color:#000; letter-spacing:0.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.scritto .sc-meta{ color:rgba(0,0,0,0.42); font-size:10px; letter-spacing:0.04em; }
.scritto .sc-acts{ display:flex; flex-wrap:wrap; gap:6px; }
.scritto .sc-acts button{
  appearance:none; cursor:pointer; flex:1 1 auto; min-width:64px; min-height:36px;
  font:700 10px/1 'Space Mono',monospace; letter-spacing:0.06em;
  text-transform:lowercase; color:rgba(0,0,0,0.6);
  background:#fff; border:1.5px solid rgba(0,0,0,0.18); padding:9px 8px;
}
.scritto .sc-acts button:hover{ color:#000; border-color:#000; }