/* Portal layout and components. Every colour, space, radius and font is a
   variable from brand.css (synced from newco). No hex codes, and no px except
   1px rules and the 640px and 1024px breakpoints. Quiet by design: one primary
   action per view, secondary buttons everywhere else. */

:root {
  --tap: calc(var(--space-8) + var(--space-3)); /* 44px minimum target */
  --icon: var(--space-6);
  --chrome: calc(var(--space-24) * 2); /* header and footer allowance for the artifact frame */
}

html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
main { flex: 1 0 auto; width: 100%; }

.skip { position: absolute; left: var(--space-4); top: var(--space-2); transform: translateY(-200%); z-index: 20; }
.skip:focus { transform: none; background: var(--page-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- header and footer ------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--color-surface-border); background: var(--page-surface); }
.header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  max-width: calc(var(--space-24) * 12);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}
.brand { display: inline-flex; align-items: center; min-height: var(--tap); line-height: 0; }
.brand img { width: calc(var(--space-24) * 2 + var(--space-2)); height: auto; }
.org-name {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-surface-border);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--page-ink);
  text-decoration: none;
}
.org-name:hover { color: var(--page-link); text-decoration: underline; }
.viewer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-left: auto; }
.viewer a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-medium); }
.viewer .caption { margin: 0; }

.site-footer { border-top: 1px solid var(--color-surface-border); background: var(--color-surface-alt); margin-top: var(--space-16); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  max-width: calc(var(--space-24) * 12);
  margin: 0 auto;
  padding: var(--space-6);
}
.footer-row p { margin: 0; max-width: none; }
.footer-row a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---- page frame ---------------------------------------------------------- */

.page { max-width: calc(var(--space-24) * 12); margin: 0 auto; padding: var(--space-8) var(--space-6) 0; }
.page.narrow { max-width: calc(var(--space-24) * 5); }
.page > h1 { margin-bottom: var(--space-3); }
section { margin-top: var(--space-12); }
/* The folder browser opens the page with its own title row; main's padding already spaces it. */
.page > section:first-child:has(> .browser) { margin-top: 0; }
section > h2, .page > h2 { padding-bottom: var(--space-2); }
.lead { font-size: var(--text-lg); color: var(--page-ink-muted); }
.caption { margin: 0 0 var(--space-3); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.crumb-sep { color: var(--page-ink-muted); }
.meta-line { margin-bottom: var(--space-6); }

/* Auth and one-question pages: a centred card. */
.card-page { padding-top: var(--space-12); }
.card {
  padding: var(--space-8);
  background: var(--page-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card > h1 { font-size: var(--text-2xl); }
.card > :last-child { margin-bottom: 0; }

/* ---- forms ----------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.narrow-form { max-width: calc(var(--space-24) * 5); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: var(--weight-medium); }
.field small { color: var(--page-ink-muted); }
input, select, textarea {
  font: inherit;
  min-height: var(--tap);
  color: var(--page-ink);
  background: var(--page-surface);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-muted);
  border-radius: var(--radius-md);
}
input[type="checkbox"] { min-height: 0; width: var(--icon); height: var(--icon); flex: none; accent-color: var(--color-brand-primary); }
input[type="file"] { padding: var(--space-2); }
input[type="hidden"] { display: none; }
textarea { width: 100%; max-width: calc(var(--space-24) * 7); resize: vertical; }

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  text-align: center;
  text-decoration: none;
}
.btn-small { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.btn-secondary:disabled, .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.wide { width: 100%; }
.divider { text-align: center; margin: 0; max-width: none; }

form.inline { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.actions { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; align-items: center; }
p.actions { margin: 0 0 var(--space-6); max-width: none; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); }

.notice {
  max-width: none;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-surface-border);
  border-left: var(--space-1) solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.notice-error { border-left-color: var(--color-signal-negative); }
.notice-error strong { color: var(--color-signal-negative); }

/* "Last used" marker on the sign-in method this browser used before. */
.last-used {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-brand-primary-dark);
  vertical-align: middle;
}
.caption .last-used { margin-left: 0; margin-right: var(--space-2); }

/* ---- lists and tables ---------------------------------------------------- */

.list { padding-left: var(--space-6); }
.list li { margin-bottom: var(--space-2); }
.invite-list { list-style: none; padding: 0; }
.invite-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-surface-border); }
.workspace-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); max-width: calc(var(--space-24) * 5); }
.workspace-list li { padding: var(--space-4); border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
.workspace-list a { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty { color: var(--page-ink-muted); }
.codes { columns: 2; list-style: none; padding: 0; }
.secret { word-break: break-all; font-size: var(--text-lg); }

table { margin-bottom: var(--space-4); }
th { color: var(--page-ink-muted); background: var(--color-surface-alt); border-bottom: 1px solid var(--color-surface-border); }
td { vertical-align: middle; }
tbody tr:hover { background: var(--color-surface-alt); }
td form.inline { vertical-align: middle; }
.files[hidden] { display: none; }
.files td:first-child { word-break: break-word; }
.item-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); font-weight: var(--weight-medium); }
.icon { width: var(--icon); height: var(--icon); flex: none; color: var(--color-brand-primary-dark); }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px dashed var(--color-surface-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.empty-state .icon { width: var(--space-8); height: var(--space-8); }
.empty-state p { margin: 0; }

/* ---- upload form on an item's page ----------------------------------------- */

.panel { padding: var(--space-6); border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); max-width: calc(var(--space-24) * 5); }
.panel h2 { font-size: var(--text-xl); }
.panel .stack { margin-bottom: var(--space-4); }
.manage-row form.inline { margin: 0 var(--space-4) var(--space-3) 0; }
.manage-row { display: flex; flex-wrap: wrap; align-items: center; }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color-ink-muted);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.dropzone label { font-weight: var(--weight-medium); }
.dropzone input { max-width: 100%; background: var(--page-surface); }
.dropzone.is-over { border-style: solid; border-color: var(--color-brand-primary); background: var(--color-brand-tint); color: var(--color-ink-on-tint); }
.dropzone.is-over small, .dropzone.is-over .icon { color: var(--color-ink-on-tint); }
.dropzone small { color: var(--page-ink-muted); word-break: break-all; }
progress { width: 100%; height: var(--space-3); accent-color: var(--color-brand-primary); }

/* ---- folder browser: title row, tree, menus ---------------------------------- */

.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.title-row h1 { margin: 0; }
.new-menu, .title-menu { display: inline-flex; }
.browser.has-selection .new-menu { display: none; }

/* Shared by the row menus, the title menu and "+ New". Placed by portal.js; a popover sits in the top layer. */
.row-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: calc(var(--space-24) * 2);
  max-width: calc(100vw - var(--space-4));
  padding: var(--space-1);
  color: var(--page-ink);
  background: var(--page-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.row-menu:not(:popover-open) { display: none; }
.row-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--page-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.row-menu-item:hover, .row-menu-item:focus-visible { background: var(--color-surface-alt); color: var(--page-link-hover); }
@supports not selector(:popover-open) { .row-menu { display: none; } }

.row-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--page-ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.row-menu-btn:hover { color: var(--page-link-hover); border-color: var(--color-surface-border); }
.row-actions { width: var(--tap); padding-left: 0; padding-right: var(--space-2); text-align: right; white-space: nowrap; }
.title-menu .row-menu-btn { border-color: var(--color-surface-border); }
@media (hover: hover) and (min-width: 641px) {
  .files .row-menu-btn { opacity: 0; }
  .files tr:hover .row-menu-btn, .files tr:focus-within .row-menu-btn, .files tr:has(.row-menu:popover-open) .row-menu-btn, .files tr.is-selected .row-menu-btn { opacity: 1; }
}

/* Rows: checkbox column, caret, indentation by depth. */
.files th.row-select, .files td.row-select { width: 2.75rem; padding-right: 0; }
.files .row-select input { display: block; }
.files { table-layout: fixed; }
.files th.col-type, .files td.col-type { width: 9.5rem; }
.files th.col-size, .files td.col-size { width: 6rem; }
.files th.col-updated, .files td.col-updated { width: 8rem; }
.files th.col-by, .files td.col-by { width: 11rem; }
.files th.row-actions, .files td.row-actions { width: calc(var(--tap) + var(--space-2)); }
.files td.col-type, .files td.col-by, .files td.row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files td.col-size, .files td.col-updated { white-space: nowrap; }
.files .row-title .row-name { display: flex; max-width: 100%; }
.files .item-link { min-width: 0; }
.files .item-link > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-name { display: inline-flex; align-items: center; gap: var(--space-1); }
.row-caret, .row-caret-spacer { display: inline-flex; flex: none; width: var(--space-8); height: var(--space-8); }
.row-caret {
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--text-lg);
  color: var(--page-ink-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.row-caret:hover { color: var(--page-link-hover); background: var(--color-surface-alt); }
.indent-1 .row-name { padding-left: calc(var(--space-6) * 1); }
.indent-2 .row-name { padding-left: calc(var(--space-6) * 2); }
.indent-3 .row-name { padding-left: calc(var(--space-6) * 3); }
.indent-4 .row-name { padding-left: calc(var(--space-6) * 4); }
.indent-5 .row-name { padding-left: calc(var(--space-6) * 5); }
.indent-6 .row-name { padding-left: calc(var(--space-6) * 6); }
.indent-7 .row-name { padding-left: calc(var(--space-6) * 7); }
.indent-8 .row-name { padding-left: calc(var(--space-6) * 8); }
.indent-9 .row-name { padding-left: calc(var(--space-6) * 9); }
.indent-10 .row-name { padding-left: calc(var(--space-6) * 10); }
.row-up .item-link { min-height: var(--space-8); color: var(--page-ink-muted); }
.row-empty td { color: var(--page-ink-muted); }
.row-empty .caption { margin: 0; }
.files tr.is-selected { background: var(--color-surface-alt); }
.files tr.is-drop-target { background: var(--color-brand-tint); color: var(--color-ink-on-tint); outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }

/* Selection bar: stands in for the "+ New" button while rows are ticked. */
.selection-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand-tint);
  color: var(--color-ink-on-tint);
  border-radius: var(--radius-md);
}
.selection-bar[hidden] { display: none; }
.selection-bar .btn-secondary { color: var(--color-ink-on-tint); border-color: var(--color-ink-on-tint); }
.selection-bar .btn-secondary:hover { background: var(--page-surface); }
.sel-count { font-weight: var(--weight-semibold); margin-right: var(--space-2); }
.sel-error { flex-basis: 100%; margin: 0; max-width: none; font-weight: var(--weight-medium); }
.sel-error[hidden] { display: none; }

/* ---- dialogs ---------------------------------------------------------------------- */

.portal-dialog {
  width: calc(var(--space-24) * 5);
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-6);
  color: var(--page-ink);
  background: var(--page-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.portal-dialog::backdrop { background: color-mix(in srgb, var(--color-brand-deep) 45%, transparent); }
.portal-dialog h2 { font-size: var(--text-xl); }
.portal-dialog .stack { margin-bottom: 0; }
.portal-dialog input:not([type="checkbox"]), .portal-dialog select { width: 100%; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.btn-danger { background: var(--color-signal-negative); border-color: var(--color-signal-negative); }
.btn-danger:hover { background: var(--color-signal-negative); border-color: var(--color-signal-negative); filter: brightness(0.9); }

/* ---- drop overlay and upload panel --------------------------------------------------- */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-brand-tint) 85%, transparent);
  border: 2px dashed var(--color-brand-primary);
  pointer-events: none;
}
.drop-overlay[hidden] { display: none; }
.drop-label { margin: 0; max-width: none; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-ink-on-tint); text-align: center; }

.upload-panel {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 25;
  display: flex;
  flex-direction: column;
  width: calc(var(--space-24) * 4);
  max-width: calc(100vw - var(--space-8));
  max-height: 60vh;
  color: var(--page-ink);
  background: var(--page-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.upload-panel[hidden] { display: none; }
.upload-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-surface-border); }
.upload-note { margin: 0; padding: var(--space-3) var(--space-4); max-width: none; color: var(--color-signal-negative); border-bottom: 1px solid var(--color-surface-border); }
.upload-note[hidden] { display: none; }
.upload-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.upload-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-surface-border);
}
.upload-item:last-child { border-bottom: 0; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.upload-status { grid-column: 1; margin: 0; }
.upload-item progress { grid-column: 1 / -1; }
.upload-item button { grid-column: 2; grid-row: 1 / span 2; }
.upload-item .upload-cancel[hidden], .upload-item .upload-retry[hidden], .upload-item progress[hidden] { display: none; }
.upload-item.is-error .upload-status { color: var(--color-signal-negative); }
.upload-item.is-done .upload-status { color: var(--color-signal-positive); }

/* ---- item page, video, comments ------------------------------------------- */

.player { display: block; width: 100%; max-width: 100%; margin: var(--space-6) 0; background: var(--color-surface-alt); border-radius: var(--radius-md); }
.token-once { word-break: break-all; font-size: var(--text-base); display: block; padding: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
pre { overflow-x: auto; padding: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); }

.comments { margin-top: var(--space-12); }
.comment { padding: var(--space-4) 0; border-top: 1px solid var(--color-surface-border); }
.comment-head { margin: 0 0 var(--space-1); }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--measure); }
.comment-removed { color: var(--page-ink-muted); font-style: italic; margin: 0; }
.comment-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.comment-form label { font-weight: var(--weight-medium); }
.comment-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-start; margin-top: var(--space-2); }
.comment-actions summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; color: var(--page-link); text-decoration: underline; text-underline-offset: 0.15em; }
.comment-actions details[open] { flex-basis: 100%; }
.comment-replies { margin: var(--space-3) 0 0 var(--space-4); border-left: 1px solid var(--color-surface-border); padding-left: var(--space-4); }
.comment-new { margin-top: var(--space-8); padding: var(--space-6); background: var(--color-surface-alt); border-radius: var(--radius-lg); }

/* ---- HTML artifact viewer: minimal chrome, the frame fills the viewport ---- */

.page.full { max-width: none; padding: var(--space-3) var(--space-6) 0; }
.artifact-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-3);
}
.artifact-bar .crumbs { margin-bottom: 0; }
.artifact-bar h1 { margin: 0; font-size: var(--text-xl); }
.artifact-bar .caption { margin: 0; }
.artifact-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--chrome));
  min-height: calc(var(--space-24) * 4);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
}
.artifact-meta { margin-top: var(--space-12); }

/* ---- 2FA setup --------------------------------------------------------------- */

.qr-tile {
  display: inline-block;
  padding: var(--space-2);
  margin-bottom: var(--space-4);
  background: var(--color-surface-default);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  color: var(--color-ink-default);
}
.qr { display: block; width: calc(var(--space-24) * 2 + var(--space-12)); max-width: 100%; height: auto; }

/* ---- small screens ------------------------------------------------------------ */

@media (max-width: 640px) {
  .header-row { padding: var(--space-2) var(--space-4); gap: var(--space-1) var(--space-4); }
  .org-name { padding-left: 0; border-left: 0; order: 3; flex-basis: 100%; min-height: var(--space-8); }
  .viewer { margin-left: auto; gap: var(--space-1) var(--space-4); }
  .viewer-email { display: none; }
  .page { padding: var(--space-6) var(--space-4) 0; }
  .card-page { padding-top: var(--space-6); }
  .card { padding: var(--space-6) var(--space-4); }
  .footer-row { padding: var(--space-4); }
  .site-footer { margin-top: var(--space-12); }
  /* Scroll wide tables inside themselves. position: relative keeps absolutely
     positioned children (.visually-hidden labels) inside that scroll box;
     without it they escape and widen the whole page. */
  table { display: block; overflow-x: auto; max-width: 100%; position: relative; }
  /* The file table has few enough columns here to fit; its names truncate instead of scrolling. */
  table.files { display: table; overflow: visible; }
  .files th.col-size, .files td.col-size { width: 4.5rem; }
  .files th.col-updated, .files td.col-updated { width: 6.5rem; }
  .hide-sm { display: none; }
  .codes { columns: 1; }
  .page.full { padding: var(--space-3) var(--space-3) 0; }
  .artifact-frame { height: calc(100vh - var(--chrome) - var(--space-12)); }
  .panel { padding: var(--space-4); }
  /* The ⋮ stays visible, dialogs use the full width, and the tree indents less. */
  .row-menu-btn { opacity: 1; }
  .portal-dialog { width: calc(100vw - var(--space-4)); max-width: none; padding: var(--space-4); }
  .dialog-actions .btn-primary, .dialog-actions .btn-secondary { flex: 1; }
  .upload-panel { right: var(--space-2); bottom: var(--space-2); left: var(--space-2); width: auto; max-width: none; }
  .indent-1 .row-name, .indent-2 .row-name, .indent-3 .row-name, .indent-4 .row-name, .indent-5 .row-name,
  .indent-6 .row-name, .indent-7 .row-name, .indent-8 .row-name, .indent-9 .row-name, .indent-10 .row-name { padding-left: 0; }
  .indent-1 .row-name { margin-left: var(--space-3); }
  .indent-2 .row-name { margin-left: var(--space-6); }
  .indent-3 .row-name { margin-left: calc(var(--space-6) + var(--space-3)); }
  .indent-4 .row-name, .indent-5 .row-name, .indent-6 .row-name, .indent-7 .row-name, .indent-8 .row-name, .indent-9 .row-name, .indent-10 .row-name { margin-left: var(--space-8); }
}

@media (min-width: 1024px) {
  .page { padding-top: var(--space-12); }
  .page.full { padding-top: var(--space-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .btn-secondary, .dropzone, .row-menu-btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
}