/* Product aliases and layout. Shared values and controls are generated from the company release. */
@font-face {
    font-family: Inter;
    src: url('../fonts/InterVariable.woff2?v=1.0.2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Inter;
    src: url('../fonts/InterVariable-Italic.woff2?v=1.0.2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
:root {
    --plnr-surface-subtle: var(--plnr-surface-raised);
    --plnr-text-muted: var(--plnr-muted);
    --plnr-primary: var(--plnr-accent);
    --plnr-primary-hover: var(--plnr-accent);
    --plnr-primary-soft: var(--plnr-accent-soft);
    --plnr-danger-soft: color-mix(in srgb, var(--plnr-danger) 10%, var(--plnr-surface));
    --plnr-warning-soft: color-mix(in srgb, var(--plnr-warning) 10%, var(--plnr-surface));
    --plnr-success-soft: color-mix(in srgb, var(--plnr-success) 10%, var(--plnr-surface));
    --plnr-shadow-soft: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--plnr-bg);
    color: var(--plnr-text);
    font-family: var(--plnr-font-ui);
    font-size: var(--plnr-type-body);
    line-height: 1.5;
}

body.plnr-scroll-lock {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

select,
textarea {
    color: inherit;
}

textarea {
    resize: vertical;
}

button:disabled {
    cursor: not-allowed;
}

.plnr-body {
    min-height: 100vh;
}

.plnr-container {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
}

.plnr-app-shell {
    min-height: 100vh;
    background: var(--plnr-bg);
    display: grid;
    grid-template-columns: var(--plnr-size-navigation) minmax(0, 1fr);
}

.plnr-main {
    padding-block: 2rem;
}

.plnr-app-header {
    background: var(--plnr-surface);
    border-bottom: 1px solid var(--plnr-border);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-app-header__inner {
    padding-block: 1.5rem;
}

.plnr-page-title {
    margin: 0;
    font-size: var(--plnr-type-heading);
    font-weight: var(--plnr-weight-strong);
    line-height: 1.3;
}

.plnr-page-heading {
    display: grid;
    gap: 0.25rem;
}

.plnr-page-subtitle {
    margin: 0;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-card {
    background: var(--plnr-surface);
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-card__body {
    padding: 1.5rem;
}

.plnr-card-stack {
    display: grid;
    gap: 1.5rem;
}

.plnr-card--narrow {
    max-width: 42rem;
}

.plnr-guest-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.plnr-auth-logo {
    margin-bottom: 1.5rem;
}

.plnr-auth-card {
    width: min(100%, 28rem);
    padding: 1.5rem;
    background: var(--plnr-surface);
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    box-shadow: none;
}

.plnr-logo {
    display: block;
    width: auto;
    height: 2.25rem;
    fill: var(--plnr-primary);
}

.plnr-logo--large {
    height: 5rem;
}

.plnr-welcome-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.plnr-welcome-header {
    width: min(100% - 2rem, 64rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.5rem;
}

.plnr-welcome-nav {
    display: flex;
    justify-content: flex-end;
}

.plnr-brand-link {
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-welcome-main {
    flex: 1;
    display: flex;
    align-items: center;
}

.plnr-welcome-section {
    width: min(100% - 2rem, 64rem);
    margin-inline: auto;
    padding-block: 4rem;
}

.plnr-welcome-copy {
    max-width: 42rem;
}

.plnr-kicker {
    margin: 0 0 1rem;
    color: var(--plnr-accent);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-welcome-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    font-weight: var(--plnr-weight-strong);
}

.plnr-welcome-text {
    max-width: 36rem;
    margin: 1.5rem 0 0;
    color: var(--plnr-text-muted);
    font-size: 1.125rem;
    line-height: 1.75;
}

.plnr-nav {
    background: var(--plnr-surface);
    border-bottom: 1px solid var(--plnr-border);
}

.plnr-nav__bar {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plnr-nav__primary,
.plnr-nav__brand,
.plnr-nav__links,
.plnr-nav__account {
    display: flex;
    align-items: center;
}

.plnr-nav__links {
    gap: 2rem;
    margin-inline-start: 2.5rem;
    align-self: stretch;
}

.plnr-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 4rem;
    border-bottom: 2px solid transparent;
    color: var(--plnr-text-muted);
    text-decoration: none;
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-nav-link:hover,
.plnr-nav-link:focus,
.plnr-nav-link--active {
    color: var(--plnr-text);
    border-bottom-color: var(--plnr-primary);
}

.plnr-account-button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--plnr-radius-sm);
    background: var(--plnr-surface);
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-account-button:hover,
.plnr-account-button:focus {
    color: var(--plnr-text);
    background: var(--plnr-surface-subtle);
}




.plnr-menu-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.plnr-nav__hamburger {
    display: none;
}

.plnr-responsive-menu {
    display: none;
    border-top: 1px solid var(--plnr-border);
}

.plnr-responsive-menu--open {
    display: block;
}

.plnr-responsive-menu__links {
    padding-block: 0.5rem;
}

.plnr-responsive-menu__account {
    padding-block: 1rem;
    border-top: 1px solid var(--plnr-border);
}

.plnr-responsive-menu__user {
    padding-inline: 1rem;
}

.plnr-responsive-menu__name {
    font-weight: var(--plnr-weight-strong);
}

.plnr-responsive-menu__email {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-responsive-menu__actions {
    margin-top: 0.75rem;
}

.plnr-responsive-nav-link {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border-inline-start: 4px solid transparent;
    color: var(--plnr-text-muted);
    text-align: start;
    text-decoration: none;
    font-weight: var(--plnr-weight-strong);
}

.plnr-responsive-nav-link:hover,
.plnr-responsive-nav-link:focus,
.plnr-responsive-nav-link--active {
    color: var(--plnr-text);
    background: var(--plnr-surface-subtle);
    border-inline-start-color: var(--plnr-primary);
}

.plnr-dropdown {
    position: relative;
}

.plnr-dropdown-panel {
    position: absolute;
    z-index: 50;
    margin-top: 0.5rem;
    border-radius: var(--plnr-radius-sm);
    box-shadow: var(--plnr-shadow);
}

.plnr-dropdown-panel--right {
    inset-inline-end: 0;
    transform-origin: top right;
}

.plnr-dropdown-panel--left {
    inset-inline-start: 0;
    transform-origin: top left;
}

.plnr-dropdown-panel--top {
    transform-origin: top;
}

.plnr-dropdown-panel--width-48 {
    width: 12rem;
}

.plnr-dropdown-content {
    overflow: hidden;
    padding-block: 0.25rem;
    background: var(--plnr-surface);
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-sm);
}

.plnr-dropdown-link {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    color: var(--plnr-text-muted);
    text-align: start;
    text-decoration: none;
    font-size: var(--plnr-type-body);
}

.plnr-dropdown-link:hover,
.plnr-dropdown-link:focus {
    color: var(--plnr-text);
    background: var(--plnr-surface-subtle);
}

.plnr-form-stack {
    display: grid;
    gap: var(--plnr-space-4);
}







.plnr-input--full {
    width: 100%;
}

.plnr-input--modal {
    width: min(100%, 24rem);
}



.plnr-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.plnr-form-actions--end {
    justify-content: flex-end;
}

.plnr-form-actions--between {
    justify-content: space-between;
}










.plnr-button-offset-start {
    margin-inline-start: 0.75rem;
}

.plnr-link {
    color: var(--plnr-primary);
    text-underline-offset: 0.25rem;
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-link:hover,
.plnr-link:focus {
    color: var(--plnr-primary-hover);
}

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

.plnr-link-button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

.plnr-link-button--inline {
    padding: 0;
}

.plnr-link-button--full {
    width: 100%;
}

.plnr-copy {
    margin: 0 0 1rem;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-section {
    display: grid;
    gap: 1.5rem;
}

.plnr-section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-section-description {
    margin: 0.25rem 0 0;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-error-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--plnr-danger);
    font-size: var(--plnr-type-body);
}

.plnr-error-list li + li {
    margin-top: 0.25rem;
}

.plnr-status {
    margin-bottom: 1rem;
    color: var(--plnr-success);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-action-message {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-verification-status {
    margin-bottom: 1rem;
    color: var(--plnr-success);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-alert {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-sm);
    background: var(--plnr-surface-subtle);
    color: var(--plnr-text);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-alert--success {
    background: var(--plnr-success-soft);
    border-color: color-mix(in srgb, var(--plnr-success) 35%, var(--plnr-surface));
    color: var(--plnr-success);
}

.plnr-alert--warning {
    background: var(--plnr-warning-soft);
    border-color: color-mix(in srgb, var(--plnr-warning) 35%, var(--plnr-surface));
    color: var(--plnr-warning);
}

.plnr-alert--danger {
    background: var(--plnr-danger-soft);
    border-color: color-mix(in srgb, var(--plnr-danger) 35%, var(--plnr-surface));
    color: var(--plnr-danger);
}

.plnr-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.plnr-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.625rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--plnr-radius-control);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    line-height: 1;
    white-space: nowrap;
}

.plnr-badge--neutral {
    background: var(--plnr-surface-subtle);
    border-color: var(--plnr-border);
    color: var(--plnr-text-muted);
}

.plnr-badge--success {
    background: var(--plnr-success-soft);
    border-color: color-mix(in srgb, var(--plnr-success) 35%, var(--plnr-surface));
    color: var(--plnr-success);
}

.plnr-badge--warning {
    background: var(--plnr-warning-soft);
    border-color: color-mix(in srgb, var(--plnr-warning) 35%, var(--plnr-surface));
    color: var(--plnr-warning);
}

.plnr-badge--danger {
    background: var(--plnr-danger-soft);
    border-color: color-mix(in srgb, var(--plnr-danger) 35%, var(--plnr-surface));
    color: var(--plnr-danger);
}

.plnr-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-subtle);
}

.plnr-tab {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--plnr-radius-sm);
    background: transparent;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-tab:hover,
.plnr-tab:focus {
    color: var(--plnr-text);
}

.plnr-tab:focus {
    outline: var(--plnr-stroke-focus) solid var(--plnr-focus);
    outline-offset: var(--plnr-stroke-focus);
}

.plnr-tab--active {
    background: var(--plnr-surface);
    border-color: var(--plnr-border);
    color: var(--plnr-text);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-tab-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
}

.plnr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--plnr-type-body);
}

.plnr-table th,
.plnr-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--plnr-border);
    text-align: start;
    vertical-align: middle;
}

.plnr-table th {
    background: var(--plnr-surface-subtle);
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    text-transform: uppercase;
}

.plnr-table tbody tr:last-child td {
    border-bottom: 0;
}

.plnr-table tbody tr:hover td {
    background: var(--plnr-surface-raised);
}

.plnr-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.plnr-metric-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
}

.plnr-metric-card span {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    text-transform: uppercase;
}

.plnr-metric-card strong {
    font-size: var(--plnr-type-title);
    line-height: 1.1;
}

.plnr-metric-card em {
    color: var(--plnr-success);
    font-size: var(--plnr-type-control);
    font-style: normal;
    font-weight: var(--plnr-weight-strong);
}

.plnr-activity-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-activity-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plnr-activity-list__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: var(--plnr-radius-control);
    background: var(--plnr-primary);
}

.plnr-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px dashed var(--plnr-border-strong);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-raised);
}

.plnr-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-primary-soft);
    color: var(--plnr-primary);
}

.plnr-empty-state h5,
.plnr-empty-state p {
    margin: 0;
}

.plnr-empty-state h5 {
    font-size: 1rem;
}

.plnr-empty-state p {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-loading-demo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.plnr-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--plnr-border);
    border-top-color: var(--plnr-primary);
    border-radius: var(--plnr-radius-control);
    animation: plnr-spin 800ms linear infinite;
}

.plnr-skeleton-stack {
    display: grid;
    gap: 0.625rem;
}

.plnr-skeleton {
    display: block;
    width: 72%;
    height: 0.75rem;
    border-radius: var(--plnr-radius-control);
    background: var(--plnr-surface-raised);
    background-size: 200% 100%;
    animation: plnr-skeleton 1300ms ease-in-out infinite;
}

.plnr-skeleton--wide {
    width: 100%;
}

.plnr-skeleton--short {
    width: 44%;
}

.plnr-prose {
    padding: 1.5rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
    color: var(--plnr-text);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-prose > *:first-child {
    margin-top: 0;
}

.plnr-prose > *:last-child {
    margin-bottom: 0;
}

.plnr-prose h1,
.plnr-prose h2,
.plnr-prose h3 {
    margin: 2rem 0 0.75rem;
    line-height: 1.2;
}

.plnr-prose h1 {
    font-size: var(--plnr-type-title);
}

.plnr-prose h2 {
    font-size: 1.125rem;
}

.plnr-prose h3 {
    font-size: 1rem;
}

.plnr-prose p,
.plnr-prose li {
    color: var(--plnr-text-muted);
    font-size: 0.9375rem;
}

.plnr-prose ul,
.plnr-prose ol {
    padding-inline-start: 1.25rem;
}

.plnr-prose li + li {
    margin-top: 0.375rem;
}

.plnr-prose code {
    padding: 0.125rem 0.25rem;
    border-radius: var(--plnr-radius-control);
    background: var(--plnr-surface-subtle);
    color: var(--plnr-text);
    font-size: 0.875em;
}

.plnr-prose pre {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-raised);
    color: var(--plnr-text);
}

.plnr-prose pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

.plnr-operations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    overflow-wrap: anywhere;
}

.plnr-operations__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.plnr-operations__tabs {
    min-width: 0;
    overflow-x: auto;
}

.plnr-operations__email-preview {
    display: block;
    width: 100%;
    min-height: 700px;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
}

.plnr-operations__table {
    min-width: 960px;
}

.plnr-operations__tabs .plnr-tab {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
}

.plnr-operations-summary-grid,
.plnr-operations-link-grid,
.plnr-operations-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

.plnr-operations-summary-card,
.plnr-operations-link-card,
.plnr-operations-check-card {
    padding: 1rem;
}

.plnr-operations-summary-card {
    display: grid;
    gap: 0.375rem;
}

.plnr-operations-summary-card__label,
.plnr-operations-link-card__meta {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    letter-spacing: 0;
    text-transform: uppercase;
}

.plnr-operations-summary-card__value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-operations-link-card {
    display: grid;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.plnr-operations-link-card:hover,
.plnr-operations-link-card:focus {
    border-color: var(--plnr-border-strong);
    box-shadow: var(--plnr-shadow);
    transform: translateY(-1px);
}

.plnr-operations-link-card__title {
    font-weight: var(--plnr-weight-strong);
}

.plnr-operations-link-card__description,
.plnr-operations-check-card__detail {
    margin: 0;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-operations-check-card {
    display: grid;
    gap: 0.75rem;
}

.plnr-operations-check-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.plnr-operations-check-card__title,
.plnr-operations-check-card__value {
    margin: 0;
}

.plnr-operations-check-card__title {
    font-size: 0.95rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-operations-check-card__value {
    font-size: 1rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-operations-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    letter-spacing: 0;
    text-transform: uppercase;
}

.plnr-operations-status::before {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--plnr-radius-control);
    background: var(--plnr-text-muted);
    content: "";
}

.plnr-operations-status--ok {
    color: var(--plnr-success);
}

.plnr-operations-status--ok::before {
    background: var(--plnr-success);
}

.plnr-operations-status--warning {
    color: var(--plnr-warning);
}

.plnr-operations-status--warning::before {
    background: var(--plnr-warning);
}

.plnr-operations-status--error {
    color: var(--plnr-danger);
}

.plnr-operations-status--error::before {
    background: var(--plnr-danger);
}

.plnr-operations-runtime-list {
    margin: 0;
}

.plnr-operations-runtime-list__item {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--plnr-border);
}

.plnr-operations-runtime-list__item:first-child {
    border-top: 0;
}

.plnr-operations-runtime-list dt {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-operations-runtime-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-design-system {
    display: grid;
    gap: 2rem;
}

.plnr-ds-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: 1.5rem;
    align-items: end;
    padding: 1.5rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-ds-hero__copy {
    max-width: 46rem;
}

.plnr-ds-hero__title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
}

.plnr-ds-hero__text {
    max-width: 42rem;
    margin: 0.75rem 0 0;
    color: var(--plnr-text-muted);
}

.plnr-ds-facts {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.plnr-ds-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-raised);
}

.plnr-ds-facts dt {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
    text-transform: uppercase;
}

.plnr-ds-facts dd {
    margin: 0;
    font-size: var(--plnr-type-control);
    font-weight: var(--plnr-weight-strong);
    text-align: end;
}

.plnr-ds-section {
    display: grid;
    gap: 1rem;
}

.plnr-ds-section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.plnr-ds-section__header .plnr-section-description {
    max-width: 34rem;
    text-align: end;
}

.plnr-ds-grid {
    display: grid;
    gap: 1rem;
}

.plnr-ds-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plnr-ds-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plnr-ds-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface);
    box-shadow: var(--plnr-shadow-soft);
}

.plnr-ds-panel__title {
    margin: 0 0 1rem;
    font-size: var(--plnr-type-body);
    font-weight: var(--plnr-weight-strong);
}

.plnr-ds-stack {
    display: grid;
    gap: 1rem;
}

.plnr-swatch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.plnr-swatch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-raised);
}

.plnr-swatch__sample {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--plnr-border-strong);
    border-radius: var(--plnr-radius-sm);
    background: var(--plnr-swatch-color);
}

.plnr-swatch strong,
.plnr-swatch span span {
    display: block;
}

.plnr-swatch strong {
    font-size: var(--plnr-type-control);
}

.plnr-swatch span span {
    overflow-wrap: anywhere;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
}

.plnr-type-specimen {
    display: grid;
    gap: 1rem;
}

.plnr-type-specimen > div {
    display: grid;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--plnr-border);
}

.plnr-type-specimen > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.plnr-type-specimen span,
.plnr-type-specimen small {
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
}

.plnr-type-specimen p {
    margin: 0;
    color: var(--plnr-text-muted);
}

.plnr-type-specimen__xl {
    font-size: var(--plnr-type-title);
    line-height: 1.1;
}

.plnr-type-specimen__lg {
    font-size: 1.125rem;
}

.plnr-spacing-scale {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
}

.plnr-spacing-step {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.625rem;
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-md);
    background: var(--plnr-surface-raised);
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-metadata);
    font-weight: var(--plnr-weight-strong);
}

.plnr-spacing-step__bar {
    width: calc(var(--plnr-space-size) * 4);
    min-width: 0.5rem;
    max-width: 100%;
    height: 0.5rem;
    border-radius: var(--plnr-radius-control);
    background: var(--plnr-primary);
}

.plnr-spacing-step code {
    overflow-wrap: anywhere;
    color: var(--plnr-text);
}

.plnr-ds-nav-sample {
    display: flex;
    gap: var(--plnr-space-4);
    border-bottom: 1px solid var(--plnr-border);
}

.plnr-ds-nav-sample .plnr-nav-link {
    min-height: 3rem;
}

.plnr-ds-modal-preview {
    position: static;
    width: 100%;
    margin: 0;
    box-shadow: var(--plnr-shadow-soft);
}

@keyframes plnr-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes plnr-skeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.plnr-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow-y: auto;
    padding: 1.5rem 1rem;
}

.plnr-modal-overlay {
    position: fixed;
    inset: 0;
}

.plnr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--plnr-backdrop);
}

.plnr-modal-card {
    position: relative;
    width: min(100%, 42rem);
    margin: 0 auto 1.5rem;
    overflow: hidden;
    background: var(--plnr-surface);
    border-radius: var(--plnr-radius-md);
    box-shadow: var(--plnr-shadow);
}

.plnr-modal-card--sm {
    max-width: 24rem;
}

.plnr-modal-card--md {
    max-width: 28rem;
}

.plnr-modal-card--lg {
    max-width: 32rem;
}

.plnr-modal-card--xl {
    max-width: 36rem;
}

.plnr-modal-card--2xl {
    max-width: 42rem;
}

.plnr-modal-form {
    padding: 1.5rem;
}

.plnr-modal-form .plnr-field {
    margin-top: 1.5rem;
}

.plnr-modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--plnr-weight-strong);
}

.plnr-modal-description {
    margin: 0.25rem 0 0;
    color: var(--plnr-text-muted);
    font-size: var(--plnr-type-body);
}

.plnr-modal-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.plnr-hidden {
    display: none !important;
}

.plnr-inline-flex {
    display: inline-flex !important;
}

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

.plnr-transition-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.plnr-transition-leave {
    transition: opacity 75ms ease-in, transform 75ms ease-in;
}

.plnr-transition-start {
    opacity: 0;
    transform: scale(0.95);
}

.plnr-transition-end {
    opacity: 1;
    transform: scale(1);
}

.plnr-fade-enter {
    transition: opacity 300ms ease-out;
}

.plnr-fade-leave {
    transition: opacity 200ms ease-in;
}

.plnr-fade-start {
    opacity: 0;
}

.plnr-fade-end {
    opacity: 1;
}

.plnr-modal-enter {
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.plnr-modal-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.plnr-modal-start {
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
}

.plnr-modal-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 1023px) {
    .plnr-ds-hero,
    .plnr-ds-grid--two,
    .plnr-ds-grid--three {
        grid-template-columns: 1fr;
    }

    .plnr-ds-section__header {
        align-items: start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .plnr-ds-section__header .plnr-section-description {
        text-align: start;
    }

    .plnr-spacing-scale {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .plnr-main {
        padding-block: 1.5rem;
    }

    .plnr-nav__links,
    .plnr-nav__account {
        display: none;
    }

    .plnr-nav__hamburger {
        display: flex;
        align-items: center;
    }

    .plnr-form-actions--between {
        align-items: flex-start;
        flex-direction: column;
    }

    .plnr-operations-runtime-list__item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .plnr-button-offset-start {
        margin-inline-start: 0;
    }

    .plnr-ds-hero,
    .plnr-ds-panel,
    .plnr-prose {
        padding: 1rem;
    }

    .plnr-ds-hero__title {
        font-size: 1.625rem;
    }

    .plnr-ds-facts div {
        align-items: start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .plnr-ds-facts dd {
        text-align: start;
    }

    .plnr-swatch-grid,
    .plnr-metric-grid {
        grid-template-columns: 1fr;
    }

    .plnr-spacing-scale {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plnr-tabs,
    .plnr-ds-nav-sample {
        overflow-x: auto;
    }
}

/* Authenticated workspace: original Planner shell and compact task rows. */
.plnr-app-shell__content {
    min-width: 0;
    min-height: calc(100vh - 16px);
    margin: 8px 8px 8px 0;
    background: var(--plnr-surface);
    border: 1px solid var(--plnr-border);
    border-radius: var(--plnr-radius-control);
}
.plnr-app-shell--collapsed { grid-template-columns: var(--plnr-size-rail) minmax(0, 1fr); }
.plnr-sidebar { padding: var(--plnr-space-3); min-width: 0; font-size: var(--plnr-type-body); }
.plnr-sidebar__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.plnr-sidebar__brand { font-size: 1.125rem; font-weight: var(--plnr-weight-strong); text-decoration: none; }
.plnr-sidebar__collapse { font-size: var(--plnr-type-title); }
.plnr-sidebar__group { display: grid; gap: 2px; border-bottom: 1px solid var(--plnr-border); padding-bottom: 16px; margin-bottom: 16px; }
.plnr-sidebar__label { margin: 0 6px 8px; color: var(--plnr-text-muted); font-size: var(--plnr-type-metadata); overflow-wrap: anywhere; }
.plnr-sidebar__link { display: flex; align-items: center; gap: var(--plnr-space-2); min-height: var(--plnr-size-target); padding: var(--plnr-space-1) var(--plnr-space-2); border-radius: var(--plnr-radius-control); text-decoration: none; font-size: var(--plnr-type-body); text-align: left; }
.plnr-sidebar__link:hover { background: var(--plnr-hover); }
.plnr-sidebar__link[aria-current="page"] { background: var(--plnr-accent-soft); color: var(--plnr-accent); }
.plnr-sidebar__link[aria-current="page"] { font-weight: var(--plnr-weight-strong); }
.plnr-sidebar__account { padding-top: 8px; }
.plnr-sidebar__mobile-bar, .plnr-sidebar .plnr-sidebar__close, .plnr-sidebar__backdrop { display: none; }
.plnr-app-shell--collapsed .plnr-sidebar { padding: 8px 4px; }
@media (min-width: 768px) {
    .plnr-app-shell--collapsed .plnr-sidebar__brand,
    .plnr-app-shell--collapsed .plnr-sidebar__label { display: none; }
    .plnr-app-shell--collapsed .plnr-sidebar__heading { justify-content: center; }
    .plnr-app-shell--collapsed .plnr-sidebar__link { justify-content: center; }
    .plnr-app-shell--collapsed .plnr-sidebar__link-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.plnr-skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--plnr-surface); color: var(--plnr-text); padding: 12px; }
.plnr-skip-link:focus { top: 8px; }
.plnr-workspace { width: min(100% - 4rem, 76rem); margin-inline: auto; display: grid; gap: 24px; font-size: var(--plnr-type-body); }
.plnr-workspace__header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.plnr-workspace__header .plnr-page-title { font-size: var(--plnr-type-heading); margin-block: 4px; }
.plnr-workspace__connection { margin: 0; color: var(--plnr-text-muted); font-size: var(--plnr-type-metadata); }
.plnr-workspace__columns { display: grid; gap: 32px; align-items: start; }
.plnr-workspace__columns--editing { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.plnr-workspace__content { min-width: 0; display: grid; gap: 24px; }
.plnr-workspace__capture { display: flex; align-items: end; gap: 12px; }
.plnr-workspace__capture .plnr-field { flex: 1; min-width: 0; }
.plnr-workspace__capture .plnr-button { flex-shrink: 0; }
.plnr-workspace__toolbar { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(120px, 180px); gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--plnr-border); }
.plnr-workspace__timer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--plnr-border-strong); border-radius: var(--plnr-radius-control); background: var(--plnr-primary-soft); }
.plnr-workspace__timer strong { font-size: var(--plnr-type-title); font-variant-numeric: tabular-nums; }
.plnr-task-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.plnr-task { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: var(--plnr-radius-control); }
.plnr-task:hover, .plnr-task:focus-within { border-color: var(--plnr-border); background: var(--plnr-surface-raised); }
.plnr-task__check { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 2px solid var(--plnr-border-strong); border-radius: var(--plnr-radius-control); background: transparent; color: var(--plnr-text); }
.plnr-task__check[aria-checked="true"] { background: var(--plnr-primary); }
.plnr-task__body { flex: 1; min-width: 0; }
.plnr-task__title { font-size: var(--plnr-type-body); text-align: left; overflow-wrap: anywhere; }
.plnr-task--completed .plnr-task__title { text-decoration: line-through; color: var(--plnr-text-muted); }
.plnr-task__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--plnr-text-muted); font-size: var(--plnr-type-metadata); }
.plnr-task__priority { color: var(--plnr-accent); }
.plnr-task__priority--high { color: var(--plnr-danger); }
.plnr-task__priority--medium { color: var(--plnr-warning); }
.plnr-task__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; flex-shrink: 0; font-size: var(--plnr-type-metadata); }
.plnr-task__menu { position: relative; }
.plnr-task__menu summary { cursor: pointer; padding-block: 8px; }
.plnr-task__menu-items { position: absolute; top: 100%; right: 0; z-index: 5; width: 160px; padding: 4px; border: 1px solid var(--plnr-border-strong); border-radius: var(--plnr-radius-control); background: var(--plnr-surface); }
.plnr-editor { min-width: 0; padding-left: 24px; border-left: 1px solid var(--plnr-border); }
.plnr-editor .plnr-form-actions > .plnr-field { flex: 1 1 120px; min-width: 0; }
.plnr-editor .plnr-section-title { margin: 0; }
.plnr-workspace .plnr-input { min-width: 0; width: 100%; }
.plnr-notes { min-width: 0; max-width: 100%; min-height: 8rem; padding: 12px; overflow-wrap: anywhere; }
.plnr-notes[contenteditable]:focus { outline: 2px solid var(--plnr-focus); outline-offset: 2px; }
.plnr-notes p, .plnr-notes li { color: var(--plnr-text); }
.plnr-notes p { white-space: pre-wrap; }
.plnr-notes a { color: var(--plnr-focus); }
.plnr-notes__toolbar { display: flex; flex-wrap: wrap; gap: 4px; }

.plnr-notes__toolbar [aria-pressed="true"] { border-color: var(--plnr-focus); background: var(--plnr-primary-soft); }
.plnr-context { gap: 6px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.plnr-context__swatch { width: 16px; height: 16px; flex-shrink: 0; }
.plnr-context__list { list-style: none; margin: 0 0 16px; padding: 0; }
.plnr-context__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--plnr-border); }
.plnr-context__row > div { min-width: 0; flex: 1; }
.plnr-context__row .plnr-field-note { margin: 0; }
.plnr-workspace .plnr-activity-list { overflow-wrap: anywhere; }
.plnr-task__title { padding: 0; }
.plnr-workspace__timer .plnr-field-note { margin: 0; }
.plnr-workspace__timer .plnr-task__title { margin: 4px 0; }
.plnr-workspace__timer > div { min-width: 0; }
.plnr-workspace__timer > button { flex-shrink: 0; }
@media (max-width: 1150px) {
    .plnr-workspace__columns--editing { grid-template-columns: minmax(0, 1fr); }
    .plnr-editor { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--plnr-border); }
}
@media (max-width: 767px) {
    .plnr-app-shell, .plnr-app-shell--collapsed { display: block; padding-top: 56px; }
    .plnr-app-shell__content { margin: 0 8px 8px; min-height: calc(100vh - 64px); }
    .plnr-sidebar__mobile-bar { position: fixed; inset: 0 0 auto; z-index: 20; height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--plnr-bg); font-weight: var(--plnr-weight-strong); }
    .plnr-sidebar { display: none; position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(280px, calc(100% - 48px)); overflow-y: auto; background: var(--plnr-bg); border-right: 1px solid var(--plnr-border); }
    .plnr-app-shell--menu-open .plnr-sidebar { display: block; }
    .plnr-app-shell--menu-open .plnr-sidebar__backdrop { display: block; position: fixed; inset: 0; z-index: 30; border: 0; background: var(--plnr-backdrop); }
    .plnr-sidebar__collapse { display: none; }
    .plnr-sidebar .plnr-sidebar__close { display: inline-flex; }
    .plnr-app-shell--collapsed .plnr-sidebar { padding: var(--plnr-space-3); }
    .plnr-app-shell--collapsed .plnr-sidebar__brand { display: block; }
    .plnr-app-shell--collapsed .plnr-sidebar__body { display: block; }
    .plnr-main { padding-block: 24px; }
    .plnr-workspace { width: calc(100% - 32px); gap: 24px; }
    .plnr-workspace__header { flex-direction: column; gap: 8px; }
    .plnr-workspace__capture { flex-wrap: wrap; }
    .plnr-workspace__capture .plnr-field { flex-basis: 100%; }
    .plnr-workspace__toolbar { grid-template-columns: minmax(0, 1fr); }
    .plnr-task { align-items: start; flex-wrap: wrap; padding-inline: 4px; }
    .plnr-task__check { margin-top: 2px; }
    .plnr-task__body { flex-basis: calc(100% - 40px); }
    .plnr-task__actions { margin-left: 36px; }
}

/* Product composition; shared controls keep their generated dimensions. */
.plnr-theme { display: grid; gap: var(--plnr-space-2); }
.plnr-theme__select { width: min(100%, 18rem); }
.plnr-sidebar__link .plnr-icon { color: var(--plnr-accent-muted); }
.plnr-sidebar__link[aria-current="page"] .plnr-icon { color: var(--plnr-accent); }
.plnr-sidebar__link-text { overflow-wrap: anywhere; }
.plnr-ds-controls { display: grid; gap: var(--plnr-space-4); }
.plnr-ds-controls__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--plnr-space-2); }
.plnr-settings { display: grid; gap: var(--plnr-space-8); max-width: 60rem; }
.plnr-settings > .plnr-section { gap: var(--plnr-space-4); }
@media (pointer: coarse) {
    .plnr-checkbox-label, .plnr-settings-row { min-height: 44px; }
}