/* memorials directives — full text in DIRECTIVES.md
   1. SSOT — Extend the one that exists. Never a second copy that can disagree.
   2. Caveman comments — Shortest technical line that lands. Why, not what.
   3. No post-mortems — Code says what is, never what it used to be. Git keeps the history.
   end directives */

/* The service builder, one component wherever a person's notice is written:
   the wizard, the family's own page, the desk. It brings its own card, its
   own pills and its own fields, so a page loads this and flyout.css and asks
   nothing else of its own stylesheet. Tokens are base.css's. */
.svc {
  container-type: inline-size;
  background: var(--color-card); border: 1px solid var(--color-rule);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(74, 64, 48, .05);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 18px;
  font-family: var(--font-work);
}
.svc__title { margin: 0; font-family: var(--font-work); font-weight: 600; font-size: 19px; color: var(--color-ink); }
.svc__ask { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-ink-3); }

/* The pill is the control; its radio stays focusable for the browser's own
   "choose one" message, just not visible. */
.svc__pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc__pill {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 8px;
  border-radius: 8px; padding: 11px 18px; font-size: 15px; cursor: pointer;
  border: 1px solid var(--color-rule-2); background: transparent; color: var(--color-muted);
}
.svc__pill input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.svc__pill:has(input:checked) {
  border-color: var(--color-accent-rule); background: var(--color-accent); color: var(--color-accent-ink);
}
.svc__pill:has(input:focus-visible) { outline: 2px solid var(--color-accent-rule); outline-offset: 2px; }

/* The saved gatherings, one row each, on the card. */
.svc__list { display: flex; flex-direction: column; gap: 10px; }
.svc__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--color-paper-alt); border-radius: 8px; padding: 16px 18px;
}
.svc__words { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 16px; color: var(--color-ink); }
.svc__meta { font-size: 15px; line-height: 1.6; color: var(--color-muted-2); }

/* One field, in the drawer and in the prose box that stands in for it. */
.svc__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc__label { font-size: 14px; font-weight: 500; color: var(--color-ink-3); display: inline-flex; align-items: center; gap: 6px; }
.svc__input {
  width: 100%; box-sizing: border-box; min-width: 0;
  font: inherit; font-size: 15px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--color-rule-2); background: var(--color-card); color: var(--color-ink); outline: none;
  line-height: normal;
}
.svc__input:focus { border-color: var(--focus-rule); box-shadow: 0 0 0 3px var(--focus-halo); }
textarea.svc__input { line-height: 1.55; resize: vertical; min-height: 76px; }

/* The drawer's one form: a gathering is a place on a day. Three date columns
   never fit a 460px panel, so the date takes a row of its own. */
.svc__form {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border: 1px solid var(--color-rule); border-radius: 12px;
}
.svc__when { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc__when > :first-child { grid-column: 1 / -1; }

/* A phone reads down the middle, and iOS date and time inputs never shrink
   below their intrinsic width, so side by side they paint over each other. */
@media (max-width: 720px) {
  .svc__pills, .svc__when { grid-template-columns: 1fr; }
  .svc__title, .svc__ask { text-align: center; }
}

/* In a narrow column - the desk's editor beside its rail - the card sizes
   itself down: less air, smaller type, and pills that take the room they
   have rather than wrapping their words. */
@container (max-width: 560px) {
  .svc { padding: 16px 18px; gap: 12px; }
  .svc__title { font-size: 16px; }
  .svc__ask { font-size: 14px; line-height: 1.5; }
  .svc__pills { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
  .svc__pill { padding: 8px 10px; font-size: 14px; }
  .svc__row { padding: 12px 14px; gap: 10px; }
  .svc__words { font-size: 15px; }
  .svc__meta { font-size: 13px; }
}