/* App-level layout only – components come from Mellow UI. */
@layer aether {
  .aether-logo { width: 1.5rem; height: 1.5rem; color: var(--mellow-accent-content); }

  .aether-page {
    max-width: 72rem;
    margin-inline: auto;
    display: grid;
    gap: 1.5rem;
  }

  .aether-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
  }

  .aether-stack { display: grid; gap: 1rem; }
  /* Grid children may shrink, so wide tables scroll in their own container instead of the page. */
  :is(.aether-page, .aether-stack) > * { min-width: 0; }
  .aether-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .aether-row-tight { gap: 0.375rem; }
  .aether-env { padding-inline: 0.5rem; }

  /* Inventory: a stopped container or VM stands out while scrolling (the badge says what). */
  /* Every row reserves the stripe, so the tree stays aligned. */
  .aether-inventory .mellow-table-row > .mellow-table-cell:first-child { border-inline-start: 3px solid var(--_tone, transparent); }
  .aether-inventory .mellow-table-row[data-tone="down"] { --_tone: var(--mellow-red-500); }
  .aether-inventory .mellow-table-row[data-tone="warn"] { --_tone: var(--mellow-amber-500); }
  .aether-row-end { justify-content: flex-end; flex-wrap: nowrap; gap: 0.5rem; }
  .aether-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

  /* Guest pages (login, setup): centered card. */
  .aether-guest {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }

  .aether-guest-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--mellow-text-xl);
    font-weight: 600;

    & .aether-logo { width: 2rem; height: 2rem; }
  }

  .aether-guest-card { width: min(26rem, calc(100vw - 2rem)); }

  /* Settings: sub navigation next to the content, stacked on small screens. */
  .aether-settings {
    display: grid;
    gap: 2rem;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: start;
  }

  @media (max-width: 48rem) {
    .aether-settings { grid-template-columns: minmax(0, 1fr); }
  }

  .aether-form { display: grid; gap: 1.25rem; max-width: 42rem; }

  .aether-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.25rem 2rem;
    padding: 1rem;
    border-radius: var(--mellow-radius-lg);
    background: var(--mellow-surface-muted);
    font-family: var(--mellow-font-mono);
    font-size: var(--mellow-text-sm);
  }

  .aether-qr {
    width: fit-content;
    padding: 0.75rem;
    border-radius: var(--mellow-radius-lg);
    background: #fff;
    line-height: 0;

    & svg { width: 12rem; height: 12rem; }
  }

  /* Theme editor: a small live preview next to the controls. */
  .aether-theme-preview {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--mellow-border);
    border-radius: var(--mellow-radius-lg);
    background: var(--mellow-surface);
  }
}

@layer aether {
  .aether-flyout { width: min(32rem, 100vw); }
  .aether-row-fill > * { flex: 1 1 12rem; }
  .aether-row-fill > .aether-port { flex: 0 0 7rem; }
  .aether-actions { justify-content: flex-end; }
}

@layer aether {
  .aether-muted { color: var(--mellow-text-muted); font-size: var(--mellow-text-sm); }
  .aether-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .aether-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .aether-toolbar > * { flex: 0 1 auto; min-width: 0; }
  .aether-toolbar > :first-child { flex: 1 1 16rem; max-width: 24rem; }
  .aether-toolbar > :last-child { margin-inline-start: auto; }
  .aether-filter { width: 11.5rem; }

  .aether-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;

    & > .mellow-icon { width: 2rem; height: 2rem; color: var(--mellow-text-muted); }
  }

  .aether-card-flush { padding: 0; overflow: hidden; }

  /* Service cards: the name link covers the card; the menu stays clickable above it. */
  .aether-service {
    position: relative;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    border-inline-start: 3px solid transparent;

    &[data-status="down"] { border-inline-start-color: var(--mellow-red-500); }
    &[data-status="degraded"] { border-inline-start-color: var(--mellow-amber-500); }
    &[data-status="maintenance"] { border-inline-start-color: var(--mellow-blue-500); }
  }

  .aether-service-header { display: flex; align-items: start; justify-content: space-between; gap: 0.5rem; }
  .aether-service-header .mellow-dropdown { position: relative; z-index: 1; }
  .aether-service-title { display: grid; min-width: 0; }

  .aether-stretched::after { content: ""; position: absolute; inset: 0; }

  .aether-service-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: 0.5rem;
    margin: 0;

    & dt { color: var(--mellow-text-muted); font-size: var(--mellow-text-xs); }
    & dd { margin: 0; font-size: var(--mellow-text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
  }
}

@layer aether {
  .aether-stack-tight { gap: 0.25rem; }

  .aether-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
  .aether-stat {
    margin-top: 0.25rem;
    font-size: var(--mellow-text-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    &[data-warning] { color: var(--mellow-amber-700); }
    .dark &[data-warning] { color: var(--mellow-amber-400); }
  }

  .aether-columns { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }

  .aether-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: var(--mellow-text-sm);

    & dt { color: var(--mellow-text-muted); }
    & dd { margin: 0; overflow-wrap: anywhere; }
  }

  .aether-notes { white-space: pre-line; }

}

@layer aether {
  .aether-problem-list { margin: 0.25rem 0 0; padding-inline-start: 1.25rem; }
  .aether-stat-link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--mellow-radius-lg);

    &:hover .mellow-card { border-color: var(--mellow-border-strong); }
    &:focus-visible { outline: var(--mellow-focus-width) solid var(--mellow-focus); outline-offset: var(--mellow-focus-offset); }
  }
  .aether-status-icon { color: var(--mellow-c-600); }
  .dark .aether-status-icon { color: var(--mellow-c-400); }
}

@layer aether {
  .aether-grow { flex: 1 1 12rem; min-width: 0; }
}

@layer aether {
  /* Bell: unread count on the button, recent alerts in a popover. */
  .aether-bell { position: relative; display: inline-flex; }

  .aether-bell-count {
    position: absolute;
    top: -0.125rem;
    inset-inline-end: -0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding-inline: 0.25rem;
    box-shadow: 0 0 0 2px var(--mellow-bg);
    border-radius: var(--mellow-radius-full);
    background: var(--mellow-red-600);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
    pointer-events: none;
  }

  .aether-bell-panel { width: min(24rem, calc(100vw - 2rem)); }

  .aether-bell-list { display: grid; gap: 0.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }

  .aether-bell-item {
    display: grid;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--mellow-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;

    &:hover { background: var(--mellow-hover); }
    &:focus-visible { outline: var(--mellow-focus-width) solid var(--mellow-focus); }
    &[data-unread] .aether-bell-title::before {
      content: "";
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      margin-inline-end: 0.375rem;
      border-radius: 50%;
      background: var(--mellow-accent);
      vertical-align: middle;
    }
  }

  .aether-bell-title { font-size: var(--mellow-text-sm); font-weight: 500; }
  .aether-bell-body { color: var(--mellow-text-muted); font-size: var(--mellow-text-sm); white-space: pre-line; }
  .aether-bell-time { color: var(--mellow-text-muted); font-size: var(--mellow-text-xs); }
}

@layer aether {
  .aether-mono { font-family: var(--mellow-font-mono); font-size: 0.9em; }
  .aether-modal-wide { --mellow-modal-width: 44rem; }
  .aether-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }

  /* Inventory hierarchy: indented by depth with a guide line. */
  .aether-tree {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    padding-inline-start: calc(var(--depth, 0) * 1.5rem);
    position: relative;
  }
  .aether-tree[style*="--depth: 0"]::before { display: none; }
  .aether-tree::before {
    content: "";
    position: absolute;
    inset-block: -0.75rem 50%;
    inset-inline-start: calc(var(--depth, 0) * 1.5rem - 0.9rem);
    width: 0.6rem;
    border-inline-start: 1px solid var(--mellow-border-strong);
    border-block-end: 1px solid var(--mellow-border-strong);
    border-end-start-radius: 4px;
  }
  .aether-tree-icon { flex-shrink: 0; margin-top: 0.125rem; color: var(--mellow-text-muted); }
  .aether-tree-name { min-width: 0; }
}

@layer aether {
  .aether-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .aether-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  .mellow-tab-panel > * + * { margin-top: 1rem; }
}

@layer aether {
  .aether-live { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}

@layer aether {
  .aether-suggestions > li { flex-wrap: nowrap; }
  .aether-suggestions .aether-grow { overflow-wrap: anywhere; }
  .aether-suggestion-group { display: grid; gap: 0.5rem; padding-block: 0.5rem; border-top: 1px solid var(--mellow-border); }
  .aether-suggestion-item { display: flex; align-items: center; gap: 0.375rem; font-weight: 500; }
}

@layer aether {
  /* Portal tiles: the name link covers the tile; the alternate link sits above it. */
  .aether-portal-search { width: min(20rem, 100%); }
  @media (max-width: 40rem) { .aether-portal-search { width: 100%; } }

  /* Runbooks */
  .aether-runbooks { margin: 0; padding: 0; list-style: none; }
  .aether-runbook { position: relative; height: 100%; }
  .aether-runbook:has(.aether-stretched:focus-visible) { outline: var(--mellow-focus-width) solid var(--mellow-focus); outline-offset: 2px; }
  .aether-runbook .aether-stretched { outline: none; color: inherit; text-decoration: none; }
  .aether-runbook .aether-stretched:hover { text-decoration: underline; }
  .aether-runbook-body { max-width: 48rem; }
  .aether-runbook-form { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 64rem) { .aether-runbook-form { grid-template-columns: minmax(0, 1fr) 20rem; } .aether-runbook-meta { position: sticky; top: 1rem; } }
  .aether-revision { max-height: 50vh; overflow-y: auto; padding: 1rem; border: 1px solid var(--mellow-border); border-radius: var(--mellow-radius-md); }

  .aether-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .aether-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mellow-border);
    border-radius: var(--mellow-radius-lg);
    background: var(--mellow-surface);
    transition: border-color var(--mellow-duration) var(--mellow-ease), box-shadow var(--mellow-duration) var(--mellow-ease);

    &:hover { border-color: var(--mellow-border-strong); box-shadow: var(--mellow-shadow-sm); }
    &:focus-within { outline: var(--mellow-focus-width) solid var(--mellow-focus); outline-offset: var(--mellow-focus-offset); }
  }

  .aether-tile-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--mellow-radius-md);
    background: var(--mellow-surface-muted);

    & img { width: 2rem; height: 2rem; object-fit: contain; border-radius: var(--mellow-radius-sm); }
    & .mellow-icon { width: 1.5rem; height: 1.5rem; color: var(--mellow-text-muted); }
  }

  .aether-tile-body { display: grid; min-width: 0; flex: 1; }

  .aether-tile-link,
  .aether-tile-name {
    overflow: hidden;
    color: var(--mellow-text);
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .aether-tile-link { outline: none; }
  .aether-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  .aether-tile-problem { display: flex; margin-top: 0.25rem; }

  .aether-tile-description {
    overflow: hidden;
    color: var(--mellow-text-muted);
    font-size: var(--mellow-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Status: a dot on the icon's bottom corner, ringed in the tile color so it reads on any icon. */
  .aether-tile-status {
    --_dot: var(--mellow-neutral-400);
    position: absolute;
    inset-block-end: -0.25rem;
    inset-inline-end: -0.25rem;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--mellow-surface);
    border-radius: 50%;
    background: var(--_dot);
  }
  .aether-tile[data-status="up"] .aether-tile-status { --_dot: var(--mellow-green-500); }
  .aether-tile[data-status="degraded"] .aether-tile-status { --_dot: var(--mellow-amber-500); }
  .aether-tile[data-status="down"] .aether-tile-status { --_dot: var(--mellow-red-500); }
  .aether-tile[data-status="maintenance"] .aether-tile-status { --_dot: var(--mellow-blue-500); }
  .aether-tile[data-status="down"] { border-color: color-mix(in oklab, var(--mellow-red-500) 45%, var(--mellow-border)); }

  /* Actions on the right: the other address and the menu, above the stretched link. */
  .aether-tile-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-end: -0.5rem;
  }

  /* ⋯ menu: shown on hover/focus, always on touch screens. */
  .aether-tile-menu {
    opacity: 0;
    transition: opacity var(--mellow-duration) var(--mellow-ease);
  }
  .aether-tile:is(:hover, :focus-within) .aether-tile-menu,
  .aether-tile-menu[aria-expanded="true"] { opacity: 1; }
  @media (hover: none) { .aether-tile-menu { opacity: 1; } }

  .aether-tile-alt {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--mellow-radius);
    color: var(--mellow-text-muted);

    &:hover { background: var(--mellow-hover); color: var(--mellow-text); }
    &:focus-visible { outline: var(--mellow-focus-width) solid var(--mellow-focus); }
  }
}

@layer aether {
  .aether-error { gap: 0.75rem; }
}