/* Your plan on every page (plan-dock.js): the tab on the right edge, the 4-second "Added" note, the drawer, and on
   phones the bar above the bottom edge and the bottom sheet. As briefs/rehaul-mockups/PlanDock.dc.html and
   PlanDrawer.dc.html. */
.kpd-tab{position:fixed;right:0;top:44%;z-index:55;writing-mode:vertical-rl;transform:rotate(180deg);background:#0E3B43;color:#fff;
  border:0;border-radius:0 10px 10px 0;padding:12px 7px;font:700 12px var(--kp-font,'Gabarito',sans-serif);display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(14,59,67,.25);cursor:pointer}
.kpd-tab small{font-weight:500;color:#D5F5E8;font-size:10.5px}
.kpd-tab i{font-style:normal;background:#FF6B5B;color:#fff;border-radius:999px;padding:4px 2px;font-size:10px;min-height:18px;text-align:center}
.kpd-tab:hover{background:#174D57}
.kpd-tab:focus-visible,.kpd-bar:focus-visible{outline:2px solid #CF3F2E;outline-offset:2px}
.kpd-note{position:fixed;right:38px;top:calc(44% + 10px);z-index:56;background:#0E3B43;color:#fff;border-radius:9px;padding:7px 9px;
  font:400 11.5px/1.35 var(--kp-font,'Gabarito',sans-serif);display:flex;gap:8px;align-items:center;box-shadow:0 6px 18px rgba(14,59,67,.25);
  width:220px;box-sizing:border-box;transition:opacity .2s,transform .2s}
.kpd-note[hidden]{display:none}
.kpd-note span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kpd-note button{border:0;background:#fff;color:#0E3B43;border-radius:5px;font:600 11px var(--kp-font,'Gabarito',sans-serif);height:22px;padding:0 7px;flex-shrink:0;cursor:pointer}
.kpd-bar{display:none}
.kpd-shade{display:none}

.kpd{position:fixed;right:0;top:64px;bottom:0;width:340px;max-width:100vw;z-index:58;box-shadow:-10px 0 30px rgba(14,59,67,.14);
  border-left:1px solid #DCE6E4;transform:translateX(105%);transition:transform .18s ease-out;visibility:hidden}
.kpd.is-open{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.kpd,.kpd-note{transition:none}}

/* the drawer itself (PlanDrawer) */
.pd{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;font:400 12.5px/1.4 var(--kp-font,'Gabarito',system-ui,sans-serif);color:#1F3A40;box-sizing:border-box;overflow:hidden}
.pd *{box-sizing:border-box}
.pd a{color:#0E3B43}
.pd [hidden]{display:none!important}
.pd .pd-grab{display:none;justify-content:center;padding:8px 0 2px;background:#0E3B43;touch-action:none;cursor:grab}
.pd .pd-grab i{width:36px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.pdh{background:#0E3B43;color:#fff;padding:11px 12px 12px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;flex:none}
.pdh:after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:130px;background:radial-gradient(circle,rgba(255,107,91,.28),rgba(255,107,91,0) 70%);pointer-events:none}
.pdh .pd-row{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1}
.pd .pd-t{font-size:15px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:7px;margin:0}
.pd .pd-saved{font-size:10.5px;color:#BDE8DA;white-space:nowrap}
.pd .pd-x{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;font-size:12px;line-height:1;padding:0}
.pd .pd-lead{font-size:11.5px;color:#D5F5E8;position:relative;z-index:1}
.pd .pd-kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:relative;z-index:1}
.pd .pd-kid{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:6px 7px;display:flex;gap:6px;align-items:center;min-width:0}
.pd .pd-ring{width:28px;height:28px;flex-shrink:0}
.pd .pd-kid b{font-size:11.5px;display:block;line-height:1.15}
.pd .pd-kid em{font-style:normal;font-size:10px;color:#BDE8DA;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd .pd-next{margin:10px 10px 2px;border-radius:11px;background:linear-gradient(135deg,#FFF4F1,#FFFFFF);border:1px solid #FFD9D1;padding:9px 10px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 9px;align-items:center;flex:none}
.pd .pd-next .pd-ic{width:30px;height:30px;border-radius:8px;background:#CF3F2E;display:flex;align-items:center;justify-content:center;grid-row:span 2}
.pd .pd-next .pd-k{font:500 9.5px var(--kp-mono,'IBM Plex Mono',monospace);letter-spacing:.5px;color:#CF3F2E;text-transform:uppercase}
.pd .pd-next b{font-size:12.5px;color:#0E3B43;display:block;line-height:1.25}
.pd .pd-next .pd-s{grid-column:2;font-size:11px;color:#4B6469}
.pd .pd-next .pd-go{grid-column:2;justify-self:start;height:24px;border:0;border-radius:6px;background:#CF3F2E;color:#fff;font:600 11px var(--kp-font,'Gabarito',sans-serif);padding:0 9px;cursor:pointer;margin-top:2px;display:inline-flex;align-items:center;text-decoration:none}
.pd .pd-body{overflow-y:auto;flex:1;padding:2px 0 6px;overscroll-behavior:contain}
.pd .pd-sec{padding:8px 10px 4px;display:flex;flex-direction:column;gap:4px}
.pd .pd-sh{display:flex;align-items:center;gap:6px;font:500 10px var(--kp-mono,'IBM Plex Mono',monospace);letter-spacing:.5px;color:#4B6469;text-transform:uppercase;padding:0 2px 2px;margin:0}
.pd .pd-sh svg{width:13px;height:13px;flex-shrink:0}
.pd .pd-sh a{margin-left:auto;font:600 11px var(--kp-font,'Gabarito',sans-serif);text-transform:none;letter-spacing:0;text-decoration:none;color:#CF3F2E!important}
.pd .pd-it{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:7px;align-items:center;padding:5px 7px;border-radius:8px;background:#F7FAF9;border:1px solid #EEF3F2;position:relative}
.pd .pd-mk{width:18px;height:18px;border-radius:18px;color:#fff;font:700 9.5px var(--kp-font,'Gabarito',sans-serif);display:flex;align-items:center;justify-content:center;background:#0E3B43}
.pd .pd-it b,.pd .pd-it b a{font-size:12px;color:#0E3B43;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.2;text-decoration:none}
.pd .pd-it b a:hover{text-decoration:underline}
.pd .pd-it small{font-size:10.5px;color:#4B6469;display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;margin-top:2px}
.pd .pd-it .kp-ofsted,.pd .pd-it .kp-rank{font-size:10px;line-height:1.35}
.pd .pd-it .kp-ofsted{padding:0 5px}
.pd .pd-sq{display:flex;gap:2px;align-items:center}
.pd .pd-pvt{font-size:10px;color:#4B6469}
.pd .pd-drop{position:absolute;right:-4px;top:-6px;width:18px;height:18px;border-radius:18px;border:1px solid #CFDCD9;background:#fff;color:#4B6469;font-size:10px;line-height:1;padding:0;cursor:pointer;opacity:0}
.pd .pd-it:hover .pd-drop,.pd .pd-home:hover .pd-drop,.pd .pd-drop:focus-visible{opacity:1}
.pd .pd-safe{display:flex;gap:6px;align-items:flex-start;font-size:11px;color:#33484D;font-weight:600;background:#F2F6F5;border-radius:7px;padding:4px 7px;text-decoration:none}
.pd .pd-safe.pd-ok{color:#0B6B4E;background:#E9F7F0}
.pd .pd-safe svg{flex:none;margin-top:1px}
.pd .pd-note{font-size:10.5px;color:#4B6469;padding:0 2px}
.pd .pd-home{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:7px;align-items:center;padding:4px 6px 4px 4px;border-radius:8px;background:#F7FAF9;border:1px solid #EEF3F2;position:relative}
.pd .pd-th{width:38px;height:30px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.pd .pd-home b{font-size:12px;color:#0E3B43;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd .pd-home small{font-size:10.5px;color:#4B6469}
.pd .pd-reach{font-size:10px;font-weight:700;text-align:right;line-height:1.15;color:#8A5A00}
.pd .pd-reach.pd-all{color:#0B6B4E}
.pd .pd-reach span{font-weight:500;color:#4B6469}
.pd .pd-chips{display:flex;flex-wrap:wrap;gap:4px}
.pd .pd-tl{display:flex;flex-direction:column;margin-left:6px;border-left:2px solid #E3ECEA}
.pd .pd-tli{position:relative;padding:0 0 6px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;font-size:11.5px;align-items:baseline}
.pd .pd-tli:before{content:"";position:absolute;left:-6px;top:4px;width:6px;height:6px;border-radius:8px;background:#fff;border:2px solid #9DB3B0}
.pd .pd-tli.pd-hot:before{background:#CF3F2E;border-color:#CF3F2E}
.pd .pd-tli b{color:#0E3B43;white-space:nowrap;font-size:11.5px}
.pd .pd-tli small{grid-column:1/-1;font-size:10px;color:#4B6469}
.pd .pd-tli.pd-hot small{color:#CF3F2E;font-weight:600}
.pd .pd-tli:last-child{padding-bottom:0}
.pd .pd-save{margin:8px 10px 2px;border-radius:11px;background:#0E3B43;color:#fff;padding:10px 11px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;flex:none}
.pd .pd-save b{font-size:13px}
.pd .pd-save ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:11px;color:#D5F5E8}
.pd .pd-save .pd-bt{display:flex;gap:6px;margin-top:2px}
.pd .pd-foot{border-top:1px solid #EEF3F2;padding:7px 10px;display:flex;gap:6px;align-items:center;justify-content:space-between;background:#FBFDFC;flex:none}
.pd .pd-fb{height:26px;border-radius:6px;padding:0 9px;font:600 11px var(--kp-font,'Gabarito',sans-serif);cursor:pointer;border:1px solid #CFDCD9;background:#fff;color:#0E3B43!important;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.pd .pd-fb.pd-p{background:#0E3B43;color:#fff!important;border-color:#0E3B43}
.pd .pd-fb.pd-c{background:#CF3F2E;color:#fff!important;border-color:#CF3F2E}
.pd .pd-fb.pd-o{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.4)}
.pd .pd-empty{margin:12px 10px}

/* phones: a bar above the bottom edge, and a bottom sheet (72%, then full screen) */
@media (max-width:699px){
  .kpd-tab{display:none}
  .kpd-bar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:55;height:48px;align-items:center;
    justify-content:space-between;gap:8px;padding:0 14px;border:0;border-radius:12px;background:#0E3B43;color:#fff;font:600 14px var(--kp-font,'Gabarito',sans-serif);
    box-shadow:0 6px 18px rgba(14,59,67,.3);cursor:pointer}
  .kpd-bar small{font-weight:500;color:#D5F5E8;font-size:12.5px}
  .kpd-bar i{font-style:normal;background:#FF6B5B;border-radius:999px;padding:1px 8px;font-size:12px;margin-left:6px}
  body.kpd-has-bar{padding-bottom:72px}
  .kpd-note{right:10px;left:10px;width:auto;top:auto;bottom:calc(66px + env(safe-area-inset-bottom));font-size:13px;padding:10px 12px}
  .kpd-note button{height:32px;padding:0 12px;font-size:13px}
  .kpd{top:auto;left:0;right:0;width:auto;height:72vh;border-left:0;border-radius:16px 16px 0 0;overflow:hidden;transform:translateY(105%);box-shadow:0 -10px 30px rgba(14,59,67,.2);
    transition:transform .2s ease-out,height .2s ease-out}
  .kpd.is-open{transform:none}
  .kpd.is-full{height:calc(100vh - 8px);height:calc(100dvh - 8px)}
  .kpd .pd{border-radius:16px 16px 0 0}
  .kpd .pd .pd-grab{display:flex;min-height:22px}
  .kpd .pd-x{width:36px;height:36px}
  .kpd{z-index:72}
  .kpd-shade{display:block;position:fixed;inset:0;z-index:71;background:rgba(14,59,67,.25)}
  .kpd-shade[hidden]{display:none}
  .pd .pd-fb{height:44px;padding:0 14px;font-size:13px}
  .pd .pd-next .pd-go{height:40px;font-size:13px;padding:0 12px}
  .pd .pd-it,.pd .pd-home{min-height:48px}
  .pd .pd-it{grid-template-columns:18px minmax(0,1fr) auto 32px}
  .pd .pd-home{grid-template-columns:38px minmax(0,1fr) auto 32px}
  .pd .pd-drop{opacity:1;position:static;width:32px;height:32px;font-size:11px}
  .pd .pd-sh a{min-height:32px;display:inline-flex;align-items:center}
}
@media print{.kpd,.kpd-tab,.kpd-bar,.kpd-note,.kpd-shade{display:none!important}}
@media (min-width:700px) and (max-width:940px){.kpd{top:56px}}