/* The monthly table: the same Key Results the list shows, read across one
   year. Reference: bar/kpi monthly perdoo.png, minus boards and the
   accumulated row. The target popover: bar/good perdoo-kpi-target-popover.png.

   The strip above the table (the pager and the view toggle) belongs to the
   Objective screen's card and is described in objective.css; everything from
   the scroll container in is here. */

/* The proportions this table is built from, stated once, the way tree.css
   states its own. Colours, spaces and radii all come from tokens.css. */
:root {
    /* The row head against the twelve months: roughly the share the reference
       gives it, so a real Key Result name holds one or two lines. */
    --monthly-head-col: 280px;
    --monthly-head-col-narrow: 200px;
    /* A month at its narrowest still fits a four-figure reading. */
    --monthly-month-col: 52px;
    /* The shape of the history, in the room the row head gives it. */
    --monthly-spark-col: 84px;
    --monthly-spark-col-narrow: 56px;
    /* The same mark the tree puts beside a name. */
    --monthly-mark: 9px;
    --monthly-popover-width: 264px;
    --monthly-caret: 10px;
    /* As much of a unit as the popover shows before it is cut, as on the Key
       Result form. */
    --monthly-unit-max: 68px;
}

/* The year scrolls inside the card when the card cannot hold it, and the row
   heads stay in view. The card itself keeps the screen's measure: every card
   on the Objective screen ends at the same right edge. */
.monthly-scroll {
    overflow-x: auto;
}

.monthly-table {
    min-width: calc(var(--monthly-head-col) + 12 * var(--monthly-month-col));
}

.monthly-head,
.monthly-row {
    display: grid;
    grid-template-columns: var(--monthly-head-col) repeat(12, minmax(var(--monthly-month-col), 1fr));
    align-items: stretch;
}

/* The head reads like every other table head in the product; the months read
   as words, the way the reference writes them — twelve caps labels would
   shout across the whole card. */
.monthly-head {
    height: var(--field-height);
    align-items: center;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-strong);
}

.monthly-head-kr {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface-sunken);
    padding: 0 var(--space-6);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.monthly-head-month {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--ink-muted);
    text-align: center;
}

.monthly-row {
    border-bottom: 1px solid var(--line);
}

.monthly-table > .monthly-row:last-child {
    border-bottom: 0;
}

/* The row head: what the row is, who owns it, the shape of its history. It
   stays put while the year scrolls past it. */
.monthly-kr {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.monthly-kr-names {
    min-width: 0;
    flex: 1;
}

.monthly-kr-name {
    display: block;
    font-size: var(--text-base);
    color: var(--ink);
    overflow-wrap: anywhere;
    transition: color var(--duration) ease;
}

.monthly-kr-name:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.monthly-kr-owner {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duration) ease;
}

.monthly-kr-owner:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

/* The history holds its column whatever the name does, so the sparklines line
   up down the table. */
.monthly-kr-history {
    flex: none;
    width: var(--monthly-spark-col);
}

.monthly-kr-history .sparkline {
    display: block;
    width: 100%;
    height: var(--space-8);
}

/* A month: the reading over what it was read against. */
.monthly-cell {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    min-width: 0;
}

/* The sticky row head already draws this line. */
.monthly-kr + .monthly-cell {
    border-left: 0;
}

.monthly-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex: 1;
    min-height: var(--space-9);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    color: var(--ink);
}

.monthly-value-none {
    color: var(--ink-faint);
}

.monthly-mark {
    flex: none;
    width: var(--monthly-mark);
    height: var(--monthly-mark);
    border-radius: 50%;
}

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

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

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

/* The target row under the readings. Every target carries its comparator, so
   it can never be read as a second value. Where it can be edited it is a
   button in the same clothes, and says so on hover the way every link in the
   product does — by changing, not by explaining. */
.monthly-target {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-9);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
}

button.monthly-target {
    width: 100%;
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    transition: background var(--duration) ease, color var(--duration) ease;
}

button.monthly-target:hover {
    background: var(--surface-hover);
    color: var(--ink-secondary);
}

button.monthly-target.monthly-target-open {
    background: var(--surface-selected);
    color: var(--ink-secondary);
}

/* Archived, and asked for. Legible, not competing. */
.monthly-row-archived .monthly-kr-name,
.monthly-row-archived .monthly-value {
    color: var(--ink-muted);
}

.monthly-row-archived .sparkline {
    opacity: 0.4;
}

/* The popover ------------------------------------------------------------ */

/* Pinned to the viewport so the card's own scrolling cannot clip it, standing
   beside the cell it edits with the caret pointing at it. Where it stands is
   computed at runtime from where the cell is; until that is known it must not
   flash in a corner. */
.monthly-popover {
    position: fixed;
    z-index: 30;
    visibility: hidden;
    width: var(--monthly-popover-width);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    text-align: left;
}

/* The caret: a corner of the popover's own surface, turned to point at the
   cell. Its outward edges carry the border, its inward half sits under the
   popover. */
.monthly-popover-caret {
    position: absolute;
    width: var(--monthly-caret);
    height: var(--monthly-caret);
    background: var(--surface);
    transform: translate(-50%, -50%) rotate(45deg);
}

.monthly-popover-point-right .monthly-popover-caret {
    left: 100%;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.monthly-popover-point-left .monthly-popover-caret {
    left: 0;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.monthly-popover-point-up .monthly-popover-caret {
    top: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.monthly-popover-point-down .monthly-popover-caret {
    top: 100%;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.monthly-popover-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.monthly-popover-name {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.monthly-popover-date {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.monthly-popover-close {
    margin-left: auto;
    align-self: center;
    width: var(--control-height);
    height: var(--control-height);
    border-radius: var(--radius);
    background: none;
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--ink-muted);
    transition: background var(--duration) ease, color var(--duration) ease;
}

.monthly-popover-close:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.monthly-popover-ask {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    color: var(--ink-secondary);
}

.monthly-popover-amounts {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* The unit stands beside the field, the same way the Key Result form writes
   its target amounts. */
.monthly-popover-amount {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.monthly-popover-amount .field-input {
    min-width: 0;
    flex: 1;
}

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

.monthly-popover-problem {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--red);
}

.monthly-popover-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.monthly-popover-remove {
    background: none;
    border-radius: var(--radius);
    padding: 0 var(--space-2);
    height: var(--control-height);
    font-size: var(--text-base);
    color: var(--ink-secondary);
    transition: color var(--duration) ease;
}

.monthly-popover-remove:hover {
    color: var(--red);
}

.monthly-popover-remove[disabled] {
    opacity: 0.55;
    cursor: default;
}

.monthly-popover[aria-busy='true'] .monthly-popover-amounts {
    opacity: 0.55;
}

/* On a phone the row head narrows and the months keep their size and scroll.
   The head keeps everything it holds — name, owner, sparkline. */
@media (max-width: 720px) {
    .monthly-table {
        min-width: calc(var(--monthly-head-col-narrow) + 12 * var(--monthly-month-col));
    }

    .monthly-head,
    .monthly-row {
        grid-template-columns: var(--monthly-head-col-narrow) repeat(12, var(--monthly-month-col));
    }

    .monthly-kr {
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
    }

    .monthly-kr-history {
        width: var(--monthly-spark-col-narrow);
    }
}