/* Abhijna — CBS (DK-97). The standalone identification app at /abhijna.
 *
 * Tokens only (tokens.css): no colour, radius or type size is invented here.
 * Mobile first, 16px gutters, no horizontal scroll at any width. The few
 * app-* classes that dock-profile-totp.js and cbs-screen.js write are styled
 * here too, because this page does not load the Dock shell's stylesheet.
 */

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

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

body.abhijna-app {
    margin: 0;
    background: var(--cbs-surface);
    color: var(--cbs-ink);
    font-family: var(--cbs-font);
    font-size: var(--cbs-text-base);
    line-height: var(--cbs-leading);
    overflow-x: hidden;
}

.abhijna-app__main {
    max-width: var(--cbs-container-narrow);
    margin: 0 auto;
    padding: 16px 16px 32px;
    min-width: 0;
}

.abhijna-app a { color: var(--cbs-teal); }
.abhijna-app h1,
.abhijna-app h2,
.abhijna-app h3 { line-height: var(--cbs-leading-tight); margin: 0 0 0.5rem; }
.abhijna-app h2 { font-size: var(--cbs-text-lg); color: var(--cbs-navy); }
.abhijna-app h3 { font-size: var(--cbs-text-md); }

.abhijna-app__sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Header ------------------------------------------------------- */

.abhijna-app__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cbs-line);
}
.abhijna-app__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.abhijna-app__mark { border-radius: var(--cbs-radius-sm); flex: none; }
.abhijna-app__title { font-size: var(--cbs-text-xl); color: var(--cbs-navy); margin: 0; }
.abhijna-app__strap { margin: 0; font-size: var(--cbs-text-sm); color: var(--cbs-ink-muted); }
.abhijna-app__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.abhijna-app__locale {
    font: inherit;
    font-size: var(--cbs-text-sm);
    padding: 6px 8px;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    max-width: 100%;
}

.abhijna-app__who { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abhijna-app__chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.abhijna-app__avatar {
    width: 32px; height: 32px;
    border-radius: var(--cbs-radius-pill);
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--cbs-weight-bold);
    flex: none;
}
.abhijna-app__chiptext { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.abhijna-app__chiptext strong { font-size: var(--cbs-text-sm); overflow-wrap: anywhere; }
.abhijna-app__chiptext span { font-size: var(--cbs-text-xs); color: var(--cbs-ink-faint); text-transform: capitalize; }

.abhijna-app__state,
.abhijna-app__help {
    margin: 12px 0 0;
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-muted);
}
.abhijna-app__help ol { margin: 4px 0 0; padding-left: 1.25rem; }

/* ---- Buttons and inputs -------------------------------------------- */

.abhijna-app__btn,
.app-btn {
    font: inherit;
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-semi);
    padding: 8px 14px;
    min-height: 40px;
    border-radius: var(--cbs-radius-sm);
    border: 1px solid var(--cbs-line);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.abhijna-app__btn--primary,
.app-btn--primary {
    background: var(--cbs-navy);
    border-color: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
}
.abhijna-app__btn--primary:hover,
.app-btn--primary:hover { background: var(--cbs-navy-soft); }
.abhijna-app__btn:focus-visible,
.app-btn:focus-visible,
.abhijna-app__tab:focus-visible,
.abhijna-app__input:focus-visible,
.app-input:focus-visible { outline: 2px solid var(--cbs-teal); outline-offset: 2px; }

.abhijna-app__input,
.app-input {
    font: inherit;
    padding: 8px 10px;
    min-height: 40px;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    min-width: 0;
    max-width: 100%;
}
.abhijna-app__input {
    flex: 1 1 12rem;
    font-family: var(--cbs-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Tabs ---------------------------------------------------------- */

.abhijna-app__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 16px 0;
    padding: 4px;
    background: var(--cbs-surface-sunken);
    border-radius: var(--cbs-radius);
}
.abhijna-app__tab {
    font: inherit;
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-medium);
    padding: 8px 4px;
    min-height: 40px;
    border: 0;
    border-radius: var(--cbs-radius-sm);
    background: transparent;
    color: var(--cbs-ink-muted);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.abhijna-app__tab[aria-selected="true"] {
    background: var(--cbs-surface-raised);
    color: var(--cbs-navy);
    box-shadow: var(--cbs-shadow-sm);
}

/* ---- Panels -------------------------------------------------------- */

.abhijna-app__panel {
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    padding: 16px;
    min-width: 0;
}
.abhijna-app__form label { display: block; font-size: var(--cbs-text-sm); margin-bottom: 4px; }
.abhijna-app__row { display: flex; flex-wrap: wrap; gap: 8px; }
.abhijna-app__empty,
.abhijna-app__note { color: var(--cbs-ink-muted); margin: 12px 0 0; }
.abhijna-app__fine { font-size: var(--cbs-text-xs); color: var(--cbs-ink-faint); margin: 16px 0 0; overflow-wrap: anywhere; }

/* The verify answer, coloured by state. */
.abhijna-app__result {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--cbs-radius);
    border: 1px solid var(--cbs-line);
    border-left-width: 6px;
    background: var(--cbs-surface-sunken);
}
.abhijna-app__result[data-state="valid"] {
    border-color: var(--cbs-ok);
    background: var(--cbs-ok-tint);
}
.abhijna-app__result[data-state="expired"],
.abhijna-app__result[data-state="lost"],
.abhijna-app__result[data-state="revoked"] {
    border-color: var(--cbs-alert);
    background: var(--cbs-alert-tint);
}
.abhijna-app__word {
    margin: 0;
    font-size: var(--cbs-text-xl);
    font-weight: var(--cbs-weight-bold);
}
.abhijna-app__result[data-state="valid"] .abhijna-app__word { color: var(--cbs-ok-ink); }
.abhijna-app__result[data-state="expired"] .abhijna-app__word,
.abhijna-app__result[data-state="lost"] .abhijna-app__word,
.abhijna-app__result[data-state="revoked"] .abhijna-app__word { color: var(--cbs-alert-ink); }
.abhijna-app__sentence { margin: 4px 0 0; }
.abhijna-app__facts {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 4px 12px;
    margin: 12px 0 0;
}
.abhijna-app__facts dt { color: var(--cbs-ink-muted); font-size: var(--cbs-text-sm); }
.abhijna-app__facts dd { margin: 0; font-weight: var(--cbs-weight-semi); overflow-wrap: anywhere; }
.abhijna-app__dates { margin: 8px 0 0; font-size: var(--cbs-text-sm); color: var(--cbs-ink-muted); }

/* ---- Authenticator (the DK-35 block) -------------------------------- */

.abhijna-app__card { margin-top: 12px; }
.abhijna-app__cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.app-prose { margin: 8px 0; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.app-field__hint { font-size: var(--cbs-text-xs); color: var(--cbs-ink-faint); }
.app-id { font-family: var(--cbs-font-mono); overflow-wrap: anywhere; }
#totp-box svg { max-width: 100%; height: auto; }
.app-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--cbs-radius-pill);
    font-size: var(--cbs-text-xs);
    font-weight: var(--cbs-weight-semi);
    background: var(--cbs-surface-sunken);
    color: var(--cbs-ink-muted);
}
.app-badge--ok { background: var(--cbs-ok-tint); color: var(--cbs-ok-ink); }
.app-badge--warn { background: var(--cbs-warn-tint); color: var(--cbs-warn-ink); }
.app-badge--error { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }
.app-badge--info { background: var(--cbs-info-tint); color: var(--cbs-info); }
.app-notice {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: var(--cbs-radius-sm);
    font-size: var(--cbs-text-sm);
    background: var(--cbs-info-tint);
}
.app-notice--ok { background: var(--cbs-ok-tint); color: var(--cbs-ok-ink); }
.app-notice--error { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }
.app-notice--warn { background: var(--cbs-warn-tint); color: var(--cbs-warn-ink); }

/* ---- Generator and Reader links -------------------------------------- */

.abhijna-app__links {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.abhijna-app__link {
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    background: var(--cbs-surface-raised);
    min-width: 0;
}
.abhijna-app__link a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    color: var(--cbs-ink);
    text-decoration: none;
}
.abhijna-app__link a[href]:hover { background: var(--cbs-navy-tint); }
.abhijna-app__link a span:last-child { font-size: var(--cbs-text-sm); color: var(--cbs-ink-muted); }
.abhijna-app__code {
    font-family: var(--cbs-font-mono);
    font-size: var(--cbs-text-xs);
    color: var(--cbs-ink-faint);
}
.abhijna-app__link.is-locked { opacity: 0.6; background: var(--cbs-surface-sunken); }
.abhijna-app__link.is-locked a { cursor: not-allowed; }
.abhijna-app__whose {
    display: block;
    padding: 0 12px 12px;
    font-size: var(--cbs-text-xs);
    color: var(--cbs-ink-muted);
}
.abhijna-app__whose[hidden] { display: none; }

/* ---- Footer -------------------------------------------------------- */

.abhijna-app__foot {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--cbs-line);
    font-size: var(--cbs-text-xs);
    color: var(--cbs-ink-faint);
}
.abhijna-app__foot p { margin: 4px 0; }

[hidden] { display: none !important; }

@media (min-width: 640px) {
    .abhijna-app__main { padding: 24px 24px 40px; }
    .abhijna-app__panel { padding: 24px; }
    .abhijna-app__links { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}