/* Objective detail. A name, an owner, what sits under it, what it waits on.
   No percentage, no ring, no status: an Objective has no value of its own.
   The rows draw the same bar and the same sparkline every other screen draws;
   what this file says about them stops at this screen's rows. */

/* One measure ------------------------------------------------------------ */

/* A table is read across, from a name to the person who owns it to what it
   reads. Given the whole width of a large screen the few short rows a real
   Objective has stretch into a line of names on one side and a line of people
   on the other, with nothing in between to carry the eye. Everything on this
   screen stops at the same width before that happens, so the title, the facts
   under it and the tables all end on one line. The page is free to be wider. */
.objective {
    --objective-measure: calc(var(--space-10) * 24);
}

.objective .screen-head,
.objective-meta,
.objective-card {
    max-width: var(--objective-measure);
}

/* The screen takes the keyboard when the control that had it has been taken
   away by what it did: archiving leaves the head with nothing to press. Like
   the screen area itself, this is somewhere to stand rather than a control, so
   it is not ringed. */
.objective:focus,
.objective:focus-visible {
    outline: none;
    box-shadow: none;
}

/* The reading, in these rows --------------------------------------------- */

/* components/progress.js draws the same cell on every screen and tree.css
   describes it once, next to the component. Nothing below reaches past this
   screen's rows: how the reading sits in a row of this table is this table's
   business, and no other screen's colours may depend on this file being loaded.

   A Key Result that has recorded nothing still has a reading — zero, and by the
   rules red. So the bar keeps a mark at its start and the figure is written in
   the colour it is: day one reads as a red nought, not as a control switched
   off. */
.objective-row .progress {
    gap: var(--space-5);
}

/* One anchor down the column. A percentage sits at the right edge because the
   track pushes it there; a satisfied-or-not reading is pushed there too, so
   reading down the column every figure lines up. */
.objective-row .progress-satisfied {
    justify-content: flex-end;
}

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

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

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

/* Head ------------------------------------------------------------------ */

/* The parent is somewhere to go, in the same shape the Key Result screen uses
   for its parent. */
.objective-parent {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    transition: color var(--duration) ease;
}

.objective-parent:hover {
    color: var(--accent-strong);
}

.objective-parent-mark {
    flex: none;
}

/* The title and what it is are one block and nothing gets between them, so the
   actions hold their line at every width and the title wraps instead. */
.objective .screen-head {
    margin-bottom: var(--space-4);
}

.objective .screen-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.objective .screen-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
}

.objective-is-archived .screen-title {
    color: var(--ink-muted);
}

/* What the record is, before what it holds. Named the way the Key Result screen
   names the same facts, so the two detail screens read as one product. */
.objective-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    margin: 0 0 var(--space-7);
}

.objective-meta-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-width: 0;
}

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

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

/* Several siblings fit on one line and wrap when they do not. The separator is
   there so two sentence-shaped names cannot be read as one. */
.objective-meta-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.objective-meta-link {
    color: var(--accent);
    transition: color var(--duration) ease;
}

.objective-meta-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.objective-meta-sep {
    color: var(--ink-faint);
}

.objective-action {
    height: var(--control-height);
    padding: 0 var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    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,
        border-color var(--duration) ease;
}

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

.objective-action[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Archiving is not Edit and must not look like it. */
.objective-action-quiet {
    border-color: transparent;
    background: none;
    color: var(--ink-muted);
}

.objective-action-quiet:hover {
    background: var(--red-soft);
    border-color: transparent;
    color: var(--red);
}

.objective-action-danger {
    background: var(--red);
    border-color: var(--red);
    color: var(--surface);
}

.objective-action-danger:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--surface);
}

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

/* Two readings of the Key Results ---------------------------------------- */

/* The strip over the Key Results table: the year pager when the monthly table
   is up, and the toggle between the two readings. Controls, not headings — the
   table still names itself in its own head. */
.kr-views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
}

.kr-views-toggle {
    display: flex;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.kr-view {
    height: var(--control-height);
    padding: 0 var(--space-5);
    background: var(--surface);
    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;
}

.kr-view + .kr-view {
    border-left: 1px solid var(--line-strong);
}

.kr-view:hover {
    color: var(--ink);
}

.kr-view-active {
    background: var(--surface-selected);
    color: var(--accent-strong);
}

/* The pager reads |‹ ‹ year › ›| Today, stepping across the years the
   histories and targets span. */
.monthly-pager {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.monthly-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-secondary);
    transition: color var(--duration) ease, border-color var(--duration) ease;
}

.monthly-step:hover {
    border-color: var(--span-strong);
    color: var(--ink);
}

.monthly-step[disabled] {
    opacity: 0.45;
    cursor: default;
}

.monthly-step[disabled]:hover {
    border-color: var(--line-strong);
    color: var(--ink-secondary);
}

.monthly-year {
    min-width: var(--space-10);
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.monthly-today {
    height: var(--control-height);
    margin-left: var(--space-3);
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    background: none;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--accent);
    transition: color var(--duration) ease;
}

.monthly-today:hover {
    color: var(--accent-strong);
}

.monthly-today[disabled] {
    color: var(--ink-faint);
    cursor: default;
}

/* Tables ---------------------------------------------------------------- */

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

.objective-card + .objective-card {
    margin-top: var(--space-7);
}

/* One grid for both tables. The owner of a child Objective and the owner of a
   Key Result land in the same column, so the whole screen reads down one line
   of names and one line of people. */
.objective-head,
.objective-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 124px 148px 96px;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-6);
}

.objective-head {
    height: var(--field-height);
    padding-top: 0;
    padding-bottom: 0;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-strong);
}

/* The name of the table stands in the column its rows put names in. */
/* One typography across a header row. The first cell names a column like every
   other cell in the row, and the same row is drawn the same way on the tree one
   click away. */
.objective-head-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

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

.objective-row {
    position: relative;
    min-height: var(--row-height);
    border-bottom: 1px solid var(--line);
}

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

.objective-row:hover {
    background: var(--surface-hover);
}

.objective-row-name {
    min-width: 0;
}

.objective-row-link {
    display: block;
}

/* The whole row is the target. */
.objective-row-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* The row is clipped by the card's rounded corners, so a ring hung outside the
   anchor is cut away. This one is drawn inside the row and survives. */
.objective-row-link:focus-visible {
    box-shadow: none;
}

.objective-row:has(.objective-row-link:focus-visible) {
    background: var(--surface-selected);
}

.objective-row:has(.objective-row-link:focus-visible)::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    pointer-events: none;
}

/* A name identifies the record, so it is never cut short. It wraps. */
.objective-row-text {
    display: block;
    font-size: var(--text-base);
    color: var(--ink);
    overflow-wrap: anywhere;
    transition: color var(--duration) ease;
}

.objective-row-objective .objective-row-text {
    font-weight: var(--weight-medium);
}

.objective-row:hover .objective-row-text {
    color: var(--accent-strong);
}

.objective-row-owner {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The reading and what it is aimed at. Kept to one line: a figure that wraps
   stops being a figure. */
.objective-row-value {
    font-size: var(--text-base);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.objective-row-target,
.objective-row-unit {
    color: var(--ink-muted);
}

/* The shape of the readings, drawn across the width its column has rather than
   at the size an SVG attribute happens to carry, so one reading is a mark that
   can be read and a run of them is a line. */
.objective-row-history .sparkline {
    display: block;
    width: 100%;
    height: var(--space-8);
}

/* Archived, and asked for. It stays legible and stops competing: a live row and
   an archived one must never be mistaken for each other. */
.objective-row-archived .objective-row-text,
.objective-row-archived .objective-row-owner,
.objective-row-archived .objective-row-value {
    color: var(--ink-muted);
}

.objective-row-archived .progress,
.objective-row-archived .sparkline {
    opacity: 0.4;
}

/* Making the first one -------------------------------------------------- */

/* The control sits in the table it adds to, under the name of what it makes.
   With no rows above it there is no row to be parted from, so the line that
   would part them is not drawn. */
.objective-table:not(:has(.objective-row)) + .create-row {
    border-top: 0;
}

/* Editing, in place, at the same URL -------------------------------------- */

/* The form is the width of its fields. A card wider than its controls is a
   card with nothing in most of it. */
.objective-form {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding: var(--space-7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

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

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

/* A description grows with its text and is not resized by hand. */
.objective-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;
}

/* What the Objective means, read under the meta line. */
.objective-description {
    max-width: var(--measure);
    margin: 0 0 var(--space-6);
    color: var(--ink-secondary);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
}

.objective-depends {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.objective-depends-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.objective-choice {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-base);
    color: var(--ink);
    cursor: pointer;
}

.objective-choice-box {
    width: 14px;
    height: 14px;
    flex: none;
    accent-color: var(--accent);
    margin: 0;
}

.objective-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.objective-form[aria-busy='true'] .objective-form-grid,
.objective-form[aria-busy='true'] .objective-depends {
    opacity: 0.55;
}

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

.objective-form .objective-problem {
    margin-bottom: 0;
}

/* The name is the only column that identifies the record, so it is the last to
   give up room. Between a wide screen and a phone the fixed columns narrow
   first, and then the reading moves out of its column and under the name. */
@media (min-width: 901px) and (max-width: 1120px) {
    .objective-head,
    .objective-row {
        grid-template-columns: minmax(0, 1fr) 100px 104px 128px 84px;
        gap: var(--space-4);
    }
}

@media (max-width: 900px) {
    /* The column labels go; the name of the table stays, because it is the only
       thing saying what the rows under it are. */
    .objective-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .objective-head-label {
        display: none;
    }

    /* The reading stays: a Key Result that does not say how many countries is
       not a Key Result. It moves under the name instead. */
    .objective-table-key-results .objective-row {
        grid-template-columns: minmax(0, 1fr) 116px 72px;
        row-gap: var(--space-1);
        column-gap: var(--space-4);
    }

    .objective-table-key-results .objective-row-owner {
        display: none;
    }

    .objective-table-key-results .objective-row-value {
        grid-column: 1;
        grid-row: 2;
        font-size: var(--text-sm);
        color: var(--ink-secondary);
    }

    .objective-table-key-results .progress {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .objective-table-key-results .objective-row-history {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    /* An Objective row carries a name and an owner and nothing else. Losing the
       owner would leave half a record on screen, so it stays, and the cells it
       has nothing for stop holding room open. */
    .objective-table-objectives .objective-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 100px);
        column-gap: var(--space-4);
    }

    .objective-table-objectives .objective-row-owner {
        justify-self: end;
    }

    .objective-table-objectives .objective-row-value,
    .objective-table-objectives .objective-row-progress,
    .objective-table-objectives .objective-row-history {
        display: none;
    }
}

@media (max-width: 720px) {
    .objective-head,
    .objective-row {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .objective-row {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .objective-table-key-results .objective-row {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .objective-table-key-results .objective-row-history {
        display: none;
    }

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

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