/* The panchang pages (worker/index.js draws them). They load the calendar section's two
   stylesheets first, for the paper, the date pad, the tables, the emblem beside a page's
   name and the rest, and add here their own inks and the pieces only they have. */

/* Each page's ink and emblem, as for the calendars. */
[data-cal="panchang"] { --accent: #8C2F12; --accent-on: #FFF4E6; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50.0' cy='19.0' r='11'/%3E%3Ccircle cx='79.5' cy='40.4' r='11'/%3E%3Ccircle cx='68.2' cy='75.1' r='11'/%3E%3Ccircle cx='31.8' cy='75.1' r='11'/%3E%3Ccircle cx='20.5' cy='40.4' r='11'/%3E%3Ccircle cx='50' cy='50' r='6'/%3E%3C/svg%3E"); } /* the five limbs */
[data-cal="tithi"] { --accent: #2B3A75; --accent-on: #EEF1FB; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M50 10A40 40 0 0 1 50 90Z'/%3E%3C/svg%3E"); } /* a half Moon */
[data-cal="nakshatra"] { --accent: #123B5C; --accent-on: #EAF4FB; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0,6.0 60.6,35.4 91.8,36.4 67.1,55.6 75.9,85.6 50.0,68.0 24.1,85.6 32.9,55.6 8.2,36.4 39.4,35.4'/%3E%3C/svg%3E"); } /* a star */
[data-cal="yoga"] { --accent: #7A4E12; --accent-on: #FFF6E4; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='5'%3E%3Ccircle cx='37' cy='50' r='26'/%3E%3Ccircle cx='63' cy='50' r='26'/%3E%3C/g%3E%3C/svg%3E"); } /* Sun and Moon joined */
[data-cal="karana"] { --accent: #0E5E5A; --accent-on: #EAF7F5; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M10 50A40 40 0 0 0 90 50Z'/%3E%3C/svg%3E"); } /* half a tithi */
[data-cal="choghadiya"] { --accent: #2D6A3E; --accent-on: #F0F8F1; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='41' fill='none' stroke='%23000' stroke-width='5'/%3E%3Cpath d='M50.0 20.0L50.0 12.0M71.2 28.8L76.9 23.1M80.0 50.0L88.0 50.0M71.2 71.2L76.9 76.9M50.0 80.0L50.0 88.0M28.8 71.2L23.1 76.9M20.0 50.0L12.0 50.0M28.8 28.8L23.1 23.1M50 50L50 24M50 50L68 58' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* a clock of eight parts */
[data-cal="rahu"] { --accent: #4B2142; --accent-on: #F9ECF5; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23000' stroke-width='4'/%3E%3Ccircle cx='59' cy='50' r='27'/%3E%3C/svg%3E"); } /* an eclipse */
[data-cal="muhurat"] { --accent: #94640A; --accent-on: #FFF8E7; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5' stroke-linejoin='round'%3E%3Crect x='20' y='20' width='60' height='60'/%3E%3Crect x='20' y='20' width='60' height='60' transform='rotate(45 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3C/svg%3E"); } /* an eight-pointed star */
[data-cal="sunrise"] { --accent: #C44B12; --accent-on: #FFF4E6; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 68A28 28 0 0 1 78 68Z'/%3E%3Cpath d='M6 76H94' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 26V12M24 40L14 30M76 40L86 30M10 60H2M90 60H98' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* the Sun on the horizon */

/* The date pad's clip in the page's ink, as the band under it already is. */
.cal-info[data-cal]:not([data-cal="all"]) .daypad-clip { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 72%, #000)); }

/* ---------- another day, another city ---------- */
.pn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 28px; }
.pn-days { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-days a, .pn-days span, .pn-city summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s;
}
.pn-days a:hover, .pn-city summary:hover { border-color: var(--gold); }
.pn-days span { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.pn-city { position: relative; }
.pn-city summary { cursor: pointer; list-style: none; }
.pn-city summary::-webkit-details-marker { display: none; }
.pn-city summary::after { content: ""; width: 8px; height: 8px; margin: -4px 0 0 12px; border: solid var(--subtle); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pn-city nav {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(84vw, 430px);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pn-city nav a { padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: 14.5px; text-decoration: none; }
.pn-city nav a:hover { border-color: var(--gold); }
.pn-city nav a[aria-current] { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }

/* ---------- the five limbs of the day ---------- */
.pn-limbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pn-limb { display: grid; align-content: start; gap: 1px; padding: 15px 18px 17px; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s; }
a.pn-limb:hover { border-color: var(--gold); border-top-color: var(--accent); }
.pn-limb-name { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.pn-limb strong { color: var(--cal-heading); font-family: var(--font-display); font-size: 27px; font-weight: 400; line-height: 1.4; }
.pn-limb span + span, .pn-limb strong + span { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* ---------- good and bad times ---------- */
.pn-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.pn-times > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-left: 4px solid var(--secondary); border-radius: 12px; background: var(--surface); }
.pn-times .is-good { border-left-color: var(--success); }
.pn-times .is-bad { border-left-color: var(--live); }
.pn-times dt { color: var(--muted); font-size: 15px; }
.pn-times dt a { color: inherit; }
.pn-times dd { font-size: 16.5px; font-variant-numeric: tabular-nums; text-align: right; }
.pn-two { display: grid; gap: 16px; }
.pn-chog .is-good th { color: var(--success); }
.pn-chog .is-bad th { color: var(--live); }

/* ---------- the answer at the top of a topic's page ---------- */
.pn-answer { position: relative; overflow: hidden; align-self: stretch; display: grid; align-content: center; gap: 4px; padding: 30px 150px 32px 30px; border-radius: 18px; background: var(--accent); color: var(--accent-on); box-shadow: 0 26px 40px -24px rgba(70, 30, 10, .5); }
.pn-answer::after { content: ""; position: absolute; right: 22px; top: 50%; width: 118px; height: 118px; margin-top: -59px; background: var(--accent-on); opacity: .22; -webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat; }
.pn-answer-when { opacity: .85; font-size: 14.5px; }
.pn-answer-what { font-family: var(--font-display); font-size: clamp(34px, 4.8vw, 52px); line-height: 1.3; }
.pn-answer-line { opacity: .93; font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; }

/* ---------- the other pages, each with its emblem ---------- */
.pn-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pn-topic { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s; }
.pn-topic:hover { border-color: var(--gold); }
.pn-topic .cal-emblem { position: relative; display: block; grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); }
.pn-topic .cal-emblem::after { inset: 11px; }
.pn-topic strong { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.pn-topic strong + span { overflow: hidden; color: var(--muted); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .pn-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .pn-bar { margin-bottom: 22px; }
  .pn-days a, .pn-days span, .pn-city summary { padding: 0 14px; font-size: 14.5px; }
  .pn-city nav { right: auto; left: 0; }
  .pn-limbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-limb { padding: 13px 14px 15px; }
  .pn-limb strong { font-size: 22px; }
  .pn-answer { padding: 24px 20px 26px; }
  .pn-answer::after { right: 12px; top: 14px; width: 62px; height: 62px; margin: 0; }
  .pn-answer-when { padding-right: 70px; }
  .cal-top.pn-day .daypad { order: 0; }
}