:root{
  --bg:#0d1512;
  --panel:#13201b;
  --ink:#dff3e6;
  --muted:#7fa593;
  --accent:#33cc77;
  --tile:#16241e;
  --tile-edge:#24463a;
  --arc:#bfe9cf;
  --open:#56796b;   /* open (non-loop) threads when loop-colouring is on */
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* the hidden attribute always wins — display rules like .slider{display:flex}
   otherwise override the UA default and "hidden" elements stay visible
   (this is why the stagger row never hid in p6 mode) */
[hidden]{ display:none !important; }
html,body{ height:100%; margin:0; overflow:hidden; }   /* the panel scrolls internally; nothing scrolls the page */
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;
}
.muted{ color:var(--muted); }
.contact{ margin:0; font-size:13.5px; color:var(--ink); }
.contact a{ color:var(--accent); text-decoration:underline; }

main{ position:fixed; inset:0; }
#boardwrap{ position:absolute; top:0; left:268px; right:0; bottom:0; background:var(--bg); overflow:hidden; }
#board{
  display:block; width:100%; height:100%; cursor:pointer; touch-action:none;
  -webkit-tap-highlight-color:transparent;   /* kill the blue flash on tap (mobile) */
  -webkit-user-select:none; user-select:none;
  outline:none;
}

/* translucent floating control panel (eschersketch-style) over a full-bleed board */
#panel{
  position:absolute; top:0; left:0; bottom:0; width:268px; z-index:10;
  display:flex; flex-direction:column; gap:9px;
  padding:12px 13px; overflow-y:auto;
  background:rgba(16,28,22,0.92);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-right:1px solid var(--tile-edge);
  scrollbar-width:thin; scrollbar-color:var(--tile-edge) transparent;   /* Firefox */
}
#panel::-webkit-scrollbar{ width:10px; }
#panel::-webkit-scrollbar-track{ background:transparent; }
#panel::-webkit-scrollbar-thumb{ background:var(--tile-edge); border-radius:6px; border:2px solid transparent; background-clip:content-box; }
#panel::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box; }
#repeat-canvas{ display:block; width:100%; height:148px; background:var(--bg);
  border:1px solid var(--tile-edge); border-radius:8px; cursor:pointer; touch-action:none; }
.brand{ display:flex; align-items:center; gap:7px; font-size:18px; font-weight:650; letter-spacing:.3px; }
.brand #status{ margin-left:auto; font-size:12px; font-weight:400; color:var(--muted); white-space:nowrap; }

.iconbar{ display:flex; align-items:center; gap:5px; }
.iconbar .sep{ flex:1; }
.ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  background:var(--tile); color:var(--ink); border:1px solid var(--tile-edge); border-radius:8px;
  cursor:pointer; font-size:17px; line-height:1; }
/* only on a real mouse (fine pointer) — some touch devices report hover:hover and then the
   emulated hover sticks highlighted after a tap. pointer:fine excludes them. */
@media (hover:hover) and (pointer:fine){ .ico:hover{ border-color:var(--accent); } }
.ico svg{ width:20px; height:20px; }

.sec{ display:flex; flex-direction:column; gap:7px; padding-top:9px; border-top:1px solid var(--tile-edge); }
.sec h3{ margin:0; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

/* collapsible tiers (Appearance / Advanced) — native <details> */
.tier{ padding-top:9px; border-top:1px solid var(--tile-edge); }
.tier > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.tier > summary::-webkit-details-marker{ display:none; }
.tier > summary::before{ content:'▸'; font-size:10px; transition:transform .15s ease; }
.tier[open] > summary::before{ transform:rotate(90deg); }
.tier > summary:hover{ color:var(--ink); }
.tier > .subsec{ border-top:none; padding-top:10px; }
.tier > .subsec h3{ font-size:10.5px; opacity:.85; }

/* single on/off toggle buttons (pressed = active) */
.togglerow{ display:flex; gap:5px; }
.toggle{ flex:1; font:inherit; font-size:12.5px; padding:5px 4px; text-align:center;
  background:var(--tile); color:var(--ink); border:1px solid var(--tile-edge); border-radius:7px; cursor:pointer; }
.toggle:hover{ border-color:var(--accent); }
.toggle[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); background:var(--tile-edge); }
.ico[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); background:var(--tile-edge); }

/* mode chip floating over the board for armed / held tool states */
#mode-chip{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:6px; padding:5px 6px 5px 13px;
  background:rgba(16,28,22,0.95); border:1px solid var(--accent); border-radius:999px;
  color:var(--ink); font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#mode-chip[hidden]{ display:none; }
#mode-chip .chip-x{ background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:13px; line-height:1; padding:3px 6px; border-radius:50%; }
#mode-chip .chip-x:hover{ color:var(--ink); background:var(--tile-edge); }

.iconrow{ display:flex; gap:5px; }
.iconrow .ico{ position:relative; flex:1; }
.iconrow .ico input{ position:absolute; opacity:0; width:0; height:0; }
.iconrow .ico:has(input:checked){ border-color:var(--accent); background:var(--tile-edge); color:var(--accent); }

.subrow{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.subrow[hidden]{ display:none; }
.subrow button{ padding:4px 9px; font-size:13px; }
#brush-swatch{ width:28px; height:28px; background:var(--tile); border:1px solid var(--tile-edge); border-radius:5px; }
#stamp-dims{ min-width:60px; }
.hint{ margin:0; font-size:12px; }

.chk{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink); cursor:pointer; user-select:none; }
.chk input{ accent-color:var(--accent); cursor:pointer; }

.slider{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); }
.slider input[type="range"]{ flex:1; min-width:0; accent-color:var(--accent); cursor:pointer; }

.selrow{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); }
.selrow select{ flex:1; min-width:0; font:inherit; color:var(--ink); background:var(--tile);
  border:1px solid var(--tile-edge); border-radius:7px; padding:4px 6px; cursor:pointer; }

.seclabel{ font-size:12px; margin-top:2px; }
.segrow{ display:flex; gap:5px; }
.segrow label{ position:relative; flex:1; text-align:center; font-size:12.5px; padding:5px 4px;
  border:1px solid var(--tile-edge); border-radius:7px; background:var(--tile); color:var(--ink); cursor:pointer; }
.segrow label input{ position:absolute; opacity:0; width:0; height:0; }
.segrow label:has(input:checked){ border-color:var(--accent); color:var(--accent); background:var(--tile-edge); }

.swatches{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
#stagger-row{ gap:6px; }
.stepper{ display:inline-flex; align-items:center; gap:3px; }
.stepper button{ padding:2px 6px; font-size:12px; line-height:1; }
.stepper b{ min-width:14px; text-align:center; color:var(--ink); font-weight:600; }
/* colour swatch buttons (open the custom picker) */
.cp-swatch{ width:30px; height:22px; padding:0; border:1px solid var(--tile-edge);
  border-radius:5px; cursor:pointer; vertical-align:middle; }
.cp-swatch:hover{ border-color:var(--accent); }

/* motif painting (ADR-0016): pick button + per-motif rows under the preview */
.motif{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.motif-pick{ align-self:flex-start; background:var(--tile); color:var(--ink);
  border:1px solid var(--tile-edge); border-radius:7px; padding:4px 10px; cursor:pointer; font-size:13px; }
.motif-pick:hover{ border-color:var(--accent); }
.motif-pick.armed{ border-color:var(--accent); background:var(--accent); color:#0d1512; font-weight:600; }
#motif-list{ display:flex; flex-direction:column; gap:5px; }
.motif-row{ display:flex; align-items:center; gap:8px; }
.motif-thumb{ border:1px solid var(--tile-edge); border-radius:6px; background:var(--tile); flex:none; }
.motif-swatch{ width:30px; height:22px; }
.motif-del{ margin-left:auto; background:none; border:none; color:#e6556e; cursor:pointer; font-size:13px; line-height:1; padding:2px 4px; }
.motif-del:hover{ color:#ff8aa0; }
body.arming, body.arming #repeat-canvas, body.arming canvas{ cursor:crosshair; }

/* custom HSV + hex colour picker */
.cp-panel{ width:240px; }
.cp-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cp-head h2{ margin:0; }
.cp-head .spacer{ flex:1; }
#cp-swatch{ height:30px; border-radius:8px; border:1px solid var(--tile-edge); margin-bottom:4px; }
.cp-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cp-preset{ width:24px; height:24px; padding:0; border-radius:6px; border:1px solid var(--tile-edge); cursor:pointer; }
.cp-preset:hover{ border-color:var(--accent); }
.cp-add{ background:var(--tile); color:var(--muted); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.cp-add:hover{ color:var(--ink); }
.cp-srow{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-top:8px; }
.cp-srow span{ width:12px; }
.cp-slider{ -webkit-appearance:none; appearance:none; flex:1; height:14px; border-radius:7px;
  border:1px solid var(--tile-edge); cursor:pointer; }
.cp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:#fff; border:1px solid #333; cursor:pointer; }
.cp-slider::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff;
  border:1px solid #333; cursor:pointer; }
.cp-row{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.cp-row .spacer{ flex:1; }
#cp-hex{ width:88px; font:inherit; font-size:14px; background:var(--bg); color:var(--ink);
  border:1px solid var(--tile-edge); border-radius:7px; padding:5px 8px; text-transform:lowercase; }
#cp-eye{ background:var(--tile); border:1px solid var(--tile-edge); border-radius:6px; color:var(--ink);
  cursor:pointer; padding:4px 7px; display:inline-flex; align-items:center; }
#cp-eye:hover{ border-color:var(--accent); }
#cp-done{ border-color:var(--accent); }
.tilepicker{ position:relative; display:block; }
#tile-btn{ display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:14px;
  background:var(--tile); color:var(--ink); border:1px solid var(--tile-edge);
  border-radius:9px; padding:4px 10px 4px 4px; cursor:pointer; }
#tile-btn:hover{ border-color:var(--accent); }
#tile-btn[aria-expanded="true"]{ border-color:var(--accent); }
#tile-preview{ width:46px; height:46px; display:block; border-radius:6px; background:var(--panel); }
#tile-name{ color:var(--ink); min-width:60px; text-align:left; }
.caret{ color:var(--muted); font-size:11px; }
.popup{ position:fixed; z-index:50;
  background:var(--panel); border:1px solid var(--tile-edge); border-radius:10px;
  padding:6px; min-width:210px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.popup[hidden]{ display:none; }
.popup .group{ display:flex; flex-direction:column; gap:2px; }
/* fixed grid columns — including the two action columns — so the radio /
   thumbnail / name / edit / delete line up on EVERY row, whether or not a row
   has a delete button (presets have edit only; customs have edit + delete). */
.popup label{ display:grid; grid-template-columns:16px 34px minmax(58px,1fr) 24px 24px; align-items:center;
  column-gap:10px; padding:5px 8px; border-radius:7px; color:var(--ink); cursor:pointer; }
.popup .del, .popup .edit{ justify-self:center; }
.popup label input[type="radio"]{ margin:0; justify-self:center; }
.popup label:hover{ background:var(--tile); }
.opt-prev{ width:34px; height:34px; display:block; border-radius:5px; background:var(--bg); }
#custom-tiles{ display:contents; }
.popup .opt-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.popup .del, .popup .edit{ background:none; border:none; color:var(--muted); font-size:13px;
  padding:2px 5px; border-radius:5px; cursor:pointer; }
.popup .del:hover, .popup .edit:hover{ color:var(--ink); background:var(--tile-edge); }
.new-custom{ width:100%; margin-top:6px; text-align:center; background:var(--tile);
  border:1px dashed var(--tile-edge); color:var(--muted); border-radius:8px; padding:7px; }
.new-custom:hover{ border-color:var(--accent); color:var(--ink); }

/* custom tile editor modal */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); }
.modal[hidden]{ display:none; }
.modal-panel{ background:var(--panel); border:1px solid var(--tile-edge); border-radius:14px;
  padding:18px; width:min(340px,92vw); box-shadow:0 16px 50px rgba(0,0,0,.5); }
.modal-panel h2{ margin:0 0 10px; font-size:17px; font-weight:600; }
#editor-canvas{ display:block; margin:0 auto; background:var(--bg); border:1px solid var(--tile-edge);
  border-radius:10px; touch-action:none; cursor:pointer; width:280px; height:280px; }
.modal-panel .hint{ font-size:12.5px; color:var(--muted); margin:8px 0; text-align:center; }
#conn-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px;
  color:var(--muted); background:var(--bg); border:1px solid var(--tile-edge);
  border-radius:8px; padding:8px 10px; margin-bottom:8px; }
#conn-controls label{ display:inline-flex; align-items:center; gap:5px; }
#conn-controls input[type="range"]{ width:70px; accent-color:var(--accent); }
#conn-controls .ord{ background:var(--panel); border:1px solid var(--tile-edge); color:var(--ink);
  border-radius:6px; padding:2px 7px; cursor:pointer; font-size:12px; }
#conn-controls .ord:hover:not(:disabled){ border-color:var(--accent); }
#conn-controls .ord:disabled{ opacity:.3; cursor:default; }
#conn-controls .order{ display:inline-flex; align-items:center; gap:5px; }
#conn-order{ min-width:26px; text-align:center; color:var(--ink); }
#bulge-label.off{ opacity:.4; }
#conn-del{ margin-left:auto; background:none; border:none; color:#e6556e; cursor:pointer; font-size:13px; }
.ed-row{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-bottom:8px; }
.namerow{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.namerow input{ flex:1; font:inherit; background:var(--bg); color:var(--ink);
  border:1px solid var(--tile-edge); border-radius:7px; padding:5px 8px; }
.modal-actions{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.modal-actions .spacer{ flex:1; }
.modal-actions #editor-save{ border-color:var(--accent); }
button{
  font:inherit; font-size:14px;
  background:var(--tile); color:var(--ink);
  border:1px solid var(--tile-edge); border-radius:7px;
  padding:6px 12px; cursor:pointer;
}
button:hover{ border-color:var(--accent); }
button:active{ transform:translateY(1px); }
#status{ font-size:13px; white-space:nowrap; }

/* ============================================================================
   MOBILE / TOUCH  —  gated behind a phone-sized media query so the desktop layout
   is untouched. The panel becomes ONE edge-to-edge bottom sheet with a peek/expand
   model: collapsed it shows only the sheet-peek header (grip + quick actions + the
   relocated repeat tile & size); expanding slides the rest up. #sheet-peek and
   #sheet-close are display:none on desktop; #scrim is gated by its [hidden] attribute.
   ============================================================================ */
#sheet-peek{ display:none; }
#sheet-close{ display:none; }
#sheet-toggle{ display:none; }

/* scrim shields the board while the sheet is expanded. Hidden via its [hidden]
   attribute (toggled in JS) — NOT a blanket display:none, which previously kept it
   hidden even when shown, so taps fell straight through to the board. */
#scrim{ position:absolute; inset:0; z-index:9; background:rgba(0,0,0,.45); }
#scrim[hidden]{ display:none; }

/* ---- phone: one edge-to-edge bottom sheet (portrait & landscape alike) ---- */
@media (max-width: 700px), (max-height: 500px){
  #boardwrap{ left:0; }

  /* the sheet: full width, anchored to the bottom edge. Collapsed, it auto-sizes to
     just the peek header (the body children are hidden), so the grip sits a full
     peek-height above the bottom — clear of Android's bottom-edge gesture zone — and
     the repeat stays visible. Expanded, the body shows and it grows to 88dvh & scrolls. */
  #panel{
    top:auto; left:0; right:0; bottom:0; width:auto;
    max-height:88dvh; overflow:hidden;
    border:none; border-top:1px solid var(--tile-edge); border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.45);
    padding:0 13px calc(18px + env(safe-area-inset-bottom));
  }
  #panel:not(.open) > :not(#sheet-peek){ display:none; }   /* collapsed → peek only */
  #panel.open{ overflow-y:auto; }

  /* peek header: repeat tile on the left, action-button block on the right. Pinned (sticky)
     so the repeat stays visible while the body scrolls when expanded. Negative side margins
     let the background span edge-to-edge while content keeps the 13px gutter. */
  #sheet-peek{ display:grid; grid-template-columns:1fr auto; column-gap:10px;
    align-items:center; grid-template-areas:"tile btns";
    position:sticky; top:0; z-index:2; background:var(--panel);
    margin:0 -13px; padding:8px 13px 0; }
  /* min-width:0 lets the 1fr tile track shrink below the canvas's intrinsic width. */
  #sheet-peek #repeat-canvas{ grid-area:tile; height:96px; min-width:0; }
  #sheet-grip{ grid-area:btns; display:grid; grid-template-rows:repeat(2,42px); grid-auto-flow:column; gap:6px; align-content:center; }
  #peek-size{ font-size:16px; font-weight:600; }
  #zoom-in, #zoom-out{ font-size:21px; }
  #peek-paint.armed{ border-color:var(--accent); background:var(--accent); color:#0d1512; }
  /* expand affordance: a distinct accent tab sitting just ABOVE the panel's top-right edge
     (top is set in JS to track the panel). Rounded top + no bottom border → "comes out of"
     the panel top. */
  #sheet-toggle{ display:inline-flex; align-items:center; justify-content:center;
    position:absolute; right:16px; z-index:11; width:56px; height:27px; padding:0; cursor:pointer;
    border:1px solid var(--accent); border-bottom:none; border-radius:10px 10px 0 0;
    background:var(--panel); color:var(--accent); box-shadow:0 -4px 10px rgba(0,0,0,.3); }
  #sheet-toggle svg{ width:20px; height:20px; transition:transform .2s ease; }
  #panel.open #sheet-toggle svg{ transform:rotate(180deg); }

  /* touch hit targets */
  .ico{ width:42px; height:42px; }
  .segrow label, .toggle{ padding:9px 4px; }
  .motif-pick{ padding:8px 12px; }
  .slider input[type="range"]{ height:26px; }
  .stepper button{ padding:6px 10px; }

  /* the active-tool / armed chip rises out of the top of the peek (bottom of screen),
     where the eye is — not the far top edge, which is easy to miss. */
  #mode-chip{ top:auto; bottom:calc(env(safe-area-inset-bottom) + 130px); }
}

/* landscape phones are short: shrink the peek's repeat so more board shows */
@media (orientation: landscape) and (max-height: 500px){
  #sheet-peek #repeat-canvas{ height:72px; }
  #mode-chip{ bottom:calc(env(safe-area-inset-bottom) + 116px); }
}