/* Scope and its canvas layers */

.radar-display {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 200px;
    min-height: 200px;
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
}

.radar-display .radar-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: center center;
    /* Pointer events belong to the container, so the layers never swallow them. */
    pointer-events: none;
}

/* Scope with the head up display over it */

.radar-scope {
    position: relative;
    width: 100%;
    height: 100%;
}

.radar-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #7fe3a3;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.radar-hud-block {
    position: absolute;
    padding: 8px 10px;
}

.radar-hud-top-left { top: 0; left: 0; }
.radar-hud-top-right { top: 0; right: 0; text-align: right; }
.radar-hud-bottom-left { bottom: 0; left: 0; }
.radar-hud-bottom-right { bottom: 0; right: 0; text-align: right; }

.radar-hud-line {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    white-space: nowrap;
}

.radar-hud-top-right .radar-hud-line,
.radar-hud-bottom-right .radar-hud-line {
    justify-content: flex-end;
}

.radar-hud-key {
    color: #4a9c68;
    letter-spacing: 0.06em;
}

.radar-hud-value {
    font-variant-numeric: tabular-nums;
}

.radar-hud-mode {
    letter-spacing: 0.12em;
    color: #9effc0;
}

.radar-hud-cursor .radar-hud-value {
    color: #ffd166;
}

.radar-hud-attribution {
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

/* Chart view beside the radar */

.radar-chart {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 160px;
    overflow: hidden;
    border-radius: 6px;
    background: #0d3550;
}

.radar-chart-surface {
    position: absolute;
    inset: 0;
}

.radar-chart-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.radar-chart-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.radar-chart-attribution {
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.5);
}

/* Control panel */

.radar-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    color: #c8d6df;
    background: #131a20;
    border: 1px solid #28323b;
    border-radius: 6px;
}

.radar-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radar-control-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #7d919e;
}

.radar-control-note {
    font-size: 10px;
    color: #7d919e;
    min-height: 1.4em;
}

.radar-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radar-value {
    flex: 1 1 auto;
    text-align: center;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: #eaf3f8;
}

.radar-unit {
    font-size: 10px;
    margin-left: 4px;
    color: #7d919e;
}

.radar-key,
.radar-toggle {
    background: #1e262e;
    color: #dbe6ee;
    border: 1px solid #333f4a;
    border-radius: 4px;
    padding: 6px 10px;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}

.radar-key:hover:not(:disabled),
.radar-toggle:hover {
    background: #27313a;
}

.radar-key:disabled {
    opacity: 0.35;
    cursor: default;
}

.radar-toggle {
    flex: 1 1 0;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.radar-toggle.is-active {
    background: #2c6b8f;
    border-color: #4193c0;
    color: #ffffff;
}

/* Gain slider with the marked working band */

.radar-slider {
    position: relative;
    padding-bottom: 6px;
}

.radar-slider input[type="range"] {
    width: 100%;
    position: relative;
    z-index: 1;
}

.radar-slider-band {
    position: absolute;
    left: 45%;
    width: 25%;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: #4a9c68;
    opacity: 0.65;
}

.radar-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #c8d6df;
    cursor: pointer;
    user-select: none;
}

.radar-control select {
    background: #1e262e;
    color: #dbe6ee;
    border: 1px solid #333f4a;
    border-radius: 4px;
    padding: 5px 6px;
    font: inherit;
    width: 100%;
}

.radar-control input[type="range"] {
    width: 100%;
}

/* Cursor key pad */

.radar-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    max-width: 150px;
}

.radar-pad-up { grid-area: 1 / 2; }
.radar-pad-left { grid-area: 2 / 1; }
.radar-pad-home { grid-area: 2 / 2; }
.radar-pad-right { grid-area: 2 / 3; }
.radar-pad-down { grid-area: 3 / 2; }

/* Vessel controls. Kept visually apart from the radar panel, because they steer the ship and not
   the set - a distinction that matters more than it looks. */

.radar-panel-vessel {
    border-color: #3a4a3c;
    background: #141b17;
}

.radar-course-row {
    justify-content: space-between;
}

.radar-course-row .radar-key {
    padding: 6px 8px;
}

.radar-course-value {
    flex: 1 1 auto;
    text-align: center;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: #eaf3f8;
}

/* Setting up an exercise: typing positions, and placing own ship by clicking the chart. */

.radar-setup-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.radar-setup-field input,
.radar-setup-field select {
    background: #1e262e;
    color: #dbe6ee;
    border: 1px solid #333f4a;
    border-radius: 4px;
    padding: 5px 6px;
    font: inherit;
    width: 100%;
}

.radar-setup-field input.is-invalid {
    border-color: #a4544a;
}

.radar-setup-pair {
    display: flex;
    gap: 6px;
}

.radar-setup-pair > * {
    flex: 1 1 0;
    min-width: 0;
}

.radar-setup-status {
    font-size: 10px;
    color: #7d919e;
    min-height: 1.4em;
}

.radar-setup-status.is-error {
    color: #d08b82;
}

.radar-panel-setup {
    border-color: #414055;
    background: #17161e;
}

.radar-setup-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 190px;
    overflow-y: auto;
}

.radar-setup-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.radar-setup-kind {
    flex: 0 0 62px;
    color: #9fb2bf;
}

.radar-setup-bearing {
    flex: 1 1 auto;
    font-variant-numeric: tabular-nums;
    color: #dbe6ee;
}

.radar-setup-row .radar-key {
    padding: 1px 7px;
    line-height: 1.3;
}

/* Tuning quality. Not a signal meter borrowed from a receiver - it is what the echoes are worth at
   the current setting, which is the thing being peaked. */

.radar-tune-meter {
    height: 4px;
    border-radius: 2px;
    background: #1e262e;
    border: 1px solid #333f4a;
    overflow: hidden;
}

.radar-tune-fill {
    display: block;
    height: 100%;
    background: #4a9c68;
    transition: width 0.12s linear;
}

.radar-offcentre-value {
    flex: 1 1 auto;
    text-align: center;
}

/* Plotting readout. Figures worth reading are figures worth laying out properly. */

.radar-arpa-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 7px;
    border: 1px solid #2c4a5c;
    border-radius: 4px;
    background: #101a20;
    font-variant-numeric: tabular-nums;
}

.radar-arpa-readout.is-dangerous {
    border-color: #a4544a;
    background: #1d1113;
}

.radar-arpa-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #dbe6ee;
}

/* A line that is showing but is not the one the keys are on. Without this the numbers give no clue
   which of them is actually on the screen. */

.radar-toggle.is-lit {
    border-color: #3f6d86;
    color: #9fd4ee;
}

/* An exercise as text, for handing to somebody else. Monospaced because it is JSON and a proportional
   font makes nonsense of the indentation. */

.radar-setup-json {
    width: 100%;
    box-sizing: border-box;
    background: #101a20;
    color: #cfe0ea;
    border: 1px solid #2c4a5c;
    border-radius: 4px;
    padding: 6px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10px;
    line-height: 1.35;
    resize: vertical;
}

/* Performance monitor. The two figures are meant to be read against each other - one of them says
   which half of the set is at fault - so they are laid out side by side and given the same width. */

.radar-perf-figures {
    justify-content: space-between;
}

.radar-perf-figure {
    flex: 1 1 0;
    padding: 5px 6px;
    border: 1px solid #2c4a5c;
    border-radius: 4px;
    background: #101a20;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #dbe6ee;
    text-align: center;
}

/* A note that has stopped being a note. A set which has quietly lost half its range must not read
   like a caption. */

.radar-control-note.is-warning {
    color: #d9b45e;
}

.radar-control-note.is-alarm {
    color: #e08a80;
}

/* Alarms. The list is meant to be read at a glance in the dark, so an unacknowledged entry is loud
   and an acknowledged one steps back without disappearing - the condition is still there. */

.radar-alarm-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 3px 5px;
    border-left: 3px solid #2c4a5c;
    font-size: 11px;
    color: #93a6b3;
}

.radar-alarm-row.is-new {
    border-left-color: #e05a4d;
    background: #1d1113;
    color: #f1d6d2;
}

.radar-alarm-kind {
    flex: 0 0 44px;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: #7d919e;
}

.radar-alarm-row.is-new .radar-alarm-kind {
    color: #e08a80;
}

.radar-alarm-text {
    flex: 1 1 auto;
}

/* The acknowledge key while there is something to acknowledge. */

.radar-toggle.is-alarm-lit {
    background: #6b2c2c;
    border-color: #c04a4a;
    color: #ffffff;
}

/* A momentary key that spans the row, for the ones held rather than pressed. */

.radar-key-wide {
    flex: 1 1 auto;
}

.radar-key.is-active {
    background: #2c6b8f;
    border-color: #4193c0;
    color: #ffffff;
}

/* The target list. Rows are meant to be scanned down, so the columns line up and the numbers are
   tabular - a list whose figures jump about horizontally is one nobody reads twice. */

.radar-arpa-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 5px;
    border-left: 3px solid #2c4a5c;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #c8d6df;
    cursor: pointer;
    user-select: none;
}

.radar-arpa-row:hover {
    background: #182228;
}

.radar-arpa-row.is-selected {
    border-left-color: #4193c0;
    background: #16242c;
}

.radar-arpa-row.is-dangerous {
    border-left-color: #e05a4d;
    color: #f1d6d2;
}

.radar-arpa-id {
    flex: 0 0 20px;
    color: #7d919e;
}

.radar-arpa-cell {
    flex: 1 1 0;
    text-align: right;
}

/* The cursor's position, under its range and bearing. Quieter than the figures above it: it is
   what you write down, not what you steer by. */
.radar-hud-position .radar-hud-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.radar-cursor-position {
    font-variant-numeric: tabular-nums;
}