/* Structural UI contract. Foundation values come from design-tokens.css.
   This file owns form grids, compact cards, secondary admin grids and explicit
   component variants. See docs/DESIGN_SYSTEM.md and docs/ui-contract.json. */
html{scrollbar-gutter:stable}
.small{font-size:12px;line-height:1.5}
.text-primary{color:var(--blue)}
.stack{gap:var(--space-s)}
.panel-heading>div,.page-heading>div,.topbar-left{min-width:0}
.topbar-actions{flex-shrink:0}
.breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-actions,.filter-bar{gap:var(--space-xs)}
.filter-bar select{width:240px;max-width:100%;flex:0 0 240px}
.filter-bar>.button{width:120px;flex:0 0 120px}
.form-actions{margin-top:var(--space-m)}
.form-grid,.two-columns,.two-column,.two-col,.check-grid,.checkbox-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s);min-width:0;
}
.form-grid>*,.two-columns>*,.two-column>*,.two-col>*,.check-grid>*,.checkbox-grid>*{min-width:0}
label,.field{min-width:0;overflow-wrap:break-word}
.field-label{display:block;min-width:0;overflow-wrap:anywhere;font-weight:500;line-height:1.5;min-height:1.5em}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-width:0}
.bare-fieldset{min-inline-size:0;margin:0;padding:0;border:0}
.check-row{gap:var(--space-m);margin-top:var(--space-m)}
.checkbox{gap:var(--space-xs);font-size:14px;line-height:1.5}
/* Sibling labels share their label/control rows, so longer RU/ES captions do
   not move one input relative to the other. The fallback remains a fluid grid. */
@supports(grid-template-rows:subgrid){
  .form-grid>label:has(>.field-label){display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--space-xs);align-content:start}
  .form-grid>label>.field-label{align-self:end}
}

.practice-grid,.role-grid,.source-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);align-items:stretch;
}
.compact-card{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-m);min-width:0}
.compact-card-header{display:flex;align-items:center;gap:var(--space-s);min-width:0}
.compact-card-header>div{min-width:0}
.compact-card-header h3{margin:0 0 var(--space-xxs);font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.compact-card-header .muted{font-size:13px}
.compact-card .course-icon{width:48px;height:48px;flex-shrink:0;border-radius:var(--radius-m)}
.compact-card .course-icon svg{width:24px;height:24px}
.compact-card form{margin-top:auto;width:100%}
.compact-card .button{width:100%;min-height:40px}
.trend-scores,.trend-inline{display:flex;align-items:center;gap:var(--space-s);flex-wrap:wrap}
.trend-scores{margin:var(--space-m) 0;font-size:20px;line-height:1.4}
.trend-scores strong{font-size:24px}
.trend-scores>svg,.trend-inline>svg{flex-shrink:0;color:var(--muted)}
.trend-inline{gap:var(--space-xs);font-size:14px}
.legend-dot.neutral{background:var(--ds-grey-600)}

.option-editor{
  display:grid;grid-template-columns:32px minmax(0,1fr) 144px;
  gap:var(--space-s);align-items:start;margin:var(--space-m) 0;min-width:0;
}
.option-editor>.form-grid{min-width:0}
.option-bullet{
  display:flex;align-items:center;justify-content:center;align-self:end;
  width:32px;height:40px;border-radius:var(--radius-s);background:var(--surface-3);
  color:var(--muted);font-size:12px;font-weight:500;
}
.option-editor .correct-checkbox{
  display:flex;flex-direction:row;gap:var(--space-xs);align-items:center;
  align-self:end;min-height:40px;margin:0;font-size:13px;font-weight:400;
}
.correct-checkbox input{margin:0;flex-shrink:0}
.inline-details form{width:240px;max-width:calc(100vw - 64px)}
.inline-details input{min-width:0}
.access-table{table-layout:fixed}
.access-table th:last-child,.access-table td:last-child{width:240px}

.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.role-grid>.panel{align-self:start}
.role-grid summary{overflow-wrap:anywhere}
.source-card{padding:var(--space-m)}
.source-card-heading{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-s)}
.source-card h3{overflow-wrap:anywhere}
.source-url{display:block;overflow-wrap:anywhere;word-break:break-word}
.source-date{margin-top:var(--space-s);font-size:12px;line-height:1.5;color:var(--muted)}
.source-actions{display:flex;align-items:flex-start;gap:var(--space-s);flex-wrap:wrap;margin-top:var(--space-s)}
.source-actions>details{flex:1;min-width:0}
.source-actions form{min-width:0}
.audit-detail{
  max-width:var(--reading-width);white-space:pre-wrap;overflow-wrap:anywhere;
  margin:var(--space-xs) 0 0;padding:var(--space-s);border-radius:var(--radius-s);
  background:var(--surface-2);font-size:12px;line-height:1.5;
}
.empty-state{padding:48px var(--space-m)}
.empty-state h3,.empty-state p{max-width:var(--reading-width);margin-left:auto;margin-right:auto}
.empty-icon{border-radius:var(--radius-l)}
.error-card{max-width:640px;width:calc(100% - 32px);padding:var(--space-l);text-align:center}
.error-card .empty-icon{margin-bottom:var(--space-m)}
.error-card h1{overflow-wrap:anywhere}
.error-card .button{margin-top:var(--space-s)}
.nav-item svg{width:20px;height:20px;flex-shrink:0}
.button svg,.text-link svg{width:20px;height:20px;flex-shrink:0}
.button-small svg,.badge svg{width:16px;height:16px}

/* Authentication uses the same spacing scale. QR has its own white quiet zone
   for reliable scanning in either theme; it is not a decorative UI icon. */
.mfa-preferences{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs)}
.mfa-qr{width:240px;max-width:100%;align-self:center;background:#fff;border-radius:var(--radius-m);overflow:hidden}
.mfa-qr svg{display:block;width:100%;height:auto;max-width:100%}
.mfa-secret{display:block;overflow-wrap:anywhere;padding:var(--space-s);background:var(--surface-2);border-radius:var(--radius-s)}
.mfa-recovery-codes{display:grid;gap:var(--space-xs);list-style:none;margin:0;padding:0;min-width:0}
.mfa-recovery-codes li{padding:var(--space-xs);background:var(--surface-2);border-radius:var(--radius-s);min-width:0}
.mfa-recovery-codes code{font-size:12px;overflow-wrap:anywhere}

@media(min-width:1700px){.practice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1230px){.practice-grid,.source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .filter-bar{display:grid;grid-template-columns:minmax(0,1fr)}
  .filter-bar .search-field,.filter-bar select,.filter-bar>.button{width:100%;max-width:none;min-width:0}
  .form-grid,.two-columns,.two-column,.two-col,.check-grid,.checkbox-grid,.practice-grid,.role-grid,.source-grid{grid-template-columns:minmax(0,1fr)}
  .practice-grid,.role-grid,.source-grid{gap:var(--space-s)}
  .compact-card,.source-card{padding:var(--space-s)}
  .compact-card .button{min-height:44px}
  .option-editor{grid-template-columns:24px minmax(0,1fr);gap:var(--space-xs)}
  .option-bullet{width:24px;height:44px;align-self:start;margin-top:29px}
  .option-editor .correct-checkbox{grid-column:2;min-height:44px;margin-top:var(--space-xs)}
  .error-card{padding:var(--space-m);margin:var(--space-xl) auto}
  .form-actions{align-items:stretch}
  .empty-state{padding:var(--space-l) var(--space-s)}
}