/* Plan templates: the Start from a template picker on Plan home
   (app/views/plan/template-picker.php) and the My templates page
   (app/views/plan/templates.php), and the one rule the save dialog adds to
   ws_modal and ws_form_row. Tokens only. */

/* ---- the picker -------------------------------------------------------- */

.pt-tabs { margin: 0 0 var(--space-4); }
/* The inactive tab keeps its space (visibility, not display) so switching
   never resizes the dialog; hidden still takes it out of the tab order and
   the accessibility tree. */
.pt-panels { display: grid; }
.pt-panels > .pt-panel {
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Buttons set their own visibility in their transition, so the descendants
   need the rule too; the script also marks the panel inert. */
.pt-panels > .pt-panel[hidden],
.pt-panels > .pt-panel[hidden] * { visibility: hidden !important; }

/* The picker runs near the window's full width rather than at a standard
   modal size: three cards across, about 320px each on a 1440 window.
   Scoped to this dialog, not a new global size. */
.ws-modal.pt-picker {
    width: min(1140px, calc((100vw - 2 * var(--space-8)) * 0.75));
    max-width: none;
}

/* Three across on both tabs, skeletons included. minmax(0, 1fr) keeps a long
   name from pushing a column wider than its share. */
.pt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

/* More than three: one row of three, the rest scrolled in a page at a time.
   The track's padding and matching negative margin keep card shadows and
   focus rings from being clipped by the scroll box. */
.pt-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
}
.pt-carousel__track::-webkit-scrollbar { display: none; }
.pt-carousel__track > * { scroll-snap-align: start; }
.pt-carousel__track:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}
.pt-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* The site-wide 1em icon rule leaves a chevron too small to aim at. */
.pt-carousel__btn .icon { width: var(--space-5); height: var(--space-5); }
.pt-carousel__count {
    margin-right: var(--space-2);
    font-size: var(--text-meta);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.pt-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.pt-card.is-dimmed { opacity: 0.5; }
.pt-card--skeleton { gap: var(--space-3); }

.pt-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}
.pt-card__name {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--text-dark);
}
.pt-card__chip { flex-shrink: 0; white-space: nowrap; }
.pt-card__job {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    color: var(--text-body);
}
.pt-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin: 0;
    font-size: var(--text-meta);
    font-weight: var(--font-medium);
    color: var(--text-muted);
}
.pt-card__meta .icon { width: var(--space-4); height: var(--space-4); flex-shrink: 0; }

.pt-card__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--space-2);
}

.pt-status {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-5) 0 0;
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    color: var(--phase-learn-dark);
}
.pt-status[hidden] { display: none; }

.pt-soon-cta { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
/* In the picker the tab is as tall as the starters, so the button sits at its foot. */
.pt-panel > .pt-soon-cta { margin-top: auto; padding-top: var(--space-4); }

/* ---- the My templates page --------------------------------------------- */

.pt-page { margin-top: var(--space-6); }

.pt-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}
.pt-page__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
}

.pt-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
}
.pt-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}
.pt-row + .pt-row { border-top: 1px solid var(--gray-100); }
.pt-row.is-confirming { background: var(--bg-paper); }

.pt-row__body { flex: 1; min-width: 0; }
.pt-row__name {
    margin: 0;
    font-size: var(--text-ui);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
}
.pt-row__meta,
.pt-row__outline {
    margin: var(--space-1) 0 0;
    font-size: var(--text-meta);
    color: var(--text-muted);
}
.pt-row__outline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-row__acts {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
}

/* The inline delete confirmation, drawn as the workshop card menu's is
   (app/css/workshop-list.css, .wl-menu__pop / .wl-menu__confirm). */
.pt-del { position: relative; display: inline-flex; }
.pt-del__btn { color: var(--color-error-dark); }
.pt-del__pop {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: var(--z-dropdown);
    display: block;
    width: 288px;
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.pt-del__pop[hidden] { display: none; }
.pt-del__text {
    display: block;
    margin: 0 0 var(--space-3);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    color: var(--text-body);
}
.pt-del__acts {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.pt-page--empty {
    padding-bottom: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
}
.pt-empty-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .pt-row { flex-direction: column; align-items: stretch; }
    .pt-row__acts { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- the save dialog --------------------------------------------------- */

/* Replace it, inside the name-taken error: a button, so the keyboard reaches
   it, drawn as the link it reads as. */
.pt-save-replace {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--font-semibold);
    color: var(--phase-learn-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pt-save-replace:hover { color: var(--text-dark); }
.pt-save-replace:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Coming soon (before migration 015), in the brand red rather than the info
   blue: Red Unification leaves no blue notice on a Plan screen. */
.ws-alert.pt-soon {
    background: var(--phase-learn-light);
    border: 1px solid var(--phase-learn);
    color: var(--phase-learn-dark);
}
.ws-alert.pt-soon .ws-alert__icon { color: var(--phase-learn); }