/* Classic theme: the plain, system-font look the dashboard had before the Sky
   redesign (default blue underlined links, h1/h2/h3 headings, bordered tables,
   small grey buttons, a text nav). Everything is scoped to :root[data-theme="classic"],
   which theme.js sets, so the default Sky theme is untouched. Most of the change is
   the token overrides below; the rules after them cover what the tokens can't
   reach (links, headings, nav, stacked form fields, the dashboard list). */

:root[data-theme="classic"] {
  --font-mono: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 16px;
  --text-lg: 24px;

  --leading-tight: 20px;
  --leading-snug: 24px;
  --leading-loose: 40px;

  --tracking-label: 0;
  --tracking-title: 0;
  --tracking-heading: 0;
  --tracking-body: 0;
  --tracking-name: 0;

  --weight-medium: 400;
  --weight-semibold: 600;

  --color-sky: #ffffff;
  --color-meadow: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f5f5f5;
  --color-border: #dddddd;
  --color-border-strong: #cccccc;

  --color-text: #222222;
  --color-text-muted: #888888;
  --color-text-subtle: #666666;

  --color-accent: #e8f0fe;
  --color-accent-hover: #d6e4fd;
  --color-danger-bg: #ffeeee;
  --color-danger-hover: #ffdddd;
  --color-danger-border: #cc0000;
  --color-danger-text: #cc0000;
  --color-ok-text: #008800;
  --color-warn-text: #cc8800;

  --shadow-card: none;
  --layout-width: 960px;
}

:root[data-theme="classic"] .deco-clouds,
:root[data-theme="classic"] .deco-grass {
  display: none;
}

/* Banner: a plain left-aligned page title instead of the dashed pixel rule. */
:root[data-theme="classic"] .banner {
  display: block;
  margin: 0 0 var(--space-4);
  font-size: 32px;
  font-weight: var(--weight-bold);
  line-height: 40px;
  text-transform: none;
}

:root[data-theme="classic"] .banner::before,
:root[data-theme="classic"] .banner::after {
  display: none;
}

:root[data-theme="classic"] .banner__text {
  color: inherit;
  text-align: left;
  text-decoration: none;
}

/* Links are the browser's own: blue and underlined. Buttons that are links keep the button look. */
:root[data-theme="classic"] a {
  color: #0000ee;
  text-decoration: underline;
}

:root[data-theme="classic"] a.btn {
  color: var(--color-text);
  text-decoration: none;
}

:root[data-theme="classic"] a.btn--primary,
:root[data-theme="classic"] a.btn--accent {
  color: #3366cc;
}

/* Headings: plain h2 and h3, no rules under them. */
:root[data-theme="classic"] h2,
:root[data-theme="classic"] .section-label {
  margin-top: 2em;
  font-size: 24px;
  font-weight: var(--weight-bold);
  line-height: 28px;
  text-transform: none;
  opacity: 1;
}

:root[data-theme="classic"] h3 {
  font-size: 18.72px;
  line-height: 22px;
}

:root[data-theme="classic"] .section {
  margin: 0;
}

:root[data-theme="classic"] .section--tiles {
  margin-top: var(--space-4);
}

/* The heading carries the space above it: some pages use it with no .section around it. */
:root[data-theme="classic"] .section-head {
  margin: 2em 0 var(--space-3);
}

:root[data-theme="classic"] .section-head .section-label {
  margin-top: 0;
}

:root[data-theme="classic"] h3.section-label {
  font-size: 18.72px;
  line-height: 22px;
}

:root[data-theme="classic"] .panel > h2:first-child {
  margin-top: 0;
}

:root[data-theme="classic"] .rule {
  display: none;
}

/* Panels lose their card, and each field is a bold label with its control stacked under it. */
:root[data-theme="classic"] .panel {
  padding: 0;
  background: none;
  border: 0;
}

:root[data-theme="classic"] .field > span,
:root[data-theme="classic"] .field > label,
:root[data-theme="classic"] .field__head > label {
  font-size: 18.72px;
  font-weight: var(--weight-bold);
  line-height: 22px;
  text-transform: none;
  opacity: 1;
}

:root[data-theme="classic"] .field--check > span,
:root[data-theme="classic"] .field--check > label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Controls */
:root[data-theme="classic"] .btn,
:root[data-theme="classic"] .btn-primary,
:root[data-theme="classic"] .btn-danger {
  min-height: 0;
  padding: 6px 14px;
  background: #f9f9f9;
  border-color: #cccccc;
}

:root[data-theme="classic"] .btn:hover {
  background: #f0f0f0;
}

:root[data-theme="classic"] .btn--primary,
:root[data-theme="classic"] .btn-primary,
:root[data-theme="classic"] .btn--accent,
:root[data-theme="classic"] .btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: #3366cc;
  color: #3366cc;
  text-transform: none;
}

:root[data-theme="classic"] .btn--primary:hover,
:root[data-theme="classic"] .btn-primary:hover,
:root[data-theme="classic"] .btn--accent:hover,
:root[data-theme="classic"] .btn[aria-pressed="true"]:hover {
  background: var(--color-accent-hover);
}

:root[data-theme="classic"] .btn--danger,
:root[data-theme="classic"] .btn-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

:root[data-theme="classic"] input[type="text"],
:root[data-theme="classic"] input[type="password"],
:root[data-theme="classic"] input[type="number"],
:root[data-theme="classic"] select {
  padding: 6px;
  border: var(--border-w) solid #767676;
  border-radius: 2px;
}

:root[data-theme="classic"] select {
  padding-right: var(--space-7);
}

/* Tables: full grid, shaded plain-case header cells. */
:root[data-theme="classic"] table {
  font-size: var(--text-sm);
}

:root[data-theme="classic"] th,
:root[data-theme="classic"] td {
  padding: 8px 13px;
  border: var(--border-w) solid var(--color-border);
}

:root[data-theme="classic"] th {
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
  text-transform: none;
  white-space: normal;
  opacity: 1;
}

/* Navigation: the icon links become a row of plain text links under the title, with a rule under the row.
   The label is each link's own title attribute, so there is no text to keep in sync here. The back link
   sits in the same row, ahead of them. */
:root[data-theme="classic"] .icon-nav {
  line-height: var(--leading-snug);
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-w) solid #999999;
}

:root[data-theme="classic"] .nav-back + .layout .icon-nav,
:root[data-theme="classic"] .nav-back + .space-header .icon-nav {
  padding-left: 7em;
}

:root[data-theme="classic"] .icon-btn {
  width: auto;
  height: auto;
  margin-right: 1.5em;
  padding: 0;
  color: #0000ee;
  font-size: var(--text-sm);
  text-decoration: underline;
  opacity: 1;
}

:root[data-theme="classic"] .icon-btn::after {
  content: attr(title);
}

:root[data-theme="classic"] .icon-btn .icon {
  display: none;
}

:root[data-theme="classic"] .nav-back {
  top: calc(var(--space-8) + 40px + var(--space-4));
  left: max(var(--layout-gutter), calc((100% - var(--layout-width)) / 2));
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

:root[data-theme="classic"] .nav-back .icon {
  display: none;
}

/* Dashboard: the three tiles become a plain row of links, and the app list a bordered table-like list with
   a plain Details link. */
:root[data-theme="classic"] .section--tiles .section-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

:root[data-theme="classic"] .section--tiles .card-grid {
  display: flex;
  gap: 1.5em;
  margin-top: var(--space-4);
}

:root[data-theme="classic"] .section--tiles .card {
  display: block;
  background: none;
  border: 0;
}

:root[data-theme="classic"] .section--tiles .card__body {
  display: none;
}

:root[data-theme="classic"] .section--tiles .card__footer {
  padding: 0;
}

:root[data-theme="classic"] .section--tiles .card__footer .btn {
  padding: 0;
  background: none;
  border: 0;
  color: #0000ee;
  font-size: var(--text-sm);
  text-decoration: underline;
}

:root[data-theme="classic"] .app-list {
  box-shadow: none;
}

:root[data-theme="classic"] .app-row {
  min-height: 0;
  padding: 8px 13px;
}

:root[data-theme="classic"] .app-row__name {
  font-weight: var(--weight-medium);
}

:root[data-theme="classic"] .status-dot {
  display: none;
}

:root[data-theme="classic"] .app-row__status {
  position: static;
  width: 6.5em;
  height: auto;
  margin: 0 0 0 auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  font-size: var(--text-sm);
}

:root[data-theme="classic"] [data-status="running"] .app-row__status {
  color: var(--color-ok-text);
  font-weight: var(--weight-bold);
}

:root[data-theme="classic"] [data-status="error"] .app-row__status {
  color: var(--color-danger-text);
  font-weight: var(--weight-bold);
}

:root[data-theme="classic"] [data-status="stopped"] .app-row__status {
  color: var(--color-text-muted);
}

:root[data-theme="classic"] [data-status="building"] .app-row__status,
:root[data-theme="classic"] [data-status="starting"] .app-row__status,
:root[data-theme="classic"] [data-status="removing"] .app-row__status {
  color: var(--color-warn-text);
}

:root[data-theme="classic"] .app-row__details {
  margin-left: var(--space-3);
  padding-left: 0;
  color: #0000ee;
  font-size: var(--text-sm);
  opacity: 1;
  pointer-events: auto;
}

/* Login, setup and the other single-purpose pages keep a bordered card in a narrow column. */
:root[data-theme="classic"] .layout--narrow .panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
}

/* The manual has its own page template; give its header the same plain title. */
:root[data-theme="classic"] .space-header h1.space-title {
  margin: 0 0 var(--space-4);
  font-size: 32px;
  font-weight: var(--weight-bold);
  line-height: 40px;
  letter-spacing: 0;
  text-transform: none;
}