/* =====================================================================
   ArthaKendra Patro · custom CSS (no framework)
   — Reset + design tokens + layout grid + components.
   Everything below is hand-written; no Bootstrap or Tailwind.

   IMPORTANT: every rule is scoped under `.ak-patro` because this stylesheet
   is loaded into the shared site layout. Unscoped `a`/`body`/`h*` rules
   would otherwise bleed into the site header & footer.
   ===================================================================== */

/* ---- Reset (minimal, scoped) ---- */
.ak-patro, .ak-patro *, .ak-patro *::before, .ak-patro *::after { box-sizing: border-box; }
.ak-patro {
    font-family: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: clip;                   /* clip horizontal overflow WITHOUT becoming a
                                           scroll container — `hidden` would trap the
                                           sticky calendar; `clip` does not. */

    /* ---- Design tokens (scoped so they can't collide with the site) ---- */
    --np: #a4143b;
    --np-dark: #7a0d2a;
    --np-soft: #fbe9ee;
    --ink: #1a2233;
    --ink-2: #4b5468;
    --muted: #6b7280;
    --line: #e6e8ee;
    --line-soft: #f0f1f5;
    --bg: #f3f4f7;
    --card: #ffffff;
    --observance: #1a3a8c;
    --observance-soft: #eef3ff;
    --sait: #0a7a4a;
    --sait-soft: #e7f7ef;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 6px 24px rgba(15,23,42,.07);
    --radius: 12px;
    --radius-sm: 8px;
}
.ak-patro a { color: var(--np); text-decoration: none; }
.ak-patro a:hover { color: var(--np-dark); }
/* Headings use Khand — a tall, condensed Devanagari display face that pairs with Mukta */
.ak-patro h1, .ak-patro h2, .ak-patro h3, .ak-patro h4, .ak-patro h5,
.ak-patro .brand, .ak-patro .card-title, .ak-patro .hero-meta .month,
.ak-patro .cal-head .title, .ak-patro .stats .val, .ak-patro .day-hero h4 {
    font-family: 'Mukta', system-ui, sans-serif;
    letter-spacing: -.005em;
}
.ak-patro h1, .ak-patro h2, .ak-patro h3, .ak-patro h4, .ak-patro h5 {
    margin: 0 0 .35em 0; line-height: 1.2; font-weight: 600;
}
.ak-patro p { margin: 0 0 .6em 0; }
.ak-patro button { font: inherit; cursor: pointer; }
.ak-patro hr { border: none; border-top: 1px solid var(--line); margin: .9rem 0; }
.ak-patro img { display:block; max-width:100%; }
.ak-patro dl { margin: 0; }
.ak-patro dt, .ak-patro dd { margin: 0; }
.ak-patro select, .ak-patro input, .ak-patro button { font-family: inherit; }

/* ---- App shell ---- */
.ak-patro .app-header {
    background: linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
.ak-patro .app-header .inner {
    max-width: 1480px; margin: 0 auto;
    padding: .7rem 1.2rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.ak-patro .brand { display:flex; align-items:center; gap:.5rem; color: var(--np); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.ak-patro .brand .sub { color: var(--muted); font-weight: 500; font-size: .85rem; }
.ak-patro .brand-mark {
    width: 26px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, var(--np) 0%, #c63d63 100%);
    color: #fff; display:inline-flex; align-items:center; justify-content:center;
    font-weight: 700; font-size: .78rem;
}
.ak-patro .app-nav { display: flex; gap: .25rem; margin-left: auto; }
.ak-patro .app-nav a {
    color: var(--ink); font-weight: 500; padding: .5rem .85rem; border-radius: 8px;
}
.ak-patro .app-nav a:hover { background: var(--line-soft); color: var(--np); }
.ak-patro .lang-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: .82rem; color: var(--ink); background: #fff;
}

.ak-patro main.app-main { max-width: 1480px; margin: 0 auto; padding: 1.2rem; }

/* ---- Layout ----
   Mobile-first single column with explicit order. At ≥1024px we switch to a
   2-column grid using grid-template-areas so the calendar sits on the right
   and the sidebar items stack on the left.
   The flat HTML structure (no aside/main wrappers) keeps both modes simple. */

.ak-patro .layout {
    display: flex; flex-direction: column; gap: 1rem;
    width: 100%; min-width: 0;
    max-width: 1536px;          /* match the news-page content width */
    margin: 0 auto;
    padding: 1.25rem;           /* top/side gutter so cards don't touch the page edges */
}
/* Cards space themselves via the flex `gap`; drop their own bottom margin. */
.ak-patro .layout .card-panel { margin-bottom: 0; }

/* Mobile order: Today → Calendar → Upcoming → Panchanga → Converter → Stats.
   The column wrappers collapse (display:contents) so these orders apply to
   the sections directly. */
.ak-patro .side-col, .ak-patro .cal-col { display: contents; }
.ak-patro #today        { order: 1; }
.ak-patro #calendar     { order: 2; }
.ak-patro #upcoming-wrap{ order: 3; }
.ak-patro #panchanga    { order: 4; }
.ak-patro #convert      { order: 5; }
.ak-patro #stats        { order: 6; }

/* Desktop: two real columns. The left column scrolls normally; the calendar
   column is sticky so it stays in view while the left content scrolls past. */
@media (min-width: 1024px) {
    .ak-patro .layout {
        flex-direction: row;
        align-items: stretch;     /* .cal-col stretches to the taller (left) column,
                                     giving the sticky #calendar room to travel */
        gap: 1.2rem;
        padding: 1.5rem 2.5rem;   /* wider gutter on desktop, matches news-page md:px-10 */
    }
    .ak-patro .side-col {
        display: flex; flex-direction: column; gap: 1.2rem;
        width: 320px; flex: none; min-width: 0;
    }
    .ak-patro .cal-col { display: block; flex: 1; min-width: 0; }
    .ak-patro #calendar { position: sticky; top: 1rem; }
}

/* ---- Cards (ibox) ---- */
.ak-patro .card-panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    overflow: hidden; margin-bottom: 1.1rem;
}
.ak-patro .card-title {
    padding: .8rem 1.05rem; border-bottom: 1px solid var(--line);
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; justify-content: space-between;
}
.ak-patro .card-title .count {
    background: var(--line-soft); color: var(--muted);
    padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: 0;
}
.ak-patro .card-body { padding: 1rem 1.05rem; }
.ak-patro .card-body.tight { padding: .55rem .85rem; }

/* ---- Today hero card ---- */
.ak-patro .hero { padding: 1.1rem; }
.ak-patro .hero-top { display: flex; align-items: flex-start; gap: 1rem; }
.ak-patro .hero-day { text-align: center; }
.ak-patro .hero-day .num {
    font-family: 'Mukta', sans-serif;
    font-size: 4.6rem; font-weight: 700; color: var(--np);
    line-height: 1; letter-spacing: -.03em;
}
.ak-patro .hero-day .name { color: var(--muted); font-weight: 500; font-size: .9rem; }
.ak-patro .hero-day .ad { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.ak-patro .hero-meta { flex: 1; min-width: 0; }
.ak-patro .hero-meta .month { font-size: 1.3rem; font-weight: 600; line-height: 1.2; margin: 0; }
.ak-patro .hero-meta .ns { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.ak-patro .hero-meta .chandra { font-size: .85rem; color: var(--ink-2); margin-top: .35rem; }
.ak-patro .hero-suntime { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.ak-patro .hero-suntime .time { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); font-weight: 500; }
.ak-patro .hero-suntime svg { color: var(--np); }

/* ---- Panchanga key/value grid ---- */
.ak-patro .panchanga-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: .85rem; row-gap: .35rem; font-size: .85rem;
}
.ak-patro .panchanga-grid dt { color: var(--muted); font-weight: 500; }
.ak-patro .panchanga-grid dd { color: var(--ink); font-weight: 600; text-align: right; }

/* ---- Chips (inline event labels) ---- */
.ak-patro .chip {
    display: inline-block; padding: .18rem .5rem; border-radius: 6px;
    font-size: .75rem; line-height: 1.3; margin: 0 .25rem .25rem 0;
}
.ak-patro .chip.holiday   { background: var(--np-soft); color: var(--np); }
.ak-patro .chip.observ    { background: var(--observance-soft); color: var(--observance); }
.ak-patro .chip.sait      { background: var(--sait-soft); color: var(--sait); }

/* ---- Upcoming list (fixed-height scrollable) ---- */
.ak-patro .upc-scroll {
    max-height: 360px; overflow-y: auto;
    padding: 0 .85rem;
}
.ak-patro .upc-scroll::-webkit-scrollbar { width: 6px; }
.ak-patro .upc-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.ak-patro .upc-item {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.ak-patro .upc-item:last-child { border-bottom: none; }
.ak-patro .upc-item .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--np); margin-top: .55rem; flex: none;
}
.ak-patro .upc-item .body { flex: 1; min-width: 0; }
.ak-patro .upc-item .title {
    font-size: .88rem; font-weight: 600; line-height: 1.25; color: var(--ink);
}
.ak-patro .upc-item .meta { font-size: .76rem; color: var(--muted); margin-top: .15rem; }
.ak-patro .upc-item .days {
    border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; font-weight: 700;
    flex: none; align-self: center;
    background: var(--line-soft); color: var(--ink-2);
}
/* Holiday = red accent on dot, title, and days badge */
.ak-patro .upc-item.is-holiday .dot   { background: var(--np); }
.ak-patro .upc-item.is-holiday .title { color: var(--np-dark); }
.ak-patro .upc-item.is-holiday .days  { background: var(--np-soft); color: var(--np); }
/* Observance = blue accent */
.ak-patro .upc-item.is-observ  .dot   { background: var(--observance); }
.ak-patro .upc-item.is-observ  .days  { background: var(--observance-soft); color: var(--observance); }

/* ---- Forms / converter ---- */
.ak-patro .form-row { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: .55rem; }
.ak-patro .field { display: flex; flex-direction: column; }
.ak-patro .field label, .ak-patro .convert-label {
    font-size: .72rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem;
}
.ak-patro .input, .ak-patro .select {
    appearance: none; -webkit-appearance: none;
    background: #fff; color: var(--ink); font-size: .9rem;
    border: 1px solid var(--line); border-radius: 8px;
    padding: .45rem .65rem; width: 100%; outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.ak-patro .input:focus, .ak-patro .select:focus { border-color: var(--np); box-shadow: 0 0 0 3px rgba(164,20,59,.12); }
.ak-patro .select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%236b7280' stroke-width='1.5' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .6rem center; background-size: 12px;
    padding-right: 1.8rem;
}
.ak-patro .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    background: var(--np); color: #fff; border: none;
    padding: .55rem 1rem; border-radius: 8px; font-weight: 600; font-size: .9rem;
    transition: background-color .12s;
}
.ak-patro .btn:hover, .ak-patro .btn:focus { background: var(--np-dark); }
.ak-patro .btn.block { width: 100%; }
.ak-patro .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ak-patro .btn.ghost:hover { border-color: var(--np); color: var(--np); }

.ak-patro .alert {
    font-size: .85rem; padding: .55rem .75rem; border-radius: 8px;
    background: #fdecef; color: var(--np-dark); border: 1px solid #f3c1cd;
}
.ak-patro .convert-result {
    background: var(--np-soft); color: var(--np-dark); border-radius: 8px;
    padding: .65rem .8rem; font-size: .85rem; margin-top: .75rem;
}
.ak-patro .convert-result .cv-row { display: flex; justify-content: space-between; padding: .12rem 0; }

/* ---- Calendar grid ---- */
.ak-patro .cal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .95rem 1.1rem; border-bottom: 1px solid var(--line);
}
.ak-patro .cal-head .title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ak-patro .cal-head .ad-range { color: var(--muted); font-weight: 500; font-size: .85rem; }
.ak-patro .cal-head .actions { display: flex; gap: .4rem; align-items: center; }
.ak-patro .cal-head .cal-picker { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.ak-patro .cal-select { width: auto; font-weight: 600; padding-top: .35rem; padding-bottom: .35rem; }
.ak-patro .icon-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
    background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.ak-patro .icon-btn:hover { border-color: var(--np); color: var(--np); }
.ak-patro .today-btn {
    padding: .4rem .85rem; border-radius: 8px; border: 1px solid var(--line);
    background: #fff; color: var(--ink); font-weight: 500; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .25rem;
}
.ak-patro .today-btn:hover { border-color: var(--np); color: var(--np); }

.ak-patro .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: #fafbfd; border-bottom: 1px solid var(--line);
    font-size: .8rem; font-weight: 600; color: var(--muted); text-align: center;
}
.ak-patro .cal-weekdays > div { padding: .55rem 0; }
.ak-patro .cal-weekdays > div.sat { color: var(--np); }

.ak-patro .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 118px;            /* every row exactly the same height */
    border-left: 1px solid var(--line);
}
.ak-patro .cal-cell {
    min-width: 0;
    padding: .35rem .45rem;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: #fff; position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
    transition: background-color .12s;
}
.ak-patro .cal-cell.clickable { cursor: pointer; }
.ak-patro .cal-cell.clickable:hover { background: #f6f7fb; }
.ak-patro .cal-cell .number {
    font-family: 'Mukta', sans-serif;
    font-size: 2.4rem; font-weight: 600; line-height: 1;
    color: var(--ink);
}
.ak-patro .cal-cell .tithi {
    font-size: .72rem; color: var(--muted);
    line-height: 1.15; margin-top: .1rem;
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ak-patro .cal-cell time.ad {
    position: absolute; top: .35rem; right: .5rem;
    font-size: .72rem; color: var(--muted); line-height: 1;
    font-family: 'Mukta', sans-serif;
}
.ak-patro .cal-cell .event {
    position: absolute; left: .3rem; right: .3rem; bottom: .35rem;
    font-size: .66rem; padding: .12rem .35rem; border-radius: 4px;
    background: #f4f5f9; color: var(--ink);
    max-width: calc(100% - .6rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.ak-patro .cal-cell .event.np-holiday { background: var(--np-soft); color: var(--np); }
.ak-patro .cal-cell .event.observance { background: var(--observance-soft); color: var(--observance); }
.ak-patro .cal-cell .sait {
    position: absolute; left: .3rem; right: .3rem; bottom: .35rem;
    font-size: .64rem; color: var(--sait); background: var(--sait-soft);
    padding: .1rem .35rem; border-radius: 4px;
    max-width: calc(100% - .6rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ak-patro .cal-cell .more {
    position: absolute; top: .35rem; left: .5rem;
    font-size: .68rem; color: var(--np); font-weight: 700;
    background: var(--np-soft); padding: .05rem .4rem; border-radius: 999px;
    line-height: 1.3;
    font-family: 'Mukta', sans-serif;
}
.ak-patro .cal-cell.np-holiday .number, .ak-patro .cal-cell.sat .number { color: var(--np); }
.ak-patro .cal-cell.np-holiday { background: linear-gradient(180deg,#fff 0%, #fff7f9 100%); }
.ak-patro .cal-cell.other-month { background: #fafbfd; }
.ak-patro .cal-cell.other-month .number, .ak-patro .cal-cell.other-month .tithi, .ak-patro .cal-cell.other-month time.ad {
    color: #c9cdd6;
}
.ak-patro .cal-cell.other-month.clickable:hover { background: #f3f5f9; }
.ak-patro .cal-cell.today {
    background: linear-gradient(180deg, #fff5f8 0%, #ffeaef 100%);
    box-shadow: inset 0 0 0 2px var(--np);
}
.ak-patro .cal-cell.today .number { color: var(--np); }

/* ---- Month-at-a-glance strip ---- */
.ak-patro .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; text-align: center;
}
@media (max-width: 575px) { .ak-patro .stats { grid-template-columns: repeat(2, 1fr); } }
.ak-patro .stats .stat { padding: .55rem .25rem; }
.ak-patro .stats .stat .lbl { color: var(--muted); font-size: .75rem; }
.ak-patro .stats .stat .val { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-top: .15rem; }

/* ---- Modal (custom — no Bootstrap) ---- */
.ak-patro .modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: none; align-items: center; justify-content: center;
    z-index: 100; padding: 1rem;
}
.ak-patro .modal-backdrop.open { display: flex; }
.ak-patro .modal-card {
    width: 100%; max-width: 540px; max-height: 90vh; overflow: hidden;
    background: #fff; border-radius: 14px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    animation: ak-modal-in .18s ease-out;
}
@keyframes ak-modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ak-patro .modal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.ak-patro .modal-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.ak-patro .modal-close {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
    color: var(--muted); font-size: 1.3rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.ak-patro .modal-close:hover { background: var(--line-soft); color: var(--ink); }
.ak-patro .modal-body { padding: 1.1rem; overflow: auto; }

.ak-patro .spinner {
    width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--np);
    border-radius: 50%; animation: ak-spin .8s linear infinite;
    margin: 1.5rem auto;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }

/* ---- Day-details specifics ---- */
.ak-patro .day-hero {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.ak-patro .day-hero .block {
    background: var(--np); color: #fff; border-radius: 12px;
    padding: .6rem .9rem; min-width: 76px; text-align: center;
}
.ak-patro .day-hero .block .b-num { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.ak-patro .day-hero .block .b-day { font-size: .78rem; opacity: .85; margin-top: .15rem; }
.ak-patro .day-hero h4 { margin: 0; font-size: 1.1rem; }
.ak-patro .day-hero .sub { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.ak-patro .section-title {
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-size: .72rem; font-weight: 700;
    margin: 0 0 .5rem 0;
}
.ak-patro .event-row {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .7rem; border-radius: 8px;
    font-size: .87rem; margin-bottom: .3rem;
}
.ak-patro .event-row.holiday  { background: var(--np-soft); color: var(--np); }
.ak-patro .event-row.observ   { background: var(--observance-soft); color: var(--observance); }
.ak-patro .event-row .tag {
    margin-left: auto; font-size: .7rem; color: var(--muted);
    background: rgba(255,255,255,.6); padding: .1rem .45rem; border-radius: 4px;
}
.ak-patro .note {
    background: #f7f8fb; border: 1px solid var(--line); border-radius: 8px;
    padding: .55rem .75rem; font-size: .85rem; margin-top: .4rem;
}

/* ---- Footer ---- */
.ak-patro .app-footer {
    margin-top: 3rem; padding: 1.2rem 0;
    border-top: 1px solid var(--line);
    text-align: center; color: var(--muted); font-size: .82rem;
}

/* ---- Responsive tweaks (mobile-first) ----
   Breakpoints: ≤380 tiny phone, ≤575 phone, ≤767 large phone, ≤1023 tablet. */

/* Tablet & below: tighter header, smaller hero, slightly shorter rows */
@media (max-width: 1023px) {
    .ak-patro .app-header .inner { padding: .6rem 1rem; gap: .9rem; }
    .ak-patro .app-main { padding: 1rem .9rem; }
    .ak-patro .brand { font-size: 1rem; }
    .ak-patro .brand .sub { display: none; }
    .ak-patro .app-nav { gap: 0; }
    .ak-patro .app-nav a { padding: .45rem .6rem; font-size: .9rem; }
    .ak-patro .layout > aside, .ak-patro .layout > .main-col { display: contents; }  /* tolerate old markup if any */
    .ak-patro .cal-grid { grid-auto-rows: 102px; }
    .ak-patro .cal-cell .number { font-size: 2rem; }
    .ak-patro .upc-scroll { max-height: 320px; }
}

/* Phones: stronger compaction, single-column panchanga grid */
@media (max-width: 767px) {
    .ak-patro .app-header .inner { padding: .55rem .85rem; gap: .6rem; }
    .ak-patro .app-main { padding: .85rem .7rem; }
    .ak-patro .app-nav { display: none; }
    .ak-patro .lang-pill { padding: .3rem .65rem; font-size: .78rem; }

    .ak-patro .card-panel { border-radius: 10px; }
    .ak-patro .card-title { padding: .7rem .9rem; font-size: .72rem; }
    .ak-patro .card-body  { padding: .85rem .9rem; }

    .ak-patro .hero { padding: .9rem; }
    .ak-patro .hero-day .num { font-size: 3.4rem; }
    .ak-patro .hero-meta .month { font-size: 1.15rem; }
    .ak-patro .hero-meta .ns, .ak-patro .hero-meta .chandra { font-size: .8rem; }
    /* Keep the label|value pairs side by side on phones too (same as desktop),
       just tighten the gap and type — stacking made the card far too tall. */
    .ak-patro .panchanga-grid { column-gap: .6rem; row-gap: .3rem; font-size: .82rem; }

    .ak-patro .cal-head { padding: .75rem .9rem; flex-wrap: wrap; gap: .6rem; }
    .ak-patro .cal-head .title { font-size: .95rem; }
    .ak-patro .cal-head .ad-range { display: none; }
    .ak-patro .cal-head .actions { width: 100%; justify-content: space-between; }
    .ak-patro .cal-grid { grid-auto-rows: 78px; }
    .ak-patro .cal-cell .number { font-size: 1.7rem; }
    .ak-patro .cal-cell .tithi { font-size: .65rem; }
    .ak-patro .cal-cell .event { font-size: .6rem; padding: .1rem .3rem; }
    .ak-patro .cal-cell .more { font-size: .6rem; padding: 0 .3rem; top: .25rem; left: .35rem; }
    .ak-patro .cal-cell time.ad { font-size: .65rem; top: .25rem; right: .35rem; }

    .ak-patro .upc-scroll { max-height: 280px; padding: 0 .9rem; }
    .ak-patro .upc-item .title { font-size: .85rem; }
    .ak-patro .upc-item .meta  { font-size: .72rem; }

    .ak-patro .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Tiny phones */
@media (max-width: 380px) {
    .ak-patro .app-header .inner { padding: .5rem .7rem; gap: .5rem; }
    .ak-patro .brand { font-size: .95rem; }
    .ak-patro .brand-mark { width: 22px; height: 22px; font-size: .7rem; }
    .ak-patro .lang-pill { padding: .25rem .55rem; font-size: .72rem; }
    .ak-patro .app-main { padding: .75rem .55rem; }

    .ak-patro .hero-day .num { font-size: 2.9rem; }
    .ak-patro .cal-grid { grid-auto-rows: 64px; }
    .ak-patro .cal-cell .number { font-size: 1.4rem; }
    .ak-patro .cal-cell .tithi, .ak-patro .cal-cell .event, .ak-patro .cal-cell .sait { display: none; }
    .ak-patro .cal-cell .more { font-size: .55rem; }
    .ak-patro .cal-cell time.ad { font-size: .6rem; }
}

/* ---- Tiny utility classes used in markup ---- */
.ak-patro .mt-1 { margin-top: .25rem; } .ak-patro .mt-2 { margin-top: .5rem; }
.ak-patro .mt-3 { margin-top: .75rem; } .ak-patro .mt-4 { margin-top: 1rem; }
.ak-patro .mb-0 { margin-bottom: 0; } .ak-patro .mb-1 { margin-bottom: .25rem; }
.ak-patro .mb-2 { margin-bottom: .5rem; } .ak-patro .mb-3 { margin-bottom: .75rem; }
.ak-patro .text-muted { color: var(--muted); }
.ak-patro .small { font-size: .82rem; }
.ak-patro .fw-semi { font-weight: 600; }
/* Visually-hidden — present for screen readers & SEO, not shown on screen */
.ak-patro .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}