/* ============================================================================
   Support centre — Phase 9c.

   Loaded by resources/views/support/_chrome.blade.php, which also pulls in
   account.css. This file adds ONLY what the shared .ac-* design system has no
   component for: the FAQ accordion, the long-form article prose, the message
   thread, the category grid and the honeypot.

   ⚠⚠ EVERY TOKEN BELOW IS DEFINED ON `.acct`, NOT ON :root. account.css scopes
      its whole palette — light, the prefers-color-scheme dark branch, and the
      studio-forced dark branch — to `.acct`. So every rule here must sit inside
      a `.acct` subtree, and every support view must open with
      <div class="acct"><div class="acct-page">. A panel rendered outside that
      wrapper gets unresolved custom properties and falls back to transparent
      backgrounds and browser-default text: it does not error, it just quietly
      renders wrong in both schemes.

   ⚠ Not an inline <style> block, deliberately. resources/views/manage/_chrome
     records why the 216 lines that used to live there moved out: an inline block
     in a pushed stack is re-sent with every page and cannot be cached, and its
     dark branch keyed off the STUDIO's theme rather than the reader's device.
     Both traps are avoided by being a real stylesheet next to account.css.

   ⚠ Cache-busted by file mtime (see _chrome.blade.php). public/assets/css/ is
     outside the Vite bundle, so this deploys on a plain `git pull` with no
     `npm run build` — and a browser will serve a stale copy for a year without
     the ?v.
   ============================================================================ */


/* ── Two shared components used as links ────────────────────────────────────
   ⚠⚠ account.css WRITES .ac-row AS A <div> AND .ac-tab AS A <button>, AND
      NEITHER RULE SETS text-decoration OR (for .ac-row) color — they had no
      reason to. The support centre is the first surface to need both as <a>:
      a request in the list is a link to its own thread, and the three filters
      are links because they change the page. Without these two rules every row
      title and every filter renders underlined in the browser's default link
      blue, straight through the studio's theme, in both schemes.

      .ac-tile already handles it itself (account.css sets text-decoration:none
      and an explicit color on it), so it is deliberately not repeated here. */

a.ac-row {
    color: var(--ac-text);
    text-decoration: none;
}
a.ac-row:hover { color: var(--ac-text); }

a.ac-tab { text-decoration: none; }
a.ac-tab:hover { text-decoration: none; }


/* ── Search row ─────────────────────────────────────────────────────────────
   The FAQ search: one input plus one button, stacking on a narrow screen.
   Bootstrap's .input-group would do this, but it collapses the button's border
   radius into the input's and the .ac-input focus ring then clips against it.  */

.sup-search {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.sup-search .fld { flex: 1 1 240px; min-width: 0; }
.sup-search .go  { flex: 0 0 auto; }

/* A secondary line under a link in a side rail. Its own class rather than an
   inline font-size: a style attribute in a Blade loop is re-sent per row and
   cannot be themed, and this one has to read in both schemes. */
.sup-mini {
    margin-top: 2px;
    font-size: .84rem;
    color: var(--ac-text-3);
    line-height: 1.5;
}

@media (max-width: 420px) {
    .sup-search .go { flex: 1 1 100%; }
}


/* ── FAQ accordion ──────────────────────────────────────────────────────────
   <details>/<summary>, not a JS accordion: it is keyboard-operable and
   announces its own expanded state with no script at all, which matters on a
   page a customer may reach with a flaky connection.                          */

.sup-faq {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    box-shadow: var(--ac-shadow);
    overflow: hidden;
}
.sup-faq + .sup-faq { margin-top: 9px; }

/* The filter in the `searchable` layout sets/clears [hidden]. A UA stylesheet
   gives <details> display:block, which beats [hidden]'s display:none in some
   browsers, so say it here rather than trusting the cascade. */
.sup-faq[hidden] { display: none !important; }

.sup-faq > summary {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-size: .95rem;
    font-weight: 650;
    color: var(--ac-heading);
    line-height: 1.4;
    transition: background-color .15s ease;
}
.sup-faq > summary::-webkit-details-marker { display: none; }
.sup-faq > summary:hover { background: var(--ac-surface-2); }

/* Focus lands on the <summary>; the ring has to be visible in both schemes. */
.sup-faq > summary:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: -2px;
}

.sup-faq > summary .chev {
    flex: 0 0 auto;
    margin-top: .18em;
    font-size: .8rem;
    color: var(--ac-accent-text);
    transition: transform .18s ease;
}
.sup-faq[open] > summary .chev { transform: rotate(90deg); }

.sup-faq > summary .q { flex: 1 1 auto; min-width: 0; }

.sup-faq .a {
    padding: 0 16px 16px 43px;
    color: var(--ac-text-2);
    font-size: .91rem;
    line-height: 1.7;
}

@media (max-width: 480px) {
    .sup-faq .a { padding-left: 16px; }
}

/* The answer's category, on the FLAT layouts where nothing else says it.
   ⚠ It is the photographer's own grouping and is frequently absent — the
     platform library carries no faqcatid at all, and `faq_categories` has no
     rows platform-wide today (App\Models\SupportFaqCategory has the measurement).
     So this renders for some rows and not others, by design; it must never be
     the only thing separating two entries.
   ⚠ NOT a "platform vs studio" badge. Which half of the library an answer came
     from is our filing system, not the customer's question, and naming it would
     put an internal distinction on a customer-facing page. */
.sup-faq .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--ac-radius-pill);
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ac-text-3);
    white-space: nowrap;
}


/* ── Category grid (`category_grid` layout) ─────────────────────────────────
   Cards the customer opens in place. There is no per-category ROUTE — the
   controller's FAQ read takes no category parameter — so this is a
   presentation of the one list, never a link to a second request.             */

.sup-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.sup-cat {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
    padding: 17px;
}
.sup-cat .hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}
.sup-cat .hd .ic {
    flex: 0 0 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
    color: var(--ac-accent-text);
}
.sup-cat .hd .tl {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ac-heading);
    line-height: 1.25;
}
.sup-cat .hd .cnt {
    margin-top: 1px;
    font-size: .78rem;
    color: var(--ac-text-3);
}
/* Inside a card the accordion loses its own frame — the card is the frame. */
.sup-cat .sup-faq {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border-top: 1px solid var(--ac-border);
}
.sup-cat .sup-faq + .sup-faq { margin-top: 0; }
.sup-cat .sup-faq > summary { padding: 11px 0; font-size: .91rem; }
.sup-cat .sup-faq > summary:hover { background: transparent; color: var(--ac-accent-text); }
.sup-cat .sup-faq .a { padding: 0 0 12px 27px; font-size: .88rem; }


/* ── Long-form article body ─────────────────────────────────────────────────
   Admin WYSIWYG HTML, already run through App\Support\HtmlSanitizer by
   App\Services\SupportLibrary. These rules only dress what survives that.      */

.sup-prose {
    color: var(--ac-text-2);
    font-size: .96rem;
    line-height: 1.75;
}
.sup-prose > :first-child { margin-top: 0; }
.sup-prose > :last-child  { margin-bottom: 0; }

.sup-prose h1,
.sup-prose h2,
.sup-prose h3,
.sup-prose h4 {
    margin: 1.8em 0 .6em;
    color: var(--ac-heading);
    font-weight: 700;
    line-height: 1.3;
}
.sup-prose h1 { font-size: 1.35rem; }
.sup-prose h2 { font-size: 1.16rem; }
.sup-prose h3 { font-size: 1.02rem; }
.sup-prose h4 { font-size: .96rem; }

.sup-prose p  { margin: 0 0 1.05em; }
.sup-prose ul,
.sup-prose ol { margin: 0 0 1.05em; padding-left: 22px; }
.sup-prose li { margin-bottom: .4em; }
.sup-prose li::marker { color: var(--ac-accent-text); }

.sup-prose a {
    color: var(--ac-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sup-prose a:hover { text-decoration-thickness: 2px; }

.sup-prose strong, .sup-prose b { color: var(--ac-text); font-weight: 700; }

.sup-prose blockquote {
    margin: 0 0 1.05em;
    padding: 2px 0 2px 15px;
    border-left: 3px solid var(--ac-accent-line);
    color: var(--ac-text-3);
}

/* An author's image is whatever width they pasted; the column is not. */
.sup-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ac-radius-sm);
}

/* ⚠ A PASTED TABLE IS THE ONE THING IN HERE THAT CAN OVERFLOW A PHONE, and a
     page that scrolls sideways as a whole is the failure to avoid. The author's
     HTML is sanitized admin WYSIWYG, so there is no wrapper element to hang an
     overflow container on and no place to add one — `display:block` makes the
     table itself the scroll box, which is the only fix available from CSS alone.
     Deliberately no `width:100%`: with display:block that would re-stretch it. */
.sup-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.05em;
    border-collapse: collapse;
    font-size: .9rem;
}
.sup-prose th,
.sup-prose td {
    padding: 8px 11px;
    border: 1px solid var(--ac-border);
    text-align: left;
}
.sup-prose th { background: var(--ac-surface-2); color: var(--ac-heading); font-weight: 700; }

.sup-prose hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--ac-border); }

.sup-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--ac-surface-2);
    font-size: .88em;
}
.sup-prose pre {
    padding: 13px 15px;
    overflow-x: auto;
    border-radius: var(--ac-radius-sm);
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
}
.sup-prose pre code { padding: 0; background: none; }

.sup-hero {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--ac-radius);
    margin-bottom: 20px;
}


/* ── The message thread ─────────────────────────────────────────────────────
   Who said what, in order. The studio's messages and the customer's own are
   distinguished by SIDE, FILL *and* a written name — never by colour alone.    */

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

.sup-msg { max-width: 88%; }
.sup-msg--you  { align-self: flex-end; }
.sup-msg--them { align-self: flex-start; }

.sup-msg .hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    font-size: .78rem;
    color: var(--ac-text-3);
}
.sup-msg--you .hd { justify-content: flex-end; }
.sup-msg .hd .who { font-weight: 700; color: var(--ac-text-2); }

.sup-msg .bd {
    padding: 12px 15px;
    border-radius: var(--ac-radius);
    font-size: .92rem;
    line-height: 1.65;
    /* A customer's message is plain text that arrived from a <textarea>, so a
       long unbroken paste must wrap rather than stretch the column. */
    overflow-wrap: anywhere;
}
.sup-msg--them .bd {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    box-shadow: var(--ac-shadow);
    color: var(--ac-text);
    border-top-left-radius: 5px;
}
.sup-msg--you .bd {
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
    color: var(--ac-text);
    border-top-right-radius: 5px;
}

@media (max-width: 560px) {
    .sup-msg { max-width: 100%; }
}


/* ── Attachments ────────────────────────────────────────────────────────────
   ⚠ READ-ONLY, AND THAT IS THE WHOLE FEATURE. This app has no upload path —
     see SupportController's header. A thread can still CARRY files, because a
     rep can attach one from admin, so they are rendered.                       */

.sup-file {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    text-decoration: none;
    color: var(--ac-text);
}
.sup-file + .sup-file { margin-top: 8px; }
a.sup-file:hover { border-color: var(--ac-accent-line); color: var(--ac-text); }
.sup-file .ic {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    color: var(--ac-text-3);
}
.sup-file .nm { font-size: .89rem; font-weight: 600; word-break: break-all; }
.sup-file .sz { font-size: .78rem; color: var(--ac-text-3); }


/* ── Honeypot ───────────────────────────────────────────────────────────────
   ⚠⚠ OFF-SCREEN, NOT type="hidden" AND NOT display:none.
      A `hidden` input is not a trap — every form filler skips them by
      definition, which is the one behaviour this field exists to catch. It is
      taken out of the accessibility tree and the tab order as well as out of
      sight, so nobody using a screen reader or a keyboard can fill it by
      accident and have their genuine message refused.                          */

.sup-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}