/* uncubed.app/try — the page-local stylesheet, loaded after ../style.css.

   THE IDEA, IN ONE SENTENCE: the cube is an object on the table, so it gets
   the chosen design's one paper panel and nothing else — no new colour, no new
   radius, no new type size, and the only thing on this page that the site did
   not already have is a drawing that moves.

   Everything here is either the cube's own ink, the two-column table it stands
   on, or the key legend. The tokens are ../style.css's, unchanged, which is
   also what makes both appearances free.

   THE THREE LINE WEIGHTS are the app's own, read off
   ../images/puzzle-cube-3-still.svg — which the app's renderer wrote — as
   fractions of one cubie edge, and the drawing is in cubie edges, so they are
   used here as written. site/try/self-test.js checks them against that file on
   every run, so a re-render of the puzzle drawings cannot silently leave this
   page behind. Design system §5.14: bold outline, thinner internal lines. */

/* --------------------------------------------------------------- the table */

.table {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-8) var(--sp-6);
}

@media (min-width: 62rem) {
  .table {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-12);
    padding: var(--sp-10) var(--sp-8);
  }
  /* The right-hand column is the longer of the two, so the cube sits against
     the middle of it rather than against the top of a column it does not
     fill. */
  .table-cube { align-self: center; }
}

.table-cube { display: flex; justify-content: center; }

/* Two controls that only a script can honour. Without one they would be a
   pair of buttons that do nothing, which is worse than their absence — the
   noscript notice beside them says what is missing instead. */
.table-actions { display: none; margin-top: 0; }
body.scripted .table-actions { display: flex; }
.table-h { font-size: var(--fs-m); margin: var(--sp-8) 0 var(--sp-2); }
.table-side > .table-h:first-child { margin-top: 0; }
.table-side > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- the drawing */

/* `touch-action: none` is what lets a drag across the cube be a turn rather
   than a page scroll; without it a phone eats the gesture before the script
   sees the second move. The cube is the only thing on the page that takes it. */
#cube {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

body.scripted #cube { cursor: grab; }
body.scripted #cube:active { cursor: grabbing; }

#cube:focus-visible { outline-offset: 6px; border-radius: var(--r-m); }

/* The faces are painted, not merely outlined, and they are painted the colour
   of the panel the cube stands on. At rest that is invisible and the drawing
   reads as pure line; mid-turn it is the whole of the naked-eye rule, because
   a layer swung out of the block must hide what is behind it rather than let
   the far side of the cube show through its own face. */
#cube .face {
  fill: var(--panel-active);
  stroke: var(--ink);
  stroke-width: 0.0785;
}

#cube .crease {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.1198;
}

#cube .outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.1777;
}

/* THE ONE MARK's rule stood here until 2026-09-18, when the owner ruled the
   mark off the wireframe: it only ever showed there, and nothing on the page
   explained it any more. The wireframe is lines and nothing else. */

/* THE COLOURS AND THE PICTURES. A colour palette paints a sticker's panel
   inline from try.js's table, which beats the panel fill above; the plastic a
   turn exposes keeps the panel colour. A picture tile is an <image> laid over
   its panel, and the grid is drawn again on top of it — at the grid's own
   weight, so the lines are the wireframe's lines whatever is under them. */
#cube .grid {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.0785;
}

#cube path {
  stroke-linejoin: miter;
  stroke-miterlimit: 2.5;
  stroke-linecap: butt;
}

/* ------------------------------------------------------- what the page says */

/* The status line went from view on 2026-09-18, on the owner's ruling: it is
   read to a screen reader through role="status" and drawn for nobody, with
   the site's own `.vh`. It used to reserve 3.7em so the panel did not jump. */

.scripted-only { display: none; }
body.scripted .scripted-only { display: block; }
body.scripted noscript { display: none; }

/* -------------------------------------------------------------- the chooser */

/* A radio group in the site's own terms: the key caps' sunken chip for an
   option, the panel's firmer border and lifted fill for the chosen one, and
   the site's focus ring. The native radio stays in the page — visually hidden,
   still focused and still announced — so the keyboard and the screen reader
   get the browser's own radio group rather than an imitation of one. */
.palette-choice {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-6);
  min-width: 0;
}
.palette-choice legend { padding: 0; }

.palette-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 30rem) {
  .palette-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.palette-option { position: relative; min-width: 0; }

.palette-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.palette-option label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 3.1rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule-emphasis);
  border-radius: var(--r-s);
  background: var(--panel-sunken);
  font-size: var(--fs-s);
  line-height: 1.2;
  color: var(--ink);
}

.palette-option input:checked + label {
  border: 2px solid var(--ink);
  padding: calc(var(--sp-2) - 1px) calc(var(--sp-3) - 1px);
  background: var(--panel-active);
  font-weight: 600;
}

.palette-option input:focus-visible + label {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.palette-option:hover label .palette-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.palette-name { overflow-wrap: anywhere; }

/* Six chips, one per face in up-right-front-down-left-back order. Each has an
   ink hairline, so white holds on paper and black holds on the dark panel.
   The wireframe's are empty outlines, which is what it is. */
.swatches {
  display: flex;
  gap: 3px;
}
.swatches span {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--rule-emphasis);
  flex: none;
}
.swatches span.picture {
  background-size: cover;
  background-position: center;
}

/* ------------------------------------------------------------ the key caps */

.keys {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  align-items: baseline;
}

.keys dt {
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink);
  background: var(--panel-sunken);
  border: 1px solid var(--rule-emphasis);
  border-radius: var(--r-s);
  padding: 0.1em 0.5em;
  text-align: center;
  min-width: 1.9em;
}

.keys dd {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--ink-secondary);
  max-width: none;
}

/* Nine rows is a column of its own at a narrow width and too tall a block at a
   wide one, so a wide panel takes two key-and-meaning pairs per row. The flow
   stays by row, which is what keeps each term beside its own description. */
@media (min-width: 62rem) {
  .keys {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: var(--sp-4);
  }
}

.mono { font-family: var(--font-mono); }

/* A glyph beside every button (W449, 29 October 2026): Put it back turns the cube back, so its
   glyph is the arrow that turns back. */
#reset::after { content: "\00a0\21BA"; content: "\00a0\21BA" / ""; }