/* The page: its shell (Hyper.UI.Page.View.Shell) and common parts, then each page's own. Every colour, radius and shadow is a
   token from tokens.css, so a theme is just another set of values. The shell was prototyped in docs/viz/shell.html. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--fs)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Shell ------------------------------------------------------------------------------------------------ */
/* data-sidebar on .shell: "expanded" or "icons", as the person left it. Under 768px the sidebar is a drawer instead,
   opened with data-drawer="open". */
.shell { display: grid; grid-template-columns: var(--sb-cur, var(--sb-w)) minmax(0, 1fr); min-height: 100vh;
  transition: grid-template-columns .2s var(--ease); }
.shell[data-sidebar="icons"] { --sb-cur: var(--sb-w-icons); }

.sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sb-bg);
  border-right: 1px solid var(--line); overflow: hidden; z-index: 30; }
/* The sidebar's edge, to drag (from 768px up, expanded). While it is dragged nothing animates or gets selected. */
.sb-resize { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; z-index: 31; touch-action: none; }
.sb-resize::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background .15s var(--ease); }
.sb-resize:hover::after, .sb-resize:focus-visible::after, .sb-resizing .sb-resize::after { background: var(--accent); }
.sb-resize:focus-visible { outline: none; }
.sb-resizing, .sb-resizing * { cursor: col-resize !important; user-select: none !important; }
.sb-resizing .shell { transition: none; }
.shell[data-sidebar="icons"] .sb-resize { display: none; }
.sb-head { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 12px 0 14px; flex: none; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .01em; color: var(--text); white-space: nowrap; min-width: 0; }
.brand-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 600 13px var(--mono);
  color: var(--accent-text); background: linear-gradient(135deg, var(--c-string), var(--c-number) 55%, var(--c-money)); }
.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 12px; scrollbar-width: thin; }

/* The organization chosen, at the top: a button that opens a menu of the others, below it. */
.org-switch-wrap { position: relative; margin: 4px 0 12px; }
.sb-item.org-switch { height: 46px; padding: 0 8px; border: 1px solid var(--line); background: var(--raised); box-shadow: var(--shadow-s); }
.sb-item.org-switch:hover { border-color: var(--line-strong); background: var(--raised); }
.org-switch-text { flex: 1; min-width: 0; line-height: 1.25; }
.org-switch-text .name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.org-switch-text .sub { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.org-switch > svg:last-child { width: 14px; height: 14px; color: var(--faint); }
.menu.org-menu { top: calc(100% + 6px); bottom: auto; right: auto; min-width: 100%; width: max-content; max-width: 320px;
  max-height: min(420px, 70vh); overflow-y: auto; }
.org-menu .menu-item .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-menu .menu-item { height: 36px; align-items: center; color: var(--text-2); }
.org-menu .menu-item .muted { font-size: var(--fs-xs); }
.org-menu .menu-item.on { color: var(--strong); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.menu-item:hover { background: var(--hover); }
.avatar.s { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

/* Where the sidebar is: the space, with a way back to all of them. */
.sb-context { margin: 4px 0 10px; }
.sb-back { display: flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--muted); font-size: var(--fs-xs); border-radius: var(--r-s); }
.sb-back:hover { color: var(--text); background: var(--hover); }
.sb-here { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-m); }
.sb-here .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-here .sub { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center; font-weight: 600; font-size: 13px;
  color: var(--strong); background: color-mix(in srgb, var(--hue, var(--c-number)) 30%, transparent); }
.avatar.round { border-radius: 50%; }
.hue-0 { --hue: var(--c-number); } .hue-1 { --hue: var(--c-money); } .hue-2 { --hue: var(--c-enum); }
.hue-3 { --hue: var(--c-string); } .hue-4 { --hue: var(--c-date); } .hue-5 { --hue: var(--c-bool); }

.sb-group + .sb-group { margin-top: 14px; }
.sb-group-title { padding: 0 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap; }
.sb-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: var(--r-s);
  color: var(--text-2); text-decoration: none; white-space: nowrap; font: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.sb-item svg { flex: none; width: 18px; height: 18px; }
.sb-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-item .count { font-size: 11px; padding: 0 7px; border-radius: var(--r-pill); background: var(--press); color: var(--text-3); font-variant-numeric: tabular-nums; }
.sb-item .count.hot { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.sb-item:hover { background: var(--hover); color: var(--text); }
.sb-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--strong); font-weight: 550; }
.sb-item.active::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sb-sub { margin: 2px 0 4px 28px; padding-left: 8px; border-left: 1px solid var(--line); }
.sb-sub .sb-item { height: 28px; font-size: var(--fs-s); }
.sb-sub .sb-item.active::before { display: none; }
/* An organization's folders: each indented by how deep it is. */
.sb-folder { height: 30px; font-size: var(--fs-s); padding-left: calc(10px + var(--indent, 0px)); }
.sb-folder svg { width: 16px; height: 16px; }
.sb-folder[data-depth="1"] { --indent: 14px; } .sb-folder[data-depth="2"] { --indent: 28px; } .sb-folder[data-depth="3"] { --indent: 42px; }
.sb-folder[data-depth="4"] { --indent: 56px; } .sb-folder[data-depth="5"] { --indent: 70px; } .sb-folder[data-depth="6"] { --indent: 84px; }
.sb-folder[data-depth="7"] { --indent: 98px; } .sb-folder[data-depth="8"] { --indent: 112px; }
.folder-mark { --hue: var(--c-date); }
.folder-mark svg { width: 16px; height: 16px; }

.sb-foot { flex: none; border-top: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
/* The person, and a menu with their preferences and signing out. */
.user-menu-wrap { position: relative; }
.sb-item.sb-user { height: 40px; padding: 0 8px; }
.sb-user svg:last-child { width: 14px; height: 14px; color: var(--faint); }
.menu-catcher { position: fixed; inset: 0; z-index: 65; }
.menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 70; padding: 6px; border-radius: var(--r-l);
  background: var(--popover); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.menu-head { padding: 6px 8px 8px; } .menu-head .name { font-weight: 600; } .menu-head .sub { color: var(--muted); font-size: var(--fs-xs); }
.theme-seg + .menu-label { margin-top: 6px; }
.menu-label { padding: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }
.menu-item { display: flex; width: 100%; height: 32px; border: 0; background: none; justify-content: flex-start; gap: 10px; padding: 0 8px; }
.menu-item svg { width: 16px; height: 16px; }
.icon-btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); border: 0; background: none;
  color: var(--text-3); cursor: pointer; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* The theme: three choices side by side. */
.theme-seg { display: flex; gap: 2px; padding: 2px; margin: 0 2px; border-radius: var(--r-m); background: var(--press); }
.theme-seg button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 4px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--text-3); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button:hover { color: var(--text); }
.theme-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-s); }

/* Icons only (from 768px up; a drawer always shows labels). */
@media (min-width: 768px) {
  .shell[data-sidebar="icons"] {
    & .sb, & .sb-scroll { overflow: visible; }
    & .sb-item { justify-content: center; padding: 0; }
    & :is(.sb-tree, .sb-item .label, .sb-item .count, .sb-sub, .sb-back span, .sb-here > div:last-child, .brand-name, .sb-user > svg:last-child,
          .org-switch-text, .org-switch > svg:last-child) { display: none; }
    & .sb-item.org-switch { width: 40px; height: 40px; margin: 0 auto; padding: 0; }
    & .menu.org-menu { top: 0; bottom: auto; }
    & .sb-group-title { height: 1px; padding: 0; margin: 0 10px 8px; background: var(--line); color: transparent; overflow: hidden; }
    & :is(.sb-head, .sb-here, .sb-back) { justify-content: center; padding-left: 0; padding-right: 0; }
    & .sb-foot { align-items: center; }
    & .sb-item.sb-user { width: 40px; padding: 0; }
    & .menu { left: calc(100% + 10px); right: auto; bottom: 0; width: 240px; }
    & .menu [data-tip]:hover::after, & .user-menu-wrap:has(.menu) .sb-user::after { display: none; }
    /* What needs attention keeps a dot on its icon. */
    & .sb-item .count.hot { display: block; position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; padding: 0; font-size: 0; background: var(--warn); }
    /* A label beside each icon, on hover. */
    & [data-tip] { position: relative; }
    & [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
      padding: 4px 9px; border-radius: var(--r-s); background: var(--strong); color: var(--bg); font-size: var(--fs-xs); font-weight: 500;
      white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-m); z-index: 60; }
  }
}

/* The column beside the sidebar: the top bar and the page. */
.main-col { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .menu-btn { display: none; margin-left: -8px; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: var(--fs-s); color: var(--muted); white-space: nowrap; overflow: hidden; }
.crumbs button { font: inherit; border: 0; background: none; color: var(--muted); padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.crumbs button:hover { color: var(--text); background: var(--hover); }
.crumbs .sep { color: var(--faint); }
.crumbs .here { color: var(--text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 6px; }

.content { width: 100%; max-width: 960px; margin: 0 auto; padding: 28px 24px 72px; }
.content.wide { max-width: 1400px; }

.scrim { display: none; }

/* Mobile: the sidebar is a drawer over the page. */
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--sb-w), 86vw); height: auto; transform: translateX(-102%);
    transition: transform .22s var(--ease); box-shadow: none; }
  .shell[data-drawer="open"] .sb { transform: none; box-shadow: var(--shadow-m); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: color-mix(in srgb, var(--shade) 45%, transparent);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .shell[data-drawer="open"] .scrim { opacity: 1; pointer-events: auto; }
  .top { padding: 0 16px; }
  .top .menu-btn { display: grid; }
  .sb-toggle { display: none !important; }
  .content { padding: 20px 16px 64px; }
}
@media (max-width: 767px) { .sb-resize { display: none; } }

/* Page parts -------------------------------------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 220px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1.mono-title { font-family: var(--mono); font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: 28px 0 10px; }
h3 { font-size: var(--fs); font-weight: 600; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 4px 0 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: var(--fs-s); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; box-shadow: var(--shadow-s); }
.card + .card { margin-top: 12px; }
.card + textarea, .card + .json-view { margin-top: 12px; }
/* An organization's colour: the picker, and how it looks in each theme (fixed palettes, whatever the page's). */
.colour-row input[type=color] { width: 44px; height: 34px; padding: 2px; flex: none; cursor: pointer; }
.colour-row input[type=text] { max-width: 140px; font-family: var(--mono); }
.colour-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.cp-pane { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--line); }
.cp-pane.light { background: #f6f6f8; color: #1f2328; --cp-strong: #0b0c0e; }
.cp-pane.dark { background: #121316; color: #e8e8ec; --cp-strong: #ffffff; }
.cp-title { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.cp-nav { position: relative; padding: 6px 10px; border-radius: var(--r-s); font-weight: 550; color: var(--cp-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cp-nav::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.cp-button { padding: 5px 12px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-text); font-weight: 550; }
.cp-link { color: var(--accent); text-decoration: underline; }
.cp-meta { font-size: var(--fs-xs); opacity: .75; font-variant-numeric: tabular-nums; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; flex: 1; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* A list of things in a card, one per row. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.rows > li:first-child { border-top: 0; }
.rows > li.click { cursor: pointer; } .rows > li.click:hover { background: var(--hover); }
.rows .grow { flex: 1; min-width: 0; }
.rows .name { font-weight: 600; }
/* On a phone what follows the name goes on its own line. */
@media (max-width: 600px) {
  .rows > li { flex-wrap: wrap; }
  .rows > li > .grow { flex-basis: calc(100% - 64px); }
  .rows > li > .avatar ~ :not(.grow) { margin-left: 40px; }
}
.rows .sub { color: var(--muted); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:where(button:not(.nt *)) { font: inherit; font-size: var(--fs-s); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-s); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
:where(button:not(.nt *)):hover { background: var(--hover); }
:where(button:not(.nt *)) > svg { width: 16px; height: 16px; flex: none; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--strong)); }
button.ghost { border-color: transparent; background: none; }
button.ghost:hover { background: var(--hover); }
button.link { border: 0; background: none; color: var(--accent); padding: 0 4px; height: auto; }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

label { display: block; font-size: var(--fs-s); font-weight: 500; color: var(--text-2); margin: 14px 0 6px; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel], select, textarea { width: 100%; font: inherit; color: var(--text);
  background: var(--sunken); border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: 7px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
textarea { font: var(--fs-s)/1.45 var(--mono); }
label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--text); }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs);
  background: var(--press); color: var(--text-2); }
.chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad-text); }
.chip.on, .chip.info { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.notice { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 16px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-s); }
.notice > span { flex: 1; }
.notice.error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--bad-text); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); color: var(--ok); }

.table-wrap { overflow-x: auto; }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }

/* Favourites */
button.star { border: 0; background: none; height: 28px; width: 28px; padding: 0; justify-content: center; color: var(--faint); flex: none; }
button.star svg, .star svg { width: 17px; height: 17px; }
button.star:hover { color: var(--warn); background: var(--hover); }
.star.on { color: var(--warn); } .star.on svg { fill: currentColor; }
button.star.btn-star { width: auto; padding: 0 10px; border: 1px solid var(--line-strong); color: var(--text); }
button.star.btn-star.on svg { color: var(--warn); }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fav-grid .card + .card { margin-top: 0; }
.card.fav { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; }
.card.fav:hover { border-color: var(--line-strong); box-shadow: var(--shadow-m); }
button.fav-open { flex: 1; min-width: 0; height: auto; padding: 8px; border: 0; background: none; justify-content: flex-start; gap: 12px;
  font-size: var(--fs); font-weight: 600; }
button.fav-open:hover { background: none; }
button.fav-open .name { overflow: hidden; text-overflow: ellipsis; }
.fav-icon { width: 34px; height: 34px; border-radius: var(--r-m); display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c-number) 16%, transparent); color: var(--c-number); }
.fav-icon svg { width: 18px; height: 18px; }
.empty-hint { color: var(--muted); font-size: var(--fs-s); }
.empty-hint button.link { font-size: inherit; }
/* A row that opens what it names. */
button.row-open { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none; justify-content: flex-start; font-size: var(--fs); }
button.row-open:hover { background: none; color: var(--accent); }
.rows > li:has(.row-open):hover { background: var(--hover); }
.rows > li.dashboard { padding-left: 12px; }
.sb-sub .sb-item svg { width: 14px; height: 14px; color: var(--warn); fill: currentColor; }

/* Sign in */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 24px; padding: 24px 16px; }
.signin { width: 100%; max-width: 380px; padding: 28px; }
.signin .brand { margin-bottom: 18px; }
.signin button.primary { width: 100%; justify-content: center; margin-top: 20px; height: 36px; }
.signin-alt { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.signin-alt button { width: 100%; justify-content: center; height: 36px; }
.signin-alt button.provider { gap: 10px; }
.provider-mark { width: 18px; height: 18px; flex: none; }
.signin-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; color: var(--muted); font-size: var(--fs-s); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.signin button.link { margin-top: 12px; }
form.add .invite { align-items: center; margin: 8px 0 4px; gap: 8px; }

/* Tabs, as on the status page. */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: -4px 0 16px; scrollbar-width: none; }
.tabs button { height: 36px; border: 0; border-radius: 0; background: none; color: var(--muted); padding: 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); background: none; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }

/* Each page's own ---------------------------------------------------------------------------------------- */
.error { color: var(--bad-text); margin: 12px 0 0; }
.ok { color: var(--ok); }
.row.spread { justify-content: space-between; }
.row.spread h2 { margin: 0; }
.card > .row:first-child { margin-top: 0; }
.card > strong:first-child { display: block; margin-bottom: 4px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
ul.plain li:last-child { border-bottom: none; }
ul.plain .name { font-weight: 600; }
ul.plain .id { color: var(--muted); font-size: var(--fs-s); }
button.link.danger { color: var(--danger); }
pre.log { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px; overflow-x: auto; font: var(--fs-xs)/1.5 var(--mono); }
.diag { margin: 6px 0; font-size: var(--fs-s); }
.diag.Error { color: var(--bad-text); } .diag.Warning { color: var(--muted); }
.dev { margin-top: 40px; border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.dev input[type=text] { width: 14em; }
main.nt-preview { padding: 24px; }

.notice.past { border-color: var(--accent); }
li.member { align-items: center; flex-wrap: wrap; }
li.member .grow { flex: 1 1 200px; min-width: 0; }
li.member .name { font-weight: 600; }
li.member .id { color: var(--muted); font-size: var(--fs-s); }
form.add { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
form.add .found { margin: 8px 0 4px; font-weight: 600; }
form.add .found::before { content: "Found: "; font-weight: 400; color: var(--muted); }
button.danger-button { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }

li.blueprint { align-items: center; }
#editor-text { min-height: 360px; }
li.diag { display: block; padding: 4px 0; }
li.diag.Error { color: var(--bad-text); }
li.diag.Warning { color: var(--muted); }
li.held, li.instance, li.version { align-items: center; }
.update { color: var(--accent); font-weight: 600; }
li.change.sensitive { color: var(--danger); font-weight: 600; }
li.change { display: block; padding: 3px 0; }
#built-json { max-height: 360px; overflow: auto; }
pre.diff { white-space: pre-wrap; max-height: 360px; overflow: auto; margin: 4px 0 0; }
.diff-add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); display: block; }
.diff-del { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); display: block; }
.diff-same { display: block; }
.diff-skip { color: var(--muted); display: block; }
button.link.selected { font-weight: 700; text-decoration: underline; }

/* Dashboards */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-top: 12px; }
.grid .card + .card { margin-top: 0; }
.widget { min-width: 0; display: flex; flex-direction: column; }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; }
@media (max-width: 720px) { .grid > .widget { grid-column: 1 / -1; } }
.widget-title { font-weight: 600; margin-bottom: 8px; }
.stat-value { font-size: 32px; font-weight: 650; line-height: 1.1; overflow-wrap: anywhere; }
.stat-label { color: var(--muted); font-size: var(--fs-s); margin-top: 4px; }
/* A property's change since the instance before, and a line of its last instances. */
.stat-change { font-size: var(--fs-xs); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-change.up { color: var(--ok); } .stat-change.down { color: var(--bad-text); } .stat-change.flat { color: var(--muted); }
svg.spark { display: block; width: 100%; height: 34px; margin-top: 8px; overflow: visible; }
svg.spark polyline { stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.spark circle { fill: var(--accent); }
/* An input widget: a button, a form from its blueprint's input, or a file; and how it came out. */
.input-form { display: flex; flex-direction: column; gap: 8px; }
.input-field { display: flex; flex-direction: column; gap: 3px; }
.input-field label { font-size: var(--fs-s); font-weight: 500; }
.input-field .req { color: var(--bad-text); }
.input-field .small { font-size: var(--fs-xs); margin: 0; }
.input-field.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.input-field textarea { font-family: var(--mono); font-size: var(--fs-xs); }
.input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input-row button svg { width: 14px; height: 14px; }
.input-group { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input-group legend { font-size: var(--fs-s); font-weight: 600; padding: 0 4px; }
.input-group .req, .input-label .req { color: var(--bad-text); }
.input-label { font-size: var(--fs-s); font-weight: 500; }
.input-rows-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.input-row-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--sunken); font-size: var(--fs-s); }
.input-row-item[draggable="true"] { cursor: grab; }
.input-row-item.dragging { opacity: .5; }
.input-row-item .grip { color: var(--faint); letter-spacing: -3px; font-size: 11px; }
.input-row-item .row-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.input-row-item .icon-btn { width: 24px; height: 24px; }
.input-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.input-add svg { width: 13px; height: 13px; }
.input-chips .chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px; background: var(--surface); }
.input-chips .chip { background: var(--hover); color: var(--text); font-size: var(--fs-xs); }
.input-chips .chip-x { border: 0; background: none; padding: 0 0 0 2px; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; min-height: 0; }
.input-chips .chips input { border: 0; flex: 1 1 8em; min-width: 6em; background: transparent; padding: 2px 4px; }
.with-unit { display: flex; align-items: center; gap: 6px; }
.with-unit input { flex: 1; min-width: 0; }
.with-unit .unit { font-size: var(--fs-xs); font-family: var(--mono); }
.item-editor { border: 1px solid var(--accent); border-radius: var(--r-m); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--raised); }
.item-head { font-weight: 600; font-size: var(--fs-s); }
/* Over a narrow card, or on a phone, an item's form is a dialog over the page. */
.item-backdrop { display: none; }
.item-wrap.narrow .item-backdrop { display: block; position: fixed; inset: 0; background: color-mix(in srgb, var(--shade) 35%, transparent); z-index: 60; }
.item-wrap.narrow .item-editor { position: fixed; z-index: 61; left: 50%; top: 12vh; transform: translateX(-50%); width: min(30rem, calc(100vw - 32px)); max-height: 76vh; overflow: auto; box-shadow: var(--shadow-m); }
@media (max-width: 767px) {
  .item-wrap .item-backdrop { display: block; position: fixed; inset: 0; background: color-mix(in srgb, var(--shade) 35%, transparent); z-index: 60; }
  .item-wrap .item-editor { position: fixed; z-index: 61; left: 50%; top: 8vh; transform: translateX(-50%); width: calc(100vw - 32px); max-height: 84vh; overflow: auto; box-shadow: var(--shadow-m); }
}
.zone-note { font-size: var(--fs-xs); margin-left: auto; }
.input-ask { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--warn) 12%, transparent); font-size: var(--fs-s); }
.input-ask .grow { flex: 1; }
.input-outcome { margin: 10px 0 0; font-size: var(--fs-s); }
.input-outcome.ok { color: var(--ok); } .input-outcome.failed { color: var(--bad-text); }
.input-outcome button.link { font-size: inherit; }
/* A note: headings, paragraphs and lists; its text is a field on the card while editing. */
.note-body p { margin: 0 0 8px; } .note-body p:last-child, .note-body ul:last-child { margin-bottom: 0; }
.note-body ul { margin: 0 0 8px; padding-left: 20px; }
.note-h { font-weight: 650; margin: 4px 0 6px; } .note-h1 { font-size: 20px; } .note-h2 { font-size: 16px; } .note-h3 { font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
textarea.note-edit { width: 100%; min-height: 72px; resize: vertical; font: inherit; }
/* Every widget's frame: a head with its title and tools, its body, and a foot saying where its data is from. */
.widget.w { padding: 0; }
.w-head { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px 0 16px; }
.w-title { font-weight: 600; font-size: var(--fs-s); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.w-title-input { flex: 1; width: auto; min-width: 0; height: 28px; padding: 0 6px; margin-left: -6px; font-weight: 600; font-size: var(--fs-s);
  border: 1px solid transparent; border-radius: var(--r-s); background: none; color: var(--text); }
input.w-title-input:hover { border-color: var(--line-strong); }
input.w-title-input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.w-tools { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.widget:hover .w-tools, .widget:focus-within .w-tools { opacity: 1; }
.w-body { padding: 4px 16px 12px; flex: 1; min-width: 0; }
.w-head + .w-body { padding-top: 0; }
.widget.w > .w-body:first-child { padding-top: 14px; }
.w-foot { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: auto; padding: 7px 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-xs); }
.w-foot .grow { flex: 1; }
.w-foot .mono { font-family: var(--mono); }
.w-foot .behind { color: var(--warn); }
.w-foot .older-build { color: var(--text-3); }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: var(--r-s); border: 0; background: none;
  color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
/* The card chosen while editing, whose settings the panel shows. */
.dash-edit .widget { cursor: pointer; }
.dash-edit .widget.chosen.w, .dash-edit .widget.chosen .card { box-shadow: 0 0 0 2px var(--accent); }
/* Managing widgets while editing: a grip to move one, its right edge to widen it, an × to delete it; hidden ones greyed, doomed ones fading. */
.dash-edit .widget { position: relative; }
.w-grip { cursor: grab; color: var(--muted); font-size: 14px; padding: 0 2px; margin-left: -8px; user-select: none; touch-action: none; }
.w-grip:hover { color: var(--text); }
.w-grip:active { cursor: grabbing; }
.w-edge { position: absolute; top: 12px; bottom: 12px; right: -8px; width: 10px; cursor: ew-resize; touch-action: none; z-index: 3; border-radius: 4px; }
.w-edge:hover, .w-resizing .w-edge { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.w-resizing, .w-resizing * { cursor: ew-resize !important; user-select: none; }
.w-remove { color: var(--muted); font-size: 16px; }
.w-remove:hover { color: var(--danger); }
.widget.w-hidden { opacity: .5; }
.widget.w-hidden::after { content: "hidden"; position: absolute; top: 8px; right: 40px; font-size: var(--fs-xs); color: var(--muted); }
.widget.doomed, .wl-row.doomed { opacity: .3; transition: opacity .2s; }
.w-dragging { opacity: .4; }
.grid > .w-drop-before { box-shadow: -4px 0 0 -1px var(--accent); }
.grid > .w-drop-after { box-shadow: 4px 0 0 -1px var(--accent); }
#widget-list .w-drop-before { box-shadow: 0 -2px 0 var(--accent); }
#widget-list .w-drop-after { box-shadow: 0 2px 0 var(--accent); }
.edit-bar.confirm { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* The panel's list of widgets, and a widget's settings. */
#widget-list { margin: 8px 0; }
.wl-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--r-s); }
.wl-row:hover { background: var(--hover); }
.wl-row.w-hidden .wl-name { opacity: .5; }
.wl-name { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.wl-kind { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.add-widget { width: 100%; margin-top: 4px; }
.add-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
#widget-settings label { display: block; margin-top: 10px; }
#widget-settings label.check { display: flex; align-items: center; gap: 6px; }
#widget-settings select, #widget-settings input[type=text], #widget-settings input[type=number], #widget-settings textarea { width: 100%; }
#widget-settings .row.spread label { margin-top: 10px; }
.setting-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: var(--fs-s); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
#widget-settings label { display: block; margin-top: 10px; }
#widget-settings input, #widget-settings select { width: 100%; }

/* The head: the clock, and a pill per source that opens on its recent instances. */
.pop-wrap { position: relative; display: inline-flex; }
#clock-button svg, .pop-row button svg { width: 16px; height: 16px; }
#clock-button { display: inline-flex; align-items: center; gap: 6px; }
#clock-button.open { border-color: var(--accent); }
.sources { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 4px; align-items: center; }
.sources .lbl { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: var(--fs-s); color: var(--text); }
.pill:hover { border-color: var(--line-strong); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.pill .dot.failed { background: var(--bad); }
.pill .dot.running { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.pill .dot.past { background: var(--c-date); }
.pill .dot.none { background: var(--line-strong); }
.pill .seq { color: var(--muted); font-variant-numeric: tabular-nums; }
.pill.open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 320px; max-width: calc(100vw - 32px); padding: 8px; border-radius: var(--r-l);
  background: var(--popover); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow-m); text-align: left; }
.pop.right { left: auto; right: 0; }
.pop h3 { margin: 2px 6px 6px; font-size: var(--fs-s); overflow-wrap: anywhere; }
.pop .sub { margin: -4px 6px 8px; color: var(--muted); font-size: var(--fs-xs); }
.pop .sub.after { margin: 6px 6px 0; }
.pop .pop-note { margin: 4px 8px; font-size: var(--fs-s); }
.pop .error { margin: 4px 8px; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 7px 8px; border: 0; background: none; border-radius: var(--r-s);
  cursor: pointer; text-align: left; color: var(--text); font-size: var(--fs-s); }
.pop-item:hover { background: var(--hover); }
.pop-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pop-item .grow { flex: 1; min-width: 0; }
.pop-item .mono { font-family: var(--mono); font-size: var(--fs-xs); }
.pop-item .t { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pop-sep { height: 1px; background: var(--line); margin: 6px 0; }
.trig { font-size: 11px; padding: 0 6px; border-radius: var(--r-pill); background: var(--press); color: var(--text-3); }
.res { font-size: 11px; font-weight: 600; } .res.ok { color: var(--ok); } .res.failed { color: var(--bad-text); }
.pop-row { display: flex; gap: 6px; padding: 4px 6px; align-items: center; }
.pop-row input { flex: 1; min-width: 0; }
.pop-row .grow { flex: 1; }
.pop-row button { display: inline-flex; align-items: center; gap: 6px; }
.locked-note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
.locked-note svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .pop, .pop.right { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; } }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
table.data th { text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; white-space: nowrap; }
table.data td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; }
table.data td.num { font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pager button { height: 28px; padding: 0 10px; }
label.inline { display: inline; margin: 0; }
svg.chart { width: 100%; height: auto; display: block; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .zero-line { stroke: var(--muted); stroke-width: 1; }
.chart .axis-text, .chart .axis-title { fill: var(--muted); font-size: 11px; }
.chart .guide { stroke: var(--muted); stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.chart .guide.on { opacity: 1; }
.chart .guide.selected { stroke: var(--text); stroke-dasharray: none; }
.chart .bar { opacity: .85; } .chart .bar.active { opacity: 1; }
.chart .band { cursor: pointer; }
.chart .tip-box { fill: var(--surface); stroke: var(--line); }
.chart .tip-title { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart .tip-text { fill: var(--text); font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--fs-s); border-radius: var(--r-pill); }
.legend-item.off { opacity: .45; text-decoration: line-through; }
.chart-selected { font-size: var(--fs-s); margin-top: 4px; }
.chart-note { font-size: var(--fs-xs); margin-top: 4px; }
.widget-row, .series-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.widget-row button { height: 26px; padding: 0 8px; }
.series-row input[type=text] { width: 12em; padding: 4px 8px; }
.series-row input[type=color] { width: 2.4em; height: 1.9em; padding: 0; border: 1px solid var(--line); background: none; }
select { width: auto; padding: 5px 8px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.control label { margin: 0 0 2px; font-size: var(--fs-s); }
.control input[type=text] { width: auto; }

/* JSON, read-only, as an editor shows it (Hyper.UI.Page.View.Json). */
.json-view { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 10px 10px; font-size: var(--fs-s); }
.json-tools { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 2px; }
.json-tools button.link { font-size: var(--fs-xs); padding: 2px 6px; }
.json-lines { overflow-x: auto; font: 12.5px/1.55 var(--mono); white-space: pre; }
.jl { display: flex; align-items: baseline; }
.jl .jfold { width: 16px; flex: none; text-align: center; color: var(--muted); }
.jl button.jfold { height: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 10px; cursor: pointer; border-radius: 3px; display: inline; }
.jl button.jfold:hover { color: var(--text); background: var(--press); }
.jl .jind { white-space: pre; }
.j-key { color: var(--j-key); } .j-str { color: var(--j-str); } .j-num { color: var(--j-num); } .j-lit { color: var(--j-lit); } .j-p { color: var(--muted); }
.j-note { color: var(--muted); font-style: italic; font-family: var(--font); font-size: var(--fs-xs); }
button.j-folded { display: inline; height: auto; border: 1px solid var(--line); background: var(--press); border-radius: 4px; padding: 0 4px; font: inherit; color: var(--muted); cursor: pointer; }
button.j-folded:hover { color: var(--text); }

/* A dashboard being edited: one bar to save or cancel, and the grid beside a panel of its widgets, document and versions. */
.edit-bar { position: sticky; top: calc(var(--top-h) + 8px); z-index: 20; display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  padding: 8px 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-s); font-size: var(--fs-s); }
.edit-bar .grow { flex: 1; min-width: 0; }
.dash-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 12px; }
.dash-edit .dash-grid > .grid { margin-top: 0; }
.inspector { position: sticky; top: calc(var(--top-h) + 64px); max-height: calc(100vh - var(--top-h) - 80px); overflow: auto;
  border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-s); padding: 0 0 8px; }
.inspector > .card { margin: 8px; box-shadow: none; border: 0; padding: 4px 6px; }
.inspector > .notice, .inspector > p { margin: 8px 12px; }
.insp-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.insp-tabs button { flex: 1; border: 0; background: none; height: 28px; padding: 0 8px; border-radius: var(--r-s); color: var(--muted); font-size: var(--fs-s); }
.insp-tabs button.on { background: var(--press); color: var(--text); }
.inspector #dashboard-text { width: 100%; font: var(--fs-xs)/1.5 var(--mono); }
/* A narrow window: the panel, the width of the grid, is held at the bottom of the window while the grid scrolls above it; it comes after the
   grid, so its last widget can be scrolled clear of it. */
@media (max-width: 1000px) {
  .dash-edit { grid-template-columns: minmax(0, 1fr); }
  .inspector { position: sticky; top: auto; bottom: 0; z-index: 30; max-height: 45vh; border-radius: var(--r-l) var(--r-l) 0 0;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--shade, #000) 30%, transparent); }
}

/* The dashboard's head: the star before the title (a field while editing), the reload. */
.dash-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dash-title h1 { margin: 0; }
input.dash-title-input { font-size: 24px; font-weight: 650; height: 40px; padding: 0 8px; margin-left: -8px; border: 1px solid transparent; background: none; }
input.dash-title-input:hover { border-color: var(--line-strong); }
input.dash-title-input:focus { border-color: var(--accent); background: var(--surface); }
.page-actions .icon-btn.reload { width: 34px; height: 34px; border: 1px solid var(--line-strong); }
.page-actions .icon-btn.reload svg { width: 17px; height: 17px; }
.pill .age { color: var(--muted); font-size: var(--fs-xs); }
.notice > .icon-btn { margin-left: auto; flex: none; }
.notice { display: flex; align-items: center; gap: 8px; }
.time-machine { margin: 4px 0 2px; }
/* The list of widgets: names at the start, the eye and × at the end. */
.wl-row .wl-name { flex: 1 1 auto; min-width: 0; padding: 0 4px; }
.wl-row .icon-btn { flex: none; }
/* A widget's settings: check boxes beside their words; the colours a right-click offers, and any other. */
#widget-settings label.check { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; width: auto; font-weight: 400; }
#widget-settings label.check input[type=checkbox] { margin: 0; flex: none; width: 15px; height: 15px; }
.colour-row { flex-wrap: wrap; row-gap: 6px; }
.swatches-inline { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches-inline .sw, .nt .sw.more { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; }
.swatches-inline .sw:hover { outline: 2px solid var(--line-strong); outline-offset: 1px; }
.swatches-inline .sw.on, .nt .sw.on { outline: 2px solid #000; outline-offset: 1px; box-shadow: 0 0 0 3px #fff; }
.sw.more { position: relative; display: inline-grid; place-items: center; background: var(--press); color: var(--muted); font-size: 12px; overflow: hidden; }
.nt .sw.more { width: 26px; height: 26px; border-radius: 7px; }
.sw.more input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }

/* A row of an input's list: dragged by its grip or its summary (its buttons stay buttons). */
.input-row-item > .grip { display: inline-grid; place-items: center; width: 18px; height: 24px; margin: 0 2px 0 -4px; flex: none; color: var(--muted);
  cursor: grab; user-select: none; touch-action: none; letter-spacing: -3px; }
.input-row-item > .row-summary { cursor: grab; user-select: none; touch-action: none; }
.input-row-item.still > .grip, .input-row-item.still > .row-summary { cursor: default; }
.input-row-item.w-dragging { opacity: .45; }
.input-rows-list .w-drop-before { box-shadow: 0 -2px 0 var(--accent); }
.input-rows-list .w-drop-after { box-shadow: 0 2px 0 var(--accent); }