/* The archive. Five kinds of object in one table, told apart by the type they
   name, not by a colour or a mark that would need a legend. The toolbar and the
   sparkline are the shared ones every other list uses; only what is particular
   to this table lives here. */

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

/* The name is the only reason this screen exists: it is what is being hunted
   for, and the other four columns are how it is told apart once found. So the
   name holds the surplus and keeps a floor under it, and the secondary columns
   leave one at a time as the room runs out — history first, then owner. The
   fixed tracks are sized so that the floor is never the thing that gives:
   at every width the row fits inside the card. */
.archive-head,
.archive-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 96px 120px 72px 88px;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-6);
}

.archive-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);
}

/* A header never spills into the column beside it, whatever the tracks resolve
   to. Two headings printed over each other is worse than one cut short. */
.archive-head > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-head-history,
.archive-head-action {
    justify-self: end;
}

/* Nothing archived, or nothing matching: the columns stand and the head has
   nothing left to rule off, so it does not draw a line across the foot of the
   card. Nothing is said about it. */
.archive:has(.archive-body:empty) .archive-head {
    border-bottom: 0;
}

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

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

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

/* Name cell: depth, disclosure, link ------------------------------------ */

/* Depth is one number on the row, so every line of the row hangs off the same
   rail however the columns are laid out. The breathing room sits on the name
   rather than on the row: a wrapped name opens the row, and the action cell
   still reaches the full height of it. */
.archive-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) 0 var(--space-3) calc(var(--depth, 0) * 18px);
}

.archive-disclosure {
    flex: none;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--ink-faint);
    position: relative;
    z-index: 1;
    transition: transform var(--duration) ease, color var(--duration) ease;
}

.archive-disclosure:hover {
    color: var(--ink);
    background: var(--track);
}

.archive-disclosure[aria-expanded='true'] {
    transform: rotate(90deg);
}

.archive-disclosure-empty {
    flex: none;
    width: 18px;
}

/* Nothing in view can be opened — an Initiative, an Event and an Obstacle never
   have children, so this is the ordinary archive. The gutter the chevrons stand
   in goes with them, and every name starts under the header that names it. */
.archive-body-flat .archive-disclosure-empty {
    display: none;
}

.archive-body-flat .archive-name {
    gap: 0;
}

/* An archived object is put away, not gone. The name holds the full ink and the
   type and owner sit back from it. It must not clip either: this is the one
   screen whose job is telling two near-identical names apart, so a long one
   wraps to a second line. It wraps between words; a word is only broken when it
   genuinely cannot fit on a line of its own. */
.archive-name-link {
    min-width: 0;
}

.archive-name-text {
    display: block;
    overflow-wrap: break-word;
    font-size: var(--text-base);
    color: var(--ink);
}

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

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

.archive-kind {
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-owner {
    font-size: var(--text-base);
    color: var(--ink-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* History ---------------------------------------------------------------- */

.archive-history {
    justify-self: end;
}

/* Restore ---------------------------------------------------------------- */

/* The whole cell belongs to the action. Without this the row-wide link sits
   over the space around the button, and a near-miss on Restore opens the record
   instead — two different consequences a few pixels apart. */
.archive-action {
    justify-self: end;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

/* The one action on the screen, and the whole reason the screen exists. It is
   drawn as a control and not as a word: the same border, the same radius and the
   same ink as every other action in the product — .initiative-action and
   .event-action — at the height a control standing in a row of data takes. */
.archive-restore {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--text-base);
    color: var(--ink-secondary);
    white-space: nowrap;
    transition: border-color var(--duration) ease, color var(--duration) ease;
}

.archive-restore:hover {
    border-color: var(--span-strong);
    color: var(--ink);
}

/* In flight: the row is busy and says so whether or not the pointer stayed. */
.archive-restore[disabled] {
    opacity: 0.55;
    cursor: default;
}

.archive-row[aria-busy='true'] {
    background: var(--surface-sunken);
}

/* The write did not land. Named in the notice above the table, marked here by a
   rail rather than by status colour: red on a row means a Key Result against its
   target, and a failed request is not that. */
.archive-row[aria-invalid='true'] {
    background: var(--surface-sunken);
    box-shadow: inset 2px 0 0 var(--ink-muted);
}

/* The notice stands at the far end of the band the filters are already in, so a
   failed restore is said without opening a gap above the table: the row that
   was just pressed stays exactly where the pointer left it. With nothing to say
   it takes no room at all. */
/* Room enough and the notice sits at the far end of the filters. Too little,
   and it takes a line of its own rather than squeezing the search into nothing.
 */
.toolbar-archive {
    flex-wrap: wrap;
}

.archive-notice {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    font-size: var(--text-base);
    color: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.archive-notice:empty {
    display: none;
}

/* The sparkline is the first to go: an archived Key Result's shape is worth
   having, but not at the cost of reading its name. */
@media (max-width: 1055px) {
    .archive-head,
    .archive-row {
        grid-template-columns: minmax(200px, 1fr) 96px 120px 88px;
    }

    .archive-history,
    .archive-head-history {
        display: none;
    }
}

/* Then the owner. The type stays: it is what tells five kinds of object apart
   in one table, and nothing else on the row does that. */
@media (max-width: 871px) {
    .archive-head,
    .archive-row {
        grid-template-columns: minmax(200px, 1fr) 84px 84px;
        padding: 0 var(--space-5);
    }

    .archive-owner,
    .archive-head-owner {
        display: none;
    }
}

/* A phone has no room for columns at all, and the name is what is being looked
   for. The type drops under it, on the same rail, at every depth. The action
   keeps its track whether or not the row carries a Restore, so every name ends
   at the same edge down the table. */
@media (max-width: 720px) {
    .toolbar-archive .select {
        min-width: 0;
    }

    /* The columns still stand, and their header stands over them. What was a
       column of its own drops under the name, so the header for it goes with
       it rather than heading a column that is no longer there. */
    .archive-head {
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: var(--space-4);
        padding: 0 var(--space-5);
    }

    .archive-head-kind {
        display: none;
    }

    .archive-row {
        grid-template-columns: minmax(0, 1fr) 92px;
        grid-template-areas:
            'name action'
            'kind action';
        gap: 0 var(--space-4);
        padding: var(--space-4) var(--space-5);
    }

    .archive-name {
        grid-area: name;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 18px of disclosure plus the 6px gap: exactly where the name starts. With
       no gutter to stand in, exactly where the name starts is the rail itself. */
    .archive-kind {
        grid-area: kind;
        padding-left: calc(var(--depth, 0) * 18px + var(--space-8));
    }

    .archive-body-flat .archive-kind {
        padding-left: calc(var(--depth, 0) * 18px);
    }

    .archive-owner {
        display: none;
    }

    .archive-action {
        grid-area: action;
        align-self: center;
    }

    /* A finger, not a pointer. */
    .archive-restore {
        height: auto;
        min-height: 44px;
        padding: 0 var(--space-5);
    }
}

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