/*
 * Copyright (c) 2026 Genworks International
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.  Distributed WITHOUT
 * ANY WARRANTY; see <https://www.gnu.org/licenses/agpl-3.0.html>.
 */

/* skinned.css -- the sluice, said in the skin tokens.
 *
 * The sluice is laid out with utility classes and carries its own
 * greys.  A sluice that wears a skin (its skin input; SKIN-API.md)
 * loads this sheet after its own and after tokens.css, and this sheet
 * says what each part of the sluice is in the tokens' terms: its panes
 * are panes, its menu bar is a command menu, its greys are the ground,
 * the rules and the inks.  The skin comes after, and redefines tokens.
 * A sluice with no skin ("classic") loads none of the three and looks
 * as it always did.
 *
 * The sluice's utilities are in a cascade layer; rules outside any
 * layer, as these are, win over them whatever their specificity.  The
 * rules here are keyed to the classes the sluice's markup uses today:
 * when the markup's greys change, this sheet is read again.
 *
 * Kept in ASCII (escapes for anything beyond it).
 */

body {
  background: var(--pl-seam);
  color: var(--pl-ink);
  font-family: var(--pl-font);
}


/* --- the sluice's greys, in the lab's terms ----------------------------- */

body .bg-white,
body .bg-gray-50,
body .bg-white\/80,
body .odd\:bg-white,
body .even\:bg-gray-50 { background-color: var(--pl-panel); }
body .bg-gray-100 { background-color: var(--pl-bg); }
body .bg-gray-200 { background-color: var(--pl-panel-alt); }

body .text-gray-900,
body .text-gray-700,
body .text-slate-700 { color: var(--pl-ink); }
body .text-gray-600,
body .text-gray-500 { color: var(--pl-ink-dim); }
body .text-gray-400 { color: var(--pl-ink-dimmer); }
body .text-red-700 { color: var(--pl-status-fail); }
/* a value that leads somewhere: the link's ink, and underlined, since a
   skin's link may be the colour of its text */
body .text-blue-700,
body .text-blue-800 { color: var(--pl-link); text-decoration: underline; text-underline-offset: 2px; }

body .border-gray-300 { border-color: var(--pl-line); }
body .border-gray-200 { border-color: var(--pl-line-soft); }
body .rounded,
body .rounded-md { border-radius: var(--pl-radius); }
body .shadow { box-shadow: none; }
body .font-mono { font-family: var(--pl-font-mono); }


/* --- the frame: panes with seams between them --------------------------- */

body > div,
body > div > div,
body aside,
body main {
  gap: var(--pl-gap);
  background: var(--pl-seam);
}
body aside { border: 0; }
body #tree,
body #inspector {
  border: 0;
  padding-top: 0;
  background: var(--pl-panel);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
}
body main > div {
  border: 0;
  background-color: var(--pl-viewport-bg);
  background-image: var(--pl-viewport-image);
  background-size: var(--pl-viewport-image-size);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  overflow: hidden;
}

/* a divider between two panes is drawn ON the seam, and takes no room
   of its own: the gap it would add on one side is given back */
body .sluice-split[data-axis="x"] { margin-left: calc(var(--pl-gap) * -1); }
body .sluice-split[data-axis="y"] { margin-top: calc(var(--pl-gap) * -1); }
/* the stage has no gap to give back; the dividers between the panes lie
   over the grid, in the middle of its gap */
body #sluice-stage > .sluice-split { margin-top: 0; }
body main > .sluice-split[data-split="cols"] { margin-left: calc(var(--pl-gap) / 2); }
body main > .sluice-split[data-split="rows"] { margin-top: calc(var(--pl-gap) / 2); }
body .sluice-split::after {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  background: var(--pl-panel);
}
body .sluice-split:hover::after,
body .sluice-split:focus-visible::after,
body.splitting .sluice-split.dragged::after { background: var(--pl-accent); }

/* each pane's label, in its corner */
body #tree::before,
body #inspector::before {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  margin-bottom: 2px;
  padding: 2px 8px;
  background: var(--pl-label-bg);
  color: var(--pl-label-ink);
  font: var(--pl-label-weight) 12px/1.4 var(--pl-font-label);
  text-transform: var(--pl-label-case);
  letter-spacing: var(--pl-label-tracking);
  border-radius: 0 0 var(--pl-radius) 0;
}
body #tree::before { content: "Tree"; }
body #inspector::before { content: "Inspector"; }

/* the viewport's own label, and the button in its corner */
body main .left-1.top-1 {
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 0 0 var(--pl-radius) 0;
  background: var(--pl-label-bg);
  color: var(--pl-label-ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font: 12px/1.4 var(--pl-font-label);
  text-transform: var(--pl-label-case);
  letter-spacing: var(--pl-label-tracking);
}
body main .left-1.top-1 span {
  color: inherit;
  text-decoration: none;
}
body main .left-1.top-1 .font-semibold { font-weight: var(--pl-label-weight); }
body main button[id$="-reset-size"] {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  color: var(--pl-ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body main button[id$="-reset-size"]:hover { background: var(--pl-accent); color: var(--pl-accent-ink); }

/* the drawing: lines on the viewport's ground.  The sluice gives the
   drawing a ground of its own, in its style attribute; it goes, so that
   the pane's shows and a skin's filter turns the lines alone. */
body main svg {
  background-color: transparent !important;
  filter: var(--pl-viewport-filter);
}


/* --- the menu bar: a command menu --------------------------------------- */

body > div > header {
  background: var(--pl-panel);
  font-size: 13px;
}
body #menu,
body #menu ul,
body #menu li,
body #menu a {
  font-family: var(--pl-font-label);
  text-transform: var(--pl-label-case);
  letter-spacing: var(--pl-label-tracking);
}
body #menu > ul { padding: 0 6px; }
body #menu > ul > li,
body #menu > ul > li > a {
  background: transparent;
  color: var(--pl-ink);
  font-weight: var(--pl-label-weight);
}
body #menu a { padding: 3px 6px; color: var(--pl-ink); }
body #menu a.inactive { color: var(--pl-ink-dimmer); }
body #menu .menu-image { height: 20px; width: auto; }
body #menu > ul ul {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  box-shadow: var(--pl-shadow-raised);
  opacity: 1;
  font-size: 13px;
  font-weight: 400;
}
body #menu ul li ul li,
body #menu ul li ul li > a {
  background: var(--pl-panel);
  color: var(--pl-ink);
}
body #menu ul li.visible > a,
body #menu ul li.visible,
body #menu.hoverable ul li:hover > a,
body #menu.hoverable ul li:hover {
  background: var(--pl-accent) !important;
  color: var(--pl-accent-ink) !important;
}
body #menu ul li ul .li-selected { color: var(--pl-ink); font-weight: 700; }
body #menu.hoverable ul li:hover > a.li-selected { color: var(--pl-accent-ink); }
body #menu ul ul hr { border: 0; border-top: var(--pl-rule) solid var(--pl-line-soft); }
body .li-heading,
body #menu.hoverable .li-heading:hover { background: var(--pl-panel-alt); color: var(--pl-ink); }
body #menu input {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  color: var(--pl-ink);
}
/* the busy sign at the bar's right end: working, and stopped */
body .sluice-busy {
  border-radius: var(--pl-radius-pill);
  background: var(--pl-status-busy);
  color: var(--pl-panel);
  font: var(--pl-label-weight) 12px/1.4 var(--pl-font-label);
  text-transform: var(--pl-label-case);
  letter-spacing: var(--pl-label-tracking);
}
body .sluice-busy[data-busy="failed"] { background: var(--pl-status-fail); }


/* --- the tree ----------------------------------------------------------- */

body #tree { font-size: 13px; }
body #tree-root { padding: 0 10px 6px; }
body .expanded,
body .directory,
body .leaf { color: var(--pl-ink-dim); }
/* what the pointer is on is boxed */
body .tree-node {
  padding: 0 3px;
  outline: var(--pl-rule) solid transparent;
  outline-offset: -1px;
  border-radius: var(--pl-radius);
}
/* a node's colour is its own, in its style attribute.  The usual black
   is the skin's ink instead, or a dark skin would hide the tree; any
   other colour is turned as the drawing's lines are, so that a part
   and its name stay the same colour */
body .tree-node[style*="#000000"] { color: var(--pl-ink) !important; }
body .tree-node[style*="color"]:not([style*="#000000"]) { filter: var(--pl-viewport-filter); }

/* a part's own colour, in the drawing and on its name in the tree, kept
   within the lightness the skin allows (--pl-part-l-min, -max): the hue
   stays, and on a dark ground a dark part is lifted while a light one is
   left alone, where a filter that inverts turned the light ones dark.
   The colour is the element's --part (the svg lens and the tree write
   it).  Only where the browser computes a colour from another; elsewhere
   the filter above is all there is. */
@supports (color: oklch(from red l c h)) {
  body main svg [style*="--part"]:not([stroke="none"]) {
    stroke: oklch(from var(--part) clamp(var(--pl-part-l-min), l, var(--pl-part-l-max)) c h);
  }
  body main svg circle[style*="--part"] {
    fill: oklch(from var(--part) clamp(var(--pl-part-l-min), l, var(--pl-part-l-max)) c h);
  }
  body .tree-node[style*="--part"]:not([style*="#000000"]) {
    color: oklch(from var(--part) clamp(var(--pl-part-l-min), l, var(--pl-part-l-max)) c h) !important;
  }
}
body .tree-node:hover,
body .tree-node.sluice-lit {
  background: var(--pl-hover-bg);
  outline-color: var(--pl-hover-line);
}
body .tree-inspect { color: var(--pl-ink-dim); }
body .tree-more-link { color: var(--pl-ink-dim); }


/* --- the inspector ------------------------------------------------------ */

body #inspector { font-size: 12px; }
body #inspector input:not([type="checkbox"]):not([type="range"]),
body #inspector select {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  color: var(--pl-ink);
  font-family: var(--pl-font-mono);
}
body #inspector input:focus,
body #inspector select:focus {
  border-color: var(--pl-focus);
  outline: var(--pl-rule) solid var(--pl-focus);
}
body #inspector input[type="checkbox"] { accent-color: var(--pl-accent); }
/* the inputs panel's Apply: a command, filled while changes wait */
body .sluice-apply {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  color: var(--pl-ink);
  font-family: var(--pl-font-label);
  text-transform: var(--pl-label-case);
  letter-spacing: var(--pl-label-tracking);
}
body .sluice-apply:hover,
body .sluice-apply.sluice-pending {
  border-color: var(--pl-accent);
  background: var(--pl-accent);
  color: var(--pl-accent-ink);
}
body .sluice-slider { background: var(--pl-line-soft); border-radius: var(--pl-radius-pill); }
body .sluice-slider::-webkit-slider-thumb { background: var(--pl-accent); border-radius: var(--pl-radius-pill); }
body .sluice-slider::-moz-range-thumb { background: var(--pl-accent); border-radius: var(--pl-radius-pill); }

/* the phone's tabs on a page with tiles (styles.css) */
body .sluice-tabs { background: var(--pl-panel); border-bottom: var(--pl-rule) solid var(--pl-line); }
body .sluice-tabs button { color: var(--pl-ink-dim); font-family: var(--pl-font-label); font-weight: var(--pl-label-weight); text-transform: var(--pl-label-case); letter-spacing: var(--pl-label-tracking); }
body .sluice-tabs button.sluice-tab-on { background: var(--pl-accent); color: var(--pl-accent-ink); }
body #sluice-left { background: var(--pl-bg); border-color: var(--pl-line); }
body .sluice-tile { background: var(--pl-panel); color: var(--pl-ink); }
body #sluice-under { border-color: var(--pl-line); }

/* a pane's own View menu (viewport.gdl): in the label's colours, its
   list a menu like the bar's */
body main .sluice-pane-menu > summary { border-color: currentColor; border-radius: var(--pl-radius); }
body main .sluice-pane-menu[open] > summary { background: var(--pl-label-ink); color: var(--pl-label-bg); }
body main .sluice-pane-list {
  border: var(--pl-rule) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-panel);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow-raised);
  font: 13px/1.5 var(--pl-font);
}
body main .sluice-pane-heading { color: var(--pl-ink-dimmer); font-family: var(--pl-font-label); text-transform: var(--pl-label-case); letter-spacing: var(--pl-label-tracking); }
body main .sluice-pane-item:hover { background: var(--pl-accent); color: var(--pl-accent-ink); }
body main .sluice-pane-list hr { border-top: var(--pl-rule) solid var(--pl-line-soft); }
/* the check mark is an icon, not the drawing: no viewport filter */
body main .sluice-pane-list svg { filter: none; }