/* OR-07: видимый фокус для клавиатуры, карточка «Сейчас», ошибки у поля, черновик и потеря связи. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.top a:focus-visible, .top button:focus-visible, .top input:focus-visible { outline-color: var(--on-chrome); }
summary { cursor: pointer; }
/* Узкий экран: поля строчных форм (например, «Обоснование» оценки size=60) не шире карточки. */
form.inline label, form.inline input, form.inline select { max-width: 100%; min-width: 0; }
[hidden] { display: none !important; }

.oc .u-facts dd { overflow-wrap: anywhere; }
.oc-wait { margin: 0; padding-left: 18px; }
.oc-wait li { margin: 2px 0; }
.oc-wait li.oc-bad { color: var(--bad); }
.oc-quote { border-left: 3px solid var(--line); padding-left: 8px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-who { font-weight: 600; }
.oc-time { color: var(--muted); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.oc-time time, .oc-mini time { font-variant-numeric: tabular-nums; }
.oc-offline, .oc-draft { border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn-ink); padding: 8px 10px; margin: 8px 0 0; font-size: 13px; }

.oc-alert { border: 2px solid var(--bad); background: var(--bad-bg); padding: 10px 12px; margin: 8px 0 10px; color: var(--ink); }
.oc-alert p { margin: 4px 0; }
.oc-alert .oc-title { color: var(--bad); }
.oc-alert:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
[aria-invalid="true"] { border: 2px solid var(--bad); background: var(--bad-bg); }

.oc-mini { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 8px; margin: 6px 0 0; border-top: 1px dashed var(--line); padding-top: 5px; }
.oc-mini div { display: contents; }
.oc-mini dt { color: var(--muted); }
.oc-mini dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .oc .u-facts > div { display: block; }
  .oc-alert { padding: 8px; }
}