/* PROMEMIO UI v3 components: application shell and page header. */

/* Application shell */
.pm-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: var(--color-bg);
}

.pm-sidebar {
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--sidebar-pad-block-start) var(--sidebar-pad-inline) var(--sidebar-pad-block-end);
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-line);
}

.pm-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

/* Brand */
.pm-brand {
    display: flex;
    align-items: center;
    margin: var(--brand-margin);
}

.pm-brand a {
    display: block;
    min-width: 0;
    border-radius: var(--radius-icon);
}

.logo {
    display: block;
    min-width: 0;
}

.pm-brand .logo {
    width: var(--brand-logo-width);
    height: auto;
}

.pm-brand-full {
    display: block;
    min-width: 0;
}

/* Inline circle mark taken from the PROMEMIO logo; only shown in the icon rail. */
.pm-brand-mark-svg {
    display: none;
}

.pm-brand-mark-svg .logo-mark-accent {
    fill: var(--color-accent);
}

.pm-brand-mark-svg .logo-mark-hands {
    fill: none;
    stroke: var(--color-on-accent);
    stroke-linecap: round;
    stroke-width: 9px;
}

.pm-brand-mark-svg .logo-mark-center {
    fill: var(--color-on-accent);
}

.logo .logo-text {
    fill: var(--color-text);
}

.logo .logo-accent {
    fill: var(--color-accent);
}

.logo .logo-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3px;
}

.logo .logo-line-thick {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 4px;
}

.logo .logo-hands {
    fill: none;
    stroke: var(--color-on-accent);
    stroke-linecap: round;
    stroke-width: 9px;
}

.logo .logo-center {
    fill: var(--color-on-accent);
}

/* Project switcher */
.pm-project-switcher {
    margin-bottom: var(--picker-margin-bottom);
}

.pm-project-picker {
    position: relative;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--field-gap);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.pm-project-picker:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

:root[data-contrast="high"] .pm-project-picker:focus-within {
    outline-width: 3px;
}

.pm-project-picker-value {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-project-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-project-picker .pm-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    color: var(--color-text-muted);
}

.pm-project-picker-mark {
    display: none;
    flex: 0 0 auto;
}

.pm-project-picker-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Navigation */
.pm-nav-label {
    margin: 0 var(--nav-item-gap) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pm-nav {
    display: grid;
    gap: var(--nav-gap);
}

.pm-nav a {
    min-height: var(--control-height);
    display: grid;
    grid-template-columns: var(--nav-icon-column) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--nav-item-gap);
    padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text-muted);
    text-decoration: none;
}

.pm-nav a:hover {
    color: var(--color-text);
    background: var(--color-hover);
    text-decoration: none;
}

.pm-nav a[aria-current="page"] {
    color: var(--color-text);
    background: var(--color-selected);
    font-weight: var(--weight-medium);
}

.pm-nav .pm-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-text-muted);
}

/* Account and logout */
.pm-sidebar-bottom {
    margin-top: auto;
}

.pm-account {
    margin-top: var(--space-3);
    padding: var(--account-pad);
    border-top: 1px solid var(--color-line);
}

.pm-account strong {
    display: block;
    font-weight: var(--weight-medium);
}

.pm-account span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.pm-account-avatar {
    display: none;
}

/* Top-bar account avatar and its menu. The avatar is interactive, so it keeps
   the letter circle and adds a secondary-button boundary and a chevron. */
.pm-avatar-button {
    position: relative;
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
}

.pm-avatar-button:hover {
    background: var(--color-subtle);
}

.pm-avatar-button:active {
    background: var(--color-selected);
}

.pm-avatar-circle {
    width: var(--topbar-avatar-size);
    height: var(--topbar-avatar-size);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-subtle);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.pm-avatar-chevron {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

/* Tooltip: hidden until its host is hovered or keyboard-focused. Shared by the
   top-bar avatar; the icon-rail labels use the same surface treatment. */
.pm-tooltip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* A trigger's tooltip is hidden while its menu is open (shared behaviour), so
   it never stays visible behind the menu surface. */
.pm-tooltip-host[aria-expanded="true"] > .pm-tooltip,
.pm-tooltip-host:has([data-ui-menu-trigger][aria-expanded="true"]) > .pm-tooltip {
    display: none;
}

.pm-tooltip-host:hover > .pm-tooltip,
.pm-tooltip-host:focus-visible > .pm-tooltip {
    position: absolute;
    z-index: 5;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    overflow: visible;
    clip: auto;
    background: var(--color-popover);
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-popover);
    white-space: nowrap;
}

.pm-tooltip--bottom {
    top: calc(100% + var(--space-2));
    inset-inline-end: 0;
}

/* Topbar */
.pm-topbar {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--topbar-gap);
    padding: 0 var(--topbar-pad-inline);
    border-bottom: 1px solid var(--color-line);
}

.pm-top-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.pm-menu-button {
    width: var(--control-height);
    height: var(--control-height);
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
}

.pm-menu-button:hover {
    color: var(--color-text);
    background: var(--color-subtle);
}

.pm-menu-button .pm-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.pm-active-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
}

.pm-active-timer:hover {
    background: var(--color-subtle);
    text-decoration: none;
}

.pm-active-timer .pm-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    color: var(--color-accent);
}

.pm-active-timer time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 47.999em) {
    .pm-active-timer-label { display: none; }
}
.pm-active-timer--compact .pm-active-timer-label { display: none; }

/* Content and page header */
.pm-content {
    /* Full-width page frame (layout-width rules, 2026-09-26): header and
       toolbars span the whole content area; each page constrains only what
       must be constrained (readable text, forms, list rows without columns). */
    width: 100%;
    padding: var(--content-pad-top) clamp(var(--content-pad-inline-min), 3vw, var(--content-pad-inline-max)) var(--content-pad-bottom);
}

.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-gap);
    margin-bottom: var(--header-margin);
}

.pm-header > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pm-header h1 {
    margin: 0;
    font-size: var(--text-xl);
    line-height: var(--line-height-title);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-title);
}

.pm-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
}

.pm-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Shared primitives used by the shell and page header */
.pm-button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--button-pad);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    max-width: 100%;
    white-space: normal;
    text-decoration: none;
}

.pm-button:hover {
    background: var(--color-subtle);
    text-decoration: none;
}

.pm-button.primary {
    color: var(--color-on-accent);
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.pm-button.primary:hover {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
}

.pm-button.ghost {
    color: var(--color-text-muted);
    border-color: transparent;
    background: transparent;
}

.pm-button .pm-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}

.pm-icon-button {
    width: var(--control-height);
    height: var(--control-height);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-icon);
    background: transparent;
    color: var(--color-text-muted);
}

.pm-icon-button:hover {
    color: var(--color-text);
    background: var(--color-subtle);
}

.pm-icon-button .pm-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.pm-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: var(--tag-height);
    padding: 0 var(--space-2);
    border-radius: var(--radius-tag);
    background: var(--color-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    width: fit-content;
    max-width: 100%;
    white-space: normal;
}

.pm-tag .pm-dot {
    margin-inline-end: var(--space-1);
}

.pm-tag strong {
    font-weight: var(--weight-medium);
}

.pm-tag.accent {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.pm-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--spalva, var(--color-project-graphite));
}

.spalva-rozine {
    --spalva: var(--color-project-mulberry);
}

.spalva-violetine {
    --spalva: var(--color-project-violet);
}

.spalva-zalia {
    --spalva: var(--color-project-pine);
}

.spalva-geltona {
    --spalva: var(--color-project-terracotta);
}

.spalva-melyna {
    --spalva: var(--color-project-harbor);
}

.spalva-raudona {
    --spalva: var(--color-danger);
}

.spalva-pilka {
    --spalva: var(--color-project-graphite);
}

.pm-muted {
    color: var(--color-text-muted);
}

.pm-small {
    font-size: var(--text-xs);
}

.pm-placeholder {
    margin: 0;
    color: var(--color-text-muted);
}

/* Compact icon rail: 48em to below 61.25em */
@media (min-width: 48em) and (max-width: 61.249em) {
    .pm-app {
        grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
    }

    .pm-sidebar {
        overflow: visible;
        padding-inline: var(--sidebar-rail-pad-inline);
    }

    /* Keep the desktop brand row height so the mark centres where the full
       logo sits (logo height = --brand-logo-width / 4 for the 1200x300 logo). */
    .pm-brand {
        justify-content: center;
        margin-inline: 0;
        min-height: calc(var(--brand-logo-width) / 4);
    }

    .pm-brand-full {
        display: none;
    }

    .pm-brand-mark-svg {
        display: block;
        width: var(--brand-mark-size);
        height: var(--brand-mark-size);
    }

    .pm-project-picker {
        justify-content: center;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .pm-project-picker:focus-within {
        outline: none;
    }

    .pm-project-picker:focus-within .pm-project-picker-mark {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    :root[data-contrast="high"] .pm-project-picker:focus-within .pm-project-picker-mark {
        outline-width: 3px;
    }

    .pm-project-picker-value {
        justify-content: center;
    }

    .pm-project-picker-mark {
        width: var(--control-height);
        height: var(--control-height);
        display: inline-grid;
        place-items: center;
        border-radius: 50%;
        background: var(--spalva, var(--color-project-graphite));
        color: var(--color-on-project);
        font-size: var(--text-base);
        font-weight: var(--weight-medium);
        line-height: 1;
    }

    .pm-project-picker-mark .pm-icon {
        width: var(--icon-size);
        height: var(--icon-size);
        color: inherit;
    }

    .pm-project-picker--all .pm-project-picker-mark {
        background: var(--color-surface);
        border: 1px solid var(--color-line-control);
        color: var(--color-text-muted);
    }

    .pm-project-picker > .pm-icon,
    .pm-project-picker .pm-dot,
    .pm-nav-label,
    .pm-account strong,
    .pm-account > span:not(.pm-account-avatar) {
        display: none;
    }

    .pm-project-picker-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .pm-project-picker:hover .pm-project-picker-name,
    .pm-project-picker:focus-within .pm-project-picker-name {
        position: absolute;
        inset-inline-start: calc(100% + var(--space-2));
        top: 50%;
        z-index: 5;
        width: auto;
        height: auto;
        margin: 0;
        padding: var(--space-1) var(--space-2);
        overflow: visible;
        clip: auto;
        transform: translateY(-50%);
        background: var(--color-popover);
        color: var(--color-text);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-small);
        box-shadow: var(--shadow-popover);
        white-space: nowrap;
    }

    .pm-nav a {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 0;
    }

    .pm-nav-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .pm-nav a:hover .pm-nav-text,
    .pm-nav a:focus-visible .pm-nav-text {
        position: absolute;
        inset-inline-start: calc(100% + var(--space-2));
        top: 50%;
        z-index: 5;
        width: auto;
        height: auto;
        margin: 0;
        padding: var(--space-1) var(--space-2);
        overflow: visible;
        clip: auto;
        transform: translateY(-50%);
        background: var(--color-popover);
        color: var(--color-text);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-small);
        box-shadow: var(--shadow-popover);
        white-space: nowrap;
    }

    .pm-account {
        padding-inline: 0;
        text-align: center;
    }

    .pm-account-avatar {
        width: var(--account-avatar-size);
        height: var(--account-avatar-size);
        display: inline-grid;
        place-items: center;
        margin-inline: auto;
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-text);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
    }
}

/* Mobile drawer */
.pm-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    padding: 0;
    border: 0;
    background: var(--color-overlay);
}

@media (max-width: 47.999em) {
    .pm-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-menu-button {
        display: inline-grid;
    }

    .pm-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 40;
        width: min(var(--drawer-width), calc(100vw - var(--space-7)));
        min-height: 0;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    .pm-sidebar[data-open="true"] {
        transform: translateX(0);
    }

    .pm-topbar {
        flex-wrap: wrap;
        padding-inline: var(--space-4);
    }

    .pm-top-actions {
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pm-content {
        padding-inline: var(--space-4);
    }

    .pm-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pm-header .pm-actions {
        width: 100%;
    }
}

@media (max-width: 23.999em) {
    .pm-topbar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
    .pm-top-actions { gap: var(--space-2); }
}

/* Buttons: danger and disabled variants */
.pm-button.danger {
    color: var(--color-danger);
    border-color: transparent;
    background: transparent;
}

.pm-button.danger:hover {
    background: var(--color-danger-bg);
    text-decoration: none;
}

.pm-button.danger-fill {
    color: var(--color-on-accent);
    border-color: var(--color-danger);
    background: var(--color-danger);
}

.pm-button.danger-fill:hover {
    border-color: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));
    background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));
}

.pm-button:disabled,
.pm-button[disabled] {
    color: var(--color-text-disabled);
    border-color: var(--color-line);
    background: var(--color-subtle);
    cursor: not-allowed;
}

.pm-button.ghost:disabled,
.pm-button.danger:disabled {
    border-color: transparent;
    background: transparent;
}

.pm-icon-button:disabled,
.pm-icon-button[disabled] {
    color: var(--color-text-disabled);
    background: transparent;
    cursor: not-allowed;
}

/* Labelled field, select, picker chip, search */
.pm-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.pm-input,
.pm-select,
.pm-textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    color: var(--color-text);
}

.pm-select {
    appearance: none;
    padding-right: var(--space-6);
}

.pm-textarea {
    min-height: var(--control-height);
    padding-block: var(--space-2);
    resize: vertical;
}

.pm-input:hover,
.pm-select:hover,
.pm-textarea:hover {
    border-color: var(--color-line-strong);
}

.pm-input:disabled,
.pm-select:disabled,
.pm-textarea:disabled {
    color: var(--color-text-disabled);
    background: var(--color-subtle);
    cursor: not-allowed;
}

.pm-input.is-error,
.pm-select.is-error,
.pm-textarea.is-error {
    border-color: var(--color-danger);
}

.pm-field-error {
    margin: var(--space-1) 0 0;
    color: var(--color-danger);
    font-size: var(--text-xs);
}

.pm-field-help {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.pm-field-wrap {
    min-width: 0;
}

/* Shared due-date shortcuts used by task and to-do editors. */
.pm-date-quick-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.pm-date-quick-picks .pm-button {
    min-height: var(--control-height-compact);
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
}

.pm-date-quick-picks .pm-button[aria-pressed="true"] {
    color: var(--color-text);
    background: var(--color-selected);
}

.pm-select-wrap {
    position: relative;
    display: block;
}

.pm-select-wrap .pm-icon {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.pm-field {
    min-height: var(--control-height);
    min-width: var(--field-min-width);
    display: inline-flex;
    align-items: center;
    gap: var(--field-gap);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
    color: var(--color-text);
    max-width: 100%;
    white-space: normal;
}

button.pm-field {
    justify-content: space-between;
    text-align: left;
}

.pm-field:hover {
    background: var(--color-subtle);
}

.pm-field .pm-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    color: var(--color-text-muted);
}

.pm-field.search {
    min-width: min(var(--field-search-min), 100%);
    flex: 1 1 var(--field-search-min);
    color: var(--color-text-muted);
}

.pm-search {
    position: relative;
    min-width: min(var(--field-search-min), 100%);
    max-width: var(--field-search-max);
    flex: 1 1 var(--field-search-min);
}

.pm-search .pm-input {
    padding-left: var(--space-6);
}

.pm-search .pm-icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

/* Checkbox */
.pm-check {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-check-input,
.pm-switch-input,
.pm-segmented-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pm-check-box {
    width: var(--check-size);
    height: var(--check-size);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-check);
    background: var(--color-surface);
    color: transparent;
}

.pm-check-box .pm-icon {
    width: var(--icon-size-check);
    height: var(--icon-size-check);
    stroke-width: 2.2;
}

.pm-check-input:checked + .pm-check-box {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.pm-check-input:focus-visible + .pm-check-box {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pm-check-input:disabled + .pm-check-box {
    border-color: var(--color-line);
    background: var(--color-subtle);
}

.pm-check-label {
    min-width: 0;
}

/* Segmented control */
.pm-segmented {
    min-width: 0;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0;
    padding: var(--segmented-pad);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-sidebar);
}

.pm-segmented-option {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.pm-segmented-option span {
    min-height: var(--control-height-compact);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--segmented-option-pad);
    border: 0;
    border-radius: var(--radius-segmented);
    background: transparent;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.pm-segmented-option input:checked + span {
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-segmented);
    font-weight: var(--weight-medium);
}

.pm-segmented-option input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    z-index: 1;
}

.pm-segmented-option input:disabled + span {
    color: var(--color-text-disabled);
    background: transparent;
    box-shadow: none;
}

/* Switch */
.pm-switch {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-switch-track {
    width: var(--switch-width);
    height: var(--switch-height);
    display: block;
    flex: 0 0 auto;
    padding: var(--switch-pad);
    border-radius: var(--radius-pill);
    background: var(--color-line-strong);
    transition: background .15s ease;
}

.pm-switch-track::after {
    content: "";
    display: block;
    width: var(--switch-thumb);
    height: var(--switch-thumb);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-switch-thumb);
    transition: transform .15s ease;
}

.pm-switch-input:checked + .pm-switch-track {
    background: var(--color-accent);
}

.pm-switch-input:checked + .pm-switch-track::after {
    transform: translateX(var(--switch-offset));
}

.pm-switch-input:focus-visible + .pm-switch-track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pm-switch-input:disabled + .pm-switch-track {
    opacity: .5;
}

/* Module panel */
.pm-panel {
    min-width: 0;
    padding: var(--panel-pad);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
}

.pm-panel-head {
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--panel-head-margin);
}

.pm-panel-head > * {
    min-width: 0;
}

.pm-panel-head h2 {
    margin: 0;
    font-size: var(--panel-title-font);
    line-height: var(--line-height-title-md);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-title-md);
}

.pm-panel-count {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.pm-panel-body {
    min-width: 0;
}

/* Bordered list and data row */
.pm-list {
    min-width: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}

.pm-list-plain {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.pm-row {
    position: relative;
    min-height: var(--row-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--row-gap);
    padding: var(--row-pad-block) var(--row-pad-inline);
    border-bottom: 1px solid var(--color-line);
}

.pm-row:not(.danger):not(:has(~ .pm-row)) {
    border-bottom: 0;
}

.pm-row > *,
.pm-row-main,
.pm-row-copy {
    min-width: 0;
}

.pm-row-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pm-row-copy strong {
    display: block;
    font-weight: var(--weight-medium);
}

.pm-row-copy .pm-small {
    display: block;
}

.pm-row-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.pm-row-meta > span:not(.pm-tag),
.pm-row-meta > time {
    white-space: nowrap;
}

.pm-row-actions {
    position: absolute;
    inset-inline-end: var(--row-pad-inline);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline-start: var(--space-2);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    opacity: 0;
    pointer-events: none;
}

.pm-row:hover .pm-row-actions,
.pm-row:focus-within .pm-row-actions {
    opacity: 1;
    pointer-events: auto;
}

:root[data-actions="always"] .pm-row-actions {
    position: static;
    transform: none;
    padding-inline-start: 0;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
}

.pm-row.danger {
    background: var(--color-danger-bg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 20%, var(--color-line));
    border-radius: var(--radius-danger-row);
}

.pm-row.danger .pm-row-meta {
    color: var(--color-danger);
}

.pm-row-time {
    width: var(--event-time-width);
    flex: 0 0 var(--event-time-width);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-row-schedule {
    grid-template-columns: var(--event-time-width) minmax(0, 1fr) auto;
    gap: var(--space-3);
    min-height: var(--event-min-height);
    padding: 0 var(--event-pad-inline);
    border-bottom: 0;
}

.pm-row-schedule .pm-row-main {
    display: contents;
}

.pm-row-schedule.current {
    margin-block: 2px;
    margin-inline: calc(-1 * var(--space-1));
    padding-inline: var(--event-current-pad);
    border-radius: var(--radius-control);
    background: var(--color-accent-bg);
}

.pm-row-schedule.current .pm-row-time {
    color: var(--color-accent);
}

.pm-row-title {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--weight-medium);
    text-align: left;
}

.pm-row-title:hover {
    text-decoration: underline;
}

/* Group label */
.pm-section-label {
    margin: var(--section-label-margin-top) var(--space-2) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pm-panel-body > .pm-section-label:first-of-type {
    margin-top: 0;
}

/* Neutral "Coming soon" state for modules that are not available yet. */
.pm-coming-soon {
    display: inline-flex;
    align-items: center;
    min-height: var(--tag-height);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

/* Filter bar */
.pm-toolbar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--toolbar-pad-block) var(--toolbar-pad-inline);
    margin-bottom: var(--toolbar-margin-bottom);
    background: var(--color-subtle);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}

.pm-filters {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pm-toolbar > .pm-filters {
    flex: 1 1 auto;
}

.pm-toolbar > .pm-filters + .pm-filters {
    flex: 0 0 auto;
}

.pm-link {
    color: var(--color-accent);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

/* Settings-style sub-navigation */
.pm-subnav {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    align-self: start;
    position: sticky;
    top: var(--space-5);
}

.pm-subnav-link {
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: var(--radius-icon);
    color: var(--color-text-muted);
    text-decoration: none;
}

.pm-subnav-link:hover {
    color: var(--color-text);
    background: var(--color-hover);
    text-decoration: none;
}

.pm-subnav-link[aria-current="true"] {
    color: var(--color-text);
    background: var(--color-selected);
    font-weight: var(--weight-medium);
}

/* Menu */
.pm-menu-wrap {
    position: relative;
    display: inline-flex;
}

.pm-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    inset-inline-end: 0;
    z-index: 20;
    min-width: min(var(--menu-min-width), calc(100vw - 2 * var(--space-2)));
    max-width: calc(100vw - 2 * var(--space-2));
    padding: var(--space-1);
    background: var(--color-popover);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-popover);
}

/* Menu opened on a trigger near the start of a row (the note meta project),
   so it stays inside the viewport instead of extending past the left edge
   (the reference's .pm-menu.start). */
.pm-menu.start {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

.pm-menu-item {
    width: 100%;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
}

.pm-menu-item:hover,
.pm-menu-item:focus-visible {
    background: var(--color-hover);
    text-decoration: none;
}

.pm-menu-item.danger {
    color: var(--color-danger);
}

/* The check marks the current choice (for example the note's project); it is a
   second signal next to aria-checked and never the only one. It sits in a fixed
   slot at the start of the item so dots and labels line up in one left-aligned
   column; the slot is reserved and empty when the item is not selected. */
.pm-menu-check {
    display: block;
    flex: 0 0 auto;
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-accent);
    visibility: hidden;
}

.pm-menu-item[aria-checked="true"] .pm-menu-check {
    visibility: visible;
}

/* Fixed media column: the project dot, or the empty slot that keeps the icons
   and labels of a menu that contains radios in the same left-aligned column. */
.pm-menu-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: var(--icon-size);
    height: var(--icon-size);
}

/* A mouse-opened menu keeps focus on its first item for arrow keys, but the
   ring stays hidden until the first key press (menu.js removes this class). */
.pm-menu.is-pointer-open .pm-menu-item:focus-visible {
    outline: none;
}

.pm-menu-label {
    padding: var(--space-1) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.pm-menu-divider {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--color-line);
}

/* Dialog */
.pm-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--color-overlay);
}

.pm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 61;
    width: min(var(--dialog-width-custom, var(--dialog-width)), calc(100vw - 2 * var(--space-5)));
    max-height: min(var(--dialog-max-height), calc(100dvh - var(--space-7)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--color-popover);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-dialog);
    box-shadow: var(--shadow-popover);
    transform: translate(-50%, -50%);
}

/* The dialog form is a layout-transparent wrapper so the head, body and footer
   remain the dialog grid rows while the whole dialog is one form. */
.pm-dialog-form {
    display: contents;
}

.pm-dialog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
    padding: var(--dialog-head-pad);
    border-bottom: 1px solid var(--color-line);
}

.pm-dialog-head h2 {
    margin: 0;
    font-size: var(--panel-title-font);
    line-height: var(--line-height-title-md);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-title-md);
}

.pm-dialog-head p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
}

.pm-dialog-body {
    min-width: 0;
    overflow-y: auto;
    padding: var(--dialog-body-pad);
}

.pm-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--dialog-foot-pad);
    border-top: 1px solid var(--color-line);
    background: var(--color-subtle);
    flex-wrap: wrap;
}

@media (max-width: 47.999em) {
    .pm-dialog {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        transform: none;
        border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
    }

    .pm-dialog-head {
        padding: var(--dialog-sheet-head-pad);
    }

    .pm-dialog-body {
        padding: var(--dialog-sheet-body-pad);
    }

    .pm-dialog-foot {
        padding: var(--dialog-sheet-foot-pad);
        padding-bottom: calc(.875rem + env(safe-area-inset-bottom));
    }
}

/* Inline edit */
.pm-inline-edit {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-subtle);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}

.pm-inline-edit-fields {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
}

.pm-inline-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.pm-inline-edit-danger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-inline-edit-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Status message */
.pm-status {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
}

.pm-status-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.pm-status-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.pm-status-info {
    background: var(--color-subtle);
    color: var(--color-text-muted);
}

/* Empty state */
.pm-empty {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.pm-empty p {
    margin: 0;
    color: var(--color-text-muted);
}

/* Archived section */
.pm-archived {
    margin-top: var(--space-5);
}

.pm-archived summary {
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.pm-archived[open] summary {
    margin-bottom: var(--space-2);
}

/* Keyboard reorder */
.pm-reorder-handle {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.pm-reorder-status {
    min-height: var(--reorder-status-min-height);
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Module grid (Today layout algorithm: wide spans, two halves share a row) */
.pm-modules {
    min-width: 0;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: stretch;
    row-gap: var(--module-gap);
    column-gap: var(--split-gap);
}

/* Wide screens add columns instead of widening two (adaptive dashboard grid):
   a half module takes one of four columns, a wide module two. */
@media (min-width: 110em) {
    .pm-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pm-modules > .pm-module:not(.pm-module-wide) { grid-column: span 1; }
    .pm-modules > .pm-module-wide { grid-column: span 2; }
    .pm-modules > .pm-module-fill.pm-module-wide { grid-column: 1 / -1; }
    .pm-modules > .pm-module-fill.pm-module-half { grid-column: span 2; }
}

.pm-module {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pm-module > * {
    min-width: 0;
    flex: 1 1 auto;
}

.pm-module-wide {
    grid-column: 1 / -1;
}

/* Today schedule rows are a borderless stack with a 4px rhythm */
.pm-module[data-module-id="schedule_today"] .pm-list-plain {
    display: grid;
    gap: var(--space-1);
}

/* Timer */
.pm-timer {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--timer-gap);
    padding: var(--timer-pad);
    background: var(--color-accent-bg);
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
    border-radius: var(--radius-panel);
}

.pm-timer-main {
    min-width: 0;
    display: grid;
    gap: 0;
}

.pm-timer-comment {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--timer-input-gap);
    min-height: var(--timer-input-min-height);
    padding: 0 var(--timer-input-pad);
    background: var(--color-surface);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-timer-input);
    color: var(--color-text-muted);
    font-size: var(--timer-input-font);
}

.pm-timer-comment:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

:root[data-contrast="high"] .pm-timer-comment:focus-within {
    outline-width: 3px;
}

.pm-timer-comment .pm-icon {
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    flex: 0 0 auto;
    color: var(--color-accent);
}

.pm-timer-comment input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: inherit;
}

.pm-timer-comment input:focus-visible {
    outline: none;
}

.pm-timer-filters {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--timer-input-gap);
    flex-wrap: wrap;
}

.pm-timer-manual-toggle {
    width: var(--timer-chip-height);
    height: var(--timer-chip-height);
    min-height: var(--timer-chip-height);
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-icon);
}

.pm-timer-manual-toggle .pm-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}

.pm-timer-manual {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pm-timer-manual[hidden] {
    display: none;
}

.pm-timer-manual .pm-field-wrap {
    flex: 1 1 var(--field-min-width);
}

.pm-timer-manual output {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-timer-time {
    min-width: var(--timer-time-min);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--play-size);
    align-items: center;
    gap: var(--timer-time-gap);
    font-size: var(--timer-elapsed-font);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-timer-elapsed {
    font-size: var(--timer-elapsed-font);
    font-weight: var(--weight-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-play {
    width: var(--play-size);
    height: var(--play-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--color-on-accent);
    background: var(--color-accent);
}

.pm-play:hover {
    background: var(--color-accent-hover);
}

.pm-play:active {
    background: var(--color-accent-pressed);
}

.pm-play .pm-icon {
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    stroke-width: 2;
}

/* Reflow the timer when text scaling makes the two columns too wide */
@container (max-width: 30em) {
    .pm-timer {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-timer-time {
        min-width: 0;
    }
}

/* Picker chip */
.pm-picker-field {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pm-picker {
    min-width: 0;
    max-width: 100%;
    min-height: var(--timer-chip-height);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--timer-chip-gap);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-control);
}

.pm-picker:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pm-picker select {
    min-width: 0;
    max-width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 0;
}

.pm-picker select:focus-visible {
    outline: none;
}

.pm-picker-chevron {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    flex: 0 0 auto;
    color: var(--color-text-muted);
    pointer-events: none;
}

.pm-picker-create {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-picker-create[hidden] {
    display: none;
}

.pm-picker-create .pm-input {
    min-width: var(--field-min-width);
    width: auto;
}

.pm-tag .pm-accent-text {
    color: var(--color-accent);
    font-weight: var(--weight-medium);
}

/* No-JavaScript fallbacks: expose menu actions as static controls */
html:not(.js) .pm-menu-wrap {
    display: block;
}

html:not(.js) .pm-menu[hidden] {
    position: static;
    display: block;
    min-width: 0;
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html:not(.js) .pm-row-actions {
    opacity: 1;
}

html:not(.js) .pm-inline-edit[hidden] {
    display: block;
}

@media (max-width: 47.999em) {
    .pm-modules {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--module-gap);
    }

    .pm-module-wide {
        grid-column: auto;
    }

    .pm-timer {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--timer-gap);
    }

    .pm-timer-time {
        justify-content: space-between;
    }
}

@media (max-width: 47.999em) {
    .pm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-filters {
        width: 100%;
    }

    .pm-field {
        flex: 1 1 var(--field-mobile-basis);
    }

    .pm-field.search,
    .pm-search {
        min-width: 100%;
    }

    .pm-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--row-gap-compact);
    }

    .pm-row-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .pm-row-actions {
        position: static;
        transform: none;
        padding-inline-start: 0;
        background: transparent;
        opacity: 1;
        pointer-events: auto;
    }

    .pm-subnav {
        position: static;
        display: flex;
        flex-wrap: wrap;
    }

    .pm-subnav-link {
        flex: 0 0 auto;
    }
}

@media (max-width: 27.499em) {
    .pm-panel {
        padding: var(--panel-pad-compact);
    }
}

/* List tables (decision 0057, design docs/design/references/promemio-lists-v1.html).
   A list whose rows hold several values shares one grid between a visual header
   row and its rows, so every value sits under its label. Pages define the grid
   (.pm-cols-*) and fold columns with container queries on .pm-table. The header
   is visual only; rows keep list semantics and their own accessible text. */
.pm-table { min-width: 0; container: pm-list / inline-size; }
.pm-table-head {
    min-height: var(--control-height-compact);
    padding: 0 var(--row-pad-inline);
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.pm-table-head > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-table .pm-row > * { min-width: 0; }
.pm-table .pm-row:hover { background: var(--color-hover); }
.pm-table .pm-row.danger:hover { background: var(--color-danger-bg); }
.pm-cell-text { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-cell-empty { color: var(--color-text-disabled); }
.pm-cell-stack { display: none; flex-wrap: wrap; gap: 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.pm-col-date, .pm-col-clock, .pm-col-duration { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-col-duration { text-align: right; }
.pm-col-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
/* Inside a column the row actions are an ordinary cell, still shown on hover/focus. */
.pm-col-actions .pm-row-actions { position: static; transform: none; padding-inline-start: 0; background: transparent; }

/* Forgotten-timer notice (decision 0062) */
.pm-active-timer.is-long { border-color: var(--color-danger); color: var(--color-danger); }
.pm-active-timer.is-long .pm-icon { color: var(--color-danger); }
.pm-long-timer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    background: var(--color-danger-bg);
}
.pm-long-timer[hidden] { display: none; }
.pm-long-timer-copy { min-width: 0; flex: 1 1 18rem; display: flex; align-items: flex-start; gap: var(--space-3); }
.pm-long-timer-copy > .pm-icon { flex: none; width: var(--icon-size); height: var(--icon-size); margin-top: var(--space-1); color: var(--color-danger); }
.pm-long-timer h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--line-height-title-md); }
.pm-long-timer p { margin: var(--space-1) 0 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pm-long-timer-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0; }
.pm-long-timer-field { display: grid; gap: var(--space-1); min-width: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pm-long-timer-field .pm-input { min-width: 0; }
.pm-long-timer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pm-long-timer-actions form { margin: 0; }