/* ===== reader opens on the LEFT part of the screen; Focus (or phones) = full screen ===== */
:root { --rw: clamp(380px, 46vw, 820px); }
#reader { inset: 52px auto 0 0; width: var(--rw); border-right: 1px solid var(--line2); box-shadow: 10px 0 40px rgba(0, 0, 0, .45); }
body.focus-mode #reader { inset: 0; width: auto; border-right: 0; box-shadow: none; }
@media (min-width: 761px) {
  body.reader-open #stage { left: var(--rw); }
  body.reader-open #statusbar { left: calc(var(--rw) + 12px); }
  body.reader-open #libTab { display: none; }
  body.focus-mode #stage { left: 0; }
}
@media (max-width: 760px) { #reader { inset: 52px 0 0 0; width: auto; } }
#rdGrip { position: fixed; z-index: 26; top: 52px; bottom: 0; width: 10px; margin-left: -5px; left: var(--rw); cursor: col-resize; touch-action: none; display: none; }
#rdGrip::after { content: ''; position: absolute; left: 4px; top: 45%; height: 10%; width: 2px; border-radius: 2px; background: var(--line2); }
#rdGrip:hover::after { background: var(--gold); }
@media (min-width: 761px) { body.reader-open:not(.focus-mode) #rdGrip { display: block; } }
body.konami::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255,240,190,.35), transparent 60%); animation: kon 1.4s ease-out forwards; }
@keyframes kon { from { opacity: 1; } to { opacity: 0; } }

/* ===== star shapes + icons ===== */
.node { isolation: isolate; }
.node-shape { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.node-icon { font-size: 16px; line-height: 1; }
.node-icon[hidden] { display: none; }
.node:not(.shp-rounded):not(.bare) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.node:not(.shp-rounded):not(.bare) .node-shape { display: block; background: var(--nc, var(--gold)); }
.node:not(.shp-rounded):not(.bare) .node-shape::after { content: ''; position: absolute; inset: 1.6px; background: color-mix(in srgb, var(--nc, var(--gold)) 12%, var(--ink2)); clip-path: inherit; }
.node.selected:not(.shp-rounded):not(.bare) .node-shape { filter: drop-shadow(0 0 7px var(--nc, var(--gold))); }
.shp-circle .node-shape, .shp-circle .node-shape::after { clip-path: ellipse(50% 50% at 50% 50%); }
.shp-diamond .node-shape, .shp-diamond .node-shape::after { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shp-hex .node-shape, .shp-hex .node-shape::after { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.shp-star .node-shape, .shp-star .node-shape::after { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shp-note .node-shape, .shp-note .node-shape::after { clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 0 100%); }
.shp-circle .node-head, .shp-hex .node-head { padding-left: 14%; padding-right: 14%; }
.shp-circle .node-body, .shp-hex .node-body { padding-left: 14%; padding-right: 14%; }
.shp-diamond .node-head { padding-left: 24%; padding-right: 24%; padding-top: 14%; }
.shp-diamond .node-body { padding-left: 24%; padding-right: 24%; }
.shp-star .node-head { padding-left: 26%; padding-right: 26%; padding-top: 26%; }
.shp-star .node-body { padding-left: 26%; padding-right: 26%; padding-bottom: 14%; }
.shp-diamond .node-tools, .shp-star .node-tools { display: none; }
.shp-diamond.selected .node-tools, .shp-star.selected .node-tools { display: flex; }
.shape-pop { position: fixed; z-index: 70; width: 290px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; display: grid; gap: 8px; padding: 12px; background: var(--ink2); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.sp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-shape, .sp-emoji { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; font-size: 19px; }
.sp-shape.on, .sp-emoji.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sp-ico { width: 22px; height: 22px; background: var(--star); display: block; }
.sp-ico.shp-rounded { border-radius: 5px; } .sp-ico.shp-circle { border-radius: 50%; }
.sp-ico.shp-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .sp-ico.shp-hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.sp-ico.shp-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .sp-ico.shp-note { clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 0 100%); }

/* ===== argument links ===== */
.conn-kind-bg { fill: var(--ink); stroke-width: 1.4; pointer-events: none; }
.conn-kind { font: 700 12px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.conn-arrow { pointer-events: none; }
#ctxbar .btn.on { border-color: var(--gold); color: var(--gold); }
#arg-legend { position: absolute; right: 12px; top: 10px; z-index: 6; display: grid; gap: 3px; padding: 7px 10px; font: 11px var(--mono); background: color-mix(in srgb, var(--ink) 78%, transparent); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
#arg-legend[hidden] { display: none; }
#arg-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
#arg-legend.min > :not(b) { display: none; }
.node.pulse { animation: pulse 1.1s ease-out 2; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--gold); } 100% { box-shadow: 0 0 0 28px transparent; } }
.node.flag::after { content: '⚠'; position: absolute; right: -8px; top: -10px; left: auto; width: auto; height: auto; background: none; font-size: 15px; opacity: 1; color: var(--gold); }
.arg-panel { position: fixed; right: 12px; top: 64px; z-index: 30; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 140px); overflow: auto; background: var(--ink2); border: 1px solid var(--line2); border-radius: 14px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); }
.arg-panel[hidden] { display: none; }
.arg-panel h3 { margin: 8px 0 2px; font-size: 14px; }
.arg-item { text-align: left; background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.arg-item:hover { border-color: var(--gold); }
.arg-ok { color: var(--ok); }

/* ===== universe ===== */
#universe { position: fixed; inset: 52px 0 0 0; z-index: 40; background: color-mix(in srgb, var(--ink) 97%, transparent); }
#universe[hidden] { display: none; }
#universe canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#uv-bar { position: absolute; left: 12px; top: 10px; display: flex; gap: 8px; align-items: center; }
#uv-tip { position: absolute; pointer-events: none; padding: 4px 10px; border-radius: 999px; background: var(--ink2); border: 1px solid var(--line2); font: 12px var(--mono); transform: translate(12px, 12px); }

/* ===== web page inside a star ===== */
.node.is-web .node-body, .node.is-web .node-src { display: none; }
.node-web { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 6px 6px; gap: 4px; }
.web-bar { display: flex; gap: 4px; align-items: center; }
.web-url { flex: 1; min-width: 0; padding: 4px 8px; font: 11px var(--mono); border-radius: 8px; }
.web-btn { background: var(--ink); border: 1px solid var(--line); color: var(--star); border-radius: 8px; width: 28px; height: 26px; padding: 0; line-height: 1; }
.web-btn:hover { border-color: var(--gold); }
.web-frame { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.node.is-web:not(.selected) .web-frame { pointer-events: none; } /* click the star once to select it, then the page is interactive */
.web-hint { font: 10px var(--mono); color: var(--dim); opacity: .75; }
.node.is-web:not(.selected) .web-hint { display: none; }
body.readonly .web-frame { pointer-events: auto; }

/* ===== library sidebar width: a bit larger by default, drag the edge to set your own ===== */
:root { --lw: 380px; }
@media (min-width: 761px) {
  #library { width: var(--lw); }
  #stage { left: var(--lw); }
  #statusbar { left: calc(var(--lw) + 12px); }
  body.lib-closed #stage { left: 0; }
  body.lib-closed #statusbar { left: 12px; }
  body.dragging-lw #library, body.dragging-lw #stage, body.dragging-lw #statusbar { transition: none; }
  body.dragging-lw { user-select: none; cursor: col-resize; }
}
#libGrip { position: fixed; z-index: 19; top: 52px; bottom: 0; left: var(--lw); width: 12px; margin-left: -6px; cursor: col-resize; touch-action: none; display: none; }
#libGrip::after { content: ''; position: absolute; left: 5px; top: 45%; height: 10%; min-height: 36px; width: 2px; border-radius: 2px; background: var(--line2); transition: background .15s, height .15s; }
#libGrip:hover::after, #libGrip:focus-visible::after, body.dragging-lw #libGrip::after { background: var(--gold); }
@media (min-width: 761px) { body:not(.lib-closed):not(.reader-open):not(.focus-mode) #libGrip { display: block; } }

body.readonly #viewport { cursor: grab; }
body.readonly #viewport.panning { cursor: grabbing; }
body.readonly .node { cursor: grab; }
body.readonly .node-body, body.readonly .node-title { cursor: text; }

/* The canvas moves ONLY through the app's own pan/zoom transform. `clip` (unlike `hidden`) can never be scrolled by the browser,
   e.g. when a star's text gets focus while it is off-screen: that scroll used to fight the pan and made the canvas jump back. */
#viewport, #stage { overflow: clip; }