/* Events: the list and the one Event being edited. Same table language as the
   tree — one hairline per row, one weight of type, nothing decorative. The
   toolbar, the search and the archived toggle are the shared controls and are
   not restyled here. */

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

/* The name is the Event, and the only thing that identifies it. It takes the
   room the other two columns are not using: they hold the Key Results it is
   marked on and one day, and neither grows past that. */
.events-head,
.events-row {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(150px, 1.2fr) 104px;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-6);
}

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

/* Nothing to list: the columns stand and the head has nothing left to rule off,
   so the card closes under it. The screen says nothing about it. */
.events-table:has(.events-body:empty) .events-head {
    border-bottom: 0;
}

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

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

/* A pointer and the keyboard read the row the same way. */
.events-row:hover,
.events-row:focus-within {
    background: var(--surface-hover);
}

.events-row:hover .events-name-text,
.events-row:focus-within .events-name-text {
    color: var(--accent-strong);
}

/* The ring belongs to the row: a ring drawn around the text alone reads as a
   stray box, and the card would clip it. */
.events-row:has(:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--accent);
}

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

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

/* The whole row follows the name. */
.events-name-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* A day is as long as it is: one line, and the row is built for it. */
.events-date {
    display: block;
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The name is not. It is the only thing that identifies an Event 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. */
.events-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 Event is marked 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 four names and shows one is a row that states something false about the
   record. Read the same way as the same cell on /initiatives. */
.events-linked {
    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. */
.events-linked-name {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Days, months and years stack, so the column reads down as well as across. */
.events-column-date,
.events-date {
    justify-self: end;
}

.events-date {
    color: var(--ink-secondary);
}

/* An archived row is grey end to end, and keeps the two tiers a live row has,
   so it cannot be mistaken for one. */
.events-row-archived .events-name-text {
    color: var(--ink-muted);
}

.events-row-archived .events-linked,
.events-row-archived .events-date {
    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. */
.events-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. */
.events-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. */
.events-create:has(.create-form) .create-row {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* The Event ---------------------------------------------------------------
   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. */

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

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

/* The form is the one the product makes an Event with. Its fields, their names,
   the description, 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, at
   the card's inset. */
.event-form {
    padding: var(--space-6);
}

/* A write that did not land is named where the record is, not coloured. It
   stands above the form, under the action in the head that failed. */
.event-error {
    font-size: var(--text-sm);
    color: var(--red);
    padding: var(--space-6) var(--space-6) 0;
}

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

/* One height per band: this stands alone in the head. */
.event-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;
}

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

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

@media (max-width: 720px) {
    /* Two controls, and neither squeezed under its own content: the search
       takes the room that is left, exactly as it does on the other lists. */
    .toolbar-events {
        flex-wrap: wrap;
    }

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

    .events-column-key-results,
    .events-linked {
        display: none;
    }

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

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

    .event-error {
        padding: var(--space-5) var(--space-5) 0;
    }
}