/* -------------------------------------------------------------------------- */
/*   06-components/_controls.css: the shared vocabulary.                      */
/*   Buttons come in three styles: .button (primary, accent fill),            */
/*   .button--text (accent text), .icon-button (line icon). Lists use .row    */
/*   inside a .card (iOS grouped table). Floating surfaces use .panel.        */
/* -------------------------------------------------------------------------- */

/* Primary button: accent fill, white 600 label, 12px radius. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-button);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.button:hover,
.button:active {
  background-color: var(--color-accent-pressed);
}

/* Text button: accent text, no fill. */
.button--text {
  min-height: var(--icon-button-size);
  padding: 0 var(--space-2);
  background-color: transparent;
  color: var(--color-accent);
}

.button--text:hover,
.button--text:active {
  background-color: var(--color-fill);
}

/* Icon button: an accent line icon; a soft fill on hover, accent wash when on. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  padding: 0;
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.icon-button--sm {
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
}

/* Not actionable on its own (e.g. a row's close until hovered): secondary. */
.icon-button--quiet {
  color: var(--color-ink-muted);
}

.icon-button:hover {
  background-color: var(--color-fill);
}

.icon-button.is-active {
  background-color: var(--color-accent-wash);
}

/* Line icons: 2px stroke, round caps and joins, currentColor. */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Floating surfaces (chooser, modal, suggestions): card + shadow. */
.panel {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* In-flow card holding rows (task and tab lists). No shadow. */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Row: every list item (tasks, suggestions, chooser options). Same height,
   padding, hover and selected state. Separators are inset, iOS style: they
   start after the icon (or the left padding) and stop at the edge. */
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--row-height);
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.row::after {
  content: "";
  position: absolute;
  left: var(--row-inset, var(--space-4));
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-hairline);
}

.row:last-child::after {
  display: none;
}

.row:has(.row__icon) {
  --row-inset: calc(var(--space-4) + var(--icon-size) + var(--space-3));
}

.row:hover,
.row.is-selected {
  background-color: var(--color-fill);
}

/* Selected task or option: accent wash and an accent bar on the leading edge. */
.row.is-active {
  background-color: var(--color-accent-wash);
}

.row.is-active::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background-color: var(--color-accent);
}

/* Rows sit inside clipped cards, so their focus ring is inset. */
.row:focus-visible {
  outline-offset: -2px;
}

.row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.row__title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row.is-active .row__title {
  font-weight: var(--font-weight-semibold);
}

.row__meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size-caption);
  color: var(--color-ink-muted);
}

.row__count {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.row__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  border-radius: var(--radius-small);
  overflow: hidden;
  background-color: var(--color-fill);
}

.row__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The row's close button shows on hover or keyboard focus. */
.row__close {
  opacity: 0;
}

.row:hover .row__close,
.row:focus-within .row__close {
  opacity: 1;
}

.empty-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* Hero mark: the iridescent tile with a line-art brain. Start page and the
   About panel only. */
.hero-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--hero-size);
  height: var(--hero-size);
  border-radius: var(--radius-hero);
  background: var(--hero-gradient);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
  color: #ffffff;
}

/* Soft blurred highlight: the frosted look. */
.hero-mark::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -20%;
  width: 90%;
  height: 70%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  filter: blur(14px);
}

.hero-mark svg {
  position: relative;
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}