/* ==========================================================================
   Theme 3 — the Quick Apps identity chip and its gate

   Styles quickapps::theme3.partials.guest-identity (the chip, in the sidebar's
   footer, where the Login / Dashboard pill stands on every other page) and
   guest-identity-gate (the six-box dialog, at page level).

   Loaded by the gate partial itself, so any Quick App — including one written
   next year — gets these rules by rendering the landing sidebar. Nothing here
   is invoice-shaped.

   Colours are taken from the footer's own --t3f-* tokens where the chip sits
   inside .t3f, with the landing's --t3-* as the fallback everywhere else. The
   chip therefore follows the host it is dropped into, light theme or dark,
   without this file knowing which host that is.
   ========================================================================== */

.t3q {
    --t3q-primary: var(--t3f-primary, var(--t3-primary, #2f6fed));
    --t3q-text: var(--t3f-text, var(--t3-text, #101828));
    --t3q-muted: var(--t3f-muted, var(--t3-text-muted, #667085));
    --t3q-border: var(--t3f-border, var(--t3-border, #e4e7ec));
    --t3q-subtle: var(--t3f-subtle, var(--t3-subtle-bg, #f9fafb));
    --t3q-surface: var(--t3-surface, #fff);
    --t3q-radius: var(--t3f-radius, var(--t3-radius, 10px));

    position: relative;
}

/* --------------------------------------------------------------------------
   The chip
   -------------------------------------------------------------------------- */

.t3q-who {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--t3q-border);
    border-radius: var(--t3q-radius);
    background: var(--t3q-subtle);
    color: var(--t3q-text);
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.t3q-who:hover { border-color: color-mix(in srgb, var(--t3q-primary) 45%, var(--t3q-border)); }

.t3q-who-ic {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--t3q-text) 8%, transparent);
    color: var(--t3q-muted);
    font-size: 12px;
}

/* Verified is the only state that earns colour. Unverified is not an error — it is
   simply the state everybody starts in — so it stays quiet. */
.t3q-who.is-verified .t3q-who-ic {
    background: color-mix(in srgb, #16a34a 16%, transparent);
    color: #16a34a;
}

.t3q-who-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.t3q-who-line {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

/* The address is the point of the chip, and addresses are long. It gets the ellipsis
   rather than the width — a sidebar that widens to fit an email is a sidebar that
   widens to fit anything. */
.t3q-who-sub,
.t3q-who-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t3q-who-sub {
    font-size: 11px;
    color: var(--t3q-muted);
    line-height: 1.3;
}

.t3q-who-caret {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--t3q-muted);
    transition: transform .18s ease;
}

.t3q-who[aria-expanded="true"] .t3q-who-caret { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Its menu — upward, because the chip lives at the bottom of the sidebar
   -------------------------------------------------------------------------- */

.t3q-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    display: none;
    flex-direction: column;
    padding: 5px;
    border: 1px solid var(--t3q-border);
    border-radius: var(--t3q-radius);
    background: var(--t3q-surface);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
}

.t3q-menu.is-open { display: flex; }

.t3q-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t3q-text);
    font-size: 12.5px;
    text-align: start;
    cursor: pointer;
}

.t3q-menu button:hover { background: color-mix(in srgb, var(--t3q-text) 7%, transparent); }
.t3q-menu button i { width: 14px; color: var(--t3q-muted); font-size: 11px; }

/* --------------------------------------------------------------------------
   The gate
   -------------------------------------------------------------------------- */

.t3q-modal {
    --t3q-primary: var(--t3-primary, #2f6fed);
    --t3q-text: var(--t3-text, #101828);
    --t3q-muted: var(--t3-text-muted, #667085);
    --t3q-border: var(--t3-border, #e4e7ec);
    --t3q-subtle: var(--t3-subtle-bg, #f9fafb);
    --t3q-surface: var(--t3-surface, #fff);
    --t3q-radius: var(--t3-radius, 10px);

    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, .55);
}

.t3q-modal.is-open { display: flex; }

.t3q-modal-box {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px;
    border-radius: 16px;
    background: var(--t3q-surface);
    color: var(--t3q-text);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
}

.t3q-modal-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--t3q-primary) 14%, transparent);
    color: var(--t3q-primary);
    font-size: 18px;
}

.t3q-modal-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
}

.t3q-modal-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--t3q-muted);
}

.t3q-field { margin-top: 16px; }

.t3q-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
}

.t3q-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--t3q-border);
    border-radius: var(--t3q-radius);
    background: var(--t3q-surface);
    color: var(--t3q-text);
    font-size: 14px;
}

.t3q-input:focus {
    outline: none;
    border-color: var(--t3q-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3q-primary) 18%, transparent);
}

.t3q-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--t3q-muted);
}

.t3q-hint--bad { color: #dc2626; }
.t3q-hint:empty { display: none; }

/* The six boxes. Sized so a code can be read back at a glance to check it. */
.t3q-code {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 18px 0 4px;
}

.t3q-code-box {
    width: 100%;
    padding: 12px 0;
    border: 1px solid var(--t3q-border);
    border-radius: var(--t3q-radius);
    background: var(--t3q-subtle);
    color: var(--t3q-text);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

.t3q-code-box:focus {
    outline: none;
    border-color: var(--t3q-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3q-primary) 18%, transparent);
}

.t3q-code.is-bad .t3q-code-box { border-color: #dc2626; }

.t3q-code-state {
    min-height: 18px;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--t3q-muted);
}

.t3q-code-state.is-bad { color: #dc2626; }
.t3q-code-state.is-ok { color: #16a34a; }

.t3q-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.t3q-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid var(--t3q-border);
    border-radius: var(--t3q-radius);
    background: var(--t3q-surface);
    color: var(--t3q-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.t3q-btn:hover { background: var(--t3q-subtle); }

.t3q-btn--primary {
    border-color: var(--t3q-primary);
    background: var(--t3q-primary);
    color: #fff;
}

.t3q-btn--primary:hover { background: color-mix(in srgb, var(--t3q-primary) 88%, #000); }
.t3q-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Dark
   -------------------------------------------------------------------------- */

.dark-theme .t3q-menu,
.dark-theme .t3q-modal-box {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.dark-theme .t3q-modal { background: rgba(0, 0, 0, .6); }