/* Contact + support: public forms, confirmation, customer thread and the admin inbox. Tokens, controls, cards and buttons come from dt-base.css; site.css supplies
   .side-card/.checklist. Only support-specific layout lives here. */
.support-layout { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: var(--s6); align-items: start; margin: 4px 0 20px; }
.support-box { max-width: none; }
.support-box h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.02em; }
.support-more { margin-top: 36px; }
.form-summary ul { margin: 8px 0 0; padding-left: 20px; }
.form-summary a { color: var(--risk); }
.form-actions { margin: 18px 0 0; }
.form-actions .primary { min-width: 180px; }
.ctx-panel { border: 1px dashed var(--muted); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; background: var(--panel2); }
.ctx-panel h3 { margin: 0 0 6px; font-size: 15px; }
.ctx-facts { display: grid; gap: 4px; margin: 10px 0; }
.ctx-facts div { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ctx-facts dt { color: var(--muted); min-width: 150px; }
.ctx-facts dd { margin: 0; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.support-ref { font-size: clamp(26px, 5vw, 40px); letter-spacing: .04em; margin: 8px 0 18px; overflow-wrap: anywhere; }
.thread { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel2); }
.msg-admin { border-color: var(--ok); }
.msg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); }
.msg-head strong { color: var(--text); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; font-size: 14px; line-height: 1.6; }
.msg-files { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
@media (max-width: 930px) { .support-layout { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 620px) { .form-actions .primary { width: 100%; } .ctx-facts dt { min-width: 0; width: 100%; } }

/* ---- admin inbox (loaded after admin.css; scoped to body.admin) ---- */
body.admin .sup-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
body.admin .sup-counts a { text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--text); background: var(--panel); font-size: 12px; }
body.admin .sup-counts a strong { font-size: 18px; display: block; }
body.admin .sup-counts a.active { border-color: var(--ok); }
body.admin .sup-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
body.admin .sup-filters .field { margin: 0; }
body.admin .sup-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.admin .sup-msg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
body.admin .sup-msg.note { border-color: var(--warn); }
body.admin .sup-msg.admin { border-color: var(--ok); }
body.admin .sup-msg.system { opacity: .8; }
body.admin .sup-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; font-size: 13px; line-height: 1.55; }
body.admin .banner { border: 1px solid var(--warn); border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: var(--panel); }
body.admin .banner.bad { border-color: var(--risk); }
body.admin .inline-form { display: inline; }
body.admin .actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
body.admin .actions-row .field { margin: 0; }
body.admin a.btn { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 9px 13px; color: var(--text); background: var(--panel); }
body.admin .kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
body.admin .kv dt { color: var(--muted); }
body.admin .kv dd { margin: 0; overflow-wrap: anywhere; }
body.admin .flash { border: 1px solid var(--ok); color: var(--ok); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
body.admin .flash.err { border-color: var(--risk); color: var(--risk); }
@media (max-width: 860px) { body.admin .cols { grid-template-columns: 1fr; } body.admin .kv { grid-template-columns: 1fr; } }
body.admin .card a:not(.btn){color:var(--text)}