/* First design direction. Keep content matte and feedback local to the action. */
.canvas-fields { background: var(--canvas); }
.canvas-fields::before, .canvas-fields::after { content: none; }

.glass {
  background: var(--surface);
  border: var(--surface-border) solid var(--hairline);
  box-shadow: var(--shadow-island);
}
.glass::before, .glass::after, .lens::after { content: none; }
.glass-light { display: none; }
.lens {
  background: var(--accent-tint);
  box-shadow: none;
}
.segmented {
  background: var(--surface-sunken);
  border-color: transparent;
  box-shadow: none;
  padding: calc(var(--control-inset) - var(--surface-border));
  border-radius: var(--r-control-group);
}
.segmented .seg, .segmented .lens { border-radius: var(--r-control); }
.btn, .chip, .search, .back, .tool { border-radius: var(--r-control); }
.monogram { border-radius: var(--r-dock-item); }
.popover { border-radius: var(--r-island); }
.segmented .lens {
  background: var(--surface);
  box-shadow: var(--shadow-row);
}
.head-controls, .back { box-shadow: var(--shadow-row); }
.spotlight {
  background: var(--surface);
  border-top: 3px solid var(--accent);
  padding: var(--s6);
}
.spotlight-clock { font-size: 32px; font-variant-numeric: tabular-nums; }
.screen { animation: none; }
.screen-title { letter-spacing: -0.035em; }
.scrim { background: rgba(35, 41, 54, 0.18); }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button[data-action], a[data-action] {
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
button[data-action]:not(:disabled):active { transform: scale(0.98); }
.row[data-action]:active { transform: scale(0.995); }
[aria-busy="true"] { cursor: progress; }
button:disabled { cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .row[data-action]:hover, .notice:hover { background: var(--surface-muted); }
  .nav-item:hover:not([aria-current="page"]) { background: var(--surface-muted); }
  .block-link:hover { color: var(--accent-strong); text-decoration: underline; }
}

.feedback-toast {
  position: fixed;
  z-index: var(--z-skip);
  left: 50%;
  bottom: calc(102px + var(--safe-b) + var(--tg-bottom));
  transform: translateX(-50%);
  max-width: min(400px, calc(100vw - 32px));
  width: max-content;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-row);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  font-size: 14px;
}
.feedback-toast button {
  border: 0;
  background: var(--surface-muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  flex: none;
  cursor: pointer;
}
@media (min-width: 768px) {
  .feedback-toast { bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  button[data-action]:active { transform: none !important; }
}