/* =====================================================
   ZICOPRESS - lab stylesheet // Version 2.0.1

   Author:
   Ishtiaque Zico

   Purpose:
   Forms for the tools in /lab/tools/. Nothing else.
   Loaded after style.css, only on tool pages (tool.html).

   Rule:
   Every value comes from style.css. This sheet adds no
   colour, size or space of its own: only patterns.

   Grammar:
   form         one column, the text width
   fieldset     a part of the form, space above, no box
   legend       speaks like an h3: ink, text size
   item row     a statement, then its toggle on the right
   button       a thin rule at rest, accent under the hand,
                ink when pressed
   output       a reading, in figures that line up
   reading      a keyed list, read across like the record

   Changes, newest first
   2.0.1  I gave the reading a note field: label above, mute.
   2.0.0  I moved every token to style.css 6.16. The 1.x
          names (size-text, line, space-one-half) no longer
          existed, so the forms had lost their measure.
          Dimension parts lost their thick rule: space
          separates them, as headings do in prose.
   1.0.0  First sheet, for the passivity index, May 2026.

   Edit style.css tokens first. Everything here inherits.
   ===================================================== */


/* =====================================================
   FORM
   One column. Parts are separated by space, not boxes.
===================================================== */

form,
fieldset {
    max-width: var(--width-text);
    margin: 0;
    padding: 0;
    border: 0;
}

article > form,
article > section > form {
    margin-block-start: var(--space-large);
}

fieldset + fieldset,
fieldset + output,
output + fieldset {
    margin-block-start: var(--space-large);
}

/* quick mode hides the deeper items */
form[data-mode="quick"] [data-tier="full"],
form[data-mode="quick"] fieldset[data-dimension="sight"] {
    display: none;
}

/* a legend reads like an h3: ink, text size */
legend {
    padding: 0;
    color: var(--color-ink);
    line-height: var(--line-snug);
}

fieldset > legend + * {
    margin-block-start: var(--space-small);
}

fieldset > p {
    color: var(--color-mute);
}

fieldset > p + [data-item] {
    margin-block-start: var(--space);
}


/* =====================================================
   FIELDS
===================================================== */

input:not([type="checkbox"], [type="radio"]),
textarea,
select {
    width: 100%;
    min-height: var(--touch-size);
    padding: var(--space-small);
    border: var(--rule-thin);
    background: transparent;
    color: inherit;
    font: inherit;
}

textarea {
    min-height: calc(var(--touch-size) * 3);   /* three lines to start */
    line-height: var(--line-open);
    resize: vertical;
}

:is(input, textarea, select):focus-visible {
    border-color: var(--color-accent);
}

label {
    cursor: pointer;
}

/* a field: its label above, one space between fields */
form > label {
    display: block;
}

label + :is(input, textarea, select) {
    margin-block-start: var(--space-small);
}

:is(input, textarea, select, datalist) + label {
    margin-block-start: var(--space);
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: 1.25em;   /* 20 ana: the box reads at text size */
    block-size: 1.25em;
    margin: 0;
    accent-color: var(--color-accent);
}


/* =====================================================
   BUTTON
   A thin rule at rest. Accent under the hand.
   Pressed: ink. A toggle shows its state, not a colour.
===================================================== */

button {
    min-height: var(--touch-size);
    padding: var(--space-small) var(--space);
    border: var(--rule-thin);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

button:hover,
button:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

button[aria-pressed="true"] {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-page);
}

button[aria-pressed="true"]:hover,
button[aria-pressed="true"]:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

button:disabled {
    border-style: dotted;
    color: var(--color-mute);
    cursor: default;
}

/* a row of buttons */
[data-role="actions"],
fieldset[data-role="mode"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-small);
}

[data-role="actions"] {
    margin-block-start: var(--space);
}


/* =====================================================
   ITEM ROWS
   A statement on the left, its skip toggle on the right.
   A thin rule between rows: it carries the list.
===================================================== */

[data-item] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-small) var(--space);
    align-items: baseline;
    padding-block: var(--space-small);
    border-block-start: var(--rule-thin);
}

[data-item]:first-of-type {
    border-block-start: 0;
}

[data-item] label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--gap-marker);
    align-items: baseline;
    line-height: var(--line-snug);
}

[data-item] input[type="checkbox"] {
    translate: 0 0.15em;   /* the box sits on the first line */
}

button[data-action="skip"] {
    min-width: 4.5em;   /* skip and skipped keep one width */
    padding-inline: var(--space-small);
    font-size: var(--text-small);
}

/* skipped: struck and mute, never faded */
[data-skipped="true"] label {
    color: var(--color-mute);
    text-decoration-line: line-through;
    text-decoration-thickness: var(--underline-thin);
}


/* =====================================================
   READOUTS
   Figures line up. The score is the one large number.
===================================================== */

output {
    display: block;
    max-width: var(--width-text);
    font-variant-numeric: lining-nums tabular-nums;
}

output[data-role] {
    color: var(--color-mute);
}

output[data-role="progress"],
output[data-role="dim-score"] {
    font-size: var(--text-small);
}

output[data-role="progress"] {
    margin-block-start: var(--space);
}

output[data-role="dim-score"] {
    margin-block-start: var(--space-small);
    text-align: end;
}

output[data-role="capture-score"] {
    color: var(--color-ink);
    font-size: var(--text-large);
    line-height: var(--line-tight);
}

output[data-role="capture-score"] + output {
    margin-block-start: var(--space-small);
}


/* =====================================================
   READING
   The result as a keyed list, the record's grammar.
===================================================== */

section[data-role="reading"] {
    margin-block-start: var(--space-huge);
}

section[data-role="reading"] > * + * {
    margin-block-start: var(--space-small);
}

section[data-role="reading"] > h3 {
    margin-block-start: var(--space-large);
}

/* a note field inside the reading: label above, as in a form */
section[data-role="reading"] > label {
    display: block;
    color: var(--color-mute);
}

section[data-role="reading"] dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-small) var(--space);
    align-items: baseline;
}

/* [id] outweighs the prose list rule in style.css */
section[data-role="reading"][id] dl > :is(dt, dd) {
    margin: 0;
}

section[data-role="reading"] dt {
    color: var(--color-mute);
}

section[data-role="reading"] dd {
    color: var(--color-ink);
}


/* =====================================================
   ENTRIES
   A tool's own saved notes, newest first.
===================================================== */

ol[data-role="entries"] {
    margin-block-start: var(--space);
    padding: 0;
    list-style: none;
}

ol[data-role="entries"] > li {
    padding-block: var(--space-small);
    padding-inline-start: 0;
    border-block-start: var(--rule-thin);
}

ol[data-role="entries"] > li:first-child {
    border-block-start: 0;
}

ol[data-role="entries"] > li > small {
    display: block;
    margin-block-start: var(--gap-tiny);
}

ol[data-role="entries"] > li > button {
    margin-block-start: var(--space-small);
    font-size: var(--text-small);
}


/* =====================================================
   SMALL SCREENS (36rem and below)
===================================================== */

@media (max-width: 36rem) {

    section[data-role="reading"] dl {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--gap-tiny);
    }

    section[data-role="reading"] dd + dt {
        margin-block-start: var(--space-small);
    }
}


/* =====================================================
   PRINT
   Paper keeps the reading, not the form.
===================================================== */

@media print {

    form,
    button,
    output[data-role="progress"] {
        display: none;
    }
}