/* Content calendar preview. Palette and type carried over from the creative boards
   so the two surfaces read as one system. Three self hosted families, no remote asset.
   Brand and platform artwork is held in logos/ beside this file and loaded from there. */

@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#FAFAF8; --ink:#16161A; --sec:#45454A; --mut:#6C6C68;
  --hair:#D4D4CE; --hair2:#E7E7E1; --fill:#FFFFFF; --edge:#16161A;
  --mark:#A82F26; --calm:#2C5F7C;

  /* Pillar accents. Four widely separated hues, every one measured at 5.5 to 1 or
     better against the paper and against the white card, so the same value works as
     a border, as a solid block, and as paper colored text sitting on that block.
     Smallest pairwise separation between the four is 71.8 in CIE76 deltaE. */
  --p-product:#0A50F5;
  --p-routine:#C10588;
  --p-education:#007627;
  --p-organic:#9B5300;

  --brand:#16161A;
  --head:"Instrument Sans",system-ui,sans-serif;
  --body:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
}
body[data-brand="alphamale"]{--brand:#A82F26}
body[data-brand="prodigy-life"]{--brand:#2C5F7C}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.chip,.vbtn,.sortbtn,.rowbtn,.close,.reset{cursor:pointer}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

a{color:var(--ink)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
img{max-width:100%}

/* ---------- page shell ---------- */
.wrap{max-width:1760px;margin:0 auto;padding:0 30px}

#topbar{border-bottom:2px solid var(--brand);background:var(--paper);
  position:sticky;top:0;z-index:15}
#topbar .wrap{display:flex;align-items:center;gap:18px;height:64px}

/* brand identity, carried by the real logo file */
.brandlock{display:flex;align-items:center;gap:12px;min-width:0}
.brandlogo{display:block;flex:0 0 auto;width:auto}
.brandlogo.am{height:22px}
/* the stacked lockup cropped to its monogram, so the mark carries the identity
   and the brand name stands beside it in type */
.brandlogo.pl{width:34px;height:34px;background-image:url("logos/prodigy-life.png");
  background-repeat:no-repeat;background-size:75.4px 70.3px;background-position:-20.9px -6.5px}
.brandname{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:-.015em;
  color:var(--brand);white-space:nowrap;line-height:1.2}
.brandsub{font-family:var(--body);font-weight:400;font-size:14px;color:var(--mut);
  padding-left:12px;border-left:1px solid var(--hair);line-height:1.2;white-space:nowrap}
.top-spacer{flex:1}

/* switch between the two brand calendars */
.brandswitch{display:flex;align-items:stretch;border:1px solid var(--hair);flex:0 0 auto}
.bsw{display:flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;
  font-size:14px;color:var(--sec);text-decoration:none;padding:7px 13px;line-height:1.2;
  border-left:1px solid var(--hair);white-space:nowrap}
.bsw:first-child{border-left:0}
.bsw:hover{color:var(--ink);background:var(--hair2)}
.bsw[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--hair2)}
.bmk{flex:0 0 auto;display:block;width:20px;height:20px;background-repeat:no-repeat}
.bmk-am{background-image:url("logos/alphamale-mark.png");background-size:20px 20.6px;
  background-position:center}
/* the stacked lockup cropped to its monogram so the mark reads at 20 pixels */
.bmk-pl{background-image:url("logos/prodigy-life.png");background-size:44.4px 41.4px;
  background-position:-12.3px -3.8px}

/* ---------- view switch ---------- */
.switchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:30px 0 20px}
.vbtn{font-family:var(--body);font-weight:500;font-size:14px;color:var(--sec);background:var(--paper);
  border:1px solid var(--hair);padding:8px 15px;line-height:1}
.vbtn:hover{border-color:var(--edge);color:var(--ink)}
.vbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.switchbar .count{font-family:var(--mono);font-size:13px;color:var(--mut);margin-left:4px}

[data-view][hidden]{display:none}

/* ---------- month view ---------- */
.monthscroll{overflow-x:auto;padding-bottom:4px}
table.month{width:100%;min-width:940px;border-collapse:collapse;table-layout:fixed}
table.month caption{caption-side:bottom;text-align:left;font-size:15px;line-height:1.55;
  color:var(--sec);padding:16px 0 0;max-width:82ch}
table.month th.wk{width:74px}
table.month thead th{font-family:var(--body);font-weight:600;font-size:14px;color:var(--sec);
  text-align:left;padding:0 0 9px;border-bottom:2px solid var(--edge)}
table.month tbody th.wk{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--mut);
  text-align:left;vertical-align:top;padding:13px 10px 0 0;border-top:1px solid var(--hair2)}
table.month td{vertical-align:top;padding:13px 7px 20px 0;border-top:1px solid var(--hair2);width:auto}
.dnum{display:flex;align-items:baseline;gap:6px;margin:0 0 9px;height:20px}
.dnum .d{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--sec)}
.dnum .mo{font-size:12px;color:var(--mut)}
td.empty .dnum .d{color:var(--mut);font-weight:400}

/* ---------- chip ----------
   One fixed height for every chip, so a week row sits level and the rows keep the
   same rhythm down the page. The hook is the only elastic part and it clips. */
.chip{display:flex;flex-direction:column;width:100%;height:168px;overflow:hidden;
  text-align:left;background:var(--fill);border:3px solid var(--p-organic);
  padding:9px 10px 10px;font-family:var(--body);color:var(--ink)}
.chip.pl-product{border-color:var(--p-product)}
.chip.pl-routine{border-color:var(--p-routine)}
.chip.pl-education{border-color:var(--p-education)}
.chip.pl-organic{border-color:var(--p-organic)}
.chip:hover{box-shadow:4px 4px 0 var(--hair)}
.chip.on{box-shadow:4px 4px 0 var(--edge)}

.chip-head{display:flex;align-items:center;gap:6px;margin:0 0 7px;flex:0 0 auto}
/* the pillar reads twice, as a solid block of its color and as its own name */
.chip-tag{display:block;background:var(--p-organic);color:var(--paper);
  font-family:var(--head);font-weight:600;font-size:11px;line-height:1.25;
  padding:2px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.pl-product .chip-tag{background:var(--p-product)}
.chip.pl-routine .chip-tag{background:var(--p-routine)}
.chip.pl-education .chip-tag{background:var(--p-education)}
.chip.pl-organic .chip-tag{background:var(--p-organic)}
.chip-time{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--sec);
  font-variant-numeric:tabular-nums;flex:0 0 auto}

.chip-top{display:flex;align-items:center;gap:6px;margin:0 0 6px;flex:0 0 auto;height:16px}
.chip-top svg{flex:0 0 auto;display:block}
.chip-fmt{font-family:var(--head);font-weight:600;font-size:13px;line-height:1.2;color:var(--ink)}
.chip-prod{display:block;flex:0 0 auto;font-size:12.5px;line-height:1.3;color:var(--sec);
  margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the hook sits one level in, because a direct flex child is blockified and a
   blockified box cannot carry the line clamp */
.chip-body{flex:1 1 auto;min-height:0;overflow:hidden}
.chip-hook{font-size:13px;line-height:1.38;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chip.has-flag .chip-hook{-webkit-line-clamp:2}
.chip-flag{flex:0 0 auto;align-self:flex-start;margin-top:auto;max-width:100%;
  display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.2;color:var(--mark);
  border:1px dashed var(--mark);padding:3px 6px}
.chip-flag .flagname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- platform marks ----------
   Every mark carries a text label beside it. The TikTok mark is the real logo file.
   The Instagram and Facebook marks are simplified in house glyphs drawn as inline
   SVG, monochrome so they take the color of the text they sit with. */
.pmk{flex:0 0 auto;display:block;width:13px;height:13px}
.pmk-file{background-repeat:no-repeat;background-position:center;background-size:contain}
.pmk-tiktok{width:12px;height:13px;background-image:url("logos/tiktok.svg")}

/* ---------- legend and the one note ---------- */
.below{padding:26px 0 8px;border-top:1px solid var(--hair);margin-top:26px}
.legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 14px;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--sec)}
.legend .sw{width:34px;height:18px;background:var(--p-organic);flex:0 0 auto;display:block}
.legend .sw.pl-product{background:var(--p-product)}
.legend .sw.pl-routine{background:var(--p-routine)}
.legend .sw.pl-education{background:var(--p-education)}
.legend .sw.pl-organic{background:var(--p-organic)}
.notes{margin:0;max-width:82ch}
.notes p{font-size:15px;line-height:1.6;color:var(--sec);margin:0}
.srcline{font-size:13px;line-height:1.6;color:var(--mut);margin:26px 0 0;
  border-top:1px solid var(--hair2);padding:14px 0 40px;max-width:90ch}

/* ---------- table view ---------- */
.filters{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;margin:0 0 16px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:13px;color:var(--mut);line-height:1.2}
.field select{font-family:var(--body);font-size:14px;color:var(--ink);background:var(--fill);
  border:1px solid var(--hair);padding:7px 9px;min-width:168px;line-height:1.3}
.field select:hover{border-color:var(--edge)}
.reset{align-self:flex-end;font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--hair);padding:8px 13px;line-height:1.3}
.reset:hover{border-color:var(--edge)}

.gridscroll{overflow-x:auto;border-top:2px solid var(--edge)}
table.grid{width:100%;min-width:1140px;border-collapse:collapse;font-size:14px}
table.grid caption{caption-side:bottom;text-align:left;font-size:15px;line-height:1.55;
  color:var(--sec);padding:16px 0 0;max-width:82ch}
table.grid th{text-align:left;font-weight:600;color:var(--sec);padding:0;
  border-bottom:1px solid var(--hair);background:var(--paper)}
.sortbtn{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;
  font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--sec);
  padding:11px 12px 10px 0;text-align:left;line-height:1.3}
.sortbtn:hover{color:var(--ink)}
th[aria-sort] .sortbtn{color:var(--ink)}
.sortmark{font-size:10px;color:var(--mut)}
th.plain{font-size:13.5px;padding:11px 12px 10px 0;font-weight:600}
table.grid td{padding:11px 12px 11px 0;border-bottom:1px solid var(--hair2);
  vertical-align:top;line-height:1.42;color:var(--sec)}
table.grid tr.on td{background:#F2F2EC}
td.c-date{white-space:nowrap}
td.c-time{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
td.c-hook{color:var(--ink);min-width:280px}
td.c-fmt{white-space:nowrap;color:var(--ink)}
td.c-pillar{white-space:nowrap}
.pdot{display:inline-block;width:11px;height:11px;background:var(--p-organic);
  margin-right:8px;vertical-align:-1px}
.pdot.pl-product{background:var(--p-product)}
.pdot.pl-routine{background:var(--p-routine)}
.pdot.pl-education{background:var(--p-education)}
.pdot.pl-organic{background:var(--p-organic)}
.rowbtn{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink);background:none;
  border:0;padding:0;text-align:left;line-height:1.42;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--hair);white-space:nowrap}
.rowbtn:hover{text-decoration-color:var(--ink)}
.chan{display:flex;flex-wrap:wrap;gap:5px}
.chan span.ch{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;
  border:1px solid var(--hair);padding:3px 7px;color:var(--sec);white-space:nowrap}
.chan span.ch.wait{border:1px dashed var(--mark);color:var(--mark)}
.empty-row td{padding:26px 0;color:var(--mut);font-size:15px}

/* ---------- detail panel ---------- */
#scrim{position:fixed;inset:0;background:rgba(20,20,18,.2);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;z-index:19}
#scrim.on{opacity:1;visibility:visible;transition:opacity .2s ease}
#panel{position:fixed;top:0;right:0;width:470px;max-width:100%;height:100vh;background:var(--paper);
  border-left:2px solid var(--edge);padding:28px 30px 48px;overflow-y:auto;z-index:20;
  transform:translateX(100%);visibility:hidden;
  transition:transform .22s ease,visibility 0s linear .22s}
#panel.open{transform:none;visibility:visible;transition:transform .22s ease}
#panel h2{font-family:var(--head);font-weight:700;font-size:23px;line-height:1.18;
  letter-spacing:-.018em;margin:0 0 10px;padding-right:74px;color:var(--ink)}
.close{position:absolute;top:22px;right:26px;background:var(--paper);border:1px solid var(--hair);
  font-family:var(--body);font-size:14px;padding:6px 12px;color:var(--ink);line-height:1.2}
.close:hover{border-color:var(--edge)}
.panel-when{font-family:var(--mono);font-size:13px;color:var(--sec);margin:0 0 20px;
  font-variant-numeric:tabular-nums}
.block{border:2px solid var(--edge);padding:14px 16px 15px;margin:0 0 14px;background:var(--fill)}
.block.tint{border-color:var(--brand)}
.block h3{font-family:var(--head);font-weight:700;font-size:15px;margin:0 0 10px;color:var(--ink)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
dl.kv dt{color:var(--mut);line-height:1.4}
dl.kv dd{margin:0;color:var(--ink);line-height:1.4;text-align:right}
dl.kv dd .mono{font-size:13px}
.pilltag{display:inline-block;background:var(--p-organic);color:var(--paper);
  font-weight:600;font-size:13px;line-height:1.3;padding:2px 8px}
.pilltag.pl-product{background:var(--p-product)}
.pilltag.pl-routine{background:var(--p-routine)}
.pilltag.pl-education{background:var(--p-education)}
.pilltag.pl-organic{background:var(--p-organic)}
.chanlist{list-style:none;margin:0;padding:0;font-size:14px}
.chanlist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair2)}
.chanlist li:first-child{border-top:0;padding-top:0}
.chanlist .who{display:flex;align-items:center;gap:8px;color:var(--ink);min-width:104px}
.chanlist .handle{font-family:var(--mono);font-size:12.5px;color:var(--mut);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chanlist .state{font-size:13px;color:var(--sec);text-align:right;white-space:nowrap}
.chanlist .state.wait{color:var(--mark)}
.panel-note{font-size:14px;line-height:1.55;color:var(--sec);margin:0 0 8px}
.panel-note.tight{margin-bottom:0}
.pathline{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--sec);
  margin:0;word-break:break-all}
.reftag{font-family:var(--mono);font-size:12px;color:var(--mut);margin:20px 0 0;
  border-top:1px solid var(--hair2);padding-top:12px}

@media (max-width:1180px){
  #panel{width:420px}
}
@media (max-width:820px){
  #topbar .wrap{gap:12px}
  .brandsub{display:none}
  #panel{width:100%;border-left:0}
}