/* ============================================================================
   TradeYoke · Planning (formerly "Planning V2") — the morning flow: Decide → Order → Go.
   ----------------------------------------------------------------------------
   Global (not scoped), like planning.css: the drag-and-drop marker lives on
   document.body and the insight chips render in several hosts. Reuses
   planning.css for the DnD classes, insight chips and the map boxes; everything
   new here is prefixed p2-. THEME-AWARE: every colour is var(--ty-*, <fallback>).
   ============================================================================ */

.p2 { font-family: var(--ty-font-base, 'Helvetica Neue', Helvetica, Arial, sans-serif); color: var(--ty-color-text, #1c2128); }

/* ── The briefing ──────────────────────────────────────────────────────────── */
.p2-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
    padding: 18px 22px; margin-bottom: 14px;
    border-radius: var(--ty-radius-card, 14px);
    background: var(--ty-color-surface, #fff);
    border: 1px solid var(--ty-color-border, #e2e6ea);
    box-shadow: var(--ty-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    position: relative; overflow: hidden;
}
/* A soft tint that says the state before a word is read: amber = decisions waiting, blue = could be
   shorter, green = set, neutral = quiet day. */
.p2-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--ty-color-border-strong, #cdd5de); }
.p2-hero--decide::before { background: var(--ty-color-warning, #e0a100); }
.p2-hero--order::before  { background: var(--ty-color-primary, #1b6ec2); }
.p2-hero--ready::before  { background: var(--ty-color-success, #2da44e); }

.p2-greet { font: var(--ty-weight-semibold, 600) 13px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); letter-spacing: .01em; }
.p2-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; font: 600 13.5px var(--ty-font-base, inherit); color: var(--ty-color-text, #1c2128); }
.p2-wx {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 12px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a);
    background: var(--ty-color-surface-2, #f6f8fa); border: 1px solid var(--ty-color-border, #e2e6ea);
    border-radius: 999px; padding: 3px 10px 3px 8px;
}
.p2-wx .ty-wx { font-size: 14px; }
.p2-wx-rain { display: inline-flex; align-items: center; gap: 2px; color: var(--ty-color-info-ink, #1457b0); }

.p2-verdict {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0 0; font: var(--ty-weight-bold, 700) 24px/1.2 var(--ty-font-base, inherit); letter-spacing: -0.015em;
}
.p2-verdict .bi { font-size: 22px; }
.p2-hero--decide .p2-verdict .bi { color: var(--ty-color-warning-ink, #9a5b00); }
.p2-hero--order  .p2-verdict .bi { color: var(--ty-color-primary, #1b6ec2); }
.p2-hero--ready  .p2-verdict .bi { color: var(--ty-color-success-ink, #1a7f37); }
.p2-hero--empty  .p2-verdict .bi { color: var(--ty-color-text-subtle, #8a95a1); }
.p2-verdict--muted { color: var(--ty-color-text-subtle, #8a95a1); font-weight: 600; }
.p2-verdict-sub { margin: 6px 0 0; font: 500 13.5px/1.45 var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); max-width: 60ch; }
.p2-late { color: var(--ty-color-danger-ink, #b32121); font-weight: 700; margin-right: 4px; }

.p2-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* The three steps: a small rail that says where you are. */
.p2-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.p2-step { display: flex; align-items: center; gap: 7px; font: 700 12px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1); }
.p2-step + .p2-step::before { content: ""; width: 26px; height: 2px; background: var(--ty-color-border, #e2e6ea); margin: 0 8px; border-radius: 2px; }
.p2-step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
    background: var(--ty-color-surface-2, #f6f8fa); border: 1.5px solid var(--ty-color-border-strong, #cdd5de); color: var(--ty-color-text-muted, #57606a);
}
.p2-step-no .bi { display: none; font-size: 13px; }
.p2-step.now { color: var(--ty-color-text, #1c2128); }
.p2-step.now .p2-step-no { background: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); box-shadow: 0 0 0 4px var(--ty-color-primary-soft, #eef4fd); }
.p2-step.done { color: var(--ty-color-success-ink, #1a7f37); }
.p2-step.done .p2-step-no { background: var(--ty-color-success-soft, #e6f6ea); border-color: var(--ty-color-success, #2da44e); color: var(--ty-color-success-ink, #1a7f37); }
.p2-step.done .p2-step-no .bi { display: inline; }
.p2-step.done + .p2-step::before { background: var(--ty-color-success, #2da44e); }

/* THE next action: one big, unmistakable button. */
.p2-cta {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none;
    padding: 11px 20px; border-radius: 12px; border: 1px solid transparent;
    font: 800 14px var(--ty-font-base, inherit); letter-spacing: -0.005em;
    background: var(--ty-color-warning-ink, #9a5b00); color: #fff;
    box-shadow: var(--ty-shadow-md, 0 6px 16px -10px rgba(0,0,0,.45));
    transition: transform var(--ty-motion-micro, 120ms) ease, box-shadow var(--ty-motion-micro, 120ms) ease, filter .15s;
}
.p2-cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.p2-cta:active { transform: translateY(0); }
.p2-cta .bi { font-size: 16px; }
.p2-cta--order { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); }
.p2-cta--go { background: var(--ty-color-success-ink, #1a7f37); color: #fff; }
.p2-cta--go:hover { color: #fff; }
/* The Go CTA is the shared DirectionsLink anchor wearing the CTA look — outrank the anchor's own .ty-dir styling. */
a.p2-cta.ty-dir, a.p2-cta.ty-dir:hover, a.p2-cta.ty-dir:focus {
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 12px; border: 1px solid transparent;
    background: var(--ty-color-success-ink, #1a7f37); color: #fff; text-decoration: none;
    font: 800 14px var(--ty-font-base, inherit); box-shadow: var(--ty-shadow-md, 0 6px 16px -10px rgba(0,0,0,.45));
}
a.p2-cta.ty-dir .bi { font-size: 16px; }
.p2-cta.ty-dir .ty-dir-label { font: inherit; }

/* ── The day strip ─────────────────────────────────────────────────────────── */
.p2-days { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.p2-days-row { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.p2-day {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 8px; border-radius: 12px; cursor: pointer;
    background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-border, #e2e6ea);
    color: var(--ty-color-text, #1c2128);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.p2-day:hover { border-color: var(--ty-color-primary, #1b6ec2); }
.p2-day.past { color: var(--ty-color-text-subtle, #8a95a1); background: var(--ty-color-surface-2, #f6f8fa); }
.p2-day.today .p2-day-num { color: var(--ty-color-primary, #1b6ec2); }
.p2-day.on {
    background: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff);
    box-shadow: 0 0 0 4px var(--ty-color-primary-soft, #eef4fd);
}
.p2-day.on .p2-day-num, .p2-day.on .p2-day-dow { color: inherit; }
.p2-day-dow { font: 700 10.5px var(--ty-font-base, inherit); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.p2-day-num { font: 800 19px/1 var(--ty-font-base, inherit); }
.p2-day-marks { display: flex; gap: 3px; min-height: 7px; margin-top: 3px; }
.p2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--ty-color-primary, #1b6ec2); font-style: normal; }
.p2-dot--more { width: auto; height: auto; background: none; font: 800 9px/7px var(--ty-font-base, inherit); color: inherit; }
.p2-day.on .p2-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.p2-day-wait {
    position: absolute; top: -6px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 11px var(--ty-font-base, inherit);
    background: var(--ty-color-warning, #e0a100); color: #1c2128;
    box-shadow: 0 0 0 2px var(--ty-color-surface, #fff);
}
.p2-day-wx { position: absolute; top: 6px; left: 7px; font-size: 12px; }
.p2-day.on .p2-day-wx { color: inherit !important; opacity: .9; }
/* A day cell is also a drop target — dragging a card onto a day moves it there. */
.p2-day.pl-drop-over { background: var(--ty-color-primary-soft, #eef4fd) !important; color: var(--ty-color-text, #1c2128) !important; }

.p2-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── The two columns ───────────────────────────────────────────────────────── */
.p2-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(200px, 2.6fr); gap: 16px; align-items: start; }
@media (max-width: 1240px) { .p2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .p2-ahead { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 980px) { .p2-grid { grid-template-columns: 1fr; } .p2-ahead { grid-template-columns: 1fr; } .p2-hero { grid-template-columns: 1fr; } .p2-hero-side { align-items: flex-start; } }

.p2-col {
    border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: var(--ty-radius-card, 14px);
    background: var(--ty-color-surface, #fff); overflow: hidden;
}
.p2-col:focus { outline: none; }
/* The run stays in view while the decide list scrolls — every "yes" lands where you can see it. */
@media (min-width: 981px) { .p2-run { position: sticky; top: 12px; max-height: calc(100vh - 24px - var(--ty-bottomnav-h, 0px)); display: flex; flex-direction: column; } .p2-run .p2-stops { overflow-y: auto; flex: 1; min-height: 0; } }
.p2-col-hd { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ty-color-border, #eef1f4); }
.p2-col-titles { min-width: 0; }
.p2-col-title { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 15px var(--ty-font-base, inherit); letter-spacing: -0.01em; }
.p2-col-hint { margin: 2px 0 0; font: 500 12px/1.4 var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }

.p2-stepno {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px;
    font: 800 13px var(--ty-font-base, inherit);
    background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff);
}
.p2-stepno .bi { display: none; font-size: 15px; }
.p2-stepno.done { background: var(--ty-color-success-soft, #e6f6ea); color: var(--ty-color-success-ink, #1a7f37); border: 1.5px solid var(--ty-color-success, #2da44e); }
.p2-stepno.done .bi { display: inline; }

.p2-n {
    font: 800 11px var(--ty-font-base, inherit);
    background: var(--ty-color-surface-2, #f6f8fa); border: 1px solid var(--ty-color-border, #e2e6ea);
    border-radius: 999px; padding: 1px 8px; color: var(--ty-color-text-muted, #57606a);
}
.p2-n.hot { background: var(--ty-color-warning-soft, #fdf1dd); border-color: transparent; color: var(--ty-color-warning-ink, #9a5b00); }

/* ── Step 1 · Decide ───────────────────────────────────────────────────────── */
.p2-inbox { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }

.p2-clear {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 28px 12px; border-radius: 12px;
    background: var(--ty-color-success-soft, #e6f6ea); color: var(--ty-color-success-ink, #1a7f37);
}
.p2-clear .bi { font-size: 30px; }
.p2-clear strong { font: 800 15px var(--ty-font-base, inherit); }
.p2-clear span { font: 500 12.5px var(--ty-font-base, inherit); opacity: .85; }

.p2-card {
    position: relative; border-radius: 12px; padding: 12px 12px 12px 16px;
    background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-border, #e2e6ea);
    transition: box-shadow var(--ty-motion-micro, 120ms) ease, border-color .15s;
}
.p2-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--dom, var(--ty-color-primary, #1b6ec2)); }
.p2-card:hover { box-shadow: var(--ty-shadow-md, 0 6px 18px -10px rgba(0,0,0,.4)); border-color: var(--ty-color-border-strong, #cdd5de); }
.p2-card--late { background: color-mix(in srgb, var(--ty-color-danger-soft, #fdecec) 45%, var(--ty-color-surface, #fff)); }
.p2-card--drag { cursor: grab; }
.p2-card--drag:active { cursor: grabbing; }

.p2-card-top { display: flex; align-items: flex-start; gap: 10px; }
.p2-card-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--dom, var(--ty-color-primary, #1b6ec2)); }
.p2-card-text { flex: 1; min-width: 0; }
.p2-card-title { font: 700 14px var(--ty-font-base, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; font: 500 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2-loc { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.p2-loc .bi { font-size: 11px; opacity: .8; }

.p2-tag { display: inline-flex; align-items: center; gap: 4px; font: 800 10px var(--ty-font-base, inherit); letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; }
.p2-tag--late { color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }

/* The three answers, as buttons a thumb can hit. */
.p2-card-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.p2-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 12px; border-radius: 9px;
    border: 1px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface, #fff);
    font: 700 12px var(--ty-font-base, inherit); color: var(--ty-color-text, #1c2128);
    transition: background .15s, color .15s, border-color .15s;
}
.p2-btn:hover { border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); background: var(--ty-color-primary-soft, #eef4fd); }
.p2-btn.on { border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); background: var(--ty-color-primary-soft, #eef4fd); }
.p2-btn--yes { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; }
.p2-btn--yes:hover { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; filter: brightness(1.08); }
.p2-btn--skip { color: var(--ty-color-text-muted, #57606a); margin-left: auto; }
.p2-btn--skip:hover { border-color: var(--ty-color-danger-ink, #b32121); color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }
.p2-btn--sm { padding: 4px 9px; font-size: 11px; }
.p2-btn--best { background: var(--ty-color-primary-soft, #eef4fd); border-color: transparent; color: var(--ty-color-primary, #1b6ec2); }
.p2-btn--best:hover { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); }
.p2-best-ok { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--ty-font-base, inherit); color: var(--ty-color-success-ink, #1a7f37); }

.p2-btn--park { color: var(--ty-color-text-muted, #57606a); }

/* ── The "Another day" calendar: oversized, informed ───────────────────────── */
.p2-cal-backdrop { position: fixed; inset: 0; z-index: var(--ty-z-modal, 400); background: rgba(var(--ty-color-overlay-rgb, 16, 24, 40), .45); }
.p2-cal {
    position: fixed; z-index: calc(var(--ty-z-modal, 400) + 1);
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
    background: var(--ty-color-surface, #fff); border-radius: 18px;
    box-shadow: var(--ty-shadow-lg, 0 24px 60px -20px rgba(0,0,0,.5));
    padding: 18px 20px 20px;
}
.p2-cal-hd { display: flex; align-items: flex-start; gap: 12px; }
.p2-cal-hd > div { flex: 1; min-width: 0; }
.p2-cal-title { margin: 0; font: 800 18px var(--ty-font-base, inherit); letter-spacing: -0.01em; }
.p2-cal-sub { margin: 2px 0 0; font: 600 13px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p2-cal-quick { display: flex; gap: 8px; margin: 14px 0 6px; }
.p2-cal-quickbtn {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
    padding: 10px 12px; border-radius: 12px; text-align: left;
    border: 1px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface-2, #f6f8fa); color: var(--ty-color-text, #1c2128);
    transition: background .15s, border-color .15s, color .15s;
}
.p2-cal-quickbtn span { font: 700 10.5px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--ty-color-text-muted, #57606a); }
.p2-cal-quickbtn strong { font: 800 14px var(--ty-font-base, inherit); }
.p2-cal-quickbtn:hover { background: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); }
.p2-cal-quickbtn:hover span { color: inherit; opacity: .85; }

.p2-cal-monthnav { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.p2-cal-month { font: 800 15px var(--ty-font-base, inherit); }
.p2-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.p2-cal-dow { text-align: center; font: 700 10.5px var(--ty-font-base, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--ty-color-text-subtle, #8a95a1); padding: 4px 0; }
.p2-cal-day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 62px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface, #fff); color: var(--ty-color-text, #1c2128);
    transition: background .12s, border-color .12s, transform .12s;
}
.p2-cal-day:hover:not(:disabled) { background: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); transform: translateY(-1px); }
.p2-cal-day:hover:not(:disabled) .p2-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.p2-cal-day.out { visibility: hidden; }
.p2-cal-day.past { color: var(--ty-color-text-subtle, #8a95a1); background: var(--ty-color-surface-2, #f6f8fa); border-color: transparent; cursor: default; }
.p2-cal-day.today .p2-cal-num { color: var(--ty-color-primary, #1b6ec2); }
.p2-cal-day.today::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--ty-color-primary, #1b6ec2); }
.p2-cal-day.here { background: var(--ty-color-primary-soft, #eef4fd); border-color: var(--ty-color-primary, #1b6ec2); cursor: default; }
.p2-cal-num { font: 800 18px/1 var(--ty-font-base, inherit); }
.p2-cal-marks { display: flex; gap: 3px; min-height: 7px; }
.p2-cal-wait {
    position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 10.5px var(--ty-font-base, inherit); background: var(--ty-color-warning, #e0a100); color: #1c2128;
    box-shadow: 0 0 0 2px var(--ty-color-surface, #fff);
}
.p2-cal-here { font: 800 8.5px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--ty-color-primary, #1b6ec2); }

/* Coming up / skipped: quiet sections under the inbox. */
.p2-more { border-top: 1px solid var(--ty-color-border, #eef1f4); }
.p2-more > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 11px 16px; font: 700 12.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a);
}
.p2-more > summary::-webkit-details-marker { display: none; }
.p2-more > summary { white-space: nowrap; }
.p2-more > summary .p2-more-hint { overflow: hidden; text-overflow: ellipsis; }
.p2-more > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; transition: transform .15s; }
.p2-more[open] > summary::after { transform: rotate(180deg); }
.p2-more-hint { font-weight: 500; font-size: 11px; color: var(--ty-color-text-subtle, #8a95a1); }
.p2-more-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }

.p2-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px 8px 14px; border-radius: 10px; position: relative;
    background: var(--ty-color-surface-2, #f6f8fa); border: 1px solid var(--ty-color-border, #e2e6ea);
}
.p2-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dom, var(--ty-color-primary, #1b6ec2)); }
.p2-row-when { font: 800 10.5px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .04em; color: var(--ty-color-text-muted, #57606a); min-width: 64px; }
.p2-row-title { font: 600 12.5px var(--ty-font-base, inherit); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-row .pl-card-insights { margin-top: 0; }
.p2-row-acts { display: flex; gap: 5px; margin-left: auto; }

.p2-skipbin { margin: 0 12px 12px; padding: 10px 12px; border-radius: 10px; border: 2px dashed var(--ty-color-border-strong, #cdd5de); }
.p2-skipbin--empty { border-color: var(--ty-color-border, #e2e6ea); }
.p2-skipbin-hd { display: flex; align-items: center; gap: 8px; font: 700 12px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2-skipbin-hd .bi { color: var(--ty-color-danger-ink, #b32121); }
.p2-skipbin--empty .p2-skipbin-hd { color: var(--ty-color-text-subtle, #8a95a1); font-weight: 500; }
.p2-skipbin--empty .p2-skipbin-hd .bi { color: var(--ty-color-text-subtle, #8a95a1); }
.p2-skipbin-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p2-skipbin.pl-drop-over { border-color: var(--ty-color-danger-ink, #b32121) !important; background: var(--ty-color-danger-soft, #fdecec) !important; }

/* ── Step 2 · Order ────────────────────────────────────────────────────────── */
.p2-map-wrap { position: relative; border-bottom: 1px solid var(--ty-color-border, #eef1f4); }
.p2-map-wrap--open .p2-map-bar { border-bottom: 1px solid var(--ty-color-border, #eef1f4); }
.p2-map { display: block; height: clamp(180px, 26vh, 300px); }
.p2-map-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--ty-color-surface-2, #f6f8fa); }
.p2-map-bar-lbl { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2-map-bar-lbl .bi { color: var(--ty-color-primary, #1b6ec2); }

.p2-stops { list-style: none; margin: 0; padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 0; min-height: 80px; }

.p2-run-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 30px 12px; border-radius: 12px; border: 2px dashed var(--ty-color-border, #e2e6ea);
    color: var(--ty-color-text-muted, #57606a);
}
.p2-run-empty .bi { font-size: 28px; color: var(--ty-color-text-subtle, #8a95a1); }
.p2-run-empty strong { font: 800 14px var(--ty-font-base, inherit); color: var(--ty-color-text, #1c2128); }
.p2-run-empty span { font: 500 12.5px var(--ty-font-base, inherit); }

/* A stop: the numbered rail on the left joins stop to stop; the card sits beside it. */
.p2-stop { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 10px; align-items: start; padding: 4px 0; position: relative; }
.p2-stop-rail { position: relative; display: flex; justify-content: center; align-self: stretch; padding-top: 22px; }
.p2-stop-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ty-color-border, #e2e6ea); }
.p2-stop:first-child .p2-stop-rail::before { top: 22px; }
.p2-stop:last-child .p2-stop-rail::before { bottom: auto; height: 22px; }
.p2-stop:first-child:last-child .p2-stop-rail::before { display: none; }
.p2-stop-no {
    position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dom, var(--ty-color-primary, #1b6ec2)); color: #fff;
    font: 800 12px var(--ty-font-base, inherit); box-shadow: 0 0 0 3px var(--ty-color-surface, #fff);
}
.p2-stop-body {
    min-width: 0; padding: 10px 12px; border-radius: 12px;
    background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-border, #e2e6ea);
    transition: box-shadow var(--ty-motion-micro, 120ms) ease;
}
.p2-stop:hover .p2-stop-body { box-shadow: var(--ty-shadow-md, 0 6px 18px -10px rgba(0,0,0,.4)); }
.p2-stop--done .p2-stop-body { opacity: .7; }
/* Handled: still a stop (number kept beside the title, still on the route), but reads as dealt with. */
.p2-stop-no .bi { display: none; font-size: 14px; }
.p2-stop--handled .p2-stop-no { background: var(--ty-color-success-ink, #1a7f37); }
.p2-stop--handled .p2-stop-no .bi { display: inline; }
.p2-stop--handled .p2-stop-body { background: var(--ty-color-success-soft, #e6f6ea); border-color: transparent; }
.p2-stop-idx { font: 800 11px var(--ty-font-base, inherit); color: var(--ty-color-success-ink, #1a7f37); opacity: .8; }
.p2-tag--handled { color: var(--ty-color-success-ink, #1a7f37); background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-success, #2da44e); }
.p2-iconbtn--tick.on { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; }
.p2-iconbtn--tick:hover { border-color: var(--ty-color-success-ink, #1a7f37); color: var(--ty-color-success-ink, #1a7f37); background: var(--ty-color-success-soft, #e6f6ea); }
.p2-iconbtn--tick.on:hover { color: #fff; background: var(--ty-color-success-ink, #1a7f37); }
/* A stop that just landed: flash so the eye finds it. */
@keyframes p2-flash { 0% { box-shadow: 0 0 0 0 rgba(45,164,78,.55); background: var(--ty-color-success-soft, #e6f6ea); } 100% { box-shadow: 0 0 0 14px rgba(45,164,78,0); background: var(--ty-color-surface, #fff); } }
.p2-flash .p2-stop-body { animation: p2-flash 1.6s ease-out 1; }
.p2-row--parked .p2-row-title { color: var(--ty-color-text-muted, #57606a); }
.p2-more--parked > summary .bi { color: var(--ty-color-warning-ink, #9a5b00); }
.p2-stop--done .p2-stop-title { text-decoration: line-through; }
.p2-stop-title { display: flex; align-items: center; gap: 8px; font: 700 14px var(--ty-font-base, inherit); }
.p2-leg { font: 600 10.5px var(--ty-font-mono, ui-monospace, monospace); color: var(--ty-color-text-subtle, #8a95a1); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.p2-stop-acts { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }

.p2-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface, #fff);
    color: var(--ty-color-text-muted, #57606a); font-size: 13px;
    transition: background .15s, color .15s, border-color .15s;
}
.p2-iconbtn:hover { border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); background: var(--ty-color-primary-soft, #eef4fd); }
.p2-iconbtn--skip:hover { border-color: var(--ty-color-danger-ink, #b32121); color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }
.p2-dir.ty-dir { padding: 0; }

/* ── The two days ahead ────────────────────────────────────────────────────── */
.p2-ahead { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1241px) { .p2-ahead { position: sticky; top: 12px; } }
/* flex: none — the rail is a flex column with a max-height and its own scrollbar; without it, day cards
   (overflow:hidden ⇒ min-height 0) SHRINK to their header when the fortnight is taller than the viewport and
   clip the jobs inside them. The rail scrolls; the days never squash. */
.p2-aheadday { flex: none; border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: var(--ty-radius-card, 14px); background: var(--ty-color-surface, #fff); overflow: hidden; }
.p2-aheadday-hd {
    display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; text-align: left;
    padding: 10px 12px; border: none; border-bottom: 1px solid var(--ty-color-border, #eef1f4);
    background: var(--ty-color-surface-2, #f6f8fa); color: var(--ty-color-text, #1c2128);
}
.p2-aheadday-hd:hover { background: var(--ty-color-primary-soft, #eef4fd); }
.p2-aheadday-when { display: flex; flex-direction: column; line-height: 1.1; }
.p2-aheadday-when strong { font: 800 13px var(--ty-font-base, inherit); text-transform: capitalize; }
.p2-aheadday-when span { font: 600 10.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2-aheadday-go { color: var(--ty-color-text-subtle, #8a95a1); font-size: 12px; }
.p2-aheadday-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; min-height: 96px; }
.p2-aheadday-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
    padding: 14px 8px; border-radius: 10px; border: 2px dashed var(--ty-color-border, #e2e6ea);
    font: 600 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1);
}
.p2-aheadday-empty .bi { font-size: 18px; }
.p2-mini {
    display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px;
    border: 1px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface, #fff);
    border-left: 3px solid var(--dom, var(--ty-color-primary, #1b6ec2));
}
.p2-mini:hover { box-shadow: var(--ty-shadow-sm, 0 1px 4px rgba(0,0,0,.08)); }
.p2-mini-no { flex: none; width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 800 10px var(--ty-font-base, inherit); background: var(--dom, var(--ty-color-primary, #1b6ec2)); color: #fff; }
.p2-mini-title { font: 600 12px var(--ty-font-base, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dnd-active .p2-aheadday-body { outline: 2px dashed var(--ty-color-border, #e5e7eb); outline-offset: -2px; border-radius: 10px; }

/* Forward rail: a fortnight of compact drop days that scrolls on its own, then the "any date" zone. */
.p2-ahead { max-height: calc(100vh - 24px - var(--ty-bottomnav-h, 0px)); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.p2-ahead-hd { display: flex; align-items: center; gap: 6px; font: 800 11px var(--ty-font-base, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--ty-color-text-subtle, #8a95a1); padding: 2px 4px 0; }
.p2-aheadday--quiet .p2-aheadday-body { min-height: 0; padding: 6px 8px; }
.p2-aheadday--quiet .p2-aheadday-empty { padding: 6px 8px; flex-direction: row; justify-content: center; font-size: 11px; }
.p2-aheadday--quiet .p2-aheadday-empty .bi { font-size: 13px; }

.p2-later {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
    padding: 14px 10px; border-radius: 12px; border: 2px dashed var(--ty-color-primary, #1b6ec2);
    background: var(--ty-color-primary-soft, #eef4fd); color: var(--ty-color-primary, #1b6ec2);
    font: 700 12px var(--ty-font-base, inherit);
}
.p2-later .bi { font-size: 20px; }
.p2-later span { font-weight: 500; font-size: 11px; color: var(--ty-color-text-muted, #57606a); }
.p2-later.pl-drop-over { background: var(--ty-color-primary, #1b6ec2) !important; color: #fff !important; outline: none !important; }
.p2-later.pl-drop-over span { color: rgba(255,255,255,.85); }
.p2-decide .p2-later { margin: 0 12px 12px; }

/* ── View switch + period nav ──────────────────────────────────────────────── */
.p2-viewrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.p2-viewrow .p2-days { flex: 1; margin-bottom: 0; min-width: 0; }
/* ...and the strip INSIDE it needs the same, or the seven day buttons refuse to shrink and shove the
   "next week" chevron off the right of a phone (measured: 33px past the edge). */
.p2-days-row { min-width: 0; }
.p2-periodnav { display: flex; align-items: center; gap: 8px; }
.p2-periodnav-lbl { font: 800 15px var(--ty-font-base, inherit); min-width: 10ch; text-align: center; }

/* ── Week board ────────────────────────────────────────────────────────────── */
.p2-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.p2-wcol { border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 12px; background: var(--ty-color-surface, #fff); overflow: hidden; display: flex; flex-direction: column; min-height: 240px; }
.p2-wcol--today { border-color: var(--ty-color-primary, #1b6ec2); box-shadow: 0 0 0 3px var(--ty-color-primary-soft, #eef4fd); }
.p2-wcol--past { background: var(--ty-color-surface-2, #f6f8fa); }
.p2-wcol-hd {
    display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; text-align: left;
    padding: 8px 8px; border: none; border-bottom: 1px solid var(--ty-color-border, #eef1f4);
    background: var(--ty-color-surface-2, #f6f8fa); color: var(--ty-color-text, #1c2128);
}
.p2-wcol-hd:hover { background: var(--ty-color-primary-soft, #eef4fd); }
.p2-wcol--today .p2-wcol-hd { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); }
.p2-wcol--today .p2-wcol-hd .p2-wcol-date, .p2-wcol--today .p2-wcol-hd .ty-wx { color: inherit !important; opacity: .9; }
.p2-wcol-when { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.p2-wcol-when strong { font: 800 12.5px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .04em; }
.p2-wcol-date { font: 600 10.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2-wcol-body { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.p2-wcol-ft { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-top: 1px solid var(--ty-color-border, #eef1f4); font: 600 10.5px var(--ty-font-mono, ui-monospace, monospace); color: var(--ty-color-text-subtle, #8a95a1); }
.p2-wcol-ft .p2-btn { font-size: 10.5px; padding: 3px 7px; }
.p2-wcol-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 6px; border-radius: 9px; border: 2px dashed var(--ty-color-border, #e2e6ea); font: 600 11px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1); }
.pl-dnd-active .p2-wcol-body, .pl-dnd-active .p2-mcell-body { outline: 2px dashed var(--ty-color-border, #e5e7eb); outline-offset: -2px; border-radius: 9px; }
.p2-mini--handled { background: var(--ty-color-success-soft, #e6f6ea); border-color: transparent; }
.p2-mini--handled .p2-mini-no { background: var(--ty-color-success-ink, #1a7f37); }
.p2-tag--day { color: var(--ty-color-info-ink, #1457b0); background: var(--ty-color-info-soft, #eaf2fd); }
.p2-mini-time { flex: none; font: 600 10px var(--ty-font-mono, ui-monospace, monospace); color: var(--ty-color-text-subtle, #8a95a1); }

/* ── Month grid ────────────────────────────────────────────────────────────── */
.p2-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.p2-mdow { text-align: center; font: 700 10.5px var(--ty-font-base, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--ty-color-text-subtle, #8a95a1); padding: 2px 0 4px; }
.p2-mcell { border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 10px; background: var(--ty-color-surface, #fff); overflow: hidden; display: flex; flex-direction: column; min-height: 104px; }
.p2-mcell--out { visibility: hidden; }
.p2-mcell--past { background: var(--ty-color-surface-2, #f6f8fa); }
.p2-mcell--today { border-color: var(--ty-color-primary, #1b6ec2); box-shadow: 0 0 0 3px var(--ty-color-primary-soft, #eef4fd); }
.p2-mcell-hd { display: flex; align-items: center; gap: 4px; width: 100%; cursor: pointer; text-align: left; padding: 5px 7px; border: none; background: none; color: var(--ty-color-text, #1c2128); }
.p2-mcell-hd:hover { background: var(--ty-color-primary-soft, #eef4fd); }
.p2-mcell-num { font: 800 14px var(--ty-font-base, inherit); }
.p2-mcell--today .p2-mcell-num { color: var(--ty-color-primary, #1b6ec2); }
.p2-mcell--past .p2-mcell-num { color: var(--ty-color-text-subtle, #8a95a1); }
.p2-mcell-hd .p2-n { padding: 0 6px; font-size: 10px; }
.p2-mcell-hd .ty-wx { font-size: 11px; margin-left: 2px; }
.p2-mcell-body { flex: 1; padding: 0 5px 5px; display: flex; flex-direction: column; gap: 3px; min-height: 60px; }
.p2-mcell-body .p2-mini { padding: 3px 6px; border-radius: 7px; }
.p2-mcell-body .p2-mini-no { width: 15px; height: 15px; font-size: 9px; }
.p2-mcell-body .p2-mini-title { font-size: 11px; }
.p2-mcell-more { font: 700 10.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); padding: 0 4px; }
.p2-mcell-empty { flex: 1; border-radius: 7px; border: 1.5px dashed transparent; }
.pl-dnd-active .p2-mcell-body .p2-mcell-empty { border-color: var(--ty-color-border, #e2e6ea); }

/* The period boards take the run's grid slot; decide keeps its column. */
.p2-grid--week, .p2-grid--month { grid-template-columns: minmax(0, 4fr) minmax(0, 10fr); }
@media (max-width: 1240px) { .p2-grid--week, .p2-grid--month { grid-template-columns: 1fr; } .p2-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .p2-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p2-month { gap: 3px; } .p2-mcell { min-height: 64px; } .p2-mcell-body .p2-mini { display: none; } .p2-mcell-empty { display: none; } }

/* ── Step 3 · Go ───────────────────────────────────────────────────────────── */
.p2-go {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; border-top: 1px solid var(--ty-color-border, #eef1f4);
    background: var(--ty-color-surface-2, #f6f8fa);
}
.p2-go .p2-col-titles { flex: 1; min-width: 0; }
.p2-go .p2-stepno { background: var(--ty-color-surface, #fff); color: var(--ty-color-text-muted, #57606a); border: 1.5px solid var(--ty-color-border-strong, #cdd5de); }
.p2-go--ready { background: var(--ty-color-success-soft, #e6f6ea); }
.p2-go--ready .p2-stepno { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; }
.p2-go:not(.p2-go--ready) a.p2-cta--go.ty-dir { background: var(--ty-color-surface, #fff); color: var(--ty-color-text, #1c2128); border-color: var(--ty-color-border-strong, #cdd5de); box-shadow: none; }

/* ── Drag and drop over the new zones (planningDnd.js) ─────────────────────── */
.pl-dnd-active .p2-inbox, .pl-dnd-active .p2-stops, .pl-dnd-active .p2-skipbin { outline: 2px dashed var(--ty-color-border, #e5e7eb); outline-offset: -2px; border-radius: 12px; }

@media (max-width: 600px) {
    .p2-hero { padding: 14px 14px; }
    .p2-day { padding: 6px 2px; }
    .p2-day-wx { display: none; }
    .p2-day-wait { position: static; margin-top: 3px; min-width: 18px; height: 18px; font-size: 10px; box-shadow: none; }
    .p2-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .p2-filters::-webkit-scrollbar { display: none; }
    .p2-filters .ty-chip { flex: none; white-space: nowrap; }
    .p2-more-hint { display: none; }
    .p2-more > summary { white-space: nowrap; }
    .p2-col-hd, .p2-go { flex-wrap: wrap; }
    .p2-col-hd .p2-col-titles, .p2-go .p2-col-titles { flex: 1; min-width: 0; }
    .p2-col-hd .pl-spacer, .p2-go .pl-spacer { display: none; }
    .p2-col-hd .p2-btn--best, .p2-go a.p2-cta { order: 10; flex-basis: 100%; justify-content: center; }
    .p2-verdict { font-size: 20px; }
    .p2-day-num { font-size: 16px; }
    .p2-stop { grid-template-columns: 30px minmax(0, 1fr); }
    .p2-stop-acts { grid-column: 2; flex-direction: row; padding-top: 4px; }
}


/* ============================================================================
   Big, bold, a little playful — the size-and-spirit pass (2026-09-02). Appended
   last so it wins over the base rules above; everything stays token-driven.
   ============================================================================ */
.p2 { --p2-bounce: cubic-bezier(.34, 1.56, .64, 1); }

/* Hero: say it loud. */
.p2-hero { padding: 22px 26px; border-radius: 20px; }
.p2-hero::before { width: 9px; }
.p2-greet { font-size: 15px; font-weight: 700; }
.p2-greet::after { content: " 👋"; }
.p2-date { font-size: 15px; }
.p2-wx { font-size: 13px; padding: 5px 12px 5px 10px; }
.p2-verdict { font-size: 32px; letter-spacing: -0.02em; }
.p2-verdict .bi { font-size: 30px; }
.p2-verdict-sub { font-size: 15px; }
.p2-steps { gap: 0; }
.p2-step { font-size: 13.5px; }
.p2-step-no { width: 30px; height: 30px; font-size: 13.5px; }
.p2-step-no .bi { font-size: 15px; }
.p2-step + .p2-step::before { width: 34px; height: 3px; }
.p2-cta, a.p2-cta.ty-dir, a.p2-cta.ty-dir:hover, a.p2-cta.ty-dir:focus { padding: 14px 24px; border-radius: 16px; font-size: 16px; }
.p2-cta .bi, a.p2-cta.ty-dir .bi { font-size: 18px; }
.p2-cta:hover, a.p2-cta.ty-dir:hover { transform: translateY(-2px) scale(1.03); transition-timing-function: var(--p2-bounce); }

/* View switch + day strip: chunky, tappable. */
.p2-viewrow .ty-seg-item { font-size: 14px; font-weight: 800; padding: 8px 18px; min-height: 38px; }
.p2-viewrow .ty-seg-item.on { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); box-shadow: 0 6px 16px -8px var(--ty-color-primary, #1b6ec2); }
.p2-periodnav-lbl { font-size: 18px; }
.p2-day { padding: 12px 6px 12px; border-radius: 16px; transition: transform .18s var(--p2-bounce), background .15s, border-color .15s, box-shadow .15s; }
.p2-day:hover { transform: translateY(-2px); }
.p2-day-dow { font-size: 11.5px; }
.p2-day-num { font-size: 26px; }
.p2-day-marks { margin-top: 5px; min-height: 8px; }
.p2-dot { width: 8px; height: 8px; }
.p2-day-wait { min-width: 24px; height: 24px; font-size: 12.5px; top: -8px; right: -6px; }
.p2-day-wx { font-size: 14px; top: 8px; left: 9px; }
.p2-filters .ty-chip { font-size: 12.5px; }

/* Columns: bigger headings and step bubbles. */
.p2-col { border-radius: 20px; }
.p2-col-hd { padding: 16px 18px; }
.p2-col-title { font-size: 19px; }
.p2-col-hint { font-size: 13px; }
.p2-stepno { width: 38px; height: 38px; font-size: 16px; }
.p2-stepno .bi { font-size: 19px; }
.p2-n { font-size: 12.5px; padding: 2px 10px; }

/* Decide cards: the answers are the biggest things on the card. */
.p2-inbox { gap: 12px; padding: 14px; }
.p2-card { border-radius: 16px; padding: 14px 14px 14px 18px; transition: box-shadow .15s, border-color .15s, transform .18s var(--p2-bounce); }
.p2-card:hover { transform: translateY(-1px); }
.p2-card::before { width: 5px; }
.p2-card-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.p2-card-title { font-size: 16.5px; font-weight: 800; }
.p2-card-meta { font-size: 12.5px; margin-top: 3px; }
.p2-btn { padding: 9px 14px; border-radius: 12px; font-size: 13.5px; transition: background .15s, color .15s, border-color .15s, transform .18s var(--p2-bounce); }
.p2-btn:hover { transform: translateY(-1px) scale(1.03); }
.p2-btn--yes { box-shadow: 0 4px 12px -6px rgba(26,127,55,.6); }
.p2-btn--sm { padding: 6px 11px; font-size: 12px; }
.p2-card-acts { gap: 8px; margin-top: 12px; }
.p2-tag { font-size: 10.5px; padding: 3px 8px; }
.pli { font-size: 10.5px; padding: 3px 9px; }

.p2-clear { padding: 34px 14px; border-radius: 16px; }
.p2-clear .bi { font-size: 44px; animation: p2-pop .6s var(--p2-bounce) 1; }
.p2-clear strong { font-size: 18px; }
.p2-clear span { font-size: 13.5px; }
@keyframes p2-pop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.p2-more > summary { font-size: 13.5px; padding: 13px 18px; }
.p2-row { padding: 9px 12px 9px 16px; border-radius: 12px; }
.p2-row-title { font-size: 13.5px; font-weight: 700; }
.p2-skipbin { border-radius: 14px; }
.p2-skipbin-hd { font-size: 13px; }

/* The run: numbers you can read from arm's length. */
.p2-stop { grid-template-columns: 42px minmax(0, 1fr) auto; }
.p2-stop-no { width: 34px; height: 34px; font-size: 14.5px; }
.p2-stop-rail { padding-top: 24px; }
.p2-stop:first-child .p2-stop-rail::before { top: 24px; }
.p2-stop:last-child .p2-stop-rail::before { height: 24px; }
.p2-stop-body { border-radius: 16px; padding: 12px 14px; }
.p2-stop-title { font-size: 16.5px; font-weight: 800; }
.p2-leg { font-size: 11.5px; }
.p2-iconbtn { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; transition: background .15s, color .15s, border-color .15s, transform .18s var(--p2-bounce); }
.p2-iconbtn:hover { transform: scale(1.08); }
.p2-map-toggle { font-size: 13px; }
.p2-run-empty { padding: 36px 12px; border-radius: 16px; }
.p2-run-empty .bi { font-size: 36px; }
.p2-run-empty strong { font-size: 17px; }
.p2-go { padding: 16px 18px; }

/* Rail, week, month: bigger numbers, chunkier rows. */
.p2-ahead-hd { font-size: 12px; }
.p2-aheadday { border-radius: 16px; }
.p2-aheadday-when strong { font-size: 14.5px; }
.p2-mini { padding: 8px 10px; border-radius: 11px; border-left-width: 4px; transition: transform .18s var(--p2-bounce), box-shadow .15s; }
.p2-mini:hover { transform: translateX(2px); }
.p2-mini-no { width: 22px; height: 22px; font-size: 11px; }
.p2-mini-title { font-size: 13.5px; font-weight: 700; }
.p2-later { padding: 18px 10px; border-radius: 16px; font-size: 14px; border-width: 3px; }
.p2-later .bi { font-size: 26px; }
.p2-wcol { border-radius: 16px; }
.p2-wcol-when strong { font-size: 14px; }
.p2-wcol-date { font-size: 11.5px; }
.p2-mcell { border-radius: 14px; min-height: 116px; }
.p2-mcell-num { font-size: 17px; }
.p2-mdow { font-size: 11.5px; }

/* Calendar: the biggest tap targets on the page. */
.p2-cal { border-radius: 22px; }
.p2-cal-title { font-size: 21px; }
.p2-cal-quickbtn strong { font-size: 15.5px; }
.p2-cal-day { min-height: 68px; border-radius: 14px; transition: background .12s, border-color .12s, transform .18s var(--p2-bounce); }
.p2-cal-day:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); }
.p2-cal-num { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
    .p2 *, .p2 *::before, .p2 *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 600px) {
    .p2-verdict { font-size: 24px; }
    .p2-day-num { font-size: 20px; }
    .p2-card-title, .p2-stop-title { font-size: 15px; }
}

/* The "any date" bar: slim, always in reach, under the Decide header. */
.p2-later--bar { flex-direction: row; gap: 8px; padding: 10px 14px; margin: 12px 14px 0; border-radius: 12px; border-width: 2px; font-size: 13px; }
.p2-later--bar .bi { font-size: 18px; }
.p2-later--bar span { font-size: 12px; margin-left: auto; text-align: right; }
.p2-decide .p2-later--bar { margin-bottom: 0; }
@media (max-width: 600px) { .p2-later--bar span { display: none; } }

/* Board rows: let a title take two lines rather than three letters. */
.p2-week .p2-mini-title, .p2-month .p2-mini-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 12.5px; }
.p2-week .p2-mini, .p2-month .p2-mini { align-items: flex-start; }
.p2-week .p2-mini-no, .p2-month .p2-mini-no { margin-top: 1px; }


/* ── The stop panel (PlanningStopPanel inside TyDetailPanel) — big, bold, decision first ─────── */
.p2sp { --p2-bounce: cubic-bezier(.34, 1.56, .64, 1); font-family: var(--ty-font-base, inherit); color: var(--ty-color-text, #1c2128); }
.p2sp-hero {
    display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--dom, #1b6ec2) 14%, var(--ty-color-surface, #fff)), var(--ty-color-surface, #fff) 70%);
    border-bottom: 1px solid var(--ty-color-border, #eef1f4);
}
.p2sp-ico { flex: none; width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: var(--dom, #1b6ec2); box-shadow: 0 8px 20px -10px var(--dom, #1b6ec2); }
.p2sp-hero-main { flex: 1; min-width: 0; }
.p2sp-name { font: 800 26px/1.15 var(--ty-font-base, inherit); letter-spacing: -0.02em; }
.p2sp-addr { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 14px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.p2sp-addr .bi { color: var(--dom, #1b6ec2); }
.p2sp-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p2sp-tags .pli { font-size: 11px; padding: 4px 10px; }
.p2sp-state { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px var(--ty-font-base, inherit); letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; }
.p2sp-state--run { background: var(--ty-color-primary-soft, #eef4fd); color: var(--ty-color-primary, #1b6ec2); }
.p2sp-state--handled { background: var(--ty-color-success-soft, #e6f6ea); color: var(--ty-color-success-ink, #1a7f37); }
.p2sp-state--waiting { background: var(--ty-color-warning-soft, #fdf1dd); color: var(--ty-color-warning-ink, #9a5b00); }
.p2sp-state--parked { background: var(--ty-color-surface-2, #f6f8fa); color: var(--ty-color-text-muted, #57606a); border: 1px solid var(--ty-color-border, #e2e6ea); }
.p2sp-price { flex: none; display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 16px; background: var(--ty-color-surface, #fff); border: 2px solid var(--dom, #1b6ec2); }
.p2sp-price b { font: 800 26px/1 var(--ty-font-base, inherit); color: var(--dom, #1b6ec2); }
.p2sp-price small { font: 700 10.5px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--ty-color-text-muted, #57606a); margin-top: 3px; }

.p2sp-when { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--ty-color-border, #eef1f4); font: 700 15px var(--ty-font-base, inherit); }
.p2sp-when .bi { color: var(--ty-color-text-muted, #57606a); margin-right: 6px; }
.p2sp-when-day { font-size: 17px; }
.p2sp-when-date { font: 700 15px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); margin-left: -6px; }
.p2sp-when-date::before { content: "·"; margin-right: 10px; color: var(--ty-color-text-subtle, #8a95a1); }
.p2sp-when-time { padding: 4px 12px; border-radius: 999px; background: var(--ty-color-surface-2, #f6f8fa); font-size: 14px; }
.p2sp-when-who, .p2sp-when-round { color: var(--ty-color-text-muted, #57606a); font-weight: 600; }

.p2sp-sect-lbl { font: 800 11.5px var(--ty-font-base, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--ty-color-text-subtle, #8a95a1); margin-bottom: 10px; }
.p2sp-decide { padding: 16px 22px; border-bottom: 1px solid var(--ty-color-border, #eef1f4); background: var(--ty-color-surface-2, #f6f8fa); }
.p2sp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.p2sp-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    min-height: 74px; padding: 12px 10px; border-radius: 16px; text-align: center;
    border: 2px solid var(--ty-color-border, #e2e6ea); background: var(--ty-color-surface, #fff); color: var(--ty-color-text, #1c2128);
    font: 800 14px var(--ty-font-base, inherit);
    transition: transform .18s var(--p2-bounce), border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.p2sp-btn .bi { font-size: 22px; }
.p2sp-btn:hover { transform: translateY(-2px) scale(1.03); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); box-shadow: var(--ty-shadow-md, 0 8px 20px -12px rgba(0,0,0,.4)); }
.p2sp-btn--yes { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; }
.p2sp-btn--yes:hover { background: var(--ty-color-success-ink, #1a7f37); border-color: var(--ty-color-success-ink, #1a7f37); color: #fff; filter: brightness(1.08); }
.p2sp-btn--tick:hover { border-color: var(--ty-color-success-ink, #1a7f37); color: var(--ty-color-success-ink, #1a7f37); }
.p2sp-btn--skip:hover { border-color: var(--ty-color-danger-ink, #b32121); color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }

.p2sp-reach { padding: 16px 22px; border-bottom: 1px solid var(--ty-color-border, #eef1f4); }
.p2sp-reach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.p2sp-chip, a.p2sp-chip.ty-dir {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none;
    padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ty-color-border, #e2e6ea);
    background: var(--ty-color-surface, #fff); color: var(--ty-color-text, #1c2128);
    font: 700 13.5px var(--ty-font-base, inherit); transition: transform .18s var(--p2-bounce), border-color .15s, color .15s;
}
.p2sp-chip .bi, a.p2sp-chip.ty-dir .bi { font-size: 16px; color: var(--ty-color-primary, #1b6ec2); }
.p2sp-chip small { font-weight: 500; color: var(--ty-color-text-muted, #57606a); }
.p2sp-chip:hover, a.p2sp-chip.ty-dir:hover { transform: translateY(-1px); border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); }
a.p2sp-chip--dir.ty-dir { background: var(--ty-color-primary, #1b6ec2); color: #fff; border-color: transparent; }
a.p2sp-chip--dir.ty-dir .bi, a.p2sp-chip--dir.ty-dir:hover { color: #fff; }
a.p2sp-chip--dir.ty-dir .ty-dir-label { font: inherit; }
.p2sp-nocontact { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1); padding: 10px 4px; }

.p2sp-story { padding: 16px 22px 6px; }
.p2sp-story .plh-chips { display: none; } /* the hero already wears the chips */

.p2sp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 22px 22px; }
.p2sp-door {
    display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
    padding: 12px 14px; border-radius: 16px; border: 2px solid var(--ty-color-border, #e2e6ea);
    background: var(--ty-color-surface, #fff); color: var(--ty-color-text, #1c2128);
    transition: transform .18s var(--p2-bounce), border-color .15s;
}
.p2sp-door > .bi:first-child { font-size: 22px; color: var(--dom, #1b6ec2); }
.p2sp-door span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.p2sp-door b { font: 800 14px var(--ty-font-base, inherit); }
.p2sp-door small { font: 600 12px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2sp-door-go { font-size: 24px; color: var(--ty-color-text-subtle, #8a95a1); }
.p2sp-door:hover { transform: translateY(-2px); border-color: var(--dom, #1b6ec2); }
.p2sp-door:hover .p2sp-door-go { color: var(--dom, #1b6ec2); }
@media (max-width: 600px) { .p2sp-hero { flex-wrap: wrap; } .p2sp-foot { grid-template-columns: 1fr; } .p2sp-name { font-size: 22px; } }

/* Appointments read as appointments; a run that breaks their order says so. */
.p2-timed { font-weight: 800; color: var(--ty-color-text, #1c2128); }
.p2-tag--misordered { color: var(--ty-color-warning-ink, #9a5b00); background: var(--ty-color-warning-soft, #fdf1dd); }
.p2-stop--misordered .p2-stop-body { border-color: var(--ty-color-warning, #e0a100); box-shadow: inset 4px 0 0 var(--ty-color-warning, #e0a100); }

/* ── The forward rail, readable: a wider column, day headers you can read, job rows that look like jobs ── */
@media (min-width: 1241px) { .p2-grid--day { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(300px, 3.6fr); } }
.p2-aheadday { border-radius: 18px; }
.p2-aheadday-hd { padding: 12px 14px; gap: 10px; }
.p2-aheadday-when strong { font-size: 17px; }
.p2-aheadday-when span { font-size: 12.5px; }
.p2-aheadday-hd .ty-wx { font-size: 16px; }
.p2-aheadday-hd .p2-n { font-size: 12.5px; padding: 3px 10px; white-space: nowrap; }
.p2-aheadday-body { padding: 10px; gap: 8px; }
.p2-aheadday-empty { font-size: 12.5px; padding: 14px 8px; }
.p2-aheadday--quiet .p2-aheadday-hd { padding: 9px 14px; }
.p2-aheadday--quiet .p2-aheadday-when strong { font-size: 14px; }
.p2-ahead .p2-mini { align-items: flex-start; padding: 10px 12px; border-radius: 12px; border-left-width: 5px; gap: 10px; }
.p2-ahead .p2-mini-no { width: 28px; height: 28px; font-size: 13px; margin-top: 1px; }
.p2-mini-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.p2-ahead .p2-mini-title { font-size: 14.5px; font-weight: 800; white-space: normal; line-height: 1.2; }
/* block, not flex: text-overflow ellipsis only applies to a block's own text — a flex row just clips. */
.p2-mini-sub { display: block; font: 600 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-mini-sub .bi { margin-right: 5px; }
.p2-mini-sub .bi { color: var(--dom, var(--ty-color-primary, #1b6ec2)); font-size: 12px; }

.p2-col-date { color: var(--ty-color-text, #1c2128); font-weight: 800; }

/* The grip: the stop's drag handle, on the left of the number. Whole card drags; this says so. */
.p2-stop { grid-template-columns: 22px 42px minmax(0, 1fr) auto; }
.p2-grip { display: flex; align-items: center; justify-content: center; align-self: stretch; padding-top: 24px; color: var(--ty-color-text-subtle, #8a95a1); font-size: 18px; cursor: grab; }
.p2-grip:hover { color: var(--ty-color-primary, #1b6ec2); }
.p2-stop:active .p2-grip { cursor: grabbing; }
.p2-col-tip { display: inline-flex; align-items: center; gap: 4px; color: var(--ty-color-text-subtle, #8a95a1); font-weight: 600; }
@media (max-width: 600px) { .p2-stop { grid-template-columns: 18px 30px minmax(0, 1fr); } .p2-stop-acts { grid-column: 2 / -1; } }

/* ── Wide desktops: use the room. No cap on the page; wider gutters and gaps, a roomier rail, and on very wide
   screens the fortnight goes two-up so a week is visible without scrolling the rail. ─────────────────────── */
@media (min-width: 1600px) {
    .p2.container-fluid { padding-left: 28px; padding-right: 28px; }
    .p2-grid { gap: 22px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(300px, 3fr); }
    .p2-hero { gap: 22px; }
    .p2-stop { grid-template-columns: 24px 46px minmax(0, 1fr) auto; }
}
@media (min-width: 1900px) {
    .p2.container-fluid { padding-left: 36px; padding-right: 36px; }
    .p2-grid { gap: 26px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(560px, 5fr); }
    .p2-ahead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
    .p2-ahead-hd { grid-column: 1 / -1; }
    .p2-week { gap: 12px; }
    .p2-month { gap: 6px; }
}

/* ── Day change: the picked day glows, and the run's header glows as it swaps to that date ───────────────── */
.p2-day.on {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 22%, transparent), 0 12px 30px -12px var(--ty-color-primary, #1b6ec2);
    animation: p2-day-glow 1.1s ease-out;
}
@keyframes p2-day-glow {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 55%, transparent), 0 12px 30px -12px var(--ty-color-primary, #1b6ec2); }
    45%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 0%, transparent), 0 12px 30px -12px var(--ty-color-primary, #1b6ec2); }
    100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 22%, transparent), 0 12px 30px -12px var(--ty-color-primary, #1b6ec2); }
}
.p2-run-hd { position: relative; animation: p2-run-glow 1.6s ease-out; border-radius: inherit; }
@keyframes p2-run-glow {
    0%   { background: color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 18%, var(--ty-color-surface, #fff)); box-shadow: inset 0 0 0 2px var(--ty-color-primary, #1b6ec2); }
    60%  { background: color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 8%, var(--ty-color-surface, #fff)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 40%, transparent); }
    100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
.p2-run-hd .p2-col-date { display: inline-block; padding: 1px 8px; margin-left: -8px; border-radius: 8px; animation: p2-date-glow 1.6s ease-out; }
@keyframes p2-date-glow {
    0%   { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); transform: scale(1.06); }
    40%  { background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff); transform: scale(1); }
    41%  { background: var(--ty-color-primary-soft, #eef4fd); color: var(--ty-color-primary, #1b6ec2); }
    70%  { background: var(--ty-color-primary-soft, #eef4fd); color: var(--ty-color-primary, #1b6ec2); }
    100% { background: transparent; color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .p2-day.on, .p2-run-hd, .p2-run-hd .p2-col-date { animation: none; } }

/* ── Trade marks: the day strip shows one glyph per trade with a count; each run stop carries its trade glyph ── */
.p2-day-marks { gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; min-height: 14px; }
.p2-mark { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--dom, var(--ty-color-primary, #1b6ec2)); color: #fff; font: 800 10px/1 var(--ty-font-base, inherit); }
.p2-mark .bi { font-size: 10px; }
.p2-mark b { font-weight: 900; }
.p2-day.on .p2-mark { background: rgba(255,255,255,.28); color: inherit; }
.p2-day.past .p2-mark { opacity: .55; }
.p2-stop-ico { flex: none; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: var(--dom, var(--ty-color-primary, #1b6ec2)); }
.p2-stop--handled .p2-stop-ico { opacity: .7; }

/* ── Week view on a desktop: the board gets the row, the columns get the height ─────────────────────────
   Seven days across the viewport with room to read each stop (name, trade, time, street), columns as tall
   as the screen allows so a busy day never squashes, and the Decide column narrowed to a rail beside it. */
.p2-week .p2-mini-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.p2-week .p2-mini-sub { display: none; }
.p2-week .p2-mini-time { display: none; }
@media (min-width: 1241px) {
    .p2-week .p2-mini-time { display: inline; }
}
@media (min-width: 1600px) {
    .p2-grid--week { grid-template-columns: minmax(300px, 3fr) minmax(0, 13fr); gap: 22px; }
    .p2-week { gap: 12px; }
    .p2-wcol { min-height: calc(100vh - 380px); border-radius: 18px; }
    .p2-wcol-hd { padding: 12px 14px; gap: 8px; }
    .p2-wcol-when strong { font-size: 16px; }
    .p2-wcol-date { font-size: 12.5px; }
    .p2-wcol-hd .ty-wx { font-size: 17px; }
    .p2-wcol-hd .p2-n { font-size: 12.5px; padding: 3px 9px; }
    .p2-wcol-body { padding: 10px; gap: 8px; }
    .p2-wcol-empty { font-size: 13px; padding: 18px 10px; border-radius: 12px; }
    .p2-week .p2-mini { padding: 10px 12px; border-radius: 12px; border-left-width: 5px; gap: 10px; align-items: flex-start; }
    .p2-week .p2-mini-no { width: 26px; height: 26px; font-size: 12px; margin-top: 1px; }
    .p2-week .p2-mini-title { font-size: 14px; font-weight: 800; -webkit-line-clamp: 2; }
    .p2-week .p2-mini-sub { display: block; font: 600 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .p2-week .p2-mini-sub .bi { color: var(--dom, var(--ty-color-primary, #1b6ec2)); margin-right: 4px; }
    .p2-week .p2-mini-time { display: none; }
    .p2-wcol-ft { padding: 10px 12px; font-size: 12px; gap: 8px; }
    .p2-wcol-ft .p2-btn { font-size: 12px; padding: 5px 10px; }
}
@media (min-width: 1900px) {
    .p2-grid--week { grid-template-columns: minmax(320px, 3fr) minmax(0, 15fr); gap: 26px; }
    .p2-week { gap: 14px; }
    .p2-week .p2-mini-title { font-size: 15px; }
    .p2-week .p2-mini-sub { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ── Week/month on a desktop: reclaim height, spend width ─────────────────────────────────────────────
   The hero is a morning greeting; in the week and month views it shrinks to a strip so the board starts
   higher. The Decide column becomes a fixed rail and the board takes everything else. Day columns are as
   tall as the viewport leaves (above the bottom bar when there is one), so the week never ends short. */
@media (min-width: 1600px) {
    .p2--week .p2-hero, .p2--month .p2-hero { padding: 12px 22px; gap: 14px; }
    .p2--week .p2-verdict, .p2--month .p2-verdict { font-size: 22px; }
    .p2--week .p2-verdict-sub, .p2--month .p2-verdict-sub { margin-top: 2px; font-size: 12.5px; }
    .p2--week .p2-hero-side, .p2--month .p2-hero-side { gap: 8px; }
    .p2-grid--week { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
    .p2-grid--week .p2-board { display: flex; flex-direction: column; }
    .p2-week { flex: 1; min-height: calc(100vh - 430px - var(--ty-bottomnav-h, 0px)); align-items: stretch; }
    .p2-wcol { min-height: 0; }
    .p2-week .p2-mini { padding: 8px 10px; gap: 8px; }
    .p2-week .p2-mini-no { width: 22px; height: 22px; font-size: 11px; }
    .p2-week .p2-mini-title { font-size: 13.5px; }
}
@media (min-width: 1900px) {
    .p2-grid--week { grid-template-columns: 320px minmax(0, 1fr); gap: 26px; }
    .p2-week .p2-mini { padding: 10px 12px; gap: 10px; }
    .p2-week .p2-mini-no { width: 26px; height: 26px; font-size: 12px; }
    .p2-week .p2-mini-title { font-size: 15px; }
}

/* Week titles wrap whole words: the clamp ends the LAST line, never the first. */
.p2-week .p2-mini-title { overflow-wrap: anywhere; word-break: normal; text-overflow: clip; }

/* Collapsible Decide column (desktop week/month): folded, it is a slim rail with the step number and
   the count, and the board takes the rest of the row. */
.p2-collapse { display: none; margin-left: 6px; width: 30px; height: 30px; font-size: 13px; }
@media (min-width: 1241px) {
    .p2--week .p2-collapse, .p2--month .p2-collapse { display: inline-flex; }
    .p2--decide-collapsed .p2-grid--week, .p2--decide-collapsed .p2-grid--month { grid-template-columns: 64px minmax(0, 1fr); }
    .p2--decide-collapsed .p2-decide { overflow: hidden; }
    .p2--decide-collapsed .p2-decide .p2-col-hd { flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; }
    .p2--decide-collapsed .p2-decide .p2-col-titles { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .p2--decide-collapsed .p2-decide .p2-col-title { font-size: 0; gap: 6px; flex-direction: column; }
    .p2--decide-collapsed .p2-decide .p2-col-title .p2-n { font-size: 12px; }
    .p2--decide-collapsed .p2-decide .p2-col-hint { display: none; }
    .p2--decide-collapsed .p2-decide .p2-collapse { margin: 0; }
    .p2--decide-collapsed .p2-decide > :not(.p2-col-hd) { display: none; }
}

/* ── Month view on a desktop: the grid fills the viewport, cells grow, more stops show ─────────────────── */
.p2-mcell-body .p2-mini-text { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.p2-mcell-body .p2-mini-sub { display: none; }
.p2-mcell-body .p2-mini:nth-child(n+4) { display: none; }
.p2-mcell-more--lg { display: none; }
@media (min-width: 1600px) {
    .p2-grid--month { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
    .p2-grid--month .p2-board { display: flex; flex-direction: column; }
    /* A fixed height the rows DIVIDE (min-height would let content push the rows past the viewport); the
       header row stays auto, every week row shares the rest, and a busy day scrolls inside its cell. */
    .p2-month { flex: none; height: calc(100vh - 430px - var(--ty-bottomnav-h, 0px)); min-height: 520px; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); gap: 10px; }
    .p2-mcell-body { overflow-y: auto; scrollbar-width: thin; }
    .p2-mdow { font-size: 12px; padding: 4px 0 6px; }
    .p2-mcell { min-height: 0; border-radius: 16px; }
    .p2-mcell-hd { padding: 8px 10px; gap: 6px; }
    .p2-mcell-num { font-size: 18px; }
    .p2-mcell-hd .p2-n { font-size: 11.5px; padding: 2px 8px; }
    .p2-mcell-hd .ty-wx { font-size: 14px; }
    .p2-mcell-body { padding: 0 8px 8px; gap: 5px; min-height: 0; }
    .p2-mcell-body .p2-mini { padding: 6px 8px; border-radius: 10px; border-left-width: 4px; gap: 8px; align-items: flex-start; }
    .p2-mcell-body .p2-mini-no { width: 20px; height: 20px; font-size: 10.5px; margin-top: 1px; }
    .p2-mcell-body .p2-mini-title { font-size: 13px; font-weight: 800; -webkit-line-clamp: 1; }
    .p2-mcell-body .p2-mini-sub { display: block; font: 600 11px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .p2-mcell-body .p2-mini-sub .bi { color: var(--dom, var(--ty-color-primary, #1b6ec2)); margin-right: 4px; }
    .p2-mcell-body .p2-mini:nth-child(n+4) { display: flex; }
    .p2-mcell-more--sm { display: block; font-size: 11.5px; position: sticky; bottom: 0; background: var(--ty-color-surface, #fff); }
    .p2-mcell-more--lg { display: none; }
    .p2-mcell-more { padding: 2px 4px; }
}
@media (min-width: 1900px) {
    .p2-grid--month { grid-template-columns: 320px minmax(0, 1fr); gap: 26px; }
    .p2-month { gap: 12px; }
    .p2-mcell-body .p2-mini-title { font-size: 14px; }
    .p2-mcell-body .p2-mini-sub { font-size: 12px; }
}

/* The board's skeleton keeps the column padding the real board has. */
.p2-grid--skeleton .p2-col { padding: 0; }
.p2-col-bd-sk { padding: 14px 16px; width: 100%; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.p2-col-bd-sk > * { flex: 1 1 auto; width: 100%; }
.p2-grid--skeleton .p2-col { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }

/* The loading footprint mirrors the real grid explicitly (it renders before anything else has laid out). */
.p2-grid--skeleton { display: grid; gap: 16px; align-items: start; }
.p2-grid--skeleton.p2-grid--day { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(200px, 2.6fr); }
.p2-grid--skeleton.p2-grid--week, .p2-grid--skeleton.p2-grid--month { grid-template-columns: minmax(0, 4fr) minmax(0, 10fr); }
@media (min-width: 1600px) { .p2-grid--skeleton.p2-grid--week, .p2-grid--skeleton.p2-grid--month { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; } }
@media (max-width: 1240px) { .p2-grid--skeleton.p2-grid--day, .p2-grid--skeleton.p2-grid--week, .p2-grid--skeleton.p2-grid--month { grid-template-columns: 1fr; } }


/* ============================================================================
   The header bar owns the map (2026-09-03). "Show map" and "Expand" moved out
   of the run column into the briefing, beside the Go button, so they read the
   same in Day, Week and Month. They wear the CTA's geometry — same height,
   radius, weight and lift — in an outlined primary treatment, so they are
   obviously the Go button's peers without competing with its green.
   ============================================================================ */
.p2-hero-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.p2-mapacts { display: inline-flex; align-items: center; gap: 6px; }

.p2-cta--map,
.p2-cta--map:hover,
.p2-cta--map:focus-visible {
    background: var(--ty-color-surface, #fff);
    color: var(--ty-color-primary, #1b6ec2);
    border: 2px solid var(--ty-color-primary, #1b6ec2);
    /* One less pixel of padding each side than .p2-cta: the 2px border makes up the difference, so this
       button and the green Go button are exactly the same height. */
    padding: 13px 23px;
    box-shadow: var(--ty-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.p2-cta--map:hover { background: var(--ty-color-primary-soft, #eef4fd); filter: none; }
.p2-cta--map .bi { color: inherit; }
.p2-cta-caret { font-size: 13px !important; opacity: .75; }
/* Open: filled, so the button says the map below it belongs to it. */
.p2-cta--map.on, .p2-cta--map.on:hover {
    background: var(--ty-color-primary, #1b6ec2);
    color: var(--ty-color-primary-contrast, #fff);
    border-color: var(--ty-color-primary, #1b6ec2);
}
/* The expand twin: icon only, square, same height as its sibling. */
.p2-cta--mapfull { padding-left: 0; padding-right: 0; width: 48px; justify-content: center; gap: 0; }
.p2-cta--mapfull .bi { font-size: 17px !important; }

@media (max-width: 980px) {
    .p2-hero-acts { justify-content: flex-start; width: 100%; }
    .p2-mapacts { flex: 1 1 auto; }
    .p2-cta--map { flex: 1 1 auto; justify-content: center; }
    .p2-cta--mapfull { flex: 0 0 auto; }
}
@media (max-width: 600px) {
    .p2-hero-acts a.p2-cta, .p2-hero-acts .p2-cta:not(.p2-cta--map) { flex: 1 1 100%; justify-content: center; }
}

/* ── The day strip on a phone ─────────────────────────────────────────────────────────────────────────
   Seven equal columns inside a 390px viewport left each day button 14px wide (measured) and still pushed
   the row 17px past the right edge — a date picker nobody can hit, on the device this screen is for. The
   week becomes a horizontal scroller instead: real 58px targets, snapped. Below 600px only; the equal
   grid is right wherever there is room for it. */
@media (max-width: 600px) {
    .p2-days-row {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 58px;
        /* A flex child sized by its content refuses to shrink below it, so the scroller pushed the
           "next week" chevron 33px off the right edge (measured). This is what lets it scroll. */
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .p2-days-row::-webkit-scrollbar { display: none; }
    .p2-day { scroll-snap-align: center; padding: 10px 4px; border-radius: 14px; }
    .p2-day-num { font-size: 22px; }
    .p2-day-dow { font-size: 11px; }
    /* The chevrons either side are a tap target too, not a 28px sliver. */
    .p2-days > .ty-iconbtn { min-width: 36px; min-height: 36px; }
    /* And the strip takes the whole line. Sharing a flex row with the view switcher left it 19px wide
       (measured) — flex-wrap only breaks BETWEEN items, so a shrinkable item never wraps, it just gets
       crushed, and the "next week" chevron ends up 41px off the right edge of the phone. */
    .p2-viewrow .p2-days { flex: 1 1 100%; order: 2; }
}

/* The strip: the page's one inline map, above the board in every view. */
.p2-map-strip {
    display: block; margin: 0 0 14px; overflow: hidden;
    border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 20px;
    background: var(--ty-color-surface, #fff);
    box-shadow: var(--ty-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.p2-map-strip .p2-map-bar { padding: 10px 14px; }
.p2-map-strip .p2-map-bar-lbl { font-size: 13px; }
.p2-map-strip .p2-map { height: clamp(220px, 34vh, 420px); }


/* A card or stop whose icon is the shared WorkMark (owner + trade coins) draws its own coins — the
   container steps back to a plain wrapper so the mark is not boxed twice. */
.p2-card-ico:has(.wm), .p2-stop-ico:has(.wm) { background: transparent; width: auto; height: auto; box-shadow: none; }