/* ==========================================================================
   WP Post Monitor — design tokens ar component
   Surface mode: OPERATE (dense admin). Tai border diye elevation, kom motion,
   choto font, ghono row. Landing-page er taste ekhane khate na.
   ========================================================================== */

:root {
    /* --- neutral ramp (thanda tint deoa, beige na) --- */
    --bg:               #f2f5f8;
    --surface:          #ffffff;
    --surface-sunken:   #f7f9fb;
    --surface-hover:    #f2f6fa;
    --border:           #d8dee6;
    --border-strong:    #7c8a98;

    --text:             #16202b;
    --text-muted:       #55616f;
    --text-faint:       #636f7c;

    /* --- accent: wp-admin er kachakachi blue.
           Karon operator er pasher tab e wp-admin ei khola thake. --- */
    --accent:           #1a5fb4;
    --accent-hover:     #144a8e;
    --accent-soft:      #e7f0fb;
    --accent-contrast:  #ffffff;

    /* --- status. Rong ekmatro sonket na — sathe bhasha ar songkha thake. --- */
    --ok-fg:      #12613c;  --ok-bg:      #e2f2e9;  --ok-dot:      #2e9a67;
    --low-fg:     #6f4a00;  --low-bg:     #fbf0d8;  --low-dot:     #c08512;
    --empty-fg:   #8d3510;  --empty-bg:   #fceee6;  --empty-dot:   #d3641f;
    --error-fg:   #97161d;  --error-bg:   #fbe8e9;  --error-dot:   #cc2f38;
    --never-fg:   #55616f;  --never-bg:   #eaeef3;  --never-dot:   #93a0ad;

    /* --- type scale: 1.2 minor third, 5 step. Er majhe kono size = bug. --- */
    --t-xs:   12px;
    --t-sm:   14px;
    --t-base: 16px;
    --t-lg:   20px;
    --t-xl:   24px;

    /* --- space scale --- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;

    /* --- radius: element er akar onujayi --- */
    --r-sm: 4px;   /* badge, tag */
    --r-md: 6px;   /* button, input */
    --r-lg: 8px;   /* card, panel */

    --ring: 0 0 0 3px rgba(26, 95, 180, .32);

    /* Latin face age, Bengali face pore — Bangla glyph gulo ekhane fallback kore.
       Sob gulo system font, tai kono webfont download hoy na ar asol bold weight
       thake (nokol bold e juktakkhor ghete jay). */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla",
            "Hind Siliguri", SolaimanLipi, sans-serif;

    /* Uppercase label — Bangla te ei ta bad jabe (Bangla e case nai). */
    --label-transform: uppercase;
    --label-tracking: .06em;
    --line-normal: 1.5;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   বাংলা. Latin er setting Bengali te bhenge jay, tai ei gulo alada:

   - 12px e juktakkhor pora jay na -> chhoto text 14px, body 16px
   - Bengali te matra ar niche-r kar mile line beshi jayga ney -> line-height 1.7
   - Bangla te uppercase bole kichu nai -> label er text-transform bondho
   - letter-spacing Bengali juktakkhor bhenge dey -> 0
   --------------------------------------------------------------------------- */
html[lang="bn"] {
    --t-xs:   14px;
    --t-sm:   16px;
    --t-base: 18px;
    --t-lg:   22px;
    --t-xl:   28px;

    --label-transform: none;
    --label-tracking: 0;
    --line-normal: 1.7;
}

html[lang="bn"] body {
    line-height: var(--line-normal);
    hyphens: none;
}

/* Sob header/title e negative tracking Bangla te khate na. */
html[lang="bn"] .page__title,
html[lang="bn"] .tile__value,
html[lang="bn"] .topbar__brand,
html[lang="bn"] .login-card h1 { letter-spacing: 0; }

/* Songkha sob somoy Latin ongke — data hisebe eta wp-admin er sathe milbe,
   ar copy kore onno jaygay boshano jabe. */
html[lang="bn"] .tile__value,
html[lang="bn"] td.num,
html[lang="bn"] .runway__days { font-feature-settings: "tnum"; }

/* Dark mode ta ulto kore banano hoy nai — alada ramp.
   Elevation ekhane halka hoy, chaya diye na. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:             #0f1317;
        --surface:        #161b21;
        --surface-sunken: #1b2129;
        --surface-hover:  #1e252d;
        --border:         #2a333d;
        --border-strong:  #66737f;

        --text:           #e3e8ed;
        --text-muted:     #9dabb8;
        --text-faint:     #8b98a5;

        --accent:         #66a3ec;
        --accent-hover:   #8bbaf3;
        --accent-soft:    #16273a;
        --accent-contrast:#0f1317;

        --ok-fg:    #6ed09b;  --ok-bg:    #10281d;  --ok-dot:    #43b378;
        --low-fg:   #e0b262;  --low-bg:   #2a2010;  --low-dot:   #c9932f;
        --empty-fg: #ef9569;  --empty-bg: #2e1b12;  --empty-dot: #d9702f;
        --error-fg: #f08287;  --error-bg: #321619;  --error-dot: #d64a52;
        --never-fg: #9dabb8;  --never-bg: #202832;  --never-dot: #6b7885;

        --ring: 0 0 0 3px rgba(102, 163, 236, .35);
    }
}

[data-theme="dark"] {
    --bg:             #0f1317;
    --surface:        #161b21;
    --surface-sunken: #1b2129;
    --surface-hover:  #1e252d;
    --border:         #2a333d;
    --border-strong:  #66737f;

    --text:           #e3e8ed;
    --text-muted:     #9dabb8;
    --text-faint:     #8b98a5;

    --accent:         #66a3ec;
    --accent-hover:   #8bbaf3;
    --accent-soft:    #16273a;
    --accent-contrast:#0f1317;

    --ok-fg:    #6ed09b;  --ok-bg:    #10281d;  --ok-dot:    #43b378;
    --low-fg:   #e0b262;  --low-bg:   #2a2010;  --low-dot:   #c9932f;
    --empty-fg: #ef9569;  --empty-bg: #2e1b12;  --empty-dot: #d9702f;
    --error-fg: #f08287;  --error-bg: #321619;  --error-dot: #d64a52;
    --never-fg: #9dabb8;  --never-bg: #202832;  --never-dot: #6b7885;

    --ring: 0 0 0 3px rgba(102, 163, 236, .35);
}

/* ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--t-sm);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Bangla-r jonno: user-er deoa text (site naam, group) ekhane bose.
   Uppercase ba letter-spacing ei class e kokhono debo na. */
.user-text {
    line-height: 1.7;
    letter-spacing: 0;
    text-transform: none;
    hyphens: none;
}

/* ---------- layout ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-6);
    height: 52px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
    overflow: hidden;
}

.topbar__brand {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand span { color: var(--accent); }

/* Bangla label English er cheye 15-30% chowra hoy, tai chhoto screen e nav ta
   nijei paashe scroll korbe — brand ar dan pasher control sob somoy dekha jabe. */
.topbar__nav {
    display: flex;
    gap: var(--s-1);
    margin-left: var(--s-4);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__link { flex: none; }

.topbar__link {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-weight: 500;
    line-height: 28px;
}
.topbar__link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.topbar__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* Nav er alert count. Songkha ta nijei sonket — rong ta sudhu jor deoa. */
.pill {
    display: inline-block;
    margin-left: var(--s-1);
    padding: 0 6px;
    border-radius: 9px;
    background: var(--empty-bg);
    color: var(--empty-fg);
    font-size: var(--t-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
}

/* Bhasha toggle — duita bhasha, tai segmented control-i thik ache. */
.langswitch {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    flex: none;
}
.langswitch__opt {
    padding: var(--s-1) var(--s-2);
    font-size: var(--t-xs);
    font-weight: 500;
    line-height: 26px;
    color: var(--text-muted);
    background: var(--surface);
    white-space: nowrap;
}
.langswitch__opt + .langswitch__opt { border-left: 1px solid var(--border-strong); }
.langswitch__opt:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.langswitch__opt[aria-current="true"] {
    background: var(--accent);
    color: var(--accent-contrast);
}
.langswitch__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }

.topbar__who { color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }
.topbar__who b { color: var(--text); font-weight: 500; }

.page { padding: var(--s-6); max-width: 1600px; margin: 0 auto; }

.page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}

.page__title { font-size: var(--t-lg); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page__sub   { font-size: var(--t-xs); color: var(--text-muted); margin: var(--s-1) 0 0; }

/* ---------- summary tiles ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-3) var(--s-4);
}

.tile__label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
    line-height: 1.4;
    margin-bottom: var(--s-1);
}

.tile__value {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.tile__note { font-size: var(--t-xs); color: var(--text-faint); margin-top: var(--s-1); }

.tile--alert { border-color: var(--empty-dot); }
.tile--alert .tile__value { color: var(--empty-fg); }

/* ---------- toolbar ---------- */

.toolbar {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field__label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    font: inherit;
    font-size: var(--t-sm);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: var(--s-2) var(--s-3);
    min-height: 36px;
    /* Text input er ekta built-in chowra thake (size=20). min-width:0 na dile
       grid/flex oke chhoto korte pare na ar column theke uple giye kete jay. */
    min-width: 0;
    max-width: 100%;
}

/* .field er bhitorer control column er purota ney. */
.field > input,
.field > select,
.field > textarea { width: 100%; }
input::placeholder { color: var(--text-faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.search { min-width: 220px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 500;
    min-height: 36px;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 120ms cubic-bezier(.2,0,0,1), border-color 120ms;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--border); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }

/* Sync cholakalin baki button gulo — je ta chapa hoyeche tar cheye aro halka,
   jate bojha jay kon ta chalche ar kon gulo sudhu opekkhay. */
.btn.is-waiting { opacity: .35; }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-hover); }

/* Muche fela'r button. Rong ekmatro sonket na — lekha tao bole ki hobe,
   ar click korle confirm chay. */
.btn--danger {
    color: var(--error-fg);
    border-color: var(--error-dot);
    background: var(--surface);
}
.btn--danger:hover { background: var(--error-bg); }
.btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--error-bg); border-color: var(--error-dot); }

.btn--sm { min-height: 28px; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); }

/* ---------- table ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Table nijer bhitorei scroll kore — tai thead `top:0` te atke thake ar
   uporer filter/summary sob somoy chokhe thake.
   (Sudhu overflow-x dile wrapper ta scroll container hoy ar sticky thead
   table er bhitore 52px niche neme prothom row dheke fele.) */
.table-scroll {
    overflow: auto;
    max-height: calc(100vh - 300px);
    min-height: 260px;
    overscroll-behavior: contain;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

table.data th, table.data td {
    padding: var(--s-2) var(--s-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.data thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-sunken);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
    line-height: 1.4;
    border-bottom: 1px solid var(--border-strong);
    user-select: none;
}

table.data tbody tr:hover { background: var(--surface-hover); }
table.data tbody tr:last-child td { border-bottom: none; }

th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
/* Arrow ta sob sortable header e halka kore dekhai — na hole ei column gulo
   je click kora jay sheta keu bujhbe na. Sort kora column e ta gaaro hoy. */
th.sortable::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-left: var(--s-1);
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .3;
}
th.sortable:hover::after { opacity: .7; }
th[aria-sort="ascending"]::after {
    opacity: 1;
    border-top: 0;
    border-bottom: 5px solid currentColor;
}
th[aria-sort="descending"]::after { opacity: 1; }
th[aria-sort]:not([aria-sort="none"]) { color: var(--text); }

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
td.num { font-weight: 500; }
td.num.zero { color: var(--text-faint); font-weight: 400; }

.site-cell { max-width: 300px; white-space: normal; }
.site-cell__name { font-weight: 500; color: var(--text); }
.site-cell__url  { font-size: var(--t-xs); color: var(--text-faint); }

/* ---------- badge ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 2px var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
    font-weight: 500;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
}

.badge--ok    { color: var(--ok-fg);    background: var(--ok-bg); }
.badge--ok::before    { background: var(--ok-dot); }
.badge--low   { color: var(--low-fg);   background: var(--low-bg); }
.badge--low::before   { background: var(--low-dot); }
.badge--empty { color: var(--empty-fg); background: var(--empty-bg); }
.badge--empty::before { background: var(--empty-dot); }
.badge--error { color: var(--error-fg); background: var(--error-bg); }
/* Error e goltar bodole borgo — rong chhara-o alada kore chena jay. */
.badge--error::before { background: var(--error-dot); border-radius: 1px; }
.badge--never { color: var(--never-fg); background: var(--never-bg); }
.badge--never::before { background: var(--never-dot); border-radius: 1px; }

.tag {
    display: inline-block;
    padding: 1px var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: 1.7;
}

/* ---------- runway bar ---------- */

.runway { display: flex; align-items: center; gap: var(--s-2); }
.runway__days { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 46px; text-align: right; }
.runway__track {
    width: 56px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    flex: none;
}
.runway__fill { height: 100%; border-radius: 2px; }
.runway--ok    .runway__fill { background: var(--ok-dot); }
.runway--low   .runway__fill { background: var(--low-dot); }
.runway--empty .runway__fill { background: var(--empty-dot); }

/* ---------- states ---------- */

.empty-state {
    padding: var(--s-8) var(--s-6);
    text-align: center;
    color: var(--text-muted);
}
.empty-state h3 { font-size: var(--t-base); color: var(--text); margin: 0 0 var(--s-2); }
.empty-state p  { margin: 0 auto; max-width: 52ch; }

.flash {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
    font-size: var(--t-sm);
    border: 1px solid;
}
.flash--info    { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.flash--success { background: var(--ok-bg);    border-color: var(--ok-dot);    color: var(--ok-fg); }
.flash--error   { background: var(--error-bg); border-color: var(--error-dot); color: var(--error-fg); }

.err-text {
    color: var(--error-fg);
    font-size: var(--t-xs);
    white-space: normal;
    max-width: 340px;
    display: block;
}

/* ---------- login ---------- */

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-6);
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
.login-card h1 { font-size: var(--t-lg); margin: 0 0 var(--s-1); letter-spacing: -0.01em; }
.login-card p.sub { font-size: var(--t-xs); color: var(--text-muted); margin: 0 0 var(--s-6); }
.login-card label { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--text-muted);
                    text-transform: var(--label-transform); letter-spacing: var(--label-tracking);
                    margin-bottom: var(--s-1); }
.login-card input { width: 100%; margin-bottom: var(--s-4); }
.login-card .btn  { width: 100%; }

/* ---------- site detail ---------- */

.split { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .split { grid-template-columns: 2fr 1fr; } }

/* Settings er duita panel e prai somaan field ache, tai ekhane 2fr/1fr na. */
.split--even { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .split--even { grid-template-columns: 1fr 1fr; } }

/* Form er bhitorer chhoto grid gulo — jayga na thakle nije nije neme jabe.
   200px minimum, karon ei row gulo te purno email address bose ar oita
   kete gele kaje lage na. */
.field-row {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.panel__head {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
}
.panel__body { padding: var(--s-4); }

/* Chhoto table (site detail, users) — inner scroll lagbe na, sudhu prosthe. */
.table-scroll--auto {
    max-height: none;
    min-height: 0;
    /* `.table-scroll` er `contain` ekhane thakle scroll atke jeto: table tar
       bhitore uporey-niche jaoar jayga nei, othocho `contain` page ke-o norte
       dey na. Tai kebol prosthe atkabo, uporey-niche page-i chalbe. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-word; }

.spark { width: 100%; height: 120px; display: block; }
.spark__grid  { stroke: var(--border); stroke-width: 1; }
.spark__line  { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__label { fill: var(--text-faint); font-size: 10px; }

.legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--text-muted); margin-top: var(--s-2); }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: var(--s-1); vertical-align: middle; }

/* ---------- health fact ---------- */

/* Chhoto chhoto totho — tile er cheye halka, karon egulo headline na,
   pasher totho. Grid auto-fit, tai jayga onujayi nije sajay. */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
}

.fact__label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
    margin-bottom: var(--s-1);
}
.fact__value { font-size: var(--t-sm); font-weight: 500; line-height: 1.4; }
.fact__note  { font-size: var(--t-xs); color: var(--text-faint); margin-top: 2px; }

/* Security er faak gulo — protita ek line, rong er sathe lekha-o thake. */
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.issues li {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
    font-size: var(--t-sm);
    line-height: 1.5;
}
.issues li::before {
    content: "";
    width: 8px; height: 8px; border-radius: 2px;
    margin-top: 6px; flex: none;
}
.issues li[data-tone="bad"]::before  { background: var(--error-dot); }
.issues li[data-tone="warn"]::before { background: var(--low-dot); }
.issues li[data-tone="ok"]::before   { background: var(--ok-dot); }

.section-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-3);
    flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-base); font-weight: 700; margin: 0; }
.section-head span { font-size: var(--t-xs); color: var(--text-muted); }

/* ---------- gutano panel ---------- */

/* Boro talika gulo gutano thake. Puro summary tai click kora jay — chhoto
   tirchinho khujte hoy na. */
.panel--fold > summary { cursor: pointer; }
.panel--fold > summary::-webkit-details-marker { display: none; }
.panel--fold > summary::marker { content: ''; }

.panel__head--fold {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    user-select: none;
    border-bottom: 0;
}
.panel--fold[open] > .panel__head--fold { border-bottom: 1px solid var(--border); }
.panel__head--fold:hover { background: var(--surface-hover); }
.panel__head--fold:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Tirchinho — khola thakle niche ghore. */
.panel__head--fold::before {
    content: "";
    width: 0; height: 0;
    flex: none;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 150ms cubic-bezier(.2, 0, 0, 1);
}
.panel--fold[open] > .panel__head--fold::before { transform: rotate(90deg); }

/* Koyta ache — gutano obosthatei bojha jay, tai kholar dorkar ache kina
   sheta na khule-i bojha jay. */
.foldcount {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}

/* Shongkha na jana thakle halka — "0" ar "jani na" ek dekhale bhul bojhato. */
.foldcount--none { color: var(--text-faint); font-weight: 400; }

/* ---------- sync progress ---------- */

/* Sync cholakalin uporer banner. Bar ta asol progress dekhay — "kichu ekta
   hocche" bojhanor jonno ghurte thaka animation na. */
.syncbar {
    position: sticky;
    top: 52px;
    z-index: 25;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--r-lg);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
}

.syncbar__row {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-2);
}
.syncbar__title { font-weight: 500; }
.syncbar__count { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.syncbar__site  { color: var(--text-faint); font-size: var(--t-xs); margin-left: auto; }

.syncbar__track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.syncbar__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 3px;
    transition: width 300ms cubic-bezier(.2, 0, 0, 1);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .page { padding: var(--s-3); }
    .topbar { padding: 0 var(--s-3); gap: var(--s-2); }
    .topbar__who { display: none; }
    /* Ghono table phone e horizontal scroll e jabe, prothom column atke thakbe. */
    table.data th:first-child, table.data td:first-child {
        position: sticky; left: 0; z-index: 5;
        background: var(--surface);
    }
    table.data thead th:first-child { background: var(--surface-sunken); z-index: 15; }
    table.data tbody tr:hover td:first-child { background: var(--surface-hover); }
    .site-cell { max-width: 190px; }
}

@media (max-width: 520px) {
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .search { min-width: 0; flex: 1; }
    .toolbar > * { flex-grow: 1; }
}

/* Angul diye chalale target boro hote hobe (44px). Mouse e ghono-i thakbe —
   tai (pointer: coarse) e alada, sob jaygay boro kore density nosto korchi na. */
@media (pointer: coarse) {
    .btn, .btn--sm {
        min-height: 44px;
        padding-left: var(--s-3);
        padding-right: var(--s-3);
    }
    input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }
    table.data th, table.data td {
        padding-top: var(--s-3);
        padding-bottom: var(--s-3);
    }
    .topbar__link { line-height: 40px; }
}

/* ---------- print / motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.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;
}

/* Runway er "d" / "দিন" — songkha ta i mul, unit ta halka. */
.runway__unit { color: var(--text-muted); font-weight: 400; }
html[lang="bn"] .runway__days { min-width: 68px; }


/* Table er ghore ekta checkbox + lekha — click target ta puro line tai. */
.checkline {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    font-size: var(--t-sm);
    user-select: none;
}
.checkline input { cursor: pointer; }

@media (pointer: coarse) {
    .checkline { min-height: 44px; }
}