/* Base styles shared by both layouts. */
:root {
  --cms-text: #1f2328;
  --cms-muted: #59636e;
  --cms-border: #d0d7de;
  --cms-bg: #ffffff;
  --cms-bg-alt: #f6f8fa;
  --cms-accent: #0b5cad;
  --cms-accent-dark: #084a8c;
  --cms-ok: #1a7f37;
  --cms-warn: #9a6700;
  --cms-error: #cf222e;
  --cms-radius: 4px;
  --cms-gap: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cms-text);
  background: var(--cms-bg);
}
a { color: var(--cms-accent); }
a:hover, a:focus { color: var(--cms-accent-dark); }
h1, h2, h3 { line-height: 1.25; }
.page-title { margin: 0 0 var(--cms-gap); font-size: 1.75rem; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--cms-gap); top: var(--cms-gap); background: var(--cms-bg); padding: .5rem; z-index: 10; }

/* Messages */
.messages { border: 1px solid var(--cms-border); border-left-width: 4px; border-radius: var(--cms-radius); padding: .75rem 1rem; margin: 0 0 var(--cms-gap); background: var(--cms-bg-alt); }
.messages ul { margin: 0; padding-left: 1.25rem; }
.messages--status { border-left-color: var(--cms-ok); }
.messages--warning { border-left-color: var(--cms-warn); }
.messages--error { border-left-color: var(--cms-error); }

/* Breadcrumb */
.breadcrumb ol { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .875rem; }
.breadcrumb li + li::before { content: "\203A"; margin-right: .25rem; color: var(--cms-muted); }

/* Tabs and actions */
.tabs ul { list-style: none; margin: 0 0 var(--cms-gap); padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--cms-border); }
.tabs a { display: block; padding: .5rem .875rem; text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: var(--cms-radius) var(--cms-radius) 0 0; }
.tabs .is-active a { border-color: var(--cms-border); background: var(--cms-bg); margin-bottom: -1px; color: var(--cms-text); font-weight: 600; }
.tabs--secondary ul { border-bottom: none; }
.tabs--secondary a { padding: .25rem .625rem; font-size: .875rem; }
.actions { list-style: none; margin: 0 0 var(--cms-gap); padding: 0; display: flex; gap: .5rem; }
.button { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--cms-accent); border-radius: var(--cms-radius); background: var(--cms-accent); color: #fff; text-decoration: none; font: inherit; cursor: pointer; }
.button:hover, .button:focus { background: var(--cms-accent-dark); color: #fff; }

/* Tables */
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--cms-gap); }
th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--cms-border); vertical-align: top; }
thead th { background: var(--cms-bg-alt); font-weight: 600; }
td.empty { color: var(--cms-muted); font-style: italic; }
.menu--account { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.pager { display: flex; gap: 1rem; list-style: none; padding: 0; }
.button--danger { background: #cf222e; border-color: #cf222e; color: #fff; }
/* Form elements (step 4). */
.form-autocomplete + .autocomplete { position: absolute; z-index: 10; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--cms-border); max-height: 16rem; overflow-y: auto; min-width: 16rem; }
.autocomplete li { padding: .25rem .5rem; cursor: pointer; }
.autocomplete li[aria-selected="true"], .autocomplete li:hover { background: #0969da; color: #fff; }
.form-item { position: relative; }
table.tableselect tr.selected td { background: #f1f8ff; }
table.tableselect .tableselect-cell, table.tableselect th.select-all { width: 2rem; }
.form-item.is-required > label::after { content: " *"; color: #cf222e; }
[hidden] { display: none !important; }
/* Fields and nodes (step 6). */
.field { margin: 0 0 .75rem; }
.field-label { font-weight: 600; }
.field-label-inline > .field-label, .field-label-inline > .field-items, .field-label-inline .field-item { display: inline; }
.field-label-inline > .field-label { margin-right: .35rem; }
.node--unpublished { background: #fff4f4; padding: .5rem; }
.node-unpublished-marker { color: #cf222e; font-weight: 600; }
.node-submitted { color: #57606a; font-size: .9em; }
.node-list > article { border-bottom: 1px solid var(--cms-border); padding-bottom: 1rem; margin-bottom: 1rem; }
.field-multiple > .form-item, .field-multiple .field-item-widget { margin-bottom: .5rem; }
.field-multiple-row { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.field-multiple-row > :first-child { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.field-multiple-row > .field-remove { flex: 0 0 auto; margin: 0; }
.list-filters__items { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.list-filters { background: #f6f8fa; border: 1px solid var(--cms-border); padding: .75rem 1rem; margin-bottom: 1rem; }
.list-filters .form-actions { margin-top: .5rem; }
ul.inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
th.is-active a { font-weight: 700; }
th.sort-asc a::after { content: " \25B2"; font-size: .7em; }
th.sort-desc a::after { content: " \25BC"; font-size: .7em; }
.pager { list-style: none; display: flex; gap: .5rem; padding: 0; }
.pager-current { font-weight: 700; }
.field-display-settings { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Forms. */
form .form-item { margin: 0 0 1rem; }
form .form-label { display: block; font-weight: 600; margin-bottom: .25rem; }
form .form-type-checkbox > label, form .form-type-radio > label { display: inline; font-weight: normal; margin-left: .35rem; }
form input.form-text, form input.form-email, form input.form-url, form input.form-number, form input.form-tel, form input.form-search,
form input.form-password, form input.form-date, form input.form-datetime-local, form select, form textarea {
  font: inherit; padding: .4rem .5rem; border: 1px solid #8c959f; border-radius: 4px; max-width: 100%; box-sizing: border-box;
}
form textarea { width: 100%; }
form input:focus, form select:focus, form textarea:focus { outline: 2px solid #0969da; outline-offset: 1px; }
form .description { color: #57606a; font-size: .875em; margin-top: .25rem; }
form .form-required { color: #cf222e; }
form .has-error input, form .has-error select, form .has-error textarea { border-color: #cf222e; }
form .form-item-error { color: #cf222e; font-size: .9em; margin-top: .25rem; }
form fieldset { border: 1px solid var(--cms-border); border-radius: 4px; padding: .75rem 1rem; margin: 0 0 1rem; }
form legend { font-weight: 600; padding: 0 .25rem; }
form details { border: 1px solid var(--cms-border); border-radius: 4px; padding: .5rem 1rem; margin: 0 0 1rem; }
form summary { font-weight: 600; cursor: pointer; }
form .form-actions { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.text-format-wrapper .filter-list { margin-top: -.5rem; }
.field-multiple > legend + .field-item-widget, .field-multiple fieldset { margin-bottom: .5rem; }
/* Hidden visually, kept for screen readers (used since step 3; defined in step 7). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.button--secondary { background: #f6f8fa; border-color: #8c959f; color: #24292f; }
.button--secondary:hover, .button--secondary:focus { background: #eaeef2; color: #24292f; }
.button--small { padding: .25rem .6rem; font-size: .875em; }
.field-collection-item-form { background: #fbfcfd; }
.field-collection-table { margin: .25rem 0 0; }

/* Files and images (step 8). */
.managed-file .image-preview { display: block; margin-bottom: 0.4rem; }
.managed-file .image-preview img { max-width: 100%; height: auto; border: 1px solid var(--cms-border); }
.managed-file .file-size { color: var(--cms-muted); }
.field-type-image img { max-width: 100%; height: auto; }
.file-table { width: auto; }
/* Small labels (required, new, group). */
.badge { display: inline-block; margin-left: .25rem; padding: 0 .375rem; border-radius: 999px; background: var(--cms-bg-alt); border: 1px solid var(--cms-border); font-size: .75rem; color: var(--cms-muted); }