/* =====================================================================
   calendar.css – layout and day boxes for the Four Calendars page
   ---------------------------------------------------------------------
   Load order (see index.html): calendar.css first, then theme.css,
   which sets the colours and fonts.
   ===================================================================== */

/* ---------- Colours and sizes ----------
   These are the starting values. The theme (theme.css) replaces most of
   the colours, so to change how the page looks, edit theme.css.
   --greg / --lunar / --tn / --doy – colours for each calendar system
   --fire / --earth / --air / --water – the zodiac elements
   --cell-h – height of one day box                                     */
:root{
  --bg:#0a0f1d; --bg2:#0f1628; --card:#121a2f; --line:#212c48; --line2:#2c3a5e;
  --ink:#e8eaf2; --mute:#8b94ad; --dim:#5a6380;
  --greg:#8fb4ff; --lunar:#f1cf7a; --tn:#c7a2ff; --doy:#9fc9b8; --sel:#ffffff;
  --fire:#e5785b; --earth:#8db469; --air:#d8c25a; --water:#59a8d6;
  --cell-h:66px;
  --fd:"EB Garamond",Georgia,serif; --fu:"Inter",system-ui,sans-serif; --onacc:#0a0f1d; --warn:#e9b46a; --ring:rgba(255,255,255,.55); --selglow:rgba(255,255,255,.25); --wkend:#c9cfdf; --moondark:#26304c; --moonedge:rgba(255,255,255,.18); --cellr:7px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 var(--fu);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
/* ---------- Each view has its own accent colour ----------
   body gets data-view="standard" / "lunar" / "zodiac" / "true-number"
   from calendar.js. The day boxes look the same in every view;
   the cards, header and buttons take the view's colour.            */
body{--accent:#8fb4ff;--card:#121a2f;--frame:#212c48;background:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--bg);background-attachment:fixed;transition:background-color .4s}
body[data-view=standard]{--accent:#8fb4ff;--bg:#090f1f;--card:#111a30;--frame:#22305a}
body[data-view=lunar]{--accent:#f1cf7a;--bg:#120f14;--card:#1a1620;--frame:#3a3122}
body[data-view=zodiac]{--accent:#74d4c4;--bg:#07131a;--card:#0e1d26;--frame:#1e3a44}
body[data-view=zodiac] .card{border-radius:12px!important;border-top:3px solid var(--el,var(--accent))!important}
.zgl{font-size:22px;line-height:1;color:var(--el)}
body[data-view=true-number]{--accent:#c7a2ff;--bg:#0f0b1c;--card:#17122a;--frame:#352a55}
header.top{border-bottom:2px solid color-mix(in srgb,var(--accent) 55%,transparent)!important;background:color-mix(in srgb,var(--bg) 90%,transparent)!important}
.seg#views button[aria-pressed=true]{background:var(--accent);color:var(--onacc)}
.kicker{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:5px 8px;border-radius:5px;align-self:center}
.card{border-color:var(--frame)!important;background:var(--card)!important}
body[data-view=standard] .card{border-radius:8px!important;border-top:3px solid var(--accent)!important}
body[data-view=lunar] .card{border-radius:22px!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
body[data-view=lunar] .card h3{font-style:italic}
body[data-view=true-number] .card{border-radius:3px!important;border-left:3px solid var(--accent)!important}
body[data-view=true-number] .card h3{font:600 15px/1.2 "IBM Plex Mono",monospace;letter-spacing:.04em}
.blk{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:3px;background:var(--accent);color:#0f0b1c;font:600 14px/1 "IBM Plex Mono",monospace}
aside.panel{border-color:var(--frame)!important;background:var(--card)!important;border-top:3px solid var(--accent)!important}
.showopts{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.c.bare .mo{width:24px;height:24px;right:calc(50% - 12px)!important;top:calc(50% - 16px)!important}
.c.bare .ev{right:0!important;left:0;text-align:center;top:auto;bottom:7px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- Header (title, view buttons, year, Show options) ---------- */
header.top{position:sticky;top:0;z-index:20;background:rgba(10,15,29,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 20px;max-width:1680px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand h1{font:600 22px/1 var(--fd);margin:0;letter-spacing:-.01em}
.brand span{color:var(--mute);font-size:12.5px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;padding:2px;background:var(--bg2)}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;cursor:pointer;color:var(--mute);font-weight:500;white-space:nowrap}
.seg button[aria-pressed=true]{background:#24304f;color:var(--ink)}
.yearnav{display:inline-flex;align-items:center;gap:4px}
.yearnav .yr{font:600 18px/1 var(--fd);min-width:58px;text-align:center}
.ibtn{border:1px solid var(--line2);background:var(--bg2);border-radius:8px;padding:5px 10px;cursor:pointer}
.ibtn:hover,.seg button:hover{color:var(--ink)}
.overlays{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 20px 12px;max-width:1680px;margin:0 auto}
.olabel{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--bg2);border-radius:999px;padding:5px 11px 5px 9px;cursor:pointer;color:var(--mute);font-size:13px;user-select:none}
.chip .sw{width:10px;height:10px;border-radius:3px;background:var(--c);opacity:.35}
.chip[aria-pressed=true]{color:var(--ink);border-color:color-mix(in srgb,var(--c) 55%,var(--line2));background:color-mix(in srgb,var(--c) 12%,var(--bg2))}
.chip[aria-pressed=true] .sw{opacity:1}
.group{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--line2);border-radius:999px;padding:2px 3px 2px 10px}
.group > span{color:var(--mute);font-size:12.5px;margin-right:2px}
.group .chip{padding:3px 9px 3px 7px;font-size:12.5px}
.sep{width:1px;height:20px;background:var(--line)}
.settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--mute);font-size:12.5px}
.settings label{display:inline-flex;align-items:center;gap:6px}
.settings input[type=date]{background:var(--bg2);border:1px solid var(--line2);border-radius:7px;padding:3px 6px;color-scheme:dark}
.seg.small button{padding:3px 9px;font-size:12.5px}

/* ---------- Page layout: cards on the left, day panel on the right ---------- */
.wrap{max-width:1680px;margin:0 auto;padding:18px 20px 60px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.viewhead{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:-4px}
.viewhead h2{font:400 26px/1.1 var(--fd);margin:0}
.viewhead p{margin:0;color:var(--mute);font-size:13px;max-width:80ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(392px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px}
.card h3{margin:0;font:600 16px/1.2 var(--fd);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .msw{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.card .sub{color:var(--mute);font-size:12px;margin:2px 0 8px;min-height:16px}
.card .sub b{color:var(--ink);font-weight:500}
.card .warn{color:var(--warn)}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.wk div{font-size:10.5px;color:var(--dim);text-align:center;text-transform:uppercase;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}

/* ---------- Day boxes ----------
   .c is one day. Inside it (all positioned in the corners):
     .n    big number (day count or date)     .g    small date
     .mo   moon picture                       .ev   moon phase text
     .x    other calendars' numbers           .doy  day of the year
     .zg   zodiac symbol                      .zb   zodiac colour band
     .tags labels along the top (TODAY etc.)  .bs/.be  brackets at a period's start/end
   Extra classes: .today, .sel (selected), .out (another year), .wkend,
   .zero (0 % lit), .nm (new moon day), .bare (no number shown)             */
.c{position:relative;height:var(--cell-h);border-radius:var(--cellr);background:var(--bg2);border:1px solid transparent;cursor:pointer;overflow:hidden;outline:none}
.c.blank{background:none;cursor:default}
.c:hover{border-color:var(--line2)}
.c.out{opacity:.38}
.c.wkend .n{color:var(--wkend)}
.c .tint{position:absolute;inset:0;pointer-events:none}
.c .n{position:absolute;left:5px;top:3px;font:600 15px/1.1 var(--fu);font-variant-numeric:tabular-nums}
.c .g{position:absolute;left:5px;top:21px;font-size:9.5px;color:var(--mute);white-space:nowrap}
.c .mo{position:absolute;right:4px;top:4px;width:15px;height:15px}
.c .ev{position:absolute;right:3px;top:31px;font:500 8.5px/1 "IBM Plex Mono",monospace;color:var(--lunar);text-align:right}
.c .x{position:absolute;left:5px;bottom:5px;display:flex;flex-direction:column;gap:0;font:500 8.8px/1.15 "IBM Plex Mono",monospace}
.c .x .L{color:var(--lunar)} .c .x .T{color:var(--tn)} .c .x .G{color:var(--greg)}
.c .doy{position:absolute;right:4px;bottom:5px;font:400 8.8px/1 "IBM Plex Mono",monospace;color:var(--doy)}
.c .zg{position:absolute;left:25px;top:6px;font-size:10.5px;line-height:1;opacity:.95}
.c .zb{position:absolute;left:0;right:0;bottom:0;height:4px}
.c .zb.ing::after{content:"";position:absolute;left:50%;top:-5px;bottom:0;width:2px;margin-left:-1px;background:#fff;border-radius:1px}
.c .bs,.c .be{position:absolute;top:1px;bottom:1px;width:9px;border:3px solid var(--k);pointer-events:none}
.c .bs{border-right:0;border-radius:6px 0 0 6px}
.c .be{border-left:0;border-radius:0 6px 6px 0}
.c .n,.c .g,.c .x{left:var(--pl,5px)!important}
.c .mo,.c .ev{right:var(--pr,4px)!important}
.c .doy{left:0!important;right:0!important;bottom:5px;text-align:center;font:600 10.5px/1 var(--fu);font-variant-numeric:tabular-nums;color:var(--doy)}
.c.bare.has-doy .mo{top:calc(50% - 19px)!important}
/* The big copy of the selected day at the top of the panel (.bigcell) is the same box, scaled up */
.panel h2{font-size:25px!important;white-space:nowrap}
.panel h2 .left{font:400 12.5px/1 var(--fu);color:var(--mute);letter-spacing:0;white-space:nowrap;margin-left:6px;vertical-align:middle}
.c.today::after{display:none}
.c.today{box-shadow:0 0 0 2.5px #f1c75b,0 0 16px 2px rgba(241,199,91,.55)!important;z-index:1}
.c.today.sel{box-shadow:0 0 0 2.5px #f1c75b,0 0 0 5px #1e2a22,0 0 16px 2px rgba(241,199,91,.5)!important}
.bigcell .c.today{box-shadow:none!important}
.c .tags i[style*="f1c75b"]{color:#2a1f05!important;font-weight:700;letter-spacing:.08em}
.todaychip{margin-left:auto;font:600 11px/1 var(--fu);font-style:normal;letter-spacing:.06em;color:#2a1f05;background:#f1c75b;padding:4px 8px;border-radius:999px}
/* faint glow around the big moon, so a thin crescent still shows the whole disc */
.bigcell .c canvas.realmoon{border-radius:50%;box-shadow:0 0 0 .6px rgba(255,255,255,.28),0 0 6px 1px rgba(255,255,255,.22)}
.c canvas.rm{border-radius:50%}
.c canvas.rm.evr{box-shadow:0 0 0 1.4px #f1c75b}
.bigcell{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.bigcell:active{cursor:grabbing}
/* the big box row: ‹ button, the box, › button */
.bigwrap{display:flex;align-items:center;gap:6px;margin:0 0 14px}
/* ‹ › buttons: rounded, in the colour of the current view (--accent); filled on hover */
.bignav{flex:none;align-self:stretch;width:38px;min-height:64px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;
  background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent);transition:background .15s,color .15s,transform .1s}
.bignav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bignav:hover{background:var(--accent);color:var(--onacc);border-color:var(--accent)}
.bignav:active{transform:scale(.94)}
.bignav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the strip of three days inside the box; calendar.js moves it sideways */
.bigtrack{position:absolute;inset:0;will-change:transform}
.slot{position:absolute;top:0;width:100%;height:100%;left:calc(var(--i) * (100% + 14px))}   /* 14px = SLOT_GAP in calendar.js */
.bigcell .c{position:absolute;left:0;top:0;width:102px;height:72px!important;transform-origin:0 0;cursor:default;border-color:var(--frame)}
.bigcell .c .mo{width:42px!important;height:42px!important;right:calc(50% - 21px)!important;top:13px!important}
.bigcell .c .n{top:12px!important;font-size:17px}
.bigcell .c .g{left:auto!important;right:5px;top:4.5px!important;font-size:5.6px;font-weight:500}
.bigcell .c .wkl{position:absolute;left:5px;top:4.5px;font:700 4.6px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.bigcell .c .plbl{position:absolute;left:5px;top:32px;font:500 4.6px/1.15 "Inter",system-ui,sans-serif;max-width:24px;opacity:.85}
.bigcell .c .mo{top:13px!important}
.bigcell .c .ev{top:49px!important}
.bigcell .c .ev{display:block!important;left:0;right:0!important;top:47px!important;text-align:center;font:500 5.6px/1.2 "IBM Plex Mono",monospace}
.bigcell .c .doy{font-size:5.8px;bottom:5px}
.bigcell .c .lbl{position:absolute;font:500 3.6px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.c .tags{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:3px;pointer-events:none}
.c .tags i{font:600 8px/1 "IBM Plex Mono",monospace;font-style:normal;padding:1px 3px 2px;border-radius:0 0 3px 3px;color:var(--onacc);letter-spacing:.03em}
.c.has-tags .n{top:9px} .c.has-tags .g{top:26px} .c.has-tags .mo{top:10px} .c.has-tags .ev{top:35px} .c.has-tags .zg{top:12px}
.c.dark{background:#060a15}
.c.nm{background:#060a15;box-shadow:inset 0 0 0 1px rgba(241,207,122,.35)}
.c.zero{background:radial-gradient(circle at 50% 42%,#1d2136 0,#02040a 72%)!important;border:1px dashed rgba(241,207,122,.6)}
.c.zero .tint{display:none}
.darkrow{margin-top:9px;padding-top:9px;border-top:1px dashed color-mix(in srgb,var(--accent) 35%,transparent)}
.darkrow .dl{text-align:center;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.8;margin-bottom:6px}
.darkrow .dcells{display:flex;justify-content:center;gap:3px}
.darkrow .dcells .c{width:calc((100% - 18px) / 7);flex:none}
.c.dark .mo{opacity:.55}
.c.today::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--ring);pointer-events:none}
.c.sel{border-color:var(--sel);box-shadow:0 0 0 2px var(--selglow)}
.c:focus-visible{border-color:var(--sel)}

/* ---------- Day panel (details of the selected day) ---------- */
aside.panel{position:sticky;top:var(--hdr,118px);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;max-height:calc(100vh - var(--hdr,118px) - 20px);overflow:auto}
.panel .close{display:none}
.panel h2{font:400 24px/1.15 var(--fd);margin:0 0 2px}
.panel .wday{color:var(--mute);font-size:13px;margin-bottom:12px}
.sec{border-top:1px solid var(--line);padding:10px 0 4px}
.sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;user-select:none}
.sec > summary::-webkit-details-marker{display:none}
.sec > summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--mute);border-bottom:1.6px solid var(--mute);transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
.sec[open] > summary::after{transform:rotate(45deg)}
.sec > summary:hover h4{filter:brightness(1.25)}
.sec:not([open]){padding-bottom:8px}
.sec > summary h4{margin:0!important}
.sec[open] > summary{margin-bottom:6px}
.sec h4{margin:0 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--c,var(--mute));display:flex;align-items:center;gap:7px}
.sec h4::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c,var(--mute))}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px}
.kv dt{color:var(--mute)} .kv dd{margin:0}
.big{font:500 15px/1.3 var(--fu)}
.note{font-size:12px;color:var(--mute);margin-top:4px}
.note.warn{color:var(--warn)}
.jump{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.jump button{border:1px solid var(--line2);background:var(--bg2);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:12.5px}
.jump button[disabled]{opacity:.45;cursor:default}
.moonbig{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.moonbig svg{width:46px;height:46px;flex:none}

/* Legend */
.legend{font-size:12px;color:var(--mute)}
.legend h4{margin:0 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.legend .row{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px}
.legend .row span{display:inline-flex;align-items:center;gap:5px}
.legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend .bar3{width:14px;height:3px;display:inline-block;border-radius:2px}
.empty{color:var(--mute);font-size:13px}

/* ---------- Narrower screens: the panel becomes a sheet at the bottom ---------- */
@media (max-width:1100px){
  .wrap{grid-template-columns:1fr}
  aside.panel{position:fixed;left:8px;right:8px;bottom:8px;top:auto;max-height:52vh;z-index:30;box-shadow:0 -10px 40px rgba(0,0,0,.5);display:none}
  aside.panel.open{display:block}
  /* clear close bar at the top of the sheet; it stays visible while the sheet scrolls */
  .panel .close{display:flex;align-items:center;justify-content:center;gap:6px;position:sticky;top:-16px;z-index:5;width:calc(100% + 32px);margin:-16px -16px 12px;padding:9px;border:0;border-bottom:1px solid var(--frame);border-radius:14px 14px 0 0;background:var(--card);color:var(--mute);font-size:13px;font-weight:500}
  .panel .close::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--line2);position:absolute;top:5px;left:50%;margin-left:-18px}
  .panel .close{padding-top:14px}
  .legendHost{display:block}
}
/* ---------- Phones ---------- */
@media (max-width:520px){
  :root{--cell-h:56px}
  .bar{padding:10px 12px;gap:8px 10px}
  .overlays{padding:0 12px 10px}
  .wrap{padding:12px 8px 60px}
  .cards{grid-template-columns:1fr}
  .card{padding:10px 8px}
  .grid,.wk{gap:2px}
  .c .n{font-size:13.5px;left:3px}
  .c .g{left:3px;font-size:8.5px}
  .c .x{left:3px;font-size:8px}
  .c .doy{font-size:9.5px}
  .c .mo{width:13px;height:13px;right:2px}
  .c .ev{display:none}
  header.top{position:static}
  .brand span{display:none}
}


/* ---------- Added for pina.day ---------- */

/* "← Piña" link back to the front page, left of the title */
.home{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-right:4px;padding:4px 10px 4px 6px;border:1px solid var(--line2);border-radius:999px;color:var(--mute);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.home img{width:18px;height:18px}
.home:hover{color:var(--ink);border-color:var(--accent)}

/* One sentence explaining the idea, above the view title */
.about{grid-column:1/-1;margin:0 0 2px;color:var(--mute);font-size:14px;max-width:80ch}
.about b{color:var(--ink);font-weight:600}

/* Label on the first day from another year ("Dec 2025") */
.c .outlbl{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:700 9px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:#000}   /* the whole box is see-through, so the label is black to stay readable */
.c.out.has-doy .outlbl{bottom:auto;top:3px}
@media (max-width:520px){ .c .outlbl{font-size:7px} .about{font-size:13px} }

/* Sideways swipes on the panel belong to the calendar (change day), not to the browser
   (which would otherwise go "back" a page). Up/down scrolling still works normally. */
aside.panel{touch-action:pan-y}
html,body{overscroll-behavior-x:none}