/* "how much Canvas": 100% = pure Canvas. System colours are UA-defined. */
:root {
  color-scheme: light dark;

  --text:                  CanvasText;
  --surface:               Canvas;
  --surface-raised:        color-mix(in srgb, CanvasText, Canvas 97%);  /* #f7f7f7 */
  --surface-tint:          color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
  --hairline:              color-mix(in srgb, CanvasText, Canvas 91%);  /* #e8e8e8 */
  --hairline-faint:        color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
  --border:                color-mix(in srgb, CanvasText, Canvas 87%);  /* #ddd */
  --field-border:          color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 */
  --handle-fill:           color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 as fill */
  --link-underline:        color-mix(in srgb, CanvasText, Canvas 69%);  /* #b0b0b0 */
  --text-muted:            color-mix(in srgb, CanvasText, Canvas 47%);
  --text-heavy:            color-mix(in srgb, CanvasText, Canvas 23%);

  --badge-scrim:           rgba(255, 255, 255, 0.85);

  /* ---- Semantic. light-dark() resolves against the used color-scheme,
          so these follow the override in stage 3 without duplication.
          Dark halves checked against a Canvas of roughly #1e1e1e;
          the exact value is UA-defined. ---- */
  --accent:                #ff9600;                        /* holds 7.6:1 on dark, unchanged */
  --accent-surface:        light-dark(#fff8f2, #2b1f14);

  --danger:                light-dark(#cc0000, #ff8a80);   /* text, icons, the 3px rule */
  --danger-solid:          light-dark(#cc0000, #b3231c);   /* fill behind --on-solid */
  --danger-surface:        light-dark(#fdecea, #3b1a17);

  --action:                light-dark(#0d47a1, #90caf9);
  --action-solid:          #1565c0;                        /* holds white at 5.7:1 in both */
  --action-surface:        light-dark(#e3f2fd, #12304f);

  --selected:              light-dark(#1a4d8f, #90caf9);   /* selected thumbnail border */

  --compute:               light-dark(#00838f, #4dd0e1);
  --compute-solid:         light-dark(#00838f, #00697a);
  --compute-surface:       light-dark(#e0f2f1, #10312f);

  --headline-mark:         #f5b400;                        /* 9.1:1 on dark, unchanged */
  --headline-border:       light-dark(#fff3cd, #5c4a12);
  --headline-surface:      light-dark(#fffdf5, #2a2313);
  --headline-badge-bg:     rgba(255, 243, 205, 0.95);      /* sits over a photo in both schemes */
  --headline-badge-fg:     #6b5900;

  --diff-ins-bg:           light-dark(#ccffd8, #12261a);
  --diff-ins-fg:           light-dark(#055d20, #7ee2a8);
  --diff-del-bg:           light-dark(#ffd7d5, #2d1416);
  --diff-del-fg:           light-dark(#82071e, #ffa198);

  --on-solid:              #ffffff;

  --shadow-widget:         3px 3px 5px light-dark(#b1b1b1, rgba(0, 0, 0, 0.7));
  --shadow-modal:          0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));

  --radius:                6px;
}

@media (prefers-color-scheme: light) {
  :root:has(#scheme_override:checked) { color-scheme: dark; }
}

@media (prefers-color-scheme: dark) {
  :root:has(#scheme_override:checked) { color-scheme: light; }
}

/* ============================================================
   Base elements
   ============================================================ */

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  margin: 0px;
}

/* Plain link visibility: a light, desaturated squiggly underline
   signals "clickable" at rest without the weight of a solid line. */
a {
  color: var(--text);
  text-decoration: underline;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent);
}

th {
  text-transform: lowercase;
}

td {
  padding-top: 10px;
  padding-bottom: 5px;
  padding-right: 10px;
}
/* table#revisions td only overrides padding-right, so its rows still
   depend on this rule for vertical padding. table.node_table td resets
   padding-top/bottom to 0 explicitly and does not depend on it. */

input[type=text],
input[type=password],
textarea {
  font-size: 1rem;
  font-family: Helvetica;
  border: 1px solid var(--field-border);
  border-radius: 2px;
}

select {
  font-size: 1rem;
  border: 1px solid var(--field-border);
}

summary {
  cursor: pointer;
}

summary:hover {
  background-color: var(--surface-raised);
}

input[type=password],
input[type=radio] {
  border: 1px solid var(--field-border);
}

/* ============================================================
   Layout
   ============================================================ */

#wrapper {
  margin: 0 5px;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

@media(min-width:1016px) {
  #wrapper {
    margin: 0 125px;
  }

  .node_action_bar.node_action_bar_save {
    margin-left: 120px;
  }

  .standalone_action_bar {
    margin-left: -125px;
  }
}

#metadata,
#content,
#main_fields {
  margin-left: 5px;
}

#metadata_details summary {
  margin-bottom: 1em;
}

.right { text-align: right; }
.clear_left { clear: left; }

#login_form {
  max-width: 22rem;
  margin: 2rem auto;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

#login_form h1 {
  margin-top: 0;
  font-size: 1.25rem;
}

#login_form label {
  display: block;
  margin-bottom: 0.25rem;
  text-transform: lowercase;
}

#login_form .login_field {
  margin-bottom: 1rem;
}

#login_form input[type=text],
#login_form input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

#login_form input[type=submit] {
  width: 100%;
  padding: 0.6rem 1rem;
}

/* ============================================================
   Navigation
   ============================================================ */

#navigation {
  position: relative;
  margin-top: 10px;
}

.admin_content_spacer {
  clear: both;
  margin-bottom: 40px;
}

.node_action_bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

/* ============================================================
   Flash / notices
   ============================================================ */

#flash {
  height: auto;
  line-height: 20px;
  padding: 6px 10px;
  border-left: 3px solid var(--text-muted);
  background-color: var(--surface-tint);
  margin-bottom: 20px;
  margin-left: 5px;
}

#flash span {
  letter-spacing: 1px;
  margin-right: 10px;
  text-transform: lowercase;
}

#flash img {
  height: 12px;
  width: 12px;
}

span#flash_error, span.warning {
  color: var(--on-solid);
  letter-spacing: 1px;
  background-color: var(--accent);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
}

span.warning a {
  color: inherit;
  text-decoration: underline;
}

.error_messages {
  border-left: 3px solid var(--danger);
  background-color: var(--danger-surface);
  padding: 6px 10px;
  margin-bottom: 1rem;
}

.error_messages ul {
  margin: 0;
  padding-left: 1.25rem;
}

#elevation_banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background-color: var(--accent-surface);
}

#elevation_banner .elevation_state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#elevation_banner .elevation_actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

#elevation_banner svg {
  width: 1.25rem;
  height: 1.25rem;
}

#elevation_banner #elevation_remaining {
  color: var(--text-muted);
}

#elevation_banner.elevation_soon #elevation_remaining,
#elevation_banner.elevation_expired #elevation_remaining {
  color: var(--accent);
  font-weight: bold;
}

/* ============================================================
   Pagination
   ============================================================ */

div.pagination {
  padding-top: 5px;
  padding-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

div.pagination a,
div.pagination em.current,
div.pagination span.gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  font-style: normal;
}

div.pagination a:hover {
  color: var(--accent);
}

div.pagination em.current {
  background-color: var(--accent);
  color: var(--on-solid);
  font-weight: bold;
}

div.pagination span.gap {
  color: var(--text-muted);
}

div.pagination .previous_page.disabled,
div.pagination .next_page.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ============================================================
   Buttons
   ============================================================ */

/* button_to forms: render submit inputs/buttons as plain links,
   orange on hover; .destructive variant is red. */
form.button_to {
  display: inline;
  margin: 0;
  padding: 0;
}

form.button_to input[type="submit"],
form.button_to button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

form.button_to.state_changing input[type="submit"],
form.button_to.state_changing button[type="submit"] {
  color: var(--action);
  background-color: var(--action-surface);
}

form.button_to.state_changing input[type="submit"]:hover,
form.button_to.state_changing button[type="submit"]:hover {
  color: var(--on-solid);
  background-color: var(--action-solid);
}

form.button_to.destructive input[type="submit"],
form.button_to.destructive button[type="submit"] {
  color: var(--danger);
  background-color: var(--danger-surface);
}

form.button_to.destructive input[type="submit"]:hover,
form.button_to.destructive button[type="submit"]:hover {
  color: var(--on-solid);
  background-color: var(--danger-solid);
}

form.button_to.computation input[type="submit"],
form.button_to.computation button[type="submit"] {
  color: var(--compute);
  background-color: var(--compute-surface);
}

form.button_to.computation input[type="submit"]:hover,
form.button_to.computation button[type="submit"]:hover {
  color: var(--on-solid);
  background-color: var(--compute-solid);
}

form.button_to.computation input[type="submit"]:disabled,
form.button_to.computation button[type="submit"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Native (non-button_to) submit buttons -- Create/Save/Publish forms.
   Lower specificity than form.button_to's own rule, so button_to forms
   are correctly unaffected. If a button_to output ever loses its class
   wrapper, it will silently fall through to this bordered style instead
   of rendering as a plain link -- worth knowing, not necessarily fixing. */
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 1px solid var(--text);
  border-radius: 2px;
  padding: 4px 12px;
  font: inherit;
  font-weight: bold;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

input[type="submit"]:hover {
  color: var(--surface);
  background-color: var(--text);
}

/* ============================================================
   Admin dashboard
   ============================================================ */

#main_navigation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#main_navigation a,
#main_navigation label.nav_toggle,
#main_navigation form.button_to button {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  background-color: var(--surface-raised);
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 2px;
}

#main_navigation a:hover,
#main_navigation label.nav_toggle:hover,
#main_navigation form.button_to button:hover {
  color: var(--surface);
  background-color: var(--text);
}

#main_navigation label.nav_toggle {
  cursor: pointer;
}

#main_navigation svg {
  width: 1.5rem;
  height: 1.5rem;
}

.action_button svg,
form.button_to svg  {
  width: 1.25rem;
  height: 1.25rem;
}

#main_navigation .nav_group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.25rem;
}

#main_navigation .nav_group:first-child {
  margin-left: 0;
}

#main_navigation form.button_to {
  margin-left: auto;
}

#main_navigation input.nav_toggle_input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#main_navigation input.nav_toggle_input:focus-visible + label.nav_toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#main_navigation input.nav_toggle_input:checked + label.nav_toggle {
  color: var(--accent);
  background-color: var(--accent-surface);
}

#main_navigation form.button_to button:hover {
  color: var(--on-solid);
  background-color: var(--danger-solid);
}

#main_navigation a.nav_locale {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

#dashboard_search {
  margin-bottom: 1.5rem;
}

#dashboard_search input[type=text] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 1.1rem;
  border-radius: 2px;
}

.button_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.button_row .action_button,
.node_search_form .action_button {
  margin-bottom: 0;
}

#dashboard_signposts {
  margin-bottom: 2rem;
}

#dashboard_housekeeping h3 {
  margin-bottom: 0.75rem;
}

#dashboard_widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard_widget {
  flex: 1 1 300px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.dashboard_widget h3 {
  margin-top: 0;
}

.dashboard_widget ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.dashboard_widget li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline-faint);
}

.dashboard_widget_meta {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dashboard_widget_meta svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}

/* ============================================================
   Tables
   ============================================================ */

/* Generic fallback header row. Shadowed by table.node_table's own
   tr.header (2rem) and duplicated (same values) by table#revisions's
   own tr.header below. Applies as-is to #menu_item_list, and
   table.user_table, none of which define their own tr.header. */
table tr.header {
  height: 20px;
  text-align: left;
}

table.node_table ,
table.assets_table,
table.user_table,
table.events_table {
  border-collapse: collapse;
}

table.node_table tr {
  border-bottom: 1px solid var(--text);
}

table.assets_table tr,
table.user_table tr,
table.events_table tr {
  border-bottom: 1px solid var(--hairline);
}

table.node_table th.node_id,
table.node_table th.revision {
  min-width: 4rem;
}

/* th.title's min-width is set to 4rem above and 12rem here -- the
   later, equally-specific rule wins, so th.title ends up at 12rem and
   the 4rem entry for it above is dead. Likely a copy/paste leftover. */
table.node_table th.editor,
table.node_table th.title {
  min-width: 12rem;
}

table.node_table tr.header,
table.assets_table tr.header,
table.user_table tr.header,
table.events_table tr.header {
  height: 2rem;
  text-align: left;
}

table.node_table td {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 25px;
  padding-left: 0px;
  min-width: 2rem;
}

table.assets_table td,
table.user_table td,
table.events_table td {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 25px;
  padding-left: 0px;
  min-width: 2rem;
}

table.node_table .node_id {
  padding-left: 10px;
  padding-right: 15px;
}

table.node_table .actions {
  text-transform: lowercase;
}

table.node_table tr.header:hover,
table.assets_table tr.header:hover,
table.user_table tr.header:hover,
table.events_table tr.header:hover {
  background-color: var(--surface);
}

table.node_table tr:hover,
table.assets_table tr:hover,
table.user_table tr:hover,
table.events_table tr:hover {
  background-color: var(--surface-tint);
}

#admin_sitemap_table .node_id:before {
  content: "• ";
}

table.revisions_table {
  border-collapse: collapse;
}

table.revisions_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

table.revisions_table th,
table.revisions_table td {
  padding: 0.4rem 0.75rem;
  text-align: left;
}

table.revisions_table thead tr.header,
table.revisions_table thead tr.diff_sticky_bar {
  background-color: var(--surface);
}

table.revisions_table .diff_sticky_bar td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

#diff_selection_label {
  margin-left: 0.75rem;
  color: var(--text-muted);
}
table.revisions_table td.title {
  width: 450px;
}

table.revisions_table td.date {
  width: 175px;
}

table.revisions_table tr:not(.header):not(.no_hover) {
  border-bottom: 1px solid var(--hairline);
}

table.revisions_table tr.header:hover {
  background-color: var(--surface);
}

table.revisions_table tr.no_hover:hover {
  background-color: var(--surface);
}

table.revisions_table tr:hover {
  background-color: var(--surface-tint);
}

.events_table .rrule_text {
  display: inline-block;
  max-width: 300px;
  overflow-wrap: break-word;
}

.events_table .truncate {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

#diffview del {
  background: var(--diff-del-bg);
  color: var(--diff-del-fg);
  text-decoration: line-through;
  padding: 0 2px;
  border-radius: 2px;
}

#diffview ins {
  background: var(--diff-ins-bg);
  color: var(--diff-ins-fg);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
}

#diffview .diff_side_by_side {
  display: flex;
  gap: 1rem;
}

#diffview .diff_column {
  flex: 1;
}

#diffview del.diff_structural,
#diffview ins.diff_structural {
  cursor: help;
}

.diff_unchanged {
  color: var(--text-muted);
  font-style: italic;
}

.diff_set_list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.user_table {
  width: 100%;
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.user_table td.user_actions {
  width: 1px;
  white-space: nowrap;
  padding-right: 0;
}

.user_table .user_action_grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.4rem;
  justify-content: end;
}

.user_table .user_action {
  display: inline-flex;
  min-height: 2rem;
}

.user_table .user_action svg {
  width: 1.25rem;
  height: 1.25rem;
}

.user_table .user_action form.button_to {
  display: inline-flex;
  margin: 0;
}

.user_table .user_action a,
.user_table .user_action button[type="submit"],
.user_table .user_action .disabled_action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
}

.user_table .user_action a:hover {
  color: var(--surface);
  background-color: var(--text);
}

.user_table .user_action form.button_to.destructive button:hover {
  color: var(--on-solid);
  background-color: var(--danger-solid);
}

.user_table .user_action form.button_to.state_changing button:hover {
  color: var(--on-solid);
  background-color: var(--action-solid);
}

.user_table .user_action .disabled_action {
  color: var(--text-muted);
  background-color: transparent;
  border-color: var(--border);
  cursor: not-allowed;
}

.user_table .user_role {
  display: block;
}

.flag_stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 1rem;
  gap: 0.25rem;
  vertical-align: -0.15em;
  margin-right: 0.5rem;
}

.flag_stack svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
}

.flag_stack .flag_attention svg { color: var(--accent); }
.flag_stack .flag_alert svg     { color: var(--danger); }

.user_group_heading {
  margin-top: 1.5rem;
}

/* Retired accounts: present for attribution, not for action. */
.user_group_alumni,
.user_table_alumni {
  color: var(--text-muted);
}

.role_choice {
  display: block;
  margin-bottom: 0.35rem;
}

.role_choice .field_hint {
  margin-left: 0.5rem;
}

/* ============================================================
   Translation compare view (page_translations#show)
   ============================================================ */

.translation_compare {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media(min-width:1016px) {
  .translation_compare {
    flex-direction: row;
    gap: 2rem;
  }

  .translation_compare_column {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   Node display (nodes#show / nodes#new)
   ============================================================ */

div.layout_row_label {
  min-height: 2rem;
  text-transform: lowercase;
  vertical-align: top;
}

div.layout_row_content {
  min-height: 2rem;
  margin-bottom: 1rem;
}

@media(min-width:1016px) {
  div.layout_row_label {
    float: left;
    width: 110px;
    text-align: right;
  }

  div.layout_row_content {
    margin-left: 120px;
    display: block;
  }

  .body_toolbar_row {
    margin-left: 120px;
  }
}

.layout_row_content.info_group {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.disabled_action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 12px;
  font-weight: bold;
  color: var(--text-muted);
  cursor: not-allowed;
  line-height: 1.25rem;
}

.disabled_action svg {
  width: 1.25rem;
  height: 1.25rem;
}

.diff_step_bar .disabled_action {
  border: none;
  padding: 0;
  font-weight: normal;
}

.diff_step_bar > a,
.diff_step_bar .disabled_action {
  display: inline-flex;
  justify-content: center;
  min-width: 8ch;
}

.info_group_items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.info_item {
  min-width: 140px;
}

.info_label {
  display: block;
  font-weight: normal;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: lowercase;
}

.info_group ul {
  margin: 0;
  padding-left: 1.25rem;
}

.info_group li {
  margin-bottom: 0.25rem;
}

.layout_row_content.node_status {
  border: 2px solid var(--text);
  background-color: var(--surface-raised);
}

.node_status .info_group_items:first-child {
  margin-bottom: 0.75rem;
}

.node_status .info_group_items + .info_group_items {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.node_status .field_hint {
  margin-top: 0.5rem;
  display: block;
}

.layout_row_content .inline-image--full,
.layout_row_content .inline-image--half {
  max-width: 300px;
  width: auto;
  float: none;
  display: block;
  margin: 0.5rem 0;
}

.action_button,
form.button_to input[type="submit"],
form.button_to button[type="submit"] {
  padding: 4px 12px;
  line-height: 1.2;
  box-sizing: border-box;
}

form.button_to input[type="submit"],
form.button_to button[type="submit"] {
  border: 1px solid transparent;
  border-radius: 2px;
}

.field_hint {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-bottom: 4px;
}

.restricted_kind_hint {
  color: var(--accent);
}

.action_button + .field_hint {
  display: inline;
  margin-left: 0.5rem;
  margin-top: 0;
}

.revisions_full_history_link {
  margin-bottom: 0;
}

.node_search_form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.node_search_form input[type=text] {
  padding: 4px 12px;
  box-sizing: border-box;
  height: 2.25rem;
  width: 100%;
  max-width: 22rem;
  border-radius: 2px;
}

.node_search_form .action_button {
  height: 2.25rem;
  box-sizing: border-box;
}

/* ============================================================
   Link matrix (nodes#show)
   ============================================================
   One block per link kind, each an independent grid with an identical
   column template */

.link_matrix_head {
  display: none;
}

.link_matrix_row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;
}

.link_matrix_row:last-child {
  margin-bottom: 0;
}

.link_matrix_cells {
  margin-top: 0.7rem;
}

.link_matrix_row .link_matrix_actions {
  margin-top: 1.25rem;
}

.link_matrix_label   { order: 0; }
.link_matrix_cells   { order: 1; }
.link_matrix_actions { order: 2; }

.link_matrix_cells {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

.link_matrix_cell {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.link_matrix_label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.link_matrix_label a {
  overflow-wrap: anywhere;
}

.link_locale_tag {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.link_matrix_locale {
  font-size: 0.8rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--text);
}

.link_icon_button {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--surface);
  color: var(--text-heavy);
  line-height: 1;
  text-decoration: none;
}

.link_icon_button:hover {
  color: var(--on-solid);
  background-color: var(--text);
  border-color: var(--text);
}

.link_icon_button svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Transient "Copied!" text; empty at rest. */
.link_icon_button .copy_button_label:not(:empty) {
  margin-left: 0.35rem;
  font-size: 0.85rem;
}

@media (min-width: 1016px) {
  /* ONE grid for the whole matrix, not one per row: separate grids compute
     their auto columns independently, so identical templates do not align
     unless every width is fixed. display: contents dissolves the row and
     cell wrappers, making their children direct grid items that share the
     tracks. */
  .link_matrix {
    display: grid;
    align-items: start;
    gap: 0.75rem 1rem;
  }

  /* Label sizes to its longest URL, one auto column per locale, one for
     the token actions, then a spacer so the columns cluster near the
     label rather than drifting to the right edge. */
  .link_matrix_1 { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .link_matrix_2 { grid-template-columns: auto auto auto auto minmax(0, 1fr); }
  .link_matrix_3 { grid-template-columns: auto auto auto auto auto minmax(0, 1fr); }

  .link_matrix_head,
  .link_matrix_row,
  .link_matrix_cells {
    display: contents;
  }

  /* Auto-placement must follow source order once the wrappers are gone. */
  .link_matrix_label,
  .link_matrix_cells,
  .link_matrix_actions {
    order: 0;
  }

  /* Forces each row to begin a new grid row without placeholder cells. */
  .link_matrix_label {
    grid-column-start: 1;
  }

  /* A display: contents element cannot carry a border, so the header rule
     lives on the locale labels themselves -- which marks the columns
     individually and avoids a stray line under the empty label cell. */
  .link_matrix_locale {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--hairline);
  }

  .link_matrix_locale,
  .link_matrix_cell {
    justify-self: center;
  }

  /* The header sits above the first row's buttons, which are themselves
     top-aligned, so it needs no extra offset -- but the locale cells do,
     to line up with the URL rather than the label. */
  .link_matrix_cell {
    padding-top: 0.1rem;
  }

  .link_locale_tag {
    display: none;
  }

  .link_matrix_row .link_matrix_actions {
    margin-top: 0;
  }
}

/* Layout only -- the at-rest visibility (wavy underline) for these
   links comes from the scoped rule in Base elements above. */
.add_events,
.add_attachments,
.add_child_links {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.sitemap_node {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

.sitemap_node h4 {
  margin: 0;
}

.sitemap_node .field_hint {
  display: block;
  margin: 2px 0 0;
}

.sitemap_node p {
  margin: 2px 0 0;
}

#sitemap details details {
  margin-left: 0.75rem;
  padding-left: 0.5rem;
}

@media(min-width:1016px) {
  #sitemap details details {
    margin-left: 1.5rem;
    border-left: 1px solid var(--hairline);
    padding-left: 0.75rem;
  }
}

#sitemap summary {
  padding: 4px 0;
}

#sitemap details:not([open]) > summary {
  color: var(--accent);
  font-weight: bold;
}

.aligned_action_row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.5rem;
}

.aligned_action_row .action_button,
.aligned_action_row form.button_to {
  margin-top: -5px;
}

.aligned_action_row .action_button.action_button_no_margin_top {
  margin-top: 0;
}

/* ============================================================
   Page editor / metadata forms
   ============================================================ */

@media(min-width:1016px) {
  #edit_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main meta"
      "body body";
    column-gap: 2rem;
    align-items: start;
    margin-left: -125px;
  }
  #main_fields       { grid-area: main; }
  #metadata_details  { grid-area: meta; }
  #admin_layout #content { grid-area: body; }

  /* Details is force-opened by JS on desktop; hide the summary only
     once open, so a JS failure still leaves a working toggle. */
  #metadata_details[open] > summary { display: none; }

  #new_node {
    margin-left: -118px;
  }
}

input[type=text]#tag_list,
input[type=text]#node_staged_slug,
input#move_to_search_term {
  padding: 5px;
}

div#admin_layout {
  margin-top: 0px;
  margin-left: 10px;
}

#admin_layout a.action_button,
.action_button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--text);
  border-radius: 2px;
  padding: 4px 12px;
  font-weight: bold;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 1rem;
  background: none;
  cursor: pointer;
  font: inherit;
}

#admin_layout a.action_button:hover,
.action_button:hover {
  color: var(--surface);
  background-color: var(--text);
}

#admin_layout input[type=text],
#admin_layout input[type=password],
#admin_layout textarea {
  padding: 5px;
}

input#tag_list {
  text-transform: lowercase;
}

#admin_layout input[type=text],
#admin_layout input[type=password],
#admin_layout textarea {
  box-sizing: border-box;
  width: 100%;
}

input[type=text]#page_title {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 5px 4px;
  font-weight: bold;
}

#admin_layout textarea#page_abstract {
  width: 100%;
  box-sizing: border-box;
  height: 8rem;
}

#admin_layout textarea#page_body {
  box-sizing: border-box;
  width: 100%;
  height: 60vh;
}

#admin_layout #content,
#admin_layout #metadata,
#admin_layout #main_fields {
  padding-right: 5px;
}

input#tag_list,
input#node_staged_slug,
input#move_to_search_term {
  box-sizing: border-box;
  width: 100%;
}

input#menu_search_term,
input#menu_item_node_id,
input#menu_item_path,
input#menu_item_title {
  width: 100%;
  max-width: 44rem;
}

@media(min-width:1016px) {
  #admin_layout textarea#page_abstract {
    padding: 5px;
    height: 250px;
  }

  #admin_overview {
    margin-left: -125px;
  }
}

/* ============================================================
   Draft list (dashboard widget)
   ============================================================ */

.search_results_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search_results_list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-faint);
}

.search_tag_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--hairline);
}

.search_tag_pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--surface-tint);
  font-size: 0.85rem;
  text-decoration: none;
}

.tag_pill_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag_pill {
  background: var(--surface-tint);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.9em;
}

/* ============================================================
   Search widgets
   ============================================================ */

#search_widget {
  position: absolute;
  top: 3.5rem;
  left: 0;
  width: min(520px, 90vw);
  border-radius: 2px;
  border: 1px solid var(--text);
  box-shadow: var(--shadow-widget);
  background-color: var(--surface);
  padding: 3px;
  z-index: 100;
}

#search_widget input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 18px;
}

.search_results p {
  margin: 0;
  padding: 4px 4px 0 4px;
  border-bottom: 1px solid var(--hairline);
}

.search_results p a {
  text-decoration: none;
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
}

.search_results p span.result_path {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted);
  padding-bottom: 4px;
}

.search_results .restricted_result {
  display: block;
  font-size: 0.85rem;
  color: var(--accent);
}

.search_results p.search_more {
  margin: 0;
  padding: 6px 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  border-bottom: none;
}

.search_results p.search_group_label {
  margin: 8px 0 2px;
  padding: 0;
  border-bottom: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: lowercase;
  font-weight: normal;
}

/* ============================================================
   Menu items (navigation editor)
   ============================================================ */

#menu_item_list {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 44rem;

  border: 1px solid var(--hairline);
  border-radius: var(--radius);

  padding: 0.5rem;
}

#menu_item_list tr:hover {
  background-color: var(--surface-tint);
}

#menu_item_list td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

#menu_item_list tr:last-child td {
  border-bottom: none;
}

#menu_item_list td.menu_item_title {
  width: 100%;
}

.menu_item_translation {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.menu_item_translation_locale {
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
  margin-right: 0.35rem;
}

.menu_item_translation_absent {
  font-style: italic;
}

#menu_item_list td.menu_item_action {
  width: 1px;
  white-space: nowrap;
  text-align: center;
}

#menu_item_list td.menu_item_action a {
  text-decoration: none;
}

#menu_item_list td.menu_item_action svg {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

#menu_item_list td.menu_sort_handle {
  width: 1px;
  white-space: nowrap;
  color: var(--text-muted);
}

/* jQuery UI sortable binds mouse events, so drag never works on touch.
   Below the desktop breakpoint the grip would advertise something that
   cannot happen, and the width is better spent on the chevrons. */
#menu_item_list .menu_grip {
  display: none;
}

@media (min-width: 1016px) {
  #menu_item_list .menu_grip {
    display: inline-block;
    cursor: grab;
    vertical-align: middle;
  }

  #menu_item_list td.menu_sort_handle:active .menu_grip {
    cursor: grabbing;
  }
}

#menu_item_list form.menu_move {
  display: inline-block;
  margin: 0;
}

#menu_item_list form.menu_move button[type="submit"] {
  padding: 0.15rem 0.2rem;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-muted);
  line-height: 1;
}

#menu_item_list form.menu_move button[type="submit"]:hover {
  color: var(--text);
  background-color: var(--surface-tint);
}

#menu_item_list form.menu_move button[type="submit"]:disabled {
  opacity: 0.35;
  cursor: default;
  background-color: transparent;
  color: var(--text-muted);
}

#menu_item_list td.menu_sort_handle svg {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: middle;
}

#menu_item_list td.menu_sort_handle:active {
  cursor: grabbing;
}

#menu_item_list td.menu_sort_handle svg {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

#menu_item_list tr.ui-state-highlight td {
  height: 2.5rem;
  background-color: var(--accent-surface);
  border: 1px dashed var(--accent);
}

#menu_item_list form.button_to.destructive input[type="submit"],
#menu_item_list form.button_to.destructive button[type="submit"] {
  color: var(--danger);
  background-color: transparent;
}

#menu_item_list form.button_to.destructive input[type="submit"]:hover,
#menu_item_list form.button_to.destructive button[type="submit"]:hover {
  color: var(--on-solid);
  background-color: var(--danger-solid);
}

/* ============================================================
   Image box / browser
   ============================================================ */

.thumbnail_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.thumbnail_list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 4px;
}

.thumbnail_list img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.thumbnail_list li {
  position: relative;
}

.thumbnail_list li .headline_indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--badge-scrim);
  color: var(--headline-mark);
}

.thumbnail_list li .headline_indicator svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.related_asset_handle {
  display: flex;
  color: var(--text-muted);
  cursor: grab;
}

.related_asset_handle svg {
  width: 1rem;
  height: 1rem;
}

.related_asset_remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
}

.related_asset_remove svg {
  width: 0.9rem;
  height: 0.9rem;
}

.related_asset_remove:hover {
  color: var(--danger);
}

.related_asset_result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}

.related_asset_result img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.related_asset_set_headline {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
}

.related_asset_set_headline svg {
  width: 0.9rem;
  height: 0.9rem;
}

.related_asset_set_headline:hover,
.related_asset_set_headline[aria-pressed="true"] {
  color: var(--headline-mark);
}

.related_asset_set_headline[aria-pressed="true"] svg {
  fill: currentColor;
}

.thumbnail_list li.is_headline {
  border-color: var(--headline-border);
  background-color: var(--headline-surface);
}

#asset_dropzone {
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 1.5rem;
}

#asset_dropzone.dragging {
  border-color: var(--accent);
  background: var(--accent-surface);
}

/* ============================================================
   Live edit preview
   ============================================================ */

#editor_and_preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1016px) {
  #editor_and_preview {
    flex-direction: row;
    align-items: flex-start;
  }

  #editor_and_preview .preview_content {
    flex: 1;
    min-width: 0;
  }

  #preview_panel {
    flex: 1;
    min-width: 0;
  }
}

#preview_panel iframe {
  width: 100%;
  height: 612px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}

.body_toolbar_row {
  min-height: 2rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 8px;
}

/* ============================================================
   Image picker
   ============================================================ */

#inline_image_picker {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  max-width: 480px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--shadow-modal);
}

#inline_image_picker_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.inline_image_picker_item {
  position: relative;
}

#inline_image_picker_grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  display: block;
}

.inline_image_picker_headline_badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: var(--headline-badge-bg);
  color: var(--headline-badge-fg);
  font-size: 0.65em;
  text-align: center;
  border-radius: 3px;
  padding: 1px 0;
  pointer-events: none;
}

#inline_image_picker_grid img.selected {
  border-color: var(--selected);
}

#inline_image_picker_actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Action log
   ============================================================ */

#node_action_list td.node_action_body {
  border-bottom: 1px solid var(--hairline-faint);
}

#node_action_list td.node_action_time {
  white-space: nowrap;
  vertical-align: top;
  font-size: 0.8em;
  color: var(--text-muted);
  padding-right: 1em;
}

#node_action_list .node_action_date {
  display: block;
}

#node_action_list .node_action_clock {
  float: right;
  margin-top: 0.2rem;
}

#node_action_list td.node_action_body {
  vertical-align: top;
}

.node_action_inferred {
  opacity: 0.5;
  font-size: smaller;
  margin-left: 0.5em;
}

.node_action_zoom {
  font-size: smaller;
  margin-left: 0.5em;
}

.node_action_details summary {
  margin-top: 0.2rem;
  cursor: pointer;
  font-size: smaller;
  color: var(--text-muted);
}

.node_action_icon {
  color: var(--text-muted);
  margin-right: 0.35em;
  vertical-align: text-top;
}

.revision_lifecycle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================================
   Trash section
   ============================================================ */

.restore_form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.restore_picker {
  position: relative;
}

.restore_picker input[type=text] {
  width: 100%;
  max-width: 22rem;
}

.restore_picker .search_results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-top: none;
  max-height: 20em;
  overflow-y: auto;
}

/* ============================================================
   User section
   ============================================================ */

form.otp_form {
  margin-top: 0.75rem;
}

form.otp_form input[type=password],
form.otp_form input[type=text] {
  display: block;
  margin-bottom: 0.5rem;
}

.otp_qr svg {
  width: 220px;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}