/* ============================================================================
   InternSphere public site
   ----------------------------------------------------------------------------
   One stylesheet, no framework, no web font. The mobile Lighthouse target in
   Master Plan section 4.P3 is met by not shipping what usually costs it: this
   file, one 2KB script on /verify, and nothing else crosses the network.

   System fonts everywhere. They render instantly, they are already in memory,
   and on the Android phones this site is actually opened on they look better
   than anything that would have to be downloaded first.
   ========================================================================== */

:root {
    --ink:        #1c2333;
    --ink-soft:   #55607a;
    --ink-faint:  #666e82;
    --line:       #dfe3ec;
    --paper:      #ffffff;
    --paper-alt:  #f6f8fc;
    --brand:      #14315c;
    --brand-tint: #e8eefb;
    --ok:         #10693f;
    --ok-tint:    #e4f4ec;
    --warn:       #8a5a00;
    --warn-tint:  #fdf3de;
    --bad:        #a41f2f;
    --bad-tint:   #fdeaec;
    --wa:         #1a7e45;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(20, 49, 92, .06), 0 4px 14px rgba(20, 49, 92, .05);
}

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

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper-alt);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

a { color: var(--brand); }

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

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

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--brand); color: #fff; padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

/* --- header / footer ----------------------------------------------------- */

.site-header {
    background: var(--brand);
    color: #fff;
}

.header-inner { display: flex; align-items: center; min-height: 4rem; }

.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }

.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}

.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.05rem; letter-spacing: .01em; }
.brand-text small  { font-size: .74rem; opacity: .8; }

.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    background: #101a2c;
    color: #9fabc4;
    font-size: .82rem;
}
.site-footer p { margin: 0; }

/* --- page furniture ------------------------------------------------------ */

main { padding-top: 1.75rem; padding-bottom: 1rem; }

.page-head { margin-bottom: 1.5rem; }

.eyebrow {
    margin: 0 0 .25rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-faint);
}

.lede { color: var(--ink-soft); max-width: 46rem; }

.ok-head  { color: var(--ok); }
.bad-head { color: var(--bad); }

.muted    { color: var(--ink-faint); }
.optional { color: var(--ink-faint); font-weight: 400; }

.footnote { color: var(--ink-faint); font-size: .82rem; }

.empty {
    padding: 2.5rem 1rem; text-align: center;
    background: var(--paper); border: 1px dashed var(--line);
    border-radius: var(--radius); color: var(--ink-soft);
}

.notice {
    padding: .75rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--paper);
    margin: 0 0 1rem;
}
.notice-info  { background: var(--brand-tint); border-color: #c6d5f4; }
.notice-warn  { background: var(--warn-tint);  border-color: #f0dcae; color: var(--warn); }
.notice-error { background: var(--bad-tint);   border-color: #f2c3c8; color: var(--bad); }

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--brand);
    font-size: .84rem; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover  { border-color: var(--brand); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.btn-primary {
    background: var(--brand); color: #fff; border-color: var(--brand);
    padding: .7rem 1.25rem; font-size: .95rem;
}
.btn-wa   { color: var(--wa); border-color: #bfe3cd; }
.btn-call { color: var(--brand); }
.btn-nav  { color: var(--brand); }
.btn-wa-join { background: var(--wa); border-color: var(--wa); }

/* --- city chips ---------------------------------------------------------- */

.chips {
    display: flex; flex-wrap: wrap; gap: .45rem;
    margin: 0 0 1.25rem;
}

.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: .85rem; font-weight: 600;
    text-decoration: none;
}
.chip:hover { border-color: var(--brand); }
.chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.chip-on {
    background: var(--brand); border-color: var(--brand); color: #fff;
}

.chip-count {
    font-size: .74rem; font-weight: 700;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--brand-tint); color: var(--brand);
}
.chip-on .chip-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- the directory ------------------------------------------------------- */

.directory {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.directory th,
.directory td {
    padding: .7rem .85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.directory thead th {
    background: var(--paper-alt);
    font-size: .76rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.directory tbody tr:last-child td { border-bottom: 0; }

.directory .num { text-align: right; }
.directory .addr {
    color: var(--ink-soft); font-size: .9rem; max-width: 24rem;
    /* These addresses are free text and some carry 40-character unbroken runs
       ('S-04,Jeevandeep Arcade,Nr.Asian...'). Without this they refuse to wrap
       and widen their column. */
    overflow-wrap: anywhere;
}

.firm-name { display: block; font-weight: 600; }
.firm-sub  { display: block; font-size: .8rem; color: var(--ink-faint); }

.actions { white-space: nowrap; }
.action-group { display: flex; flex-wrap: wrap; gap: .35rem; }

.stars { display: inline-flex; align-items: baseline; gap: .35rem; color: #8a6508; }
.score-num { color: var(--ink-soft); font-size: .82rem; font-weight: 600; }

/* Below 640px the table becomes a stack of cards. Master Plan section 4.P3:
   "cards <= 640px, table above". Same markup, same reading order - only the
   presentation changes, so nothing is duplicated or hidden from assistive
   technology. */
@media (max-width: 640px) {
    .directory,
    .directory thead,
    .directory tbody,
    .directory tr,
    .directory td { display: block; width: 100%; }

    .directory { border: 0; background: none; box-shadow: none; overflow: visible; }

    .directory thead { position: absolute; left: -9999px; }

    .directory tr {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: .85rem;
        padding: .35rem .15rem;
    }

    .directory td {
        border-bottom: 0;
        padding: .32rem .9rem;
        display: grid;
        /* minmax(0, 1fr), not 1fr. A grid track's default minimum is its
           content's width, so a long unbroken address pushes the card - and
           with it the whole page - wider than the phone, and the visitor gets a
           horizontally scrolling site. minmax(0, ...) lets the track shrink. */
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: .5rem;
        text-align: left;
    }

    .directory td::before {
        content: attr(data-label);
        font-size: .74rem; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase;
        color: var(--ink-faint);
        padding-top: .15rem;
    }

    .directory td.num { text-align: left; }
    .directory .addr  { max-width: none; }

    .actions { padding-top: .55rem; padding-bottom: .55rem; white-space: normal; }
    .actions::before { padding-top: .5rem; }

    /* Buttons size to their text rather than stretching across the card. */
    .action-group { justify-content: flex-start; }
    .action-group .btn { flex: 0 0 auto; }
}

/* --- forms --------------------------------------------------------------- */

.form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    max-width: 34rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    font-weight: 600; font-size: .9rem;
    margin-bottom: .3rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    font-size: 1rem;              /* 16px stops iOS zooming the page on focus */
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 3px solid var(--brand-tint);
    border-color: var(--brand);
}

.field-hint  { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .3rem; }
.field-error { display: block; font-size: .84rem; color: var(--bad); margin-top: .3rem; }

.batch-card {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
}
.batch-card dt { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.batch-card dd { margin: .1rem 0 0; font-weight: 600; }

.steps { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.steps li { margin-bottom: .4rem; }

.panel-wa { border-left: 4px solid var(--wa); }

.qr { margin: 1.25rem 0 0; }
.qr img { display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.qr figcaption { font-size: .82rem; color: var(--ink-faint); margin-top: .4rem; }

/* --- verification -------------------------------------------------------- */

.status {
    display: inline-block;
    margin-left: .5rem;
    padding: .12rem .6rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    background: var(--paper-alt); color: var(--ink-soft);
    border: 1px solid var(--line);
    vertical-align: middle;
}
.status-completed           { background: var(--ok-tint);   color: var(--ok);   border-color: #b9e0cb; }
.status-ongoing             { background: var(--brand-tint); color: var(--brand); border-color: #c6d5f4; }
.status-mutual-termination  { background: var(--warn-tint); color: var(--warn); border-color: #f0dcae; }
.status-hostile-termination { background: var(--bad-tint);  color: var(--bad);  border-color: #f2c3c8; }

.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; }
.detail dt { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.detail dd { margin: .15rem 0 0; }

.grade {
    display: inline-block; margin-left: .5rem;
    padding: .1rem .55rem; border-radius: 999px;
    background: var(--ok-tint); color: var(--ok);
    font-size: .8rem; font-weight: 700;
}

.chart-row {
    display: grid;
    grid-template-columns: minmax(15rem, 20rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.chart-holder { position: relative; }
.chart-holder canvas { max-width: 100%; height: auto; }

.area-table { width: 100%; border-collapse: collapse; }
.area-table th, .area-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.area-table thead th { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.area-table .num { text-align: right; }
.area-table tfoot th, .area-table tfoot td { border-bottom: 0; border-top: 2px solid var(--line); }

@media (max-width: 640px) {
    h1 { font-size: 1.45rem; }
    .chart-row { grid-template-columns: 1fr; }
    .batch-card { gap: 1rem; }
}