/* Three Pebbles — phone-only layout (360–430px); wider screens just get a centred column. */

:root {
  color-scheme: light;
  --paper: #f8f2e7;
  --paper-deep: #efe5d2;
  --surface: rgba(255, 255, 255, .62);
  --field: #fffaf1;
  --tint: #eee3d1;
  --ink: #28241f;
  --muted: #6e665c;
  --line: #d8cbb6;
  --terracotta: #a64f38;
  --terracotta-dark: #743322;
  --sage: #5d715c;
  --gold: #9b6b22;
  --gold-soft: #f2dfb9;
  --danger: #812f24;
  --ring: #193b70;
  --shadow: 0 14px 36px rgba(67, 52, 32, .12);

  --very-rough-a: #75433b; --very-rough-b: #4b2824;
  --rough-a: #996154; --rough-b: #674039;
  --mixed-a: #a38459; --mixed-b: #725a3e;
  --good-a: #70816d;  --good-b: #4d5e4c;
  --very-good-a: #4d7663; --very-good-b: #275344;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --radius-card: 26px;
  --radius-field: 16px;
  --tap: 44px;
  --tabbar: 62px;
  --column: 470px;

  --serif: Georgia, 'Times New Roman', serif;
  --sans: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--paper-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(255, 255, 255, .75), transparent 28rem),
    linear-gradient(155deg, var(--paper), var(--paper-deep)) fixed;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }
button, input, textarea { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.muted { color: var(--muted); font-size: .88rem; }
.kicker {
  color: var(--terracotta-dark); font-family: var(--sans);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.stack { display: grid; gap: var(--s4); }
.page-title { font-size: 1.5rem; }
.section-title { display: block; margin-bottom: var(--s3); font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }

/* ---------- shell, header, tab bar ---------- */

.shell {
  width: min(100%, var(--column));
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + var(--s3))
    calc(env(safe-area-inset-right) + var(--s4))
    calc(env(safe-area-inset-bottom) + var(--tabbar) + var(--s5))
    calc(env(safe-area-inset-left) + var(--s4));
}

.app-header { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.brand {
  display: flex; align-items: center; gap: var(--s2); min-width: 0; min-height: var(--tap); margin-right: auto;
  font-family: var(--serif); font-size: clamp(1.02rem, 4.9vw, 1.2rem); text-decoration: none; white-space: nowrap;
}
.brand span { overflow: hidden; text-overflow: ellipsis; }
.brand-mark { flex: none; width: 28px; height: 22px; }

.icon-button, .person-button, .pill {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.icon-button {
  display: grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); padding: 0; font-size: 1.2rem; line-height: 1;
}
.icon-button:disabled { opacity: .3; cursor: default; }
.person-button {
  display: flex; align-items: center; gap: var(--s2); flex: none;
  min-height: var(--tap); padding: 0 var(--s3) 0 6px; font-size: .9rem; font-weight: 700;
}
.avatar {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 50%; color: #fff; background: var(--ink); font-size: .8rem; font-weight: 700;
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s4); font-size: .92rem; font-weight: 700; text-decoration: none;
}
.pill-wide { width: 100%; min-height: 48px; }
.pill:active, .icon-button:active, .person-button:active { background: var(--tint); }

.primary {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  border: 0; border-radius: 999px; padding: 0 var(--s5);
  color: #fff; background: var(--ink); font-size: 1rem; font-weight: 800; text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.primary:active { transform: scale(.98); }
.primary[aria-disabled='true'], .primary:disabled { opacity: .38; }

.tabbar {
  position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: min(100%, var(--column));
  padding: 0 calc(env(safe-area-inset-right) + var(--s2)) env(safe-area-inset-bottom) calc(env(safe-area-inset-left) + var(--s2));
  border-top: 1px solid rgba(80, 63, 41, .14);
  background: rgba(250, 245, 235, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tabbar a {
  display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--tabbar);
  color: var(--muted); font-size: .74rem; font-weight: 700; text-decoration: none;
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current='page'] { color: var(--terracotta-dark); }
.tabbar a[aria-current='page'] svg { stroke-width: 2.1; }
.tabbar a:focus-visible { outline-offset: -4px; border-radius: 14px; }

/* ---------- cards, badges, chips ---------- */

.card {
  border-radius: var(--radius-card); padding: var(--s5) var(--s4);
  background: var(--surface); box-shadow: var(--shadow);
}
.badge {
  display: inline-flex; align-items: center; width: max-content; border-radius: 999px;
  padding: 3px 10px; font-size: .78rem; font-weight: 750;
}
.badge-gold { color: #724718; background: var(--gold-soft); }
.badge-sage { color: #2f4030; background: #dbe4d6; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 5px 11px; background: var(--tint); font-size: .88rem; font-weight: 700;
}

/* ---------- day navigation ---------- */

.day-nav { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.day-title { display: grid; justify-items: center; gap: 2px; text-align: center; }
.day-title h1 { font-size: 1.45rem; }
.day-title p { color: var(--muted); font-size: .85rem; }
.day-title .badge { margin-top: var(--s1); }

/* ---------- check-in ---------- */

.checkin { display: grid; gap: var(--s5); }
.measure { display: grid; gap: var(--s1); }
.measure + .measure, .events-section, .reflection-section { border-top: 1px solid var(--line); padding-top: var(--s5); }
.prompt { font-size: 1.22rem; }

.pebbles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: var(--s2); margin-top: var(--s4); padding: 0 var(--s1) var(--s1); }
.pebbles-compact { margin-top: var(--s3); }
.pebble, .pebble-shape {
  border-radius: 47% 53% 45% 55% / 55% 46% 54% 45%;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .25), 0 7px 12px rgba(45, 35, 22, .18);
}
.pebble {
  display: grid; align-content: end; justify-items: center; gap: 2px;
  min-width: 0; height: 76px; padding: 0 var(--s1) 10px;
  border: 2px solid transparent; color: #fffdf8;
  transition: translate .18s ease, box-shadow .18s ease, scale .12s ease;
}
[data-evaluation='very-rough'] { --peb-a: var(--very-rough-a); --peb-b: var(--very-rough-b); }
[data-evaluation='rough'] { --peb-a: var(--rough-a); --peb-b: var(--rough-b); }
[data-evaluation='mixed'] { --peb-a: var(--mixed-a); --peb-b: var(--mixed-b); }
[data-evaluation='good']  { --peb-a: var(--good-a);  --peb-b: var(--good-b); }
[data-evaluation='very-good']  { --peb-a: var(--very-good-a); --peb-b: var(--very-good-b); }
.pebble, .pebble-shape { background: linear-gradient(145deg, var(--peb-a), var(--peb-b)); }
.pebble[data-evaluation='very-rough'] { height: 64px; rotate: -5deg; }
.pebble[data-evaluation='rough'] { height: 72px; rotate: -3deg; }
.pebble[data-evaluation='mixed'] { height: 70px; rotate: 2deg; }
.pebble[data-evaluation='good']  { height: 80px; rotate: -1deg; }
.pebble[data-evaluation='very-good']  { height: 86px; rotate: 2deg; }
.pebble:active { scale: .96; }
.pebble[aria-pressed='true'] { border-color: #fff; box-shadow: 0 0 0 4px var(--ink), 0 10px 18px rgba(45, 35, 22, .24); translate: 0 -5px; }
.pebble .mark { font-size: 1.1rem; font-weight: 900; line-height: 1; }
.pebble .name { font-size: .68rem; font-weight: 800; line-height: 1.05; text-align: center; }

.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s2); }
.category {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 3px;
  min-width: 0; min-height: 68px; border: 1px solid var(--line); border-radius: var(--radius-field);
  padding: var(--s2) 2px; background: var(--field);
}
.category:active { transform: scale(.97); }
.category-emoji { font-size: 1.3rem; line-height: 1; }
.category-label { font-size: .68rem; letter-spacing: -.01em; font-weight: 700; line-height: 1.12; text-align: center; overflow-wrap: break-word; hyphens: auto; }
.category.is-added { border-color: var(--sage); background: #e9eee3; box-shadow: inset 0 0 0 1px var(--sage); }
.category.is-added::after {
  content: '✓'; position: absolute; top: -6px; right: -4px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--sage); font-size: .68rem; font-weight: 900;
}

.event-list { display: grid; gap: var(--s3); }
.event-list:not(:empty) { margin-top: var(--s4); }
.process-section { display: grid; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s5); }
.process-measure { display: grid; gap: var(--s1); }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.choice-pill { min-height: 46px; border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--s2); background: var(--field); font-size: .8rem; font-weight: 750; }
.choice-pill[aria-pressed='true'] { color: #fff; border-color: var(--ink); background: var(--ink); }
.event-editor { border-radius: 18px; padding: var(--s3); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.event-editor-head { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.event-emoji { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 14px; padding: 0; background: var(--tint); font-size: 1.3rem; }
.event-name { font-size: .98rem; font-weight: 800; }
.event-label-input {
  width: 100%; min-width: 0; height: var(--tap); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0 2px; background: transparent; font-size: 1rem; font-weight: 700;
}
.remove-event { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; padding: 0; color: var(--danger); background: transparent; font-size: 1.4rem; line-height: 1; }
.remove-event:active { background: var(--tint); }
.emoji-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); margin-bottom: var(--s2); border-radius: 14px; padding: var(--s2); background: var(--tint); }
.emoji-choice { min-height: var(--tap); border: 0; border-radius: 10px; padding: 0; background: rgba(255, 255, 255, .65); font-size: 1.25rem; }

.field { position: relative; display: grid; }
textarea, .text-input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-field);
  padding: var(--s3) 14px; background: var(--field); font-size: 1rem; line-height: 1.45;
}
textarea { display: block; min-height: 96px; resize: none; field-sizing: content; }
textarea.event-note { min-height: 56px; border-radius: 12px; background: #fff; }
.text-input { min-height: 48px; }
::placeholder { color: #8a8074; opacity: 1; }
.char-counter { justify-self: end; min-height: 1.1em; margin-top: var(--s1); color: var(--muted); font-size: .78rem; }
.char-counter:empty { display: none; }

.submit-row { display: grid; gap: var(--s2); }
.appreciation-list { display: grid; gap: var(--s3); }
.appreciation-entry { display: grid; gap: var(--s1); padding: var(--s3); border-radius: 18px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.appreciation-entry .text-input { margin-bottom: var(--s1); }
.submit-hint { text-align: center; color: var(--muted); font-size: .88rem; }
.submit-hint.nudge { color: var(--terracotta-dark); animation: nudge .4s ease; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.save-status-row { display: flex; justify-content: center; }
.save-status {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  border: 0; padding: 0 var(--s4); color: var(--muted); background: none; font-size: .85rem;
}
.save-status:disabled { cursor: default; opacity: 1; color: var(--muted); }
.save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.save-status[data-state='local'] .save-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.save-status[data-state='saving'] .save-dot { background: var(--gold); animation: breathe .8s ease-in-out infinite alternate; }
.save-status[data-state='failed'] { color: var(--danger); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.save-status[data-state='failed'] .save-dot { background: #a53628; }
@keyframes breathe { to { transform: scale(1.45); opacity: .55; } }

/* ---------- submitted summary ---------- */

.summary { display: grid; gap: var(--s4); }
.summary-private { text-align: center; justify-items: center; }
.summary-private h2 { font-size: 1.35rem; }
.summary-process { display: flex; flex-wrap: wrap; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s4); }
.summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.summary-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.summary-rating { display: grid; justify-items: start; gap: var(--s2); }
.pebble-mini, .pebble-mini[data-evaluation] {
  display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 40px;
  padding: 0 18px; rotate: -1deg; box-shadow: 0 4px 8px rgba(45, 35, 22, .16);
}
.summary-events { display: grid; gap: var(--s2); }
.summary-events li { display: grid; justify-items: start; gap: 3px; }
.summary-note { padding-left: var(--s3); color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.summary-appreciation { display: grid; gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s4); }
.summary-quotes { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.summary-quotes li { padding: var(--s2) var(--s3); border-radius: 14px; background: var(--field); }
.quote { font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- done ---------- */

.done {
  display: grid; justify-items: center; align-content: center; gap: var(--s4);
  min-height: calc(100dvh - var(--tabbar) - 190px); padding: var(--s5) var(--s2); text-align: center;
}
.done-title { font-size: clamp(1.8rem, 8.5vw, 2.3rem); outline: none; }
.done-message { max-width: 22rem; color: var(--muted); font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; text-wrap: balance; }
.done-actions { display: grid; gap: var(--s3); width: 100%; margin-top: var(--s4); }
.done-pebbles { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 74px; margin-bottom: var(--s2); }
.pebble-shape { display: block; width: 58px; height: 40px; animation: settle .9s cubic-bezier(.3, 1.3, .5, 1) backwards; }
.pebble-shape[data-evaluation='rough'] { --tilt: -6deg; rotate: -6deg; }
.pebble-shape[data-evaluation='mixed'] { --tilt: 4deg; width: 52px; height: 36px; rotate: 4deg; margin-bottom: 30px; margin-inline: -34px; z-index: 1; animation-delay: .36s; }
.pebble-shape[data-evaluation='good']  { --tilt: -2deg; width: 62px; height: 42px; rotate: -2deg; animation-delay: .18s; }
@keyframes settle {
  0% { opacity: 0; translate: 0 -46px; rotate: calc(var(--tilt) - 14deg); }
  60% { opacity: 1; translate: 0 3px; }
  80% { translate: 0 -2px; }
  100% { translate: 0 0; rotate: var(--tilt); }
}

/* ---------- calendar ---------- */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.stat { border-radius: 20px; padding: var(--s3) var(--s4); background: var(--tint); }
.stat strong { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1.15; }
.stat span { color: var(--muted); font-size: .85rem; }

.month-nav { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; margin-bottom: var(--s3); text-align: center; }
.month-nav h2 { font-size: 1.2rem; }
/* Seven 44px targets only fit a 360px phone with a slim card and no column gap. */
[data-view='calendar'] .card { padding-inline: var(--s2); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1) 0; }
.legend { padding-inline: var(--s2); }
.weekday { padding-bottom: var(--s1); text-align: center; color: var(--muted); font-size: .75rem; font-weight: 800; }
.day-cell {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: var(--tap);
  border: 0; padding: 0; background: none; font-size: .9rem; font-weight: 650;
}
.day-number { display: grid; place-items: center; width: min(100%, 40px); aspect-ratio: 1; border-radius: 50%; background: #e6dbc8; }
.day-cell[data-state='on-time'] .day-number, .legend i[data-state='on-time'] { color: #fff; background: var(--sage); }
.day-cell[data-state='late'] .day-number, .legend i[data-state='late'] { color: #322416; background: #e2b96e; box-shadow: inset 0 0 0 2px var(--gold); }
.day-cell[data-state='draft'] .day-number, .legend i[data-state='draft'] { background: transparent; border: 2px dashed var(--terracotta); }
.day-cell[data-state='future'] { color: #aca397; }
.day-cell[data-state='future'] .day-number { background: transparent; }
.day-cell[aria-current='date'] .day-number { outline: 2px solid var(--ink); outline-offset: 2px; }
.day-cell:active .day-number { scale: .94; }
.partner-dot, .legend .partner-key { width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta); }
.partner-dot { position: absolute; bottom: 0; left: calc(50% - 2.5px); }

.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); color: var(--muted); font-size: .82rem; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.legend i[data-state='draft'] { border-width: 1.5px; }

/* ---------- bottom sheets ---------- */

dialog.sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: var(--column); max-height: 85dvh;
  margin: 0 auto; border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: 0;
  color: var(--ink); background: var(--paper); box-shadow: 0 -18px 60px rgba(32, 25, 18, .3); overflow: hidden;
}
dialog.sheet[open] { display: flex; animation: sheet-up .28s cubic-bezier(.2, .8, .3, 1); }
dialog.sheet::backdrop { background: rgba(37, 31, 25, .48); animation: fade-in .2s ease; }
.sheet-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex: none;
  padding: var(--s5) var(--s4) var(--s3) var(--s5);
}
.sheet-head h2 { font-size: 1.45rem; }
.sheet-head p { margin-top: var(--s1); color: var(--muted); font-size: .88rem; }
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--s1) var(--s5) calc(env(safe-area-inset-bottom) + var(--s5));
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

.person-options { display: grid; gap: var(--s3); }
.person-card {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 66px;
  border: 1px solid var(--line); border-radius: 20px; padding: var(--s3); text-align: left; background: var(--field);
}
.person-card .avatar { width: 38px; height: 38px; font-size: .95rem; }
.person-card[aria-pressed='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.person-card strong, .person-card small { display: block; }
.person-card small { color: var(--muted); font-size: .85rem; }

.catalogue-search { position: sticky; top: 0; z-index: 1; margin: 0 -4px; padding: 4px 4px var(--s3); background: var(--paper); }
.catalogue-results { display: grid; gap: var(--s5); }
.catalogue-group { display: grid; gap: var(--s2); }
.catalogue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.catalogue-chip {
  display: flex; align-items: center; gap: var(--s2); min-width: 0; min-height: 48px;
  border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px;
  background: var(--field); font-size: .88rem; font-weight: 650; line-height: 1.15; text-align: left;
}
.catalogue-chip span:first-child { flex: none; font-size: 1.2rem; }
.catalogue-chip span:last-child { min-width: 0; overflow-wrap: anywhere; }
.catalogue-chip:active { background: var(--tint); }
.catalogue-chip-wide { grid-column: 1 / -1; }

.settings-form { display: grid; gap: var(--s2); }
.settings-form label { margin-top: var(--s2); font-size: .9rem; font-weight: 750; }
.settings-form .primary { margin-top: var(--s3); }
.settings-form .muted { margin-top: var(--s1); }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.settings-row .text-input { min-width: 0; }
.link-button { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.settings-result:empty { display: none; }
.settings-result { border-radius: 14px; padding: var(--s3); background: var(--tint); font-size: .92rem; overflow-wrap: anywhere; }
.settings-result[data-kind='ok'] { color: #2f4030; background: #dbe4d6; }
.settings-result[data-kind='error'] { color: var(--danger); background: #f3ddd6; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}