/* Initiatives: the list and one Initiative. The toolbar, the search, the owner
   select and the archived toggle are the same controls the tree uses and are
   not restyled here. */

/* The card is the table: every line inside it is a row of data. Making an
   Initiative happens below it, in a band of its own. */
.initiatives {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* The name is the record, and the only thing that identifies it. It takes the
   room the other columns are not using: the four beside it hold a person's name,
   one word of state and two dates, and none of them grows past that. Below each
   width where a column can no longer hold a readable value, that column leaves
   the table outright rather than being crushed towards nothing. */
.initiatives-head,
.initiative-row {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(150px, 1.2fr) 100px 92px 168px;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-6);
}

.initiatives-head {
    height: var(--field-height);
    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);
}

.initiatives-head > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nothing to list: the columns stand and the head has nothing left to rule off,
   so the card closes under it. No held-open space, and the screen says nothing
   about it. */
.initiatives-body:empty {
    display: none;
}

.initiatives-table:has(.initiatives-body:empty) .initiatives-head {
    border-bottom: 0;
}

.initiative-row {
    min-height: var(--row-height);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    position: relative;
}

.initiative-row:last-child {
    border-bottom: 0;
}

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

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

/* The whole row is the target, so the ring belongs to the row. A ring drawn
   around the text alone would say the wrong thing about what is being opened,
   and the card would clip it. */
.initiative-row:has(:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.initiative-name-link:focus-visible {
    box-shadow: none;
}

.initiative-name {
    min-width: 0;
}

.initiative-name-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* An owner, a state and a run of dates are as long as they are: one line each,
   and the row is built for them. */
.initiative-owner,
.initiative-state,
.initiative-dates {
    display: block;
    min-width: 0;
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The name is not. It is the only identifier an Initiative has and the list is
   where it is read, so it wraps and the row grows to hold it rather than losing
   its tail to an ellipsis that nothing can recover it from. It breaks between
   words; a word is broken only when it cannot fit a line of its own. */
.initiative-name-text {
    display: block;
    min-width: 0;
    font-size: var(--text-base);
    overflow-wrap: break-word;
    color: var(--ink);
    font-weight: var(--weight-medium);
    transition: color var(--duration) ease;
}

/* Every Key Result this Initiative works on, named in full, one to a line. The
   row grows to hold them, the way it grows to hold a long name: a cell that
   holds three of four names and shows one is a row that states something false
   about the record. Read the same way as the same cell on /events. */
.initiative-key-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink-muted);
}

/* A name too long for the width it has wraps between words, and a word is only
   broken when it cannot fit a line of its own. Nothing is dropped. */
.initiative-key-result {
    min-width: 0;
    overflow-wrap: break-word;
}

.initiative-owner,
.initiative-dates {
    color: var(--ink-secondary);
}

/* Days, months and years stack, so the column reads down as well as across —
   the last column of every list in the product ends on the same edge. */
.initiatives-column-dates,
.initiative-dates {
    justify-self: end;
}

/* An Initiative affects no value, so its state never takes green, amber or red.
   The word is the whole of it. */
.initiative-state {
    color: var(--ink-secondary);
}

/* An archived row is grey end to end, so it cannot be mistaken for a live one
   when archived rows are switched on. */
.initiative-row-archived .initiative-name-text {
    color: var(--ink-muted);
}

.initiative-row-archived .initiative-key-results,
.initiative-row-archived .initiative-owner,
.initiative-row-archived .initiative-state,
.initiative-row-archived .initiative-dates {
    color: var(--ink-faint);
}

/* Making one --------------------------------------------------------------- */

/* Below the table, not inside it. A control that opens a form is not a row of
   the table, and it does not stand at the indent the row names stand at. */
.initiatives-create {
    margin-top: var(--space-5);
}

/* Shut, it is the one control the product makes anything with, standing on the
   canvas: no band, no inset, nothing behind it that could read as a row. */
.initiatives-create .create-row {
    padding: 0;
    border-top: 0;
    background: none;
}

/* Open, the form is a surface of its own, on the same rail as the table and
   plainly not part of it. */
.initiatives-create:has(.create-form) .create-row {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* One Initiative ----------------------------------------------------------
   The record occupies the column its list occupied, head and card on one rail.
   Arriving from a full-width table onto a small box in the corner reads as two
   different products. */

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

.initiative-head-archived .screen-title {
    color: var(--ink-muted);
}

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

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

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

/* One card, whether the record is being read or written. */
.initiative-detail {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* An archived Initiative is put away, not gone: it keeps its shape and stands
   back a tier. */
.initiative-detail-archived .initiative-fact-value,
.initiative-detail-archived .initiative-link-name {
    color: var(--ink-muted);
}

/* The facts, each named above its value, filling the band rather than framing
   space. Only a finished Initiative carries an end, so the band is three wide
   or four and every column takes an equal share of the measure either way. */
.initiative-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
}

.initiative-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-6);
    border-right: 1px solid var(--line);
}

.initiative-fact:last-child {
    border-right: 0;
}

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

/* An Initiative affects no value, so its state never takes green, amber or red
   here either. The word is the whole of it. */
.initiative-fact-value {
    font-size: var(--text-base);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.initiative-block {
    padding: var(--space-6);
}

.initiative-block-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.initiative-links {
    display: flex;
    flex-direction: column;
}

.initiative-link {
    display: flex;
    align-items: center;
    min-height: var(--row-height);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-base);
    color: var(--ink);
}

.initiative-link:last-child {
    border-bottom: 0;
}

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

.initiative-link-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duration) ease;
}

.initiative-link-archived .initiative-link-name {
    color: var(--ink-muted);
}

/* Editing -----------------------------------------------------------------
   The form is the one the product makes an Initiative with. Its fields, their
   names, the boxes that are ticked and the words under a box that was refused
   are all create.css, so there is one form shape here and no second one that
   drifts from it. All this file says is where it stands: in the card the record
   stood in, at the same inset. */

.initiative-form {
    padding: var(--space-6);
}

/* A write that did not land is named where the record is, not coloured. */
.initiative-error {
    font-size: var(--text-sm);
    color: var(--red);
}

.initiative-error:empty {
    display: none;
}

/* Said inside the card, under the facts the action acted on. */
.initiative-detail-error {
    padding: var(--space-5) var(--space-6) 0;
}

/* Narrowing ---------------------------------------------------------------- */

/* Below the width where a Key Result name still fits a line of its own, the
   column leaves the table with the header that names it. A column that is not
   there claims nothing; a column that keeps a name back would. */
@media (max-width: 1160px) {
    .initiatives-head,
    .initiative-row {
        grid-template-columns: minmax(200px, 1fr) 100px 92px 168px;
    }

    .initiatives-column-key-results,
    .initiative-key-results {
        display: none;
    }
}

@media (max-width: 1000px) {
    .initiatives-head,
    .initiative-row {
        grid-template-columns: minmax(200px, 1fr) 92px 168px;
    }

    .initiatives-column-owner,
    .initiative-owner {
        display: none;
    }
}

@media (max-width: 850px) {
    .initiatives-head,
    .initiative-row {
        grid-template-columns: minmax(0, 1fr) 92px;
    }

    .initiatives-column-dates,
    .initiative-dates {
        display: none;
    }
}

@media (max-width: 720px) {
    /* Three controls, and none of them squeezed under its own content: the
       search takes the room that is left and the rest wraps. */
    .toolbar-initiatives {
        flex-wrap: wrap;
    }

    .toolbar-initiatives .select {
        min-width: 0;
    }

    /* The phone shows two columns, and it shows their header. An empty list is
       still a table with its columns. */
    .initiatives-head,
    .initiative-row {
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: var(--space-4);
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .initiative-head {
        flex-wrap: wrap;
        row-gap: var(--space-4);
    }

    /* The facts stack rather than being squeezed into columns a phone has no
       room for. The hairline that separated them turns with them. */
    .initiative-facts {
        grid-auto-flow: row;
    }

    .initiative-fact {
        padding: var(--space-4) var(--space-5);
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .initiative-fact:last-child {
        border-bottom: 0;
    }

    .initiative-block {
        padding: var(--space-5);
    }

    .initiative-form {
        padding: var(--space-5);
    }
}

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