/* QO7 v9 — shared geometry and explicit interaction states.
   No animated surfaces, gradients, colored overlays or decorative indicators. */
:root {
    --control-height: 38px;
    --control-radius: 6px;
    --motion-fast: 110ms;
    --motion-enter: 160ms;
    --text-selection: #d9d9d9;
    --text-selection-ink: #171717;
}
html[data-theme="dark"] {
    --text-selection: #545454;
    --text-selection-ink: #ffffff;
}
html { scrollbar-gutter: stable; }
body { font-family: var(--font-sans); }
[hidden] { display: none !important; }
::selection { background: var(--text-selection); color: var(--text-selection-ink); }
/* Original glyph geometry, not stroked versions of filled artwork. */
svg.fa-icon, .mi.fa-icon, .icon.fa-icon {
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    overflow: visible;
    vertical-align: middle;
}
svg.fa-icon.small { width: 13px; height: 13px; flex-basis: 13px; }
.star-button.is-favorite svg.fa-icon { fill: currentColor; }
.brand img { width: 100%; max-width: 100%; height: auto; }
.brand-separator, .slash { color: var(--muted); }
/* Navigation stays horizontal. Current section: weight and text color only. */
.main-nav { gap: 6px; height: auto; min-height: 52px; padding-block: 6px; overflow-x: auto; }
.main-nav > a { padding: 8px 12px; min-height: 36px; border-radius: 5px; }
.main-nav > a:first-child { margin-left: 0; }
.page-tabs { gap: 8px; padding-block: 4px 8px; }
.page-tabs a { padding: 9px 12px; border: 0; border-radius: 5px; }
.page-tabs a[aria-current="page"], .main-nav > a[aria-current="page"] {
    background: transparent; border: 0; box-shadow: none; color: var(--ink); font-weight: 650;
}
.main-nav > a::before, .main-nav > a::after,
.page-tabs a::before, .page-tabs a::after { content: none; }
/* Single, predictable click target for header search. */
.header-tools { gap: 6px; }
.search-trigger { width: 38px; height: 38px; min-width: 38px; padding: 0; justify-content: center; border-radius: 6px; }
.search-trigger .search-label, .search-trigger kbd { display: none; }
.icon-button, .micon { width: 38px; height: 38px; min-width: 38px; border-radius: var(--control-radius); }
.btn, .mbtn { min-height: var(--control-height); border-radius: var(--control-radius); }
.btn.primary, .mbtn.primary { border-radius: var(--control-radius); }
.btn, .mbtn, .icon-button, .micon, .avatar-button, .search-trigger {
    transition: transform var(--motion-fast) var(--ease-out);
    touch-action: manipulation;
}
:is(.btn, .mbtn, .icon-button, .micon, .avatar-button, .search-trigger):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
:is(.btn, .mbtn, .icon-button, .micon):disabled,
:is(.btn, .mbtn, .icon-button, .micon)[aria-disabled="true"] {
    transform: none; cursor: not-allowed; opacity: .45;
}
:is(.btn, .mbtn)[aria-busy="true"] { cursor: wait; }
/* Focus is not a hover style: make it visible and leave room around it. */
:where(button, a, input, select, textarea, summary, [contenteditable="true"], [tabindex="0"]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}
:is(.main-nav, .page-tabs, .folder-bar, .main-tabs) a:focus-visible { outline-offset: -2px; }
.text-button { min-height: 30px; padding: 4px 7px; border-radius: 4px; }
.customer-reference { padding: 5px 7px; border-radius: 4px; }
.project-name { padding: 3px 4px; border-radius: 3px; }
.subline { margin-left: 4px; }
/* Padding is applied to UI selection surfaces, never simulated with text shadows. */
.popover { padding: 6px; border-radius: 8px; }
.popover-item, .popover button, .popover a { border-radius: 5px; }
.popover-item { padding: 10px 12px; min-height: 38px; }
#command-results { padding: 6px; scroll-padding-block: 6px; }
.command-section { padding: 12px 12px 7px; }
.command-result { padding: 11px 12px; min-height: 46px; border-radius: 5px; gap: 12px; }
.command-result[aria-selected="true"] { background: var(--selected); color: var(--ink); }
.command-result > span { min-width: 0; overflow-wrap: anywhere; }
.command-result > small { padding-left: 8px; }
mark { background: var(--selected); color: var(--ink); padding: .08em .22em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.data-table-wrap { border-radius: 8px; }
.data-table td { padding-block: 12px; }
.data-table tr.selected > td { background: var(--selected); color: var(--ink); }
.data-table .check-cell { width: 49px; padding-left: 17px; padding-right: 8px; }
.data-table th { font-size: 11px; }
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    display: inline-block; position: relative;
    width: 16px; height: 16px; min-width: 16px;
    margin: 0; border: 1px solid var(--line-strong); border-radius: 3px;
    background-color: var(--surface); background-position: center;
    background-repeat: no-repeat; background-size: 10px 10px;
    vertical-align: middle; cursor: pointer;
}
input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); background-image: url('../icons/check.svg'); }
input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); background-image: url('../icons/minus.svg'); }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
input[type="radio"] { accent-color: var(--accent); }
label:has(> input[type="checkbox"]), .check-field { gap: 10px; }
/* Do not reintroduce decorative status dots. */
.status-dot, .state-label > i, .notification-trigger i { display: none !important; }
.state-label { gap: 0; }
/* Webmail: reading and batch selection are distinct, inset states. */
.message-list { padding-inline: 8px; }
.message-row {
    margin: 4px 0; padding: 14px 12px; gap: 12px;
    grid-template-columns: 16px minmax(0, 1fr); border: 0; border-radius: 6px;
    background: transparent;
}
.message-row.active { background: var(--subtle); }
.message-row.is-selected { background: var(--selected); box-shadow: inset 0 0 0 1px var(--line-strong); }
.message-row .message-open { padding: 2px 2px 2px 3px; border-radius: 3px; min-width: 0; }
.message-row .message-open:active { transform: none; }
.message-row .message-open:focus-visible { outline-offset: 3px; }
.message-row .message-top { gap: 12px; }
.message-list .list-tools, .message-list .batch-bar { padding-inline: 12px; }
.message-marks { gap: 7px; padding-top: 3px; }
.message-marks .mi.fa-icon { width: 12px; height: 12px; flex-basis: 12px; }
.folder-bar { gap: 4px; padding-block: 4px; scroll-padding-inline: 12px; }
.folder-bar a { padding: 10px 12px; min-height: 38px; border-radius: 5px; }
.folder-bar a[aria-current="page"] { border: 0; background: transparent; color: var(--ink); font-weight: 650; }
.main-tabs { gap: 4px; }
.main-tabs a { padding: 10px 12px; border-radius: 5px; }
.mail-header .header-end { gap: 4px; }
.mail-header .account-selector { max-width: 220px; }
.mail-header .customer-id { margin-inline: 7px; }
#mail-main > .toolbar > [data-action="refresh"] { margin-left: auto; }
#mail-main > .toolbar:has(.search-box:not([hidden])) > [data-action="refresh"] { margin-left: 0; }
#mail-search-box { min-width: min(360px, 100%); }
.compose-format { gap: 4px; padding: 7px 12px; }
.compose-format .micon { width: 34px; min-width: 34px; height: 34px; }
.compose-editor { padding: 20px 24px; scroll-padding-block: 20px; }
.compose-editor:focus-visible { outline-offset: -3px; border-radius: 4px; }
.compose-line input:focus-visible { outline-offset: -2px; border-radius: 4px; }
.action-grid .mbtn { justify-content: flex-start; padding: 12px; min-height: 44px; }
/* The shared tooltip is a small opaque surface. */
.tooltip { position: fixed; inset: auto; margin: 0; padding: 7px 10px; max-width: min(300px, calc(100vw - 16px)); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-raised); color: var(--ink); font: 12px/1.4 var(--font-sans); box-shadow: var(--shadow-menu); z-index: 100; overflow-wrap: anywhere; pointer-events: none; }
.tooltip:not(:popover-open):not(.visible) { display: none; }
.tooltip::backdrop { display: none; }
.startup { max-width: 560px; margin: 40px auto; }
.startup h1 { margin-bottom: 18px; }
.startup p { line-height: 1.7; color: var(--secondary); }
.startup-help { margin-top: 20px; }
.startup-help a { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
    :is(.icon-button, .micon, .search-trigger):hover:not(:disabled) { background: var(--hover); color: var(--ink); }
    :is(.main-nav, .page-tabs, .folder-bar, .main-tabs) a:hover { background: var(--subtle); color: var(--ink); }
    :is(.btn, .mbtn):hover:not(.primary):not(:disabled) { background: var(--hover); }
    :is(.btn, .mbtn).primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
    .message-row:hover:not(.is-selected):not(.active) { background: var(--hover); }
    .message-row.is-selected:hover { background: var(--selected); }
    .data-table tr.selected:hover > td { background: var(--selected); }
    .command-result:hover { background: var(--hover); }
    .command-result[aria-selected="true"]:hover { background: var(--selected); }
}
@media (pointer: coarse) {
    .icon-button, .micon, .search-trigger { min-width: 42px; width: 42px; height: 44px; }
    .star-button { opacity: 1; }
}
@media (max-width: 850px) {
    .mail-header .customer-id { display: none; }
    .mail-header .account-selector { max-width: 180px; }
    .header-tools { gap: 2px; }
}
@media (max-width: 700px) {
    .topbar { gap: 10px; }
    .tool-divider { margin-inline: 0; }
    .main-nav { gap: 2px; padding-block: 5px; }
    .main-nav > a, .page-tabs a { padding-inline: 10px; }
    .customer-reference { padding-inline: 4px; }
    .message-list { padding-inline: 8px; }
    .message-row { padding: 14px 12px; }
    .command-result { padding: 12px; align-items: center; }
    .command-result > small { display: none; }
    #mail-search-box { flex-basis: 100%; min-width: 0; width: 100%; }
    .mail-header .account-selector { max-width: 150px; }
    .compose-editor { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    :is(.btn, .mbtn, .micon, .icon-button, .search-trigger):active { transform: none !important; }
}
html[data-motion="reduced"] :is(.btn, .mbtn, .micon, .icon-button, .search-trigger):active { transform: none; }
@media (forced-colors: active) {
    input[type="checkbox"] { appearance: auto; background-image: none !important; }
    .message-row.is-selected, .command-result[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* Fixed intrinsic brand size in public headers; never grow to the PNG canvas. */
.public-brand-group .brand { width: 80px; flex: 0 0 80px; }
@media (max-width: 700px) {
    .public-brand-group .brand { width: 68px; flex-basis: 68px; }
}