/*
 * The standing panels: what is on (events) on Today, and on Your listing the
 * listing's cards (hours, contact, pictures) and the menu, deals and posts.
 * Each row edits in place: pressing Change opens its editor under it, inside
 * the same card.
 *
 * Rows are tiles a step lighter than their card, parted by a few pixels of
 * the card between them, never by a rule (Nov 2026, the app's sheets).
 */

/* ── The listing ────────────────────────────────────────────────────────── */

.v-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3);
  border-radius: 14px;
  background: var(--raise-2);
}
.v-line + .v-line { margin-top: 6px; }
.v-line .v-glyph { background: color-mix(in srgb, var(--v-c, var(--ink-2)) 16%, var(--raise)); }
.v-line-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v-line-key { color: var(--ink-3); font-size: var(--t-12); font-weight: 550; }
.v-line-val { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--t-14); overflow-wrap: anywhere; }
.v-line-val.v-empty { color: var(--ink-4); }
.v-line-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.v-line-open,
.v-line-clear {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-13);
  font-weight: 550;
  transition: background 0.15s var(--e-out), color 0.15s var(--e-out);
}
/* Pinned to the last two columns, so Change sits flush right whether or not
   a Remove stands beside it, rather than a gap's width short of the edge. */
.v-line-clear { grid-column: 3; }
.v-line-open { grid-column: 4; background: var(--raise); color: var(--ink); font-weight: 700; }
.v-line-open:hover { background: color-mix(in srgb, var(--ink) 8%, var(--raise)); }
.v-line-clear:hover { color: var(--danger); }
.v-line-editor { grid-column: 1 / -1; padding: var(--s-3) 0 var(--s-1); }
.v-inline-form { display: flex; gap: var(--s-2); align-items: center; }
.v-inline-form .v-input { flex: 1; }
.v-file {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  height: var(--ctl-h);
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  background: var(--raise);
  color: var(--ink-2);
  cursor: pointer;
}
.v-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* The hours editor: a row per day. */
.v-week { display: flex; flex-direction: column; gap: 6px; }
.v-day { display: grid; grid-template-columns: 120px repeat(4, minmax(0, 1fr)) auto; gap: var(--s-2); align-items: center; }
@media (max-width: 640px) { .v-day { grid-template-columns: 1fr 1fr; } .v-day-name { grid-column: 1 / -1; } }
.v-day-name { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--t-14); font-weight: 500; }
/* The day and time fields are paste/controls.js triggers (outlined, like
   every field); here they only keep the row's height. */
:is(.v-day, .v-special-row) .cc-trigger { min-width: 0; min-height: 40px; height: 40px; padding: 0 10px; gap: 6px; font-size: var(--t-16); }

/* ── What is on ─────────────────────────────────────────────────────────── */

.v-ev-list { display: grid; gap: 6px; }
.v-ev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3);
  border-radius: 14px;
  background: var(--raise-2);
}
.v-ev-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  border-radius: var(--r-2);
  background: var(--raise);
  line-height: 1;
}
.v-ev-mon { color: var(--danger); font-size: var(--t-11); font-weight: 650; text-transform: uppercase; }
.v-ev-day { margin-top: 3px; color: var(--ink); font-size: var(--t-18); font-weight: 650; }
.v-ev.is-live .v-ev-date { background: var(--accent-soft); }
.v-ev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-ev-title { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--t-14); font-weight: 600; }
.v-ev-now { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: var(--t-12); font-weight: 600; }
.v-ev-now i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v-ev-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); color: var(--ink-3); font-size: var(--t-13); }
.v-ev-when .ic,
.v-ev-where .ic { flex: none; width: 13px; height: 13px; }
/* The clock stays beside its time when the time runs onto a second line. */
.v-ev-at { display: inline-flex; align-items: flex-start; gap: 4px; }
.v-ev-at .ic { margin-top: 0.2em; }
.v-ev-where { display: inline-flex; align-items: center; gap: 4px; }
.v-ev-cap { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--raise-2); overflow: hidden; max-width: 200px; }
.v-ev-cap i { display: block; height: 100%; background: var(--accent); }
.v-ev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.v-ev-going { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: var(--t-13); font-weight: 550; }
.v-ev-going .ic { width: 14px; height: 14px; }
/* Words, not a box: .v-btn-danger's outline drawn tight round a bare word
   read as a stray frame. */
.v-ev-cancel { padding: 2px 0; background: none; box-shadow: none; color: var(--ink-3); font-size: var(--t-12); font-weight: 550; }
.v-ev-cancel:hover { background: none; color: var(--danger); }
.v-ev-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  height: 40px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--raise-2);
  color: var(--ink-2);
  font-size: var(--t-14);
  font-weight: 650;
}
.v-ev-new .ic { width: 16px; height: 16px; }
.v-ev-new:hover { background: var(--raise-2); color: var(--ink); }

/* Across the page, the events run two to a line, and an odd one out takes
   the whole line (its count still lands under the column's on the right). */
@container ov-more (min-width: 760px) {
  .ov-on .v-ev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-on .v-ev:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The event form, opened in place. */
.v-ev-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-radius: var(--r-3);
  background: var(--raise-2);
}
.v-ev-form .v-input { background: var(--raise); }
.v-ev-main,
.v-ev-kind { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.v-ev-kind { gap: var(--s-2); }
/* With the width, the fields sit beside the kinds rather than over them: the
   eighteen kinds wrap to a block, not four rows across the whole card. */
@container ov-more (min-width: 760px) {
  .ov-on .v-ev-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: start; }
  .ov-on .v-ev-kind { padding-top: 2px; }
  .ov-on .v-ev-form > .v-form-foot,
  .ov-on .v-ev-form > .v-notice { grid-column: 1 / -1; }
}
.v-ev-modes { align-self: flex-start; }
.v-mode { display: inline-flex; align-items: center; gap: 6px; }
.v-mode .ic { width: 14px; height: 14px; }
.v-ev-form > *,
.v-day > *,
.v-ev-row > * { min-width: 0; }
/* The day on a line of its own, so its whole date shows ("Tue, 10 Nov 2026"),
   and the two times under it. */
.v-ev-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.v-ev-row > .v-ev-day-f { grid-column: 1 / -1; }
/* Cancel, asked on the event itself */
.v-ev-ask { display: grid; gap: 10px; margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.4; color: inherit; }
.v-ev-ask-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v-ev-ask .btn { --bh: 40px; padding: 0 16px; font-size: 16px; background: #1D1F22; color: #FBF8F1; }
.v-ev-ask .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; }
.v-ev.is-asking .v-ev-cancel { display: none; }
.v-ev-form .v-form-foot { margin-top: 0; justify-content: flex-end; }
@media (max-width: 560px) {
  .v-ev-row { grid-template-columns: minmax(0, 1fr); }
  .v-day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-day-name { grid-column: 1 / -1; }
}

/* Ideas under an empty list: a first event is easier to start from. Two even
   columns, so four ideas make a block rather than a ragged run of pills. */
.v-ev-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
@container ov-more (max-width: 480px) {
  .v-ev-ideas { grid-template-columns: minmax(0, 1fr); }
}
@container ov-more (min-width: 760px) {
  .ov-on .v-ev-ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.v-ev-idea { justify-content: flex-start; min-width: 0; height: auto; min-height: 32px; padding-block: 6px; text-align: left; line-height: 1.3; }
.v-ev-idea .ic { flex: none; width: 13px; height: 13px; }

/* The claimed-business lines: a type, contact, pictures, what the place has,
   closures and holiday hours. Same vocabulary as the week above. */
.v-stack { flex-direction: column; align-items: stretch; }
.v-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-13); color: var(--ink-3); flex: 1; }
.v-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-14); color: var(--ink); white-space: nowrap; }
.v-checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.v-hint { font-size: var(--t-13); color: var(--ink-3); margin: var(--s-2) 0 0; }
.v-special { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-2); }
.v-special-row { display: grid; grid-template-columns: 150px auto 1fr 1fr 2fr auto; gap: var(--s-2); align-items: center; }
@media (max-width: 640px) { .v-special-row { grid-template-columns: 1fr 1fr; } }

/* ── Your listing ────────────────────────────────────────────────────────── */
/* The form beside the pin's sheet, once there is room for both; the sheet
   rides along as the cards scroll past it. Under that the sheet follows the
   cards, so the form keeps the width it needs.

   .ls-main answers to the name the Overview's panels used (ov-more), so the
   menu, deals and posts lay themselves out by the width they have here
   exactly as they did there. Each card is measured on its own (lines), so an
   editor opened in one lays out for the width it actually has. */
.ls-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
@media (max-width: 1180px) {
  .ls-page { grid-template-columns: minmax(0, 1fr); }
}
.ls-main { container: ov-more / inline-size; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.v-lines { display: flex; flex-direction: column; gap: var(--s-4); }
.ls-card { container: lines / inline-size; scroll-margin-top: 96px; }
.ls-menu:empty { display: none; }
.ls-menu { scroll-margin-top: 96px; }

/* The tabs, held at the top of the window while the cards scroll under. */
.ls-tabs {
  position: sticky;
  z-index: 5;
  top: var(--s-3);
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  scrollbar-width: none;
}
.ls-tabs::-webkit-scrollbar { display: none; }
.ls-tab { white-space: nowrap; }

/* The week as seven tiles over its line; today is lit. */
.ls-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--s-3); }
.ls-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--s-2) 2px;
  border-radius: 12px;
  background: var(--raise-2);
  transition: background 0.15s var(--e-out);
}
.ls-day:hover { background: color-mix(in srgb, var(--ink) 6%, var(--raise-2)); }
.ls-day b { color: var(--ink); font-size: var(--t-12); font-weight: 800; }
.ls-day span { overflow: hidden; max-width: 100%; color: var(--ink-2); font-size: var(--t-11); text-overflow: ellipsis; white-space: nowrap; }
.ls-day.is-off span { color: var(--ink-4); }
.ls-day.is-today { background: var(--accent-soft); }
.ls-day.is-today b { color: var(--accent-text); }
@container lines (max-width: 420px) {
  .ls-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The pin beside the form (pin-preview.js), held in view while the form scrolls. */
.ls-side { position: sticky; top: var(--s-3); min-width: 0; }
@media (max-width: 1180px) {
  .ls-side { position: static; }
}

/* A day's hours in a column: the day and its first opening on one row, a
   split day and 24h under them, rather than six cells too narrow for a time. */
@container lines (max-width: 640px) {
  .v-week .v-day-head { grid-template-columns: 104px repeat(2, minmax(0, 1fr)); }
  .v-week .v-day-head span:nth-child(n + 4) { display: none; }
  .v-week:not(.v-week-legacy) .v-day { grid-template-columns: 104px repeat(2, minmax(0, 1fr)); }
  .v-week:not(.v-week-legacy) .v-day > .v-check { grid-column: 1; grid-row: 2; padding-left: 24px; }
  .v-special-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container lines (max-width: 380px) {
  .v-week .v-day-head { display: none; }
  .v-week:not(.v-week-legacy) .v-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-week:not(.v-week-legacy) .v-day > .v-day-name { grid-column: 1; }
  .v-week:not(.v-week-legacy) .v-day > .v-check { grid-column: 2; grid-row: 1; justify-self: end; padding-left: 0; }
}

/* Offerings, deals and posts: the menu across the page, deals beside posts.
   Three panels rather than three headings in one, so each form sits under its
   own list. */
.v-listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
@container ov-more (min-width: 760px) {
  .v-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-listing-menu { grid-column: 1 / -1; }
}
.v-offs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-offs:empty { display: none; }
.v-offs { gap: 6px; }
.v-off { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3); border-radius: 14px; background: var(--raise-2); }
.v-off-out { opacity: 0.5; }
.v-off-text { display: flex; flex-direction: column; min-width: 0; }
.v-off-name { font-size: var(--t-14); font-weight: 600; color: var(--ink); }
.v-off-sub { font-size: var(--t-13); color: var(--ink-3); }
.v-off-price { font-size: var(--t-14); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.v-off-acts { grid-column: 3; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.v-add { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.v-add .v-input { flex: 1 1 160px; }
.v-add > button { margin-left: auto; }
/* The deal's end day, a drawn date: wide enough to read "Tue, 10 Nov 2026". */
.v-add > .v-field { flex: 1 1 200px; }
/* A list and its form are parted by space, so what is there and what to add
   read as two things without a rule between them. */
.v-offs:not(:empty) + .v-add,
.v-add + .v-offs:not(:empty) { margin-top: var(--s-4); }
/* In a half-width panel: the deal and its details on rows of their own, the
   day it ends beside the button that starts it. */
/* The menu's four fields on one row across the page, two by two where it is
   narrower, so no placeholder is cut short and Add never strands itself. */
.v-add-offering { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
@container ov-more (max-width: 899px) {
  .v-add-offering { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-add-offering > button { grid-column: 2; }
}
@container ov-more (max-width: 480px) {
  .v-add-offering { grid-template-columns: minmax(0, 1fr); }
  .v-add-offering > button { grid-column: auto; }
}
.v-add-deal,
.v-announce { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.v-add-deal > .v-input,
.v-announce > textarea { grid-column: 1 / -1; }
.v-add-deal .v-field { max-width: 240px; }
.v-add-deal .v-field .v-input { flex: none; }
.v-announce > button { grid-column: 2; }
.v-posts .v-off { grid-template-columns: minmax(0, 1fr); }
.v-day-head { display: grid; grid-template-columns: 120px repeat(4, minmax(0, 1fr)) auto; gap: var(--s-2); color: var(--ink-3); font-size: var(--t-12); }
.v-day-head span:first-child { visibility: hidden; }
@media (max-width: 640px) { .v-day-head { display: none; } }
@media (max-width: 640px) { .v-off { grid-template-columns: 1fr; } .v-off-acts { grid-column: auto; justify-content: flex-start; } }

.v-week-legacy .v-day { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }

/* The pictures (Oct 20 2026). */
/* One row: the cover wide, the logo round, the photo square. The columns
   are 16, 9 and 9 parts, so a 16:9 cover and two squares come out exactly the
   same height and every caption starts on one line. */
.v-media { display: grid; grid-template-columns: 16fr 9fr 9fr; gap: var(--s-3) var(--s-4); align-items: start; }
@container lines (max-width: 280px) {
  .v-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-media-cover { grid-column: 1 / -1; }
}
.v-media-tile { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.v-media-pick { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: var(--r-3); overflow: hidden; cursor: pointer; background: var(--raise-2); transition: background .15s var(--e-out), box-shadow .15s var(--e-out), transform .15s var(--e-out); }
.v-media-tile:not(:has(.v-media-img)) .v-media-pick:hover { background: color-mix(in srgb, var(--ink) 6%, var(--raise-2)); }
.v-media-cover .v-media-pick { aspect-ratio: 16 / 9; }
.v-media-logo .v-media-pick { border-radius: 50%; }
/* A file held over a tile lights it, so the drop has somewhere to land. */
.v-media-tile.is-over .v-media-pick { background: var(--accent-soft); }
.v-media-pick:active { transform: scale(.98); }
.v-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-media-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; text-align: center; font-size: var(--t-12); font-weight: 550; color: var(--ink-3); }
.v-media-empty .ic { color: var(--ink-4); }
.v-media-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: var(--t-13); font-weight: 600; }
.v-media-busy[hidden] { display: none; }
.v-media-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: baseline; }
.v-media-label { color: var(--ink); font-size: var(--t-14); font-weight: 600; line-height: 1.35; }
.v-media-hint { grid-column: 1 / -1; margin-top: 2px; color: var(--ink-3); font-size: var(--t-12); line-height: 1.35; }
.v-media-remove { padding: 0; color: var(--ink-3); font-size: var(--t-12); font-weight: 550; line-height: 1.35; }
.v-media-remove:hover { color: var(--danger); }

/* ══ Your listing, redesigned (listingView): the pin card is the editor ══════
   Scoped to .ls2, the page's root, so the frame above (the cards' own
   rules) keeps serving lines.js. Paste-up: Jakarta only, ink buttons, green
   only on status dots, focus and the one primary action. */
.ls2 { --ls-blue: #2F4A78; }
.ls2 svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ls2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-dash.ls2 > * + * { margin-top: 0; }
.ls2 .btn { font-size: 16px; }
.ls2 .btn.sm { --bh: 40px; padding: 0 16px; font-size: 16px; }
.ls2 .btn.lg { --bh: 56px; }
.ls2 :is(button, input, textarea, a):focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* The hero: the statement, the checklist, and the card on the printed map */
.ls-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px clamp(32px, 4vw, 72px); align-items: start; padding-top: clamp(4px, 1.6vw, 24px); }
.ls-head { grid-column: 1 / -1; }
.ls-head .xh1 { max-width: 15em; }
.ls-intro .xline { margin-top: 0; }
.ls-check { margin-top: 44px; max-width: 470px; }
.ls-check .xprog { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); margin-top: 14px; max-width: none; }
.ls-check .xsteps { margin-top: 30px; }
.ls-check .xstep b { font-size: 21px; }
.ls-check .xstep p { color: var(--ink2); }
.ls-check.is-full { margin-top: 36px; }
.ls-done { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; font-size: 16px; color: var(--ink2); }
.ls-done span { display: inline-flex; align-items: center; gap: 7px; }
.ls-done svg.i { width: 17px; height: 17px; stroke-width: 2.2; color: var(--ink); }

.ls-stage { position: relative; min-height: 760px; margin-top: -8px; }
.ls-stage .map { position: absolute; right: 0; top: 3%; width: 92%; aspect-ratio: 1; object-fit: cover; rotate: -1.8deg; filter: var(--art-filter) drop-shadow(0 18px 24px rgba(40,28,10,.28)); pointer-events: none; }
.ls-stage .t1 { position: absolute; right: 0; top: 0; width: 26%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: 6deg; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); z-index: 1; filter: var(--art-filter); pointer-events: none; }
.ls-stage .xlabel { left: 3%; top: 0; }
.ls-pin { position: relative; z-index: 3; width: min(440px, 74%); margin: 70px 0 0 2%; padding: 14px 16px 20px; --tilt: -1.3deg; }
.ls-pin .xslot { margin-top: 12px; }
.ls-pin .xslot.cover { height: 176px; margin-top: 0; }
.ls-pin .xslot b { font-size: 16px; }
.ls-part { position: relative; margin: 12px -8px 0; padding: 8px; border-radius: 7px; cursor: pointer; transition: background-color 160ms ease; }
.ls-part.on { outline: 2px solid #1D1F22; }
@media (hover: hover) { .ls-part:hover { background: rgba(70,98,146,.07); } }
.ls-coverpart { margin: 0; padding: 0; }
.ls-cover { display: block; width: 100%; height: 176px; object-fit: cover; border-radius: 3px; }
.ls-edit { position: absolute; left: calc(100% + 18px); top: 50%; translate: 0 -50%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border-radius: 99px; background: #FBF6EA; color: var(--ls-blue); box-shadow: inset 0 0 0 1.5px rgba(70,98,146,.5), 0 6px 12px -8px rgba(40,28,10,.5); font-size: 16px; font-weight: 750; white-space: nowrap; rotate: 1.5deg; cursor: pointer; }
/* Size the pill to its words. Safari can keep a width measured before Jakarta
   loads, which left the label running past the pill's edge. */
.ls-edit { width: max-content; max-width: none; }
.ls-edit > * { flex: none; }
.ls-edit svg.i { width: 16px; height: 16px; stroke-width: 2; }
.ls-edit.on { background: #1D1F22; color: #FBF8F1; box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); rotate: -1deg; }
.ls-coverpart .ls-edit { top: 22px; translate: none; }
:root[data-theme="dark"] .ls-edit.on { box-shadow: 0 0 0 2px rgba(242,235,221,.75), 0 8px 14px -8px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ls-edit.on { box-shadow: 0 0 0 2px rgba(242,235,221,.75), 0 8px 14px -8px rgba(0,0,0,.6); } }
.ls-name { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.ls-name.no-logo { grid-template-columns: minmax(0, 1fr); }
.ls-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ls-logo.is-empty { display: grid; place-items: center; outline: 1.6px dashed rgba(70,98,146,.55); outline-offset: -2px; background: rgba(70,98,146,.08); color: var(--ls-blue); cursor: pointer; }
.ls-logo.is-empty.next { outline: 2px solid #1D1F22; background: rgba(230,203,90,.4); color: #1D1F22; }
.ls-logo svg.i { width: 18px; height: 18px; }
.ls-name h3 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.ls-name .sub { margin-top: 3px; font-size: 15px; color: var(--ink2); }
.ls-open { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; font-weight: 750; }
.ls-open span:not(.sdot) { font-weight: 500; color: var(--ink2); }
.ls-hrs { margin-top: 2px; font-size: 15px; color: var(--ink2); }
.ls-deal { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; }
.ls-deal .tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: #C55A13; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.ls-pay { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; }
.ls-pay svg.i { color: #1D1F22; }
.ls-menu-mini .k { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.ls-menu-mini .ls-mrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 16px; }
.ls-menu-mini .ls-mrow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-menu-mini .ls-mrow .pr { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink2); }
.ls-menu-mini .ls-mrow.out .nm { color: var(--ink2); }
.ls-menu-mini .ls-mrow svg.i { width: 15px; height: 15px; color: #1D1F22; stroke-width: 2.2; }
.ls-menu-mini .stamp.sold { margin-left: auto; height: 22px; font-size: 10.5px; }
.ls-acts { display: grid; grid-template-columns: 1.2fr repeat(2, 1fr); gap: 8px; }
.ls-acts .btn { --bh: 44px; padding: 0 12px; font-size: 15px; box-shadow: none; }
.ls-acts .btn.quiet { box-shadow: inset 0 0 0 1.5px #1D1F22; }

/* The tabs, which split the page */
.ls-tabbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 34px; margin-top: 48px; scroll-margin-top: 90px; }
.ls-tabbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.ls-tabbtn[aria-selected="true"] { color: var(--ink); }
.ls-tabbtn[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2.5px; border-radius: 2px; background: var(--ink); }
@media (hover: hover) { .ls-tabbtn:not([aria-selected="true"]):hover { color: var(--ink); } }
.ls-tabbtn .need { width: 8px; height: 8px; border-radius: 50%; background: var(--s-busy); box-shadow: 0 0 0 2px var(--ground); }
.ls-tabbar .note { margin-left: auto; font-size: 15px; color: var(--ink2); }

.ls-panels { display: flex; flex-direction: column; margin-top: 28px; }
.ls-panels .ls-lines, .ls-panels .v-lines { display: contents; }
.ls-panels .ls-tabsec { display: none; order: 0; }
.ls-panels[data-show="basics"] .ls-tabsec[data-tab="basics"],
.ls-panels[data-show="photo"] .ls-tabsec[data-tab="photo"],
.ls-panels[data-show="hours"] .ls-tabsec[data-tab="hours"],
.ls-panels[data-show="contact"] .ls-tabsec[data-tab="contact"],
.ls-panels[data-show="menu"] .ls-tabsec[data-tab="menu"] { display: block; }
.ls-panels:not([data-show="menu"]) :is(.ls-menusec, .ls-dealband, .ls-postsec) { display: none; }
.ls-panels .ls-tabsec, .ls-panels .ls-menusec { margin-top: 28px; scroll-margin-top: 90px; }
.ls-panels .ls-menusec { order: 1; }
.ls-panels .lt-linksec { order: 2; margin-top: 64px; }
.ls-panels .ls-dealband { order: 3; }
.ls-panels .ls-postsec { order: 4; }

/* ── The tabs' sections (lines.js): each part on a slip of paper, written on
   in place, with how it reads in the app beside it ── */
.lt-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.lt-slip { display: block; padding: 28px 32px 34px; --tilt: -.6deg; }
.lt-slip .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.lt-slip .top h3 { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lt-slip .top span { font-size: 15px; color: var(--ink2); }
.lt-set { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.lt-set > legend { margin: 0 0 12px; padding: 0; }
.lt-set > legend.ls-sect { margin-top: 0; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-why { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.lt-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(29,31,34,.32); color: var(--ink); font-size: 16px; font-weight: 650; cursor: pointer; user-select: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
@media (hover: hover) { .lt-chip:hover { box-shadow: inset 0 0 0 1.5px #1D1F22; } }
.lt-chip:has(input:checked) { background: #1D1F22; color: #FBF8F1; box-shadow: none; }
.lt-chip:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.lt-chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.lt-chip .lt-paint { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1.5px rgba(251,248,241,.8); }
.lt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.lt-foot .lt-note { flex-basis: 100%; }
.lt-note { font-size: 16px; font-weight: 600; color: #A3312B; }
.lt-note:empty { display: none; }
.lt-slip .btn, .lt-coupon .btn, .lt-link .btn { background: #1D1F22; color: #FBF8F1; }
.lt-slip .btn.quiet, .lt-coupon .btn.quiet, .lt-link .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; }
.lt-slip .btn svg.i, .lt-coupon .btn svg.i { width: 17px; height: 17px; }
.lt-f { width: 100%; min-width: 0; height: 44px; padding: 0 2px; border: 0; border-bottom: 2px dashed rgba(70,98,146,.45); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; }
.lt-f::placeholder { color: #67625A; font-weight: 500; opacity: 1; }
.lt-f:focus-visible { outline: none; border-bottom: 2px solid var(--accent); }
.lt-in { display: flex; align-items: center; gap: 10px; color: var(--ls-blue); }
.lt-in svg.i { width: 19px; height: 19px; }
.lt-fld { display: block; margin-top: 26px; }
.lt-fld .ls-sect { display: block; margin: 0 0 4px; }
.ls2 .lt-fld .lt-f { font-size: 19px; }
/* A switch that is on is ink: green is kept for status and the one primary action. */
.ls2 input[type="checkbox"].switch:not(.sr):checked { background: var(--ink); }
.ls2 input[type="checkbox"].switch:not(.sr):checked::after { background: var(--ground); }

/* The pin, as the sheet beside the slip says it */
.lt-preview b.lt-pv-name { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.lt-preview .lt-pv-sub { margin-top: 4px; font-size: 16px; color: var(--ink2); }
.lt-preview .lt-pv-pay { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 16px; font-weight: 650; }
.lt-preview .is-empty { color: var(--ink2); font-weight: 500; }
.lt-preview .lt-pv-has { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lt-preview .lt-pv-has:empty { display: none; }
.lt-preview .lt-pv-has .tag { height: 30px; padding: 0 11px; background: var(--ground2); color: var(--ink); font-size: 15px; font-weight: 650; }
.lt-buttons .ls-acts { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.lt-buttons .ls-acts .btn.quiet { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); background: transparent; }

/* A coupon of its own beside a slip: temporarily closed, the holidays */
.lt-coupon { display: block; margin-top: 44px; padding: 24px 26px; max-width: 440px; --tilt: 1.2deg; outline: 1.4px dashed rgba(29,31,34,.36); outline-offset: -8px; }
.lt-coupon .kick { color: #47443E; }
.lt-coupon b.t { display: block; margin-top: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.lt-coupon > p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink2); }
.lt-coupon .lt-f { margin-top: 10px; }
.lt-coupon .lt-foot { margin-top: 18px; }
.lt-switch { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 20px; font-weight: 750; letter-spacing: -.01em; cursor: pointer; }

/* Pictures: three prints taped up, or a dashed space for each */
.lt-prints { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lt-prints.is-one { grid-template-columns: minmax(0, 520px); }
.lt-print { margin: 0; min-width: 0; }
.lt-pick { position: relative; display: block; cursor: pointer; }
.lt-pick.cut { padding: 10px 10px 12px; --tilt: -1.4deg; }
.lt-print:nth-child(2) .lt-pick.cut { --tilt: 1.6deg; }
.lt-print:nth-child(3) .lt-pick.cut { --tilt: -.8deg; }
.lt-pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.lt-print-cover .lt-pick img { aspect-ratio: 16 / 9; }
.lt-print-logo .lt-pick img { aspect-ratio: 1; border-radius: 50%; }
.lt-empty { aspect-ratio: 4 / 3; flex-direction: column; justify-content: center; text-align: center; background: rgba(70,98,146,.06); }
.lt-print-cover .lt-empty { aspect-ratio: 16 / 9; }
.lt-print-logo .lt-empty { aspect-ratio: 1; border-radius: 50%; }
.lt-empty .plus { width: 46px; height: 46px; }
.lt-empty .plus svg.i { width: 22px; height: 22px; }
.lt-print.is-over .lt-pick { outline: 2.5px dashed var(--accent); outline-offset: 6px; }
.lt-print.is-busy .lt-pick { pointer-events: none; }
.lt-busy { position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 2px; background: rgba(29,31,34,.62); color: #FBF8F1; font-size: 16px; font-weight: 750; }
.lt-print-logo .lt-busy { border-radius: 50%; }
.lt-busy[hidden] { display: none; }
.lt-pick:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.lt-print figcaption { display: grid; gap: 4px; margin-top: 18px; }
.lt-print figcaption b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.lt-print figcaption > span:not(.lt-acts) { font-size: 16px; line-height: 1.45; color: var(--ink2); }
.lt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lt-media-note { margin-top: 24px; }

/* Hours: the week on a slip, a row a day; today's row is lit */
.lt-days { display: grid; gap: 4px; margin-top: 20px; }
/* Two lines a day on the slip: the day and what it can do, then its times.
   With the width for it, one line (the container query below). */
.lt-week { container: week / inline-size; }
.lt-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name acts" "times times" "again again"; align-items: center; gap: 8px 16px; margin: 0 -14px; padding: 10px 14px 12px; border-radius: 10px; }
.lt-day.is-today { background: rgba(230,203,90,.3); }
.lt-dname { grid-area: name; display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.lt-dname b { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.lt-dname small { font-size: 15px; font-weight: 650; color: var(--ink2); }
.lt-times, .lt-shut, .lt-alltxt { padding-left: 56px; }
@container week (min-width: 820px) {
  .lt-day { grid-template-columns: 200px auto minmax(0, 1fr); grid-template-areas: "name times acts" "name again acts"; }
  .lt-times, .lt-shut, .lt-alltxt { padding-left: 0; }
}
.lt-times { grid-area: times; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lt-again { grid-area: again; }
.lt-times .to { font-size: 16px; color: var(--ink2); }
.lt-times .cc { width: auto; }
.lt-times .cc-trigger, .lt-sp .cc-trigger { min-height: 40px; width: 132px; padding: 0 12px 0 15px; border-radius: 99px; background: #FBF6EA; box-shadow: inset 0 0 0 1.5px rgba(70,98,146,.45); color: #1D1F22; font-size: 16px; font-weight: 650; }
.lt-times .cc-trigger.is-empty .cc-value, .lt-sp .cc-trigger.is-empty .cc-value { color: #67625A; }
.lt-times .cc-trigger .cc-ic, .lt-sp .cc-trigger .cc-ic { width: 16px; height: 16px; color: var(--ls-blue); }
.lt-times .cc-trigger:disabled { opacity: .45; }
.lt-shut, .lt-alltxt { grid-area: times; display: none; font-size: 16px; font-weight: 600; color: var(--ink2); }
.lt-dacts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lt-mini { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(29,31,34,.3); color: var(--ink); font: inherit; font-size: 16px; font-weight: 650; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .lt-mini:hover { box-shadow: inset 0 0 0 1.5px #1D1F22; } }
.lt-mini:focus-visible, .lt-mini:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.lt-allday:has(input:checked) { background: #1D1F22; color: #FBF8F1; box-shadow: none; }
.lt-day:not(.is-split) .lt-again { display: none; }
.lt-day.is-off .lt-times, .lt-day.is-off .lt-dacts { display: none; }
.lt-day.is-off .lt-shut { display: block; }
.lt-day.is-all .lt-times, .lt-day.is-all .lt-split { display: none; }
.lt-day.is-all .lt-alltxt { display: block; }
.lt-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 22px; max-width: 460px; }
.lt-tile { display: grid; gap: 2px; justify-items: center; padding: 10px 2px; border-radius: 12px; background: var(--ground2); text-align: center; }
.lt-tile b { font-size: 15px; font-weight: 800; }
.lt-tile span { font-size: 13.5px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink2); }
.lt-tile.is-today { background: var(--ink); color: var(--ground); }
.lt-tile.is-today span { color: var(--ground); }
.lt-tile.is-off span { color: var(--ink2); }
.lt-sps { display: grid; gap: 10px; margin-top: 16px; }
.lt-sps:empty { display: none; }
.lt-sp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "date shut rm" "times times times" "note note note"; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(70,98,146,.07); }
.lt-sp > .cc { grid-area: date; }
.lt-sp .cc-trigger { width: 100%; }
.lt-sp .lt-sp-shut { grid-area: shut; }
.lt-sp .lt-times { grid-area: times; }
.lt-sp .lt-sp-note { grid-area: note; margin: 0; }
.lt-sp .lt-sp-remove { grid-area: rm; width: 40px; padding: 0; }
.lt-sp.is-shut .lt-times { display: none; }
/* Nothing to save until a day is on the list, or one was saved before. */
.lt-coupon[data-save="special"]:not([data-had]):not(:has(.lt-sp)) .lt-save { display: none; }

/* The menu, booking or shop link: a short ticket under the menu */
.lt-link { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px 36px; align-items: center; max-width: 960px; padding: 26px 30px; --tilt: -.5deg; }
.lt-link-say .kick { color: #47443E; }
.lt-link-say b { display: block; margin-top: 10px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.lt-link-say p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink2); }
.lt-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lt-link-row .lt-in { flex: 1 1 240px; min-width: 0; }
.lt-link .lt-note { grid-column: 1 / -1; }
.ls-tabsec:not(.lt-linksec) > .lt-link { max-width: 760px; }

/* 01 the menu, as a printed slip */
.ls2 .xsec-head .lede { color: var(--ink2); }
.ls-menugrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.ls-slip { padding: 28px 32px 34px; --tilt: -.6deg; scroll-margin-top: 90px; }
.ls-slip .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.ls-slip .top h3 { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ls-slip .top span { font-size: 15px; color: var(--ink2); }
.ls-wait { margin-top: 18px; font-size: 16px; color: var(--ink2); }
.ls-sect { margin-top: 26px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.ls-items > .ls-row:first-child { margin-top: 20px; }
.ls-row { position: relative; margin-top: 8px; }
.ls-item { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto 148px; gap: 12px; align-items: end; width: 100%; padding: 6px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ls-item .nm { font-size: 20px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ls-item .nm small { display: block; font-size: 15px; font-weight: 450; letter-spacing: 0; color: var(--ink2); }
.ls-item .dots { align-self: end; margin-bottom: 7px; border-bottom: 2.5px dotted rgba(29,31,34,.32); }
.ls-item .pr { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-item .fl { justify-self: end; }
.ls-item .flag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 99px; background: #1D1F22; color: #FBF8F1; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ls-item .flag svg.i { width: 15px; height: 15px; stroke-width: 2.2; }
.ls-row.out .nm, .ls-row.out .pr { color: #77726A; }
.ls-row.out .flag { background: none; color: var(--ink2); padding: 0; }
.ls-row > .stamp { position: absolute; left: 34%; top: 2px; height: 30px; font-size: 13px; padding: 0 12px; rotate: -6deg; pointer-events: none; }
.ls-row.held { margin: 10px -14px 0; padding: 6px 14px 12px; border-radius: 8px; background: rgba(230,203,90,.28); }
.ls-row.held > .stamp { left: calc(34% + 14px); top: 8px; }
.ls-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ls-tools[hidden] { display: none; }
.ls-tools .btn.quiet { box-shadow: inset 0 0 0 1.5px #1D1F22; color: #1D1F22; }
.ls-tools .btn:not(.quiet) { background: #1D1F22; color: #FBF8F1; }
.ls-tools .ls-ic { width: 40px; padding: 0; }
.ls-tools .ls-ic svg.i { width: 17px; height: 17px; }
.ls-add { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px auto auto; gap: 10px 12px; align-items: center; margin-top: 30px; padding-top: 4px; }
.ls-add .plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(70,98,146,.12); color: var(--ls-blue); }
.ls-add-pick { min-width: 0; }
.ls-add-pick .cc { width: auto; }
.ls-add-pick .ls-add-sectin { width: 140px; }
.ls-add-more { display: contents; }
.ls-add .ls-add-new, .ls-add .ls-add-desc { grid-column: 2 / -1; }
.ls-add .ls-add-new[hidden], .ls-add:not(.has-name) .ls-add-desc { display: none; }
.ls-f { width: 100%; min-width: 0; height: 44px; padding: 0 2px; border: 0; border-bottom: 2px dashed rgba(70,98,146,.45); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; }
.ls-f::placeholder { color: #67625A; font-weight: 500; opacity: 1; }
.ls-f:focus-visible { outline: none; border-bottom: 2px solid var(--accent); }
.ls-add .cc-trigger { gap: 6px; min-height: 40px; max-width: 220px; padding: 0 12px 0 14px; border-radius: 99px; background: #FBF6EA; box-shadow: inset 0 0 0 1.5px rgba(70,98,146,.45); color: #1D1F22; font-size: 16px; font-weight: 650; }
.ls-add .cc-trigger .cc-ic { width: 16px; height: 16px; color: #1D1F22; }
.ls-add .btn { --bh: 44px; background: #1D1F22; color: #FBF8F1; }
.ls-addmore { margin-top: 12px; padding-left: 48px; font-size: 15px; color: var(--ink2); }
.ls-aside .kick { margin-bottom: 0; }
.ls-aside h3 { margin-top: 14px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ls-aside > p { margin-top: 10px; font-size: 16.5px; color: var(--ink2); max-width: 26em; }
.ls-sheet { margin-top: 26px; padding: 18px 18px 20px; border-radius: 22px; background: var(--sheet); box-shadow: var(--shadow-lift); max-width: 400px; rotate: 1deg; }
.ls-sheet .grab { width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: var(--rule2); }
.ls-sheet .k { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.ls-sheet .ls-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ls-sheet .it { display: grid; align-content: start; gap: 2px; padding: 12px 12px 13px; border-radius: 14px; background: var(--ground2); font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ls-sheet .it svg.i { width: 14px; height: 14px; stroke-width: 2.2; }
.ls-sheet .it span { font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ls-sheet .it.out { color: var(--ink2); }
.ls-sheet .it.empty { background: none; outline: 1.6px dashed var(--rule2); outline-offset: -2px; color: var(--ink2); font-weight: 650; place-content: center; text-align: center; }
.ls-sheet .more { margin-top: 12px; font-size: 15px; font-weight: 650; color: var(--ink2); }
.ls-aside .cap { margin-top: 18px; font-size: 16px; color: var(--ink2); }
.ls-aside .cap b { color: var(--ink); }

/* 02 deals, on a blush band */
/* Full bleed, to the edges of the page as the board draws it (shell.css --xg). */
.ls2 .xband { margin: 96px calc(12px - var(--xg, 24px)) 0; scroll-margin-top: 90px; }
.ls-deals { display: grid; gap: 28px; justify-items: start; }
.ls-coupon { position: relative; width: min(430px, 100%); padding: 24px 26px 24px; --tilt: -1.6deg; }
.ls-coupon:nth-child(2n) { --tilt: 1.2deg; justify-self: end; }
.ls-coupon::after { content: ''; position: absolute; inset: 8px; outline: 1.4px dashed rgba(29,31,34,.36); pointer-events: none; }
.ls-coupon .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ls-coupon .top .when { font-size: 15px; color: var(--ink2); }
.ls-coupon b.t { display: block; margin-top: 14px; font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; overflow-wrap: anywhere; }
.ls-coupon .d { margin-top: 8px; font-size: 16px; color: var(--ink2); }
.ls-coupon .ls-r { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--ink2); }
.ls-coupon .btn { background: #1D1F22; color: #FBF8F1; }
.ls-coupon .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; }
.ls-coupon .kick { color: #47443E; }
.ls-coupon .sc { position: absolute; left: -12px; top: 46px; z-index: 2; width: 24px; height: 24px; color: #1D1F22; rotate: -90deg; }
.ls-coupon .sc svg.i { width: 24px; height: 24px; }
.ls-coupon .f { position: relative; z-index: 1; display: block; width: 100%; height: 46px; margin-top: 10px; padding: 0 2px; border: 0; border-bottom: 2px dashed rgba(70,98,146,.45); background: transparent; font: inherit; font-size: 18px; color: #1D1F22; }
.ls-coupon .f.big { height: 54px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.ls-coupon .f::placeholder { color: #67625A; opacity: 1; }
.ls-coupon .f:focus-visible { outline: none; border-bottom: 2px solid var(--accent); }
/* The day it ends, as one pill: the calendar, "Ends", the day. The whole
   pill opens the picker (the trigger's ::after covers it). */
.ls-date { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; background: #FBF6EA; box-shadow: inset 0 0 0 1.5px rgba(70,98,146,.45); font-size: 16px; font-weight: 650; color: #1D1F22; white-space: nowrap; }
.ls-date svg.i { width: 17px; height: 17px; }
.ls-date .cc { position: static; width: auto; }
.ls-date .cc-trigger { min-height: 0; height: auto; padding: 0; background: none; box-shadow: none !important; color: #1D1F22; font-size: 16px; font-weight: 650; }
.ls-date .cc-trigger::after { content: ''; position: absolute; inset: 0; border-radius: 99px; }
.ls-date .cc-trigger .cc-ic { display: none; }
.ls-date:has(.cc-trigger:focus-visible), .ls-date:has(.cc-trigger[aria-expanded="true"]) { box-shadow: inset 0 0 0 2px #1D1F22, 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent); }
.ls-newdeal .ls-r { flex-wrap: nowrap; }
.ls-newdeal .ls-r .btn { flex: none; padding: 0 16px; }
.ls-room { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 16px; color: rgba(29,31,34,.82); }

/* 03 post to followers, as a note */
.ls2 .ls-postsec { margin-top: 96px; }
.ls-post { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.ls-post .h2 { margin-top: 18px; font-size: clamp(34px, 3.7vw, 58px); }
.ls-post .lede { margin-top: 20px; font-size: 18.5px; color: var(--ink2); }
.ls-note { display: block; padding: 26px 28px 24px; --tilt: 1.1deg; max-width: 560px; }
.ls-note .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.ls2 .ls-note .msg { display: block; width: 100%; margin-top: 18px; min-height: 104px; padding: 0; border: 0; background: transparent; resize: none; font: inherit; font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; color: #1D1F22; }
.ls-note .msg::placeholder { color: #77726A; opacity: 1; }
.ls-note .msg:focus-visible { outline: none; box-shadow: 0 2px 0 var(--accent); }
.ls-note .ls-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 15px; color: var(--ink2); }
.ls-note .btn { background: #1D1F22; color: #FBF8F1; }
.ls-note .btn svg.i { width: 18px; height: 18px; }
.ls-last { display: flex; align-items: center; gap: 14px; margin-top: 30px; max-width: 560px; font-size: 16px; color: var(--ink2); }
.ls-last img { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 3px; rotate: -3deg; filter: var(--art-filter); }
.ls-last b { color: var(--ink); }

/* Narrower desks: the pencils come inside the card */
@media (max-width: 1180px) {
  .ls-hero { grid-template-columns: minmax(0, 1fr); }
  .ls-check { max-width: 560px; }
  .ls-stage { min-height: 0; margin-top: 24px; padding-bottom: 40px; }
  .ls-stage .map { right: 0; width: 100%; }
  .ls-pin { width: min(480px, 100%); margin: 70px auto 0; }
  .ls-part { display: flex; flex-direction: column; }
  .ls-edit { position: static; translate: none; align-self: flex-start; margin-top: 10px; height: 34px; rotate: 0deg; }
  .ls-coverpart .ls-edit { position: absolute; left: auto; right: 10px; top: 10px; margin: 0; }
}
@media (max-width: 900px) {
  .ls-menugrid, .ls-post, .lt-grid, .lt-link { grid-template-columns: minmax(0, 1fr); }
  .ls-sheet { max-width: none; }
  .lt-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-print-cover { grid-column: 1 / -1; }
}
/* Phones: one column, 16px from the edge, nothing sideways */
@media (max-width: 760px) {
  .ls2 .xh1 { font-size: clamp(34px, 10vw, 42px); }
  .ls-check { margin-top: 32px; }
  .ls-check .xstep .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .ls-stage { padding-bottom: 12px; }
  .ls-stage .t1 { width: 32%; }
  .ls-stage .xlabel { left: 0; }
  .ls-pin { margin-top: 64px; padding: 12px 12px 16px; --tilt: -.6deg; }
  .ls-name h3 { font-size: 23px; }
  .ls-tabbar { gap: 0 14px; margin-top: 40px; }
  .ls-tabbtn { font-size: 16px; gap: 6px; }
  .ls-tabbar .note { flex-basis: 100%; margin: 4px 0 0; }
  .ls-slip { padding: 22px 18px 26px; --tilt: -.3deg; }
  .ls-slip .top h3 { font-size: 28px; }
  .ls-item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .ls-item .dots { display: none; }
  .ls-item .nm, .ls-item .pr { font-size: 18px; }
  .ls-item .fl { grid-column: 1 / -1; justify-self: start; }
  .ls-item .fl:empty { display: none; }
  .ls-row > .stamp { left: auto; right: 0; top: 30px; }
  .ls-row.held { margin: 10px -10px 0; padding: 6px 10px 12px; }
  .ls-row.held > .stamp { right: 10px; left: auto; top: 36px; }
  .ls-add { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .ls-add .ls-add-name { grid-column: 2 / -1; }
  .ls-add .ls-add-price { grid-column: 2; }
  .ls-add .ls-add-pick { grid-column: 3; }
  .ls-add .ls-add-go { grid-column: 2 / -1; justify-self: start; }
  .ls-add .cc-trigger { max-width: 160px; }
  .ls-add .ls-add-new, .ls-add .ls-add-desc { grid-row: auto; }
  .ls-addmore { padding-left: 0; }
  .ls-sheet { rotate: 0deg; }
  .ls-sheet .it { padding: 10px; font-size: 14.5px; }
  .ls2 .xband { margin-top: 72px; }
  .ls2 .xband .in { padding: 44px 20px; }
  .ls-newdeal .ls-r { flex-wrap: wrap; }
  .ls-coupon { padding: 22px 18px; }
  .ls-coupon:nth-child(2n) { justify-self: start; }
  .ls-coupon b.t { font-size: 27px; }
  .ls-coupon .sc { left: -10px; }
  .ls-note { padding: 22px 18px 20px; }
  .ls2 .ls-note .msg { font-size: 21px; }
  .lt-grid, .lt-prints, .lt-link { grid-template-columns: minmax(0, 1fr); }
  .lt-slip { padding: 22px 18px 26px; --tilt: -.3deg; }
  .lt-slip .top h3 { font-size: 28px; }
  .lt-coupon { padding: 22px 18px; margin-top: 36px; }
  .lt-link { padding: 22px 18px; }
  .lt-day { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "times" "again" "acts"; gap: 8px; margin: 0 -10px; padding: 10px; }
  .lt-dacts { justify-content: flex-start; }
  .lt-times, .lt-shut, .lt-alltxt, .lt-dacts { padding-left: 0; }
  .lt-times { flex-wrap: nowrap; }
  .lt-times .cc { flex: 1 1 0; min-width: 0; }
  .lt-times .cc-trigger { width: 100%; padding: 0 12px; }
  .lt-times .cc-trigger .cc-ic { display: none; }
  .lt-tiles { gap: 4px; }
  .lt-tile { padding: 8px 0; }
  .lt-tile span { font-size: 13.5px; white-space: normal; }
  .lt-prints { gap: 36px; }
  .lt-print-logo .lt-pick, .lt-print-logo .lt-empty { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .ls-part { transition: none; } }