/* ------------------------------------------------------------------
   Personal hub - launcher-only layout.

   Everything visual (surface, radius, shadow, type, control geometry)
   comes from the design system's own component classes. This file only
   holds the few layout facts the system does not define: the widget
   grid, the row grids inside a widget, and the app tile grid. Values
   are composed from space and size tokens - no hex, no raw px, no
   token fallbacks.
   ------------------------------------------------------------------ */

.lch {
  /* 320: the narrowest a widget reads at before its rows wrap. */
  /* 220: an app tile fits its name plus a one-line description. */
  --lch-tile-min: calc(var(--size-2800) * 2);
}

.lch-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lch-tile-min), 1fr));
  gap: var(--space-300);
}

/* App tile: composed from the system's own fill, radius and bevel roles.
   The system has no launcher tile, so this is the agreed composition
   (see docs/redesign/DESIGN-DECISIONS.md), built only from tokens. */
.lch-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  padding: var(--space-300);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-transparent);
  box-shadow: var(--shadow-bevel-100);
  text-decoration: none;
  transition: background-color var(--motion-hover);
}

a.lch-tile:hover {
  background: var(--color-bg-fill-transparent-hover);
}

a.lch-tile:active {
  background: var(--color-bg-fill-transparent-active);
  box-shadow: var(--shadow-inset-100);
}

.lch-tile.is-disabled {
  box-shadow: none;
  cursor: default;
}

.lch-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-050);
  align-items: flex-start;
  min-width: 0;
}

/* Widget rows. A leading rail keeps times, checkboxes and dots on one
   optical column; the trailing meta is pinned right. */
.lch-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: var(--field-min-height);
}

.lch-row__rail {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-1000);
}

.lch-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-025);
  flex: 1 1 auto;
  min-width: 0;
}

.lch-row__meta {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.lch-row__done {
  text-decoration: line-through;
}

.lch-dot {
  width: var(--space-200);
  height: var(--space-200);
  border-radius: var(--radius-full);
  background: var(--color-bg-fill-info);
}

/* Time zones: a four-city grid of small secondary-surface tiles. */
.lch-zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-200);
}

.lch-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-050);
  padding: var(--space-300);
  background: var(--color-bg-surface-secondary);
  border-radius: var(--radius-200);
}

/* Widget wrapper: carries the drag affordances only. The dragged card
   dims, the drop target takes a focus-coloured outline. */

/* ------------------------------------------------------------------
   Apps switcher - cloned from the package's "App labels" reference
   page: 4 columns, 12/16 @600 group heads, 11/14 secondary sections,
   48px plates on the surface fill with radius-200 and shadow-100.
   ------------------------------------------------------------------ */
.asw-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-400);
  align-items: start;
}

.as-nav:has(.as-nav__app-popover .as-popover) {
  overflow: visible;
}

.as-nav__app-popover {
  display: block;
  width: 100%;
}

/* The popover wrapper is a flex box, so the app plate must stretch to the
   full 240px rail width instead of shrinking to its logo. */
.as-nav__app-popover > .as-nav__app {
  width: 100%;
  flex: 1 1 auto;
}

.as-nav__app-popover .as-popover {
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - var(--topbar-height) - var(--space-1600));
  overflow: auto;
}

.asw-cols--menu {
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-300);
}

.asw-grp {
  margin: 0 0 var(--space-150);
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.asw-grp--next {
  margin-top: var(--space-400);
}

.asw-sec {
  margin: var(--space-200) 0 var(--space-100);
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-line);
  color: var(--color-text-secondary);
}

.asw-plate {
  display: flex;
  align-items: center;
  height: var(--size-1200);
  padding-inline: var(--space-200);
  margin-bottom: var(--space-100);
  background: var(--color-bg-surface);
  border-radius: var(--radius-200);
  box-shadow: var(--shadow-100);
  text-decoration: none;
  transition:
    background-color var(--motion-hover),
    box-shadow var(--motion-hover);
}

a.asw-plate:hover {
  background: var(--color-bg-surface-hover);
  box-shadow: var(--shadow-200);
}

a.asw-plate:active {
  background: var(--color-bg-surface-active);
}

.asw-plate.is-disabled {
  opacity: 0.5;
}

@media (max-width: 60rem) {
  .asw-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Every card is the same height, and the summary takes the slack so the run
   count and the action always sit on the same baseline across the row. */

/* A quiet accent rule at the top edge gives the plate some character without
   introducing colour that isn't already in the theme. */

/* The summary reserves two lines so the rule, the run count and the button all
   land on the same line across the row, whatever the sentence length. */

/* Each expert card leads with a portrait so the four read as people, not rows.
   The plate uses surface + border tokens so it holds up in both themes. */

/* The role is the card's index line: mono, uppercase, tracked — the same
   register the hub uses for row metadata elsewhere. */

/* Sections that exist in the rail but are not open yet read muted, not
   clickable. Muted through the hand-picked disabled tokens, never a runtime
   opacity (guidelines/color-interactive-states); the icon takes
   --color-icon-disabled through its own tone prop. */
.as-nav__item.is-disabled,
.as-nav__item:disabled {
  color: var(--color-text-disabled);
  cursor: default;
  pointer-events: none;
}