/* Moor's parts: the pictures and sketches (pages/mocks.mjs) on the home page's "One app, six jobs" cards and on the
   part pages (/helm/, /mast/, /bar/, /deck/, /hold/), plus the part pages' own layout. Tokens from styles.css. The sketches are drawings of a Mac screen,
   so they keep the same bright wallpaper and dark glass in both appearances (white on dark glass: 13:1 and up).
   Nothing here is smaller than 14px, and every link or button is at least 44px tall. */

/* ---------- The sketches ---------- */
.pmock { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border-radius: var(--r-md);
  border: 1px solid rgb(var(--fg-rgb) / .12); background: #b9c6f5; color: #fff; container-type: inline-size; font-family: var(--sans); }
.pmock.pm-hero { aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: var(--shadow-window); }
.pm-wall { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 0% 0%, #7ea2ff 0%, transparent 60%), radial-gradient(60% 80% at 100% 10%, #ffb48f 0%, transparent 60%),
    radial-gradient(80% 70% at 30% 110%, #9a7dff 0%, transparent 65%), radial-gradient(60% 60% at 90% 100%, #ff8fb1 0%, transparent 60%), linear-gradient(160deg, #a8bfff, #cbb8ff 55%, #ffc9b0); }
.pm-in { position: absolute; inset: 0; display: grid; place-items: center; padding: 5cqw; font-size: max(14px, 3.6cqw); line-height: 1.25; }
.pm-in b { font-weight: 650; }
.pm-glass, .pm-panel, .pm-bar, .pm-drop, .pm-w, .pm-files { background: rgb(22 22 30 / .74); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 10px 30px -12px rgb(10 10 30 / .55); }
.pm-k { display: block; color: rgb(255 255 255 / .82); font-size: max(14px, 2.6cqw); }

/* Docks: the real capture, on the wallpaper */
.pmock.pm-docks { display: grid; place-items: end center; padding: 0 4% 5%;
  background: radial-gradient(70% 90% at 0% 0%, #7ea2ff 0%, transparent 60%), radial-gradient(60% 80% at 100% 10%, #ffb48f 0%, transparent 60%), linear-gradient(160deg, #a8bfff, #cbb8ff 55%, #ffc9b0); }
.pmock.pm-docks img { width: 100%; height: auto; display: block; }

/* Helm, Moor Bar and Hold: real captures of Moor's windows (sample data), on the same wallpaper */
.pmock.pm-shot { display: grid; place-items: center; padding: 5%;
  background: radial-gradient(70% 90% at 0% 0%, #7ea2ff 0%, transparent 60%), radial-gradient(60% 80% at 100% 10%, #ffb48f 0%, transparent 60%), linear-gradient(160deg, #a8bfff, #cbb8ff 55%, #ffc9b0); }
.pmock.pm-shot img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.pmock.pm-hold-shot img { inset: 8%; width: 84%; height: 84%; filter: drop-shadow(0 12px 22px rgb(10 10 30 / .35)); }
.pmock.pm-bar-shot-hero img { inset: 4%; width: 92%; height: 92%; filter: drop-shadow(0 12px 22px rgb(10 10 30 / .35)); }
/* Moor Bar: the bar across the top of a desktop. On the small home card, the right half (items and clock), at full size. */
.pmock.pm-bar-shot { background: linear-gradient(180deg, #cfdeeb, #bfd3ea 55%, #e8dccb); }
.pmock.pm-bar-shot img { inset: 0 0 auto 0; width: 100%; height: auto; object-fit: initial; }
.pmock.pm-bar-shot.pm-card img { left: auto; right: 0; width: 200%; max-width: none; }

/* Helm: the switcher */
.pm-panel { width: 100%; padding: 4cqw; border-radius: 4cqw; display: grid; gap: 3cqw; }
.pm-filter { display: flex; align-items: center; padding: 1.6cqw 2.6cqw; border-radius: 2cqw; background: rgb(255 255 255 / .1); }
.pm-caret { width: 2px; height: 1.1em; margin-left: 2px; background: #fff; }
.pm-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; }
.pm-win { display: grid; gap: 1cqw; min-width: 0; padding: 1.6cqw; border-radius: 2.4cqw; }
.pm-win.is-on { background: rgb(255 255 255 / .14); outline: 2px solid #f6d9a3; }
.pm-win b, .pm-win span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-win span { color: rgb(255 255 255 / .82); font-size: max(14px, 2.6cqw); }
.pm-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 1.4cqw; background: linear-gradient(#f4f4f6 0 18%, #dfe6ff 18% 50%, #ffffff 50%); }
.pm-thumb.alt { background: linear-gradient(#f4f4f6 0 18%, #ffffff 18%), repeating-linear-gradient(90deg, #e8ecf6 0 30%, transparent 30% 34%); }
.pm-thumb.dark { background: linear-gradient(#2b2d36 0 18%, #1b1c22 18%); }

/* Mast: a menu bar */
.pm-mast .pm-in { place-items: start stretch; padding: 0; }
.pm-bar { display: flex; align-items: center; gap: 2.6cqw; padding: 1.4cqw 3cqw; border-width: 0 0 1px; border-radius: 0; white-space: nowrap; }
.pm-m { color: rgb(255 255 255 / .9); }
.pm-right { margin-left: auto; display: flex; align-items: center; gap: 2cqw; }
.pm-hidden { display: flex; gap: 2cqw; padding: .6cqw 1.4cqw; border-radius: 1.4cqw; border: 1px dashed rgb(255 255 255 / .55); }
.pm-hidden i, .pm-ic { display: block; width: 2.6cqw; height: 2.6cqw; min-width: 8px; min-height: 8px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .85); }
.pm-hidden i { opacity: .55; }
.pm-div, .pm-chev { font-weight: 700; color: #f6d9a3; }
.pm-chip { padding: 0 1.2cqw; border-radius: 1cqw; background: rgb(79 209 139 / .28); }
.pm-drop { position: absolute; right: 12cqw; top: 9cqw; width: 42cqw; padding: 3cqw; border-radius: 3cqw; display: grid; gap: 1cqw; }
.pm-drop b { font-size: max(16px, 5cqw); }
.pm-drop svg { width: 100%; height: 6cqw; fill: none; stroke: #4fd18b; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pm-clock { font-variant-numeric: tabular-nums; }
@container (max-width: 400px) { .pm-m, .pm-ic { display: none; } .pm-bar { gap: 2cqw; } }

/* Deck: widgets on the desktop, a window over them */
.pm-deck .pm-in { place-items: start; }
.pm-desk { display: grid; grid-template-columns: repeat(2, 30cqw); gap: 3cqw; }
.pm-w { padding: 2.6cqw; border-radius: 3cqw; display: grid; gap: .6cqw; }
.pm-w:nth-child(3) { grid-column: 1; }
.pm-big { font-size: max(16px, 5.4cqw); font-variant-numeric: tabular-nums; }
.pm-window { position: absolute; right: 5cqw; bottom: 6cqw; width: 46cqw; height: 34cqw; padding: 0 3cqw 3cqw; border-radius: 2.4cqw; background: #f7f7fa;
  box-shadow: 0 16px 40px -14px rgb(10 10 30 / .6); display: grid; align-content: start; gap: 2cqw; }
.pm-window span { display: block; height: 2.2cqw; border-radius: 1cqw; background: #dfe2ea; }
.pm-window span.short { width: 60%; }
.pm-wbar { display: flex; gap: 1.2cqw; padding: 2.2cqw 0 1cqw; }
.pm-wbar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ff5f57; }
.pm-wbar i:nth-child(2) { background: #febc2e; }
.pm-wbar i:nth-child(3) { background: #28c840; }

/* Hold: shelves, chips, a grid */
.pm-files { width: 100%; height: 100%; border-radius: 3cqw; display: grid; grid-template-columns: 34% 1fr; overflow: hidden; }
.pm-side { display: grid; align-content: start; gap: .6cqw; padding: 3cqw 2cqw; background: rgb(255 255 255 / .06); border-right: 1px solid rgb(255 255 255 / .12); }
.pm-side span { padding: .8cqw 1.6cqw; border-radius: 1.4cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgb(255 255 255 / .88); }
.pm-side span.is-on { background: rgb(246 217 163 / .24); color: #fff; }
.pm-main { display: grid; align-content: start; gap: 3cqw; padding: 3cqw; min-width: 0; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.pm-chips span { padding: .4cqw 1.8cqw; border-radius: 99px; background: rgb(110 168 255 / .3); border: 1px solid rgb(110 168 255 / .7); white-space: nowrap; }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.pm-grid i { aspect-ratio: 4 / 3; border-radius: 1.4cqw; background: linear-gradient(#fff 0 70%, #e9ecf3 70%); position: relative; }
.pm-grid i::after { content: "PDF"; position: absolute; left: 10%; bottom: 8%; font: 700 max(14px, 2.4cqw)/1 var(--sans); color: #b42318; font-style: normal; }

/* ---------- Home: "One app, six jobs" (Docks across the top, then 3 and 2) ---------- */
.parts-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.parts-grid > li { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.parts-grid > li.is-docks { grid-column: 1 / -1; }
.parts-grid > li:nth-last-child(-n+2) { grid-column: span 3; }
.parts-grid > li.is-docks .pmock { aspect-ratio: auto; min-height: 150px; }
.parts-grid h3 { margin: 4px 0 0; font-size: var(--fs-h3); }
.parts-grid .replaces { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.parts-grid .replaces b { color: var(--text); font-weight: 600; }
.parts-grid ul.facts-list { margin: 0; padding: 0 0 0 20px; color: var(--muted); font-size: var(--fs-small); display: grid; gap: 6px; }
.parts-grid .more { margin-top: auto; }
.parts-tag { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: 600 var(--fs-fine)/1 var(--mono);
  letter-spacing: .04em; color: var(--brass); border: 1px solid rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .08); }
.parts-note { margin: 20px 0 0; max-width: 70ch; }
@media (max-width: 980px) { .parts-grid { grid-template-columns: repeat(2, 1fr); } .parts-grid > li, .parts-grid > li.is-docks, .parts-grid > li:nth-last-child(-n+2) { grid-column: span 1; } .parts-grid > li.is-docks { grid-column: 1 / -1; } }
@media (max-width: 640px) { .parts-grid { grid-template-columns: 1fr; } .parts-grid > li.is-docks { grid-column: auto; } }

/* ---------- Part pages ---------- */
.part-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.part-hero h1 { margin-bottom: 16px; }
.part-hero .lede { font-size: 1.25rem; line-height: 1.5; color: var(--muted); margin: 0 0 24px; }
.part-hero .ctas { margin-bottom: 12px; }
.part-hero-art { margin: 0; }
.part-hero-art figcaption { margin-top: 10px; }
.part-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.part-jobs li { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.part-jobs p { margin: 0; }
.part-jobs kbd { white-space: nowrap; }
.part-page table.part-vs { min-width: 560px; }
.part-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.part-perms { margin: 0; display: grid; gap: 12px; }
.part-perms div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.part-perms dt { font-weight: 600; margin-bottom: 4px; }
.part-perms dd { margin: 0; color: var(--muted); }
.part-page .keys-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.part-page .keys-table th, .part-page .keys-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.part-page .keys-table th { font-weight: 500; color: var(--text); padding-right: 16px; }
.part-page .keys-table td { white-space: nowrap; text-align: right; }
.part-page .vs-links .button { min-height: 44px; }
.part-setup .fine code { font: 400 .9em var(--mono); }

@media (max-width: 860px) {
  .part-hero, .part-two { grid-template-columns: 1fr; }
  .part-page .keys-table td { white-space: normal; }
}

/* Narrow cards (phones): fewer rows in the sketches, so nothing is cut off at the bottom. */
@container (max-width: 420px) {
  .pm-side span:nth-child(n+4), .pm-grid i:nth-child(n+4) { display: none; }
  .pm-grid i { aspect-ratio: 1; }
  .pm-win span { display: none; }
  .pm-panel { gap: 2cqw; padding: 3cqw; }
}

/* Phones: the two-column macOS table fits the screen instead of scrolling sideways. */
@media (max-width: 600px) {
  .part-page table.part-vs { min-width: 0; table-layout: fixed; }
  .part-page .part-vs th, .part-page .part-vs td { padding-inline: 10px; }
  .part-page .part-vs tbody th { position: static; min-width: 0; max-width: none; box-shadow: none; }
  .part-page .part-vs thead th:first-child { position: static; }
  .part-page .part-vs .cv-note { max-width: none; }
}

/* Moor Bar: Moor's own menu bar */
.pm-moorbar-part .pm-in { place-items: start stretch; padding: 0; }
.pm-moorbar { position: relative; background: linear-gradient(90deg, rgb(43 58 103 / .92), rgb(107 47 110 / .92)); }
.pm-sep { width: 1px; align-self: stretch; margin: .4cqw 0; background: rgb(255 255 255 / .35); }
.pm-mid { position: absolute; left: 50%; transform: translateX(-50%); }
@container (max-width: 400px) { .pm-moorbar .pm-mid { display: none; } }

/* Compass: the search panel finding an app, a window and a file. */
.pm-compass .pm-in { place-items: center; }
.pm-find { width: 70cqw; padding: 2.4cqw; border-radius: 3.4cqw; display: grid; gap: 1.2cqw; }
.pm-field { color: #fff; font-size: max(15px, 3.6cqw); padding: 1.4cqw 1.6cqw 2cqw; border-bottom: 1px solid rgb(255 255 255 / .16); display: flex; gap: 1.6cqw; align-items: center; }
.pm-glass-i { color: rgb(255 255 255 / .7); }
.pm-row { display: flex; gap: 2cqw; align-items: center; padding: 1.2cqw 1.6cqw; border-radius: 1.8cqw; color: #fff; }
.pm-row.is-sel { background: rgb(120 140 255 / .32); }
.pm-row .pm-ic { width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; background: linear-gradient(135deg, #34c759, #0a84ff); flex: none; }
.pm-row .pm-ic.is-win { background: linear-gradient(135deg, #5e5ce6, #bf5af2); }
.pm-row .pm-ic.is-doc { background: #f2f2f7; }
.pm-row span { display: grid; gap: .3cqw; }
.pm-row b { font-size: max(13px, 2.8cqw); font-weight: 600; }
.pm-row small { font-size: max(12px, 2.2cqw); color: rgb(255 255 255 / .78); }