/* THE SIGNED-IN FRAME (Kody, Oct 5 — the website revamp, layout 1 + B).
   Every tool page sits inside the same frame: a navy sidebar on the left
   (Start · My events · Tools · you), the page on the right with its title,
   actions and — inside an event — a row of tabs. On a phone the sidebar folds
   behind a ☰ button and slides in as a drawer. One file, every page. */

:root{
  --pt-navy:#0A3D7A; --pt-navy-dark:#062B58; --pt-gold:#C8860D; --pt-gold-dark:#7A4F00; --pt-gold-soft:#F6ECD8;
  --pt-bg:#EEF1F5; --pt-card:#FFFFFF; --pt-line:#D9DFE7; --pt-line-soft:#EEF1F5;
  --pt-ink:#111827; --pt-muted:#5B6B7B; --pt-green:#2E9E5B; --pt-green-soft:#E8F5EE; --pt-green-dark:#0F6E56;
  --pt-amber:#F2C14E; --pt-amber-soft:#FFF0C2; --pt-amber-dark:#7A4F00; --pt-red:#D64545;
  --pt-side-w:200px;
}
body.pt-shell{margin:0;background:var(--pt-bg);color:var(--pt-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
body.pt-shell > nav{display:none}

.pt-frame{display:grid;grid-template-columns:var(--pt-side-w) minmax(0,1fr);min-height:100vh}

/* ---- the sidebar ------------------------------------------------------- */
.pt-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;background:var(--pt-navy);color:#fff;padding:14px 10px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.pt-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.4px;padding:4px 8px 12px}
.pt-brand img{height:26px;width:auto}
.pt-brand em{font-style:normal;color:var(--pt-gold)}
.pt-k{font-size:10px;font-weight:800;letter-spacing:1px;color:#8FA9C6;text-transform:uppercase;padding:12px 8px 4px}
.pt-it{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;font-size:13px;font-weight:600;color:#DCE6F3;text-decoration:none;line-height:1.25;cursor:pointer;border:0;background:none;font-family:inherit;text-align:left;width:100%;box-sizing:border-box}
.pt-it svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pt-it:hover{background:rgba(255,255,255,.1);color:#fff}
.pt-it.on{background:var(--pt-gold);color:#fff}
.pt-it.on svg{opacity:1}
.pt-ev{display:block;padding:6px 8px;border-radius:9px;color:#DCE6F3;text-decoration:none;line-height:1.25}
.pt-ev b{display:block;font-size:12.5px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-ev small{display:block;font-size:11px;color:#8FA9C6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-ev:hover{background:rgba(255,255,255,.1)}
.pt-ev.on{background:rgba(255,255,255,.16)}
.pt-ev.on b{color:#fff}
.pt-ev .pt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8FA9C6;margin-right:5px;position:relative;top:-1px}
.pt-ev .pt-dot.live{background:#5DCAA5}
.pt-ev .pt-dot.todo{background:var(--pt-amber)}
.pt-more{display:block;font-size:12px;color:var(--pt-gold);font-weight:700;padding:4px 8px;text-decoration:none}
.pt-more:hover{text-decoration:underline}
.pt-empty{font-size:12px;color:#8FA9C6;padding:4px 8px;line-height:1.35}
.pt-me{margin-top:auto;border-top:1px solid rgba(255,255,255,.15);padding:12px 6px 2px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#DCE6F3}
.pt-av{width:28px;height:28px;border-radius:50%;background:var(--pt-gold);color:#fff;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:none}
.pt-me b{display:block;color:#fff;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.pt-me small{display:block;font-size:11px;color:#8FA9C6}
.pt-me small a,.pt-me small button{color:#8FA9C6;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.pt-me small a:hover,.pt-me small button:hover{color:#fff}
.pt-signin{display:block;text-align:center;background:#fff;color:var(--pt-navy);font-weight:800;font-size:13.5px;border-radius:10px;padding:9px 10px;text-decoration:none;margin:4px 0 6px}
.pt-signin:hover{background:#F6ECD8}
.pt-getapp{display:block;text-align:center;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:12.5px;border-radius:10px;padding:8px 10px;text-decoration:none;margin-top:10px}
.pt-getapp:hover{background:rgba(255,255,255,.1)}

/* ---- the page side ------------------------------------------------------ */
.pt-body{min-width:0;display:flex;flex-direction:column}
.pt-topbar{display:none}
.pt-dim{display:none}
.pt-page{padding:22px 30px 64px;max-width:1240px;box-sizing:border-box;width:100%}
/* The page's own <main> used to centre itself under the old header; inside
   the frame the frame does the spacing. */
body.pt-shell .pt-page > main{padding:0 !important;margin:0 !important;width:auto !important}
/* Page titles that pages draw themselves match the frame's header. */
body.pt-shell main h1{font-size:25px;letter-spacing:-.6px;color:var(--pt-navy);margin:0 0 3px;line-height:1.2;font-weight:800}
body.pt-shell main h1 + .sub,body.pt-shell main p.sub{font-size:13.5px;color:var(--pt-muted);margin:0 0 16px;line-height:1.45}

/* The page title, its line under, the status pill and the buttons on the right. */
.pt-head[hidden],.pt-tabs[hidden]{display:none !important}
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.pt-head h1{font-size:25px;letter-spacing:-.6px;color:var(--pt-navy);margin:0;line-height:1.2;font-weight:800}
.pt-head .pt-sub{display:block;font-size:13.5px;color:var(--pt-muted);font-weight:500;margin-top:3px}
.pt-pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--pt-green-soft);color:var(--pt-green-dark);vertical-align:middle;margin-left:8px;position:relative;top:-2px}
.pt-pill.amber{background:var(--pt-amber-soft);color:var(--pt-amber-dark)}
.pt-pill.gray{background:var(--pt-line-soft);color:var(--pt-muted)}
.pt-pill.navy{background:#E3EAF5;color:var(--pt-navy)}
.pt-acts{display:flex;gap:8px;flex-wrap:wrap}
.pt-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--pt-navy);color:var(--pt-navy);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:700;background:#fff;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap}
.pt-btn:hover{background:#F2F6FC}
.pt-btn.gold{background:var(--pt-gold);border-color:var(--pt-gold);color:#fff}
.pt-btn.gold:hover{background:#A96F08;border-color:#A96F08}
.pt-btn.ghost{border-color:var(--pt-line);color:var(--pt-navy)}
.pt-btn:disabled{opacity:.5;cursor:default}

/* The tabs inside an event — one section per screen. A dot on each: green
   done, amber needs you, gray not started. */
.pt-tabs{display:flex;gap:2px;border-bottom:2px solid var(--pt-line);margin:0 0 18px;overflow-x:auto;scrollbar-width:none}
.pt-tabs::-webkit-scrollbar{display:none}
.pt-tab{display:flex;align-items:center;gap:6px;padding:8px 11px;font-size:13px;font-weight:700;color:var(--pt-muted);border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2}
.pt-tab:hover{color:var(--pt-navy)}
.pt-tab.on{color:var(--pt-navy);border-bottom-color:var(--pt-gold)}
.pt-tab i{width:7px;height:7px;border-radius:50%;background:#C9D0DA;flex:none;display:inline-block}
.pt-tab.done i{background:var(--pt-green)}
.pt-tab.todo i{background:var(--pt-amber)}
.pt-tab.none i{display:none}
.pt-tab b{font-size:10.5px;font-weight:800;background:var(--pt-amber);color:#5B3A00;border-radius:6px;padding:1px 5px;line-height:1.3}
.pt-tab[hidden]{display:none}

/* Shared bits pages can use so they all look the same. */
.pt-card{background:var(--pt-card);border:1px solid var(--pt-line);border-radius:14px;padding:16px 18px}
.pt-card h3{font-size:15px;color:var(--pt-navy);margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.pt-card h3 span{font-size:11.5px;font-weight:700;color:var(--pt-muted)}
.pt-needs{display:flex;align-items:center;gap:12px;background:#FFF6DD;border:1px solid var(--pt-amber);border-radius:12px;padding:10px 14px;font-size:13.5px;margin:0 0 14px}
.pt-needs b{color:var(--pt-amber-dark)}
.pt-needs .sp{flex:1}
.pt-needs a{color:var(--pt-navy);font-weight:800;text-decoration:none;white-space:nowrap}
.pt-secT{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--pt-muted);text-transform:uppercase;margin:18px 0 8px 2px}

/* ---- phones and small tablets ------------------------------------------ */
@media (max-width:900px){
  .pt-frame{grid-template-columns:1fr}
  .pt-side{position:fixed;left:0;top:0;bottom:0;height:100%;width:270px;transform:translateX(-100%);transition:transform .22s ease;z-index:60;box-shadow:none;padding-top:14px}
  .pt-side.open{transform:translateX(0);box-shadow:16px 0 50px rgba(6,43,88,.35)}
  .pt-side .pt-it{font-size:15px;padding:10px 10px}
  .pt-side .pt-ev b{font-size:14px}.pt-side .pt-ev small{font-size:12px}
  .pt-side .pt-k{font-size:11px}
  .pt-x{position:absolute;top:12px;right:10px;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;border:0;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .pt-dim.open{display:block;position:fixed;inset:0;background:rgba(6,43,88,.4);z-index:55}
  .pt-topbar{display:flex;align-items:center;justify-content:space-between;background:var(--pt-navy);color:#fff;height:58px;padding:0 12px;position:sticky;top:0;z-index:40}
  .pt-topbar .pt-brand{padding:0;font-size:18px}
  .pt-burger{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--pt-navy);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .pt-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
  .pt-topbar .pt-spacer{width:40px}
  .pt-page{padding:16px 14px 48px}
  .pt-head h1{font-size:21px}
  .pt-head .pt-sub{font-size:12.5px}
  .pt-acts{width:100%}
  .pt-tabs{margin:0 -14px 14px;padding:0 14px}
}
@media (min-width:901px){
  .pt-x{display:none}
}
@media print{
  .pt-side,.pt-topbar,.pt-tabs,.pt-dim{display:none !important}
  .pt-frame{display:block}
  .pt-page{padding:0;max-width:none}
}

/* Embedded in another page (?embed=1): only the page itself. */
body.pt-embed{background:transparent}
body.pt-embed .pt-frame{display:block;min-height:0}
body.pt-embed .pt-side,body.pt-embed .pt-topbar,body.pt-embed .pt-dim,body.pt-embed .pt-head{display:none !important}
body.pt-embed .pt-page{padding:0 0 8px;max-width:none}