/* ============================================================================
   v0.8.2.0 - in-app bug report: the topbar chip and the dialog it opens.

   Mobile first, because the owner directive makes the 375px viewport
   verification priority number 1: the base rules here ARE the phone layout and
   the media query only widens it. Every colour resolves through the tokens in
   00-tokens-base.css, so the dark theme (24-theme-dark.css, loaded last) needs
   no per-rule override here.

   DELIBERATELY SMALL. The dialog is built from the house chrome - .modal-card,
   .modal-head, .modal-section, .modal-textarea, .chronos-select, .modal-actions
   and button.primary, the same set the create-task and filter dialogs use - so
   this file only carries what has no house equivalent: the topbar chip, the
   character counter, the error strip and the sent state. Any rule added here
   that a house class already covers is a bug, not a style.
   ============================================================================ */

/* ---------- topbar entry point ----------
   Nothing here: the trigger IS a section of the board's nav strip, styled entirely
   by .topnav-seg in 31-topnav.css. The .bug-topbar-link marker class stays on the
   element purely so this feature is greppable from the markup.                   */

/* ---------- dialog ---------- */

/* The form is a select plus a textarea, which needs a little more room than the
   520px house default but less than .modal-card-wide's 640. */
.bug-card { max-width: 560px; }

.bug-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Taller than the 80px house floor: a report worth reading has repro steps in it,
   and a box that fits three lines quietly asks for three lines. */
.bug-textarea { min-height: 120px; }

.bug-counter {
    align-self: flex-end;
    font-size: 11.5px;
    color: var(--chronos-fg-muted);
    font-variant-numeric: tabular-nums;
}

.bug-error {
    margin: 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--chronos-red) 12%, transparent);
    color: var(--chronos-red);
    font-size: 13px;
    line-height: 1.45;
}

/* ---------- sent confirmation (replaces the form) ---------- */

.bug-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0 2px;
    text-align: center;
}

.bug-sent-mark {
    font-size: 40px;
    line-height: 1;
}

.bug-sent-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--chronos-fg-secondary);
}

/* One primary button, and on a phone a full-width target beats a 22px-padded pill
   floating at the left edge of the card. */
.bug-actions { justify-content: stretch; }
.bug-actions > button.primary { flex: 1; }

@media (min-width: 481px) {
    .bug-intro { font-size: 14px; }
    .bug-actions { justify-content: flex-end; }
    .bug-actions > button.primary { flex: 0 0 auto; }
}