/*
 * Portal styles. Hand written and self-contained on purpose: no build step, and the hotspot
 * walled garden blocks every other host, so nothing here may depend on a CDN.
 * Mobile first: base rules describe a phone; min-width queries widen it.
 * Per-install colours (--brand, --brand-dark, --accent, --accent-ink) arrive on <html> from
 * App\Portal\Theme; the values below are only the neutral fallback.
 * Sizes and spacing follow the Figma file "Konsep Zamrud & Emas" (frames 4:307, 4:536, 5:307, 5:444).
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

/* Downloaded only by a page that contains Arabic script (the optional greeting). */
@font-face {
    font-family: "Amiri";
    src: url("../fonts/amiri-arabic-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
    --brand: #1d4ed8;
    --brand-dark: #0b1f4d;
    --accent: #c9a227;
    --accent-ink: #7a5c00;
    --on-brand: #ffffff;
    /* Fallbacks; derived from the install colours below where color-mix exists. */
    --brand-deep: #0b2a6b;
    --brand-bright: #3b82f6;
    --hero-from: #1d3a8a;
    --accent-soft: #e3c766;
    --accent-tint: #f6edcf;
    --accent-glow: rgb(201 162 39 / 30%);

    --ink: #0f1f1a;
    --muted: #5b6b66;
    --border: #dce4e0;
    --surface: #ffffff;
    --canvas: #f4f6f1;
    --tint: #eef1ee;
    /* Darker than the Figma red so it reaches 4.5:1 on --danger-bg. */
    --danger: #b91c1c;
    --danger-line: #dc2626;
    --danger-bg: #fef2f2;
    --success: #16a34a;
    --focus: #0f1f1a;

    --radius-hero: 28px;
    --radius-hero-lg: 40px;
    --radius-lg: 24px;
    --radius-card: 20px;
    --radius-md: 18px;
    --radius: 16px;
    --radius-control: 14px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-check: 6px;
    --radius-pill: 999px;
    --shadow: 0 16px 20px rgb(6 78 59 / 12%);
    --shadow-soft: 0 8px 24px rgb(6 78 59 / 6%);
    --shadow-tab: 0 2px 6px rgb(6 78 59 / 12%);
    --shadow-button: 0 8px 10px rgb(4 120 87 / 28%);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-arabic: "Amiri", "Noto Naskh Arabic", serif;
    --text-micro: 0.625rem;    /* 10 */
    --text-tiny: 0.6875rem;    /* 11 */
    --text-caption: 0.75rem;   /* 12 */
    --text-label: 0.8125rem;   /* 13 */
    --text-small: 0.875rem;    /* 14 */
    --text-body: 0.9375rem;    /* 15 */
    --text-base: 1rem;         /* 16; inputs stay 16px so iOS does not zoom */
    --text-lead: 1.0625rem;    /* 17 */
    --text-card: 1.1875rem;    /* 19 */
    --text-heading: 1.375rem;  /* 22 */
    --text-display: 1.6875rem; /* 27 */

    --control-height: 52px;
    --button-height: 54px;
    --content-width: 22.375rem; /* 358 */

    /* Eight-point star pattern from the Figma file; gold or emerald strokes at fixed opacities. */
--pattern-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cdefs%3E%3Cpath id='s' d='M0-20.2 5.9-14.3H14.3V-5.9L20.2 0 14.3 5.9V14.3H5.9L0 20.2-5.9 14.3H-14.3V5.9L-20.2 0-14.3-5.9V-14.3H-5.9ZM0-9 2.6-6.3H6.3V-2.6L9 0 6.3 2.6V6.3H2.6L0 9-2.6 6.3H-6.3V2.6L-9 0-6.3-2.6V-6.3H-2.6Z' vector-effect='non-scaling-stroke'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23e3c766' stroke-opacity='.13'%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='56' y='0'/%3E%3Cuse href='%23s' x='28' y='48.5'/%3E%3Cuse href='%23s' x='0' y='97'/%3E%3Cuse href='%23s' x='56' y='97'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cdefs%3E%3Cpath id='s' d='M0-20.2 5.9-14.3H14.3V-5.9L20.2 0 14.3 5.9V14.3H5.9L0 20.2-5.9 14.3H-14.3V5.9L-20.2 0-14.3-5.9V-14.3H-5.9ZM0-9 2.6-6.3H6.3V-2.6L9 0 6.3 2.6V6.3H2.6L0 9-2.6 6.3H-6.3V2.6L-9 0-6.3-2.6V-6.3H-2.6Z' vector-effect='non-scaling-stroke'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23e3c766' stroke-opacity='.18'%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='56' y='0'/%3E%3Cuse href='%23s' x='28' y='48.5'/%3E%3Cuse href='%23s' x='0' y='97'/%3E%3Cuse href='%23s' x='56' y='97'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cdefs%3E%3Cpath id='s' d='M0-20.2 5.9-14.3H14.3V-5.9L20.2 0 14.3 5.9V14.3H5.9L0 20.2-5.9 14.3H-14.3V5.9L-20.2 0-14.3-5.9V-14.3H-5.9ZM0-9 2.6-6.3H6.3V-2.6L9 0 6.3 2.6V6.3H2.6L0 9-2.6 6.3H-6.3V2.6L-9 0-6.3-2.6V-6.3H-2.6Z' vector-effect='non-scaling-stroke'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23e3c766' stroke-opacity='.22'%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='56' y='0'/%3E%3Cuse href='%23s' x='28' y='48.5'/%3E%3Cuse href='%23s' x='0' y='97'/%3E%3Cuse href='%23s' x='56' y='97'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-tile-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cdefs%3E%3Cpath id='s' d='M0-20.2 5.9-14.3H14.3V-5.9L20.2 0 14.3 5.9V14.3H5.9L0 20.2-5.9 14.3H-14.3V5.9L-20.2 0-14.3-5.9V-14.3H-5.9ZM0-9 2.6-6.3H6.3V-2.6L9 0 6.3 2.6V6.3H2.6L0 9-2.6 6.3H-6.3V2.6L-9 0-6.3-2.6V-6.3H-2.6Z' vector-effect='non-scaling-stroke'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23064e3b' stroke-opacity='.2'%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='56' y='0'/%3E%3Cuse href='%23s' x='28' y='48.5'/%3E%3Cuse href='%23s' x='0' y='97'/%3E%3Cuse href='%23s' x='56' y='97'/%3E%3C/g%3E%3C/svg%3E");
}

/* Shades of the install colours where the browser can mix them; the fixed fallbacks above elsewhere. */
@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --tint: color-mix(in srgb, var(--brand) 9%, #ffffff);
        --brand-deep: color-mix(in srgb, var(--brand) 45%, var(--brand-dark));
        --hero-from: color-mix(in srgb, var(--brand) 60%, var(--brand-dark));
        --brand-bright: color-mix(in srgb, var(--brand) 82%, #34d399);
        --accent-soft: color-mix(in srgb, var(--accent) 65%, #ffffff);
        --accent-tint: color-mix(in srgb, var(--accent) 22%, #ffffff);
        --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
        --shadow-button: 0 8px 10px color-mix(in srgb, var(--brand) 28%, transparent);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-body);
    line-height: 1.5;
}

a { color: var(--brand); font-weight: 600; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.icon { flex: none; }

/* Breakpoint switches. One placement for 768-1023 and another from 1024 (the login page renders
   its features and prayer card in both and lets CSS pick one). */
.show-md, .show-lg { display: none !important; }

/* ---------- Shell ---------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 14px var(--space-5) 97px;
    background: var(--brand-dark);
    color: var(--on-brand);
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
}

/* Diagonal emerald gradient, star texture and a soft gold glow top right; purely decorative. */
.hero--ornament {
    background-image:
        radial-gradient(circle 230px at 90% 0, var(--accent-glow), transparent),
        var(--pattern-hero),
        linear-gradient(136deg, var(--hero-from) 0%, var(--brand-deep) 46%, var(--brand-dark) 83%);
    background-size: auto, 56px 97px, auto;
}

.hero__inner { position: relative; max-width: var(--content-width); margin: 0 auto; }
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.brand__name { margin: 0; font-weight: 800; font-size: var(--text-lead); line-height: 1.25; overflow-wrap: anywhere; }
.brand__tagline { margin: 1px 0 0; color: var(--accent-tint); font-size: var(--text-caption); font-weight: 500; line-height: 1.25; }

.pill {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px var(--space-3);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 8%);
    color: var(--accent-tint);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.25;
}

.hero__greeting {
    margin: 22px 0 0;
    color: var(--accent-soft);
    font-family: var(--font-arabic);
    font-size: 1.5rem;
    font-weight: 700;
    /* Amiri's tall ascenders: the Figma text boxes are 1.75 times the font size. */
    line-height: 1.75;
    /* The paragraph is dir="rtl", which would right-align it; the design keeps it with the title. */
    text-align: left;
}

.hero__title { max-width: 11em; margin: 6px 0 0; font-size: var(--text-display); font-weight: 800; line-height: 33px; letter-spacing: -.01em; }
.hero__lead { margin: 6px 0 0; font-size: var(--text-small); line-height: 21px; }
.hero__suffix { display: none; }
.hero__center { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.hero__center .hero__greeting { margin: 0; text-align: inherit; }
.hero__center .hero__title, .hero__center .hero__lead { margin: 0; }

/* The connected page carries no brand row: its hero is the success badge. */
.hero--plain { padding-bottom: 77px; }
.hero--plain .hero__lead { line-height: 1.25; }
.hero--plain .hero__title { max-width: none; font-size: 1.5625rem; line-height: 1.25; }
.hero--plain .hero__greeting { font-size: 1.625rem; }

.page {
    /* Positioned so the card that overlaps the hero paints above it (the hero is positioned too). */
    position: relative;
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--space-4));
    margin: calc(-1 * var(--space-7)) auto 0;
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.after {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--space-4));
    margin: 36px auto 0;
    padding: 0 var(--space-4);
}

.footer {
    margin-top: auto;
    padding: var(--space-4) var(--space-4) 28px;
    color: var(--muted);
    font-size: var(--text-tiny);
    text-align: center;
}
.footer p { margin: 0 0 var(--space-1); line-height: 1.25; }
.footer p:last-child { margin-bottom: 0; }

/* ---------- Card and headings ---------- */
.card {
    width: 100%;
    padding: 22px 20px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card__title { margin: 0; font-size: var(--text-card); font-weight: 800; line-height: 1.25; }
.card__sub { margin: 2px 0 0; color: var(--muted); font-size: var(--text-label); line-height: 1.25; }

.title { margin: 0 0 var(--space-4); font-size: var(--text-heading); line-height: 1.25; }
.lead { margin: 0 0 var(--space-5); color: var(--muted); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--tint);
    color: var(--brand);
    font-size: var(--text-tiny);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.badge .icon { color: var(--brand); }
.badge--online { color: var(--success); }
.badge--online .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* ---------- Tabs (links: each tab is its own URL, so no script is needed) ---------- */
.tabs { display: flex; gap: var(--space-1); margin: 0 0 var(--space-4); padding: var(--space-1); list-style: none; background: var(--tint); border-radius: var(--radius-control); }
.tabs li { flex: 1; }
.tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px var(--space-1);
    border-radius: var(--radius-xs);
    color: var(--muted);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
}
/* 44px hit area around the 36px pill without changing the layout. */
.tabs a::after { content: ""; position: absolute; inset: -4px 0; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--brand-deep); font-weight: 700; box-shadow: var(--shadow-tab); }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-label); font-weight: 600; line-height: 1.25; }
.field__control { position: relative; }
.field__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.field__input {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-base);
}
.field__input::placeholder { color: var(--muted); opacity: 1; }
.field__input--icon { padding-left: 48px; }
.field__input--toggle { padding-right: 52px; }
.field__input--invalid { border-color: var(--danger-line); }

.field__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
/* display above would otherwise beat the [hidden] attribute that hides it without JS. */
.field__toggle[hidden] { display: none; }

.field__hint { margin: 0; color: var(--muted); font-size: var(--text-label); }

.field__error, .alert {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: var(--text-caption);
    font-weight: 500;
}
.field__error { padding: 0; background: none; }
.alert { display: flex; gap: 10px; margin-bottom: var(--space-4); border: 1px solid var(--danger-line); line-height: 17px; }
.alert .icon { width: 18px; height: 18px; }
.alert p { margin: 0; }
.alert__title { display: block; margin-bottom: 2px; color: var(--danger); font-size: var(--text-label); font-weight: 700; line-height: 1.25; }
.alert__body { color: var(--ink); font-weight: 400; }

.form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* 44px hit areas on a 20px row: the padding is cancelled by the negative margin. */
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: -12px 0; font-size: var(--text-label); font-weight: 500; cursor: pointer; }
.check input {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-check);
    background: var(--surface);
    cursor: pointer;
}
.check input::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--on-brand);
    clip-path: polygon(14% 50%, 0 64%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
    transform: scale(0);
}
.check input:checked { border-color: var(--brand); background: var(--brand); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.form__link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: var(--text-label); font-weight: 700; text-decoration: none; }

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--button-height);
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-control);
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-size: var(--text-base);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-button);
}
.button--secondary { background: var(--surface); color: var(--brand-deep); border-color: var(--border); box-shadow: none; }

.consent { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 18px; text-align: center; }
.helpline { margin: 0; display: flex; justify-content: center; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-label); line-height: 1.25; text-align: center; flex-wrap: wrap; }
.helpline .icon { color: var(--brand); }
/* 44px hit area without growing the row: padding is cancelled by the negative margin. */
.helpline a { display: inline-block; padding: 12px 0; margin: -12px 0 -12px -4px; font-weight: 700; text-decoration: none; }

/* ---------- Feature cards (tablet portrait) and feature list (inside the landscape hero) ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; gap: var(--space-2); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.feature .tile { width: 36px; height: 36px; border-radius: var(--radius-xs); }
.feature__title { margin: 0; font-size: var(--text-label); font-weight: 800; line-height: 1.25; }
.feature__text { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-caption); line-height: 17px; }

/* ---------- Icon tile and category tones ---------- */
.tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--tint); color: var(--brand); flex: none; }
.tile--lg .icon { stroke-width: 1.6; }
.tile--lg { width: 64px; height: 64px; border-radius: var(--radius-control); background-size: 22px 38.1px; background-position: -11px -19px; }
.tile--brand { background-color: var(--brand); color: var(--on-brand); }
.tile--bright { background-color: var(--brand-bright); color: var(--on-brand); }
.tile--deep { background-color: var(--brand-deep); color: var(--accent-soft); }
.tile--dark { background-color: var(--brand-dark); color: var(--accent-soft); }
.tile--gold { background-color: var(--accent); color: var(--brand-dark); }
.tile--soft { background-color: var(--accent-tint); color: var(--accent-ink); }
.tile--lg.tile--brand, .tile--lg.tile--bright, .tile--lg.tile--deep, .tile--lg.tile--dark { background-image: var(--pattern-tile); }
.tile--lg.tile--gold, .tile--lg.tile--soft { background-image: var(--pattern-tile-dark); }

/* ---------- Prayer banner ---------- */
/* The banner is a column: the next-prayer line, then today's five times, then the clock.
   .prayer__head keeps the original single-row layout the Figma frames measure. */
.prayer { display: flex; flex-direction: column; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--brand-deep); color: var(--on-brand); }
.prayer__head { display: flex; align-items: center; gap: var(--space-3); }
.prayer__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--brand-dark); flex: none; }
.prayer__text { flex: 1; min-width: 0; }
.prayer__label { margin: 0; color: var(--accent-tint); font-size: var(--text-caption); font-weight: 500; line-height: 1.25; }
.prayer__time { margin: 2px 0 0; font-weight: 800; font-size: var(--text-base); line-height: 1.25; }
.prayer__left { margin: 0; color: var(--accent-soft); font-weight: 700; font-size: var(--text-label); white-space: nowrap; }
/* Five equal columns at every width: the times are the point, so they share the space
   evenly and shrink together rather than one of them wrapping. */
.prayer-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.prayer-row__cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: var(--radius-sm); border: 1px solid transparent; text-align: center; }
.prayer-row__name { color: var(--accent-tint); font-size: var(--text-micro); font-weight: 600; line-height: 1.2; }
.prayer-row__time { font-size: var(--text-caption); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* The next time is marked three ways on purpose: fill, border and weight. aria-current
   carries it for anyone not seeing the colour. */
.prayer-row__cell--next { background: rgb(255 255 255 / 12%); border-color: var(--accent-soft); }
.prayer-row__cell--next .prayer-row__name { color: var(--accent); }
.prayer-row__cell--next .prayer-row__time { font-weight: 800; }
.prayer__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0; color: var(--accent-tint); font-size: var(--text-micro); font-weight: 500; line-height: 1.3; }
.prayer__extras { font-variant-numeric: tabular-nums; }
.prayer__clock { white-space: nowrap; }
.prayer__clock strong { color: var(--on-brand); font-weight: 800; font-variant-numeric: tabular-nums; }
/* The prayer banner is the one hero block phones also get: a captive portal is used on a
   phone, and the next prayer is why this banner exists. Phones get the compact form (the
   next prayer, the countdown and the clock); the five times and the extras need the width,
   so they appear from 768 up. From 1024 the glass copy in the hero takes over. */
.prayer--main .prayer-row, .prayer--main .prayer__extras { display: none; }
/* The place name as well: at 360px it pushes "Dzuhur . 11:37 WIB" onto two lines, and the
   countdown is the part that is actually useful on a phone. */
.prayer--main .prayer__place, .prayer--main .prayer__sep { display: none; }

/* ---------- Kabar Kampus ---------- */
.kabar { --kabar-gap: var(--space-4); display: flex; flex-direction: column; gap: var(--kabar-gap); }
.kabar__column { display: flex; flex-direction: column; gap: var(--kabar-gap); min-width: 0; }
.kabar__columns { display: flex; flex-direction: column; gap: var(--kabar-gap); }
.kabar__subhead { display: none; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lead); font-weight: 800; line-height: 1.25; }
.kabar__subhead .icon { color: var(--brand); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--accent-ink); font-size: var(--text-tiny); font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; }
.eyebrow .icon { color: var(--accent); }
.section-title { margin: var(--space-1) 0 0; font-size: var(--text-heading); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.section-sub { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-label); line-height: 1.25; }
.more { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-label); font-weight: 700; line-height: 1.25; text-decoration: none; white-space: nowrap; }
/* These .more links keep a 44px hit area on a 16px line without moving the drawn layout. */
.section-head .more, .news-featured__body .more, .read .more { padding: 14px 0; margin: -14px 0; }
.divider { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--accent); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--accent); }

.chips { display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); overflow-x: auto; list-style: none; scrollbar-width: none; }
.chips a { position: relative; display: inline-flex; align-items: center; padding: var(--space-2) 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--text-label); font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; }
.chips a::after { content: ""; position: absolute; inset: -6px 0; }
.chips a[aria-current="page"] { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); font-weight: 700; }

.news-featured-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.news-featured { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.news-featured--md, .news-featured--lg { display: none; }
.news-featured__art { position: relative; display: flex; align-items: center; justify-content: center; height: 168px; background-color: var(--brand-deep); background-image: var(--pattern-art); background-size: 40px 69.3px; background-position: -20px -34.6px; }
.news-featured__art--gold, .news-featured__art--soft { background-image: var(--pattern-tile-dark); }
.news-featured__art--brand { background-color: var(--brand); }
.news-featured__art--bright { background-color: var(--brand-bright); }
.news-featured__art--dark { background-color: var(--brand-dark); }
.news-featured__art--gold { background-color: var(--accent); }
.news-featured__art--soft { background-color: var(--accent-tint); }
/* The art's icon sits in a white disc; its ring and glyph colour follow the tone. */
.news-featured__art .icon { stroke-width: 1.2; }
.news-featured__art .tile { width: 88px; height: 88px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent-soft); color: var(--accent); background-image: none; }
.news-featured__art--brand .tile, .news-featured__art--bright .tile { border-color: var(--surface); color: var(--brand); }
.news-featured__art--gold .tile, .news-featured__art--soft .tile { border-color: var(--brand-dark); color: var(--brand-dark); }
.news-featured__flag { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--brand-dark); font-size: var(--text-micro); font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.photo { display: block; max-width: 100%; height: auto; }
.tile--photo { overflow: hidden; background: var(--tint); }
.tile--photo .photo { width: 100%; height: 100%; object-fit: cover; }
.news-featured__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-featured__flag { z-index: 1; }
.news-featured__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
.news-meta { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 500; line-height: 1.25; }
.cat { padding: 5px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--brand); font-size: var(--text-tiny); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.news-title { margin: 0; font-size: var(--text-base); font-weight: 800; line-height: 22px; }
.news-excerpt { margin: 0; color: var(--muted); font-size: var(--text-label); line-height: 19px; }
.news-featured__body .more { gap: 6px; }

.news-list { margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
/* Which posts the list shows depends on how many featured cards the width shows (1, 2 or 3),
   so no post appears twice. Classes come from kabar.blade.php. */
.news-list > li { display: none; border-top: 1px solid var(--border); }
.news-list > .news-list__item--sm { display: block; }
.news-list > .news-list__first--sm { border-top: 0; }
.news-list--empty-sm { display: none; }
.news-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 14px; color: inherit; font-weight: inherit; text-decoration: none; }
.news-row__text { min-width: 0; flex: 1; }
.news-row__cat, .news-row__title, .news-row__meta { display: block; }
.news-row__cat { color: var(--brand); font-size: var(--text-tiny); font-weight: 800; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
.news-row__title { margin: 3px 0; font-size: var(--text-small); font-weight: 700; line-height: 19px; }
.news-row__meta { color: var(--muted); font-size: var(--text-caption); line-height: 1.25; }
.news-row > .icon { color: var(--muted); }

.agenda-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; }
.agenda-head h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lead); font-weight: 800; line-height: 1.25; }
.agenda-head h3 .icon { color: var(--brand); }
.agenda-head p { margin: 0; color: var(--muted); font-size: var(--text-label); font-weight: 600; }
/* Block padding (cancelled by the margin) keeps the focused card's outline inside the scroller's clip box. */
.agenda { display: flex; gap: var(--space-3); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); list-style: none; scrollbar-width: none; }
.agenda > li { flex: 0 0 260px; max-width: 82%; scroll-snap-align: start; }
.agenda-card { position: relative; display: flex; gap: var(--space-3); height: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 62px; border-radius: var(--radius-control); background: var(--brand-deep); color: var(--on-brand); flex: none; font-weight: 800; line-height: 1.25; }
.date-badge--alt { background: var(--accent); color: var(--brand-dark); }
.date-badge__day { font-size: var(--text-heading); }
.date-badge__month { color: var(--accent-soft); font-size: var(--text-tiny); letter-spacing: .08em; }
.date-badge--alt .date-badge__month { color: var(--brand-dark); }
.agenda-card__link { color: inherit; text-decoration: none; }
.agenda-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.agenda-card__link:focus-visible { outline: none; }
.agenda-card:has(.agenda-card__link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.agenda-card__thumb { width: 64px; height: 64px; margin-left: auto; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.agenda-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda-card__title { margin: 0; font-size: var(--text-small); font-weight: 700; line-height: 19px; }
.agenda-card__line { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.25; overflow-wrap: anywhere; }
/* Built by portal.js for the swipe row; absent without script. */
.agenda-dots { display: flex; justify-content: center; gap: 6px; }
.agenda-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .2s; }
.agenda-dots span[data-active] { width: 18px; background: var(--brand); }

.kabar__all { min-height: var(--button-height); border-width: 1.5px; color: var(--brand-deep); }

.empty { margin: 0; padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ---------- Connected page ---------- */
.done-mark { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--accent-soft); background: var(--brand-bright); color: var(--on-brand); box-shadow: 0 0 32px var(--accent-glow); }
.session { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.session .card__head { margin: 0; }
.session .card__title { font-size: var(--text-base); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background: var(--canvas); }
.stat .icon { color: var(--brand); }
.stat dt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 500; line-height: 1.25; }
.stat dd { margin: 0; font-weight: 800; font-size: var(--text-body); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.progress-block { display: flex; flex-direction: column; gap: var(--space-2); }
.progress__label { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 500; line-height: 1.25; }
.progress__label strong { color: var(--brand); }
.progress { width: 100%; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand-bright); border-radius: 4px; }
.page--status .prayer__icon { background: rgb(255 255 255 / 10%); color: var(--accent-soft); }
.subhead { margin: 0; font-size: var(--text-body); font-weight: 800; line-height: 1.25; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.quick-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 14px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); font-size: var(--text-caption); font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.quick-link .tile { width: 44px; height: 44px; border-radius: var(--radius-control); }
.announcement { display: flex; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius); background: var(--accent-tint); color: var(--ink); font-size: var(--text-label); font-weight: inherit; text-decoration: none; }
.announcement .icon { color: var(--accent-ink); }
.announcement a { color: inherit; }
/* 44px hit area on a 16px line; the negative margins keep the drawn spacing (3px below). */
.announcement__title { display: block; padding: 14px 0; margin: -14px 0 -11px; font-weight: 800; line-height: 1.25; }
.announcement__text { display: block; margin: 0; line-height: 19px; }
.announcement__file { display: inline-block; min-height: 44px; padding-top: 12px; font-weight: 600; }
.details { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-caption); color: var(--muted); }
.details__row { display: flex; justify-content: space-between; gap: var(--space-2); }
.details dt, .details dd { margin: 0; }
.details dd { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.details__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.tag { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-label); text-align: center; }
.notice { color: var(--muted); font-size: var(--text-label); text-align: center; }
.prose p { margin: 0 0 var(--space-3); }
/* The way back on the prose pages; a 44px hit area. A class, so .button links in the same card keep their own sizing. */
.back-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Reading pages (pre-login, same host only) ---------- */
.read { display: flex; flex-direction: column; gap: var(--space-3); }
/* The flex gap spaces the card's own paragraphs; default margins doubled it. */
.read > p { margin: 0; }
.read__place { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--muted); }
.read__image { width: 100%; height: auto; border-radius: var(--radius); }
.read__body { overflow-wrap: anywhere; }
.read__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.read__body table { display: block; max-width: 100%; overflow-x: auto; }
/* Cells keep whole words; a wide table scrolls inside its own box instead. */
.read__body :is(th, td) { overflow-wrap: normal; }
.read__body .offline-note { display: block; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--tint); }
.read__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.read__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.read__caption { margin: var(--space-1) 0 0; font-size: var(--text-label); }

/* ---------- Tablet portrait ---------- */
@media (min-width: 768px) {
    .read__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .show-md { display: flex !important; }
    .features.show-md { display: grid !important; }
    .prayer--main .prayer-row { display: grid; }
    .prayer--main .prayer__extras { display: inline; }
    .prayer--main .prayer__place, .prayer--main .prayer__sep { display: inline; }
    .hero { padding: 40px 64px 144px; border-radius: 0 0 var(--radius-hero-lg) var(--radius-hero-lg); }
    .hero--ornament { background-image: radial-gradient(circle 420px at 50% 0, var(--accent-glow), transparent), var(--pattern-hero), linear-gradient(154deg, var(--hero-from) 0%, var(--brand-deep) 46%, var(--brand-dark) 83%); }
    .hero__inner { max-width: 44.125rem; }
    .brand { gap: 14px; }
    .brand__logo { width: 52px; height: 52px; }
    .brand__name { font-size: var(--text-card); }
    .brand__tagline { font-size: var(--text-label); }
    .pill { display: inline-flex; }
    .hero__center-md { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; text-align: center; }
    .hero__center-md .hero__greeting { margin: 0; font-size: 1.875rem; text-align: inherit; }
    .hero__title { max-width: none; }
    .hero__center-md .hero__title { margin: 0; font-size: 2.25rem; line-height: 1.25; letter-spacing: -.015em; }
    .hero__center-md .hero__lead { margin: 0; font-size: var(--text-base); line-height: 1.25; }
    .hero--plain { padding-bottom: 96px; }
    .page { max-width: calc(32.5rem + 2 * var(--space-4)); margin-top: -96px; gap: var(--space-5); }
    .page--status { max-width: calc(var(--content-width) + 2 * var(--space-4)); margin-top: calc(-1 * var(--space-7)); gap: var(--space-4); }
    .card { box-shadow: 0 20px 24px rgb(6 78 59 / 12%); }
    .prayer { padding: 14px 18px; }
    .after { max-width: calc(44.125rem + 2 * var(--space-4)); margin-top: 40px; }
    .footer { padding: 20px var(--space-4) 48px; }
    .kabar { --kabar-gap: 20px; }
    .chips { margin: 0; padding: 0; }
    .news-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-featured--md { display: flex; }
    .news-list > li, .news-list > .news-list__item--sm { display: none; border-top: 1px solid var(--border); }
    .news-list > .news-list__item--md { display: block; }
    .news-list > .news-list__first--md { border-top: 0; }
    .news-list--empty-sm { display: block; }
    .news-list--empty-md { display: none; }
    .agenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
    .agenda > li { max-width: none; }
    /* Three cards per row leave no room for the photo next to the date badge and text. */
    .agenda-card__thumb { display: none; }
    .agenda-dots { display: none; }
    .kabar__all { width: 320px; margin-inline: auto; }
}

/* ---------- Tablet landscape and desktop: hero panel left, form right, news below ---------- */
@media (min-width: 1024px) {
    .show-md, .features.show-md { display: none !important; }
    .show-lg { display: flex !important; }
    .prayer--main { display: none; }
    .features.show-lg { display: flex !important; }

    .shell--split {
        display: grid;
        grid-template-columns: minmax(400px, 560px) minmax(0, 1fr);
        grid-template-areas: "hero page" "after after" "footer footer";
    }
    .shell--split .hero {
        grid-area: hero;
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 48px 56px;
        border-radius: 0 var(--radius-hero-lg) var(--radius-hero-lg) 0;
    }
    .shell--split .hero--ornament { background-image: radial-gradient(circle 330px at 100% 0, var(--accent-glow), transparent), var(--pattern-hero), linear-gradient(124deg, var(--hero-from) 0%, var(--brand-deep) 46%, var(--brand-dark) 83%); }
    .shell--split .hero__inner { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); width: 100%; max-width: none; margin: 0; }
    .shell--split .pill { display: none; }
    .shell--split .brand__logo { width: 56px; height: 56px; }
    .shell--split .brand__name { font-size: 1.25rem; }
    .shell--split .hero__center-md { align-items: flex-start; gap: var(--space-3); margin: 0; text-align: left; }
    .shell--split .hero__center-md .hero__greeting { font-size: 2rem; }
    .shell--split .hero__center-md .hero__title { font-size: 2.375rem; line-height: 46px; letter-spacing: -.015em; }
    .shell--split .hero__center-md .hero__lead { line-height: 25px; }
    .shell--split .hero__suffix { display: inline; }
    .shell--split .page { grid-area: page; align-self: center; justify-self: center; width: 100%; max-width: 440px; margin: 0; padding: var(--space-6) 0; gap: 20px; }
    .shell--split .card { box-shadow: 0 20px 24px rgb(6 78 59 / 10%); }
    /* Capped at the 1194px design width so wide desktops do not stretch the news grid. Not split-only:
       the connected page shows Kabar Kampus too and needs the same width for the 3-card row and list. */
    .after { width: 100%; max-width: 1194px; margin: 0 auto; padding: 40px 56px 0; }
    .shell--split .after { grid-area: after; }
    .shell--split .footer { grid-area: footer; padding: var(--space-5) var(--space-4) 48px; font-size: var(--text-caption); }

    /* Features as a list on the hero; the prayer card turns to glass at the hero's foot. */
    .hero .features { flex-direction: column; gap: 14px; padding-top: var(--space-3); }
    .hero .feature { flex-direction: row; align-items: center; gap: 14px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--on-brand); }
    .hero .feature .tile { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgb(255 255 255 / 8%); border: 1px solid var(--accent-soft); color: var(--accent-soft); }
    .hero .feature__title { font-size: var(--text-body); font-weight: 700; }
    .hero .feature__text { margin: 2px 0 0; color: var(--on-brand); font-size: var(--text-label); line-height: 1.25; }
    .prayer--glass { padding: 14px var(--space-4); border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius); background: rgb(255 255 255 / 8%); }
    .prayer--glass .prayer__icon { width: 36px; height: 36px; background: rgb(255 255 255 / 10%); color: var(--accent-soft); }
    .prayer--glass .prayer__time { font-size: var(--text-body); }
    .prayer--glass .prayer__left { font-size: var(--text-caption); font-weight: 600; }
    .prayer--glass .prayer-row__cell { padding: 5px 2px; }

    .kabar { --kabar-gap: var(--space-5); }
    .news-featured-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .news-featured--lg { display: flex; }
    .news-list > li, .news-list > .news-list__item--sm, .news-list > .news-list__item--md { display: none; border-top: 1px solid var(--border); }
    .news-list > .news-list__item--lg { display: block; }
    .news-list > .news-list__first--lg { border-top: 0; }
    .news-list--empty-md { display: block; }
    .news-list--empty-lg { display: none; }
    .kabar__columns { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-5); align-items: start; }
    .kabar__columns--single { grid-template-columns: minmax(0, 1fr); }
    .kabar__columns .kabar__column { gap: 14px; }
    .kabar__subhead { display: flex; }
    .kabar__subhead--empty-lg { display: none; }
    .agenda { display: flex; flex-direction: column; gap: 14px; }
    .agenda > li { flex: none; }
    .agenda-card__thumb { display: block; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }