/* ====================================================================================================================================
   Planner mode (planner-panel.js and planner-page-*.js), the tag a planned view wears in Design (planner-tag.js), and the Settings dialog.
   Plain CSS, linked from roblox-ui-builder.eta. Everything of the Planner's own is under .pn / .pn-*; it reads the builder's tokens
   (--ub-*) so it follows the editor's accent, with the default dark theme's values as fallbacks.
   ==================================================================================================================================== */

/* ---- the builder while Planner mode is open: the pane takes the whole workspace */
.ub-planner[hidden] { display: none !important; }
.ub.is-planner .ub-panel,
.ub.is-planner .ub-canvasbar,
.ub.is-planner .ub-dock,
.ub.is-planner .ub-timelinebar,
.ub.is-planner #uiBuilderTimeline,
.ub.is-planner .ui-builder__pane--main,
.ub.is-planner #builderCanvasWrap,
.ub.is-planner #uiBuilderMainHead,
.ub.is-planner #uiBuilderMainFoot { display: none !important; }
.ub.is-planner .ub-body { grid-template-columns: minmax(0, 1fr); }
.ub.is-planner .ub-stage { grid-column: 1 / -1; }
.ub-planner { position: absolute; inset: 0; z-index: 12; overflow: hidden; }

/* ---- Settings: the dialog gives the appearance controls room without crowding the toolbar */
#uiBuilderAppearanceMenu {
  position: fixed !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%); width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important; max-height: calc(100dvh - 48px) !important;
  padding: 0; overflow: hidden; box-shadow: 0 24px 100px #0009;
}
.ub-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; gap: 16px; }
.ub-settings-header h2 { font-size: 20px; margin: 0; }
.ub-settings-tabs { display: flex; gap: 8px; padding: 0 24px; border-bottom: 1px solid #ffffff18; }
.ub-settings-tabs [role=tab] { display: flex; align-items: center; gap: 8px; background: none; color: inherit; border: 0; border-bottom: 2px solid var(--ub-ac, #ff8c00); padding: 12px 4px; font: inherit; cursor: pointer; }
.ub-settings-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px; overflow: auto; max-height: calc(100dvh - 190px); }
.ub-settings-content > .ub-pop__section { min-width: 0; margin: 0; padding: 18px; border: 1px solid #ffffff18; border-radius: 12px; }
.ub-settings-content > #uiBuilderAppearanceStatus { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .ub-settings-content { grid-template-columns: 1fr; padding: 16px; gap: 16px; } .ub-settings-header { padding: 16px; } .ub-settings-tabs { padding: 0 16px; } }
/* the plan's own sections in it (planner-appearance.js) */
.pn-field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; font-size: 12px; }
.pn-field > span { color: var(--ub-tx3, #8c8c98); }
.pn-field input, .pn-field select { min-width: 0; padding: 7px; background: var(--ub-bg2, #18181c); border: 1px solid var(--ub-line2, #33333a); border-radius: 6px; color: var(--ub-tx, #f3f3f5); font: inherit; }
.pn-field input:focus, .pn-field select:focus { outline: 2px solid var(--ub-ac, #ff8c00); outline-offset: 1px; }
.pn-field .ub-col { width: 100%; justify-content: flex-start; min-height: 34px; }
.pn-appearance > button { margin: 12px 6px 0 0; }

/* ---- the Planner's ground */
.pn, .pn-menu {
  --pn-bg: var(--ub-bg0, #0b0b0d); --pn-bg1: var(--ub-bg1, #111114); --pn-bg2: var(--ub-bg2, #18181c); --pn-bg3: var(--ub-bg3, #212126); --pn-bg4: var(--ub-bg4, #2b2b31);
  --pn-line: var(--ub-line, #25252b); --pn-line2: var(--ub-line2, #33333a); --pn-line3: var(--ub-line3, #4a4a54);
  --pn-tx: var(--ub-tx, #f3f3f5); --pn-tx2: var(--ub-tx2, #b8b8c2); --pn-tx3: var(--ub-tx3, #8c8c98);
  --pn-ac: var(--ub-ac, #ff8c00); --pn-ac-tint: var(--ub-ac-tint, rgba(255, 140, 0, 0.14)); --pn-ac-ink: #111114;
  --pn-blue: #8fc4ff; --pn-warn: #ffcf8a; --pn-bad: #ffb3b3; --pn-good: #8fe8bf; --pn-green: var(--ub-green, #3ddc97);
  --pn-mono: 'JetBrains Mono', monospace;
  color: var(--pn-tx); font: 14px/1.45 'Segoe UI', system-ui, sans-serif; text-align: left;
}
.pn *, .pn *::before, .pn *::after, .pn-menu *, .pn-menu *::before { box-sizing: border-box; }
/* :where() keeps these resets weaker than any class below, so a class can set its own size and weight */
:where(.pn, .pn-menu) button { font: inherit; }
:where(.pn) :is(input, textarea, select) { font: inherit; }
.pn button, .pn-menu button { cursor: pointer; }
.pn :focus-visible, .pn-menu :focus-visible { outline: 2px solid var(--pn-ac); outline-offset: 2px; }
.pn [hidden] { display: none !important; }
.ub-planner.pn { display: flex; flex-direction: column; background-color: var(--pn-bg); background-position: center; background-repeat: no-repeat; }

/* words */
.pn-h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.pn-h2 { margin: 0; font-size: 20px; font-weight: 600; }
.pn-h3 { margin: 0; font-size: 17px; font-weight: 600; }
.pn-strong { font-weight: 600; }
.pn-quiet { color: var(--pn-tx3); }
.pn-soft { color: var(--pn-tx2); }
.pn-kicker { font-size: 12px; color: var(--pn-tx3); }
.pn-bad { color: var(--pn-bad); }
.pn-good { color: var(--pn-good); }
.pn-center { text-align: center; }
.pn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.pn-spacer { flex: 1 1 auto; }
.pn-between { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pn-stack2, .pn-stack4, .pn-stack6, .pn-stack8, .pn-stack10, .pn-stack12 { display: flex; flex-direction: column; }
.pn-stack2 { gap: 2px; } .pn-stack4 { gap: 4px; } .pn-stack6 { gap: 6px; } .pn-stack8 { gap: 8px; } .pn-stack10 { gap: 10px; } .pn-stack12 { gap: 12px; }
.pn-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-pair { display: flex; gap: 6px; }
.pn-pair > * { flex: 1 1 0; min-width: 0; }

/* ---- header */
.pn-head { flex: none; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 0 20px; background: var(--pn-bg1); border-bottom: 1px solid var(--pn-line); }
.pn-head__id { display: flex; align-items: center; gap: 10px; }
.pn-tag { font: 600 11px var(--pn-mono); letter-spacing: 0.08em; color: var(--pn-ac); }
.pn-head__name { padding: 0; background: none; border: 0; color: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.pn-head__name:hover { text-decoration: underline; text-decoration-color: var(--pn-line3); text-underline-offset: 3px; }
.pn-input--head { min-height: 32px; width: 220px; max-width: 100%; padding: 0 8px; font-weight: 600; }
.pn-nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; }
.pn-nav__link { display: flex; align-items: center; min-height: 52px; padding: 0 14px; background: none; border: 0; color: var(--pn-tx2); }
.pn-nav__link:hover { color: var(--pn-tx); }
.pn-nav__link[aria-current=page] { font-weight: 600; color: var(--pn-tx); box-shadow: inset 0 -2px 0 var(--pn-ac); }

/* ---- page frame */
.pn-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pn-split { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-height: 0; }
.pn-main { flex: 999 1 560px; min-width: 0; max-height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 32px; overflow: auto; }
.pn-body > .pn-main { flex: 1 1 auto; min-height: 0; }
.pn-main > * { flex-shrink: 0; }
.pn-main--gap18 { gap: 18px; flex-basis: 640px; }
.pn-main--gap20 { flex-basis: 640px; }
.pn-main--gap22 { gap: 22px; }
.pn-main--gap24 { gap: 24px; flex-basis: 600px; }
.pn-pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-pagehead--center { align-items: center; gap: 12px 16px; }
.pn-pagehead__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-aside { max-height: 100%; display: flex; flex-direction: column; background: var(--pn-bg1); border-left: 1px solid var(--pn-line); overflow: auto; }
.pn-aside > * { flex-shrink: 0; }
.pn-aside--ideas { flex: 1 1 320px; max-width: 380px; gap: 20px; padding: 28px 24px; }
.pn-aside--players { flex: 1 1 400px; max-width: 480px; gap: 20px; padding: 28px; }
.pn-aside--screens { flex: 1 1 300px; max-width: 340px; gap: 24px; padding: 24px; }
.pn-aside--schedule { flex: 1 1 300px; max-width: 360px; gap: 22px; padding: 28px 24px; }
.pn-aside--review { flex: 1 1 380px; max-width: 460px; gap: 18px; padding: 28px; }
/* the one thing to do next stays in view however long the panel above it is */
.pn-aside__foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; background: var(--pn-bg1); box-shadow: 0 28px 0 var(--pn-bg1); }
.pn-aside__block { padding-top: 22px; border-top: 1px solid var(--pn-line); }

/* ---- controls */
.pn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; background: transparent; color: var(--pn-tx2); border: 1px solid var(--pn-line2); border-radius: 8px; }
.pn-btn:hover { color: var(--pn-tx); border-color: var(--pn-line3); }
.pn-btn[aria-pressed=true] { background: var(--pn-ac-tint); color: var(--pn-tx); border-color: var(--pn-ac); }
.pn-btn--tall { min-height: 44px; padding: 0 18px; border-radius: 10px; color: var(--pn-tx); }
.pn-btn--block { width: 100%; min-height: 40px; background: var(--pn-bg2); color: var(--pn-tx); }
.pn-btn--solid { padding: 0 14px; background: var(--pn-bg3); color: var(--pn-tx); }
.pn-btn--small { min-height: 32px; }
.pn-btn--start { align-self: flex-start; }
.pn-btn--end { margin-top: auto; color: var(--pn-tx2); border-radius: 8px; padding: 0 14px; }
.pn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--pn-ac); color: var(--pn-ac-ink); font-weight: 600; border: 0; }
.pn-primary:hover { filter: brightness(1.08); }
.pn-primary--big { min-height: 52px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.pn-primary--bar { min-height: 48px; padding: 0 24px; border-radius: 10px; }
.pn-primary--bar40 { min-height: 40px; padding: 0 18px; border-radius: 10px; }
.pn-primary--block { min-height: 44px; border-radius: 10px; }
.pn-primary--start { align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 0 20px; border-radius: 10px; }
.pn-ghost { min-height: 36px; padding: 0 12px; background: transparent; border: 0; border-radius: 8px; color: var(--pn-tx3); }
.pn-ghost:hover { color: var(--pn-tx); }
.pn-ghost--center { align-self: center; }
.pn-ghost--start { align-self: flex-start; padding: 0; }
.pn-link { padding: 0; background: none; border: 0; color: var(--pn-tx2); text-decoration: underline; }
.pn-link:hover { color: var(--pn-tx); }
.pn-link--start { align-self: flex-start; }
.pn-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 0; border-radius: 8px; color: var(--pn-tx3); }
.pn-icon:hover { background: var(--pn-bg2); color: var(--pn-tx); }
.pn-icon--sm { width: 28px; height: 28px; }
.pn-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; color: var(--pn-tx2); border: 1px solid var(--pn-line2); border-radius: 8px; }
.pn-iconbtn:hover { color: var(--pn-tx); border-color: var(--pn-line3); }
.pn-pill { min-height: 32px; padding: 0 12px; background: transparent; color: var(--pn-tx2); border: 1px solid var(--pn-line2); border-radius: 16px; }
.pn-pill:hover { color: var(--pn-tx); }
.pn-pill[aria-pressed=true] { background: var(--pn-ac-tint); color: var(--pn-tx); border-color: var(--pn-ac); }
.pn-pill--tall { min-height: 36px; border-radius: 18px; }
.pn-pill--journey { min-height: 36px; padding: 0 14px; border-radius: 18px; }
.pn-pill--journey[aria-pressed=true] { font-weight: 600; }
.pn-pill--person { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 6px; }
.pn-add { min-height: 28px; padding: 0 10px; background: transparent; border: 1px dashed var(--pn-line3); border-radius: 8px; color: var(--pn-tx3); }
.pn-add:hover { color: var(--pn-tx); border-color: var(--pn-tx3); }
.pn-add--round { border-radius: 14px; }
.pn-add--tall { min-height: 32px; padding: 0 12px; }
.pn-add--tall.pn-add--round { border-radius: 16px; }
.pn-add--start { align-self: flex-start; }
.pn-add--swatch { width: 56px; height: 56px; padding: 0 4px; border-radius: 12px; font-size: 12px; line-height: 1.2; }
.pn-chip { padding: 3px 10px; background: var(--pn-bg2); border: 1px solid var(--pn-line2); border-radius: 8px; color: var(--pn-tx); }
button.pn-chip--edit { text-align: left; }
button.pn-chip--edit:hover { border-color: var(--pn-line3); }
.pn-chip--missing { color: var(--pn-bad); border-color: rgba(255, 92, 92, 0.5); }
.pn-chip--pad { padding: 5px 10px; }
.pn-chipbtn { padding: 0; background: none; border: 0; border-radius: 8px; color: inherit; }
.pn-chipbtn:hover .pn-info { border-color: rgba(78, 161, 255, 0.7); }
.pn-chipbtn[draggable=true] { cursor: grab; }
.pn-info { display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 10px; background: rgba(78, 161, 255, 0.12); border: 1px solid rgba(78, 161, 255, 0.35); border-radius: 8px; }
.pn-info__value { font: 12px var(--pn-mono); color: var(--pn-blue); }
.pn-info__value:empty { display: none; }
.pn-textbtn { padding: 0; background: none; border: 0; color: inherit; text-align: left; overflow-wrap: anywhere; }
.pn-textbtn:hover { text-decoration: underline; text-decoration-color: var(--pn-line3); text-underline-offset: 3px; }
.pn-input { min-width: 0; min-height: 40px; padding: 0 12px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line2); border-radius: 8px; }
.pn-input::placeholder, .pn-textarea::placeholder, .pn-start__input::placeholder, .pn-ideabar__input::placeholder, .pn-refs__input::placeholder { color: var(--pn-tx3); opacity: 1; }
.pn-input:focus, .pn-textarea:focus, .pn-select:focus, .pn-start__input:focus, .pn-ideabar__input:focus { outline: 2px solid var(--pn-ac); outline-offset: 1px; }
.pn-row .pn-input, .pn-journeys .pn-input, .pn-layouttabs .pn-input, .pn-pagehead .pn-input, .pn-inline .pn-input, .pn-weekcard .pn-input { min-height: 32px; padding: 0 10px; }
.pn-input--block { width: 100%; }
.pn-input--wide { flex: 1 1 240px; }
.pn-input--pill { border-radius: 18px; min-height: 36px !important; }
.pn-input--tall { min-height: 44px; padding: 0 14px; border-radius: 10px; }
.pn-input--name { width: 132px; }
.pn-input--value { width: 104px; }
.pn-input--tiny { width: 84px; min-height: 28px; padding: 0 6px; font-size: 13px; }
.pn-input--h2 { min-height: 36px; font-size: 20px; font-weight: 600; width: min(420px, 100%); }
.pn-input--h3 { min-height: 32px; font-size: 16px; font-weight: 600; width: min(320px, 100%); padding: 0 8px; }
.pn-input--name-lg { min-height: 36px; padding: 0 10px; font-size: 17px; font-weight: 600; }
.pn-player__fields .pn-input { min-height: 36px; padding: 0 10px; }
.pn-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pn-textarea { width: 100%; min-height: 84px; padding: 10px 12px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line2); border-radius: 8px; resize: vertical; }
.pn-select { width: 100%; min-height: 44px; padding: 0 10px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line2); border-radius: 8px; }
.pn-pair .pn-select, .pn-pair .pn-input { min-height: 36px; }
.pn-pair--label { align-items: center; gap: 10px; }
.pn-pair--label > label { flex: none; }
.pn-toggle { display: flex; border: 1px solid var(--pn-line2); border-radius: 8px; overflow: hidden; }
.pn-toggle__btn { min-height: 36px; padding: 0 14px; background: transparent; color: var(--pn-tx2); border: 0; }
.pn-toggle__btn[aria-pressed=true] { background: var(--pn-bg3); color: var(--pn-tx); }
.pn-tab { min-height: 36px; padding: 0 14px; background: transparent; color: var(--pn-tx2); border: 1px solid transparent; border-radius: 8px; }
.pn-tab:hover { color: var(--pn-tx); }
.pn-tab[aria-pressed=true] { background: var(--pn-bg3); color: var(--pn-tx); border-color: var(--pn-line2); }
.pn-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pn-dot--warn { background: var(--pn-warn); }
.pn-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: #111114; }
.pn-avatar--sm { width: 20px; height: 20px; font-size: 11px; }
.pn-avatar--md { width: 44px; height: 44px; font-size: 18px; }
.pn-avatar--lg { width: 56px; height: 56px; font-size: 24px; }
.pn-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; background: var(--pn-bg2); border: 1px solid var(--pn-line2); border-radius: 14px; }
.pn-mark { flex: none; width: 8px; height: 8px; }
.pn-mark--dot { border-radius: 50%; }
.pn-mark--square { border-radius: 2px; }
.pn-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pn-tx2); }
.pn-arrow { flex: none; color: var(--pn-line3); }
.pn-stage { display: inline-flex; align-items: center; gap: 6px; }
.pn-stage--planned { color: var(--pn-tx2); }
.pn-stage--sketched { color: var(--pn-blue); }
.pn-stage--done { color: var(--pn-good); }

/* a menu (planner-ui.js) */
.pn-menu { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-width: 200px; max-width: 340px; padding: 6px; background: var(--pn-bg2); border: 1px solid var(--pn-line2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); overflow: auto; }
.pn-menu__heading { padding: 6px 10px 2px; font-size: 12px; color: var(--pn-tx3); }
.pn-menu__item { flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; color: var(--pn-tx); text-align: left; }
.pn-menu__item:hover, .pn-menu__item:focus-visible { background: var(--pn-bg3); }
.pn-menu__item:disabled { color: var(--pn-tx3); cursor: default; background: transparent; }
.pn-menu__item--danger { color: var(--pn-bad); }
.pn-menu__label { flex: 1 1 auto; }
.pn-menu__hint { color: var(--pn-tx3); font-size: 12px; }
.pn-menu__tick { flex: none; display: inline-flex; width: 14px; color: var(--pn-green); visibility: hidden; }
.pn-menu__item[aria-checked=true] .pn-menu__tick { visibility: visible; }
.pn-partsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 264px; }
.pn-partsgrid__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: transparent; border: 0; border-radius: 8px; color: var(--pn-tx2); font-size: 12px; }
.pn-partsgrid__item:hover, .pn-partsgrid__item:focus-visible { background: var(--pn-bg3); color: var(--pn-tx); }

/* ---- an empty plan (and an empty Screens): one question */
.pn-start { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px; }
.pn-start__chain { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 1100px; margin: 0; padding: 0; list-style: none; }
.pn-start__item { display: flex; align-items: center; gap: 10px; }
.pn-start__step { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: var(--pn-bg2); border: 1px solid var(--pn-line); border-radius: 12px; }
.pn-start__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pn-bg4); color: var(--pn-tx2); font-size: 12px; font-weight: 600; }
.pn-start__q { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; text-align: center; }
.pn-start__form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 620px; }
.pn-start__input { flex: 1 1 320px; min-width: 0; min-height: 52px; padding: 0 18px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line2); border-radius: 12px; font-size: 17px; }
.pn-start__alt { margin: 0; color: var(--pn-tx3); }

/* ---- Flow */
.pn-journeys { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pn-flow { display: flex; align-items: stretch; overflow-x: auto; padding: 2px 2px 6px; }
.pn-flow__cell { display: flex; align-items: center; flex: 1 1 0; min-width: 176px; max-width: 236px; }
.pn-flow__gap { flex: none; width: 16px; }
.pn-stepcard { flex: 1 1 auto; align-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line); border-radius: 12px; }
.pn-stepcard:hover { border-color: var(--pn-line2); }
.pn-stepcard[aria-pressed=true] { background: var(--pn-bg3); border-color: var(--pn-ac); }
.pn-stepcard__name { font-weight: 600; overflow-wrap: anywhere; }
.pn-stepcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12px; }
.pn-thumb { flex: none; display: flex; justify-content: center; height: 92px; border-radius: 6px; overflow: hidden; }
.pn-thumb--none { align-items: center; border: 1px dashed var(--pn-line2); color: var(--pn-tx3); font-size: 12px; }
.pn-thumb__holder { position: relative; flex: none; display: block; overflow: hidden; }
.pn-thumb__page { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; pointer-events: none; }
.pn-addstep { flex: 0 0 224px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; border: 1px dashed var(--pn-line2); border-radius: 12px; }
.pn-step { display: flex; flex-direction: column; gap: 20px; padding: 22px 24px 24px; background: var(--pn-bg1); border: 1px solid var(--pn-line); border-radius: 16px; }
.pn-step__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-step__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-step__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pn-h2__btn { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; }
.pn-track { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pn-track__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pn-tx3); }
.pn-track__item.is-done { color: var(--pn-tx); }
.pn-track__todo { width: 7px; height: 7px; border: 1.5px solid var(--pn-line3); border-radius: 50%; }
.pn-step__cols { display: flex; gap: 20px 48px; flex-wrap: wrap; }
.pn-step__col { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pn-step__col--wide { flex-basis: 420px; }
.pn-row { display: flex; gap: 16px; align-items: baseline; }
.pn-row--top { align-items: flex-start; }
.pn-row__label { flex: 0 0 116px; color: var(--pn-tx3); white-space: nowrap; }
.pn-row--narrow .pn-row__label { flex-basis: 96px; }
.pn-row--look .pn-row__label { flex-basis: 88px; }
.pn-row__value { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pn-row__value--stack { flex-direction: column; align-items: flex-start; }
.pn-row__value--stack12 { flex-direction: column; align-items: flex-start; gap: 12px; }
.pn-row__value--loose { gap: 12px; align-items: baseline; }
.pn-row__value--swatches { gap: 14px; align-items: flex-start; }
.pn-question { display: flex; align-items: baseline; gap: 8px; }

/* ---- Ideas */
.pn-ideabar { display: flex; gap: 10px; flex-wrap: wrap; max-width: 760px; }
.pn-ideabar__input { flex: 1 1 320px; min-width: 0; min-height: 48px; padding: 0 16px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line2); border-radius: 10px; font-size: 15px; }
.pn-ideaboard { overflow-x: auto; padding: 2px 2px 6px; }
.pn-ideaboard__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 760px; }
.pn-ideacol { display: flex; flex-direction: column; gap: 10px; min-height: 120px; padding: 12px; border-radius: 16px; border: 1px solid var(--pn-line); background: var(--pn-bg1); }
.pn-ideacol--inbox { border: 1px dashed var(--pn-line2); background: transparent; }
.pn-ideacol.is-target { border-color: var(--pn-ac); }
.pn-ideacol__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px; font-size: 14px; font-weight: 600; }
.pn-ideacol__count { font-weight: 400; color: var(--pn-tx3); }
.pn-idea { flex: none; display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; overflow: hidden; border-radius: 12px; border: 1px solid var(--pn-line); background: var(--pn-bg2); color: var(--pn-tx); text-decoration: none; }
.pn-idea--note { background: var(--pn-note, #fff3b8); border-color: var(--pn-note, #fff3b8); color: var(--pn-note-ink, #3a3413); }
/* the paper a note is on (planner-cards.js NOTE_COLORS) */
.pn-paper--yellow { --pn-note: #fff3b8; --pn-note-ink: #3a3413; }
.pn-paper--pink { --pn-note: #ffd0e4; --pn-note-ink: #45152c; }
.pn-paper--blue { --pn-note: #cfe6ff; --pn-note-ink: #12304d; }
.pn-paper--green { --pn-note: #c9f2dc; --pn-note-ink: #103c28; }
.pn-paper--orange { --pn-note: #ffd9ae; --pn-note-ink: #45260a; }
.pn-paper--violet { --pn-note: #e1d6ff; --pn-note-ink: #2a1c57; }
.pn-idea[aria-pressed=true] { border-color: var(--pn-ac); box-shadow: 0 0 0 2px var(--pn-ac); }
.pn-idea__img { flex: none; display: block; width: 100%; height: 72px; object-fit: cover; background: var(--pn-bg3); }
.pn-idea__img--none, .pn-idea__preview--none { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--pn-tx3); font-size: 12px; }
.pn-idea__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.pn-idea__text { overflow-wrap: anywhere; white-space: pre-line; }
.pn-idea__text--link { font-weight: 600; color: var(--pn-blue); }
.pn-idea__host, .pn-idea__tag { font-size: 12px; color: var(--pn-tx3); }
.pn-idea--note .pn-idea__tag, .pn-idea--note .pn-idea__detail, .pn-idea--note .pn-idea__todo { color: inherit; opacity: 0.72; }
/* a card's face: the start of its description, and how far its checklist has got */
.pn-idea__detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; color: var(--pn-tx3); white-space: pre-line; overflow-wrap: anywhere; }
.pn-idea__foot { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 2px; }
.pn-idea__todo { display: inline-flex; align-items: center; gap: 4px; font: 11px var(--pn-mono); color: var(--pn-tx2); }
.pn-idea__todo.is-done { color: var(--pn-good); }
.pn-idea--note .pn-idea__todo.is-done { color: inherit; opacity: 1; }
.pn-idea__bar { width: 34px; height: 4px; border-radius: 2px; background: rgba(128, 128, 140, 0.35); overflow: hidden; }
.pn-idea__fill { display: block; height: 100%; background: currentColor; }

/* ---- a card's panel (planner-idea-card.js): its words, a description, a checklist, its paper */
.pn-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px -8px -10px 0; }
.pn-papers { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-paperdot { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 0; background: var(--pn-note); }
.pn-paperdot[aria-pressed=true] { box-shadow: 0 0 0 2px var(--pn-bg1), 0 0 0 4px var(--pn-ac); }
.pn-paperdot--sm { width: 18px; height: 18px; }
.pn-paperdot--sm[aria-pressed=true] { box-shadow: 0 0 0 2px rgba(24, 24, 28, 0.96), 0 0 0 3.5px var(--pn-ac); }
.pn-todo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pn-todo__bar { height: 4px; border-radius: 2px; background: var(--pn-bg3); overflow: hidden; }
.pn-todo__fill { display: block; height: 100%; border-radius: 2px; background: var(--pn-green); }
.pn-todo__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pn-todo__row { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; }
.pn-todo__row.is-target { box-shadow: 0 -2px 0 var(--pn-ac); }
.pn-todo__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 5px; padding: 0; background: var(--pn-bg2); border: 1.5px solid var(--pn-line3); border-radius: 6px; color: var(--pn-ac-ink); }
.pn-todo__box[aria-checked=true] { background: var(--pn-green); border-color: var(--pn-green); }
.pn-todo__text { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 5px 6px; background: none; border: 0; border-radius: 6px; color: var(--pn-tx); text-align: left; overflow-wrap: anywhere; }
.pn-todo__text:hover { background: var(--pn-bg2); }
.pn-todo__row.is-done .pn-todo__text { color: var(--pn-tx3); text-decoration: line-through; }
.pn-todo__remove { width: 32px; height: 32px; opacity: 0; }
.pn-todo__row:hover .pn-todo__remove, .pn-todo__row:focus-within .pn-todo__remove { opacity: 1; }
@media (hover: none) { .pn-todo__remove { opacity: 1; } }
.pn-todo .pn-todo__input { flex: 1 1 auto; min-height: 32px; padding: 0 8px; }
.pn-todo .pn-todo__add { min-height: 36px; }

/* ---- the vision board (planner-page-board.js): the same cards on a surface with no edges */
.pn-main--board { overflow: hidden; }
.pn-board { position: relative; flex: 1 1 0; min-height: 320px; overflow: hidden; border: 1px solid var(--pn-line); border-radius: 16px; background-color: var(--pn-bg1); background-image: radial-gradient(circle, var(--pn-line2) 1px, transparent 1.3px); touch-action: none; user-select: none; cursor: grab; }
.pn-board.is-dragging { cursor: grabbing; }
.pn-board__world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* (one pixel square and let to overflow: a drawing with no width at all is not drawn) */
.pn-board__links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; pointer-events: none; }
.pn-link__line { stroke: var(--pn-tx3); stroke-width: 2; fill: none; }
.pn-link__head { fill: var(--pn-tx3); }
.pn-link__hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.pn-link.is-picked .pn-link__line, .pn-link--ghost .pn-link__line { stroke: var(--pn-ac); }
.pn-link.is-picked .pn-link__head, .pn-link--ghost .pn-link__head { fill: var(--pn-ac); }
.pn-link--ghost .pn-link__line { stroke-dasharray: 6 5; }
.pn-bcard { position: absolute; border-radius: 12px; cursor: grab; }
.pn-board.is-dragging .pn-bcard { cursor: grabbing; }
.pn-bcard .pn-idea { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.pn-bcard.is-picked { z-index: 2; }
.pn-bcard.is-picked .pn-idea { border-color: var(--pn-ac); box-shadow: 0 0 0 2px var(--pn-ac), 0 6px 18px rgba(0, 0, 0, 0.35); }
.pn-bcard.is-target .pn-idea { box-shadow: 0 0 0 3px var(--pn-blue); }
.pn-bcard--picture .pn-idea__img { height: var(--pn-h, 160px); }
.pn-bcard--note .pn-idea { min-height: 96px; }
.pn-bcard--note .pn-idea__text { font-size: 15px; }
.pn-bnote { display: block; width: 100%; min-height: 96px; padding: 10px 12px; background: transparent; border: 0; outline: 0; resize: none; color: inherit; font: inherit; font-size: 15px; user-select: text; cursor: text; }
.pn-frame { position: absolute; border: 1.5px solid var(--pn-line3); border-radius: 16px; background: rgba(255, 255, 255, 0.025); pointer-events: none; }
.pn-frame.is-picked { border-color: var(--pn-ac); }
.pn-frame__head { position: absolute; left: 0; top: 0; max-width: 100%; display: flex; align-items: center; min-height: 40px; padding: 0 14px; pointer-events: auto; cursor: grab; }
.pn-frame__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-frame__name--none { font-weight: 400; color: var(--pn-tx3); }
.pn-frame .pn-frame__input { width: 220px; min-height: 30px; padding: 0 8px; user-select: text; }
.pn-board__box { position: absolute; border: 1px solid var(--pn-ac); background: var(--pn-ac-tint); pointer-events: none; }
.pn-board__over { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pn-board__over > * { pointer-events: auto; }
.pn-board__bar, .pn-board__tools, .pn-board__zoombar { position: absolute; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(24, 24, 28, 0.96); border: 1px solid var(--pn-line2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); white-space: nowrap; cursor: default; }
.pn-board__tools { left: 12px; top: 12px; }
.pn-board__zoombar { right: 12px; bottom: 12px; }
.pn-board.has-card .pn-board__zoombar { right: calc(min(380px, 100%) + 12px); }
.pn-board__act { min-height: 32px; padding: 0 10px; background: transparent; border: 0; border-radius: 6px; color: var(--pn-tx2); }
.pn-board__act:hover { background: var(--pn-bg3); color: var(--pn-tx); }
.pn-board__act[aria-pressed=true] { background: var(--pn-ac-tint); color: var(--pn-tx); }
.pn-board__act--icon { width: 32px; padding: 0; font-size: 16px; }
.pn-board__zoom { min-width: 52px; min-height: 32px; padding: 0 6px; background: transparent; border: 0; border-radius: 6px; color: var(--pn-tx2); font: 12px var(--pn-mono); }
.pn-board__zoom:hover { background: var(--pn-bg3); color: var(--pn-tx); }
.pn-board__papers { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; }
.pn-board__dot { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pn-bg1); border: 2px solid var(--pn-ac); }
.pn-board__dot--size { cursor: nwse-resize; }
.pn-board__dot--link { background: var(--pn-ac); cursor: crosshair; }
.pn-drawer { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: min(380px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--pn-bg1); border-left: 1px solid var(--pn-line); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35); overflow: auto; user-select: text; cursor: default; }
.pn-drawer > * { flex-shrink: 0; }
.pn-idea__preview { flex: none; display: block; width: 100%; height: 172px; object-fit: contain; background: var(--pn-bg3); border-radius: 12px; }
.pn-idea__open { align-self: flex-start; display: flex; align-items: center; min-height: 44px; color: var(--pn-blue); overflow-wrap: anywhere; }
.pn-idea--tile .pn-idea__img, .pn-aside--screens .pn-idea__img { height: 84px; }
.pn-idea--tile .pn-idea__body, .pn-aside--screens .pn-idea__body { padding: 8px 10px; }
.pn-idea--tile.pn-idea--note { justify-content: center; }
.pn-idea--tile.pn-idea--note .pn-idea__body, .pn-idea--tile.pn-idea--link .pn-idea__body { padding: 14px; }
.pn-idea--tile.pn-idea--link { justify-content: center; }
.pn-idea--tile.pn-idea--link .pn-idea__body { gap: 2px; }

/* ---- Players */
.pn-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pn-player { display: flex; flex-direction: column; gap: 14px; text-align: left; padding: 18px; background: var(--pn-bg2); color: var(--pn-tx); border: 1px solid var(--pn-line); border-radius: 16px; }
.pn-player:hover { border-color: var(--pn-line2); }
.pn-player[aria-pressed=true] { background: var(--pn-bg3); border-color: var(--pn-ac); }
.pn-player__head { display: flex; align-items: center; gap: 12px; }
.pn-player__names { display: flex; flex-direction: column; min-width: 0; }
.pn-player__name { font-size: 17px; font-weight: 600; }
.pn-player__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-player .pn-chip { background: var(--pn-bg1); }
.pn-player[aria-pressed=true] .pn-chip { background: var(--pn-bg2); }
.pn-player-add { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; border: 1px dashed var(--pn-line2); border-radius: 16px; }
.pn-player-add .pn-btn { background: var(--pn-bg2); }
.pn-player__edit { display: flex; align-items: center; gap: 14px; }
.pn-player__fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pn-choice { display: flex; gap: 12px; align-items: baseline; }
.pn-choice__label { flex: 0 0 84px; color: var(--pn-tx3); }
.pn-choice--inline { align-items: center; flex-wrap: wrap; }
.pn-lens { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--pn-line); }
.pn-lens__line { display: flex; gap: 10px; color: var(--pn-tx2); }
.pn-lens__line svg { flex: none; margin-top: 1px; }

/* ---- Look */
.pn-look { display: flex; gap: 32px 56px; flex-wrap: wrap; }
.pn-look__col { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pn-row--look { align-items: center; }
.pn-row--look.pn-row--top { align-items: flex-start; }
.pn-row--look .pn-row__value { gap: 6px 14px; }
.pn-row--look:first-child .pn-row__value { gap: 6px; }
.pn-word { padding: 5px 12px; background: var(--pn-bg2); border: 1px solid var(--pn-line2); border-radius: 16px; color: var(--pn-tx); }
.pn-word:hover { border-color: var(--pn-line3); }
.pn-colour { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pn .pn-swatch.ub-col { width: 56px; height: 56px; min-height: 0; padding: 0; background: none; border: 1px solid var(--pn-line2); border-radius: 12px; overflow: hidden; }
.pn .pn-swatch .ub-col__chip { width: 100%; height: 100%; border: 0; border-radius: 0; }
.pn-colour__hex { font: 11px var(--pn-mono); color: var(--pn-tx3); }
.pn-type { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pn-type__heading { font-size: 28px; font-weight: 600; line-height: 1.1; }
.pn-type__body { font-size: 15px; }
.pn-shape { flex: none; }
.pn-shape--wide { width: 84px; height: 40px; }
.pn-shape--tall { width: 64px; height: 52px; }
.pn-shape--small { width: 56px; height: 26px; }
.pn-sample { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; padding: 24px; border-radius: 16px; }
.pn-sample__card { width: 232px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.pn-sample__picture { display: flex; align-items: center; justify-content: center; height: 84px; }
.pn-sample__heading { font-size: 22px; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.pn-sample__body { font-size: 13px; overflow-wrap: anywhere; }
.pn-sample__button { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 19px; font-weight: 600; }
.pn-sample__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pn-sample__counter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 22px; font-size: 19px; font-weight: 600; }
.pn-sample__coin { width: 22px; height: 22px; border-radius: 50%; }
.pn-sample__chip { display: inline-flex; align-items: center; padding: 8px 16px; font-size: 17px; font-weight: 600; }
.pn-refs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pn-refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pn-refs__add { display: flex; min-height: 100px; border: 1px dashed var(--pn-line2); border-radius: 12px; }
.pn-refs__add:focus-within { border-color: var(--pn-ac); }
.pn-refs__input { flex: 1; min-width: 0; padding: 26px 14px 14px; background: transparent; border: 0; outline: 0; resize: none; color: var(--pn-tx); text-align: center; }

/* ---- Screens */
.pn-subbar { flex: none; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 10px 20px; background: var(--pn-bg1); border-bottom: 1px solid var(--pn-line); }
.pn-subbar__step { display: flex; align-items: center; gap: 10px; }
.pn-subbar__title { display: flex; flex-direction: column; }
.pn-subbar__name { padding: 0; background: none; border: 0; color: inherit; font-size: 16px; font-weight: 600; text-align: left; }
.pn-subbar__device { flex: 1 1 auto; }
.pn-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--pn-line2); border-radius: 8px; color: var(--pn-tx2); }
.pn-back:hover { color: var(--pn-tx); }
.pn-lenses { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pn-tools { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--pn-bg1); border-right: 1px solid var(--pn-line); }
.pn-tool { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; color: var(--pn-tx2); border: 1px solid transparent; border-radius: 8px; }
.pn-tool:hover { color: var(--pn-tx); }
.pn-tool[aria-pressed=true] { background: var(--pn-bg3); color: var(--pn-ac); border-color: var(--pn-ac); }
.pn-tools__rule { width: 24px; height: 1px; margin: 6px 0; background: var(--pn-line); }
.pn-ink { width: 24px; height: 24px; margin-top: 4px; padding: 0; border: 2px solid var(--pn-bg1); border-radius: 50%; box-shadow: 0 0 0 1px var(--pn-line3); }
.pn-tools__rule + .pn-ink { margin-top: 0; }
.pn-ink[aria-pressed=true] { box-shadow: 0 0 0 2px var(--pn-ac); }
.pn-canvasarea { flex: 999 1 520px; min-width: 0; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; overflow: auto; }
.pn-canvasarea > :first-child { margin-top: auto; }
.pn-canvasarea > :last-child { margin-bottom: auto; }
.pn-canvasarea > * { flex-shrink: 0; }
.pn-canvasarea__frame { width: 100%; }
.pn-frame { position: relative; width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--pn-line3); border-radius: 6px; }
.pn-frame--bezel { border: 8px solid var(--pn-bg4); border-radius: 30px; }
.pn-frame--tablet { border-radius: 22px; }
.pn-frame__fit { position: absolute; inset: 0; overflow: hidden; }
.pn-zone { position: absolute; display: flex; align-items: center; pointer-events: none; font: 10px 'Segoe UI', sans-serif; color: #7a2c1c; }
.pn-zone--top { top: 0; left: 0; right: 0; height: 9%; padding: 0 3%; background: rgba(196, 85, 63, 0.12); border-bottom: 1.5px dashed #c4553f; }
.pn-zone--move, .pn-zone--jump { bottom: 7%; aspect-ratio: 1 / 1; justify-content: center; background: rgba(196, 85, 63, 0.14); border: 1.5px dashed #c4553f; border-radius: 50%; }
.pn-zone--move { left: 3%; width: 18%; }
.pn-zone--jump { right: 3%; width: 15%; align-items: flex-start; padding-top: 4%; }
.pn-layouttabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pn-layouts { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; }
.pn-layouts__cell { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
.pn-layouts__open { display: block; width: 100%; padding: 0; background: none; border: 0; }
.pn-layouts__foot { display: flex; align-items: baseline; gap: 12px; }
.pn-check { display: flex; gap: 10px; align-items: flex-start; }
.pn-check__icon { flex: none; margin-top: 1px; }
.pn-check__text { display: flex; flex-direction: column; min-width: 0; }

/* the page and the parts drawn on it (planner-sketch.js): a pencil-on-paper look */
.pn-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; color: var(--pn-ink, #26262b); font: 22px/1.1 'Caveat', 'Segoe Print', cursive; touch-action: none; user-select: none; }
.pn-page[data-tool=pencil], .pn-page[data-tool=rect] { cursor: crosshair; }
.pn-page[data-tool=text] { cursor: text; }
.pn-page[data-tool=select] .pn-part { cursor: move; }
.pn-page:not([data-tool=select]) .pn-part { pointer-events: none; }
.pn-page__gesture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pn-part { position: absolute; display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--pn-ink, #26262b); }
.pn-part--container { background: var(--pn-paper, #f6f4ee); border: 2px solid var(--pn-ink, #26262b); border-radius: 8px; }
.pn-part--box { border: 2px solid var(--pn-ink, #26262b); border-radius: 6px; }
.pn-part--text { justify-content: flex-start; font-weight: 700; }
.pn-part--image { border: 1.5px solid var(--pn-pencil, #8a877d); }
.pn-part--image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pn-part__cross { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--pn-pencil, #8a877d); stroke-width: 1.5; pointer-events: none; }
.pn-part--button { background: #ffe1b0; border: 2px solid var(--pn-ink, #26262b); border-radius: 10px; color: #26262b; }
.pn-part--input { justify-content: flex-start; padding: 0 8px; border: 2px solid var(--pn-ink, #26262b); border-radius: 4px; color: var(--pn-pencil, #8a877d); }
.pn-part--dropdown { justify-content: space-between; padding: 0 8px; border: 2px solid var(--pn-ink, #26262b); border-radius: 4px; }
.pn-part__caret { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid currentColor; pointer-events: none; }
.pn-part--checkbox { justify-content: flex-start; gap: 8px; }
.pn-part__box { flex: none; display: inline-flex; width: 20px; height: 20px; border: 2px solid var(--pn-ink, #26262b); border-radius: 3px; pointer-events: none; }
.pn-part__check { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pn-part--progress { justify-content: flex-start; border: 2px solid var(--pn-ink, #26262b); border-radius: 999px; overflow: hidden; }
.pn-part__bar { display: block; height: 100%; background: var(--pn-ink, #26262b); pointer-events: none; }
.pn-part--list, .pn-part--table { align-items: stretch; justify-content: flex-start; border: 2px solid var(--pn-ink, #26262b); border-radius: 6px; }
.pn-part__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; pointer-events: none; }
.pn-part__row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding: 0 8px; border-bottom: 1.5px dashed var(--pn-pencil, #8a877d); overflow: hidden; white-space: nowrap; }
.pn-part__row:last-child { border-bottom: 0; }
.pn-part__row--empty { color: var(--pn-pencil, #8a877d); }
.pn-part--table .pn-part__rows { background: linear-gradient(90deg, transparent calc(33.3% - 1.5px), var(--pn-pencil, #8a877d) 0, var(--pn-pencil, #8a877d) 33.3%, transparent 0, transparent calc(66.6% - 1.5px), var(--pn-pencil, #8a877d) 0, var(--pn-pencil, #8a877d) 66.6%, transparent 0); }
.pn-part__text { max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.pn-part__text--quiet { position: absolute; left: 4px; top: 2px; color: var(--pn-pencil, #8a877d); font-size: 16px; }
.pn-part--drawn { background: none; border: 0; border-radius: 0; overflow: visible; }
.pn-part__stroke { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pn-part__fill { fill: currentColor; opacity: 0.75; }
.pn-part__tick { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pn-part.is-flagged { outline: 3px solid #e0a23c; outline-offset: 2px; }
.pn-part.is-selected { outline: 2px solid var(--pn-ac, #ff8c00); outline-offset: 2px; }
.pn-part.is-target { outline: 2px dashed #4ea1ff; outline-offset: 2px; }
.pn-part__resize { position: absolute; right: -7px; bottom: -7px; z-index: 2; width: 14px; height: 14px; background: var(--pn-ac, #ff8c00); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; }
.pn-part__name { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; min-width: 90px; height: 100%; min-height: 30px; padding: 0 6px; background: #fff; border: 0; outline: 2px solid var(--pn-ac, #ff8c00); color: #26262b; font: inherit; }

/* ---- Schedule */
.pn-monthbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-calwrap { overflow-x: auto; }
.pn-cal { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.pn-cal th { padding: 0 8px 8px; font-size: 12px; font-weight: 400; color: var(--pn-tx3); }
.pn-day { height: 96px; padding: 8px; vertical-align: top; border: 1px solid var(--pn-line); }
.pn-day.is-outside { color: var(--pn-tx3); }
.pn-day.is-week { background: var(--pn-bg1); }
.pn-day.is-target { box-shadow: inset 0 0 0 2px var(--pn-ac); }
.pn-day__today { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; background: var(--pn-ac); color: var(--pn-ac-ink); border-radius: 12px; font-weight: 700; }
.pn-day__todaylabel { margin-left: 6px; font-size: 12px; color: var(--pn-tx2); }
.pn-calitem { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 3px 8px; background: var(--pn-bg2); border: 1px solid transparent; border-radius: 6px; color: var(--pn-tx); font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.pn-calitem svg { flex: none; }
.pn-calitem.is-done { color: var(--pn-tx2); }
.pn-calitem.is-late { border-color: rgba(255, 92, 92, 0.5); }
.pn-day.is-week .pn-calitem { background: var(--pn-bg3); }
.pn-calmile { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--pn-warn); font-size: 12px; font-weight: 600; text-align: left; }
.pn-calmile svg { flex: none; }
.pn-meter { display: flex; height: 8px; background: var(--pn-line); border-radius: 4px; overflow: hidden; }
.pn-meter__fill { background: var(--pn-green); }
.pn-meter__fill.is-over { background: var(--pn-warn); }
.pn-weekcard { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px; background: var(--pn-bg2); border: 1px solid transparent; border-radius: 10px; color: var(--pn-tx); text-align: left; }
.pn-weekcard--late { gap: 8px; border-color: rgba(255, 92, 92, 0.5); }
.pn-weekcard__open { display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; border: 0; color: inherit; text-align: left; }
.pn-weekcard .pn-btn { color: var(--pn-tx); }
.pn-board { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px; padding: 2px 2px 6px; overflow-x: auto; }
.pn-col { flex: 0 0 264px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; padding: 12px; border-radius: 16px; border: 1px solid var(--pn-line); background: var(--pn-bg1); color: var(--pn-tx); }
.pn-col--inbox { border: 1px dashed var(--pn-line2); background: transparent; }
.pn-col--add { min-height: 0; border: 1px dashed var(--pn-line2); background: transparent; }
.pn-col--addbtn { color: var(--pn-tx3); text-align: left; }
.pn-col--addbtn:hover { color: var(--pn-tx); border-color: var(--pn-tx3); }
.pn-col.is-target { border-color: var(--pn-ac); }
.pn-col__head { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 2px; }
.pn-col__head[draggable=true] { cursor: grab; }
.pn-col__name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.pn-col__count { color: var(--pn-tx3); }
.pn-card { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--pn-bg2); border: 1px solid var(--pn-line); border-radius: 12px; color: var(--pn-tx); text-align: left; }
.pn-card:hover { border-color: var(--pn-line2); }
.pn-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pn-tx3); }
.pn-card[style*="color"] .pn-card__meta, .pn-card[style*="color"] .pn-legend { color: inherit; opacity: 0.8; }

/* ---- Review */
.pn-revgroup { display: flex; flex-direction: column; gap: 6px; }
.pn-revgroup__name { margin: 0 0 4px; font-size: 14px; font-weight: 400; color: var(--pn-tx3); }
.pn-rev { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 6px 8px 6px 16px; background: var(--pn-bg2); border: 1px solid var(--pn-line); border-radius: 12px; }
.pn-rev.is-on { background: var(--pn-bg3); border-color: var(--pn-ac); }
.pn-rev__name { flex: 1 1 200px; min-height: 44px; padding: 0; background: transparent; border: 0; color: var(--pn-tx); font-weight: 600; text-align: left; }
.pn-rev__stage { flex: 0 0 110px; }
.pn-rev__open { flex: 0 0 130px; display: flex; align-items: center; gap: 6px; }
.pn-rev__act { flex: 0 0 140px; color: var(--pn-tx); }
.pn-qcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--pn-bg2); border-radius: 12px; }
.pn-qcard .pn-btn { padding: 0 14px; }
.pn-qcard__found { display: flex; gap: 8px; }
.pn-qcard__found svg { flex: none; margin-top: 2px; }
.pn-qcard__found--good { color: var(--pn-good); }
.pn-qcard__found--warn { color: var(--pn-warn); }
.pn-answered { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--pn-tx2); text-align: left; }
button.pn-answered:hover { color: var(--pn-tx); }

/* ---- In Design: the tag a planned view wears (planner-tag.js) */
.ub-plantag { display: flex; align-items: center; gap: 6px; }
.ub-plantag[hidden] { display: none; }
.ub-plantag__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; background: var(--ub-ac-tint, rgba(255, 140, 0, 0.14)); color: var(--ub-tx, #f3f3f5); border: 1px solid var(--ub-ac, #ff8c00); border-radius: 16px; font: inherit; white-space: nowrap; cursor: pointer; }
.ub-plantag__open { display: inline-flex; align-items: center; gap: 5px; color: #ffcf8a; }
.ub-plantag__dot { width: 7px; height: 7px; border-radius: 50%; background: #ffcf8a; }
.ub-plantag__more { color: var(--ub-tx3, #8c8c98); font-size: 12px; }
.pn-tagpop { position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 14px; width: 340px; max-width: calc(100vw - 32px); padding: 18px; background: var(--pn-bg2); border: 1px solid var(--pn-line2); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); overflow: auto; }
.pn-tagpop__head { display: flex; flex-direction: column; gap: 2px; }
.pn-tagpop__name { font-size: 17px; font-weight: 600; }
.pn-tagpop__facts { display: flex; flex-direction: column; gap: 8px; }
.pn-tagpop__fact { display: flex; gap: 12px; align-items: baseline; }
.pn-tagpop__label { flex: 0 0 48px; color: var(--pn-tx3); }
.pn-tagpop__open { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pn-line); }
.pn-tagpop__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pn-tagpop__q .pn-btn { flex: none; }

/* ---- small windows */
@media (max-width: 760px) {
  .pn-head { padding: 0 12px; gap: 8px 12px; }
  .pn-nav__link { min-height: 44px; padding: 0 10px; }
  .pn-main { padding: 20px 16px 24px; }
  .pn-aside { max-width: none !important; flex-basis: 100% !important; border-left: 0; border-top: 1px solid var(--pn-line); }
  .pn-players { grid-template-columns: 1fr; }
  .pn-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-row { flex-wrap: wrap; gap: 4px 16px; }
  .pn-start__q { font-size: 26px; }
  .pn-tools { flex-direction: row; width: 100%; border-right: 0; border-bottom: 1px solid var(--pn-line); }
  .pn-tools__rule { width: 1px; height: 24px; margin: 0 6px; }
  .pn-ink { margin-top: 0; }
}