/* =============================================================================
   base.css — shared primitives for the Loop interior redesign proposals.

   These mirror @loop/ui components 1:1 so the mock composes like the real app.
   AT PORT TIME YOU DO NOT PORT THIS FILE — you reuse the real components:
     .btn      → @loop/ui  Button   (ButtonTone / ButtonType / size)
     .chip     → @loop/ui  ChromeChip
     .avatar   → @loop/ui  Avatar / AvatarGroup
     .card     → @loop/ui  Card (composite)
     .fab      → the existing feature FAB pattern (Spread/Lists/Wall)
     .segmented→ NEW @loop/ui primitive (only Ledger needs it — flagged in PORT MAP)
   Everything is token-only / logical-props so any block that IS bespoke drops
   straight into a *.module.css and passes stylelint.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  line-height: var(--line-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img {
  display: block;
  max-inline-size: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ---- icon sizing (mock uses inline SVG; app uses <Icon>) ------------------ */
.i {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  flex: none;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-sm {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
}
.i-lg {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
}

/* ---- Button → @loop/ui Button -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-md);
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition:
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn--accent {
  background: var(--color-accent-deep);
  color: var(--color-text-on-accent);
}
.btn--accent:hover {
  filter: brightness(1.06);
}
.btn--soft {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}
.btn--ghost {
  background: var(--color-surface-raised);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
.btn--ghost:hover {
  border-color: var(--color-border-strong);
}
.btn--sm {
  min-block-size: var(--control-sm);
  padding-inline: var(--space-4);
  font-size: var(--font-size-xs);
}

/* ---- ChromeChip → @loop/ui ChromeChip ------------------------------------ */
.chip {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  color: var(--color-text-primary);
  transition:
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.chip:hover {
  background: var(--color-surface-raised);
}
.chip:active {
  transform: scale(0.94);
}

/* ---- Avatar / AvatarGroup → @loop/ui Avatar ------------------------------ */
.avatar {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
}
.avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.avatar--sm {
  inline-size: var(--space-7);
  block-size: var(--space-7);
  font-size: var(--font-size-xs);
}
.avatarGroup {
  display: inline-flex;
  align-items: center;
}
.avatarGroup > .avatar {
  box-shadow: 0 0 0 0.1875rem var(--color-surface-raised);
}
.avatarGroup > .avatar + .avatar {
  margin-inline-start: calc(-1 * var(--space-3));
}

/* ---- Card → @loop/ui Card ------------------------------------------------ */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card--soft {
  background: var(--color-surface-soft);
}

/* ---- status / category pills --------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.pill--going {
  background: var(--color-sage-soft);
  color: var(--color-sage-deep);
}
.pill--maybe {
  background: var(--color-sky-soft);
  color: var(--color-sky-deep);
}
.pill--no {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.pill--food {
  background: var(--color-sage-soft);
  color: var(--color-sage-deep);
}
.pill--drink {
  background: var(--color-sky-soft);
  color: var(--color-sky-deep);
}
.pill--supplies {
  background: var(--color-stone-soft);
  color: var(--color-text-muted);
}
.pill--tasks {
  background: var(--color-rose-soft);
  color: var(--color-rose-deep);
}

/* ---- FAB (Spread/Lists/Wall pattern) ------------------------------------- */
.fab {
  position: fixed;
  inset-inline-end: var(--space-5);
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  inline-size: var(--control-lg);
  block-size: var(--control-lg);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease);
}
.fab:active {
  transform: scale(0.94);
}

/* ---- skeleton shimmer (mirrors the feature loading states) --------------- */
.skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    100deg,
    var(--color-surface-sunken) 30%,
    var(--color-surface-soft) 50%,
    var(--color-surface-sunken) 70%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ---- segmented control (NEW primitive; only Ledger uses it) --------------- */
.segmented {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  gap: var(--space-1);
}
.segmented > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.segmented > button[aria-current='true'] {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow);
}

/* ---- per-Loop theme atmosphere (loopThemeAccents → --loop-a/-b/-c) -------
   Set the three vars inline from loopThemeAccents(loop.theme). This is the
   sanctioned per-Loop glow mechanic (docs brief §2.1 / §7). The whole interior
   ALSO adopts the Loop's palette via data-theme on :root — this layer is the
   extra ambient bloom on top. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 62% at 82% -6%,
      color-mix(in srgb, var(--loop-a, var(--color-sky)) 34%, transparent),
      transparent 60%
    ),
    radial-gradient(
      108% 56% at -8% 8%,
      color-mix(in srgb, var(--loop-b, var(--color-accent-default)) 22%, transparent),
      transparent 58%
    );
}

.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =============================================================================
   Design-knob panel (chrome, NOT the design surface). Deliberately its own
   neutral look so a screenshot of the mock reads clean. Press "h" to hide.
   ========================================================================== */
.knobs {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: var(--z-portal);
  inline-size: min(88vw, 17rem);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(18, 22, 21, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #eef2f0;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
}
.knobsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-2);
}
.knobsTitle {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  opacity: 0.75;
}
.knobsHide {
  background: transparent;
  border: none;
  color: #eef2f0;
  opacity: 0.6;
  font-size: 0.85rem;
}
.knobsHide:hover {
  opacity: 1;
}
.knobsSwatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-block-end: var(--space-3);
}
.knobsSwatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
}
.knobsSwatch > span {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--sw-a), var(--sw-b) 55%, var(--sw-c));
}
.knobsSwatch > em {
  font-style: normal;
  font-size: 0.62rem;
  opacity: 0.8;
}
.knobsSwatch[aria-current='true'] {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}
.knobsRow {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}
.knobsSeg {
  display: inline-flex;
  flex: 1;
  padding: 0.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.knobsSeg > button {
  flex: 1;
  padding: 0.3rem 0.4rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #cdd6d2;
  font-size: 0.7rem;
}
.knobsSeg > button[aria-current='true'] {
  background: #eef2f0;
  color: #16211f;
  font-weight: 600;
}
.knobsNote {
  font-size: 0.65rem;
  line-height: 1.4;
  opacity: 0.62;
}
.knobsNote code {
  font-family: var(--font-mono);
  font-size: 0.62rem;
}
.knobsShow {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: var(--z-portal);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: 999px;
  background: rgba(18, 22, 21, 0.92);
  color: #eef2f0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}