/*
 * pcu-planning-write-plan — "Was geschrieben wird" as a verdict, exceptions and one folded list.
 *
 * HUMAN-OWNED. Only `--uui-*` tokens for layout, type and surfaces. The three status inks are
 * component-local literals, the same convention as the analysis charts: the library has no
 * warning/success roles for text and washes (`--uui-bg-warning-*` does not exist — traps.md),
 * and a verdict that renders grey by fallback is worse than a literal.
 *
 * Source: owner-approved mockup `.copi/files/Untitled - Lit/writeplan-mockup-2.html` (2026-09-30).
 */

/*
 * The host is the container the list's column count measures against. It needs a definite
 * width for that: a size-contained element has no intrinsic width, and as a flex item (the
 * catalogue stage) it collapsed to 211px and cut every course name. `inline-size: 100%` is
 * the same rule every self-measuring host in this layer carries (`pcu-bot-ui`).
 */
pcu-planning-write-plan {
    display: block;
    inline-size: 100%;
    container-type: inline-size;
    --pcu-write-ok-ink: #0b6b3a;
    --pcu-write-ok-bg: #e8f6ee;
    --pcu-write-attention-ink: #b42318;
    --pcu-write-attention-bg: #fdecec;
    --pcu-write-attention-line: #f2a8a8;
    --pcu-write-hint-ink: #8a5a00;
    --pcu-write-hint-bg: #fdf3e2;
    --pcu-write-hint-line: #efcf94;
}

.pcu-planning-write-plan__root {
    display: grid;
    gap: var(--uui-spacing-4);
}

.pcu-planning-write-plan__root p {
    margin: 0;
}

/* ------------------------------------------------------------------ Verdict */

.pcu-planning-write-plan__verdict {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-4);
}

.pcu-planning-write-plan__dot {
    inline-size: var(--uui-spacing-4);
    block-size: var(--uui-spacing-4);
    border-radius: var(--uui-radius-full);
    flex-shrink: 0;
    background: var(--pcu-write-ok-ink);
}

.pcu-planning-write-plan__verdict[data-verdict="attention"] .pcu-planning-write-plan__dot {
    background: var(--pcu-write-attention-ink);
}

.pcu-planning-write-plan__verdict[data-verdict="hint"] .pcu-planning-write-plan__dot {
    background: var(--pcu-write-hint-ink);
}

/* --------------------------------------------------------------- Exceptions */

.pcu-planning-write-plan__issue {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--uui-spacing-2) var(--uui-spacing-4);
    align-items: start;
    padding: var(--uui-spacing-4) var(--uui-spacing-4);
    border: 1px solid var(--pcu-write-line);
    border-radius: var(--uui-radius-lg);
    background: var(--pcu-write-bg);
}

.pcu-planning-write-plan__issue[data-tone="attention"] {
    --pcu-write-ink: var(--pcu-write-attention-ink);
    --pcu-write-bg: var(--pcu-write-attention-bg);
    --pcu-write-line: var(--pcu-write-attention-line);
}

.pcu-planning-write-plan__issue[data-tone="hint"] {
    --pcu-write-ink: var(--pcu-write-hint-ink);
    --pcu-write-bg: var(--pcu-write-hint-bg);
    --pcu-write-line: var(--pcu-write-hint-line);
}

.pcu-planning-write-plan__glyph {
    inline-size: var(--uui-spacing-6);
    block-size: var(--uui-spacing-6);
    border-radius: var(--uui-radius-full);
    display: grid;
    place-items: center;
    background: var(--pcu-write-ink);
    color: var(--uui-text-primary_on-brand, #fff);
    font-weight: 700;
    font-size: var(--uui-text-sm-font-size);
}

.pcu-planning-write-plan__what small {
    margin-inline-start: var(--uui-spacing-2);
    font-weight: 400;
}

.pcu-planning-write-plan__reason {
    align-self: start;
    white-space: nowrap;
    padding: var(--uui-spacing-0-5) var(--uui-spacing-2);
    border: 1px solid var(--pcu-write-line);
    border-radius: var(--uui-radius-sm);
    color: var(--pcu-write-ink);
    background: var(--uui-bg-primary);
    font-size: var(--uui-text-xs-font-size);
    font-weight: 600;
}

.pcu-planning-write-plan__why {
    grid-column: 2 / -1;
    color: var(--uui-text-secondary);
    line-height: 1.5;
}

.pcu-planning-write-plan__why b {
    color: var(--pcu-write-ink);
    font-weight: 600;
}

/* ------------------------------------------------------------- Folded list */

.pcu-planning-write-plan__rest {
    display: grid;
    gap: var(--uui-spacing-3);
    padding-block-start: var(--uui-spacing-4);
    border-block-start: 1px solid var(--uui-border-secondary);
}

.pcu-planning-write-plan__root[data-verdict="clear"] .pcu-planning-write-plan__rest {
    padding-block-start: 0;
    border-block-start: 0;
}

.pcu-planning-write-plan__rest-line {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-3);
}

.pcu-planning-write-plan__rest-line p {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.pcu-planning-write-plan__okdot {
    inline-size: var(--uui-spacing-3);
    block-size: var(--uui-spacing-3);
    border-radius: var(--uui-radius-full);
    background: var(--pcu-write-ok-ink);
    flex-shrink: 0;
}

.pcu-planning-write-plan__toggle {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--uui-text-brand-secondary);
    font-family: inherit;
    cursor: pointer;
}

.pcu-planning-write-plan__toggle:hover {
    text-decoration: underline;
}

/* Two columns, one line per course, the forecast sentence as a tooltip. Scrolls past a screen. */
/* Two columns at most: on a wide stage `auto-fit` made six, and every course name was cut. */
.pcu-planning-write-plan__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--uui-spacing-6);
    margin: 0;
    padding: 0;
    list-style: none;
    max-block-size: 60vh;
    overflow-y: auto;
}

.pcu-planning-write-plan__row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--uui-spacing-3);
    padding: var(--uui-spacing-1) 0;
    border-block-end: 1px dashed var(--uui-border-secondary);
    font-size: var(--uui-text-sm-font-size);
    color: var(--uui-text-secondary);
    cursor: default;
}

.pcu-planning-write-plan__row:focus-visible {
    outline: 2px solid var(--uui-border-brand);
    outline-offset: 2px;
    border-radius: var(--uui-radius-xs);
}

.pcu-planning-write-plan__row-name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcu-planning-write-plan__row em {
    font-style: normal;
    white-space: nowrap;
}

@container (max-width: 640px) {
    .pcu-planning-write-plan__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The tooltip floats above the row; the generated bubble is `flow`, the consumer overlays. */
.pcu-planning-write-plan__tip {
    position: absolute;
    z-index: 3;
    inset-block-start: 100%;
    inset-inline-start: 0;
}