/* Material Design 3 styles for myDoodle.
   Color roles follow the M3 scheme generated from a basketball-orange seed;
   "yes" and "maybe" are harmonized custom colors, "no" uses the error role. */

:root {
  --primary: #9a4521;
  --on-primary: #ffffff;
  --primary-container: #ffdbcd;
  --on-primary-container: #380d00;
  --secondary: #77574a;
  --secondary-container: #ffdbcd;
  --on-secondary-container: #2c160b;
  --tertiary-container: #f1e3a9;
  --on-tertiary-container: #211b00;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --yes: #2e6a3f;
  --yes-container: #b1f1ba;
  --on-yes-container: #00210b;
  --maybe: #795900;
  --maybe-container: #ffdf9e;
  --on-maybe-container: #261a00;
  --surface: #fff8f6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fff1ec;
  --surface-container: #fceae4;
  --surface-container-high: #f6e5de;
  --surface-container-highest: #f1dfd8;
  --on-surface: #231a16;
  --on-surface-variant: #53433e;
  --outline: #85736d;
  --outline-variant: #d8c2ba;
  --inverse-surface: #392e2b;
  --inverse-on-surface: #ffede7;
  --inverse-primary: #ffb596;
  --scrim: rgb(0 0 0 / 0.32);

  --elevation-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --elevation-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --elevation-3: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);

  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --field-bg: var(--surface-container-low);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ffb596;
    --on-primary: #5a1c00;
    --primary-container: #7b2e0d;
    --on-primary-container: #ffdbcd;
    --secondary: #e7bead;
    --secondary-container: #5d4034;
    --on-secondary-container: #ffdbcd;
    --tertiary-container: #4f4719;
    --on-tertiary-container: #eee2a6;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --yes: #96d59f;
    --yes-container: #125129;
    --on-yes-container: #b1f1ba;
    --maybe: #f3bf48;
    --maybe-container: #5c4300;
    --on-maybe-container: #ffdf9e;
    --surface: #1a110e;
    --surface-container-lowest: #140c09;
    --surface-container-low: #231a16;
    --surface-container: #271e1a;
    --surface-container-high: #322824;
    --surface-container-highest: #3d322f;
    --on-surface: #f1dfd8;
    --on-surface-variant: #d8c2ba;
    --outline: #a08d86;
    --outline-variant: #53433e;
    --inverse-surface: #f1dfd8;
    --inverse-on-surface: #392e2b;
    --inverse-primary: #9a4521;
    color-scheme: dark;
  }
}

/* ---------- Base & typography ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--on-surface);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }

.display-small { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: 0; }
.headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.headline-small { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.title-large { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.title-medium { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.title-small { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.body-large { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
.body-medium { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.label-large { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.label-medium { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }
.on-surface-variant { color: var(--on-surface-variant); }

/* Material Symbols — width is clamped so ligature names never flash as text */
.icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  width: 1em;
  height: 1em;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
}
.icon.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---------- Top app bar ---------- */

.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 16px;
  background: var(--surface);
  transition: background-color 200ms var(--ease);
}
.top-app-bar.scrolled { background: var(--surface-container); }
.top-app-bar .bar-inner {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.app-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: var(--on-surface);
  text-decoration: none;
  font-size: 22px;
  line-height: 28px;
}
.app-title .icon { color: var(--primary); }
.bar-actions { display: flex; align-items: center; gap: 4px; }
.bar-actions[hidden] { display: none; }

/* ---------- Layout ---------- */

.container {
  max-width: 1008px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  display: grid;
  gap: 16px;
}
.container.narrow { max-width: 640px; }
.stack { display: grid; gap: 16px; }
@media (max-width: 600px) {
  .container { padding: 8px 16px 40px; }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface-container-low);
  border-radius: var(--shape-md);
  box-shadow: var(--elevation-1);
  padding: 24px;
  display: grid;
  gap: 16px;
  min-width: 0;
  --field-bg: var(--surface-container-low);
}
.card.outlined { background: var(--surface); box-shadow: none; border: 1px solid var(--outline-variant); --field-bg: var(--surface); }
.card.filled { background: var(--surface-container-highest); box-shadow: none; --field-bg: var(--surface-container-highest); }
.card.primary { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; --field-bg: var(--primary-container); }
.card.flush { padding: 8px 0; gap: 0; }
.card.flush > .card-header { padding: 16px 24px 8px; }
@media (max-width: 600px) {
  .card { padding: 16px; }
  .card.flush { padding: 8px 0; }
  .card.flush > .card-header { padding: 12px 16px 8px; }
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.card-header > div { display: flex; align-items: center; gap: 12px; }
.card.centered { max-width: 400px; width: 100%; margin: 10vh auto 0; }

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--on-surface-variant);
}
.empty-state .icon { font-size: 48px; color: var(--outline); }

/* ---------- Buttons ---------- */

.btn, .icon-btn, .chip, .choice {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* State layer */
.btn::before, .icon-btn::before, .chip::before, .choice::before, .list-item.interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease);
}
.btn:hover::before, .icon-btn:hover::before, .chip:hover::before, .choice:hover::before { opacity: 0.08; }
.btn:active::before, .icon-btn:active::before, .chip:active::before, .choice:active::before { opacity: 0.12; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .choice:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--shape-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow 150ms var(--ease);
}
.btn .icon { font-size: 18px; }
.btn.has-icon { padding-left: 16px; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.filled:hover { box-shadow: var(--elevation-1); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.tonal:hover { box-shadow: var(--elevation-1); }
.btn.outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.btn.text { background: transparent; color: var(--primary); padding: 0 12px; }
.btn.text.has-icon { padding: 0 16px 0 12px; }
.btn.danger { color: var(--error); }
.btn:disabled, .icon-btn:disabled, .choice:disabled { cursor: default; pointer-events: none; }
.btn.filled:disabled, .btn.tonal:disabled {
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--on-surface) 38%, transparent);
  box-shadow: none;
}
.btn.text:disabled, .btn.outlined:disabled { color: color-mix(in srgb, var(--on-surface) 38%, transparent); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--on-surface-variant);
  text-decoration: none;
}
.icon-btn.danger { color: var(--error); }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.small .icon { font-size: 20px; }

.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Text fields (outlined) ---------- */

.field { position: relative; display: block; min-width: 0; }
.field input, .field select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--outline);
  border-radius: var(--shape-xs);
  background: transparent;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms var(--ease);
}
.field select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-surface-variant) 50%), linear-gradient(135deg, var(--on-surface-variant) 50%, transparent 50%);
  background-position: calc(100% - 22px) 26px, calc(100% - 17px) 26px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option { background: var(--surface-container); color: var(--on-surface); }
.field input:hover, .field select:hover { border-color: var(--on-surface); }
.field input:focus, .field select:focus { border: 2px solid var(--primary); padding-left: 15px; }
.field input[readonly] { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 14px; }
.field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.field .label {
  position: absolute;
  left: 12px;
  top: 28px;
  transform: translateY(-50%);
  max-width: calc(100% - 24px);
  padding: 0 4px;
  background: var(--field-bg);
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top 150ms var(--ease), font-size 150ms var(--ease), line-height 150ms var(--ease);
}
.field.floating .label,
.field input:focus ~ .label,
.field input:not(:placeholder-shown) ~ .label {
  top: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
}
.field input:focus ~ .label, .field select:focus ~ .label { color: var(--primary); }
.field input::placeholder { color: transparent; }
.supporting-text { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; color: var(--on-surface-variant); padding: 4px 16px 0; min-height: 20px; }
.supporting-text.error { color: var(--error); }

.inline-form { display: flex; gap: 12px; align-items: center; }
.inline-form .field { flex: 1; }

.poll-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.poll-form .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .poll-form { grid-template-columns: 1fr 1fr; }
  .poll-form .wide { grid-column: 1 / -1; }
}

/* ---------- Chips ---------- */

.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-sm);
  background: transparent;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.chip .icon { font-size: 18px; }
.chip.selected {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
  padding-left: 8px;
}
.chip .chip-badge { font-size: 12px; opacity: 0.8; }

/* Small status/assist chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--shape-sm);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.tag .icon { font-size: 16px; }
.tag.yes { background: var(--yes-container); color: var(--on-yes-container); }
.tag.maybe { background: var(--maybe-container); color: var(--on-maybe-container); }
.tag.no { background: var(--error-container); color: var(--on-error-container); }
.tag.neutral { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Lists ---------- */

.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 16px 12px 24px;
}
.list-item + .list-item { border-top: 1px solid var(--outline-variant); }
.list-item .content { flex: 1; min-width: 0; display: grid; gap: 2px; }
.list-item .headline { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; color: var(--on-surface); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.headline:hover { text-decoration: underline; }
.list-item .supporting { color: var(--on-surface-variant); }
.list-item .trailing { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; }
.list-item.closed .headline { color: var(--on-surface-variant); }
.list-item .actions { display: flex; }
@media (max-width: 680px) {
  .list-item { flex-wrap: wrap; padding: 12px 16px; }
  .list-item .trailing { width: 100%; justify-content: space-between; padding-left: 64px; }
}

.date-badge {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--shape-md);
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: grid;
  place-content: center;
  text-align: center;
}
.date-badge .day { font-size: 18px; line-height: 20px; font-weight: 500; }
.date-badge .month { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.list-item.closed .date-badge { background: var(--surface-container-highest); color: var(--on-surface-variant); }

/* ---------- Poll page ---------- */

.poll-hero { gap: 12px; padding: 28px 24px; }
.poll-hero .overline { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.85; }
.poll-hero .facts { display: grid; gap: 8px; }
.poll-hero .fact { display: flex; align-items: center; gap: 12px; }
.poll-hero .fact .icon { opacity: 0.85; }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-lg);
  background: var(--surface);
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.15px;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.choice .icon { font-size: 32px; }
.choice.yes { --c: var(--yes); --cc: var(--yes-container); --occ: var(--on-yes-container); }
.choice.maybe { --c: var(--maybe); --cc: var(--maybe-container); --occ: var(--on-maybe-container); }
.choice.no { --c: var(--error); --cc: var(--error-container); --occ: var(--on-error-container); }
.choice:hover { color: var(--c); }
.choice.selected { background: var(--cc); color: var(--occ); border-color: var(--cc); }
.choice.selected .icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.choice:disabled { opacity: 0.6; }

.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 600px) { .columns { grid-template-columns: 1fr; } }
.column { background: var(--surface); border-radius: var(--shape-md); padding: 4px 0 8px; min-width: 0; }
.column-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; font-size: 14px; font-weight: 500; }
.column-header .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.column.yes .column-header { color: var(--yes); }
.column.maybe .column-header { color: var(--maybe); }
.column.no .column-header { color: var(--error); }
.column ul { list-style: none; margin: 0; padding: 0; }
.column li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 4px 0 16px; font-size: 16px; line-height: 24px; }
.column li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column li.me .name { font-weight: 500; }
.column .none { padding: 8px 16px; color: var(--on-surface-variant); }
.avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
}
.column.yes .avatar { background: var(--yes-container); color: var(--on-yes-container); }
.column.maybe .avatar { background: var(--maybe-container); color: var(--on-maybe-container); }
.column.no .avatar { background: var(--error-container); color: var(--on-error-container); }

/* ---------- Stats ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface-container-highest);
  border-radius: var(--shape-md);
  padding: 16px;
  display: grid;
  gap: 4px;
}
.stat .icon { color: var(--primary); }
.stat .value { font-size: 36px; line-height: 44px; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0 16px; height: 52px; white-space: nowrap; border-bottom: 1px solid var(--outline-variant); }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
th { height: 56px; font-size: 14px; font-weight: 500; letter-spacing: 0.1px; color: var(--on-surface-variant); }
td { font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--on-surface) 4%, transparent); }
th.num, td.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--on-surface); }
th .sort-icon { font-size: 18px; vertical-align: -4px; margin-left: 2px; opacity: 0; }
th.sorted { color: var(--on-surface); }
th.sorted .sort-icon { opacity: 1; }
td.yes { color: var(--yes); font-weight: 500; }
td.maybe { color: var(--maybe); }
td.no { color: var(--error); }
td a { color: var(--on-surface); }

/* ---------- Snackbar ---------- */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--shape-xs);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  box-shadow: var(--elevation-3);
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 150ms var(--ease), transform 250ms var(--ease);
}
.snackbar.show { opacity: 1; transform: translate(-50%, 0); }
.snackbar .icon { font-size: 20px; color: var(--inverse-primary); }
.snackbar.error .icon { color: var(--error); }
@media (prefers-color-scheme: dark) { .snackbar.error .icon { color: #ba1a1a; } }

/* ---------- Dialog ---------- */

.dialog {
  border: 0;
  padding: 24px;
  width: min(400px, calc(100vw - 48px));
  border-radius: var(--shape-xl);
  background: var(--surface-container-high);
  color: var(--on-surface);
  box-shadow: var(--elevation-3);
}
.dialog::backdrop { background: var(--scrim); }
.dialog[open] { animation: dialog-in 200ms var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.95); } }
.dialog .dialog-icon { display: block; margin: 0 auto 16px; color: var(--error); }
.dialog h2 { font-size: 24px; line-height: 32px; font-weight: 400; text-align: center; margin-bottom: 16px; }
.dialog p { color: var(--on-surface-variant); }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }