/* ============================================================
   ACCOUNT - #signin and #account views
   ------------------------------------------------------------
   Consumes design tokens from main.css only. No hardcoded
   colors, no gradients, no glow shadows, no hover lifts.
   ============================================================ */

.acct-card {
    max-width: 640px;
    margin: 48px auto 96px;
    padding: 0 24px;
}

.acct-kicker {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 12px;
}

.acct-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    word-break: break-word;
}

.acct-h2 {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 40px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
}

.acct-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-dim);
    margin: 0 0 20px;
}

.acct-email {
    font-family: var(--mono);
    color: var(--ink);
}

/* ---------- META STRIP ---------- */
.acct-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    padding: 16px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 8px;
}
.acct-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}
.acct-meta-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.acct-meta-value {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
}

/* ---------- FORM ---------- */
.acct-form {
    margin: 0 0 16px;
}
.acct-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.acct-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 8px;
}
.acct-input {
    width: 100%;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.acct-form-inline .acct-input {
    width: auto;
    flex: 1 1 240px;
    margin-bottom: 0;
}
.acct-input::placeholder { color: var(--ink-dim); opacity: 0.7; }
.acct-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-raised);
}

/* ---------- BUTTONS ---------- */
.acct-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 4px;
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.acct-btn + .acct-btn { margin-left: 10px; }

.acct-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}
.acct-btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

.acct-btn-ghost {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--ink);
}
.acct-btn-ghost:hover { border-color: var(--accent); background: var(--surface-raised); }

.acct-btn-danger {
    background: transparent;
    border-color: var(--red);
    color: var(--red);
}
.acct-btn-danger:hover { background: var(--red); color: var(--bg); }

.acct-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- STATUS MESSAGES ---------- */
.acct-status {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-dim);
    margin: 12px 0 0;
    min-height: 1px;
}
.acct-status-ok  { color: var(--green); }
.acct-status-err { color: var(--red); }

/* ---------- NOTE PANEL ---------- */
.acct-note {
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--surface);
    padding: 18px 20px;
    margin-top: 32px;
}
.acct-note p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0 0 10px;
}
.acct-note p:last-child { margin-bottom: 0; }
.acct-note strong { color: var(--ink); font-weight: 600; }
.acct-note a { color: var(--accent); text-decoration: none; }
.acct-note a:hover { color: var(--accent-bright); text-decoration: underline; }

/* ---------- SHORTLIST ---------- */
.acct-shortlist {
    font-size: 14px;
    color: var(--ink-dim);
    margin-bottom: 24px;
}
.acct-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
}
.acct-row-name {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    flex: 1 1 auto;
}
.acct-row-name:hover { color: var(--accent-bright); }
.acct-row-date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
}
.acct-row-note {
    flex: 1 0 100%;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-dim);
}
.acct-empty { font-size: 14px; color: var(--ink-dim); }
.acct-empty a { color: var(--accent); text-decoration: none; }
.acct-empty a:hover { color: var(--accent-bright); }

.acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.acct-actions .acct-btn + .acct-btn { margin-left: 0; }

/* ---------- DANGER ZONE ---------- */
.acct-danger {
    margin-top: 40px;
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--red);
    border-radius: 0 4px 4px 0;
    background: var(--surface);
    padding: 4px 22px 22px;
}
.acct-danger .acct-h2 {
    border-top: none;
    padding-top: 18px;
    margin-top: 0;
}
.acct-danger p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0 0 16px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
    .acct-card { margin-top: 32px; }
    .acct-btn { display: block; width: 100%; text-align: center; }
    .acct-btn + .acct-btn { margin-left: 0; margin-top: 10px; }
    .acct-actions { flex-direction: column; }
    .acct-form-inline { flex-direction: column; align-items: stretch; }
    .acct-form-inline .acct-input { flex: 1 1 auto; }
}

/* ============================================================
   ACTIVITY HUB
   The account page answers "what have I actually done here".
   Follows, pipeline outcomes and submissions each live in their
   own feature and their own table, so this is the only view that
   puts them side by side. Same tokens as everything above: no
   hardcoded colors, no gradients, no glow, no hover lifts.
   ============================================================ */

/* The hub carries five sections of tabular data. The 640px column
   that suits a sign-in form is too tight for it, so the account
   card widens - and only the account card, which is why this is a
   modifier rather than a change to .acct-card itself. */
.acct-card.is-hub { max-width: 860px; }

/* ---------- STAT STRIP ---------- */
.acct-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.acct-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--surface);
}
.acct-stat-num {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
}
.acct-stat-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* ---------- SECTIONS ---------- */
.acct-hub { margin-top: 8px; }

.acct-sec {
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}
.acct-sec:last-child { border-bottom: none; }

.acct-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.acct-sec-title {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.acct-sec-link {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
    white-space: nowrap;
}
.acct-sec-link:hover { color: var(--accent-bright); }

.acct-mini {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
}

/* ---------- PIPELINE LADDER ---------- */
.acct-stages {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.acct-stage { display: flex; flex-direction: column; gap: 7px; }

/* An empty stage still renders, because "nothing at this step" is
   a real answer about a pipeline. It just recedes. */
.acct-stage.is-zero { opacity: 0.55; }

.acct-stage-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.acct-stage-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.acct-stage-count {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
}
.acct-stage-track {
    height: 3px;
    background: var(--hairline);
    border-radius: 2px;
    overflow: hidden;
}
.acct-stage-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    min-width: 0;
}

/* ---------- CHIPS ---------- */
.acct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* min-width:0 on the flex parent, because a long firm name in a
       grid or flex child otherwise refuses to shrink below its
       content width and pushes the card sideways on a phone. */
    min-width: 0;
}
.acct-chips-block { gap: 8px; }

.acct-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: 4px 9px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease, color 0.2s ease;
}
a.acct-chip:hover { border-color: var(--accent); color: var(--accent-bright); }

/* A firm that has left the board keeps its row but loses its link. */
.acct-chip.is-gone, .acct-row-name.is-gone, .acct-chip-name.is-gone {
    color: var(--ink-dim);
    cursor: default;
    font-style: italic;
}
.acct-chip.is-muted { opacity: 0.6; }

.acct-chip-follow { padding-right: 4px; }
.acct-chip-name { color: inherit; text-decoration: none; }
a.acct-chip-name:hover { color: var(--accent-bright); }

.acct-chip-x {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1;
    color: var(--ink-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 2px;
    transition: color 0.2s ease, background 0.2s ease;
}
.acct-chip-x:hover { color: var(--red); background: var(--surface-raised); }
.acct-chip-x:disabled { opacity: 0.4; cursor: default; }

.acct-passed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

/* ---------- PILLS (alert settings) ---------- */
.acct-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.acct-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: 7px 11px;
}
.acct-pill-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.acct-pill-value {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
}

/* ---------- SUBMISSIONS ---------- */
.acct-sub-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--hairline);
}
.acct-sub-kind {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    flex: 0 0 auto;
}
.acct-sub-field {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-dim);
}
.acct-sub-status {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
    border: 1px solid var(--hairline);
    border-radius: 2px;
    padding: 2px 7px;
}
/* Status comes from the database, so style by value and let anything
   unrecognised fall through to the neutral default above. */
.acct-sub-status[data-status="approved"],
.acct-sub-status[data-status="verified"] { color: var(--green); border-color: var(--green); }
.acct-sub-status[data-status="rejected"] { color: var(--red); border-color: var(--red); }

.acct-sub-note { display: block; margin-top: 14px; line-height: 1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
    .acct-stats { grid-template-columns: repeat(2, 1fr); }
    .acct-sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .acct-sub-row { gap: 8px; }
    /* The date is the least useful column on a phone and it is the
       one that forces a third line, so it goes rather than wraps. */
    .acct-sub-row .acct-row-date { flex: 1 0 100%; }
}