/* ==========================================================================
   Naam Jaap Panchang — Month View  ·  "temple at dusk"
   Self-contained: reuses the day-view design tokens. Does not touch styles.css.
   ========================================================================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/mulish-400.woff2') format('woff2');}

:root{
  --bg:#f5eddd; --bg-deep:#efe4cf; --card:#fffdf8; --card-soft:#fbf5e9;
  --ink:#32251c; --muted:#82705c; --cream:#fff6e8;
  --maroon-1:#2e0f1d; --maroon-2:#4d1a2b; --maroon-3:#632434;
  --gold:#d9a441; --gold-soft:#f0cd8a; --gold-line:rgba(217,164,65,.55);
  --saffron:#e2701f; --saffron-deep:#b5560f;
  --green:#1f6f5c; --green-soft:#e7f3ee; --red:#b23c2e; --red-soft:#fbebe6;
  --violet:#6b4a7a; --blue:#3a6ea5;
  --border:rgba(101,66,32,.14); --border-strong:rgba(101,66,32,.22);
  --shadow:0 10px 30px rgba(72,40,18,.10); --shadow-lift:0 16px 38px rgba(72,40,18,.16);
  --radius-lg:18px; --radius-md:14px; --radius-sm:10px;
  --font-display:"Fraunces","Noto Serif Devanagari","Noto Serif Gujarati",Georgia,serif;
  --font-body:"Mulish","Noto Sans Devanagari","Noto Sans Gujarati","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.5;
  background:
    radial-gradient(circle at 12% -5%,rgba(226,112,31,.06),transparent 30%),
    radial-gradient(circle at 92% 4%,rgba(217,164,65,.09),transparent 26%),
    linear-gradient(180deg,#f8f1e2 0%,var(--bg) 46%,var(--bg-deep) 100%);
  background-attachment:fixed; min-height:100vh;
}
a{color:inherit;text-decoration:none}

.cal-shell{max-width:1180px;margin:0 auto;padding:clamp(14px,4vw,34px)}

/* ---- 2-column layout (calendar + sidebar) ---- */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.cal-main{min-width:0}
.cal-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}
@media(max-width:980px){.cal-layout{grid-template-columns:1fr}.cal-side{position:static}}

.side-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow)}
.side-eyebrow{font-family:var(--font-body);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-deep)}
.side-head{margin-bottom:12px}
.side-list{display:flex;flex-direction:column;gap:2px}
.side-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:800;font-size:.85rem;
  color:#fff8ec;background:linear-gradient(135deg,#f6a04b,var(--saffron) 55%,var(--saffron-deep));
  border-radius:999px;padding:.6rem 1.05rem;text-decoration:none;transition:.15s;margin-top:12px}
.side-btn:hover{transform:translateY(-1px)}
.side-btn.ghost{color:var(--saffron-deep);background:var(--card-soft);border:1px solid var(--border)}

/* today */
.st-date{font-size:.82rem;color:var(--muted);margin-bottom:12px;font-weight:600}
.st-grid{display:flex;flex-direction:column;gap:0}
.st-grid>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--border);padding:8px 0}
.st-grid>div:last-child{border-bottom:0}
.st-l{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.st-grid strong{font-family:var(--font-display);font-weight:600;color:var(--maroon-1);font-size:.95rem;text-align:right}

/* upcoming festivals */
.side-fest{display:flex;align-items:center;gap:11px;padding:8px 4px;border-radius:8px;text-decoration:none;transition:.12s}
.side-fest:hover{background:var(--card-soft)}
.sf-date{flex:none;text-align:center;min-width:38px}
.sf-d{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--saffron-deep);line-height:1}
.sf-m{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.sf-name{font-size:.86rem;color:var(--ink);font-weight:600;line-height:1.25}

/* blog */
.side-blog{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:8px;text-decoration:none;transition:.12s}
.side-blog:hover{background:var(--card-soft)}
.side-blog img{width:56px;height:42px;flex:none;border-radius:7px;object-fit:cover;background:var(--card-soft)}
.sb-title{font-size:.82rem;color:var(--ink);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* app card */
.side-app{text-align:center;background:linear-gradient(150deg,var(--maroon-1),var(--maroon-2) 62%,var(--maroon-3));
  border:1px solid rgba(240,205,138,.2);color:var(--cream)}
.side-app img{width:48px;height:48px;border-radius:12px;margin-bottom:8px}
.side-app strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--cream);margin-bottom:5px}
.side-app p{font-size:.82rem;color:rgba(255,246,232,.72);margin-bottom:2px;line-height:1.45}
.side-app .side-btn{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--maroon-1)}

/* ---- Top bar ---- */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.cal-brand{display:flex;align-items:center;gap:12px}
.cal-brand img{width:42px;height:42px;border-radius:12px}
.cal-brand strong{font-family:var(--font-display);font-size:1.18rem;color:var(--maroon-1);font-weight:600;display:block;line-height:1.1}
.cal-brand small{color:var(--muted);font-size:.78rem}
.cal-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.86rem;color:var(--saffron-deep);
  background:var(--card);border:1px solid var(--border);border-radius:999px;padding:.5rem .95rem;text-decoration:none}
.cal-top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lang-switcher{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px}
.lang-btn{font-family:var(--font-body);font-weight:700;font-size:.8rem;color:var(--muted);background:none;border:0;
  border-radius:999px;padding:.4rem .7rem;cursor:pointer;transition:.15s}
.lang-btn:hover{color:var(--saffron-deep)}
.lang-btn.active{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--maroon-1)}

/* ---- Header card ---- */
.cal-head{
  background:linear-gradient(150deg,var(--maroon-1),var(--maroon-2) 62%,var(--maroon-3));
  color:var(--cream);border:1px solid rgba(240,205,138,.2);border-radius:var(--radius-lg);
  padding:clamp(16px,3vw,24px);box-shadow:var(--shadow);position:relative;overflow:hidden;margin-bottom:14px
}
.cal-head::after{content:"";position:absolute;inset:0;
  background:repeating-radial-gradient(circle at 100% 0,rgba(240,205,138,.10) 0 1.5px,transparent 1.5px 32px);pointer-events:none}
.cal-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.cal-nav{display:flex;align-items:center;gap:14px}
.cal-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(240,205,138,.4);background:rgba(255,246,232,.08);
  color:var(--cream);font-size:1.3rem;display:grid;place-items:center;cursor:pointer;transition:.15s;flex:none}
.cal-arrow:hover{background:rgba(240,205,138,.2)}
.cal-title{text-align:center;min-width:210px}
.cal-title h1{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.05rem);font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.cal-lunar{color:var(--gold-soft);font-size:.92rem;margin-top:2px}
.cal-samvat{color:rgba(255,246,232,.66);font-size:.78rem;margin-top:3px;letter-spacing:.02em}

/* ---- Controls ---- */
.cal-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1;margin-top:16px;justify-content:center}
.cal-select{appearance:none;font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--cream);
  background:rgba(255,246,232,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f0cd8a'/%3E%3C/svg%3E") no-repeat right .9rem center;
  border:1px solid rgba(240,205,138,.4);border-radius:999px;padding:.6rem 2.1rem .6rem 1.1rem;cursor:pointer}
.cal-select option{color:#32251c}
.cal-today{font-family:var(--font-body);font-weight:800;font-size:.86rem;color:var(--maroon-1);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));border:0;border-radius:999px;padding:.62rem 1.15rem;cursor:pointer}

/* segmented toggles (system + view) */
.seg{display:inline-flex;background:rgba(255,246,232,.08);border:1px solid rgba(240,205,138,.35);border-radius:999px;padding:3px}
.seg button{font-family:var(--font-body);font-weight:700;font-size:.82rem;color:rgba(255,246,232,.7);
  background:none;border:0;border-radius:999px;padding:.45rem .95rem;cursor:pointer;transition:.15s;white-space:nowrap}
.seg button.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--maroon-1)}

/* ---- Legend ---- */
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:0 0 16px;padding:12px;
  background:var(--card-soft);border:1px solid var(--border);border-radius:var(--radius-md)}
.leg{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);font-weight:600}
.leg .dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.ekadashi{background:var(--saffron)}
.dot.purnima{background:var(--gold)}
.dot.amavasya{background:var(--maroon-2)}
.dot.chaturthi{background:var(--green)}
.dot.pradosh{background:var(--blue)}
.dot.shivaratri{background:var(--violet)}
.dot.ashtami{background:var(--red)}

/* ---- Weekday header ---- */
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.cal-dows span{text-align:center;font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-deep);padding:2px 0}
.cal-dows span.wend{color:var(--red)}

/* ---- Grid ---- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-cell{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  min-height:104px;padding:8px 8px 7px;display:flex;flex-direction:column;position:relative;transition:.14s;overflow:hidden;
  container-type:inline-size}
a.cal-cell:hover{border-color:var(--gold-line);box-shadow:var(--shadow);transform:translateY(-2px)}
.cal-cell.empty{background:transparent;border:0;pointer-events:none}
.cal-cell.krishna{background:var(--card-soft)}
/* Ring drawn outside the border box, not a thicker border: a 2px border would
   shrink this cell's content box below the container-query threshold and leave
   today showing dots while every other cell shows named pills. */
.cal-cell.today{border-color:var(--saffron);box-shadow:0 0 0 1px var(--saffron),0 0 0 4px rgba(226,112,31,.12)}
.cell-top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.cell-date{font-family:var(--font-display);font-size:1.32rem;font-weight:600;line-height:1;color:var(--maroon-1)}
.cal-cell.wend .cell-date{color:var(--red)}
.cell-moon{width:20px;height:20px;flex:none;opacity:.9}
.cell-tithi{font-size:.72rem;color:var(--ink);margin-top:4px;font-weight:700;line-height:1.2}
.cell-maas{font-size:.6rem;color:var(--muted);margin-top:1px;font-weight:600;line-height:1.15;opacity:.9}
.cell-marks{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:5px}
.mark{display:flex;align-items:flex-start;gap:5px;font-size:.66rem;font-weight:700;line-height:1.2;
  border-radius:6px;padding:3px 5px}
.mark .dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:2px}
.mark>span:not(.dot){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}
.mark.ekadashi{background:rgba(226,112,31,.12);color:var(--saffron-deep)}
.mark.purnima{background:rgba(217,164,65,.16);color:#8a6410}
.mark.amavasya{background:rgba(46,15,29,.08);color:var(--maroon-2)}
.mark.chaturthi{background:var(--green-soft);color:var(--green)}
.mark.pradosh{background:rgba(58,110,165,.12);color:var(--blue)}
.mark.shivaratri{background:rgba(107,74,122,.12);color:var(--violet)}
.mark.ashtami{background:var(--red-soft);color:var(--red)}
.mark.festival{background:linear-gradient(90deg,rgba(226,112,31,.18),rgba(217,164,65,.14));color:var(--saffron-deep)}

/* A named pill needs 88px of cell content box to hold the longest observance
   ("Durgashtami") without overflow-wrap chopping it into "Durgasht/ami" —
   which is exactly what the full-width desktop grid gives it. Cell width does
   not track viewport width (the sidebar appearing at 980px makes cells
   NARROWER again), so ask the cell, not the screen. Below that, collapse to
   one coloured dot per observance; the Festivals & Vrat list under the grid
   always carries the full names. */
@container (max-width: 87px){
  .cell-marks{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px;padding-top:4px}
  .cell-marks .mark{padding:0;background:none;gap:0;border-radius:0}
  .cell-marks .mark>span:not(.dot){display:none}
  .cell-marks .mark .dot{width:7px;height:7px;margin-top:0}
  .cell-marks .mark.festival .dot{background:var(--saffron)}
}

/* ---- Agenda / list view ---- */
.cal-list{display:none;flex-direction:column;gap:8px}
body.view-list .cal-grid,body.view-list .cal-dows{display:none}
body.view-list .cal-list{display:flex}
.li-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:12px 14px;transition:.14s}
a.li-row:hover{border-color:var(--gold-line);box-shadow:var(--shadow)}
.li-date{text-align:center;min-width:52px;flex:none}
.li-date .n{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--maroon-1);line-height:1}
.li-date .w{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.li-body{flex:1;min-width:0}
.li-tithi{font-weight:700;color:var(--ink);font-size:.95rem}
.li-sub{color:var(--muted);font-size:.8rem}
.li-marks{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.li-today{border:2px solid var(--saffron)}

/* ---- Festival panel ---- */
.fest{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(16px,3vw,22px);box-shadow:var(--shadow);margin-top:20px}
.fest h2{font-family:var(--font-display);font-size:1.32rem;font-weight:600;color:var(--maroon-1);margin-bottom:4px}
.fest .sub{color:var(--muted);font-size:.86rem;margin-bottom:14px}
.fest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.fest-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--card-soft);transition:.14s}
a.fest-item:hover{border-color:var(--gold-line);transform:translateY(-1px)}
.fi-day{text-align:center;min-width:40px;flex:none}
.fi-day .n{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--saffron-deep);line-height:1}
.fi-day .m{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.fi-body strong{display:block;font-size:.9rem;color:var(--ink)}
.fi-body span{font-size:.76rem;color:var(--muted)}

/* system-dependent labels: show one, hide the other */
body[data-system="amanta"] .sys-purnimanta{display:none}
body[data-system="purnimanta"] .sys-amanta{display:none}

.cal-note{color:var(--muted);font-size:.78rem;text-align:center;margin-top:18px;line-height:1.6}

@media(max-width:720px){
  .cal-cell{min-height:82px;padding:6px 6px 5px}
  .cell-date{font-size:1.05rem}
  .cell-tithi{font-size:.62rem}
  .cell-maas{font-size:.56rem}
  .cell-moon{width:16px;height:16px}
  .mark{font-size:.6rem;padding:2px 4px}
  .cal-grid,.cal-dows{gap:5px}
  /* Let the title shrink between the two arrows instead of shoving the "next"
     arrow onto its own line — the samvat line makes the title's natural width
     wider than the row, and wrapping wins over shrinking unless we say no. */
  .cal-head-row{flex-wrap:nowrap;gap:8px}
  .cal-title{min-width:0}
  /* keep the header controls inside the screen */
  .cal-controls{gap:8px}
  .cal-select{padding:.5rem 1.9rem .5rem .9rem;font-size:.84rem}
  .seg button{padding:.42rem .75rem;font-size:.78rem}
  .cal-arrow{width:40px;height:40px}
  .cal-head{padding:16px 12px}
  /* Deliberately duplicates the @container rule above: every phone cell is far
     under the 88px a named pill needs, and this keeps the dot fallback working
     on browsers without container-query support. Delete only if support is no
     longer a concern — otherwise those phones get "Sank asht..." back. */
  .cell-marks{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px;padding-top:4px}
  .cell-marks .mark{padding:0;background:none;gap:0;border-radius:0}
  .cell-marks .mark>span:not(.dot){display:none}
  .cell-marks .mark .dot{width:7px;height:7px;margin-top:0}
  .cell-marks .mark.festival .dot{background:var(--saffron)}
  /* a long tithi ("Chaturdashi") must wrap rather than be clipped by the
     cell's overflow:hidden */
  .cell-tithi,.cell-maas{overflow-wrap:break-word}
}
@media(max-width:560px){
  .cal-top{flex-wrap:wrap}
  .cal-top-right{width:100%;justify-content:space-between}
  /* Below this the cells are ~60px wide: "Trayodashi" can only render as
     "Trayodas / hi". Drop to date + moon + dots and let the Festivals & Vrat
     list carry the detail. */
  .cell-tithi,.cell-maas{display:none}
}
@media(max-width:480px){
  .cal-shell{padding:12px}
  .cal-cell{min-height:60px;padding:5px 4px}
  .cell-date{font-size:.92rem}
  .cell-moon{width:13px;height:13px}
  .cal-grid,.cal-dows{gap:4px}
  .cal-dows span{font-size:.6rem}
  .cell-marks .mark .dot{width:6px;height:6px}
}