/* Portaali paigutus. Kasutab ainult tokens.css muutujaid. */
.skip-link { position: absolute; left: var(--space-2); top: -4rem; background: var(--md-primary); color: var(--md-on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 10; }
.skip-link:focus { top: var(--space-2); }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; }
.site-header { background: var(--md-surface-container); border-bottom: 1px solid var(--md-outline-variant); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; flex-wrap: wrap; }
.brand img { display: block; height: 36px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a { color: var(--md-primary); font: var(--text-label); font-weight: 600; min-height: var(--target-min); display: inline-flex; align-items: center; }
.nav form { margin: 0; }
main { padding: var(--space-8) 0 var(--space-12); }
main:focus { outline: none; }
h1 { font: var(--text-headline); margin: 0 0 var(--space-4); }
h2 { font: var(--text-title); margin: var(--space-6) 0 var(--space-3); }
.auth-card { max-width: 28rem; margin: var(--space-8) auto 0; }
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card .btn { width: 100%; }
.field input[aria-invalid="true"] { border-color: var(--md-error); border-width: 2px; }
.hint { color: var(--md-on-surface-variant); font: var(--text-label); margin-top: var(--space-1); }
.alert-error { background: var(--md-error-container); color: var(--md-error); border-left: 4px solid var(--md-error);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.notice { margin-bottom: var(--space-4); }
/* Ainult ekraanilugejale */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link { color: var(--md-primary); text-decoration: underline; }
table.data { width: 100%; border-collapse: collapse; font: var(--text-body); }
table.data th, table.data td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--md-outline-variant); }
table.data caption { text-align: left; font: var(--text-title); padding-bottom: var(--space-2); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.site-footer { border-top: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); font: var(--text-label); padding: var(--space-6) 0; }

/* Juhendid */
.lead { font: var(--text-title); color: var(--md-on-surface-variant); }
.card form + form { margin-top: var(--space-2); }
.card .btn + .btn, .card form .btn { margin-top: var(--space-2); }
details { margin: var(--space-2) 0; }
details > summary { cursor: pointer; min-height: var(--target-min); display: flex; align-items: center; font-weight: 600; }
.faq { background: var(--md-surface-container); border-radius: var(--radius-sm); padding: 0 var(--space-4); }
pre.plain { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-label); }
.steps li { margin-bottom: var(--space-2); }

/* Üldised abiklassid */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.actions form { margin: 0; }
.actions .btn, .card .actions .btn { margin-top: 0; }
.btn-sm { min-height: 36px; padding: 0 var(--space-4); }
.btn-block { width: 100%; margin-top: var(--space-2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.crumbs { font: var(--text-label); color: var(--md-on-surface-variant); margin-bottom: var(--space-3); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: 0; font: var(--text-label); color: var(--md-on-surface-variant); }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-full); font: var(--text-label); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--md-outline); color: var(--md-on-surface-variant); }
.pill-in_review { background: var(--md-warning-container); color: var(--md-on-warning-container); box-shadow: none; }
.pill-published { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.pill-archived { background: var(--md-surface-container); }
.pill-ai { background: var(--md-surface-container); }

/* Juhendi redaktor: sisu vasakul lugemisveerus, seaded paremal */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-8); align-items: start; }
.editor-main { max-width: 46rem; }
.editor-rail { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; padding-right: var(--space-1); }
@media (max-width: 63.99rem) {
  .editor { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .editor-rail { position: static; max-height: none; overflow: visible; order: -1; }
}
.panel { background: var(--md-surface-container); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-3); }
.panel h2 { margin-top: 0; font: var(--text-title); }
.panel > summary { margin: calc(var(--space-2) * -1) 0; }
.panel[open] > summary { margin-bottom: var(--space-2); }
details.sub { margin: var(--space-3) 0; border-top: 1px solid var(--md-outline-variant); }
.count { margin-left: var(--space-2); font: var(--text-label); color: var(--md-on-surface-variant); }
.checks { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.checks li { display: flex; gap: var(--space-2); padding: var(--space-1) 0; }
.checks.soft { color: var(--md-on-surface-variant); }
.ok { color: var(--md-on-surface); font-weight: 600; }
.source { padding: var(--space-3) 0; border-top: 1px solid var(--md-outline-variant); }
.history { margin: 0; padding-left: var(--space-4); font: var(--text-label); }
.danger-zone { margin-top: var(--space-4); }

.block { border-left: 3px solid var(--md-outline-variant); padding: var(--space-2) 0 var(--space-3) var(--space-4); margin-bottom: var(--space-4); scroll-margin-top: var(--space-4); }
.block:target { border-left-color: var(--md-primary); }
.block.is-editing { border-left-color: var(--md-primary); background: var(--md-surface-container); padding-right: var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.block-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 36px; }
.block-type { font: var(--text-label); color: var(--md-on-surface-variant); }
.block-tools { display: flex; gap: var(--space-2); align-items: center; }
.block-tools form { margin: 0; }
.block-tools .btn { margin: 0; }
.prose { max-width: 70ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-3); }
.prose h2, .prose h3 { margin-top: var(--space-2); }
.add-block { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--md-outline-variant); scroll-margin-top: var(--space-4); }
.add-block h2 { margin-top: 0; }
.palette { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.palette .btn { margin: 0; }
.empty { border: 2px dashed var(--md-outline-variant); border-radius: var(--radius-md); padding: var(--space-6); color: var(--md-on-surface-variant); }
.empty p { margin: 0 0 var(--space-2); }
.field { margin-bottom: var(--space-4); }
.field textarea { width: 100%; min-height: 6rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--md-outline); border-radius: var(--radius-sm); font: var(--text-body); background: var(--md-surface); color: var(--md-on-surface); box-sizing: border-box; resize: vertical; }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-height: 0; margin-right: var(--space-2); }
.field label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; font-weight: 400; min-height: var(--target-min); align-items: center; }
.field input, .field select, .field textarea { box-sizing: border-box; }
fieldset { border: 0; margin: 0; padding: 0; }