#applications-root { --af-border: var(--border-subtle); }
.af-toolbar,.af-actions,.af-tabs { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
.af-toolbar { justify-content:space-between; margin:0 0 var(--space-6); padding:var(--space-3); background:var(--bg-card); border:1px solid var(--af-border); border-radius:var(--radius-md); }
.af-tabs { gap:var(--space-1); }
.af-tabs button[aria-pressed="true"] { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent-indicator) 34%, transparent); color:var(--accent-text); }
.af-grid,.af-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.af-card { padding:var(--space-6); border:1px solid var(--af-border); border-radius:var(--radius-md); background:var(--bg-card); margin-bottom:var(--space-6); min-width:0; box-shadow:var(--shadow-card); transition:transform .2s var(--ease-out), border-color .2s var(--ease-out); }
.af-card:hover { transform:translateY(-1px); border-color:var(--border-medium); }
.af-card h3,.af-card h4 { margin:0 0 14px; overflow-wrap:anywhere; }
.af-card p { margin:10px 0; color:var(--text-secondary); }
.af-card summary { font-size: var(--text-lg); font-weight:650; cursor:pointer; padding:2px 0 var(--space-4); }
.af-field { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); min-width:0; font-size:var(--text-sm); font-weight:550; color:var(--text-primary); }
.af-field small { color:var(--text-secondary); font-size:var(--text-xs); font-weight:400; }
.af-field input,.af-field textarea,.af-dialog textarea { width:100%; min-width:0; border:1px solid var(--border-medium); border-radius:var(--radius-sm); background-color:var(--bg-input); color:var(--text-primary); padding:var(--space-3); font:inherit; font-size:var(--text-sm); font-weight:400; }
/* The inline-end side is the caret reserve, so it is never set on a select here. */
.af-field select { width:100%; min-width:0; border:1px solid var(--border-medium); border-radius:var(--radius-sm); background-color:var(--bg-input); color:var(--text-primary); padding-block:var(--space-2); padding-inline-start:var(--space-3); font:inherit; font-size:var(--text-sm); font-weight:400; }
.af-field input:not([type="checkbox"]):not([type="radio"]) { min-height:var(--control-h-md); padding-block:var(--space-2); }
.af-field input[type="color"] { padding:var(--space-1); height:var(--control-h-md); }
.af-field select[multiple] { min-height:110px; padding-inline:var(--space-3); }
.af-field textarea { resize:vertical; }
.af-check { display:flex; gap:var(--space-2); align-items:center; margin:var(--space-2) 0 var(--space-4); }
.af-check input { width:var(--control-check); height:var(--control-check); }
.af-question { min-width:0; border:1px solid var(--af-border); border-radius:var(--radius-md); padding:var(--space-5); margin:var(--space-4) 0; background:var(--bg-input); }
.af-question legend { padding:0 var(--space-2); font-weight:600; }
.af-question>.af-actions { justify-content:flex-end; margin-bottom:14px; }
.af-badge { display:inline-block; background:var(--accent-soft); color:var(--accent-text); padding:5px 10px; border-radius:var(--radius-xs); margin-bottom:var(--space-3); font-size: var(--text-xs); }
.af-empty { padding:var(--space-10) var(--space-6); text-align:center; color:var(--text-secondary); }
.af-notice { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:var(--space-4); }
.af-notice[role="alert"] { color:var(--danger); }
.af-answer { white-space:pre-wrap; overflow-wrap:anywhere; }
.af-response { padding:var(--space-4) 0; border-top:1px solid var(--af-border); }
.af-table-wrap { overflow:auto; margin-bottom:18px; border:1px solid var(--af-border); border-radius:var(--radius-md); }
.af-table { width:100%; border-collapse:collapse; text-align:start; }
.af-table th,.af-table td { padding:var(--space-4); border-bottom:1px solid var(--af-border); text-align:start; overflow-wrap:anywhere; }
.af-table th { background:var(--bg-card-elevated); font-size: var(--text-xs); color:var(--text-secondary); font-weight:550; }
.af-table td { font-size: var(--text-sm); }
.af-table tbody tr:hover,.af-table tbody tr:focus-within { background:var(--bg-hover); }
.af-table tbody tr:last-child td { border-bottom:0; }
.af-table td small { display:block; color:var(--text-secondary); }
.af-dialog { width:min(700px,92vw); max-height:85vh; overflow:auto; margin:auto; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-medium); border-radius:var(--radius-md); padding:var(--space-6); box-shadow:var(--shadow-modal); }
.af-dialog::backdrop { background:var(--overlay); }
/* Focus rings come from the shared contract in style.css; this sheet defines none of its own. */
@media(max-width:760px) { .af-grid,.af-fields { grid-template-columns:1fr; } .af-card { padding:var(--space-4); } .af-toolbar { align-items:stretch; } .af-tabs { width:100%; } .af-tabs button { flex:1; } .af-question { padding:var(--space-3); } }
.af-discord-embed{background:var(--discord-embed-bg);color:var(--discord-text-bright);border-inline-start:4px solid;padding:16px;border-radius:var(--radius-xs);overflow:hidden;overflow-wrap:anywhere;margin-bottom:8px;max-width:520px}
.af-discord-embed h3{color:inherit}.af-panel-image{display:block;width:100%;max-height:300px;object-fit:contain;margin:12px 0;border-radius:4px}.af-panel-thumbnail{float:inline-end;width:80px;height:80px;object-fit:cover;margin-inline-start:12px;border-radius:4px}.af-panel-icon{width:24px;height:24px;object-fit:contain;vertical-align:middle}.af-panel-author{font-weight:600}.af-panel-buttons{max-width:700px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:20px}.af-discord-button{border:0;border-radius:var(--radius-xs);padding:8px 12px;color:#fff;overflow-wrap:anywhere;min-width:0;opacity:1}.af-button-primary{background:var(--discord-blurple)}.af-button-secondary{background:var(--discord-btn-secondary)}.af-button-success{background:var(--discord-btn-success)}.af-button-danger{background:var(--discord-btn-danger)}.af-control-closed{opacity:.5}.af-panel-select{background:var(--discord-embed-bg);color:var(--discord-text-bright);max-width:520px;padding:12px;border-radius:4px;margin-bottom:20px;overflow-wrap:anywhere}.af-panel-select>div{padding:8px 0}.af-panel-select small{display:block}.af-card fieldset{min-width:0}@media(max-width:600px){.af-panel-buttons{display:flex;flex-wrap:wrap}.af-discord-button{max-width:100%}}