/* ============================================================
   app.css — minimalist black & white component library
   Tokens first, then one low-specificity class per component.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
    /* Ink & paper — the whole palette is two values and two greys */
    --ink:          #111111;   /* near-black: text, borders, fills   */
    --ink-soft:     #595959;   /* muted text, captions               */
    --paper:        #ffffff;   /* page + surfaces                    */
    --paper-soft:   #f5f5f4;   /* subtle fills, hover wash           */
    --line:         #e4e4e3;   /* hairline borders                   */

    /* Type */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono",
    Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.125rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.75rem;

    /* Spacing scale */
    --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;    --s7: 3rem;     --s8: 4rem;

    /* Shape & motion */
    --radius:     0.375rem;
    --radius-sm:  0.25rem;
    --transition: 0.15s ease;
    --container:  64rem;
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    text-size-adjust: 100%;          /* standard */
    -webkit-text-size-adjust: 100%;  /* iOS Safari; Firefox ignores this line (the harmless console warning) */
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Visible keyboard focus everywhere — accessibility floor */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ---- Layout helpers --------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.stack > * + * { margin-top: var(--s4); }      /* vertical rhythm */
.stack-lg > * + * { margin-top: var(--s6); }

/* ---- Signature: the mono eyebrow -------------------------- */
/* A small uppercase monospace label — the one recurring motif. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---- Typography utilities --------------------------------- */
.title    { font-size: var(--text-2xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.subtitle { font-size: var(--text-lg);  font-weight: 500; }
.muted    { color: var(--ink-soft); }
.lead     { font-size: var(--text-lg); color: var(--ink-soft); }

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary: black fill that inverts to outline on hover */
.btn--primary            { background: var(--ink); color: var(--paper); }
.btn--primary:hover:not(:disabled)   { background: var(--paper); color: var(--ink); }

/* Secondary: outline that fills on hover */
.btn--secondary:hover:not(:disabled) { background: var(--ink); color: var(--paper); }

/* Ghost: no chrome until hover */
.btn--ghost            { border-color: transparent; }
.btn--ghost:hover:not(:disabled)     { background: var(--paper-soft); }

/* Sizes */
.btn--sm    { padding: var(--s1) var(--s3); font-size: var(--text-xs); }
.btn--lg    { padding: var(--s3) var(--s6); font-size: var(--text-base); }
.btn--block { display: flex; width: 100%; }

/* ============================================================
   CARD
   ============================================================ */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}
.card__body   { padding: var(--s5); }
.card__title  { font-size: var(--text-lg); font-weight: 600; }
.card__text   { color: var(--ink-soft); margin-top: var(--s2); }
.card__footer {
    padding: var(--s3) var(--s5);
    border-top: 1px solid var(--line);
    background: var(--paper-soft);
    display: flex;
    gap: var(--s2);
    justify-content: flex-end;
}
.card--flat   { box-shadow: none; }
.card--hover  { transition: border-color var(--transition); }
.card--hover:hover { border-color: var(--ink); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}
.navbar__brand {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: var(--text-base);
}
.navbar__links {
    display: flex;
    align-items: center;
    gap: var(--s5);
    list-style: none;
    padding: 0;
}
.navbar__link {
    position: relative;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    padding-block: var(--s1);
    transition: color var(--transition);
}
.navbar__link:hover,
.navbar__link[aria-current="page"] { color: var(--ink); }
/* Underline that grows from the left on hover / active */
.navbar__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.navbar__link:hover::after,
.navbar__link[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================
   FORM & FIELDS
   ============================================================ */
.form { max-width: 28rem; }
.form > * + * { margin-top: var(--s4); }

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field__label { font-size: var(--text-sm); font-weight: 500; }
.field__label .req { color: var(--ink); margin-left: 2px; }
.field__hint  { font-size: var(--text-xs); color: var(--ink-soft); }
.field__error { font-size: var(--text-xs); color: var(--ink); font-weight: 500; }

/* Inputs, textareas, selects share one look */
.input, .textarea, .select {
    width: 100%;
    padding: var(--s2) var(--s3);
    font-size: var(--text-sm);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}
.input::placeholder, .textarea::placeholder { color: #9b9b9b; }
.input:hover, .textarea:hover, .select:hover { border-color: #c9c9c8; }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--ink);
}
.textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23111' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s3) center;
    padding-right: var(--s6);
}

/* Error state — darkens the border, no colour needed */
.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--ink); }

/* iOS Safari zooms the page when a focused control is under 16px.
   On touch devices, lift the controls to 16px so the zoom never triggers.
   (.input--code is already larger, so it's excluded and stays put.) */
@media (pointer: coarse) {
    .input:not(.input--code),
    .textarea,
    .select { font-size: 16px; }
}

/* ============================================================
   LIST
   ============================================================ */
.list {
    list-style: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
}
.list__item + .list__item { border-top: 1px solid var(--line); }
.list--hover .list__item { transition: background var(--transition); }
.list--hover .list__item:hover { background: var(--paper-soft); }
.list__main  { min-width: 0; }
.list__title { font-weight: 500; }
.list__sub   { font-size: var(--text-sm); color: var(--ink-soft); }
.list__aside { flex-shrink: 0; color: var(--ink-soft); font-size: var(--text-sm); }

/* Plain list with leading markers, for prose-style lists */
.list-bare { list-style: none; padding: 0; }
.list-bare li { position: relative; padding-left: var(--s4); }
.list-bare li + li { margin-top: var(--s2); }
.list-bare li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-soft);
}

/* ============================================================
   BADGE
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--s2);
    border: 1px solid var(--ink);
    border-radius: 999px;
    line-height: 1.4;
}
.badge--solid   { background: var(--ink); color: var(--paper); }
.badge--muted   { border-color: var(--line); color: var(--ink-soft); }

/* ============================================================
   ALERT
   ============================================================ */
.alert {
    display: flex;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--paper);
}
.alert__body  { display: flex; flex-direction: column; gap: 2px; }
.alert__title { font-weight: 600; font-size: var(--text-sm); }
.alert__text  { font-size: var(--text-sm); color: var(--ink-soft); }
.alert--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.alert--solid .alert__text { color: #cfcfcf; }
.alert--muted { border-left-color: var(--line); }

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--s5);
}
.auth__inner { width: 100%; max-width: 22rem; }
.auth__brand {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: var(--s5);
}
.auth .form { max-width: none; }          /* fill the card */
.auth .btn--block + .btn--block { margin-top: var(--s2); }

.legal {
    margin-top: var(--s4);
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--ink-soft);
}
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* OTP code entry: one input, JS-free — big, centred, spaced, monospace */
.input--code {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    letter-spacing: 0.5em;
    text-indent: 0.5em;        /* balance the trailing letter-spacing */
    padding-block: var(--s3);
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap {
    width: 100%;
    overflow-x: auto;                 /* scrolls on narrow screens */
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table caption {
    caption-side: top;
    text-align: left;
    padding: var(--s4) var(--s4) var(--s3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.table th {
    text-align: left;
    padding: var(--s2) var(--s4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.table tbody tr:first-child td { border-top: none; }
.table tbody tr:hover { background: var(--paper-soft); }
.table .cell-action { text-align: right; white-space: nowrap; }
.table .cell-empty { text-align: center; color: var(--ink-soft); padding: var(--s5); }

/* Inline text link (underlined, unlike nav/brand links) */
.link {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--line);
    transition: text-decoration-color var(--transition);
}
.link:hover { text-decoration-color: var(--ink); }

/* ============================================================
   NOTIFICATION BELL
   ============================================================ */
.notif {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 1;
    border-radius: var(--radius);
    transition: background var(--transition);
}
.notif:hover { background: var(--paper-soft); }
.notif__icon { transform-origin: top center; }
/* a soft single swing on hover — pivots from the top like a real bell */
.notif:hover .notif__icon { animation: bell-swing 0.6s ease; }
@keyframes bell-swing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(11deg); }
    45% { transform: rotate(-8deg); }
    70% { transform: rotate(4deg); }
    88% { transform: rotate(-2deg); }
}
.notif__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--paper);
    background: var(--ink);
    border: 2px solid var(--paper);
    border-radius: 999px;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--s7); }
.site-footer__inner { display: flex; justify-content: flex-end; padding-block: var(--s4); }

/* ============================================================
   CHOICE — selectable radio cards (pure CSS, no JS)
   ============================================================ */
.choice-group { display: flex; flex-direction: column; gap: var(--s2); }

.choice { display: block; cursor: pointer; }
/* the real radio is hidden but still focusable + accessible */
.choice__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice__box {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--transition), background var(--transition);
}
.choice:hover .choice__box { border-color: #c9c9c8; }
.choice__input:checked + .choice__box { border-color: var(--ink); }
.choice__input:focus-visible + .choice__box { outline: 2px solid var(--ink); outline-offset: 2px; }

/* custom radio dot */
.choice__radio {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    position: relative;
    transition: border-color var(--transition);
}
.choice__input:checked + .choice__box .choice__radio { border-color: var(--ink); }
.choice__input:checked + .choice__box .choice__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--ink);
    border-radius: 999px;
}
.choice__main  { display: flex; flex-direction: column; }
.choice__title { font-weight: 500; }
.choice__desc  { font-size: var(--text-sm); color: var(--ink-soft); }

/* ============================================================
   DETAIL ROWS (key / value pairs inside cards)
   ============================================================ */
.detail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    padding: var(--s2) 0;
}
.detail + .detail { border-top: 1px solid var(--line); }
.detail__key { color: var(--ink-soft); font-size: var(--text-sm); }
.detail__val { font-weight: 500; text-align: right; }

.address { font-style: normal; line-height: 1.6; }

/* Responsive grid of cards */
.card-grid {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* A row of buttons that wraps on small screens */
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ============================================================
   NOTIFICATIONS LIST
   ============================================================ */
.notif-item + .notif-item { border-top: 1px solid var(--line); }
.notif-item__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    color: var(--ink);
    transition: background var(--transition);
}
.notif-item__link:hover { background: var(--paper-soft); }

/* unread = filled dot + bold title; read = empty slot keeps alignment */
.notif-item__dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: transparent;
}
.notif-item.is-unread .notif-item__dot   { background: var(--ink); }
.notif-item__title { flex: 1; min-width: 0; }
.notif-item.is-unread .notif-item__title { font-weight: 600; }

.notif-item__chevron {
    flex-shrink: 0;
    color: var(--ink-soft);
    transition: transform var(--transition);
}
.notif-item__link:hover .notif-item__chevron { transform: translateX(3px); }

.notif-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-soft); }

/* ============================================================
   FIELDSET (form section) + CHECKBOX
   ============================================================ */
.form--wide { max-width: none; }

.fieldset {
    min-width: 0;                       /* lets it shrink inside flex/grid */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s5);
}
/* legend sits in the top border as a small mono label (the eyebrow motif) */
.fieldset__legend {
    padding: 0 var(--s2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.fieldset__body { display: flex; flex-direction: column; gap: var(--s4); }
.fieldset__body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--s3);
}

.check { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.check__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--ink-soft);
    border-radius: var(--radius-sm);
    position: relative;
    transition: border-color var(--transition), background var(--transition);
}
.check__input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check__input:checked + .check__box::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check__input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.check__label { font-size: var(--text-sm); }

/* ============================================================
   TABLE EXTRAS
   ============================================================ */

/* Total / summary row in tfoot */
.table tfoot tr { border-top: 2px solid var(--ink); }
.table tfoot td {
    padding: var(--s3) var(--s4);
    font-weight: 600;
}

/* Right-aligned monospace cell for amounts */
.cell-num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
}
th.cell-num { text-align: right; }

/* ============================================================
   INVOICE STATUS BANNER
   ============================================================ */
.status-banner {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.status-banner--paid   { background: var(--ink); color: var(--paper); }
.status-banner--unpaid { background: var(--paper-soft); }
.status-banner__icon   { line-height: 1; flex-shrink: 0; }
.status-banner__body   { display: flex; flex-direction: column; gap: 2px; }
.status-banner__title  { font-weight: 600; font-size: var(--text-sm); }
.status-banner__sub    { font-size: var(--text-xs); opacity: 0.7; }

/* ---- Motion preference ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}