/* ==================================================================
   inmycalendar — shared shell: tokens, ribbon, footer, content pages
   Edited by hand; there is no build step. Load order matters:
   site.css first, app.css second, so app rules win where they overlap.
*/

:root{
  --popTop:52px;
  --paper:#f4ecd8; --card:#fdf8ec; --card2:#faf3e2;
  --ink:#232b33; --soft:#6b6555;
  --navy:#1b2a41; --navy2:#26374f; --pine:#3f6b58;
  --rule:#d8cbae; --rule2:#e8dfc9;
  --todo:#3f6fb5; --todoF:#e2ecf8; --todoE:#b3ccea;
  --doing:#c07a1c; --doingF:#f9ead0; --doingE:#e4c68e;
  --done:#3f7a4e; --doneF:#e0eddf; --doneE:#aecdaf;
  /* one measure for every band — header, body and footer cannot drift apart */
  --wrap:1280px; --gut:16px; --rail:172px;
  /* every slot in the ribbon is a fixed width, so nothing shifts when its text changes */
  --wIso:88px; --wMeta:152px; --wYrs:82px;
  /* sticky offsets are fixed CSS, never measured in JS (web-font load race) */
  --hBar:46px; --hTitle:26px; --hYear:24px; --hDow:21px;}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;line-height:1.4}
h1,h2,h3{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:500;letter-spacing:.05em;margin:0}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--pine);outline-offset:1px}
.wrap{width:min(100% - (var(--gut) * 2), var(--wrap));margin-left:auto;margin-right:auto}
.bar{position:sticky;top:0;z-index:60;background:var(--navy);color:#f0e9d6}
.bar .wrap{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;
  gap:10px;align-items:center;min-height:var(--hBar);padding-top:5px;padding-bottom:5px}
.brand{font-family:Oswald,sans-serif;font-size:15px;letter-spacing:.11em;white-space:nowrap;
  color:#f0e9d6;text-decoration:none}
.brand b{font-weight:500;color:#e8c98a}
.appzone{display:flex;align-items:center;gap:6px;min-width:0}
.gm{display:none}
.nub{background:transparent;border:1px solid #5d7089;color:#e6dcc4;border-radius:3px;
  height:26px;min-width:26px;padding:0 7px;font-size:12px;line-height:1;flex:none}
.nub:hover{background:var(--navy2)}
.seg{display:flex;border:1px solid #5d7089;border-radius:3px;flex:none}
.seg button{background:transparent;border:0;color:#cfd8e4;height:24px;width:56px;padding:0;
  font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.seg button+button{border-left:1px solid #5d7089}
.seg button.on{background:var(--pine);color:#fff8e7}
.seg button:hover:not(.on){background:var(--navy2)}
.sitenav{display:flex;gap:2px;align-items:center}
.sitenav a{color:#9fb0c4;text-decoration:none;font-family:Oswald,sans-serif;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:3px;white-space:nowrap}
.sitenav a:hover{background:var(--navy2);color:#e6dcc4}
.sitenav a.on{background:var(--pine);color:#fff8e7}
.sitenav .gap{width:1px;height:16px;background:#5d7089;margin:0 6px;flex:none}
.pop{position:absolute;right:calc(50% - min(50% - var(--gut), var(--wrap)/2));top:var(--popTop);z-index:70;
  width:290px;background:var(--card);border:1px solid var(--rule);
  box-shadow:0 10px 26px rgba(27,42,65,.22);padding:11px 12px}
.pop h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);margin-bottom:5px}
.pop hr{border:0;border-top:1px solid var(--rule2);margin:10px 0}
.pop .row{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.pop label{font-size:12px;color:var(--soft)}
.pop .navlinks,.pop .pagesHd{display:none}
.pop .navlinks a{display:block;padding:5px 2px;color:var(--pine);font-size:12.5px;
  border-bottom:1px solid var(--rule2);text-decoration:none}
.pop .navlinks a:hover{background:var(--card2)}
footer{border-top:1px solid var(--rule);margin-top:22px;padding:12px 0 24px;
  text-align:center;font-size:11.5px;color:var(--soft)}
footer a{color:var(--pine);margin:0 8px}
@media (max-width:1100px){
  :root{--rail:158px}
}
@media (max-width:900px){
  .sitenav a.page,.sitenav .gap{display:none}
  .pop .navlinks,.pop .pagesHd{display:block}
  .gd{display:none}
  .gm{display:inline}
}
@media (max-width:700px){
  :root{--gut:8px;--hBar:74px;--popTop:80px;--wIso:76px}
  .bar .wrap{grid-template-columns:max-content minmax(0,1fr) max-content;row-gap:5px;gap:6px}
  .brand{grid-column:1;grid-row:1}
  .sitenav{grid-column:2;grid-row:1;justify-content:flex-end;gap:0}
  .sitenav a{padding:5px 7px}
  .appzone{grid-column:1 / -1;grid-row:2;flex-wrap:nowrap;gap:4px}
  .nub{height:24px;min-width:24px;padding:0 6px;font-size:11px}
  .seg button{width:auto;padding:0 9px;font-size:10.5px;height:22px}
  .brand{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ---------- content pages (about / contact / privacy) ---------- */
.pagebody{padding:24px 0 48px}
.pagebody .body{max-width:660px}
.pagebody h1{font-size:25px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);
  border-bottom:2px solid var(--navy);padding-bottom:4px;margin:0 0 5px}
.pagebody h2{font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:var(--pine);margin:24px 0 5px}
.pagebody .eyebrow{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--pine);margin-bottom:18px}
.pagebody p{margin:0 0 11px;line-height:1.65}
.pagebody ul{margin:0 0 11px;padding-left:20px}
.pagebody li{margin-bottom:4px;line-height:1.65}
.pagebody a{color:var(--pine)}
.pagebody .card{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--pine);
  padding:11px 13px;margin:15px 0}
.pagebody .card.warn{border-left-color:#c07a1c;background:#f9ead0}
.pop .pagelinks a{display:block;padding:5px 2px;color:var(--pine);font-size:12.5px;
  border-bottom:1px solid var(--rule2);text-decoration:none}
.pop .pagelinks a:hover{background:var(--card2)}