/* Copyright Scott Thode 2025, 2026 */
* {
  box-sizing: border-box;
}

:root {
  font: var(--type) / var(--leading) var(--font);
}

body {
  margin: 0;
  background: var(--view);
  color: var(--text);
}

button,
select,
input {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: var(--rule) solid var(--line);
  border-radius: var(--round);
  min-height: var(--cell);
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: var(--off);
  cursor: default;
}

:focus-visible {
  outline: var(--ring) solid var(--accent);
  outline-offset: var(--rule);
}

/* The top bar: the host's name, the count, the menu. */
header {
  display: flex;
  align-items: center;
  gap: var(--quarter);
  height: var(--cell);
  padding: 0 var(--inset);
  background: var(--bar);
  backdrop-filter: var(--blur);
  border-bottom: var(--rule) solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}

header h1 {
  font-size: var(--type);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header button {
  min-height: var(--cell);
  height: var(--cell);
  min-width: var(--cell);
  border: 0;
  background: none;
  font-size: var(--type-big);
}

/* The cloud, between the bars. */
#stage {
  position: relative;
  height: calc(100dvh - var(--cell) - var(--cell2));
  min-height: var(--stage-min);
}

#cloud {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--view);
}

#trouble {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--inset);
  color: var(--alert);
  text-align: center;
}

/* The pager under the cloud. */
nav {
  display: flex;
  align-items: center;
  gap: var(--quarter);
  height: var(--cell2);
  padding: 0 var(--inset);
  background: var(--bar);
  backdrop-filter: var(--blur);
  border-top: var(--rule) solid var(--line);
}

nav button {
  min-width: var(--cell);
  font-size: var(--type-big);
}

#where {
  min-width: var(--cell2);
  text-align: center;
}

#status {
  flex: 1;
  color: var(--warm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The page's sites as a list, and the card of the one chosen. */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--list-col));
  gap: var(--inset);
  padding: var(--inset);
  align-items: start;
}

@media (max-width: 760px) {
  main {
    grid-template-columns: minmax(0, 1fr);
  }
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--eighth);
}

ol button,
.opts button {
  display: flex;
  justify-content: space-between;
  gap: var(--half);
  width: 100%;
  text-align: left;
  padding: var(--eighth) var(--quarter);
}

ol b,
.opts b {
  overflow-wrap: anywhere;
}

ol span,
.opts span {
  color: var(--warm);
  text-align: right;
}

.on {
  border-color: var(--accent);
  box-shadow: inset var(--mark) 0 0 var(--accent);
}

#card {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: var(--rule) solid var(--line);
  border-radius: var(--round);
  padding: var(--half);
  aspect-ratio: var(--card-ratio);
  overflow: auto;
}

#card .name {
  font-size: var(--type-name);
  font-weight: var(--heavy);
  color: var(--accent);
  overflow-wrap: anywhere;
}

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--quarter) var(--half);
  margin: var(--half) 0;
}

dt {
  color: var(--warm);
}

dt.on {
  color: var(--accent);
}

dd {
  margin: 0;
  text-align: right;
}

dd small {
  display: block;
  color: var(--warm);
}

#card p {
  margin: var(--quarter) 0 0;
}

/* The menu: one section at a time, chosen at the top. */
#menu {
  inset: calc(var(--cell) + var(--inset)) auto auto 50%;
  translate: -50% 0;
  width: min(var(--menu-max), 100% - 2 * var(--inset));
  max-height: calc(100dvh - var(--cell) - 2 * var(--inset));
  padding: 0;
  border: var(--rule) solid var(--line);
  border-radius: var(--round);
  background: var(--panel);
  backdrop-filter: var(--blur);
  color: var(--text);
  overflow: hidden;
}

#menu:popover-open {
  display: flex;
  flex-direction: column;
}

#menu::backdrop {
  background: var(--dim);
}

.top {
  display: flex;
  gap: var(--quarter);
  padding: var(--quarter);
  background: var(--head);
  border-bottom: var(--rule) solid var(--line);
}

.top select {
  flex: 1;
  padding: 0 var(--quarter);
}

.top button {
  min-width: var(--cell);
}

.body {
  overflow: auto;
  padding: var(--quarter);
}

.opts {
  display: grid;
  gap: var(--eighth);
  grid-template-columns:
    repeat(auto-fill, minmax(var(--opt-col), 1fr));
}

#q {
  width: 100%;
  padding: 0 var(--quarter);
  margin-bottom: var(--quarter);
}

.plain {
  padding: var(--half);
}

[hidden] {
  display: none !important;
}

/* all.html: every site as a plain link. */
.every {
  margin: var(--half);
}

.every ul {
  columns: 16em;
  padding: 0;
  list-style: none;
}

.every a {
  display: block;
  min-height: var(--cell);
}