/*
 * The planning views. The idea is distance: work is ink on paper, and it fades as
 * it moves away in time. Today is the one saturated thing on the page.
 */
.pm--wide { max-width: none; padding-inline: clamp(.75rem, 2vw, 2rem); }

.plan {
    --plan-paper: #f4efe4;
    --plan-sheet: #fffdf8;
    --plan-ink: #1e1b16;
    --plan-muted: #6f675a;
    --plan-line: rgba(30, 27, 22, .14);
    --plan-today: #d4431a;
    --plan-week: #a8642a;
    --plan-next: #5f7360;
    --plan-later: #8b8f96;
    --plan-hold: #6a6175;
    --plan-inbox: #2f5d8a;
    --plan-display: 'Josefin Sans', 'Trebuchet MS', sans-serif;
    --plan-text: 'Lora', Georgia, serif;
    --plan-mono: 'Fira Mono', ui-monospace, monospace;
    /* The site declares "light dark", which would paint native dropdowns dark under this dark ink. */
    color-scheme: light;
    color: var(--plan-ink);
    background: var(--plan-paper);
    border-radius: .75rem;
    padding: clamp(.75rem, 1.6vw, 1.5rem);
}

/* View switch */
.plan-views { display: inline-flex; border: 1px solid var(--pm-border); border-radius: 999px; padding: .2rem; background: #fff; }
.plan-views__item { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; border-radius: 999px; color: #5f5a50; text-decoration: none; font-size: .9rem; }
.plan-views__item:hover { color: #1e1b16; background: #f4efe4; }
.plan-views__item.is-active { background: #1e1b16; color: #fffdf8; }

/* Composer */
.plan-composer { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .9rem; background: var(--plan-sheet); border: 1px solid var(--plan-line); border-radius: .6rem; box-shadow: 0 1px 0 rgba(30, 27, 22, .06); transition: box-shadow .15s, border-color .15s; }
.plan-composer:focus-within { border-color: var(--plan-ink); box-shadow: 0 4px 18px rgba(30, 27, 22, .12); }
.plan-composer__plus { color: var(--plan-today); font-size: 1.1rem; }
.plan-composer__title { flex: 1 1 14rem; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--plan-text); font-size: 1.05rem; padding: .4rem .25rem; color: inherit; }
.plan-composer__title::placeholder { color: var(--plan-muted); font-style: italic; }
.plan-composer__select { border: 1px solid var(--plan-line); border-radius: .4rem; background-color: var(--plan-sheet); font-family: var(--plan-mono); font-size: .75rem; color: var(--plan-ink); padding: .3rem .4rem; max-width: 11rem; }
.plan-composer__select option { background-color: var(--plan-sheet); color: var(--plan-ink); }
.plan-composer__add { border: 0; border-radius: .4rem; background: var(--plan-ink); color: var(--plan-sheet); font-family: var(--plan-display); font-weight: 600; padding: .4rem .9rem .25rem; }
.plan-composer__add:hover { background: var(--plan-today); }
.plan-composer--inline { margin-bottom: 1rem; }

.plan-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.plan-search { display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--plan-line); color: var(--plan-muted); padding: 0 .25rem; }
.plan-search input { border: 0; outline: 0; background: transparent; font-family: var(--plan-mono); font-size: .8rem; color: var(--plan-ink); padding: .25rem 0; width: 12rem; }

.plan-count { font-family: var(--plan-mono); font-size: .75rem; color: var(--plan-muted); font-variant-numeric: tabular-nums; }

/* Board: the widths are the idea, the near columns get the room. */
.plan-board { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(18rem, 1.5fr) minmax(15rem, 1.15fr) minmax(12.5rem, .9fr) minmax(11.5rem, .8fr) minmax(10.5rem, .7fr); gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .75rem; align-items: start; }
.plan-column { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--plan-accent, var(--plan-ink)); }
.plan-column__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: .55rem .15rem .4rem; }
.plan-column__head h2 { margin: 0; font-family: var(--plan-display); font-weight: 700; font-size: 1.15rem; color: var(--plan-accent, inherit); }
.plan-column__hint { grid-column: 1 / -1; margin: 0; font-size: .78rem; font-style: italic; font-family: var(--plan-text); color: var(--plan-muted); }
.plan-column__cards { display: flex; flex-direction: column; gap: .45rem; min-height: 8rem; padding: .25rem 0 1.5rem; border-radius: .4rem; }
.plan-column--inbox { --plan-accent: var(--plan-inbox); }
.plan-column--today { --plan-accent: var(--plan-today); }
.plan-column--today .plan-column__head h2 { font-size: 1.75rem; }
.plan-column--today .plan-column__cards { background: rgba(212, 67, 26, .06); padding: .45rem; }
.plan-column--week { --plan-accent: var(--plan-week); }
.plan-column--week .plan-column__head h2 { font-size: 1.35rem; }
.plan-column--next { --plan-accent: var(--plan-next); }
.plan-column--later { --plan-accent: var(--plan-later); }
.plan-column--hold { --plan-accent: var(--plan-hold); }
.plan-column--later .plan-card:not(:hover, :focus), .plan-column--hold .plan-card:not(:hover, :focus) { background: transparent; box-shadow: none; }
.plan-column--later .plan-card__title, .plan-column--hold .plan-card__title { font-size: .88rem; color: #4a453c; }

/* Card */
.plan-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: start; padding: .55rem .5rem .55rem .6rem; background: var(--plan-sheet); border: 1px solid var(--plan-line); border-left: 3px solid hsl(var(--plan-hue, 40) 45% 45%); border-radius: .4rem; cursor: grab; transition: box-shadow .15s, transform .15s, opacity .3s; }
.plan-card[hidden] { display: none; }
.plan-card:hover { box-shadow: 0 3px 12px rgba(30, 27, 22, .13); }
.plan-card:focus-visible { outline: 2px solid var(--plan-ink); outline-offset: 1px; }
.plan-card__body { min-width: 0; }
.plan-card__title { display: block; color: var(--plan-ink); font-family: var(--plan-text); font-size: .95rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.plan-card__title:hover { text-decoration: underline; text-decoration-color: var(--plan-today); }
.plan-card__meta { display: flex; flex-wrap: wrap; gap: .2rem .45rem; margin-top: .3rem; }
.plan-chip { font-family: var(--plan-mono); font-size: .68rem; color: var(--plan-muted); white-space: nowrap; }
.plan-chip--project { color: hsl(var(--plan-hue, 40) 45% 32%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.plan-chip--priority { font-weight: 700; color: var(--plan-ink); }
.plan-chip--due.is-overdue { color: #fff; background: var(--plan-today); padding: 0 .3rem; border-radius: .2rem; }
.plan-chip--status { display: none; }
.plan-chip--in_progress { color: var(--plan-today); font-weight: 700; }
.plan-chip--current_phase { color: var(--plan-week); font-weight: 700; }
.plan--projects .plan-chip--status, .plan--lists .plan-chip--status { display: inline; }

.plan-check { width: 1.15rem; height: 1.15rem; margin-top: .12rem; padding: 0; border: 1.5px solid var(--plan-muted); border-radius: 50%; background: transparent; position: relative; transition: border-color .15s, background .15s; }
.plan-check:hover, .plan-check:focus-visible { border-color: var(--plan-today); background: rgba(212, 67, 26, .12); }
.plan-check:hover::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; color: var(--plan-today); }
.plan-star { border: 0; background: none; padding: 0 .1rem; color: var(--plan-line); line-height: 1; font-size: .95rem; transition: color .15s, transform .15s; }
.plan-card:hover .plan-star, .plan-star:focus-visible { color: var(--plan-muted); }
.plan-star:hover { color: var(--plan-today); transform: scale(1.15); }
.plan-card.is-starred { background: #fff6e5; }
.plan-card.is-starred .plan-star { color: var(--plan-today); }

.plan-card.is-completing { opacity: 0; transform: translateX(.6rem) scale(.98); }
.plan-card.is-completing .plan-card__title { text-decoration: line-through; }
.plan-card--new { animation: plan-arrive .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes plan-arrive { from { opacity: 0; transform: translateY(-.4rem); background: #ffe6c7; } }

.plan-card--ghost { opacity: .35; background: transparent; border-style: dashed; }
.plan-card--chosen { box-shadow: 0 8px 24px rgba(30, 27, 22, .22); }
.plan-card--drag { transform: rotate(1.2deg); cursor: grabbing; }

/* Lists */
.plan-lists { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.plan-sidebar { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; padding-right: .25rem; }
.plan-sidebar__title { margin: .9rem 0 .3rem; font-family: var(--plan-display); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--plan-muted); }
.plan-sidebar__title:first-child { margin-top: 0; }
.plan-sidebar__list { list-style: none; margin: 0; padding: 0; }
.plan-sidebar__item { border-radius: .4rem; }
.plan-sidebar__item a { display: flex; align-items: center; gap: .55rem; padding: .32rem .5rem; color: var(--plan-ink); text-decoration: none; font-size: .92rem; border-radius: .4rem; }
.plan-sidebar__item a:hover { background: rgba(30, 27, 22, .06); }
.plan-sidebar__item.is-active a { background: var(--plan-ink); color: var(--plan-sheet); }
.plan-sidebar__item.is-active .plan-count { color: inherit; }
.plan-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-dot { font-size: .5rem; color: hsl(var(--plan-hue, 40) 45% 45%); }
.plan-sidebar__item:has(.sortable-ghost), .plan-sidebar__item:has(.plan-card--ghost) { outline: 2px solid var(--plan-today); background: rgba(212, 67, 26, .1); }
.plan-sidebar__item > .plan-card { display: none; }

.plan-page { min-width: 0; max-width: 56rem; }
.plan-page__head { margin-bottom: .9rem; }
.plan-page__head h2 { margin: 0; font-family: var(--plan-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; color: var(--plan-ink); }
.plan-page__head p { margin: .15rem 0 0; font-family: var(--plan-text); font-style: italic; color: var(--plan-muted); }
.plan-page__cards { display: flex; flex-direction: column; gap: .35rem; min-height: 4rem; }
.plan-page .plan-card { padding-block: .7rem; }
.plan-page .plan-card__title { font-size: 1.05rem; }
.plan-empty { font-family: var(--plan-text); font-style: italic; color: var(--plan-muted); padding: 1.5rem .25rem; margin: 0; }

/* Projects */
.plan-legend { display: flex; flex-wrap: wrap; gap: .85rem; list-style: none; margin: .75rem 0 1rem; padding: 0; font-family: var(--plan-mono); font-size: .7rem; color: var(--plan-muted); }
.plan-legend__item::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border-radius: .15rem; background: var(--plan-load-color); vertical-align: -1px; }
.plan-load--inbox { --plan-load-color: var(--plan-inbox); }
.plan-load--today { --plan-load-color: var(--plan-today); }
.plan-load--week { --plan-load-color: var(--plan-week); }
.plan-load--next { --plan-load-color: var(--plan-next); }
.plan-load--later { --plan-load-color: var(--plan-later); }
.plan-load--hold { --plan-load-color: var(--plan-hold); }
.plan-lanes { display: flex; flex-direction: column; gap: .4rem; }
.plan-lanes--fixed { margin-top: .4rem; }
.plan-lane { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: .75rem; padding: .55rem .6rem; background: rgba(255, 253, 248, .6); border: 1px solid var(--plan-line); border-left: 4px solid hsl(var(--plan-hue, 40) 45% 45%); border-radius: .4rem; }
.plan-lane.is-empty { padding-block: .2rem; background: transparent; }
.plan-lane__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .3rem; align-items: center; align-self: start; }
.plan-lane__name { font-family: var(--plan-display); font-weight: 700; font-size: 1.05rem; color: var(--plan-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-lane__name--plain { grid-column: 1 / 3; }
.plan-lane__name:hover { color: var(--plan-today); }
.plan-lane.is-empty .plan-lane__name { font-weight: 400; font-size: .92rem; color: var(--plan-muted); }
.plan-grip { border: 0; background: none; padding: 0; color: var(--plan-muted); cursor: grab; touch-action: none; }
.plan-load { grid-column: 1 / -1; display: flex; gap: 2px; height: .4rem; margin-top: .4rem; }
.plan-load > span { background: var(--plan-load-color); min-width: .4rem; border-radius: 1px; }
.plan-lane__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem; min-height: 1.6rem; }
.plan-lane.is-empty .plan-lane__cards { min-height: 1.5rem; }

.plan-keys { margin: 1rem 0 0; font-family: var(--plan-mono); font-size: .68rem; color: var(--plan-muted); }
.plan-keys kbd { background: var(--plan-sheet); color: var(--plan-ink); border: 1px solid var(--plan-line); border-radius: .2rem; padding: 0 .25rem; font-size: inherit; box-shadow: none; }

@media (max-width: 900px) {
    .plan-board { grid-template-columns: repeat(6, minmax(78vw, 1fr)); }
    .plan-lists { grid-template-columns: 1fr; }
    .plan-sidebar { position: static; max-height: 14rem; }
    .plan-lane { grid-template-columns: 1fr; }
    .plan-keys { display: none; }
    .plan-composer { flex-wrap: wrap; }
    .plan-composer__select { flex: 1 1 8rem; max-width: none; }
    /* Touch has no hover, so the star must always show. */
    .plan-star { color: var(--plan-muted); }
}

@media (prefers-reduced-motion: reduce) {
    .plan-card, .plan-card--new { transition: none; animation: none; }
}