/* modules/tickets/assets/tickets.css — the public ticket portal and thread view.
 *
 * Everything is scoped under `.tickets` so a theme's own rules keep the page around it, and
 * every colour, radius and shadow reads the theme contract's --cms-* tokens
 * (site/themes/README.md section 6). A theme that defines them restyles the whole portal
 * without touching this file. Modelled on modules/forums/assets/forums.css.
 *
 * Before this file existed the module had no stylesheet of its own at all: both public
 * views wrote class names that only site/themes/default/assets/main.css ever defined (64
 * of the 71 classes the views used), so the portal rendered correctly on the starter theme
 * and nowhere else, silently. See .docs/reference/theme-contract.md.
 *
 * Unlike forums.css there is no deprecated pre-1.5.0 name to fall back to here — this
 * module never shipped its own stylesheet before, so there is nothing an existing fork
 * could already be reading. Each token is a two-tier chain instead of forums' three:
 * the --cms-* name, then a literal or a currentColor-derived neutral.
 *
 * One breakpoint, 768px. */

.tickets {
    /* The theme contract (site/themes/README.md § 6). A plain literal declaration sits
       is the intended value written out so a reader can see it — NOT a runtime fallback.
       A custom property accepts any token stream, so the color-mix() declaration always
       parses and always wins; on an engine without color-mix() the token computes to
       inherit/initial, never to that literal. color-mix() is baseline since 2023. */
    --tk-accent:#059669;
    --tk-accent:var(--cms-accent, #059669);
    --tk-on-accent:var(--cms-accent-contrast, #FFFFFF);
    --tk-wash:rgba(5, 150, 105, 0.10);
    --tk-wash:var(--cms-accent-wash, color-mix(in oklab, var(--tk-accent) 12%, transparent));
    --tk-ink:var(--cms-ink, currentColor);
    --tk-text:var(--cms-text, currentColor);
    --tk-muted:#64748b;
    --tk-muted:var(--cms-muted, color-mix(in oklab, currentColor 62%, transparent));
    --tk-line:rgba(100, 116, 139, 0.16);
    --tk-line:var(--cms-line, color-mix(in oklab, currentColor 13%, transparent));
    --tk-line-strong:#cbd5e1;
    --tk-line-strong:var(--cms-line-strong, color-mix(in oklab, currentColor 28%, transparent));
    --tk-surface:rgba(100, 116, 139, 0.05);
    --tk-surface:var(--cms-surface, color-mix(in oklab, currentColor 4%, transparent));
    --tk-sunk:rgba(100, 116, 139, 0.08);
    --tk-sunk:var(--cms-sunk, color-mix(in oklab, currentColor 7%, transparent));
    --tk-shadow:var(--cms-shadow, none);
    --tk-radius:var(--cms-radius, 10px);
    --tk-radius-sm:var(--cms-radius-sm, 7px);
    --tk-radius-pill:999px;
    --tk-font:var(--cms-font, inherit);
    --tk-font-mono:var(--cms-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

    display:flex;
    flex-direction:column;
    gap:24px;
    color:var(--tk-text);
    font-family:var(--tk-font);
}
.tickets, .tickets *, .tickets *::before, .tickets *::after{box-sizing:border-box}

.tickets-portal{gap:24px}
.tickets-thread{gap:24px}

:where(.tickets) a{color:var(--tk-accent);text-decoration:none}
:where(.tickets) a:hover{color:var(--tk-ink)}
.tickets h1, .tickets h2, .tickets h3{margin:0;color:var(--tk-ink);font-weight:600;letter-spacing:-0.03em;line-height:1.25}
.tickets p{margin:0}
.tickets :focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px;border-radius:4px}

/* --- Flash message (TicketController::returnWithMsg()) --------------------------------- */

.tickets-flash{padding:14px 18px;border-radius:var(--tk-radius-sm);border:1px solid var(--tk-line);font-size:0.9375rem;font-weight:500}
.tickets-flash--success{background:var(--tk-wash);border-color:color-mix(in oklab, var(--tk-accent) 35%, transparent);color:var(--tk-ink)}
.tickets-flash--error{background:#fee2e2;border-color:#fecaca;color:#991b1b}

/* --- Portal intro ------------------------------------------------------------------------ */

.tickets-intro{display:flex;flex-direction:column;gap:8px}
.tickets-intro__title{font-size:1.75rem}

/* --- Choice cards (open / check) ---------------------------------------------------------- */

.tickets-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}

.tickets-choice {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:22px 20px;
    background:var(--tk-surface);
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    box-shadow:var(--tk-shadow);
    text-align:left;
    font-family:inherit;
    color:inherit;
    cursor:pointer;
}
.tickets-choice:hover{border-color:var(--tk-line-strong)}
/* The card's control is the button in its heading; its ::after covers the card so all of it is the
   target, and the focus ring is drawn on the card it covers (ticket-form.php). */
.tickets-choice{position:relative}
.tickets-choice__button{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.tickets-choice__button::after{content:"";position:absolute;inset:0}
.tickets .tickets-choice__button:focus-visible{outline:none}
.tickets-choice:has(.tickets-choice__button:focus-visible){outline:2px solid var(--tk-accent);outline-offset:2px}
.tickets-panel__title:focus{outline:none}
.tickets-choice--primary{border-color:var(--tk-accent)}
.tickets-choice__icon {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:var(--tk-radius-sm);
    background:var(--tk-wash);
    color:var(--tk-accent);
    font-size:1rem;
    flex-shrink:0;
}
.tickets-choice__icon--muted{background:var(--tk-sunk);color:var(--tk-muted)}
.tickets-choice__title{font-size:1.0625rem}
.tickets-choice__desc{color:var(--tk-muted);font-size:0.9375rem}
.tickets-choice__arrow{margin-top:auto;padding-top:8px;color:var(--tk-muted);align-self:flex-end}

/* --- Panels (the new-ticket / check-status / thread cards) -------------------------------- */

/* `hidden` has to win over a panel's own display. An author `display:flex` beats the
   UA sheet's [hidden]{display:none} — that is an origin difference, not a specificity
   one — so both panels rendered open on load and showTicketForm() could not close
   either of them. The portal was unusable. */
.tickets [hidden]{display:none}

.tickets-panel {
    background:var(--tk-surface);
    border:1px solid var(--tk-line);
    border-radius:var(--tk-radius);
    box-shadow:var(--tk-shadow);
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.tickets-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tickets-panel__title{display:inline-flex;align-items:center;gap:8px;font-size:1.125rem}
.tickets-panel__title i{color:var(--tk-accent)}

.tickets-back {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:44px;
    padding:0 14px;
    border:1px solid var(--tk-line-strong);
    border-radius:var(--tk-radius-sm);
    background:var(--tk-surface);
    color:var(--tk-text);
    font-family:inherit;
    font-size:0.875rem;
    font-weight:600;
    cursor:pointer;
}
.tickets-back:hover{color:var(--tk-ink)}

/* A form is its own flex column, gap-spaced, so no field needs its own margin utility. */
.tickets-form{display:flex;flex-direction:column;gap:18px}

/* --- Fields -------------------------------------------------------------------------------- */

.tickets-fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}

.tickets-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tickets-label{display:flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:600;color:var(--tk-text)}
.tickets-label i{color:var(--tk-muted)}

.tickets-input, .tickets-textarea {
    width:100%;
    min-height:42px;
    padding:10px 14px;
    border:1px solid var(--tk-line-strong);
    border-radius:var(--tk-radius-sm);
    background:var(--tk-surface);
    color:var(--tk-ink);
    font:inherit;
    font-size:0.9375rem;
    outline:none;
}
.tickets-input:focus, .tickets-textarea:focus{border-color:var(--tk-accent)}
.tickets-textarea{min-height:130px;resize:vertical;line-height:1.6}

/* --- Attachments (a real file input, restyled — see tickets.js for the preview list) ------- */

.tickets-file-row{display:flex;flex-direction:column;gap:8px}
.tickets-file-input {
    width:100%;
    min-height:42px;
    padding:8px 14px;
    border:1px dashed var(--tk-line-strong);
    border-radius:var(--tk-radius-sm);
    background:var(--tk-surface);
    color:var(--tk-muted);
    font:inherit;
    font-size:0.875rem;
}
.tickets-file-input::file-selector-button {
    margin-right:12px;
    min-height:36px;
    padding:0 14px;
    border:1px solid var(--tk-line-strong);
    border-radius:var(--tk-radius-sm);
    background:var(--tk-surface);
    color:var(--tk-ink);
    font:inherit;
    font-size:0.8125rem;
    font-weight:600;
    cursor:pointer;
}
.tickets-file-hint{display:flex;align-items:flex-start;gap:6px;color:var(--tk-muted);font-size:0.8125rem}
.tickets-file-hint i{flex-shrink:0;margin-top:2px}

.tickets-file-list{display:flex;flex-direction:column;gap:6px}
.tickets-file-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
    background:var(--tk-sunk);
    border-radius:var(--tk-radius-sm);
    font-size:0.8125rem;
    color:var(--tk-text);
}
.tickets-file-remove {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    color:var(--tk-muted);
    cursor:pointer;
    flex-shrink:0;
}
.tickets-file-remove:hover{color:#b91c1c;background:#fee2e2}

/* --- Buttons ------------------------------------------------------------------------------- */

.tickets-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 18px;
    border-radius:var(--tk-radius-sm);
    border:1px solid var(--tk-accent);
    background:var(--tk-accent);
    color:var(--tk-on-accent);
    font-family:inherit;
    font-size:0.9375rem;
    font-weight:600;
    cursor:pointer;
}
.tickets-btn:hover{filter:brightness(0.95)}
.tickets-btn--danger{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.tickets-btn--danger:hover{filter:none;background:#fee2e2}
.tickets-btn--block{width:100%}

.tickets-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* --- Closed / empty state -------------------------------------------------------------------- */

.tickets-closed {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    padding:40px 24px;
    color:var(--tk-muted);
}
.tickets-closed--compact{padding:18px;gap:8px}
.tickets-closed__icon {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:var(--tk-radius-sm);
    background:var(--tk-wash);
    color:var(--tk-accent);
    font-size:1rem;
}
.tickets-closed--compact .tickets-closed__icon{width:30px;height:30px;font-size:0.875rem}
.tickets-closed__title{font-size:1.25rem}
.tickets-closed__text{font-size:0.9375rem;max-width:44ch}

/* --- Pills / badges ---------------------------------------------------------------------- */

.tickets-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border:1px solid var(--tk-line-strong);
    border-radius:var(--tk-radius-pill);
    font-size:0.75rem;
    font-weight:600;
    white-space:nowrap;
}
.tickets-pill--ghost{background:var(--tk-surface);color:var(--tk-muted)}
.tickets-pill--blue{background:#dbeafe;border-color:#bfdbfe;color:#1e40af}
.tickets-pill--green{background:var(--tk-wash);border-color:color-mix(in oklab, var(--tk-accent) 35%, transparent);color:var(--tk-ink)}
.tickets-pill--gray{background:#f1f5f9;border-color:#e2e8f0;color:#475569}

/* --- Thread page: hero + main panel ------------------------------------------------------- */

.tickets-hero{padding-bottom:16px;border-bottom:1px solid var(--tk-line)}
.tickets-hero__title{font-size:1.75rem}
/* The support form's intro (1.19.0, the page-head context tickets.portal), under the section's name. */
.tickets .tickets-hero__lede{margin-top:8px;max-width:65ch;color:var(--tk-muted);font-size:1rem;line-height:1.55}

.tickets-view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tickets-view-head__text{min-width:0}
.tickets-view-head__title{font-size:1.25rem}
.tickets-view-head__meta{margin-top:6px;font-family:var(--tk-font-mono);font-size:0.8125rem;color:var(--tk-muted)}
.tickets-view-head__meta strong{color:var(--tk-ink)}
.tickets-view-head__badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* The public tracker items filed from this ticket (1.18.0): a short list of links under the head. */
.tickets-tracker-links{padding:14px 18px;border:1px solid var(--tk-line);border-radius:var(--tk-radius);background:var(--tk-surface)}
.tickets-tracker-links__title{font-size:0.9375rem;margin:0 0 8px}
.tickets-tracker-links__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tickets-tracker-links__link{color:var(--tk-accent);overflow-wrap:anywhere}
.tickets-tracker-links__ref{font-family:var(--tk-font-mono);font-size:0.8125rem;color:var(--tk-muted)}

/* --- Thread messages ----------------------------------------------------------------------- */

.tickets-thread-list{display:flex;flex-direction:column;gap:14px}

.tickets-system-msg {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    background:var(--tk-sunk);
    border-radius:var(--tk-radius-sm);
    color:var(--tk-muted);
    font-size:0.8125rem;
    font-family:var(--tk-font-mono);
}

.tickets-msg{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:var(--tk-radius);border:1px solid var(--tk-line)}
.tickets-msg--client{background:var(--tk-surface)}
.tickets-msg--admin{background:var(--tk-wash);border-color:color-mix(in oklab, var(--tk-accent) 25%, transparent)}
.tickets-msg__head{font-family:var(--tk-font-mono);font-size:0.8125rem;color:var(--tk-muted)}
.tickets-msg__head strong{color:var(--tk-ink);font-weight:600}
.tickets-bubble{font-size:0.9375rem;line-height:1.65;color:var(--tk-text);white-space:pre-wrap;overflow-wrap:anywhere}

.tickets-attachments{display:flex;flex-wrap:wrap;gap:8px}
.tickets-attachment {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border:1px solid var(--tk-line-strong);
    border-radius:var(--tk-radius-pill);
    background:var(--tk-surface);
    color:var(--tk-text);
    font-size:0.8125rem;
    font-weight:500;
}
.tickets-attachment:hover{color:var(--tk-ink);border-color:var(--tk-muted)}

/* --- Reply section ------------------------------------------------------------------------ */

.tickets-reply{display:flex;flex-direction:column;gap:18px;padding-top:18px;border-top:1px solid var(--tk-line)}

/* --- Suggested answers (1.15.0, only while site search is on) ------------------------------ */

.tickets-suggest{display:flex;flex-direction:column;gap:8px}
.tickets-suggest__help{margin:0;font-size:0.875rem}
.tickets-suggest__help a, .tickets-suggest__list a{color:var(--tk-accent);font-weight:600;overflow-wrap:anywhere}
.tickets-suggest__status{margin:0;font-size:0.875rem;color:var(--tk-muted)}
.tickets-suggest__status:empty{display:none}
.tickets-suggest__box{padding:14px 16px;border:1px solid var(--tk-line);border-radius:var(--tk-radius-sm);background:var(--tk-sunk)}
.tickets-suggest__box[hidden]{display:none}
.tickets-suggest__title{margin:0 0 8px;font-size:0.95rem;color:var(--tk-ink)}
.tickets-suggest__list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tickets-suggest__snippet{margin:2px 0 0;font-size:0.85rem;line-height:1.5;color:var(--tk-text);overflow-wrap:anywhere}
.tickets-suggest a:focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px;border-radius:2px}
.tickets-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}

/* --- Phone --------------------------------------------------------------------------------- */

@media screen and (max-width:768px) {
    .tickets-grid, .tickets-fields{grid-template-columns:minmax(0, 1fr)}
    .tickets-panel{padding:18px}
    .tickets-btn, .tickets-back, .tickets-input, .tickets-textarea, .tickets-file-input, .tickets-attachment{min-height:44px}
    .tickets-file-remove{width:44px;height:44px}
    .tickets-actions{justify-content:stretch}
    .tickets-actions .tickets-btn{flex:1}
    .tickets-view-head{flex-direction:column;align-items:stretch}
    .tickets-hero__title{font-size:1.5rem}
}

/* iOS zooms the page into a field whose text is under 16 px and does not zoom back (owner, 2026-10-16):
   on a touch screen every field is at least 16 px, and a mouse keeps this sheet's sizes. Never
   maximum-scale or user-scalable=no in the viewport tag, which would stop pinch-zoom. */
@media (pointer:coarse){
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea, [contenteditable]:not([contenteditable="false"]){font-size:max(16px, 1em) !important}
}