/*
 * Support tickets: the list (/support), a new ticket, and a ticket's thread. Loaded after
 * site.css and wiki.css, whose tokens, banner and panels it reuses.
 */
@layer sections {
    .support-shell { display: grid; gap: 16px; width: min(100% - 32px, 1000px); margin: 24px auto 64px; }
    .support-shell--narrow { width: min(100% - 32px, 820px); }

    .support-back {
        display: inline-flex; align-items: center; gap: 8px; justify-self: start;
        color: var(--w-gold); font: 600 .9rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    }
    .support-back:hover { color: var(--blight); }
    .support-back__icon { width: 16px; height: 16px; rotate: 180deg; }

    /* The list */
    .support-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .support-head h2 { margin: 0; font: 400 1.6rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
    .support-guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
    .support-guest p, .support-empty { margin: 0; max-width: 56ch; color: var(--ink-2); line-height: 1.5; }

    .support-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--w-line-soft); }
    .support-row {
        display: flex; align-items: center; gap: 10px 16px; padding: 14px 6px;
        color: inherit; text-decoration: none; border-bottom: 1px solid var(--w-line-soft);
        transition: background-color .2s;
    }
    .support-row:hover { background: oklch(1 0 0 / .03); }
    .support-row:hover .support-row__subject { color: var(--w-gold); }
    .support-row:focus-visible { outline: 2px solid var(--blight); outline-offset: 2px; }
    .support-row__main { display: grid; flex: 1; gap: 6px; min-width: 0; }
    .support-row__subject { overflow: hidden; color: var(--ink); font: 600 1.05rem/1.25 var(--font-body); text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
    .support-row__meta { color: var(--ink-3); font-size: .85rem; }

    .support-status {
        flex: none; padding: 5px 9px 4px; border: 1px solid currentColor;
        font: 700 .7rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
    }
    .support-status--waiting { color: var(--gold); background: oklch(0.8 0.135 78 / .1); }
    .support-status--closed { color: var(--ink-3); border-color: var(--line-soft); }
    .support-new { flex: none; color: var(--blight); font: 700 .78rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
    .support-new::before {
        content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px;
        border-radius: 50%; background: var(--blight); box-shadow: 0 0 8px var(--blight);
    }

    /* A ticket */
    .support-ticket { display: grid; gap: 10px; }
    .support-ticket__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--ink-3); font-size: .88rem; }
    .support-ticket__title {
        margin: 0; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance;
        font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
    }

    .support-thread { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    .support-msg {
        justify-self: start; width: min(100%, 88%); padding: 14px 16px 16px;
        background: var(--w-panel); border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
    }
    .support-msg--staff {
        justify-self: end; border-color: oklch(0.8 0.135 78 / .38);
        background: linear-gradient(180deg, oklch(0.8 0.135 78 / .08), oklch(0.8 0.135 78 / .02)), var(--w-panel);
    }
    .support-msg__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; color: var(--ink-3); font-size: .82rem; }
    .support-msg__who b { color: var(--ink); font: 700 .95rem/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
    .support-msg__role { color: var(--gold); font: 700 .7rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
    .support-msg__body { color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
    .support-msg__body a { color: var(--blight); text-decoration: underline; text-underline-offset: 3px; }

    /* Forms */
    .support-form { display: grid; gap: 16px; }
    .support-form__title { margin: 0; font: 400 clamp(1.8rem, 3.4vw, 2.4rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
    .support-form__lede { margin: -6px 0 0; color: var(--ink-2); line-height: 1.5; }
    .support-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
    .support-field { display: grid; gap: 7px; }
    .support-field > span { color: var(--ink-2); font: 700 .82rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
    .support-field :is(input, select, textarea) {
        width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink);
        background: oklch(0.14 0.01 90); border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
        font: 500 1rem/1.45 var(--font-body);
        transition: border-color .2s, box-shadow .2s;
    }
    .support-field textarea { min-height: 140px; resize: vertical; }
    .support-field :is(input, select, textarea):focus { outline: none; border-color: var(--w-gold); box-shadow: 0 0 0 3px oklch(0.83 0.15 85 / .18); }
    .support-field em { color: var(--danger); font-size: .88rem; font-style: normal; font-weight: 600; }
    .support-error {
        margin: 0; padding: 12px 14px; color: var(--ink);
        background: oklch(0.68 0.19 28 / .14); border: 1px solid oklch(0.68 0.19 28 / .5); border-radius: var(--w-radius);
    }
    .support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
    .support-actions .btn { min-height: 50px; padding: 0 22px 0 18px; gap: 10px; font-size: 1.1rem; }
    .support-actions .btn .icon { width: 20px; height: 20px; }
    .support-hint { flex: 1 1 16rem; margin: 0; color: var(--ink-3); font-size: .9rem; line-height: 1.45; }
    .support-link {
        padding: 0; color: var(--ink-3); background: none; border: 0; cursor: pointer;
        font: 600 .9rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
        text-decoration: underline; text-underline-offset: 4px;
    }
    .support-link:hover { color: var(--ink); }
    .support-close { justify-self: end; margin: 0; }
    .support-closed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
    .support-closed p { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); }
    .support-closed .icon { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

    /* Files: the box on the forms, and screenshots and videos in the thread. */
    .tfiles-input { display: grid; gap: 7px; }
    .tfiles-input__label { color: var(--ink-2); font: 700 .82rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
    .tfiles-input__label small { color: var(--ink-3); font-weight: 600; letter-spacing: .08em; }
    .tfiles-input input {
        width: 100%; padding: 10px 12px; color: var(--ink-2); cursor: pointer;
        background: oklch(0.14 0.01 90); border: 1px dashed var(--w-line); border-radius: var(--w-radius); font: 500 .92rem var(--font-body);
    }
    .tfiles-input input::file-selector-button {
        margin-right: 12px; padding: 7px 12px; color: var(--ink); cursor: pointer;
        background: var(--w-panel-2); border: 1px solid var(--w-line); border-radius: 4px;
        font: 700 .8rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
    }
    .tfiles-input__help { margin: 0; color: var(--ink-3); font-size: .85rem; }
    .tfiles-input__error { margin: 0; color: var(--danger); font-size: .88rem; font-weight: 600; }
    .tfiles-input__error[hidden] { display: none; }

    .tfiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
    .tfile { min-width: 0; }
    .tfile__image { display: block; }
    .tfile__image img {
        display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 220px; object-fit: contain;
        background: oklch(0.12 0.01 90); border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
    }
    .tfile__image:hover img { border-color: var(--w-gold); }
    .tfile__video { display: block; width: min(100%, 480px); max-height: 320px; background: #000; border-radius: var(--w-radius); }
    .tfile__download { display: inline-block; margin-top: 6px; color: var(--w-gold); font-size: .85rem; }
    .tfile__gone { display: inline-block; padding: 8px 10px; color: var(--ink-3); font-size: .85rem; border: 1px dashed var(--line-soft); border-radius: var(--w-radius); }

    @media (max-width: 640px) {
        .support-fields { grid-template-columns: minmax(0, 1fr); }
        /* The subject gets the whole line; the reply marker and status go under it. */
        .support-row { flex-wrap: wrap; }
        .support-row__main { flex-basis: 100%; }
        .support-row__subject { white-space: normal; }
        .support-msg { width: 100%; }
    }
}