/* ============================================================
   editor.css — the editor shell's own layout. Everything else it wears comes from
   shared/css/kit.css (tokens, components) and shared/css/shell.css (rail, app bar,
   working area), in that order, and nothing here redefines either.

   WHAT IS ACTUALLY HERE: the builder's three panes, the page tree, the block cards, the
   preview dialog and a handful of one-line skins for markup only this shell emits.

   THREE RULES THIS FILE KEEPS.

   1. EACH PANE IS ITS OWN SCROLLPORT AND THE PAGE BODY NEVER SCROLLS SIDEWAYS. .view-builder
      is a fixed-height flex column, .builder is the grid that takes the remainder, and every
      pane carries `min-width:0; min-height:0; overflow:auto`. The two min-* declarations are
      not decoration — a grid or flex child defaults to min-width:auto, which means "as wide
      as my widest word", so one long file name in the tree would push the whole layout wider
      than the window and the body would scroll horizontally on a phone.

   2. BELOW 1240px EXACTLY ONE PANE IS ON SCREEN, chosen by [data-pane] on .builder and the
      kit's own .tabs above it. Above it all three show and the strip is hidden. One switch
      for every narrow width behaves the same on a phone as in a half-width window, and the
      phone is the case that has to work: at 380px the three panes ARE the whole screen.

   3. TOUCH-ACTION IS ON THE HANDLE, NEVER ON THE ROW. `touch-action:none` on a card would
      stop the canvas scrolling under a finger, which on a phone reads as a frozen page.
      kit.css already sets it on .dt-handle and sortable.js sets it inline on whatever it is
      given as a handle; the rows below deliberately say nothing about it.
   ============================================================ */

/* ============================================================
   Rail additions — the link out to the admin origin (§8.1)
   ============================================================ */
.rail-away{
  margin-bottom:6px;
  background:color-mix(in srgb, var(--canvas) 9%, transparent);
}
.rail-away .rail-out{ opacity:.65 }
.rail-away:hover{ background:color-mix(in srgb, var(--canvas) 16%, transparent); text-decoration:none }
/* The banner's fallback when the admin origin cannot be derived from this host. */
.banner-where{ margin:0; font-size:.86rem; font-weight:600 }

/* ============================================================
   Overview
   ============================================================ */
.dash-pages{ display:flex; flex-direction:column; gap:1px; margin:10px 0 0 }
.dash-pages li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border-radius:var(--r-sm);
}
.dash-pages li:hover{ background:var(--tint) }
.dash-pages a{ flex:1; min-width:0 }
.dash-pages b{ font-weight:600 }
.dash-pages .mono{ color:var(--ink-2) }
.dash-pages .muted{ font-size:.76rem; white-space:nowrap }
.dash-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px }

/* ============================================================
   Pages table
   ============================================================ */
/* kit.css styles .cell-title but knows nothing about an icon in one, and an <svg> with no
   size in a flex-less container fills the cell — a 300px house glyph, measured. */
.view-pages .cell-title{ display:flex; align-items:center; gap:8px; min-width:0 }
.cell-ico{ width:18px; height:18px; flex:none; opacity:.75 }
.cell-ico svg{ width:18px; height:18px }

/* ============================================================
   The builder — frame
   ============================================================ */
.view-builder{
  display:flex; flex-direction:column; gap:0;
  height:100dvh; padding-bottom:0; min-height:0;
}
/* .view puts a gutter on every child but the header band; the builder is full-bleed. */
.view-builder > *{ margin-inline:0 }

.builder-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-height:var(--head-h); padding:10px var(--gut);
  background:var(--canvas-3); color:var(--on-canvas);
  border-bottom:1px solid color-mix(in srgb, var(--on-canvas) 14%, transparent);
}
.b-title{ margin-right:auto; min-width:0 }
.b-page{
  font-family:var(--font-display); font-weight:500; font-size:1.16rem; letter-spacing:.04em;
}
.b-dirty{ margin-left:8px; color:var(--warn); font-size:.8rem; vertical-align:middle }
.b-meta{ margin:1px 0 0; font-size:.72rem; color:var(--ink-2) }
.b-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.b-warnings:not(:empty){ padding:10px var(--gut) 0 }
.b-warnings .note + .note{ margin-top:8px }

.builder-strip{ padding:8px var(--gut); background:var(--canvas-3) }

.builder{
  flex:1; min-height:0; min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
}
.builder-pane{
  min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain;
  padding:14px var(--gut);
  scrollbar-width:thin;
}
/* The side panes are narrow by definition; the page gutter is not their gutter. */
.pane-tree,.pane-panel{ padding-inline:12px }
.pane-canvas{ background:transparent }
.pane-tree,.pane-panel{ background:color-mix(in srgb, var(--canvas-3) 60%, transparent) }
.pane-tree{ border-right:1px solid color-mix(in srgb, var(--on-canvas) 12%, transparent) }
.pane-panel{ border-left:1px solid color-mix(in srgb, var(--on-canvas) 12%, transparent) }

/* One pane at a time below the three-column breakpoint. */
.builder[data-pane="tree"] .pane-canvas,
.builder[data-pane="tree"] .pane-panel,
.builder[data-pane="canvas"] .pane-tree,
.builder[data-pane="canvas"] .pane-panel,
.builder[data-pane="panel"] .pane-tree,
.builder[data-pane="panel"] .pane-canvas{ display:none }

/* 1360, NOT 1240. The rail is 268px wide and it is OUTSIDE this grid, so a 1240px window
   leaves 972px for three panes — a canvas column of about 300px, in which a block card's
   summary wraps to five words a line. Measured at 1280px before this was raised. At 1360
   the canvas gets ~500px and at 1440 ~590px, which is where the cards read properly. */
@media (min-width:1360px){
  .builder{ grid-template-columns:264px minmax(0,1fr) 324px }
  .builder-strip{ display:none }
  /* Above the breakpoint the [data-pane] switch has nothing to say. */
  .builder[data-pane] .pane-tree,
  .builder[data-pane] .pane-canvas,
  .builder[data-pane] .pane-panel{ display:block }
}
@media (max-width:1080px){
  .view-builder{ height:calc(100dvh - var(--mbar-h)) }
}

/* ============================================================
   The panes
   ============================================================ */
.builder-left{ display:flex; flex-direction:column; gap:14px }

.bpane{ border-radius:var(--r); min-width:0 }
.bpane.card{ padding:12px 12px 14px }
.bpane-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.bpane-title{
  flex:1; min-width:0;
  font-family:var(--font-display); font-weight:500; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.bpane-hint{ margin:0 0 10px; font-size:.76rem; color:var(--ink-2); line-height:1.4 }
.bpane-canvas{ padding:0 }
.bpane-canvas .bpane-head{ color:var(--on-canvas) }
.bpane-canvas .bpane-title{ color:var(--ink-2) }
.canvas-count{ font-size:.72rem; color:var(--ink-2) }

/* ============================================================
   The page tree
   ============================================================ */
.tree,.tree-blocks{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.tree-none{ padding:10px 8px; font-size:.8rem; color:var(--ink-2); line-height:1.4 }
.tree-nest{ padding:2px 0 6px 14px }
.tree-blocks{ border-left:2px solid var(--line); padding-left:6px }

.tree-row{
  display:flex; align-items:center; gap:7px; min-width:0;
  padding:6px 6px 6px 2px; border-radius:var(--r-sm);
  cursor:pointer; position:relative;
}
.tree-row:hover{ background:var(--tint) }
.tree-row:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px }
.tree-page.is-active{ background:var(--tint-2) }
.tree-page.is-active .tree-label{ font-weight:600 }
.tree-block.is-selected{ background:var(--tint-2); box-shadow:inset 2px 0 0 var(--fill) }
.tree-row.is-hidden .tree-label{ opacity:.6 }

.tree-phandle,.tree-bhandle{ flex:none }
.tree-ico{ width:17px; height:17px; flex:none; opacity:.75 }
.tree-ico svg{ width:17px; height:17px }
.tree-label{ flex:1; min-width:0; font-size:.86rem; line-height:1.3 }
.tree-block .tree-label{ display:flex; flex-direction:column }
.tree-block .tree-label b{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.tree-block .tree-label span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tree-flag{ width:15px; height:15px; flex:none; color:var(--ink-3) }
.tree-flag svg{ width:15px; height:15px }
.tree-flag-warn{ color:var(--warn) }
.tree-flag-danger{ color:var(--danger) }
.tree-num{ font-size:.66rem; color:var(--ink-3); flex:none }
.tree-more{ flex:none; width:26px; height:26px }

/* ============================================================
   The block canvas
   ============================================================ */
.canvas-list{ display:flex; flex-direction:column; gap:10px; min-width:0; padding-bottom:90px }
.canvas-none{ padding:20px 0 }

.blk{
  position:relative; min-width:0;
  border-radius:var(--r);
  background:var(--panel); color:var(--rail-ink);
  box-shadow:var(--shadow);
  cursor:pointer;
  /* The panel token set, so the kit's components inside a card read correctly. */
  --ink:var(--rail-ink);
  --ink-2:color-mix(in srgb, var(--rail-ink) 80%, transparent);
  --ink-3:color-mix(in srgb, var(--rail-ink) 62%, transparent);
  --line:color-mix(in srgb, var(--rail-ink) 14%, transparent);
  --line-2:color-mix(in srgb, var(--rail-ink) 26%, transparent);
  --tint:color-mix(in srgb, var(--rail-ink) 6%, transparent);
  --tint-2:color-mix(in srgb, var(--rail-ink) 11%, transparent);
  --field:color-mix(in srgb, var(--rail-bg) 55%, #ffffff);
  --link:var(--canvas-3);
  --focus:var(--canvas-3);
  --fill:var(--canvas-3);
  --fill-ink:var(--on-canvas);
}
.blk:focus-visible{ outline:2px solid var(--on-canvas); outline-offset:2px }
.blk.is-selected{ box-shadow:0 0 0 2px var(--on-canvas), var(--shadow-lg) }

.blk-bar{
  position:absolute; top:6px; right:6px; z-index:2;
  display:flex; align-items:center; gap:2px;
  opacity:0; transition:opacity .14s var(--ease);
}
.blk:hover .blk-bar,.blk:focus-within .blk-bar,.blk.is-selected .blk-bar{ opacity:1 }
@media (hover:none){ .blk-bar{ opacity:1 } }
.blk-bar .btn-icon{ width:28px; height:28px }
.blk-handle{ width:28px; height:28px; display:grid; place-items:center; color:var(--ink-3) }

.blk-body{ display:flex; align-items:flex-start; gap:11px; padding:12px 13px; min-width:0 }
.blk-ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  display:grid; place-items:center; background:var(--tint-2); color:var(--ink);
}
.blk-ico svg{ width:18px; height:18px }
.blk-text{ flex:1; min-width:0; padding-right:70px }
.blk-name{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.blk-sum{
  margin:2px 0 0; font-size:.9rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blk-detail{ margin:3px 0 0; font-size:.7rem; color:var(--ink-2) }
.blk-thumb{ width:48px; height:38px; object-fit:cover; border-radius:8px; flex:none }
.blk-pos{
  position:absolute; left:13px; bottom:6px;
  font-size:.62rem; color:var(--ink-3);
}
.blk-body{ padding-bottom:18px }

/* columns — one nested list per column, each its own sortable */
.blk-cols{
  display:grid; gap:10px; padding:0 13px 13px;
  grid-template-columns:repeat(var(--cols,2), minmax(0,1fr));
}
@media (max-width:640px){ .blk-cols{ grid-template-columns:minmax(0,1fr) } }
.blk-colwrap{ min-width:0; border:1px dashed var(--line-2); border-radius:var(--r-sm); padding:8px }
.blk-collabel{ margin:0 0 6px }
.blk-col{ display:flex; flex-direction:column; gap:8px; min-height:44px; min-width:0 }
.blk-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  font-size:.74rem; color:var(--ink-2); line-height:1.4; padding:6px 2px;
}
.blk-empty p{ margin:0 }
.blk-nested{ box-shadow:none; border:1px solid var(--line) }
.blk-nested .blk-text{ padding-right:60px }
.blk-nested .blk-thumb{ display:none }

/* Drop indicators. kit.css styles .is-over-* for .dt-row, .rep-row and .gcard; these are
   the same two rules for the two lists this shell adds. */
.blk.is-over-before{ box-shadow:inset 0 3px 0 var(--on-canvas), var(--shadow) }
.blk.is-over-after{ box-shadow:inset 0 -3px 0 var(--on-canvas), var(--shadow) }
.tree-row.is-over-before{ box-shadow:inset 0 2px 0 var(--fill) }
.tree-row.is-over-after{ box-shadow:inset 0 -2px 0 var(--fill) }

/* ============================================================
   The property panel
   ============================================================ */
.bpane-panel .ppanel{ min-width:0 }
.ppanel-id{ margin:12px 0 0; font-size:.66rem; color:var(--ink-3) }
.bpane-actions{ display:flex; align-items:center; gap:8px; margin-top:12px }

/* ============================================================
   The preview dialog
   ============================================================ */
.pv{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.pv-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pv-meta{ margin:0; flex:1; min-width:0; font-size:.7rem; color:var(--ink-2) }
.pv-note{
  display:flex; align-items:flex-start; gap:8px; margin:0;
  font-size:.76rem; line-height:1.4;
}
.pv-note svg{ width:15px; height:15px; flex:none; margin-top:2px }
.pv-pane{ min-width:0 }
.pv-frame{
  width:100%; height:min(66dvh, 720px);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff;
}
.pv-source{
  max-height:min(66dvh, 720px); overflow:auto;
  margin:0; padding:12px; border-radius:var(--r-sm);
  background:var(--canvas-3); color:var(--on-canvas);
  font-family:var(--font-mono); font-size:.72rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.pv-source:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }

/* ============================================================
   380px — the width the brief names
   ============================================================ */
@media (max-width:420px){
  .builder-head{ gap:8px; padding:9px 12px }
  .b-page{ font-size:1rem }
  .b-actions{ width:100%; gap:6px }
  .b-actions .btn{ flex:1; justify-content:center }
  .builder-pane{ padding:10px 12px }
  .builder-strip{ padding:6px 12px }
  .blk-text{ padding-right:0 }
  /* The three move controls are the pointer-free reorder; at this width they get the full
     line rather than trailing off the right edge of the pane. */
  .ppanel-moves{ width:100% }
  .ppanel-moves .btn{ flex:1 1 auto; justify-content:center }
  .blk-bar{ position:static; opacity:1; justify-content:flex-end; padding:6px 6px 0 }
  .blk-body{ padding-top:2px }
  .pv-frame{ height:60dvh }
}