/* Mobius -- the layout editor (49-layout-editor.js).
   ---------------------------------------------------------------------------
   The Layout / Field / Card / Compose sheets as grouped cards on the sheet's
   ground, the preset tiles (live miniatures of the real page at a half),
   the hidden tray, the roles rows, the checklists with chevrons and the
   dirty banner pinned above the dock. Flat surfaces, tokens only, pure
   ASCII. The desktop arrange mode (.lay-bar, the right panel) lands with
   the second half of the unit. */

/* ---- the sheet's ground -------------------------------------------------- */
.lay-sheet .lsheet-bd{padding:0 12px 16px;background:var(--bg-0);}
.lay-sheet .lsheet-hd{background:var(--bg-1);}
.lay-tabs{padding:6px 0 10px;position:sticky;top:0;z-index:2;background:var(--bg-0);}
.lay-block{padding:6px 2px 10px;}
.lay-eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:6px 2px 6px;}
.lay-eye-gap{padding-top:10px;}
.lay-dim{color:var(--text-3);}
.lay-pad{padding:10px 12px 12px;font-size:13.5px;}

/* ---- grouped cards ------------------------------------------------------- */
.lay-card{
  background:var(--bg-1);border:1px solid var(--border-1);border-radius:16px;
  margin:0 0 12px;padding:4px 6px;box-sizing:border-box;min-width:0;
}
.lay-card-t{margin:0;padding:10px 8px 4px;font-size:13px;font-weight:500;color:var(--text-2);}
.lay-card.sel{border-color:color-mix(in srgb, var(--accent) 55%, var(--border-1));}
.lay-card.collapsed .lay-blk{opacity:.72;}

/* section header row: title, labels chip, columns chip, up, down, menu */
.lay-sec-hd{display:flex;align-items:center;gap:4px;min-height:44px;padding:2px 2px 2px 4px;}
.lay-sec-t{
  flex:1;min-width:0;text-align:left;border:0;background:none;padding:0 6px;min-height:44px;
  font:inherit;font-size:15px;font-weight:500;color:var(--text-1);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.lay-sec-in{
  flex:1;min-width:0;min-height:36px;border:1px solid var(--border-focus);border-radius:8px;padding:0 10px;
  font:inherit;font-size:15px;background:var(--bg-1);color:var(--text-1);
}
.lay-sec-in:focus{outline:none;}
.lay-chip{
  flex-shrink:0;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border-1);
  background:var(--surface-1);color:var(--text-2);font:inherit;font-size:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lay-chip.mono{font-family:var(--font-mono);min-width:28px;padding:0 8px;}
.lay-ico{
  flex-shrink:0;width:36px;height:36px;border:0;border-radius:9px;background:none;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.lay-ico svg{width:14px;height:14px;}
.lay-ico.lay-up svg{transform:rotate(180deg);}
.lay-ico[disabled]{opacity:.3;cursor:default;}
.lay-ico:not([disabled]):active{transform:var(--press);}
.lay-ico.lay-x{color:var(--text-3);}
.lay-dots{display:flex;flex-direction:row;gap:3px;}
.lay-dots i{width:4px;height:4px;border-radius:999px;background:currentColor;}

/* a block row: glyph, name, widget, chevron */
.lay-blk{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:44px;padding:0 8px 0 6px;
  border:0;border-top:1px solid var(--border-1);background:none;color:var(--text-1);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.lay-blk:active{background:color-mix(in srgb, var(--text-1) 6%, transparent);}
.lay-blk > svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0;}
.lay-blk-g{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);color:var(--text-3);}
.lay-blk-g svg{width:14px;height:14px;}
.lay-blk-n{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lay-blk-w{flex-shrink:0;font-size:13px;color:var(--text-3);max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lay-add{
  display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;min-height:44px;padding:0 10px;
  border:0;border-top:1px solid var(--border-1);background:none;color:var(--text-2);font:inherit;font-size:13.5px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lay-add svg{width:13px;height:13px;}
.lay-add-sec{border:1px dashed var(--border-2);border-radius:14px;margin:0 0 12px;justify-content:center;}

/* the hidden tray */
.lay-tray{background:var(--surface-1);}
.lay-tray-row{display:flex;align-items:center;border-top:1px solid var(--border-1);}
.lay-tray-row .lay-blk{border-top:0;flex:1;min-width:0;}
.lay-show{
  flex-shrink:0;height:32px;padding:0 12px;margin-right:4px;border-radius:999px;border:1px solid var(--border-1);
  background:var(--bg-1);color:var(--text-1);font:inherit;font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* roles, menus: label left, value right, chevron */
.lay-role{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:44px;padding:0 8px;
  border:0;border-top:1px solid var(--border-1);background:none;color:var(--text-1);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lay-card > .lay-role:first-child,.lay-card > .lay-card-t + .lay-role{border-top:0;}
.lay-role-l{flex:1;min-width:0;font-size:14.5px;}
.lay-role-v{flex-shrink:0;max-width:55%;font-size:14px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lay-role > svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0;transform:rotate(-90deg);}
.lay-card .vopt{padding:4px 8px;border-top:1px solid var(--border-1);}
.lay-card .vopt:first-child,.lay-card .lay-card-t + .vopt{border-top:0;}
.lay-card .lay-chips{padding:6px 8px 10px;}
.lay-card .lay-eye{padding-left:8px;}
.lay-opt .lay-ico{margin-left:-4px;}

/* checklist rows: check, name, then chevrons when on */
.lay-row{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--border-1);}
.lay-card > .lay-row:first-child,.lay-card-t + .lay-row{border-top:0;}
.lay-row-b{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border:0;background:none;
  color:var(--text-1);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.lay-ck{width:20px;height:20px;border-radius:999px;border:1px solid var(--border-2);flex-shrink:0;display:grid;place-items:center;color:var(--accent-text);}
.lay-row.on .lay-ck{background:var(--accent);border-color:var(--accent);}
.lay-ck svg{width:12px;height:12px;}
.lay-row-t{flex:1;min-width:0;font-size:14.5px;display:flex;flex-direction:column;overflow:hidden;}
.lay-row-t small{font-size:12px;color:var(--text-3);}

/* chips with a one-line sample (the widget row) */
.lay-chips .ochip small{display:block;font-family:var(--font-mono);font-size:10px;color:var(--text-3);letter-spacing:.02em;margin-top:1px;}
.lay-chips .ochip{text-align:left;}

/* fields */
.lay-field{margin:10px 8px 6px;}
.lay-card .lay-field:first-child{margin-top:6px;}
.lay-newopt{display:flex;gap:8px;align-items:center;padding:4px 8px 10px;}
.lay-newopt input{
  flex:1;min-width:0;height:40px;border:1px solid var(--border-1);border-radius:10px;padding:0 12px;
  background:var(--bg-1);color:var(--text-1);font:inherit;font-size:14px;
}
.lay-newopt input:focus{outline:none;border-color:var(--border-focus);}
.lay-hide-row{margin:2px 0 12px;background:var(--bg-1);border:1px solid var(--border-1);border-radius:14px;min-height:46px;}
.lay-del{min-height:44px;flex-wrap:wrap;row-gap:0;}
.lay-del small{flex-basis:100%;padding-left:24px;margin-top:-8px;font-size:12px;color:var(--text-3);}
.lay-del.mrow.danger small{color:var(--text-3);}

/* choices as pills with the Eight as swatches */
.lay-choice{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-top:1px solid var(--border-1);}
.lay-swatch{
  width:36px;height:36px;border:0;border-radius:10px;background:none;display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;position:relative;
}
.lay-swatch::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--sc);}
.lay-choice-t{flex:1;min-width:0;font-size:14.5px;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lay-choice-t small{font-size:11px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;}

/* ---- preset tiles: live miniatures ------------------------------------- */
.lay-presets{
  display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.lay-tile{
  flex:0 0 auto;width:124px;padding:2px;border:0;background:none;font:inherit;color:var(--text-2);cursor:pointer;text-align:left;
  scroll-snap-align:start;-webkit-tap-highlight-color:transparent;
}
.lay-tile .lay-mini{border:2px solid transparent;box-sizing:content-box;}
.lay-tile[aria-pressed="true"] .lay-mini{border-color:var(--accent);}
.lay-tile[aria-pressed="true"] .lay-tile-t{color:var(--text-1);font-weight:500;}
.lay-tile:active .lay-mini{transform:var(--press);}
.lay-tile-t{display:flex;align-items:center;gap:6px;padding:6px 4px 2px;font-size:12.5px;}
.lay-tile-t small{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);}
.lay-mini{
  width:120px;height:80px;overflow:hidden;border-radius:9px;background:var(--bg-0);
  outline:1px solid var(--border-1);pointer-events:none;position:relative;user-select:none;
}
.lay-mini-in{width:240px;height:160px;transform:scale(.5);transform-origin:0 0;padding:8px;box-sizing:border-box;overflow:hidden;}
.lay-mini .page{max-width:none;margin:0;display:block;}
.lay-mini .page > [data-key]{display:block;}
.lay-mini .lhead{margin-bottom:8px;}
.lay-mini .pgtitle{display:block;font-family:var(--font-display);font-size:20px;line-height:1.1;letter-spacing:-.02em;color:var(--text-1);}
.lay-mini .pghead .pgmenu,.lay-mini .pgcrumbs,.lay-mini .lmore,.lay-mini .pglinks,.lay-mini .lacts,.lay-mini .lhead-card .lacts{display:none !important;}
.lay-mini .lcover{height:44px;}
.lay-mini .lsec{margin-bottom:8px;}
.lay-mini .lgrid{gap:6px;}
.lay-mini .lblk{min-height:0;}
.lay-mini .rc-theatre,.lay-mini .rc-real,.lay-mini .mailacts{display:none;}
.lay-mini-frame{height:120px;border:1px solid var(--border-1);border-radius:8px;background:var(--surface-1);}
.lay-inert{display:inline-block;min-height:1em;}
.lay-mini [data-btn],.lay-preview [data-btn]{display:inline-flex;align-items:center;}
.lay-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px;}

/* the folder's empty state */
.lay-start{margin:18px auto 0;max-width:820px;text-align:left;}
.lay-start-t{font-size:13px;color:var(--text-3);padding:0 2px 6px;}
.lay-start .lay-presets{padding-bottom:4px;}

/* the card tab's live preview */
.lay-preview{
  margin:0 0 12px;padding:10px;border-radius:16px;background:var(--bg-1);border:1px solid var(--border-1);
  pointer-events:none;user-select:none;
}
.lay-preview .rc{margin:0;}

/* ---- the small sheets ---------------------------------------------------- */
.lay-dirty-msg{padding:10px 10px 12px;font-size:14.5px;line-height:1.45;color:var(--text-1);}
.lay-go{width:100%;box-sizing:border-box;min-height:44px;justify-content:center;margin:4px 0 8px;background:var(--accent);color:var(--accent-text);font-size:14.5px;}
.lay-go.lay-danger{background:var(--danger);color:var(--white-0,#fff);}

/* ---- the dirty banner ---------------------------------------------------- */
.lay-dirty{
  position:absolute;left:14px;right:14px;z-index:92;
  bottom:calc(14px + 54px + 10px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 6px 4px 12px;box-sizing:border-box;
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:999px;box-shadow:var(--shadow-3);
  user-select:none;
}
.lay-dirty-n{flex:1;min-width:0;min-height:40px;border:0;background:none;text-align:left;font:inherit;font-size:14px;color:var(--text-1);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.lay-dirty-n small{font-family:var(--font-mono);font-size:11px;color:var(--text-3);margin-left:4px;}
.lay-dirty-b{
  flex-shrink:0;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--border-2);background:var(--bg-1);
  color:var(--text-1);font:inherit;font-size:13.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.lay-dirty-b.go{background:var(--accent);color:var(--accent-text);border-color:transparent;}
.lay-dirty-b[disabled]{opacity:.5;}
body.kb-open .lay-dirty,body.drawer-open .lay-dirty{display:none;}
body.lay-dirty-on .mob-scroll{padding-bottom:72px;}
@media (min-width:768px){
  .lay-dirty{left:auto;right:24px;bottom:24px;width:min(420px,calc(100% - 48px));}
  .lay-sheet{width:min(480px,calc(100% - 32px));max-height:min(720px,calc(100% - 32px));}
  .lay-sheet .lsheet-bd{max-height:none;}
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width:767px){
  .lay-sheet.osheet[data-detent="half"]{max-height:45dvh;}
  .lay-sheet.osheet[data-detent="full"]{max-height:88dvh;}
  .lay-sheet input,.lay-sheet textarea{font-size:16px;}
  .lay-sec-in,.lay-newopt input{font-size:16px;}
  .lay-blk-n,.lay-role-l,.lay-row-t{font-size:15px;}
}
@media (pointer:coarse){
  .lay-ico{width:44px;height:44px;}
  .lay-chip{position:relative;}
  .lay-chip::before{content:"";position:absolute;inset:-8px -2px;}
  .lay-show{position:relative;}
  .lay-show::before{content:"";position:absolute;inset:-6px 0;}
  .lay-swatch{width:44px;height:44px;}
}
@media (prefers-reduced-motion:reduce){
  .lay-presets{scroll-behavior:auto;}
}