/* house-ui components. Needs tokens.css first.
 *
 * Shared behaviour lives in two places: the base reset, and one state-layer
 * rule every interactive component opts into. A component below only says
 * what makes it different.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { accent-color: var(--primary); }   /* native checkbox/radio/range, themed */
body {
  margin: 0;
  font: var(--body-m);
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }

.icon {
  font-family: "Material Symbols Rounded";
  font-size: 24px; line-height: 1; font-weight: normal; font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block; width: 1em; height: 1em; overflow: hidden;
  user-select: none; flex: none;
}
.icon.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.icon.sm { font-size: 20px; }

.divider { height: 1px; border: 0; margin: 0; background: var(--outline-variant); }

/* ── State layer ──────────────────────────────────────────────────────── */
/* Hover/press paint the content colour over the container at a set opacity,
   so every component reacts the same way without its own hover colours. */

:where(.btn, .icon-btn, .fab, .chip, .rail-item, .nav-item, .clickable, .menu-item, .seg > button) {
  position: relative; isolation: isolate; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(.btn, .icon-btn, .fab, .chip, .rail-item .ind, .nav-item .ind, .clickable, .menu-item, .seg > button)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--dur-short) linear;
  pointer-events: none;
}
:where(.btn, .icon-btn, .fab, .chip, .clickable, .menu-item, .seg > button):hover::after,
:where(.rail-item, .nav-item):hover .ind::after { opacity: var(--state-hover); }
:where(.btn, .icon-btn, .fab, .chip, .clickable, .menu-item, .seg > button):active::after,
:where(.rail-item, .nav-item):active .ind::after { opacity: var(--state-press); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Pill at rest, squarer while pressed: the Expressive shape morph. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--shape-full);
  font: var(--label-l); letter-spacing: 0.01em; white-space: nowrap;
  color: var(--on-primary); background: var(--primary);
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.btn:active { border-radius: var(--shape-md); }
.btn .icon { font-size: 20px; margin-inline-start: calc(var(--sp-2) * -1); }
.btn.tonal    { color: var(--on-secondary-container); background: var(--secondary-container); }
.btn.outlined { color: var(--on-surface-variant); background: transparent; border: 1px solid var(--outline-variant); }
.btn.text     { color: var(--primary); background: transparent; padding: 0 var(--sp-3); }
.btn.danger   { color: var(--on-error); background: var(--error); }
.btn.sm { height: 32px; padding: 0 var(--sp-4); font: var(--label-m); }
.btn.lg { height: 56px; padding: 0 var(--sp-8); font: var(--title-m); }
.btn.lg:active { border-radius: var(--shape-lg); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: var(--shape-full);
  color: var(--on-surface-variant); background: transparent;
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.icon-btn:active { border-radius: var(--shape-md); }
.icon-btn.filled { color: var(--on-primary); background: var(--primary); }
.icon-btn.tonal  { color: var(--on-secondary-container); background: var(--secondary-container); }

.fab {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 56px; min-width: 56px; padding: 0 var(--sp-4); border: 0;
  border-radius: var(--shape-lg);
  font: var(--label-l);
  color: var(--on-primary-container); background: var(--primary-container);
  box-shadow: var(--elev-3);
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.fab:active { border-radius: var(--shape-md); }
.fab.extended { padding: 0 var(--sp-5) 0 var(--sp-4); }

/* Button group: joined buttons that round their outer ends only. */
.seg { display: inline-flex; gap: 2px; }
.seg > button {
  height: 40px; padding: 0 var(--sp-4); border: 0;
  font: var(--label-l); display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--on-secondary-container); background: var(--secondary-container);
  border-radius: var(--shape-sm);
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.seg > button:first-child { border-radius: var(--shape-full) var(--shape-sm) var(--shape-sm) var(--shape-full); }
.seg > button:last-child  { border-radius: var(--shape-sm) var(--shape-full) var(--shape-full) var(--shape-sm); }
.seg > button[aria-pressed="true"] {
  color: var(--on-primary); background: var(--primary); border-radius: var(--shape-full);
}

/* ── Chips ────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 32px; padding: 0 var(--sp-3);
  border: 1px solid var(--outline-variant); border-radius: var(--shape-sm);
  font: var(--label-l); color: var(--on-surface-variant); background: transparent;
}
.chip .icon { font-size: 18px; }
.chip[aria-pressed="true"], .chip.selected {
  border-color: transparent;
  color: var(--on-secondary-container); background: var(--secondary-container);
}
.chip.tag { height: 24px; padding: 0 var(--sp-2); font: var(--label-m); border-radius: var(--shape-xs); }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
  border-radius: var(--shape-md); padding: var(--sp-4);
  background: var(--surface-container-highest);
}
.card.outlined { background: var(--surface); border: 1px solid var(--outline-variant); }
.card.elevated { background: var(--surface-container-low); box-shadow: var(--elev-1); }
.card h3 { margin: 0 0 var(--sp-1); font: var(--title-m); }
.card p  { margin: 0; color: var(--on-surface-variant); }

/* ── Lists ────────────────────────────────────────────────────────────── */
/* .grouped is the new-Android look: one rounded block per group, items
   split by 2px gaps, big outer corners, small inner ones. */

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-2) var(--sp-4);
  color: inherit; text-decoration: none;
}
.list-item .text { flex: 1; min-width: 0; }
.list-item .headline { font: var(--body-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .support  { font: var(--body-m); color: var(--on-surface-variant); }
.list-item .meta     { font: var(--label-s); color: var(--on-surface-variant); }
.list-item > .icon   { color: var(--on-surface-variant); }

.list.grouped { gap: 2px; }
.list.grouped > .list-item {
  background: var(--surface-container);
  border-radius: var(--shape-xs);
}
.list.grouped > .list-item:first-child { border-top-left-radius: var(--shape-lg); border-top-right-radius: var(--shape-lg); }
.list.grouped > .list-item:last-child  { border-bottom-left-radius: var(--shape-lg); border-bottom-right-radius: var(--shape-lg); }

/* ── Text fields + search ─────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font: var(--body-s); color: var(--on-surface-variant); padding-inline: var(--sp-4); }
.field input, .field textarea, .field select {
  font: var(--body-l); color: var(--on-surface);
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  border: 0; border-bottom: 1px solid var(--on-surface-variant);
  border-radius: var(--shape-xs) var(--shape-xs) 0 0;
  background: var(--surface-container-highest);
  outline: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field :is(input, textarea, select):focus {
  border-bottom: 2px solid var(--primary); padding-bottom: calc(var(--sp-3) - 1px);
}
.field.outlined :is(input, textarea, select) {
  background: transparent; border: 1px solid var(--outline); border-radius: var(--shape-xs);
}
.field.outlined :is(input, textarea, select):focus { border: 2px solid var(--primary); padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px); }
.field .hint { font: var(--body-s); color: var(--on-surface-variant); padding-inline: var(--sp-4); }
.field.invalid :is(input, textarea) { border-color: var(--error); }
.field.invalid .hint { color: var(--error); }

.search {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 48px; padding: 0 var(--sp-4);
  border-radius: var(--shape-full); background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: var(--body-l); color: var(--on-surface);
}
.search:focus-within { background: var(--surface-container-highest); }
kbd {
  font: var(--label-s); padding: 2px 6px; border-radius: var(--shape-xs);
  background: var(--surface-container-highest); color: var(--on-surface-variant);
}

/* ── Switch (on a native checkbox) ────────────────────────────────────── */

input.switch {
  appearance: none; margin: 0; flex: none; cursor: pointer;
  position: relative; width: 52px; height: 32px;
  border-radius: var(--shape-full); border: 2px solid var(--outline);
  background: var(--surface-container-highest);
  transition: background var(--dur-short) linear, border-color var(--dur-short) linear;
}
input.switch::before {
  content: ""; position: absolute; top: 50%; left: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--outline); translate: 0 -50%;
  transition: left var(--dur-medium) var(--ease-spring), width var(--dur-medium) var(--ease-spring),
              height var(--dur-medium) var(--ease-spring), background var(--dur-short) linear;
}
input.switch:checked { background: var(--primary); border-color: var(--primary); }
input.switch:checked::before { left: 22px; width: 24px; height: 24px; background: var(--on-primary); }

/* ── Badge ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--shape-full);
  font: var(--label-s); color: var(--on-error); background: var(--error);
}
.badge.dot { min-width: 6px; width: 6px; height: 6px; padding: 0; }

/* ── Navigation rail (desktop) + bar (compact) ────────────────────────── */
/* The indicator pill behind the active icon is the whole navigation cue. */

.rail {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  width: 88px; padding: var(--sp-4) 0; background: var(--surface);
}
.rail-item, .nav-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 100%; padding: 0; border: 0; background: none;
  color: var(--on-surface-variant); text-decoration: none; font: var(--label-m);
}
:is(.rail-item, .nav-item) .ind {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: 56px; height: 32px; border-radius: var(--shape-full);
}
:is(.rail-item, .nav-item) .badge { position: absolute; top: 0; right: 10px; }
:is(.rail-item, .nav-item)[aria-current="page"] { color: var(--on-surface); }
:is(.rail-item, .nav-item)[aria-current="page"] .ind {
  color: var(--on-secondary-container); background: var(--secondary-container);
  animation: ind-in var(--dur-medium) var(--ease-spring);
}
:is(.rail-item, .nav-item)[aria-current="page"] .icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
@keyframes ind-in { from { scale: 0.5 1; } }

.navbar {
  display: flex; justify-content: space-around;
  height: 80px; padding: var(--sp-3) 0 var(--sp-4);
  background: var(--surface-container);
}
.navbar .nav-item { width: auto; flex: 1; }

/* ── Top app bar ──────────────────────────────────────────────────────── */

.appbar {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 64px; padding: 0 var(--sp-2) 0 var(--sp-4);
}
.appbar h1 { flex: 1; margin: 0; font: var(--title-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Menus, dialogs, snackbars: the only things that float ────────────── */

.menu {
  min-width: 200px; padding: var(--sp-1);
  border-radius: var(--shape-lg); background: var(--surface-container);
  box-shadow: var(--elev-2);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--shape-md);
  font: var(--label-l); color: var(--on-surface); background: none; text-align: start;
}
.menu-item .icon { color: var(--on-surface-variant); }

dialog.dialog {
  border: 0; padding: var(--sp-6); min-width: 320px; max-width: min(560px, 90vw);
  border-radius: var(--shape-xl);
  color: var(--on-surface); background: var(--surface-container-high);
  box-shadow: var(--elev-3);
}
dialog.dialog::backdrop { background: var(--scrim); }
dialog.dialog h2 { margin: 0 0 var(--sp-4); font: var(--headline-s); }
dialog.dialog p  { margin: 0; color: var(--on-surface-variant); }
dialog.dialog .actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-6); }
dialog.dialog[open] { animation: rise var(--dur-medium) var(--ease-decel); }
@keyframes rise { from { opacity: 0; translate: 0 12px; scale: 0.98; } }

.snackbar {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  border-radius: var(--shape-sm); box-shadow: var(--elev-3);
  font: var(--body-m); color: var(--inverse-on-surface); background: var(--inverse-surface);
}
.snackbar .msg { flex: 1; }
.snackbar .btn.text { color: var(--inverse-primary); }

/* ── Progress ─────────────────────────────────────────────────────────── */

.progress {
  height: 4px; border-radius: var(--shape-full);
  background: var(--secondary-container); overflow: hidden;
}
.progress > span {
  display: block; height: 100%; width: var(--value, 0%);
  border-radius: inherit; background: var(--primary);
  transition: width var(--dur-long) var(--ease-standard);
}

/* ── Disabled: last, and :is() not :where(), so it beats every variant ── */

:is(.btn, .icon-btn, .fab, .chip, .seg > button):disabled {
  cursor: default; pointer-events: none;
  color: color-mix(in oklch, var(--on-surface) 38%, transparent);
  background: color-mix(in oklch, var(--on-surface) 10%, transparent);
  border-color: transparent; box-shadow: none;
}