/* Public profile looks and the Layout tab that edits them.
   Loads after css/pages/account.css (the profile and the editor are built on its
   trainer card, sections and fields). Three parts:
   1. The room: a still backdrop in the room colour. One layer, the height of
      the page's first screens, sitting at the top of the page (#profile-room,
      drawn by js/profile-view.js) and scrolling away with it, so the strongest
      light is behind the header and the cards below sit on calm ground. Also
      used, at a smaller scale, by the editor's thumbnails and its miniature.
      Nothing here animates and nothing uses a filter: gradients, a contour sheet
      and a small grain tile (assets/textures/room-*) and a pocket outline, all used as masks.
   2. The profile's own variants: plain header, chasing line, showcase styles.
   3. The Layout tab (.pl-*). */

/* ---- 1. The room ---------------------------------------------------------- */
/* --u is one px of the real room; the editor sets it from the width of its box, so a thumbnail is the same room
   drawn smaller. --kr is how hard this room colour may be drawn (js/profile-view.js roomStrength keeps the ground
   behind the captions under rgb 70); --k is that, and a thumbnail asks for more so it reads at its size. */
.room-bd {
  --u: 1px;
  --k: var(--kr, 1);
  --c: var(--room-ink, var(--room));
  --hi: var(--room-hi, var(--c));
  position: absolute; top: 0; left: 0; right: 0; height: min(calc(1000 * var(--u)), var(--room-cap, 100000px));
  pointer-events: none; overflow: hidden;
}
/* --room-cap is the page's height (js/profile-view.js), so a short page is not made to scroll by the layer. */
#profile-room { z-index: -1; }
@media (max-width: 720px) { #profile-room { --u: 0.8px; } }
.room-bd::before { content: ""; position: absolute; inset: 0; }

/* Plain: only the room colour, a quiet pool behind the header (nothing at all without a colour). */
.room-bd[data-backdrop="none"] {
  background: radial-gradient(ellipse calc(800 * var(--u)) calc(460 * var(--u)) at 50% 24%, rgb(var(--c) / calc(0.16 * var(--k))), transparent);
}

/* Glow: a pool of the room colour behind the header, and a second smaller one off to the side. */
.room-bd[data-backdrop="glow"] {
  background:
    radial-gradient(ellipse calc(900 * var(--u)) calc(560 * var(--u)) at 50% 26%, rgb(var(--c) / calc(0.42 * var(--k))), rgb(var(--c) / calc(0.2 * var(--k))) 45%, rgb(var(--c) / calc(0.05 * var(--k))) 76%, transparent),
    radial-gradient(ellipse calc(460 * var(--u)) calc(380 * var(--u)) at 94% 14%, rgb(var(--c) / calc(0.12 * var(--k))), transparent);
}

/* Contours: a topographic sheet, drawn once at a large scale, lines strongest at the top. */
.room-bd[data-backdrop="contours"]::before {
  background: linear-gradient(180deg, rgb(var(--c) / calc(0.55 * var(--k))) 4%, rgb(var(--c) / calc(0.72 * var(--k))) 26%, rgb(var(--c) / calc(0.32 * var(--k))) 52%, transparent 80%);
  -webkit-mask: url("../../assets/textures/room-contours-1.svg") 50% 0 / calc(1600 * var(--u)) auto repeat-x;
  mask: url("../../assets/textures/room-contours-1.svg") 50% 0 / calc(1600 * var(--u)) auto repeat-x;
}
.room-bd[data-backdrop="contours"] {
  background: radial-gradient(ellipse calc(900 * var(--u)) calc(460 * var(--u)) at 50% 20%, rgb(var(--c) / calc(0.14 * var(--k))), transparent);
}

/* Sheen: one broad band of light across the sleeve, and the thin glare at its edge. */
.room-bd[data-backdrop="sheen"] {
  background:
    linear-gradient(105deg, transparent 31%, rgb(var(--c) / calc(0.07 * var(--k))) 36%, rgb(var(--c) / calc(0.34 * var(--k))) 44%, rgb(var(--c) / calc(0.12 * var(--k))) 52%, transparent 58%),
    linear-gradient(105deg, transparent 43.2%, rgb(var(--hi) / calc(0.11 * var(--k))) 43.6%, transparent 44.4%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 86%);
}

/* Paper: the room colour on soft, slightly fibrous paper. */
.room-bd[data-backdrop="paper"] {
  background: radial-gradient(ellipse calc(860 * var(--u)) calc(520 * var(--u)) at 50% 24%, rgb(var(--c) / calc(0.22 * var(--k))), rgb(var(--c) / calc(0.07 * var(--k))) 62%, transparent);
}
.room-bd[data-backdrop="paper"]::before {
  background: linear-gradient(180deg, rgb(var(--hi) / calc(0.07 * var(--k))) 4%, rgb(var(--hi) / calc(0.085 * var(--k))) 26%, rgb(var(--hi) / calc(0.035 * var(--k))) 54%, transparent 82%);
  -webkit-mask: url("../../assets/textures/room-paper-1.png") 0 0 / calc(128 * var(--u)) calc(128 * var(--u)) repeat;
  mask: url("../../assets/textures/room-paper-1.png") 0 0 / calc(128 * var(--u)) calc(128 * var(--u)) repeat;
}

/* Pockets: binder pockets, faint and large, under the header and fading into the page. */
.room-bd[data-backdrop="pockets"] {
  background: radial-gradient(ellipse calc(760 * var(--u)) calc(420 * var(--u)) at 50% 24%, rgb(var(--c) / calc(0.14 * var(--k))), transparent);
}
.room-bd[data-backdrop="pockets"]::before {
  --pocket-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='172' height='240' viewBox='0 0 172 240'%3E%3Crect x='9' y='9' width='154' height='222' rx='14' fill='%23000' fill-opacity='.22' stroke='%23000' stroke-opacity='.8' stroke-width='5'/%3E%3Cpath d='M9 36h154' stroke='%23000' stroke-opacity='.4' stroke-width='4'/%3E%3C/svg%3E");
  background: radial-gradient(ellipse calc(900 * var(--u)) calc(640 * var(--u)) at 50% 26%, rgb(var(--c) / calc(0.7 * var(--k))), rgb(var(--c) / calc(0.24 * var(--k))) 55%, transparent);
  --pocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='172' height='240' viewBox='0 0 172 240'%3E%3Crect x='7' y='7' width='158' height='226' rx='12' fill='%23000' fill-opacity='.22' stroke='%23000' stroke-opacity='.8' stroke-width='1'/%3E%3Cpath d='M7 31h158' stroke='%23000' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask: var(--pocket) 50% 0 / calc(172 * var(--u)) calc(240 * var(--u)) repeat;
  mask: var(--pocket) 50% 0 / calc(172 * var(--u)) calc(240 * var(--u)) repeat;
}
/* On a phone a pocket is a third of the width, so the page reads as a binder page, not as stray boxes. */
@media (max-width: 720px) {
  #profile-room[data-backdrop="contours"] { --k: calc(var(--kr, 1) * 1.6); }
  #profile-room[data-backdrop="pockets"]::before { -webkit-mask-size: 33.34% auto; mask-size: 33.34% auto; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* Horizon: a low band of light where the header ends, soft above, softer below. */
.room-bd[data-backdrop="horizon"] {
  background:
    linear-gradient(180deg, transparent 4%, rgb(var(--c) / calc(0.08 * var(--k))) 18%, rgb(var(--c) / calc(0.3 * var(--k))) 38%, rgb(var(--c) / calc(0.27 * var(--k))) 40%, rgb(var(--c) / calc(0.09 * var(--k))) 48%, transparent 68%);
}

/* ---- 2. The profile ---------------------------------------------------------- */
/* A room lights the ground behind the header (never past about rgb 70: js/profile-view.js roomStrength), so the quiet
   text steps up to keep 4.5:1 on it. */
body.profile-roomed #view-profile { --muted: #b7b4bb; --faint: #b0adb4; }

/* Chasing: one line under the name. */
.profile-chasing {
  margin: 10px 0 0; max-width: 46ch; color: var(--ink); font-size: 17px; font-weight: 520; line-height: 1.35;
  overflow-wrap: anywhere; text-wrap: pretty;
}
.profile-chasing span { color: var(--muted); font-weight: 600; }

/* Plain header: no banner, a larger picture, the name set larger. */
#view-profile .profile-hero[data-hero="plain"] .acct-hero-body { margin-top: 0; padding-top: 12px; align-items: center; }
#view-profile .profile-hero[data-hero="plain"] .acct-copy,
#view-profile .profile-hero[data-hero="plain"] .acct-hero-actions { padding-top: 0; }
#view-profile .profile-hero[data-hero="plain"] .user-face.lg { width: clamp(120px, 13vw, 168px); }
#view-profile .profile-hero[data-hero="plain"] .acct-name { font-size: clamp(36px, 7vw, 56px); line-height: 0.95; letter-spacing: -0.03em; }
#view-profile .profile-hero[data-hero="plain"] .profile-chasing { font-size: 19px; margin-top: 14px; }
#view-profile .profile-hero[data-hero="plain"] .acct-meta { margin-top: 14px; }
@media (max-width: 720px) {
  .profile-chasing { font-size: 16px; }
  #view-profile .profile-hero[data-hero="plain"] .user-face.lg { width: 120px; }
  #view-profile .profile-hero[data-hero="plain"] .acct-copy { padding-top: 14px; }
}

/* ---- 3. The Layout tab ------------------------------------------------------- */
.pl-layout {
  display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 40px 64px; align-items: start;
}
.pl-preview { position: sticky; top: 88px; min-width: 0; }
.pl-controls { display: grid; gap: 52px; min-width: 0; max-width: 680px; }
.pl-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pl-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.pl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.pl-controls .acct-sec-head { margin-bottom: 16px; }
.pl-controls > .pl-open { margin: -36px 0 0; }

/* A picked square or tile: ink, never colour. */
.pl-sw.on, .pl-wide.on, .pl-tile.on { box-shadow: inset 0 0 0 2px var(--ink); }

/* Room colour */
.pl-tint-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.pl-wide {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none;
  color: var(--ink-2); font-size: 15px; font-weight: 600; text-align: left;
}
.pl-wide:hover { border-color: var(--ink-2); }
.pl-wide.on { color: var(--ink); }
.pl-wide-sw { flex: none; width: 24px; height: 24px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.pl-wide-sw.site { background: color-mix(in oklab, var(--black) 40%, rgb(var(--ambient))); }
.pl-wide-sw.cards { background: var(--surface-3); }
.pl-sws { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.pl-sw {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.pl-sw.pale { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22); }
.pl-sw:hover { box-shadow: inset 0 0 0 2px var(--line-2); }
.pl-sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.pl-current { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }

/* Tiles: a flat 8px tile with a thumbnail and a word. */
.pl-tiles { display: grid; gap: 8px; }
.pl-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pl-tiles-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pl-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-tile {
  display: grid; gap: 8px; align-content: start; min-width: 0; padding: 8px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--ink-2); text-align: left;
}
.pl-tile:hover { border-color: var(--line-2); }
.pl-tile.on { color: var(--ink); }
.pl-tile-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.pl-thumb {
  position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 4px; background: var(--well);
}
/* A backdrop tile is the room drawn small: the same layer on the page's own ground, its pattern scaled to the
   tile (--u from the tile's width, as if the page were 700px wide) and a little stronger so it reads at this size. */
.pl-thumb-room { background: var(--wall); container-type: inline-size; }
.pl-thumb-bd { --u: calc(100cqw / 700); --k: calc(var(--kr, 1) * 1.9); }
.pl-thumb-bd[data-backdrop="contours"] { --k: calc(var(--kr, 1) * 4.6); }
.pl-thumb-bd[data-backdrop="pockets"] { --k: calc(var(--kr, 1) * 4.2); }
.pl-thumb-bd[data-backdrop="paper"] { --k: calc(var(--kr, 1) * 3.2); }
.pl-thumb-bd[data-backdrop="sheen"] { --k: calc(var(--kr, 1) * 2.6); }
/* Hairlines would vanish at this scale: the contour sheet is shown larger and the pocket is drawn with a heavier line. */
.pl-thumb-bd[data-backdrop="contours"]::before, .pl-room-bd[data-backdrop="contours"]::before {
  -webkit-mask-size: calc(1600 * var(--u) * 3) auto; mask-size: calc(1600 * var(--u) * 3) auto;
}
.pl-thumb-bd[data-backdrop="pockets"]::before, .pl-room-bd[data-backdrop="pockets"]::before {
  -webkit-mask-image: var(--pocket-bold); mask-image: var(--pocket-bold);
}

/* The showcase layouts, drawn small. --c is a card's own colour when known. */
.pl-dia { display: grid; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; padding: 9px; align-content: center; }
.pl-dia i { display: block; aspect-ratio: 63 / 88; border-radius: 4px; background: var(--c, var(--line-2)); opacity: 0.55; }
.pl-dia[data-style="row"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.pl-dia[data-style="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 70%; margin-inline: auto; }
.pl-dia[data-style="stage"] { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; align-content: stretch; padding: 8px 14px; }
.pl-dia[data-style="stage"] i { aspect-ratio: auto; }
.pl-dia[data-style="stage"] i:first-child { grid-row: 1 / span 2; }
.pl-dia[data-style="stage"] i:nth-child(n + 6) { display: none; }
.pl-thumb:has(.pl-dia[data-style="grid"]) .pl-dia, .pl-thumb:has(.pl-dia[data-style="row"]) .pl-dia { align-content: center; }

/* Header: a square segmented control with a pictogram each. */
.pl-seg { display: inline-grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; }
.pl-seg button {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 15px; font-weight: 600;
}
.pl-seg button:hover { color: var(--ink); }
.pl-seg button + button { border-left: 1px solid var(--line-2); border-radius: 0 4px 4px 0; }
.pl-seg button:first-child { border-radius: 4px 0 0 4px; }
.pl-seg button.on { background: var(--ink); color: var(--black); }
.pl-hero-dia { position: relative; flex: none; width: 24px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.8; overflow: hidden; }
.pl-hero-dia[data-hero="banner"]::before { content: ""; position: absolute; inset: 0 0 9px; background: currentColor; }
.pl-hero-dia::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Sections: a ruled list. Name, up, down, the square switch. */
.pl-sections { display: grid; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.pl-sec {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 56px; align-items: center; gap: 4px;
  min-height: 68px; padding: 8px 0; border-top: 1px solid var(--line);
}
.pl-sec-copy { display: grid; gap: 2px; min-width: 0; padding-right: 8px; }
.pl-sec-copy b { color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.2; }
.pl-sec-copy small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.pl-sec.off .pl-sec-copy b { color: var(--muted); }
.pl-move {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--ink-2);
}
.pl-move:hover:not(:disabled) { border-color: var(--ink-2); color: var(--ink); }
.pl-move:disabled { opacity: 0.28; cursor: default; }
.pl-switch { display: grid; place-items: center; width: 56px; height: 44px; padding: 0; border: 0; background: none; }
.pl-switch i {
  position: relative; display: block; width: 48px; height: 28px; border-radius: var(--r-sm);
  background: var(--well); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 0.15s ease;
}
.pl-switch i::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 4px;
  background: var(--ink-2); transition: transform 0.15s var(--ease-out);
}
.pl-switch[aria-checked="true"] i { background: var(--ink); box-shadow: none; }
.pl-switch[aria-checked="true"] i::after { background: var(--black); transform: translateX(20px); }
.pl-switch:disabled { opacity: 0.5; }

/* Chasing */
.pl-chasing { margin: 0; max-width: 460px; }
#view-account .pl-chasing .hint { display: flex; justify-content: space-between; gap: 12px; }
#view-account .pl-chasing .hint, #view-account .pl-chasing .hint > * { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 450; }
.pl-count { flex: none; font-variant-numeric: tabular-nums; }

/* Save bar: stays above the phone tab bar while you scroll the controls. */
.pl-bar {
  position: sticky; bottom: calc(var(--tabbar) + 10px); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--wall-dark);
}
.pl-bar .solid { min-width: 150px; }
.pl-bar .solid[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); opacity: 1; cursor: default; }
.pl-bar .text-btn { min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 15px; }


/* One coral action per screen: here it is Save, so the hero's Claim steps aside (as it does on the badge wall). */
#view-account:has(.acct-tab.on[data-acct-tab="layout"]) .acct-hero-actions .claim-cta { display: none; }

/* Sticky needs a viewport scroller: the page's body clips sideways overflow with `hidden`, which makes it
   a scroller of its own, so on this tab it clips instead (as the root already does) and the site header,
   which would then stick over the strip, stays in the flow like everywhere else. */
body:has(#pl-layout) { overflow-x: clip; }
body:has(#pl-layout) .site-header { position: static; }

/* The room in miniature */
.pl-room {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--wall);
  /* The miniature's captions sit on the lit ground like the profile's own, so they step up the same way. */
  --muted: #b7b4bb; --faint: #b0adb4;
}
.pl-room-bd { --u: calc(100cqw / 1280); --k: var(--kr, 1); z-index: 0; }
.pl-room-bd[data-backdrop="contours"] { --k: calc(var(--kr, 1) * 1.1); }
.pl-room-bd[data-backdrop="pockets"], .pl-room-bd[data-backdrop="paper"] { --k: calc(var(--kr, 1) * 0.75); }
.pl-mini-hero, .pl-mini-body { position: relative; z-index: 1; }
#view-account .pl-room .pl-mini-banner { height: 62px; margin: 0; border-radius: 0; }
.pl-mini-id { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px; }
.pl-mini-hero[data-hero="banner"] .pl-mini-id { margin-top: -26px; }
.pl-mini-hero[data-hero="plain"] .pl-mini-id { padding-top: 18px; align-items: center; }
.pl-mini-face { flex: none; width: 54px; }
.pl-mini-hero[data-hero="plain"] .pl-mini-face { width: 76px; }
.trainer-mark.pl-mini-face {
  --ring: var(--avatar, var(--ink));
  display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border-radius: 50%; font-size: 0;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--ring) 60%, #fff 0%), color-mix(in oklab, var(--ring) 18%, #0b0a10) 76%);
  box-shadow: 0 0 0 3px var(--wall), 0 0 0 4.5px var(--ring);
}
.trainer-mark.pl-mini-face img { width: 92%; height: 92%; object-fit: contain; transform: translateY(5%); }
.pl-mini-name { min-width: 0; padding-bottom: 2px; }
.pl-mini-name b { display: block; color: var(--ink); font-size: 19px; font-weight: 800; font-variation-settings: "opsz" 96; line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pl-mini-hero[data-hero="plain"] .pl-mini-name b { font-size: 25px; letter-spacing: -0.04em; }
.pl-mini-name small { display: block; margin-top: 5px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pl-mini-name small span { color: var(--muted); font-weight: 600; }
.pl-mini-body { display: grid; gap: 14px; padding: 18px 16px 18px; }
.pl-mini-sec { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }
.pl-mini-sec b { padding-top: 7px; color: var(--ink-2); font-size: 12px; font-weight: 650; }
.pl-mini-sec .pl-dia { height: auto; padding: 8px; border-radius: 4px; background: var(--well); }
.pl-mini-sec .pl-dia[data-style="stage"] { aspect-ratio: 2 / 1; padding: 8px 14%; }
.pl-mini-sec .pl-dia[data-style="grid"] { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 26%; }
.pl-mini-slabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 18%; border-radius: 4px; background: var(--well); }
.pl-mini-slabs i { display: block; aspect-ratio: 5 / 8; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--surface); }
.pl-mini-pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 40%; border-radius: 4px; background: var(--well); }
.pl-mini-pockets i { display: block; aspect-ratio: 63 / 88; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-mini-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px 12%; border-radius: 4px; background: var(--well); }
.pl-mini-shelf i { display: block; aspect-ratio: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface); }
.pl-mini-lines { display: grid; gap: 6px; padding: 4px 0; }
.pl-mini-lines i { display: block; height: 5px; border-radius: 0; background: var(--line-2); }
.pl-mini-lines i:last-child { width: 62%; }
.pl-mini-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---- Laptop to phone -------------------------------------------------------- */
@media (max-width: 1040px) {
  .pl-layout { display: block; }
  .pl-controls { margin-top: 24px; }
  .pl-sws { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  /* The preview becomes a strip at the top of the screen that stays while you edit: the room, its
     backdrop, the header and the chasing line, with the first section peeking out below. */
  .pl-preview { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; margin-inline: calc(-1 * var(--gutter)); }
  .pl-preview .pl-note { display: none; }
  .pl-preview .pl-room { max-height: 104px; border-width: 0 0 1px; border-radius: 0; }
  .pl-preview .pl-room::after {
    content: ""; position: absolute; inset: auto 0 0; height: 28px; z-index: 2; pointer-events: none;
    background: linear-gradient(transparent, var(--wall));
  }
  #view-account .pl-preview .pl-mini-banner { height: 52px; }
  .pl-preview .pl-mini-hero[data-hero="banner"] .pl-mini-id { margin-top: -22px; }
  .pl-preview .pl-mini-face { width: 46px; }
  .pl-preview .pl-mini-hero[data-hero="plain"] .pl-mini-face { width: 52px; }
  .pl-preview .pl-mini-hero[data-hero="plain"] .pl-mini-id { padding-top: 12px; }
  .pl-preview .pl-mini-name b { font-size: 17px; }
  .pl-preview .pl-mini-hero[data-hero="plain"] .pl-mini-name b { font-size: 20px; }
  .pl-preview .pl-mini-id { padding-inline: var(--gutter); }
  .pl-preview .pl-mini-body { padding-inline: var(--gutter); }
}
@media (max-width: 720px) {
  .pl-controls { gap: 44px; }
  .pl-sws { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pl-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-tiles-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-seg { display: grid; }
  .pl-bar { margin-inline: -4px; padding: 8px 14px; gap: 0 18px; }
  .pl-bar .solid { flex: 1 1 100%; }
  .pl-bar .text-btn { min-height: 40px; font-size: 14px; }
  .pl-preview .pl-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-switch i, .pl-switch i::after { transition: none; }
}
body.no-motion .pl-switch i, body.no-motion .pl-switch i::after { transition: none; }
body.no-motion .pl-room .banner-wash::before, body.no-motion .pl-room .banner-wash::after { animation: none; }