/* Key Result detail and its chart. Every colour, type size, spacing and radius
   comes from tokens.css. The pixel figures that remain are the fixed geometry of
   controls and of the chart's furniture, which no token describes. */

.kr .screen-head {
    margin-bottom: var(--space-4);
}

/* A name is whatever was written, and a service account writes fifty characters
   without a space in them. The title wraps inside the width there is rather than
   pushing the actions off a phone screen and taking the page sideways with it. */
.kr .screen-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kr .screen-actions {
    display: flex;
    flex: none;
    gap: var(--space-3);
}

/* The whole line back to the objective, because nesting has no depth limit and
   one step up does not say where a Key Result sits. */
.kr-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.kr-trail-step {
    transition: color var(--duration) ease;
}

.kr-trail-step:hover {
    color: var(--accent-strong);
}

.kr-trail-mark {
    flex: none;
    color: var(--ink-faint);
}

/* A write that was refused, said where the action that failed is. */
.kr-head-problem {
    margin: 0 0 var(--space-5);
}

.kr-head-problem:empty {
    display: none;
}

.kr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    margin: 0 0 var(--space-6);
}

.kr-meta-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.kr-meta dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.kr-meta dd {
    margin: 0;
    font-size: var(--text-base);
    color: var(--ink);
}

.kr-missing {
    font-size: var(--text-base);
    color: var(--ink-muted);
}

/* Panels ----------------------------------------------------------------- */

.kr-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.kr-panel-name {
    display: flex;
    align-items: center;
    height: var(--field-height);
    padding: 0 var(--space-6);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Panels pack rather than sit in a grid. A grid ties every panel to the tallest
   one in its row, so three targets beside nine readings leave a column of empty
   paper the length of the history. */
.kr-panels {
    column-count: 2;
    column-gap: var(--space-6);
}

.kr-panels > .kr-panel {
    break-inside: avoid;
    margin-bottom: var(--space-6);
}

/* A long history is read, not scrolled past: the panel keeps its size and the
   list moves inside it. */
.kr-list {
    max-height: 350px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kr-list > li {
    border-bottom: 1px solid var(--line);
}

.kr-list > li:last-child {
    border-bottom: 0;
}

.kr-target-row,
.kr-history-row,
.kr-child-row {
    display: grid;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--row-height);
    padding: 0 var(--space-6);
}

.kr-target-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.kr-target-amount {
    font-size: var(--text-base);
    color: var(--ink);
}

.kr-target-date {
    font-size: var(--text-base);
    color: var(--ink-secondary);
}

.kr-target-date-standing {
    color: var(--ink-muted);
}

.kr-history-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.kr-history-date {
    font-size: var(--text-base);
    color: var(--ink);
}

.kr-history-value {
    font-size: var(--text-base);
    color: var(--ink);
}

.kr-history-source {
    min-width: 64px;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.kr-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    min-height: var(--row-height);
}

.kr-link {
    font-size: var(--text-base);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duration) ease;
}

.kr-link:hover {
    color: var(--accent-strong);
}

.kr-link-side {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
}

.kr-link-note {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ink-secondary);
}

.kr-child-row {
    grid-template-columns: minmax(0, 1fr) auto 120px;
}

.kr-child-value {
    font-size: var(--text-base);
    color: var(--ink-secondary);
}

/* The reading ------------------------------------------------------------ */

.kr-chart-panel {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    overflow: visible;
}

.kr-figure {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-8);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
}

.kr-figure-reading {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.kr-figure-number {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    line-height: var(--leading-tight);
    color: var(--ink);
}

.kr-figure-unit {
    font-size: var(--text-md);
    color: var(--ink-muted);
}

/* Nothing recorded yet: no amount, so no percentage and no colour either. The
   dash stands in the reading's place, in the reading's size, in the hand of
   something not yet counted. */
.kr-figure-reading-none .kr-figure-number {
    color: var(--ink-faint);
}

.kr-figure-progress {
    width: 220px;
}

/* A satisfied-or-not direction has no bar and no percentage: the mark and the
   word are the whole message, so they take only the room they need. */
.kr-figure-progress:has(.progress-satisfied) {
    width: auto;
}

.kr-figure .progress-mark {
    width: 10px;
    height: 10px;
}

/* The chart -------------------------------------------------------------- */

.kr-chart {
    position: relative;
    margin: 0;
}

.kr-chart-canvas {
    width: 100%;
}

.kr-chart-svg {
    display: block;
    overflow: visible;
}

.kr-chart-axis-value,
.kr-chart-axis-date,
.kr-chart-band-name,
.kr-chart-target-value,
.kr-chart-span-label,
.kr-chart-now-label {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.kr-chart-axis-value,
.kr-chart-axis-date,
.kr-chart-band-name {
    fill: var(--ink-muted);
}

/* Horizontal rules only. Dates are read off the axis, not off the plot. Solid,
   because a value is read off them: dotted at this weight they disappear and a
   Key Result with little history reads as blank paper rather than as a chart. */
.kr-chart-gridline {
    stroke: var(--line);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.kr-chart-axis-line {
    stroke: var(--line-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* The one vertical rule: where today falls. */
.kr-chart-now-line {
    stroke: var(--line-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.kr-chart-now-label {
    fill: var(--ink-faint);
}

/* Targets: the level, at the date it is due. Nothing joins one to the next. */
.kr-chart-target-line {
    stroke: var(--span-strong);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.kr-chart-target-standing {
    stroke-dasharray: 2 4;
}

/* The date the level is due. On a Key Result with one reading this is half of
   what the chart has to say, so it is the firmest mark on the plot. */
.kr-chart-target-cap {
    stroke: var(--ink-secondary);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Both bounds of a `between` target, held together as the one target they are.
   A standing pair spans the whole chart, so the wash has to stay under the value
   line rather than becoming the loudest thing on it. */
.kr-chart-target-corridor {
    fill: var(--span);
    opacity: 0.1;
}

.kr-chart-target-value {
    fill: var(--ink-secondary);
    font-weight: var(--weight-medium);
}

/* The value line, and the reading that carries the colour. */
.kr-chart-line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kr-chart-point {
    fill: var(--ink);
}

.kr-chart-latest {
    fill: var(--ink);
    stroke: var(--surface);
    stroke-width: 2;
}

.kr-chart-halo {
    fill: var(--ink);
    opacity: 0.12;
}

.kr-chart-value-green .kr-chart-latest,
.kr-chart-value-green .kr-chart-halo {
    fill: var(--green-mark);
}

.kr-chart-value-amber .kr-chart-latest,
.kr-chart-value-amber .kr-chart-halo {
    fill: var(--amber-mark);
}

.kr-chart-value-red .kr-chart-latest,
.kr-chart-value-red .kr-chart-halo {
    fill: var(--red-mark);
}

/* Spans. Initiatives are work; obstacles are what stops it. Neither takes the
   status palette: colour on this screen is derived from the value alone, so a
   Key Result never reads red because something is blocking it. Neither outlines
   itself either — a bordered box carries more weight than the value line above
   it, and the value is what the chart is for. */
.kr-chart-span {
    stroke: none;
}

.kr-chart-initiative {
    fill: var(--track);
}

.kr-chart-hatch-ground {
    fill: var(--surface-sunken);
}

.kr-chart-hatch-line {
    stroke: var(--span);
    stroke-width: 1.25;
}

.kr-chart-span-start {
    fill: var(--span-strong);
}

/* An obstacle that has been cleared. Archiving is the only end an obstacle has
   and the day of it is not stored, so the span runs out instead of stopping on
   a date the record cannot vouch for. The ramp is a shape, not a colour: the
   mask reads its opacity and nothing else. */
.kr-chart-fade {
    mask-type: alpha;
}

/* Started, not ended. */
.kr-chart-span-open {
    fill: none;
    stroke: var(--span-strong);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kr-chart-span-label {
    fill: var(--ink);
}

/* The one part of a mark the pointer answers for. Everything else an event
   draws is out of the pointer's way, so the answer is always the mark whose
   lane the pointer is in — never a neighbour's stub crossing it. */
.kr-chart-event-hit {
    fill: transparent;
}

.kr-chart-event-ring,
.kr-chart-event-mark {
    pointer-events: none;
}

/* Carries the mark's date the whole way down to the axis the dates are written
   on, so a lone mark is joined to its date and a crowded day is one line with
   its marks strung up it. Drawn under everything: it is a date, not a reading. */
.kr-chart-event-drop {
    stroke: var(--line);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* One small mark on its own rail, at the date it happened. Hollow, and a
   different shape from a reading, so neither is ever mistaken for the other. */
.kr-chart-event-mark {
    fill: var(--surface);
    stroke: var(--ink-secondary);
    stroke-width: 1.25;
    stroke-linejoin: round;
    transition: fill var(--duration) ease, stroke var(--duration) ease;
}

.kr-chart-event:hover .kr-chart-event-mark,
.kr-chart-event:focus-visible .kr-chart-event-mark {
    fill: var(--accent);
    stroke: var(--accent);
}

/* box-shadow does not reach into SVG, so the focus ring is drawn: the same two
   rings, the same widths, the same colours as everywhere else. */
.kr-chart-event-ring {
    fill: none;
    visibility: hidden;
}

.kr-chart-event-ring-inner {
    stroke: var(--surface);
    stroke-width: 2;
}

.kr-chart-event-ring-outer {
    stroke: var(--accent);
    stroke-width: 2;
}

.kr-chart-event:focus-visible {
    outline: none;
}

.kr-chart-event:focus-visible .kr-chart-event-ring {
    visibility: visible;
}

/* The card opens under the mark it belongs to, the rail being the top of the
   chart. It is read, never pointed at, so it never takes the pointer. */
.kr-chart-card {
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-popover);
    pointer-events: none;
    z-index: 1;
}

.kr-chart-card[hidden] {
    display: none;
}

.kr-chart-card-name {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.kr-chart-card-date {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.kr-chart-card-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ink-secondary);
}

/* Actions and editing ---------------------------------------------------- */

.kr-action {
    height: var(--control-height);
    padding: 0 var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
    transition: border-color var(--duration) ease, color var(--duration) ease;
}

.kr-action:hover {
    border-color: var(--span-strong);
    color: var(--ink);
}

.kr-form {
    max-width: 660px;
    padding: var(--space-7);
}

.kr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.kr-field-wide {
    grid-column: 1 / -1;
}

/* The description is a paragraph, not a line: it grows with what it holds and
   is not dragged taller by hand. */
.kr-description-input {
    height: auto;
    min-height: calc(var(--space-10) * 1.6);
    padding: var(--space-3) var(--space-4);
    line-height: var(--leading-normal);
    resize: none;
}

/* The formula the reading is counted by, read straight under the meta so the
   number and its definition are seen together. */
.kr-description {
    max-width: var(--measure);
    margin: 0 0 var(--space-6);
    color: var(--ink-secondary);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
}

.kr-form .field[hidden] {
    display: none;
}

.kr-form-targets {
    margin-top: var(--space-7);
}

.kr-form-targets .kr-panel-name {
    height: auto;
    padding: 0;
    margin-bottom: var(--space-4);
    background: none;
    border-bottom: 0;
}

/* Every row shares one width, so the column named above a field is the column
   the field is in. Shrink-wrapped rows put "Date" over the value box. */
.kr-target-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

.kr-target-field-row {
    display: grid;
    grid-template-columns: 150px 160px 28px;
    align-items: center;
    gap: var(--space-3);
}

.kr-target-field-row-paired {
    grid-template-columns: 150px 150px 160px 28px;
}

/* Every column is named, once, above the rows it belongs to. */
.kr-target-field-head {
    margin-bottom: calc(var(--space-1) * -1);
}

.kr-target-amount-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.kr-target-amount-field .field-input {
    min-width: 0;
    flex: 1;
    text-align: right;
}

.kr-target-unit {
    flex: none;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 68px;
}

.kr-target-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    color: var(--ink-faint);
    transition: color var(--duration) ease, background var(--duration) ease;
}

.kr-target-remove:hover:not([disabled]) {
    color: var(--red);
    background: var(--red-soft);
}

.kr-target-remove[disabled] {
    opacity: 0.35;
    cursor: default;
}

.kr-target-add {
    align-self: flex-start;
    margin-top: var(--space-2);
}

.kr-problem {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--red);
}

.kr-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

@media (max-width: 860px) {
    .kr-panels {
        column-count: 1;
    }

    .kr-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .kr-chart-panel {
        padding: var(--space-5);
    }

    .kr-figure {
        gap: var(--space-4) var(--space-6);
    }

    .kr-figure-progress {
        width: 160px;
    }

    .kr-target-row,
    .kr-history-row,
    .kr-child-row,
    .kr-link-row {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .kr-child-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kr-child-progress {
        display: none;
    }

    .kr-history-source {
        display: none;
    }

    .kr-target-field-row,
    .kr-target-field-row-paired {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
    }
}

/* The person is a link to everything that is theirs, as on every screen. */
.kr-owner-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}