/* The first screens' placeholders (Oct 21, 2026; js/reveal.js): the owner's Home, the manager's Today and the crew's Schedule
   each have one, shaped and sized like the real screen, from the first paint (index.html) until the data swaps in. Read
   at once with styles.css (the first paint needs it before any screen's own file), so it stays small. The bars and their
   shimmer are styles.css's (.skel, .sk); this file adds only each screen's shape. Heights are in rem where the real part
   grows with Larger text, and the tap heights follow --tap like the real buttons. */

/* ---------- first paint: only the signed-in person's header, bar and placeholder (js/shape-early.js sets data-shape) ---------- */
html:not([data-shape="owner"]) .sk-for-owner, html:not([data-shape="manager"]) .sk-for-manager,
html:not([data-shape="crew"]) .sk-for-crew, html[data-shape] .sk-for-none { display: none !important; }

/* The person's name and initial at the foot of the sidebar and in the top bar (js/shape-early.js --sk-who). */
.sk-who::before { content: var(--sk-who, ""); }
.sk-initial::before { content: var(--sk-initial, ""); }

/* ---------- the placeholder screen: the real screen's spacing ---------- */
.skel.skp { gap: 24px; padding-block: 24px 40px; }
.skel.skp-owner { gap: 18px; }
.skel.skp.tight { gap: 16px; }
body.big-text .skel.skp { gap: var(--gap); }
@media (min-width: 720px) { .skel.skp { padding-block: 32px 48px; } }
@media (min-width: 900px) { .has-side .skel.skp { padding-top: 22px; } }

/* The big title with the "?" at its right, and the quiet line under it. */
.skp-head { display: flex; align-items: flex-start; gap: 12px; }
.skp-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk.skp-h1 { height: 2rem; margin-block: 6px; }
.sk.skp-sub { height: .875rem; margin-block: 9px; }
.sk.skp-fresh { height: .75rem; margin-block: 4px 5px; }
.skp-manager .sk.skp-h1 { margin-block: 2px; }
.skp-manager .sk.skp-sub { margin-block: 3px; }
.skp-hero-manager .skp-pills { flex-wrap: nowrap; }
.sk.skp-q { flex: none; width: 44px; height: 44px; border-radius: 50%; }

/* The hero card. */
.skp-hero { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--border); }
.skp-hero-owner { min-height: 13.75rem; }
.skp-hero-manager { min-height: 16.25rem; }
.skp-hero-crew { min-height: 16.5rem; }
.sk.skp-big { height: 2.75rem; }
.skp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.sk.skp-pill { height: var(--tap, 52px); }
.sk.w25 { width: 25%; }
.sk.skp-ib { flex: none; width: var(--tap, 52px); border-radius: 50%; }
.sk.skp-half { flex: 1; height: 64px; }
.sk.skp-line { height: 44px; border-radius: var(--r-box); }

/* Sections, rows and the two columns. */
.skp-grid { display: flex; flex-direction: column; gap: 24px; }
.skp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.skp-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sk.skp-eb { height: .875rem; margin-block: 7px; }
.skp-rows { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.skp-row { display: flex; align-items: center; min-height: 3.25rem; padding: 0 16px; }
.skp-row + .skp-row { border-top: 1px solid var(--border); }
.skp-row .sk { flex: none; }

/* the owner's Home: Money (the week switch, two number boxes, its rows) and today's stops (cards side by side). On a
   phone Money comes first, as on the real Home; on a computer the stops are at the left and Money at the right. */
.sk.skp-seg { height: 48px; }
.skp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skp-tile { height: 5.0625rem; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--border); }
.skp-owner .skp-grid { gap: 22px; }
.skp-owner .skp-money { order: -1; }
.skp-stoprow { display: flex; gap: 10px; overflow: hidden; }
.skp-stop { flex: none; display: flex; flex-direction: column; gap: 10px; width: 156px; height: 10.375rem; padding: 12px; border-radius: 14px;
  background: var(--surface); }
.sk.skp-stop-top { height: 84px; border-radius: 10px; }

/* The crew's Schedule: the day pills ("Updated 7:38 AM" sits under them on a phone), the stop's card and Next stop. */
.skp-crew .skp-col { gap: 14px; }
.skp-crew .skp-grid { gap: 16px; }
.skp-days { display: flex; gap: 10px; }
.sk.skp-day { width: 5.5rem; height: 44px; }
@media (max-width: 599px) { .skp-days { padding-bottom: 25px; } }
.skp-job { min-height: 18rem; }
.sk.skp-next { height: 60px; border-radius: var(--r-box); }

@media (min-width: 900px) {
  .skp-hero-owner { min-height: 13.5rem; }
  .skp-hero-manager { min-height: 15.25rem; }
  .skp-stop { width: 230px; height: calc(10.375rem + 12px); }
  .sk.skp-stop-top { height: 96px; }
}
@media (min-width: 1000px) {
  /* The stops wrap onto rows of bigger cards beside Money, as on the real Home. */
  .skp-owner .skp-stoprow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .skp-owner .skp-stop, .ot-grid .ot-stop-list li.skp-stop { width: auto; height: calc(10.375rem + 51px); }
  .skp-owner .sk.skp-stop-top, .ot-grid .ot-stop-list .sk.skp-stop-top { height: 126px; }
  .skp-owner .skp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .skp-owner .skp-money { order: 0; }
  .skp-crew .skp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}
@media (min-width: 1100px) {
  .skp-manager .skp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}

/* ---------- the owner's stops on their own (Today is in, the Board still coming): soft cards in the real list ---------- */
.ot-stop-list li.skp-stop { list-style: none; }