/* ==========================================================================
   Kanga’s Kitchen — notes on a recipe

   These sit at the foot of the recipe view, which is white "paper". So they are
   set as something pinned to that sheet — a length of ribbon, then the notes
   themselves separated by hairlines — rather than a second stack of cards
   competing with the recipe above them.

   Only the theme tokens from styles.css are used, so dark mode comes for free.
   The one exception is the lightbox scrim, which is deliberately dark in both.
   ========================================================================== */

.notes {
  position: relative;
  margin-top: 3rem;
  padding-top: 2.9rem;
}

/*
 * The ribbon, and the two numbers here are fussier than they look. The gingham
 * gradient colours its first 10px and leaves the rest of a 20px period clear,
 * so the tile has to be BIGGER than 10px or there's no gap at all and the band
 * comes out solid — and the band has to be two whole tiles tall, because one
 * row of squares reads as a dashed rule rather than as cloth.
 */
.notes::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 32px;
  background-image: var(--gingham);
  background-size: 16px 16px;
}

.notes__title { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 .2rem; }
.notes__lede  { color: var(--ink-soft); margin: 0; }
.notes__hint  { color: var(--ink-faint); font-size: .875rem; margin: .3rem 0 1.25rem; }
.notes__hint strong { color: var(--ink-soft); font-weight: 600; }
.notes__waiting { color: var(--ink-faint); margin: 1rem 0 0; }

/* The empty state is the one place to say what a good note looks like. Left
   aligned and close-cropped: this is an invitation, not a vacancy sign. */
.notes .notes__empty { text-align: left; padding: 1.5rem 1.5rem 1.6rem; }
.notes .notes__empty p { margin: 0; }

/* ── Writing one ───────────────────────────────────────────────────────── */

.note-composer {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem .9rem .8rem;
  margin-bottom: 1.5rem;
  transition: border-color .12s, background-color .12s;
}
.note-composer.is-over {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.note-composer__who {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
/* The label is uppercased; the name inside it is a person's name and isn't. */
.note-composer__who span { text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* Grown to fit by script, so the scrollbar and the drag handle both go away. */
.note-composer__text {
  background: var(--card);
  min-height: 5.5rem;
  resize: none;
  overflow: hidden;
}
.note-composer--reply .note-composer__text { min-height: 4rem; }

.note-composer__row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.note-composer__gap { flex: 1 1 auto; }

.note-composer--reply {
  background: var(--card);
  margin: .85rem 0 .25rem;
}

/* ── Attachments waiting to be posted ──────────────────────────────────── */

.note-clips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.note-clip {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
  padding: .25rem .25rem .25rem .3rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-size: .875rem;
}
.note-clip__thumb {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 6px; background: var(--paper-deep); color: var(--ink-faint);
}
.note-clip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-clip__name {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem;
}
.note-clip__size { color: var(--ink-faint); font-size: .8rem; flex: none; }
.note-clip__x {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-faint);
  -webkit-tap-highlight-color: transparent;
}
.note-clip__x:hover { background: var(--danger-wash); color: var(--danger); }
.note-clip__x:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.note-clip--busy { color: var(--ink-faint); padding: .55rem .8rem; font-style: italic; }

/* Whatever went wrong with an attachment is said inside the composer that owns
   it. From a reply at the foot of a long thread, the head of the section is
   several screens away from where she is looking. */
.note-composer__trouble { margin: .6rem 0 0; font-size: .875rem; }

/* ── The thread ────────────────────────────────────────────────────────── */

.note-list, .note-replies { list-style: none; padding: 0; margin: 0; }

.note { padding: 1.15rem 0; }
.note-list > .note + .note { border-top: 1px solid var(--rule); }

/* Centred rather than baseline-aligned: the author now carries a face, and a
   circle sitting on a text baseline hangs below the line it belongs to. */
.note__head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .3rem; }
.note__who  { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.note__when { color: var(--ink-faint); font-size: .85rem; }
.note__edited { color: var(--ink-faint); font-size: .8rem; font-style: italic; }

.note__onpage {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--wicker-wash); color: #8A6B3C;
  font-size: .74rem; font-weight: 700;
}
.note__onpage .ico { width: .9em; height: .9em; fill: currentColor; stroke-width: 1.5; }

/* Bodies come in escaped with <br> for the line breaks, so a long URL someone
   pasted has to be allowed to break or it pushes the page sideways. */
.note__body { line-height: 1.6; overflow-wrap: anywhere; }

.note--gone .note__gone { margin: 0; color: var(--ink-faint); font-style: italic; }

/* Replies: one level, held in by a soft rule rather than a hard indent. */
.note-replies {
  margin-top: .9rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--rule);
}
.note--reply { padding: .75rem 0; }
.note-replies > .note + .note { border-top: 1px solid var(--rule); }

.note__actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }

/* The star is a wildflower yellow, not the rose the Favorite heart uses — the
   two mean different things and shouldn't look like the same switch. */
.note__star[aria-pressed="true"] {
  background: var(--wicker-wash);
  border-color: var(--sun);
  color: #8A6B3C;
}
.note__star[aria-pressed="true"] .ico { fill: var(--sun); stroke: var(--sun); }

.note__edit { margin-top: .35rem; }
.note__edit-text { background: var(--card); min-height: 5rem; resize: none; overflow: hidden; }
.note__edit-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* ── What's pinned to a note ───────────────────────────────────────────── */

.note-shots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .5rem; margin-top: .65rem; max-width: 34rem;
}
.note-shot {
  padding: 0; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-deep);
  -webkit-tap-highlight-color: transparent;
}
.note-shot img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.note-shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.note-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.note-file {
  display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; min-height: 44px;
  padding: .4rem .85rem;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--card);
  color: var(--ink); text-decoration: none; font-size: .9rem;
}
.note-file:hover { border-color: var(--accent); }
.note-file:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.note-file__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-file__size { color: var(--ink-faint); font-size: .82rem; flex: none; }
.note-file--gone { color: var(--ink-faint); }

/* ── Lightbox ──────────────────────────────────────────────────────────── */

/*
 * Deliberately the same dark scrim in both themes: this is a photo viewer, and
 * a photo wants darkness around it whatever the rest of the app is wearing.
 */
.note-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; cursor: zoom-out;
  background: rgba(12, 20, 30, .93);
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}
.note-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.note-lightbox__name {
  position: absolute; left: 0; right: 0;
  bottom: max(.85rem, env(safe-area-inset-bottom));
  margin: 0; padding: 0 1rem; text-align: center;
  color: rgba(255, 255, 255, .85); font-size: .85rem;
}
.note-lightbox__close {
  position: absolute;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.note-lightbox__close:hover { background: rgba(255, 255, 255, .28); }
.note-lightbox__close .ico { width: 1.4rem; height: 1.4rem; }

/* ── A count for the shelf cards ───────────────────────────────────────── */

/* `.rcard__notes` is what the shelf actually emits; `.note-count` is kept for
   anywhere else a count appears. Only one of the two was ever styled, so the
   badge on a recipe card was rendering as bare text beside a proper pill. */
.note-count,
.rcard__notes {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-deep);
  font-size: .74rem; font-weight: 700;
}

/* ── Touch ─────────────────────────────────────────────────────────────── */

/*
 * Nothing here is revealed by hover: on the iPad this app is really used on,
 * a hover-only control is simply a control that does not exist.
 *
 * There used to be a wide-screen refinement resting the actions at 62% opacity
 * and bringing them up on hover. Two things were wrong with it. An iPad with
 * its keyboard on reports hover: hover and, in landscape, 1366px wide, so the
 * rule caught the primary device instead of avoiding it. And --ink-soft on
 * --paper measures 5.3:1 at full strength, which means any dimming past about
 * 95% puts it under the 4.5:1 floor — at .62 it was 2.5:1, on a screen being
 * read at arm's length across a kitchen counter. There is no opacity that is
 * both quieter and legible, so the actions are simply legible.
 */

/*
 * Sized for fingers wherever there is a finger.
 *
 * `any-pointer` rather than `pointer` or `hover`, because a tablet with a
 * trackpad attached is still a touchscreen and the browsers disagree about
 * what its *primary* pointer then is. any-pointer: coarse stays true either
 * way. Under the old `hover: none` all of this quietly reverted to mouse sizes
 * on exactly the setup the app is used on.
 */
@media (any-pointer: coarse) {
  .note-clip { min-height: 52px; }
  .note-clip__x { width: 44px; height: 44px; }
  .note__actions { gap: .4rem; }
  .note__actions .btn { min-height: 44px; }
  .note-shot { cursor: default; }
}

@media (max-width: 560px) {
  .notes { margin-top: 2.25rem; }
  .note-clip__name { max-width: 9rem; }
  .note-replies { padding-left: .75rem; }
  .note__actions .btn { flex: 1 1 auto; }
  .note-shots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .note-composer { transition: none; }
}

/*
 * The same colours again, as light-dark() pairs.
 *
 * The rules above now carry only the daytime value, which every browser
 * understands; this block adds the evening half where light-dark() is
 * supported. Without the guard these declarations were simply invalid on an
 * older Safari, and an invalid `color` inherits — which on a filled blue
 * button meant near-white text on light blue.
 */
@supports (color: light-dark(#000, #fff)) {
  .note__onpage { color: light-dark(#8A6B3C, var(--sun)); }
  .note__star[aria-pressed="true"] { color: light-dark(#8A6B3C, var(--sun)); }
}