/* ============================================================================
   ALEXANDRIA PHOENIX — SITE STYLESHEET
   ----------------------------------------------------------------------------
   This site's own rules, loaded after the Hark shared stylesheet
   (https://felipeharker.org/standards/hark.css). Everything else the page
   uses — tokens, the grid, masthead, contents, sections, tables, disclosure
   rows, the filter field, the colophon — is the shared standard: this file
   reads its tokens and adds only what a page of plugin documentation needs
   and the standard has no class for. It does not restyle a class the
   standard defines.

   HOW THIS FILE IS ORGANISED
      1.  Tokens ................... the Grasshopper group colours
      2.  Rhythm ................... space between blocks inside a section; sub-headings
      3.  Steps .................... an ordered procedure, labelled by its verbs
      4.  Diagrams ................. the typical chain and the template layout
      5.  Components ............... a row per component, grouped by family; the filter
      6.  Code ..................... a docstring, a port name, a value
      7.  Responsive ............... the standard's two breakpoints
   ========================================================================= */


/* ============================================================================
   1. TOKENS
   The page is ink on white, like every Hark page. The diagrams are drawn in
   the colours the template gives its Grasshopper groups — input blue, logic
   orange, output green, display violet — because those colours are part of
   the standard being documented. The component icons keep theirs, in grey
   until their row is hovered or opened, like a portfolio cover.
   ========================================================================= */

:root {
  --color-group-input: #a0c8eb;
  --color-group-logic: #fab98c;
  --color-group-output: #a5dca0;
  --color-group-display: #cdb4eb;
  --icon-size: 24px;
}


/* ============================================================================
   2. RHYTHM
   A section here stacks many blocks in the content column — prose, a table,
   a diagram, a sub-heading — so a block that follows another gets room
   above it.
   ========================================================================= */

.section > .table-scroll + .body-text,
.section > .table-scroll + .steps,
.section > .code-block + .table-scroll,
.section > .steps + .body-text { margin-top: var(--space-6); }

.section > .body-text + .steps,
.section > .body-text + .code-block { margin-top: var(--space-2); }

/* A table straight under a section heading starts level with it. */
.section-heading + .table-scroll > .table { margin-top: 0; }

/* A sub-heading inside a section — "Shared Ports", "Showcase". Set like a
   plate's title, in ink at table size, so it reads above the uppercase
   headers of a table rather than as one more of them. */
.subhead {
  font-size: var(--size-table);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--color-text);
  margin: var(--space-7) 0 var(--space-3);
}


/* ============================================================================
   3. STEPS
   An ordered procedure — install, build, release — drawn like a definition
   grid: each step's verb as an uppercase label on the left, what to do on
   the right. Order on the page is the order, so nothing is numbered; the
   <ol> keeps the order for a screen reader.

     <ol class="steps">
       <li><span class="step">Install</span><span>…</span></li>
     </ol>
   ========================================================================= */

.steps {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  max-width: var(--measure-text);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}

.step {
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.steps > li > :last-child {
  font-size: var(--size-table);
  line-height: 1.6;
  color: var(--color-text-soft);
}


/* ============================================================================
   4. DIAGRAMS
   Two drawings in Grasshopper's own vocabulary: a group is a flat block of
   its role colour with its name in small capitals, square like everything
   else. Both span the whole page, like a plate.
   ========================================================================= */

.section > .flow,
.section > .layout { grid-column: full; margin-top: var(--space-5); }

.node {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
}

.node--input { background: var(--color-group-input); }
.node--logic { background: var(--color-group-logic); }
.node--output { background: var(--color-group-output); }
.node--display { background: var(--color-group-display); }

/* The typical chain: blocks joined by drawn ink arrows. */
.flow {
  display: flex;
  align-items: center;
}

.flow .node { flex: 1 1 0; }

.flow-arrow {
  position: relative;
  flex: 0 0 var(--space-6);
  height: 1px;
  background: var(--color-text);
}

.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  border: 3.5px solid transparent;
  border-right: 0;
  border-left: 6px solid var(--color-text);
}

/* The template layout: two tiers, like the canvas — logic along the top,
   each input group below and before the stage it feeds. */
.layout {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-areas:
    ".        grid .       remap scale .        cull result .    preview"
    "boundary .    attract .     .     settings .    .      show .";
  gap: var(--space-3) var(--space-2);
}

.area-grid { grid-area: grid; }
.area-remap { grid-area: remap; }
.area-scale { grid-area: scale; }
.area-cull { grid-area: cull; }
.area-result { grid-area: result; }
.area-preview { grid-area: preview; }
.area-boundary { grid-area: boundary; }
.area-attract { grid-area: attract; }
.area-settings { grid-area: settings; }
.area-show { grid-area: show; }

/* A group's colour, in the legend's Colour column. */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
}


/* ============================================================================
   5. COMPONENTS
   The reference, written by tools/make_site.py: a family heading, then one
   disclosure row per component — icon, name, nickname and what it does;
   opened, a table of its ports.

     <div class="family" data-family>
       <h3 class="family-heading">Grid <span class="data">8</span></h3>
       <details class="disclosure component" data-search="…">
         <summary>
           <span class="disclosure-heading">
             <img class="component-icon" src="icons/…png" alt="">
             <span class="component-name">
               <span class="disclosure-title">Square Grid in Region</span>
               <span class="component-nick">SqGrid</span>
             </span>
             <span class="disclosure-hint">…</span>
           </span>
           <span class="component-summary">…</span>
         </summary>
         <div class="disclosure-body"><div class="table-scroll"><table class="table ports">…</table></div></div>
       </details>
     </div>
   ========================================================================= */

.family-heading {
  font-size: var(--size-table);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--color-text);
  margin: var(--space-7) 0 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule-strong);
}

.family-heading .data { margin-left: var(--space-2); }

.component-icon {
  flex: none;
  align-self: center;
  width: var(--icon-size);
  height: var(--icon-size);
  filter: grayscale(1);
  transition: filter var(--transition);
}

.component > summary:hover .component-icon,
.component[open] .component-icon { filter: none; }

.component-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  color: var(--color-text);
}

.component-nick {
  font-family: var(--font-mono);
  font-size: var(--size-data);
  color: var(--color-text-mute);
}

/* What it does, under the name, lined up with it rather than the icon. */
.component-summary {
  display: block;
  margin: var(--space-1) 0 0 calc(var(--icon-size) + var(--space-4));
  max-width: var(--measure-text);
  font-size: var(--size-table);
  line-height: 1.5;
  color: var(--color-text-mute);
}

.component .disclosure-body { padding-left: calc(var(--icon-size) + var(--space-4)); }
.component .ports { margin-top: 0; }

.ports td:first-child,
.ports td:nth-child(2) { white-space: nowrap; }

/* The filter row hides itself until app.js shows it; the standard's toolbar
   sets its own display, so [hidden] needs saying again. */
.filter[hidden] { display: none; }
.filter .field { flex: 1 1 auto; margin-top: 0; }
.filter + .caption { margin-top: var(--space-2); }


/* ============================================================================
   6. CODE
   ========================================================================= */

/* A recorded identifier in a table cell: a port, a display mode. */
.port {
  font-family: var(--font-mono);
  font-size: var(--size-data);
  color: var(--color-text);
}

/* A setting's value in a table cell. */
.value {
  font-family: var(--font-mono);
  font-size: var(--size-data);
  white-space: nowrap;
}

/* A block of source: between two hairlines, like a table, never in a box. */
.code-block {
  margin: 0;
  padding: var(--space-4) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--size-data);
  line-height: 1.6;
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-rule-strong);
  border-bottom: 1px solid var(--color-rule);
}

.code-block code {
  font-size: inherit;
  white-space: inherit;
  background: none;
  padding: 0;
}


/* ============================================================================
   7. RESPONSIVE
   The standard's two widths: 860px, where its grid becomes one column, and
   640px, a phone.
   ========================================================================= */

@media (max-width: 860px) {
  .section > .flow,
  .section > .layout { margin-top: 0; }
}

@media (max-width: 640px) {
  /* Label above the step, as the standard's definition grid does. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .steps > li + li { margin-top: var(--space-3); }

  /* The chain runs down the page, its arrows turned. */
  .flow { flex-direction: column; align-items: stretch; }
  .flow .node { flex: none; }
  .flow-arrow {
    flex: none;
    align-self: center;
    width: 1px;
    height: var(--space-5);
  }
  .flow-arrow::after {
    right: auto;
    top: auto;
    bottom: 0;
    left: -3px;
    border: 3.5px solid transparent;
    border-bottom: 0;
    border-top: 6px solid var(--color-text);
  }

  /* The layout as two columns: each input beside the stage it feeds. */
  .layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "boundary grid" "attract remap" ". scale" "settings cull" ". result" "show preview";
  }

  .component-summary,
  .component .disclosure-body { margin-left: 0; padding-left: 0; }
}