/* ==========================================================================
   Kanga's Kitchen — the row editor

   Rows instead of a block of text. Sized for a finger first: every control
   clears 44px, and the two that open menus are the only ones on a row.

   `any-pointer: coarse`, never `hover: none`, anywhere in this file. An iPad in
   a Magic Keyboard reports `hover: hover`, so a hover-keyed rule switches
   itself off on the one device this app is actually used on.
   ========================================================================== */

.slist { list-style: none; margin: 0; padding: 0; }

.slist__row {
  display: grid;
  grid-template-columns: 2rem 1fr 2.75rem;
  gap: .5rem;
  align-items: start;
  padding: .35rem 0;
}

/* The number is information, not decoration: it is what she reads out to
   herself while cooking, and what the printed page will say. */
.slist__n {
  grid-column: 1;
  margin-top: .55rem;
  font-size: .82rem; font-weight: 700;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slist__body { grid-column: 2; min-width: 0; }

.slist__text, .slist__note {
  width: 100%; display: block;
  font: inherit; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  resize: none; overflow: hidden;
  min-height: 44px;
}
.slist__text:focus-visible, .slist__note:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* A note is subordinate to its line and has to look it — indented, quieter,
   italic. It is the thing written in the margin, not a second step. */
.slist__noterow {
  display: grid; grid-template-columns: 1.1rem 1fr 2rem;
  gap: .3rem; align-items: start;
  margin-top: .3rem;
}
.slist__notemark { color: var(--ink-faint); margin-top: .6rem; font-size: .9rem; }
.slist__note {
  font-size: .92rem; font-style: italic;
  background: var(--paper-deep);
  min-height: 40px;
}
.slist__notex {
  width: 2rem; height: 2rem; margin-top: .35rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.slist__notex:hover { background: var(--danger-wash); color: var(--danger); }

.slist__more { grid-column: 3; position: relative; }

.slist__dots {
  width: 2.5rem; height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.slist__dots:hover { background: var(--paper-deep); color: var(--ink); }
.slist__dots:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
}

.slist__menu {
  position: absolute; top: 100%; right: 0;
  z-index: 5; min-width: 13rem;
  display: flex; flex-direction: column;
  padding: .25rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.slist__menu button {
  text-align: left; font: inherit; font-size: .9rem;
  padding: .6rem .7rem; min-height: 44px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.slist__menu button:hover:not([disabled]) { background: var(--accent-wash); color: var(--accent-deep); }
.slist__menu button[disabled] { color: var(--ink-faint); cursor: default; }
.slist__menu button.is-danger { color: var(--danger); }
.slist__menu button.is-danger:hover { background: var(--danger-wash); }

/* The common action, and the only one that is a plain button. */
.slist__add { margin-top: .6rem; border-style: dashed; }

@media (any-pointer: coarse) {
  .slist__row { grid-template-columns: 1.75rem 1fr 2.75rem; }
}

/*
 * Let the browser size the field where it can. It gets the first render and
 * every width change right for free, which is exactly what the JS fallback in
 * steplist.js has to work at — see the comment above grow() for what goes wrong
 * without it.
 */
@supports (field-sizing: content) {
  .slist__text, .slist__note {
    field-sizing: content;
    height: auto !important;
  }
}

@media print {
  .slist__more, .slist__add, .slist__notex { display: none !important; }
}