/* One stylesheet for every page. Served at /static/app.css and linked from
   templates/ui/base.html, so no page inlines its own <style> block.

   Everything below sits in the `app` cascade layer, whose position is fixed by
   the @layer line in ui/base.html: above Tailwind's preflight, below Tailwind's
   utilities. So this file is still the site's look, and a Tailwind class on one
   element still overrides it. Do not unwrap it — unlayered CSS beats every
   layer, which would put this file above the utilities again. */

@layer app {

  /* ---------- Foundations ---------- */

  * { box-sizing: border-box; }
  :root { color: #17202a; background: #f3f5f7; font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
  body { margin: 0; }
  [x-cloak] { display: none !important; }
  /* Penguin UI's toast component file (included by ui/base.html) opens with the
     demo buttons that trigger it in the library's own preview. The file is used
     unmodified, so those buttons come along; this is what hides them. The app's
     own trigger is the dispatch in ui/toast.html. */
  .penguin-toast > button { display: none; }
  button, input, select, textarea { font: inherit; }
  select, input, textarea { width: 100%; padding: 9px 10px; border: 1px solid #cbd3dd; border-radius: 6px; color: #1e2938; background: white; }
  textarea { resize: vertical; font: 13px/1.5 ui-monospace, monospace; }
  main { width: min(1500px, calc(100% - 40px)); margin: 34px auto; }

  /* ---------- Navbar ----------
     Nothing here: the navbar is Penguin UI's, styled by its own Tailwind
     classes in ui/navbar.html. The dark `.topbar` bar this replaced was the
     last hand-written component on the site. */

  /* ---------- Page heading (components/heading.html) ---------- */

  .heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
  .heading h1 { margin: 0; font-size: 28px; }
  .heading p { margin: 5px 0 0; color: #687384; }
  .eyebrow { color: #2563eb !important; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions a, .actions span { padding: 8px 12px; border: 1px solid #cfd7e1; border-radius: 7px; color: #283548; background: white; text-decoration: none; }

  /* ---------- Admin three-pane browser ---------- */

  .workspace { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(280px, 1.15fr) minmax(300px, 1.25fr); min-height: 560px; border: 1px solid #d9dfe7; border-radius: 11px; overflow: hidden; background: white; box-shadow: 0 10px 26px rgb(31 43 58 / 7%); }
  .pane + .pane { border-left: 1px solid #e1e5eb; }
  .pane-title { height: 54px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e8ed; background: #fafbfc; }
  .pane-title h2 { margin: 0; font-size: 14px; }
  .pane-title span { color: #7c8796; font-size: 12px; }
  .pane-list { padding: 10px; }
  .pane-list form { margin: 0; }
  .browser-item { width: 100%; display: grid; gap: 3px; padding: 11px 12px; text-align: left; border: 1px solid transparent; border-radius: 7px; color: #253246; background: transparent; cursor: pointer; }
  .browser-item:hover { background: #f2f6fc; }
  .browser-item.selected { border-color: #a9c7f6; background: #eaf2ff; }
  .browser-item small, .column small { color: #788495; }
  .column { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 3px 12px; padding: 10px 11px; border-bottom: 1px solid #edf0f3; }
  .column code { color: #315078; font-size: 12px; }
  .column small { grid-column: 1 / -1; }
  .column.system { color: #6b7686; background: #fafbfc; }
  .column.system code { color: #67788e; }
  .group-label { margin: 14px 0 4px; padding: 0 11px; color: #7c8796; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

  /* What can be done to whatever the pane is pointed at, rendered directly
     under it: under the selected table, and under the tables list for the
     profile-wide actions. Each link is a page of its own. */
  .browser-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; }
  .browser-actions a { padding: 6px 12px; border: 1px solid #a9c7f6; border-radius: 7px; color: #1d4ed8; background: #eaf2ff; font-size: 13px; font-weight: 600; text-decoration: none; }
  .browser-actions a:hover { background: #d8e8ff; }
  .browser-actions a.danger-action { border-color: #eccfcf; color: #a12b2b; background: #fdf3f3; }
  .browser-actions a.danger-action:hover { background: #fbe6e6; }
  .pane-footer { margin: 0 10px 10px; border-top: 1px solid #e5e8ed; padding-top: 12px; }
  .pane-footer a { border-color: #d9dfe7; color: #33415c; background: white; font-weight: 500; }
  .pane-footer a:hover { background: #f2f6fc; }
  .empty { margin: 8px; color: #7c8796; }

  /* ---------- Forms (components/form_card.html) ---------- */

  .form-main { width: min(900px, calc(100% - 32px)); }
  .back-link { display: inline-block; margin-bottom: 14px; color: #315f9d; text-decoration: none; }
  .form-card { padding: 25px; border: 1px solid #d9dfe7; border-radius: 11px; background: white; box-shadow: 0 10px 26px rgb(31 43 58 / 7%); }
  .form-card h1 { margin: 0; }
  .form-card > p { color: #687384; }
  .form-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
  .form-grid label { display: grid; align-content: start; gap: 6px; color: #465267; font-size: 12px; }
  .form-grid label.wide { grid-column: 1 / -1; }
  .form-grid small { color: #7c8796; }
  /* Where a field would be, when the answer is the server's rather than the
     user's — a link's index, which the server always makes. It sits in the
     grid like the label it replaces. */
  .form-grid .field-note { display: grid; align-content: start; gap: 6px; color: #465267; font-size: 12px; }
  .form-grid .field-note p { margin: 0; }
  .form-actions { margin-top: 20px; display: flex; justify-content: end; align-items: center; gap: 14px; }
  .form-actions a { color: #59677a; }
  .form-actions button { padding: 9px 16px; border: 0; border-radius: 6px; color: white; background: #2563eb; cursor: pointer; }
  .check-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 20px; }
  .check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 6px; }
  .check input { width: auto; }

  /* ---------- Alerts ---------- */

  /* The alert cards themselves are Penguin UI now — see ui/alert.html. What is
     left here is the plain coloured text that ui/notice.html and the error page
     use. */
  .error { color: #b42318; }
  .success { color: #067647; }
  .hint, .result-meta { color: #667385; }
  .error-page { width: min(600px, calc(100% - 32px)); margin: 15vh auto; padding: 24px; border: 1px solid #f1c4c0; border-radius: 10px; background: white; }
  .error-page h1 { margin-top: 0; }
  .error-page p { color: #a33a31; }

  /* ---------- Login and register (pages/login, pages/register) ---------- */

  .login-main { width: min(420px, calc(100% - 32px)); margin: 12vh auto; }
  .login-card { padding: 25px; border: 1px solid #d9dfe7; border-radius: 11px; background: white; box-shadow: 0 10px 26px rgb(31 43 58 / 7%); }
  .login-card h1 { margin: 0 0 18px; font-size: 24px; }
  .login-card label { display: grid; gap: 5px; margin-bottom: 14px; color: #465267; font-size: 12px; }
  .login-card button { width: 100%; border: 0; border-radius: 6px; padding: 10px 18px; color: white; background: #2563eb; cursor: pointer; }
  .login-card button:disabled, .login-card button.htmx-request { opacity: .55; cursor: wait; }
  .login-alt { margin: 14px 0 0; color: #667385; font-size: 12px; text-align: center; }

  /* ---------- Analytics (pages/analytics.html) ---------- */

  .analytics { display: grid; grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); align-items: start; gap: 16px; }
  .panel { margin-bottom: 16px; padding: 18px; border: 1px solid #dfe4ea; border-radius: 10px; background: white; }
  .panel h2 { margin: 0 0 14px; font-size: 17px; }
  .sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  .sidebar h2 { margin-bottom: 6px; }
  .catalog-load { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin: 14px 0; }
  .catalog-load label { margin: 0; }
  .schema-summary { margin: 8px 0; }
  .catalog-table { border-top: 1px solid #e4e7ec; padding: 9px 0; }
  .catalog-table summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .currency { color: #667385; font-size: 11px; }
  .starter-query, .secondary { margin-top: 9px; padding: 6px 9px; width: auto; border: 0; border-radius: 6px; color: #344054; background: #eef2f6; cursor: pointer; }
  .columns, .links ul { margin: 8px 0; padding: 0; list-style: none; }
  .columns li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
  .columns li span { color: #667385; font-size: 11px; text-align: right; }
  .column-name { width: auto; padding: 0; border: 0; color: #2563eb; background: none; font-family: ui-monospace, monospace; text-align: left; cursor: pointer; }
  .links { color: #667385; font-size: 12px; }
  .links li { padding: 2px 0; }
  .llm-context { border-top: 1px solid #e4e7ec; margin-top: 10px; padding-top: 10px; }
  .llm-context summary { cursor: pointer; font-weight: 600; }
  .llm-context textarea { min-height: 320px; margin-top: 8px; font-size: 11px; }
  .query-row { display: grid; grid-template-columns: 180px 120px; gap: 12px; margin-bottom: 12px; }
  .query-form label { display: grid; gap: 5px; color: #465267; font-size: 12px; }
  .query-form textarea { min-height: 130px; }
  .query-form .actions { margin-top: 12px; align-items: center; gap: 12px; }
  .query-form button { border: 0; border-radius: 6px; padding: 10px 18px; width: auto; color: white; background: #2563eb; cursor: pointer; }
  .query-form button:disabled, .htmx-request button, button.htmx-request { opacity: .55; cursor: wait; }
  .chart { height: 560px; }
  .table-wrap { max-height: 560px; overflow: auto; }
  table { width: 100%; border-collapse: collapse; background: white; }
  th, td { padding: 9px 11px; border: 1px solid #e4e7ec; text-align: left; white-space: nowrap; }
  th { position: sticky; top: 0; background: #f9fafb; }

  /* ---------- Table builder (Add table) ---------- */

  .builder-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e8ebf0; }
  .builder-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
  .builder-section h2 { margin: 0; font-size: 15px; color: #33415c; }
  .builder-section > .hint { margin: 8px 0 0; font-size: 13px; }
  .builder-section .count { margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-size: 12px; color: #4b5563; background: #eef1f6; }
  .builder-section > button.secondary { margin-top: 16px; padding: 9px 16px; border: 1px solid #c9d2de; border-radius: 6px; color: #24324a; background: #f4f6fa; cursor: pointer; }
  .builder-section > button.secondary:hover { background: #e9edf4; }

  .builder-table { margin-top: 14px; }
  .builder-table th { position: static; font-size: 12px; color: #5b6678; }
  .builder-table td { font-size: 13px; }
  .builder-table .mark { width: 34px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #4a5568; }
  .builder-table.preview .source-system td { color: #7a8496; background: #fbfcfd; }
  .builder-table.preview .source-relation td { color: #3c5a86; }
  /* A compound column's companions, in both tables: the server's columns, so
     they read as a block hanging off the definition row above them. */
  .builder-table .generated-row td, .builder-table.preview .source-generated td { color: #5b6678; background: #fbfcfd; }
  .builder-table .order { width: 78px; white-space: nowrap; }
  .builder-table .order .hint { padding-left: 12px; }

  button.toggle.move { min-width: 26px; padding: 3px 5px; }
  button.toggle.move + button.toggle.move { margin-left: 4px; }
  button.toggle:disabled { color: #b3bcc9; background: #f7f8fa; cursor: default; }

  /* What a compound choice will add, shown before it is added. */
  .compound-note { margin-top: 14px; padding: 12px 14px; border: 1px solid #dfe6f3; border-radius: 8px; background: #f7f9fe; }
  .compound-note p { margin: 0; font-size: 13px; color: #33415c; }
  .compound-note ul { margin: 8px 0; padding-left: 18px; font-size: 13px; }
  .compound-note li { padding: 1px 0; }
  .compound-note .hint { font-size: 12px; }

  /* Renaming what a compound row generates: closed by default, because the
     backend's names are the answer most tables keep. */
  .rename-generated > summary { font-size: 15px; color: #33415c; cursor: pointer; }
  .rename-generated > summary::marker { color: #8a94a6; }
  .rename-generated > .hint { margin: 8px 0 0; font-size: 13px; }
  .rename-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
  .rename-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e1e6ee; border-radius: 7px; background: white; }
  .rename-list li > code { flex: none; }
  .rename-list li > .hint { flex: none; font-size: 12px; }
  .rename-list input { flex: 1; min-width: 90px; }

  .builder-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .builder-list li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #e1e6ee; border-radius: 7px; background: white; }

  button.toggle { min-width: 34px; padding: 3px 7px; border: 1px solid #cdd5e0; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #24324a; background: #f6f8fb; cursor: pointer; }
  button.toggle:hover { background: #e9edf4; }
  button.toggle.mode-optional { color: #1d4ed8; border-color: #bfd0f5; background: #eef3fe; }
  button.toggle.mode-required { color: #a1410a; border-color: #f0cfae; background: #fdf3e9; }
  button.danger { padding: 4px 10px; border: 1px solid #eccfcf; border-radius: 5px; font-size: 12px; color: #a12b2b; background: #fdf3f3; cursor: pointer; }
  button.danger:hover { background: #f8e5e5; }

  .tag { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; color: #4b5563; background: #eef1f6; }
  .tag + .tag { margin-left: 4px; }

  /* ---------- Table definition workspace ---------- */

  /* Each operation is a .panel of its own, stacked; the deleting one is the
     only place on the site that drops data, so it is coloured like it. */
  .panel-subhead { margin: 22px 0 0; font-size: 13px; color: #33415c; }
  .panel-actions { margin-top: 16px; }
  .panel .form-grid { margin-top: 14px; }
  .panel .form-actions { margin-top: 16px; }
  .panel .count { margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-size: 12px; color: #4b5563; background: #eef1f6; }
  .panel > button.secondary { margin-top: 16px; padding: 9px 16px; border: 1px solid #c9d2de; border-radius: 6px; color: #24324a; background: #f4f6fa; cursor: pointer; }
  .panel > button.secondary:hover { background: #e9edf4; }
  .presentation-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: start; gap: 16px; }
  .presentation-panel > .hint { min-height: 40px; margin: -7px 0 15px; }
  .alias-list { overflow: hidden; border: 1px solid #e2e7ee; border-radius: 8px; background: white; }
  .alias-list-head, .alias-row { display: grid; grid-template-columns: minmax(90px, .8fr) 20px minmax(120px, 1.2fr) auto; align-items: center; gap: 8px; }
  .alias-list-head { padding: 8px 10px 6px; color: #7b8797; background: #f7f9fb; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .alias-row { margin: 0; padding: 8px 10px; border-top: 1px solid #e8ecf1; }
  .alias-current { min-width: 0; overflow: hidden; color: #33415c; font-size: 13px; text-overflow: ellipsis; }
  .alias-arrow { color: #9aa5b4; text-align: center; }
  .alias-row > input { min-width: 0; color: #24324a; font-size: 13px; font-weight: 500; }
  .alias-row > input:focus { border-color: #6ea1ed; outline: 3px solid rgb(37 99 235 / 12%); }
  .alias-row > button { padding: 9px 14px; border: 1px solid #b9cdf0; border-radius: 6px; color: #1d4ed8; background: #eef4ff; font-weight: 600; cursor: pointer; }
  .alias-row > button:hover { border-color: #8eb1eb; background: #deebff; }
  .alias-row > button:focus-visible { outline: 3px solid rgb(37 99 235 / 18%); outline-offset: 2px; }
  .alias-row-locked { background: #fafbfc; }
  .alias-row-locked .locked-label { grid-column: 3 / -1; }
  .locked-label { color: #8a94a4; font-size: 12px; }
  .column-order { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .column-order li { display: grid; grid-template-columns: 32px 30px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px 8px 8px; border: 1px solid #e2e7ee; border-radius: 8px; background: #fafbfc; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease; }
  .column-order li:hover { border-color: #b8cae3; box-shadow: 0 3px 10px rgb(31 43 58 / 7%); }
  .column-order li.is-dragging { z-index: 1; border-color: #7fa5df; box-shadow: 0 9px 22px rgb(31 43 58 / 18%); opacity: .82; transform: scale(1.015); }
  .drag-handle { display: grid; place-items: center; width: 32px; height: 34px; padding: 0; border: 0; border-radius: 6px; color: #8b97a8; background: transparent; font-size: 22px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
  .drag-handle:hover { color: #315f9d; background: #e9f0fb; }
  .drag-handle:focus-visible { color: #1d4ed8; outline: 3px solid rgb(37 99 235 / 18%); }
  .drag-handle:active { cursor: grabbing; }
  .order-position { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #64748b; background: #e9eef5; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .order-name { min-width: 0; overflow: hidden; color: #33415c; font-size: 13px; text-overflow: ellipsis; }
  .order-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e9ef; }
  .order-status { color: #788495; font-size: 12px; }
  .order-editor.is-dirty .order-status { color: #9a5a08; font-weight: 600; }
  .order-actions button { margin: 0; padding: 8px 13px; border: 0; border-radius: 6px; color: white; background: #2563eb; font-weight: 600; cursor: pointer; }
  .order-actions button.secondary { border: 1px solid #c9d2de; color: #344054; background: white; }
  .order-actions button:hover:not(:disabled) { background: #1d4ed8; }
  .order-actions button.secondary:hover:not(:disabled) { background: #eef2f6; }
  .order-actions button:focus-visible { outline: 3px solid rgb(37 99 235 / 18%); outline-offset: 2px; }
  .order-actions button:disabled { border-color: #e1e6ed; color: #adb6c3; background: #f3f5f7; cursor: default; }
  .sql-preview { margin: 12px 0 0; padding: 12px; max-height: 260px; overflow: auto; border: 1px solid #e4e7ec; border-radius: 8px; font: 12px/1.5 ui-monospace, monospace; color: #33415c; background: #fafbfc; white-space: pre-wrap; }
  .danger-panel { border-color: #eccfcf; }
  .danger-panel h2 { color: #a12b2b; }
  .form-actions button.danger-submit { background: #a12b2b; }

  /* ---------- Permissions (pages/permissions) ---------- */

  /* The switcher between pages that belong together but are deliberately
     apart: the three permission sections (pages/permissions/tabs.html), and
     the table-definition actions (pages/admin/table_definition/context.html).
     Both split one crowded screen into a page per decision, so both need the
     same thing — a way back to the siblings. */
  .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .tab { display: grid; gap: 2px; padding: 10px 16px; border: 1px solid #d9dfe7; border-radius: 9px; color: #33415c; background: white; text-decoration: none; }
  .tab small { color: #7c8796; font-size: 11px; }
  .tab:hover { background: #f2f6fc; }
  .tab.selected { border-color: #a9c7f6; background: #eaf2ff; }
  .tab.selected span { font-weight: 700; color: #1d4ed8; }

  /* ---------- Exchange rates (pages/admin/ecb) ---------- */

  /* The health card. Its colour is the answer to "can a foreign-currency
     amount be posted right now", so it is the one thing on the page that has
     to be readable without reading. */
  .status-card { border-left-width: 4px; }
  .status-card.healthy { border-left-color: #21643a; }
  .status-card.unhealthy { border-left-color: #a12b2b; }
  .status-card.unhealthy h2 { color: #a12b2b; }
  /* The postable limits. This is what the reader came for -- coverage dates
     are the mechanism behind it -- so it sits directly under the headline and
     is the only thing on the card set at reading size. */
  .postable { margin-top: 16px; padding: 14px; border: 1px solid #dfe4ea; border-radius: 8px; background: white; }
  .postable-lead { margin: 0 0 10px; color: #7c8796; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .postable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 0 0 10px; }
  .postable-grid dt { color: #33415c; font-size: 13px; font-weight: 600; }
  .postable-grid dd { margin: 3px 0 0; color: #17202a; font-size: 14px; }
  .postable-grid dd strong { font-size: 16px; font-variant-numeric: tabular-nums; }
  .postable-grid dd.hint { font-size: 12px; }

  /* Coverage reads left to right as one sentence -- reached, gap, owed -- so
     the two dates are compared rather than looked up one at a time. */
  .coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #f7f9fc; }
  .coverage-point { display: flex; flex-direction: column; gap: 2px; }
  .coverage-label { color: #7c8796; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .coverage-date { color: #17202a; font-size: 20px; font-variant-numeric: tabular-nums; }
  .coverage-gap { flex: 1; text-align: center; }
  .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 16px 0 0; }
  .status-grid dt { color: #7c8796; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .status-grid dd { margin: 3px 0 0; color: #17202a; font-size: 15px; font-variant-numeric: tabular-nums; }
  .currency-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
  .failure-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f3; }
  .tag-ok { color: #21643a; background: #f2f9f3; border-color: #cfe0c4; }
  .tag-bad { color: #a12b2b; background: #fdf3f3; border-color: #eccfcf; }
  /* Two facts per cell, so the second sits under the first rather than
     stretching the column. */
  .status-grid dd { font-size: 14px; line-height: 1.45; }

  /* The import log. Every column but the window is a number or an instant, so
     they line up in a monospaced digit and are read down, not across. */
  .builder-table td.numeric, .builder-table th.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .builder-table td.moment { white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* The endpoint is the same long URL on nearly every row: kept for evidence,
     truncated so it cannot set the column width, full text in the tooltip. */
  .endpoint { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attempt-failed td { background: #fdf7f7; }
  .attempt-error td { padding-top: 0; color: #a12b2b; font-size: 12px; background: #fdf7f7; border-top: 0; }

  .table-scroll { overflow-x: auto; }
  .link-action { color: #2563eb; text-decoration: none; }
  .notice { padding: 10px 12px; border: 1px solid #cfe0c4; border-radius: 8px; color: #21643a; background: #f2f9f3; }

  /* The shortcut buttons — read everything, full access, clear — sit above the
     matrix they fill in, so they are wider than the cell buttons and read as
     sentences rather than as symbols. */
  .shortcut-row { margin: 12px 0 4px; }
  .shortcut-row button.secondary { margin-top: 0; padding: 8px 14px; }

  /* Objects down the side, actions across the top. Each cell is its own form,
     because a grant is one call to the server either way. */
  .grant-matrix td, .grant-matrix th { white-space: normal; }
  .grant-matrix th { text-transform: capitalize; }
  .grant-matrix .object-label { display: block; font-weight: 600; color: #24324a; }
  .grant-matrix td small { display: block; margin: 2px 0; color: #7c8796; }
  .grant-matrix td code { font-size: 11px; color: #5b6678; }
  .grant-cell { width: 82px; text-align: center; vertical-align: middle; }
  .grant-cell .actions { justify-content: center; gap: 4px; }
  .grant-cell form { margin: 0 auto; }
  .grant-cell button { min-width: 34px; padding: 4px 9px; border-radius: 5px; cursor: pointer; }
  button.cell-on { border: 1px solid #a9d3b4; color: #21643a; background: #eefaf1; }
  button.cell-on:hover { border-color: #e0b7b3; color: #a12b2b; background: #fdf3f3; }
  button.cell-off { border: 1px dashed #cdd5e0; color: #8a94a4; background: white; }
  button.cell-off:hover { border-style: solid; border-color: #a9c7f6; color: #1d4ed8; background: #eef3fe; }
  .cell-closed { color: #c3cad4; }
  .cell-inherited { color: #1d4ed8; }

  /* ---------- Import preparation (pages/import_export/import) ---------- */

  /* A mapping row is read left to right as a sentence: the column `a` takes its
     value from "hl — position 3", which on the first row holds "value-a". The
     example is what people actually recognise their data by, so it gets the
     room, and it is the last thing on the line because it is the confirmation
     rather than the choice. */
  .mapping-table select { width: 100%; min-width: 220px; }
  .mapping-table .example { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #33415c; }

  /* A secondary action in a form's action row — "back a step". The row's own
     rule paints every button as the primary one, so this has to say otherwise
     at the same specificity. */
  .form-actions button.secondary { margin-top: 0; border: 1px solid #c9d2de; color: #24324a; background: #f4f6fa; }
  .form-actions button.secondary:hover { background: #e9edf4; }

  /* ---------- Narrow screens ---------- */

  @media (max-width: 850px) {
    .heading { align-items: start; flex-direction: column; }
    .workspace { grid-template-columns: 1fr; }
    .pane + .pane { border-left: 0; border-top: 1px solid #e1e5eb; }
    .analytics { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; }
    .query-row { grid-template-columns: 1fr; }
    .presentation-layout { grid-template-columns: 1fr; }
    .presentation-panel > .hint { min-height: 0; }
  }

  @media (max-width: 520px) {
    .alias-list-head { display: none; }
    .alias-row { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.3fr); }
    .alias-row > button { grid-column: 3; width: 100%; }
    .alias-row-locked .locked-label { grid-column: 3; }
    .order-actions { grid-template-columns: 1fr 1fr; }
    .order-status { grid-column: 1 / -1; }
    .order-actions button { width: 100%; }
  }

}