/* Sluice: layout is Tailwind (see assembly.gdl); this sheet carries only
   the tree, inspector and menu-adjacent rules geysr's styles.css had.
   The old .grid/.menu/.tree/.inspector/.viewport layout rules are gone --
   .grid in particular collided with Tailwind's grid utility. */

html, body {
 height: 100%;
 margin: 0;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#tree-root {
 padding: 0 15px;
}

.sluice-tree ul {
 list-style: none;
 margin-left: 1em;
 padding-left: 0px;
}

.sluice-tree li {
 white-space: nowrap;
 list-style: none;
 margin-left: 0px;
 padding-left: 0px;
}




.expanded,
.directory,
.leaf {
 margin-bottom: 5px;
 margin-right: 5px;
}

.expanded {
 color: rgb(119, 119, 119);
}

.directory {
 color: rgb(212, 113, 113);
}

.leaf {
 color: rgb(100, 190, 104);
}

/* The inspector and its inputs are laid out with Tailwind classes
   (inspector.gdl, inputs.gdl); only the slider of a bounded number is
   drawn here. */

.sluice-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgb(197, 197, 197);
  cursor: pointer;
}

.sluice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: rgb(54, 111, 197);
  cursor: pointer;
}

.sluice-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 100%;
  background: rgb(54, 111, 197);
  cursor: pointer;
}


/* The inputs panel's auto switch and its Apply button (inputs.gdl):
   with auto off the changes wait for Apply, which a change marks
   pending. */

.sluice-auto-apply {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.sluice-auto-apply input {
  margin: 0;
  cursor: pointer;
}

.sluice-apply {
  padding: 0 8px;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 4px;
  background: #ffffff;
  color: rgb(29, 78, 216);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sluice-apply:hover {
  background: rgb(239, 246, 255);
}

.sluice-apply.sluice-pending {
  border-color: rgb(54, 111, 197);
  background: rgb(54, 111, 197);
  color: #ffffff;
}

/* The busy sign at the menu bar's right end (assembly.gdl,
   *busy-script*): shown while a change is being worked on, and
   briefly after one that failed. */

.sluice-busy {
  position: fixed;
  top: 3px;
  right: 8px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgb(54, 111, 197);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

.sluice-busy[data-busy="true"],
.sluice-busy[data-busy="failed"] { display: inline-flex; }
.sluice-busy .sluice-busy-failed { display: none; }
.sluice-busy[data-busy="failed"] { background: rgb(185, 28, 28); }
.sluice-busy[data-busy="failed"] .sluice-busy-working,
.sluice-busy[data-busy="failed"] .sluice-spin { display: none; }
.sluice-busy[data-busy="failed"] .sluice-busy-failed { display: inline; }


#svg-1 path
{
    vector-effect: non-scaling-stroke;
}


#x3dom-1 {background: #d3d3d3;}


.tree-node
{
    cursor: default;
}

.tree-node:hover, .tree-node.sluice-lit
{
    background: rgb(180, 180, 200);
}

/* a drawn object whose tree node is under the pointer (tree.gdl,
   *hover-script*); important over the stroke width the path's own
   mouseover handlers set in its style */
#sluice-panes svg path.sluice-lit
{
    stroke-width: 3px !important;
}

.directory:hover, .expanded:hover
{
    font-weight: bold;
}

/* the magnifier beside a node: faint until the node or the magnifier
   itself is under the pointer */
.tree-inspect
{
    margin-left: 6px;
    font-size: 10px;
    color: rgb(70, 90, 140);
    opacity: 0.3;
    cursor: pointer;
}

.tree-node:hover + .tree-inspect, .tree-inspect:hover
{
    opacity: 1;
}

/* the row standing for the children a node does not list yet (tree.gdl,
   *tree-condense-limit*): click for more, shift-click for all */
.tree-more-link
{
    cursor: pointer;
    font-style: italic;
    color: rgb(90, 90, 110);
}

.tree-more-link:hover
{
    text-decoration: underline;
}


/* The frame's parts and the order they stand in.  Stacked (a narrow
   page): the stage (the panes, and any tiles under them), then the
   aside under it, then a page's own column (tiles at :left).  Side by
   side (48rem and wider, the layout's own breakpoint): the page's
   column, the aside, then the stage.  The divider stands between the
   aside and the stage either way. */

#sluice-stage { order: 1; }
#sluice-frame > .sluice-split { order: 2; }
#sluice-aside { order: 3; }
#sluice-left { order: 4; }
#sluice-frame > .sluice-split[data-split="left"] { order: 4; }

@media (min-width: 48rem) {
    #sluice-left { order: 0; }
    #sluice-frame > .sluice-split[data-split="left"] { order: 0; }
    #sluice-aside { order: 1; }
    #sluice-stage { order: 3; }
}

/* A page with tiles (assembly's tiles input): its own sections stand in
   the frame, and a phone shows one tab at a time.  The frame carries
   the tab (data-tab, *tabs-script*); which regions and tiles show under
   which tab is the page's own (tabs-css, a style element in the page).
   The panes are never hidden outright: off the screen instead, so a
   drawing keeps its size and its renderer its state. */

.sluice-tabs { display: none; }

#sluice-left > .sluice-tile,
#sluice-aside > .sluice-tile,
#sluice-under > .sluice-tile { flex: none; }

/* a tile stands on a panel of its own, whatever is behind it */
.sluice-tile { background: rgb(255, 255, 255); color: rgb(17, 24, 39); }

/* (plain rules, not Tailwind classes: the compiled sheet holds only the
   classes its build saw) */
#sluice-left
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    width: 100%;
    overflow: auto;
    padding: 0.5rem;
}

#sluice-under
{
    flex: none;
    max-height: 45%;
    overflow: auto;
    border-top: 1px solid rgb(209, 213, 219);
}

@media (min-width: 48rem) {
    #sluice-left { width: 24rem; flex: none; border-right: 1px solid rgb(209, 213, 219); }
}

@media (max-width: 47.99rem) {
    .sluice-tabs { display: flex; flex: none; z-index: 20; border-bottom: 1px solid rgb(209, 213, 219); background: rgb(243, 244, 246); }
    .sluice-tabs button { flex: 1; padding: 0.6rem 0; font: inherit; background: none; border: 0; color: rgb(75, 85, 99); font-weight: 600; }
    .sluice-tabs button.sluice-tab-on { background: rgb(54, 111, 197); color: white; }
    #sluice-frame.sluice-tabbed { position: relative; }
    #sluice-frame.sluice-tabbed > * { display: none; flex: 1 1 0%; width: 100%; }
    #sluice-frame.sluice-tabbed > .sluice-split,
    #sluice-frame.sluice-tabbed .sluice-split { display: none; }
    #sluice-frame.sluice-tabbed .sluice-tile { display: none; }
    #sluice-frame.sluice-tabbed > #sluice-stage { display: flex; position: absolute; left: -300vw; top: 0; width: 100vw; height: 100%; }
    #sluice-frame.sluice-tabbed:not([data-tab="model"]) #sluice-panes { position: absolute; left: -300vw; top: 0; width: 100vw; height: 100%; }
    #sluice-frame.sluice-tabbed:not([data-tab="parts"]) #tree,
    #sluice-frame.sluice-tabbed:not([data-tab="parts"]) #inspector { display: none; }
    #sluice-frame.sluice-tabbed > #sluice-aside { flex-direction: column; }
    #sluice-frame.sluice-tabbed > #sluice-left,
    #sluice-frame.sluice-tabbed #sluice-under { max-height: none; overflow: auto; }
    #sluice-frame.sluice-tabbed #sluice-under { display: none; flex: 1 1 0%; border-top: 0; }
}


/* Dividers that can be dragged (split.js): between a page's own column
   and the rest, between the aside and the stage, between the tree and
   the inspector, between the panes and what a page puts under them, and
   between the panes themselves.  A divider takes
   no room -- it is the seam itself, with a margin of four pixels
   around it to take hold of -- and shows a grip when the pointer
   finds it.  The script says how the two panes share their room (two
   numbers, and an attribute on their container to say that they have
   been sized); these rules make it so. */

.sluice-split
{
    flex: 0 0 0px;
    position: relative;
    z-index: 25;
    align-self: stretch;
    outline: none;
    touch-action: none;
}

.sluice-split::before
{
    content: "";
    position: absolute;
    inset: -4px;
}

.sluice-split[data-axis="x"] { cursor: col-resize; }
.sluice-split[data-axis="y"] { cursor: row-resize; }

.sluice-split::after
{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: 1px solid rgb(107, 114, 128);
    background: rgb(243, 244, 246);
    opacity: 0;
    pointer-events: none;
}

.sluice-split[data-axis="x"]::after { width: 7px; height: 36px; }
.sluice-split[data-axis="y"]::after { width: 36px; height: 7px; }

.sluice-split:hover::after,
.sluice-split:focus-visible::after,
.sluice-split.dragged::after
{
    opacity: 1;
}

.sluice-split:hover::after,
.sluice-split.dragged::after
{
    background: rgb(54, 111, 197);
}

/* while a divider is dragged nothing under the pointer takes part */
body.splitting { -webkit-user-select: none; user-select: none; }
body.splitting main, body.splitting iframe { pointer-events: none; }

#sluice-frame[data-split-aside] > #sluice-aside
{
    flex: var(--split-aside-a) 1 0%;
    width: auto;
}

#sluice-frame[data-split-aside] > #sluice-stage { flex: var(--split-aside-b) 1 0%; }
#sluice-aside[data-split-tree] > #tree { flex: var(--split-tree-a) 1 0%; }
#sluice-aside[data-split-tree] > #inspector { flex: var(--split-tree-b) 1 0%; }

/* a page's own column against all the rest of the frame: its share of
   the frame's width, so the aside and the stage go on sharing what is
   left as they did */
@media (min-width: 48rem) {
    #sluice-frame[data-split-left="x"] > #sluice-left
    {
        flex: none;
        width: calc(var(--split-left-a) / 100 * 1%);
    }
}

/* the panes against what a page puts under them */
#sluice-stage[data-split-under] > #sluice-panes { flex: var(--split-under-a) 1 0%; }

#sluice-stage[data-split-under] > #sluice-under
{
    flex: var(--split-under-b) 1 0%;
    max-height: none;
    display: flex;
    flex-direction: column;
}

/* and the last tile there fills the room it was given */
#sluice-stage[data-split-under] > #sluice-under > .sluice-tile:last-child { flex: 1 0 auto; }

/* between the panes: the grid's two columns, and its two rows when
   there are more than two panes (the grid says which it has by class,
   panes-class).  These dividers lie over the grid, on its seams; the
   first column and the first row are sized, the second takes the
   rest. */
#sluice-panes { position: relative; }

#sluice-panes > .sluice-split
{
    display: none;
    position: absolute;
}

#sluice-panes.sluice-panes-cols > .sluice-split[data-split="cols"]
{
    display: block;
    top: 0;
    bottom: 0;
    left: calc(var(--split-cols-a, 5000) / 100 * 1%);
    width: 0;
}

#sluice-panes.sluice-panes-rows > .sluice-split[data-split="rows"]
{
    display: block;
    left: 0;
    right: 0;
    top: calc(var(--split-rows-a, 5000) / 100 * 1%);
    height: 0;
}

#sluice-panes.sluice-panes-cols[data-split-cols]
{
    grid-template-columns: calc(var(--split-cols-a) / 100 * 1%) minmax(0, 1fr);
}

#sluice-panes.sluice-panes-rows[data-split-rows]
{
    grid-template-rows: calc(var(--split-rows-a) / 100 * 1%) minmax(0, 1fr);
}

body.splitting main > .sluice-split { pointer-events: auto; }

/* the inline icons (parameters.gdl, icon): one em, on the text's
   baseline, in its colour */
.sluice-icon
{
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.sluice-spin
{
    animation: sluice-spin 1s linear infinite;
}

@keyframes sluice-spin
{
    to { transform: rotate(360deg); }
}

/* a pane's own View menu (viewport.gdl, pane-menu-html): a <details> in
   the pane's label, its list dropping below it */
.sluice-pane-menu { position: relative; }
/* the label's name and the menu's button keep to one line */
#sluice-panes .left-1.top-1 > span:first-child { white-space: nowrap; }
.sluice-pane-menu > summary {
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    padding: 0 0.4em;
    border: 1px solid rgb(160, 170, 190);
    border-radius: 3px;
}
.sluice-pane-menu > summary::-webkit-details-marker { display: none; }
.sluice-pane-menu > summary::after { content: " \25BE"; }
.sluice-pane-menu[open] > summary { background: rgb(219, 228, 245); }
.sluice-pane-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 13em;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px 0;
    background: white;
    color: rgb(17, 24, 39);
    border: 1px solid rgb(200, 205, 215);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
.sluice-pane-heading {
    padding: 4px 10px 2px;
    font-size: 0.85em;
    color: rgb(107, 114, 128);
}
.sluice-pane-item {
    display: flex;
    align-items: center;
    gap: 0.4em;
    width: 100%;
    padding: 2px 10px 2px 1.8em;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.sluice-pane-item.sluice-selected { padding-left: 10px; font-weight: 600; }
.sluice-pane-item:hover { background: rgb(219, 228, 245); }
.sluice-pane-list hr { margin: 4px 0; border: 0; border-top: 1px solid rgb(220, 224, 230); }