/* Controls that appear on more than one screen. They are defined once, here, so
   the same thing cannot be drawn two ways depending on which screen a person
   happens to be standing on. No screen stylesheet may restate them. */

/* Progress -------------------------------------------------------------- */

/* One bar. The track carries the colour softly and the reached part carries it
   fully, so zero is a red track rather than an empty grey slot and cannot be
   mistaken for no data — or for complete. */
.progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.progress-track {
    flex: 1;
    height: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--track);
    overflow: hidden;
}

/* A reading that is not zero never falls below a length that still reads as a
   bar. A floor as short as the track is tall draws a blob instead. */
.progress-fill {
    height: 100%;
    min-width: var(--space-5);
    border-radius: var(--radius-sm);
    transition: width var(--duration) ease;
}

/* Zero draws nothing. The coloured track is the reading. */
.progress-empty .progress-fill {
    min-width: 0;
}

.progress-green .progress-track {
    background: var(--green-soft);
}

.progress-amber .progress-track {
    background: var(--amber-soft);
}

.progress-red .progress-track {
    background: var(--red-soft);
}

.progress-green .progress-fill {
    background: var(--green-mark);
}

.progress-amber .progress-fill {
    background: var(--amber-mark);
}

.progress-red .progress-fill {
    background: var(--red-mark);
}

.progress-figure {
    flex: none;
    width: auto;
    min-width: var(--progress-figure-width);
    text-align: right;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    color: var(--ink-secondary);
}

.progress-green .progress-figure {
    color: var(--green);
}

.progress-amber .progress-figure {
    color: var(--amber);
}

.progress-red .progress-figure {
    color: var(--red);
}

/* A direction that is satisfied or not has no percentage, so it shows a mark. */
.progress-mark {
    width: var(--space-4);
    height: var(--space-4);
    border-radius: 50%;
    flex: none;
}

.progress-mark-green {
    background: var(--green-mark);
}

.progress-mark-red {
    background: var(--red-mark);
}

/* Fields ----------------------------------------------------------------- */

/* One label, in one case, wherever a field is named: signing in, making
   something, editing it. A field called NAME on the way in must not be called
   Name on the way back. */
.field-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    /* A legend is a fieldset's label and sits in the flow like the rest. */
    padding: 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.field-input {
    height: var(--field-height);
    padding: 0 var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}

.field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The two visualizations ------------------------------------------------- */

/* The tree and the map are one display read two ways, so one control names both
   and stands on the display itself. It is worn by two screens and drawn once,
   here, for the same reason every other shared control is. */
.display-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-height);
    padding: var(--space-1);
    background: var(--surface-sunken);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}

.display-toggle-option {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
    white-space: nowrap;
    transition: background var(--duration) ease, color var(--duration) ease;
}

.display-toggle-option:hover {
    color: var(--ink);
}

/* The one being read is marked the way the sidebar marks the place a person is
   standing in: one accent, one meaning, across the whole product. */
.display-toggle-option[aria-current='page'] {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* Filters ---------------------------------------------------------------- */

/* Every list filters the same way, so every list wears the same bar. A field
   with its name inside it loses that name the moment anything is typed. */
.toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Every control in the bar stands the same height on the same bottom edge, so
   the names above them share one line. */
.toolbar .field-input,
.toolbar .search,
.toolbar .select,
.toolbar .toggle {
    height: var(--control-height);
}

/* A control fills the column it was given; the column carries the width. A
   control with a width of its own paints outside its column as the screen
   narrows, and the next control lands on top of it. */
.toolbar-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.toolbar-field > .field-input,
.toolbar-field > .select {
    width: 100%;
    min-width: 0;
}

.toolbar-field-search {
    flex: 0 1 var(--search-width);
}

/* The owner field never shrinks past the widest thing it has to say. A filter
   that cannot show which owner is chosen is worse than no filter. */
.toolbar-field-owner {
    flex: 0 1 auto;
    min-width: var(--owner-width);
}

/* One narrow-width rule, for all five lists. The bar keeps the same shape
   everywhere it is worn. */
@media (max-width: 720px) {
    .toolbar-field-search {
        flex: 1 1 100%;
    }

    .toolbar-field-owner {
        flex: 1 1 auto;
    }
}

.select {
    height: var(--control-height);
    padding: 0 var(--space-6) 0 var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--text-base);
    color: var(--ink-secondary);
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--text-base);
    color: var(--ink-secondary);
    cursor: pointer;
}

.toggle[aria-pressed='true'] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
}