.measurement-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.measurement-panel-title {
    margin: 0;
}

.measurement-panel-group {
    margin: 8px 0 0;
}

.measurement-panel-list {
    /* A list, not a stack of divs: the count and the position within it are what a screen reader
       announces, and they are how someone working without the image knows how many measurements are
       waiting. The default marker and padding are dropped, the semantics are not. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.measurement-panel-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.measurement-panel-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* To chart sits at the row's right edge, as imaging.html draws it. */
.measurement-panel-to-chart {
    margin-left: auto;
    align-self: center;
}

.measurement-panel-name {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.measurement-panel-slice {
    font-variant-numeric: tabular-nums;
}

.measurement-panel-reason {
    /* Full-width so it sits under its own row rather than beside the next one — a reason that reads
       as belonging to the measurement below it is worse than no reason. */
    flex-basis: 100%;
    margin: 0;
}

.measurement-panel-differs {
    /* Same full-width rule and the same reason as .measurement-panel-reason above. Coloured rather
       than grey because this one is not an explanation of why a control is off — it is the one line
       telling the clinician the chart holds a different number from the one on screen, and that the
       To chart beside it is how they fix that. */
    flex-basis: 100%;
    margin: 0;
    color: var(--warning);
}

.measurement-panel-angle-type {
    /* Sized to the row's own text rather than the browser default, so the control reads as part of
       the measurement it belongs to instead of a form field the row happens to contain. Capped so a
       long concept name cannot push the To chart and the figure onto separate lines. */
    max-width: 180px;
    font-size: 12px;
}

.measurement-panel-angle-type:disabled {
    cursor: not-allowed;
}

.measurement-panel-needs-type {
    /* Same full-width rule as .measurement-panel-reason below, and the same reason: a requirement
       that reads as belonging to the row underneath it is worse than none. Coloured rather than grey
       because this is not an explanation of a control that is permanently off — it is the one thing
       standing between the clinician and a save they have already asked for. */
    flex-basis: 100%;
    margin: 0;
    color: var(--warning);
}

.measurement-panel-refused {
    flex-basis: 100%;
    margin: 0;
}

.measurement-panel-row-charted {
    /* The flat list is what this is for. While chart status cannot be read the panel drops its group
       headings, so a measurement it watched land sits in the same list as one that was never saved
       and only its own marking separates them. Declared BEFORE the refused row's rule below so that a
       row which is both keeps the refusal's colour: one border cannot carry two meanings, and a
       refusal is the one the clinician has to act on. */
    border-left: 3px solid var(--success);
    padding-left: 6px;
}

.measurement-panel-row-refused {
    /* The reason itself is at the top of the panel; this is what ties it to one row among several.
       A border rather than a background, so it survives being read at a glance and does not fight
       the charted row's own styling when both apply to the same measurement. */
    border-left: 3px solid var(--danger);
    padding-left: 6px;
}

.measurement-panel-warning {
    margin: 0;
    color: var(--warning);
}

.measurement-panel-error {
    margin: 0;
}

.measurement-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.measurement-panel-uid {
    /* CLIPPED, NOT HIDDEN, AND THE DIFFERENCE IS THE WHOLE POINT. The annotation id is part of the
       To chart button's accessible name and of nothing else: it is what makes two identical measurements on
       one image two distinguishable controls rather than two controls with the same name. Both
       `display: none` and `visibility: hidden` would take it out of the accessibility tree along with
       the page, which removes exactly the thing it is here for. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}