/* The skeleton loader (13 October 2026). Carl: "Implement skeleton loaders for any component that pulls data and awaits stuff
   from api, such as watchlist, prices and calender. Skeleton loader should match design and size/format accordingly for each
   section". skeleton.js draws the wrapper and the shapes; this file is how they look and move.

   Colours are tokens (--fill, --desk), so the dark palette follows by itself: theme.js recolours app.css and onboarding.css and
   no other sheet, and a literal here would stay as written. The one literal is the sheen's white, which is a veil on the light
   page and a light on the dark one, so it has a line of its own under html[data-theme="dark"]. Carl's rules for the app hold:
   --r1 is the only radius (a disc stands for a round thing, as the avatar does), no ring and no glow.

   Motion is one fade-in per skeleton and a sheen inside each shape (14 October, Carl: "all boxes should flash across at same
   time ... individual loading shimmers"), every shape on the same beat. Both are clocked by --sk-t (the time the request has
   been out, written by skeleton.js each time the view draws it and inherited by every shape), so a view that redraws mid-load
   does not start the fade or the sheen again, and the shapes stay in step. The
   200 ms and 150 ms below are skeleton.js's SHOW_AFTER_MS and FADE_IN_MS, and .1s its FADE_OUT_MS (test/skeleton.test.mjs keeps
   them equal).

   Each section's own shapes are a block between its BEGIN and END lines. Write only inside your own block. */

:root {
  --sk-base: var(--fill);
  --sk-soft: color-mix(in srgb, var(--fill) 45%, var(--desk));
  --sk-sheen: rgba(255, 255, 255, .62);
}
html[data-theme="dark"] { --sk-sheen: rgba(255, 255, 255, .055); }

@keyframes skIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes skOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes skSheen { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }

.sk-wrap {
  position: relative; opacity: 0; pointer-events: none; cursor: default; -webkit-user-select: none; user-select: none;
  animation: skIn .15s ease-out both; animation-delay: calc(200ms - var(--sk-t, 0ms));
}
.sk-wrap.sk-out { animation: skOut .1s ease-in forwards; animation-delay: 0s; }
.sk-body { display: block; }

.sk { position: relative; overflow: hidden; display: block; flex: none; box-sizing: border-box; width: var(--w, 100%); max-width: 100%; height: var(--h, 12px); background: var(--sk-base); border-radius: var(--r1); }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, var(--sk-sheen) 50%, transparent 64%);
  animation: skSheen 1.8s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(0ms - var(--sk-t, 0ms));
}
.sk-block { background: var(--sk-soft); }
.sk-disc { width: var(--d, 32px); height: var(--d, 32px); border-radius: 50%; }

/* The wait is kept (the grace period is not a motion), the fade and the sheen are not. app.css (line 52) switches every animation off under
   reduced motion with `* { animation: none !important }`, which on its own would leave the wrapper at its base opacity 0 for good: it would
   never show. So the fade is put back here at an instant (.001s) and keeps its delay: the skeleton waits its 200 ms and is then simply there.
   Found by the rig (agent R); the !important and the class beat the `*` rule. */
@media (prefers-reduced-motion: reduce) {
  .sk-wrap { animation-name: skIn !important; animation-duration: .001s !important; animation-delay: calc(200ms - var(--sk-t, 0ms)) !important; animation-fill-mode: both !important; animation-timing-function: linear !important; }
  .sk-wrap.sk-out { animation-name: skOut !important; animation-delay: 0s !important; animation-fill-mode: forwards !important; }
  .sk::after { display: none; }
}
@media (forced-colors: active) {
  .sk { forced-color-adjust: none; background: GrayText; opacity: .3; }
  .sk::after { display: none; }
}

/* BEGIN sk:watchlist */
/* The Watchlist (sk-watchlist.js): the list's first load, Refresh and Try again, in the layout in use (the long view or the
   tiles), and the Past sales panel while its sales are read. Every number here is the real rule's, in app.css, with the same
   variables where the real rule has one (--wl-stage-h, --wl-gal, --wl-led, --wl-reserve, --row-alt, --tile-shadow, the --wlc-*
   tokens of the cool palette), so a card of grey lands where the real card does; test/sk-watchlist.test.mjs reads both sheets
   and holds them equal. What the real cards take from their words (the ledger's and the strip's height, the tiles' one height
   that wl-view.js equalise() measures) has no words here: those heights are MEASURED, per band of window width, on the twelve
   placeholder lots (agents/W/scratch/sweep.mjs: the real list loaded, the window stepped 2px at a time from 700 to 1720, each
   band's median row, and the tiles' --wl-tile-h, --wl-ledger-h and --wl-strip-h). Shapes are --wlc-fill (the ground of a photo
   that has not loaded) and a control is its empty outline in --wlc-hair. */
.sk-watchlist .sk { background: var(--wlc-fill); }
.sk-watchlist .sk-wl-ctl { background: var(--desk); border: 1px solid var(--wlc-hair); }

/* the chips row of the named lists (.wl-listbar, .wl-chips), drawn first when the bar is not on screen yet. The real bar is 4px wider on each
   side than its column, and its chips 4px in (room for a focus ring inside a scroller): here nothing scrolls or takes focus, so the row keeps
   to the column and the chips start at the same x, with nothing past the body's edge */
.sk-watchlist .sk-wl-bar { position: relative; margin: 0 0 8px; }
.sk-watchlist .sk-wl-chips { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0; overflow: hidden; }
.sk-watchlist .sk-wl-add { flex: none; display: inline-flex; align-items: center; padding: 0 4px 0 8px; }
.sk-watchlist .sk-wl-new { border-style: dashed; }

/* the long view (.c-wl-table, .c-wl-row) */
.sk-watchlist .sk-wl-table { background: var(--desk); border: 1px solid var(--wlc-hair); border-radius: var(--r1); overflow: hidden; }
.sk-watchlist .sk-wl-card { --wl-stage-h: 150px; --wl-gal: 236px; --wl-led: clamp(560px, 42%, 620px); --wl-reserve: 272px; --sk-wl-led-h: 108px; display: grid; grid-template-columns: var(--wl-gal) minmax(0,1fr) var(--wl-led); grid-template-rows: auto auto 1fr auto; align-items: start; gap: 0 20px; padding: 12px 20px; border-top: 1px solid var(--wlc-hair); }
.sk-watchlist .sk-wl-card:first-child { border-top: 0; }
.sk-watchlist .sk-wl-list > .sk-wl-card:nth-child(even) { background: var(--row-alt); }
.sk-watchlist .sk-wl-card { --wl-led-k: .42; --wl-led-lo: 560px; --wl-led-hi: 620px; --wl-col-gap: 20px; }
@media (min-width: 1600px) { .sk-watchlist .sk-wl-card { --wl-led-k: .4; --wl-led-hi: 660px; } }
@media (min-width: 1360px) and (max-width: 1439px) { .sk-watchlist .sk-wl-card { --wl-led-k: .44; --wl-led-lo: 560px; --wl-col-gap: 14px; } }
/* zone one: the photos (.c-wl-gal, .wlg: a stage 4:3 of --wl-stage-h, 6px, a column of five previews 30px wide) and the closing badge on them */
.sk-watchlist .sk-wl-gal { position: relative; grid-column: 1; grid-row: 1 / span 4; min-width: 0; }
.sk-watchlist .sk-wl-wlg { display: grid; grid-template-columns: minmax(0, calc(var(--wl-stage-h) * 4 / 3)) 30px; gap: 6px; height: var(--wl-stage-h); }
.sk-watchlist .sk-wl-stage { position: relative; width: auto; height: 100%; }
.sk-watchlist .sk-wl-when { position: absolute; top: 6px; left: 6px; background: var(--desk); }
.sk-watchlist .sk-wl-thumbs { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(5, minmax(0,1fr)); gap: 3px; min-height: 0; }
.sk-watchlist .sk-wl-th { width: auto; height: auto; min-height: 0; opacity: .66; }
/* zone two: the name (two lines of 18px at 1.14), its facts (11.5px at 1.4, the id chip makes the line 20.8px), the pair and the strip */
.sk-watchlist .sk-wl-title { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.sk-watchlist .sk-wl-line { margin-block: 4.26px; }
.sk-watchlist .sk-wl-meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; height: 20.8px; margin-top: 3px; min-width: 0; overflow: hidden; } /* 14 October 2026: beside the larger photos the facts' bars can be wider than the name's column (a tile at 1100px), where the real words wrap: they are cut at the column's edge */
.sk-watchlist .sk-wl-pair { grid-column: 3; grid-row: 4; justify-self: end; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 7px; }
.sk-watchlist .sk-wl-pick { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.sk-watchlist .sk-wl-more { margin-block: -2px; }
.sk-watchlist .sk-wl-strip { grid-column: 2 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; margin-top: 7px; padding-right: var(--wl-reserve, 134px); }
.sk-watchlist .sk-wl-ceil { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sk-watchlist .sk-wl-list .sk-wl-ceil { min-width: 254px; }
@media (min-width: 1360px) {
  .sk-watchlist .sk-wl-list .sk-wl-ceil { width: calc(100% + var(--wl-reserve, 134px) - 8px - clamp(var(--wl-led-lo), calc(var(--wl-led-k) * (100% + var(--wl-reserve, 134px) + var(--wl-gal) + var(--wl-col-gap))), var(--wl-led-hi))); }
}
.sk-watchlist .sk-wl-btn { margin-block: -2px; }
.sk-watchlist .sk-wl-caption { display: flex; flex-direction: column; width: 150px; }
.sk-watchlist .sk-wl-capline { margin-block: 2.65px; }
.sk-watchlist .sk-wl-cap2 { display: none; }
.sk-watchlist .sk-wl-link { margin-block: 3.4px; }
/* zone three: the ledger (.c-wl-figures: 205fr 306fr 251fr, a hairline frame, the bid cell blue) and its cells (8px 16px 9px) */
.sk-watchlist .sk-wl-ledger { grid-column: 3; grid-row: 1 / span 3; display: grid; grid-template-columns: minmax(0,205fr) minmax(0,306fr); min-width: 0; height: var(--sk-wl-led-h); background: var(--desk); border: 1px solid var(--wlc-hair); border-radius: var(--r1); overflow: hidden; }
.sk-watchlist .sk-wl-cell { display: flex; flex-direction: column; min-width: 0; padding: 8px 16px 9px; }
.sk-watchlist .sk-wl-bid { background: var(--wlc-bid); border-right: 1px solid var(--wlc-hair); }
/* --wlc-fill on the bid cell's own tint is 1.12:1 in the light palette and 1.09:1 in the dark (reviewer V, 13 October): its bars take a little --ink */
.sk-watchlist .sk-wl-bid .sk { background: color-mix(in srgb, var(--wlc-fill) 86%, var(--ink)); }
.sk-watchlist .sk-wl-mg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--wlc-hair); } /* 14 October 2026: the Margin is a line at the foot of the value cell (app.css .c-wl-margin) */
.sk-watchlist .sk-wl-k { margin-block: 1.25px; }
.sk-watchlist .sk-wl-fig { margin-block: 4.4px 2.4px; }
.sk-watchlist .sk-wl-n { margin-block: 5px 3px; }
.sk-watchlist .sk-wl-n2 { margin-block: 3.65px 2.65px; }
.sk-watchlist .sk-wl-mg .sk-wl-k { margin: 0; }
.sk-watchlist .sk-wl-mfig { margin-block: 2.5px; }
.sk-watchlist .sk-wl-info { border-radius: var(--r1); } /* the Margin's "i" (app.css .c-marg-info), which holds its note since 14 October 2026 */
/* the other widths (app.css "the zones at other widths"): a narrower long view from 1360 to 1439px, the ledger under the name below 1360px, one column below 900px */
@media (min-width: 1600px) { .sk-watchlist .sk-wl-card { --wl-led: clamp(560px, 40%, 660px); } }
@media (min-width: 1360px) and (max-width: 1439px) { .sk-watchlist .sk-wl-card { --wl-stage-h: 120px; --wl-gal: 196px; --wl-led: clamp(560px, 44%, 620px); column-gap: 14px; } }
@media (max-width: 1359px) {
  .sk-watchlist .sk-wl-card { --wl-stage-h: 128px; --wl-gal: 207px; grid-template-columns: var(--wl-gal) minmax(0,1fr); grid-template-rows: auto auto 1fr auto auto; }
  .sk-watchlist .sk-wl-gal { grid-row: 1 / span 5; }
  .sk-watchlist .sk-wl-card .sk-wl-pair { grid-column: 2; }
  .sk-watchlist .sk-wl-ledger { grid-column: 2; grid-row: 5; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 8px; }
  .sk-watchlist .sk-wl-list .sk-wl-line2 { display: none; }
}
@media (max-width: 899px) {
  .sk-watchlist .sk-wl-card { grid-template-columns: minmax(0,1fr); }
  .sk-watchlist .sk-wl-gal, .sk-watchlist .sk-wl-title, .sk-watchlist .sk-wl-meta, .sk-watchlist .sk-wl-strip, .sk-watchlist .sk-wl-card .sk-wl-pair, .sk-watchlist .sk-wl-ledger { grid-column: 1; grid-row: auto; }
  .sk-watchlist .sk-wl-card .sk-wl-pair { justify-self: start; }
  .sk-watchlist .sk-wl-strip { padding-right: 0; }
}
/* the long view's ledger, measured: one height per band, since 14 October 2026 the tallest card's (wl-view.js equalise gives every long-view ledger that height) */
@media (min-width: 900px) and (max-width: 932px) { .sk-watchlist .sk-wl-list .sk-wl-card { --sk-wl-led-h: 113px; } }
@media (max-width: 705px) { .sk-watchlist .sk-wl-list .sk-wl-card { --sk-wl-led-h: 113px; } }

/* the tiles (.c-wl-table[data-view="tiles"]): two columns of 432px or more, every tile the card colour with its lift, one height */
.sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 296px; --sk-wl-ledger-h: 108px; --sk-wl-strip-h: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(432px, calc(50% - 8px)), 1fr)); gap: 16px; align-items: start; border: 0; border-radius: 0; background: none; overflow: visible; }
.sk-watchlist .sk-wl-tiles .sk-wl-card { --wl-stage-h: 144px; --wl-gal: calc(var(--wl-stage-h) * 4 / 3); grid-template-columns: var(--wl-gal) minmax(0,1fr); grid-template-rows: auto auto auto 1fr auto auto; gap: 0 14px; padding: 12px; border: 1px solid var(--wlc-hair); border-radius: var(--r1); background: var(--wlc-card); box-shadow: var(--tile-shadow); min-height: var(--sk-wl-tile-h); }
.sk-watchlist .sk-wl-tiles .sk-wl-gal { grid-row: 1 / span 4; }
.sk-watchlist .sk-wl-tiles .sk-wl-title { min-height: 41.04px; }
.sk-watchlist .sk-wl-tiles .sk-wl-meta { height: 16.1px; }
.sk-watchlist .sk-wl-tiles .sk-wl-pair { display: contents; }
.sk-watchlist .sk-wl-tiles .sk-wl-pick { grid-column: 2; grid-row: 4; justify-self: start; align-self: end; margin-top: 4px; }
.sk-watchlist .sk-wl-tiles .sk-wl-more { grid-column: 1 / -1; grid-row: 6; justify-self: end; align-self: end; z-index: 1; margin-block: 0; }
.sk-watchlist .sk-wl-tiles .sk-wl-ledger { background: var(--wlc-soft); grid-column: 1 / -1; grid-row: 5; height: auto; min-height: var(--sk-wl-ledger-h); margin-top: 6px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.sk-watchlist .sk-wl-tiles .sk-wl-cell { padding-inline: 12px; }
.sk-watchlist .sk-wl-tiles .sk-wl-strip { grid-column: 1 / -1; grid-row: 6; min-height: var(--sk-wl-strip-h); margin-top: 4px; padding-right: 134px; align-content: flex-start; }
.sk-watchlist .sk-wl-tiles .sk-wl-ceilbtn { width: 90px; }
.sk-watchlist .sk-wl-tiles .sk-wl-caption { width: 96px; }
.sk-watchlist .sk-wl-tiles .sk-wl-cap2 { display: block; }
.sk-watchlist .sk-wl-tiles .sk-wl-alert { display: none; } /* a tile's bell is in its top-right corner (app.css .ap-btn), off the strip */
/* the photos as app.css's "the photo runs down the tile's left side" block: the previews a row of 4:3 thumbnails on the stage's bottom-left
   corner, and where the table is 1200px or wider the gallery spans the rows above the strip and the ledger sits in the name's column */
.sk-watchlist .sk-wl-tiles { container: sk-wl-tiles / inline-size; }
.sk-watchlist .sk-wl-tiles .sk-wl-wlg { position: relative; grid-template-columns: minmax(0,1fr); gap: 0; }
.sk-watchlist .sk-wl-tiles .sk-wl-thumbs { --wl-th: min(40px, calc((var(--wl-gal) - 44px) / 5)); position: absolute; left: 0; bottom: 0; z-index: 1; grid-template: calc(var(--wl-th) * 3 / 4) / none; grid-auto-flow: column; grid-auto-columns: var(--wl-th); gap: 0; }
.sk-watchlist .sk-wl-tiles .sk-wl-th { border-radius: 0; }
@container sk-wl-tiles (min-width: 1200px) {
  .sk-watchlist .sk-wl-tiles .sk-wl-card { --wl-stage-h: 168px; --wl-gal: 260px; }
  .sk-watchlist .sk-wl-tiles .sk-wl-gal { grid-row: 1 / span 5; align-self: stretch; contain: size; }
  .sk-watchlist .sk-wl-tiles .sk-wl-gal .sk-wl-wlg { height: 100%; }
  .sk-watchlist .sk-wl-tiles .sk-wl-ledger { background: var(--wlc-soft); grid-column: 2; }
  .sk-watchlist .sk-wl-tiles .sk-wl-strip { margin-top: 12px; }
}
/* the tiles' one height, measured (wl-view.js equalise() on the twelve lots): --wl-tile-h, --wl-ledger-h and --wl-strip-h per band
   (re-measured 14 October 2026 at every width from 700 to 1920px, after the thumbnails moved onto the photo and, from 1306px, the tall photo) */
@media (min-width: 1797px) and (max-width: 1805px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 301px; --sk-wl-ledger-h: 113px; } }
@media (min-width: 1593px) and (max-width: 1796px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 317px; --sk-wl-ledger-h: 113px; } }
@media (min-width: 1572px) and (max-width: 1592px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 332px; --sk-wl-ledger-h: 128px; } }
@media (min-width: 1506px) and (max-width: 1571px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 338px; --sk-wl-ledger-h: 134px; } }
@media (min-width: 1482px) and (max-width: 1505px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 340px; --sk-wl-ledger-h: 136px; } }
@media (min-width: 1378px) and (max-width: 1481px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 349px; --sk-wl-ledger-h: 145px; } }
@media (min-width: 1321px) and (max-width: 1377px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 371px; --sk-wl-ledger-h: 145px; --sk-wl-strip-h: 52px; } }
@media (min-width: 1306px) and (max-width: 1320px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 387px; --sk-wl-ledger-h: 145px; --sk-wl-strip-h: 52px; } }
@media (min-width: 1258px) and (max-width: 1305px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 341px; --sk-wl-ledger-h: 108px; --sk-wl-strip-h: 52px; } }
@media (min-width: 1214px) and (max-width: 1257px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 345px; --sk-wl-ledger-h: 113px; --sk-wl-strip-h: 52px; } }
@media (min-width: 1185px) and (max-width: 1213px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 354px; --sk-wl-ledger-h: 113px; --sk-wl-strip-h: 61px; } }
@media (min-width: 1045px) and (max-width: 1184px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 356px; --sk-wl-ledger-h: 113px; --sk-wl-strip-h: 61px; } }
@media (min-width: 1024px) and (max-width: 1044px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 371px; --sk-wl-ledger-h: 128px; --sk-wl-strip-h: 61px; } }
@media (min-width: 986px) and (max-width: 1023px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 377px; --sk-wl-ledger-h: 134px; --sk-wl-strip-h: 61px; } }
@media (min-width: 900px) and (max-width: 985px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 318px; --sk-wl-ledger-h: 108px; } }
@media (min-width: 734px) and (max-width: 899px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 430px; --sk-wl-ledger-h: 108px; } }
@media (max-width: 733px) { .sk-watchlist .sk-wl-tiles { --sk-wl-tile-h: 452px; --sk-wl-ledger-h: 108px; --sk-wl-strip-h: 52px; } }
/* one column of tiles (below 986px of window): three tiles fill the first screen */
@media (max-width: 985px) { .sk-watchlist .sk-wl-tiles > .sk-wl-card:nth-child(n+4) { display: none; } }

/* the Past sales panel (.c-ls, app.css "Past sales panel"): the head's lines (the model, 14px at 1.4, its 6px inside the caption's
   10px; the sentence, 13.5px at 1.55 and 72ch, 4px under it), then the body: the strip, and 22px under it the two columns */
.sk-watchlist.sk-ls-lines .sk-body { container-type: inline-size; }
.sk-watchlist:is(.sk-ls-lines, .sk-ls-body) .sk { background: var(--sk-base); } /* the panel is not in the cool palette: its grounds are --desk and --subtle, its lines warm */
.sk-watchlist:is(.sk-ls-lines, .sk-ls-body) .sk-block { background: var(--sk-soft); }
.sk-watchlist .sk-ls-model { display: flex; align-items: center; height: 19.6px; }
.sk-watchlist .sk-ls-sub { display: flex; flex-direction: column; max-width: 72ch; margin-top: 4px; font: 400 13.5px/1.55 var(--sans); }
.sk-watchlist .sk-ls-l { margin-block: 5.46px; }
.sk-watchlist .sk-ls-l3 { display: none; }
@container (max-width: 599px) { .sk-watchlist .sk-ls-l3 { display: block; } }
.sk-watchlist .sk-ls-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 0; border-top: 1px solid var(--fill); border-bottom: 1px solid var(--fill); }
.sk-watchlist .sk-ls-key { display: inline-flex; align-items: center; gap: 8px; height: 18px; }
.sk-watchlist .sk-ls-count { margin-left: auto; }
.sk-watchlist .sk-ls-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 22px; }
.sk-watchlist .sk-ls-chartcol { min-width: 0; }
.sk-watchlist .sk-ls-compscol { display: flex; flex-direction: column; align-self: stretch; min-width: 0; min-height: 0; contain: size; }
.sk-watchlist .sk-ls-colhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 19.5px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--fill); box-sizing: content-box; flex: none; }
.sk-watchlist .sk-ls-chartcard { padding: 12px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--subtle); container-type: inline-size; }
.sk-watchlist .sk-ls-chart { height: clamp(338px, calc(50cqw + 38px), 438px); height: clamp(338px, round(nearest, calc(50cqw + 38.25px), 1px), 438px); } /* lot-sales.js chartHeight(w): min(438, max(338, round(w * .5) + 38)), w the chart's width (the card's content box) */
.sk-watchlist .sk-ls-readout { display: flex; align-items: center; min-height: 20px; margin-top: 12px; }
.sk-watchlist .sk-ls-rows { flex: 1 1 0; display: grid; gap: 10px; align-content: start; min-height: 0; overflow: hidden; margin: -2px -6px -2px -2px; padding: 2px 6px 2px 2px; }
.sk-watchlist .sk-ls-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0 14px; align-items: start; padding: 12px 16px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--subtle); }
.sk-watchlist .sk-ls-what { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding-top: 4px; }
.sk-watchlist .sk-ls-amt { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; padding-top: 3px; }
@media (max-width: 1100px) { .sk-watchlist .sk-ls-cols { gap: 28px; } }
@media (max-width: 1100px) and (min-width: 880px), (max-width: 640px) {
  .sk-watchlist .sk-ls-row { grid-template-columns: 96px minmax(0, 1fr); }
  .sk-watchlist .sk-ls-amt { grid-column: 2; align-items: flex-start; gap: 8px; margin-top: 10px; }
}
@media (max-width: 879px) {
  .sk-watchlist .sk-ls-cols { grid-template-columns: minmax(0, 1fr); }
  .sk-watchlist .sk-ls-compscol { display: block; align-self: auto; contain: none; }
  .sk-watchlist .sk-ls-rows { overflow: visible; margin: 0; padding: 0; }
}

@media (forced-colors: active) { .sk-watchlist .sk, .sk-watchlist .sk-wl-ctl { background: GrayText; } }
/* END sk:watchlist */

/* BEGIN sk:prices */
/* Prices (13 October 2026): the screen, the open row's panel and the Compare view while their sales are out. Every number below
   is the real rule's (app.css, "Prices (R55)" and the R56 photo rules); test/sk-prices.test.mjs reads both and names the rule to
   change the day one moves. The hairlines are --sk-base and --sk-soft, not the real rgba(32,30,29,a), which this sheet is not
   recoloured for. The table takes the real table's two custom properties (--pr-cols, --pr-min), set by the view from the columns
   the picker and the window width give it. */
/* the screen: .pr-heat (six across, four under 1180px), .pr-tile, .pr-showing */
.sk-prices .sk-prices-heat { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
@media (max-width: 1180px) { .sk-prices .sk-prices-heat { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.sk-prices .sk-prices-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--sk-base); border-radius: var(--r1); }
.sk-prices .sk-prices-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: calc(13px * 1.25 + .39px); } /* the +.39px is the baseline alignment of the 12.5px change beside the 13px name, as measured on the real tile (50.92px) */
.sk-prices .sk-prices-tile-name { flex: 0 1 auto; }
.sk-prices .sk-prices-tile > .sk { margin: calc((11px * 1.3 - 8px) / 2) 0; }
.sk-prices .sk-prices-showing { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; height: calc(11.5px * 1.3 + 4px); overflow: hidden; }
.sk-prices .sk-prices-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* the table: .wl-table, .pr-scroll, .pr-grid, .pr-th, .pr-row, .wl-foot */
.sk-prices .sk-prices-table { border: 1px solid var(--sk-base); border-radius: var(--r1); overflow: hidden; }
.sk-prices .sk-prices-scroll { overflow: hidden; }
.sk-prices .sk-prices-grid { min-width: var(--pr-min); }
.sk-prices .sk-prices-th, .sk-prices .sk-prices-row { display: grid; grid-template-columns: var(--pr-cols); align-items: center; gap: 10px; padding: 0 12px; }
.sk-prices .sk-prices-th { height: 30px; background: var(--subtle); border-bottom: 1px solid var(--sk-base); }
.sk-prices .sk-prices-row { height: 32px; border-bottom: 1px solid var(--sk-soft); }
.sk-prices .sk-prices-th > *, .sk-prices .sk-prices-row > * { min-width: 0; }
.sk-prices .sk-prices-r { justify-self: end; }
.sk-prices .sk-prices-chk { justify-self: center; }
.sk-prices .sk-prices-foot { display: flex; align-items: center; height: calc(11px + 12px * 1.3 + 11px); padding: 0 15px; background: var(--subtle); }
/* the open row's panel: .pr-chart, .pr-xl, .pr-keys, then the sales, .pr-sale.ph */
.sk-prices .sk-prices-chart { position: relative; height: 150px; margin-top: 8px; border-radius: var(--r1); background: var(--sk-soft); overflow: hidden; }
.sk-prices .sk-prices-line { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: var(--sk-base); }
.sk-prices .sk-prices-xl { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; height: calc(10.5px * 1.3); }
.sk-prices .sk-prices-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; height: calc(11px * 1.3); overflow: hidden; }
.sk-prices .sk-prices-key { display: inline-flex; align-items: center; gap: 5px; }
.sk-prices .sk-prices-sale { display: grid; grid-template-columns: 96px minmax(0,1fr) auto 18px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sk-soft); }
.sk-prices .sk-prices-sale-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-prices .sk-prices-sale-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sk-prices .sk-prices-more { display: flex; align-items: center; margin-top: 8px; height: calc(12px * 1.3 + 1.66px); } /* the real link is an inline button in a line box 1.66px taller than itself (measured) */
/* the Compare view: .pr-cchart, then each strip's .pr-stats */
.sk-prices .sk-prices-cchart { position: relative; height: 240px; border: 1px solid var(--sk-base); border-radius: var(--r1); background: var(--sk-soft); overflow: hidden; }
.sk-prices .sk-prices-yl { position: absolute; left: 10px; top: 14px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.sk-prices .sk-prices-wl { position: absolute; left: 52px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; }
.sk-prices .sk-prices-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.sk-prices .sk-prices-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-prices .sk-prices-stat > :first-child { margin: calc((9.5px - 7px) / 2) 0; }
.sk-prices .sk-prices-stat > :last-child { margin: calc((13px * 1.2 - 10px) / 2) 0; }
/* END sk:prices */

/* BEGIN sk:calendar */
/* The Calendar (agent C, 13 October 2026): sk-calendar.js draws the shapes, views/calendar.js draws them while nothing of
   the range on screen can be shown. Each number is app.css's own, from the rule named beside it (test/sk-calendar.test.mjs
   holds the two equal). A hairline is --ink at app.css's alpha: app.css writes the literal rgba(32,30,29,a), which is --ink
   at a and which theme.js recolours in dark; this file is never recoloured, so it mixes the token. No teal and no
   data-heat: those colours are the sessions'. */

/* Month: a pending day's count line (.pnum + .pcount { margin-top: auto }; .pcount 11.5px/14px) */
.sk-calendar-cell { display: flex; align-items: center; flex: none; max-width: 100%; height: 14px; margin-top: auto; }

/* Month: the strip under the grid (.pano-detail: two columns in one row; the wrapper spans both) */
.sk-calendar-strip { grid-column: 1 / -1; grid-row: 1 / -1; min-width: 0; min-height: 0; margin: -19px 0 -20px; padding: 19px 0 20px; } /* over the strip's padding too (.pano-detail padding 19px 0 20px), so it covers the strip; the shapes keep the content box */
.sk-calendar-strip > .sk-body { display: grid; grid-template-columns: minmax(0, 27.7fr) minmax(0, 72.3fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.sk-calendar-day { min-width: 0; padding-right: 24px; container: sk-cal-day / inline-size; } /* .pano-day */
.sk-calendar-eyebrow, .sk-calendar-headline, .sk-calendar-count, .sk-calendar-ctop, .sk-calendar-tl, .sk-calendar-cmeta, .sk-calendar-ctags { display: flex; align-items: center; min-width: 0; }
.sk-calendar-eyebrow { height: 16px; } /* .pano-eyebrow 12px/16px */
.sk-calendar-e2 { display: none; }
@container sk-cal-day (max-width: 239px) { .sk-calendar-eyebrow { flex-direction: column; justify-content: space-around; align-items: flex-start; height: 32px; } .sk-calendar-e2 { display: block; } } /* a narrow column wraps the eyebrow onto a second line */
.sk-calendar-headline { height: calc(34px * 1.12); margin-top: 8px; } /* .pano-headline: margin 8px 0 0, 34px/1.12 */
.sk-calendar-count { height: calc(14px * 1.4); margin-top: 2px; } /* .pano-count: margin 2px 0 0, 14px/1.4 */
/* the cards: .pano-detail[data-state="day"] .pano-sessions keeps 10px on the right; .pcards three across, one row the strip's height; a .pcard's text box is its cell */
.sk-calendar-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 22px 24px; min-width: 0; min-height: 0; padding: 0 10px 6px 0; overflow: hidden; } /* .pcards keeps 6px of padding under its row */
.sk-calendar-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: -6px -10px; padding: 6px 10px; container: sk-cal-card / inline-size; } /* .pcard: its box bleeds 6px and 10px past its text, as the real one does */
.sk-calendar-ctop { justify-content: space-between; gap: 12px; height: 16px; } /* .pcard-top 12px/16px, gap 12px */
.sk-calendar-ctitle { display: block; margin-top: 8px; } /* .pcard-title: margin-top 8px */
.sk-calendar-tl { height: 20px; } /* .pcard-title 15px/20px, two lines */
@container sk-cal-card (min-width: 480px) { .sk-calendar-tl + .sk-calendar-tl { display: none; } } /* a card as wide as a phone held sideways sets a title on one line */
.sk-calendar-cmeta { height: 16px; margin-top: auto; padding-top: 10px; } /* .pcard-meta: margin-top auto, padding-top 10px, 12px/16px */
.sk-calendar-ctags { height: 16px; margin-top: 4px; } /* .pcard-tags: margin-top 4px, 11px/16px */

/* Week: under each real day header, the day's cards (.wk-list a column, gap 6px, padding 8px; .wk-card's box, its 3px edge in grey) */
.sk-calendar-wday > .sk-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.sk-calendar-wcard { display: block; padding: 7px 8px; border-left: 3px solid var(--sk-base); border-radius: var(--r1); background: var(--sk-soft); }
.sk-calendar-wtime, .sk-calendar-wl, .sk-calendar-wmeta { display: flex; align-items: center; min-width: 0; }
.sk-calendar-wtime { height: calc(11px * 1.3); } /* .wk-card .time 11px/1.3 */
.sk-calendar-wtitle { display: block; margin-top: 2px; } /* .wk-card .title: margin-top 2px, two lines */
.sk-calendar-wl { height: calc(12px * 1.3); } /* .wk-card .title 12px/1.3 */
.sk-calendar-wmeta { height: calc(10.5px * 1.35); margin-top: 2px; } /* .wk-card .meta: margin-top 2px, 10.5px/1.35 */

/* Agenda: inside the list's own box (.mcal-agenda), day groups (.aday, a hairline under each) of rows (.mrow) */
.sk-calendar-aearly { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); background: var(--subtle); } /* .aearlier: a .btn-30 (30px) and its .fine line */
.sk-calendar-afine { display: flex; align-items: center; height: calc(11.5px * 1.4); } /* .aearlier .fine 11.5px/1.4 */
.sk-calendar-aday { border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.sk-calendar-aday:last-child { border-bottom: 0; }
.sk-calendar-ahead { display: flex; align-items: center; gap: 10px; padding: 11px 15px 6px; } /* .aday-head */
.sk-calendar-ah, .sk-calendar-atime, .sk-calendar-atitle, .sk-calendar-ameta, .sk-calendar-atags { display: flex; align-items: center; min-width: 0; }
.sk-calendar-ah { height: calc(17px * 1.2); } /* .aday-head h3 17px/1.2 */
.sk-calendar-arow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 15px; border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); } /* .mrow */
.sk-calendar-atime { height: calc(12px * 1.3); } /* .mrow .time 12px/1.3 */
.sk-calendar-abody { display: block; min-width: 0; }
.sk-calendar-atitle { height: calc(13px * 1.3); } /* .mrow .title 13px/1.3, one line */
.sk-calendar-at2 { display: none; }
.sk-calendar-ameta { height: calc(11.5px * 1.3); margin-top: 2px; } /* .mrow .meta: margin-top 2px, 11.5px/1.3 */
.sk-calendar-atags { height: 16px; } /* .tag: 10px/1 and 3px above and below */

/* Short desktop screens (app.css's own query) */
@media (min-width: 641px) and (max-height: 819px) {
  .sk-calendar-strip { margin: -14px 0; padding: 14px 0; } /* .pano-detail padding 14px 0 */
  .sk-calendar-headline { height: calc(30px * 1.12); } /* .pano-headline 30px */
  .sk-calendar-ctags { display: none; } /* .pano-sessions[data-expanded="false"] .pcard-tags */
}
/* Below 900px the strip stacks: the day over the cards */
@media (max-width: 899px) {
  .sk-calendar-strip > .sk-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 14px; } /* .pano-detail */
  .sk-calendar-day { padding-right: 0; } /* .pano-day */
}
/* Below 1180px the week's days stack, each day's cards in a row of 190px cards */
@media (max-width: 1179px) {
  .sk-calendar-wday > .sk-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; } /* .wk-list; one row of cards a day, the typical day, since each stacked day pushes the next */
}
/* Phones (app.css's phone query): the strip is the day card, its band then a row per session; a cell shows only the number */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .sk-calendar-cell { height: 18px; align-items: flex-start; } /* .pcount: its number (12px/14px) sits on the baseline of a zero-size line, which makes the box 18px */
  .sk-calendar-cell > .sk-calendar-pc { width: 14px; margin-top: 3px; } /* .pcount b, centred by .pcell */
  .sk-calendar-strip { margin: 0; padding: 0; } /* .pano-detail padding 0 */
  .sk-calendar-strip > .sk-body { display: block; height: auto; }
  .sk-calendar-day { padding: 14px 16px 13px; background: var(--subtle); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } /* .pano-day: the card's band */
  .sk-calendar-headline { height: calc(24px * 1.15); margin-top: 4px; } /* .pano-headline: margin 4px 0 0, 24px/1.15 */
  .sk-calendar-count { height: calc(13px * 1.4); margin-top: 4px; } /* .pano-count: margin 4px 0 0, 13px */
  .sk-calendar-cards { display: block; padding: 0; overflow: visible; } /* .pcards */
  .sk-calendar-card { display: grid; grid-template-columns: 74px minmax(0, 1fr) 10px; column-gap: 12px; align-items: start; min-height: 64px; margin: 0; padding: 14px 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); box-sizing: border-box; } /* .pcard */
  .sk-calendar-card:first-child { border-top: 0; }
  .sk-calendar-ctop { display: contents; } /* .pcard-top */
  .sk-calendar-time { grid-column: 1; grid-row: 1 / span 3; margin-top: 5.5px; } /* .pcard-time 13px/21px */
  .sk-calendar-n { display: none; } /* .pcard-n */
  .sk-calendar-ctitle, .sk-calendar-cmeta, .sk-calendar-ctags { grid-column: 2; }
  .sk-calendar-ctitle { margin: 0; }
  .sk-calendar-tl { height: 21px; } /* .pcard-title 15px/21px */
  .sk-calendar-cmeta { height: 17px; margin: 3px 0 0; padding: 0; } /* .pcard-meta: margin 3px 0 0, 12.5px/17px */
  .sk-calendar-ctags { height: 16px; margin: 3px 0 0; } /* .pcard-tags: margin 3px 0 0 (and, as there, still hidden on a short screen: a phone held sideways) */
  .sk-calendar-ahead { padding: 14px 16px 8px; } /* #calendar .aday-head */
  .sk-calendar-ah { height: calc(19px * 1.2); } /* #calendar .aday-head h3 19px */
  .sk-calendar-arow { grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 13px 16px; } /* #calendar .mrow */
  .sk-calendar-atime { height: 21px; } /* #calendar .mrow .time 13px/21px */
  .sk-calendar-atitle { flex-direction: column; justify-content: space-around; align-items: flex-start; height: 42px; } /* #calendar .mrow .title 15px/21px, wrapped: two lines, the typical title */
  .sk-calendar-at2 { display: block; }
  .sk-calendar-ameta { height: 17px; margin-top: 3px; } /* #calendar .mrow .meta: margin-top 3px, 12.5px/17px */
  .sk-calendar-atags { grid-column: 2; margin-top: 6px; } /* #calendar .mrow .tags */
}
/* END sk:calendar */

/* BEGIN sk:search */
/* The tray's thread rows (tray.js accountHistory, built by sk-search.js). Mirrors app.css: .hist-item { margin-top: 8px; padding: 9px 11px },
   .hist-item .t { font: 400 12.5px/1.3 } and .hist-item .s { margin-top: 3px; font: 400 11px/1.3 }, so a row is 9 + 16.25 + 3 + 14.3 + 9 = 51.55px
   and the pitch is 59.55px, as the real list. The "Your threads" eyebrow above is real, the wrapper starts where the first row's margin does. */
.sk-search { padding-top: 8px; }
.sk-th-row { padding: 9px 11px; }
.sk-th-row + .sk-th-row { margin-top: 8px; }
.sk-th-row > .sk-th-slot + .sk-th-slot { margin-top: 3px; }
.sk-th-slot { display: flex; align-items: center; width: 100%; height: var(--sh); }
/* A lot opened by its code (chat.js realSummary and realResults while the results are "loading", app.js openLotByTag): the summary's counts line,
   then the table's one row. Mirrors app.css: .summary .acounts { font: 12.5px/1.5 } (18.75px), .thead and .trow-main { grid-template-columns:
   18px minmax(0,1fr) 104px 86px 132px; gap: 10px }, .trow-main { padding: 11px 14px }, .trow { border-bottom: 1px }, .lot { gap: 9px } round its
   48px photo, .lot-title 17px/1.25, .lot-meta 12.5px/1.4 under it by 3px, .rank 12px/1, .bid and .est 13px/1; at 900px and under the estimate
   column goes (#results-real). The table's head and the Refine button are real and drawn while it waits. A lot's title is long (the index's median
   is 140 characters, where it is cut): two lines at 1470px, three at 1100px and under, so the typical row is 89.5px and 110.8px. */
.sk-search-lot { display: block; }
.sk-lc-slot { display: flex; align-items: center; width: 100%; height: var(--sh); }
.sk-lc-row { border-bottom: 1px solid var(--sk-soft); }
.sk-lc-main { display: grid; grid-template-columns: 18px minmax(0, 1fr) 104px 86px 132px; gap: 10px; align-items: center; padding: 11px 14px; }
.sk-lc-c { display: block; min-width: 0; }
.sk-lc-r .sk-lc-slot { justify-content: flex-end; }
.sk-lc-lot { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sk-lc-text { flex: 1; min-width: 0; }
.sk-lc-title { padding-bottom: 3.5px; } /* the real title row's line box with its badge (measured: 46px for two lines, 67.25px for three) */
.sk-lc-l3 { display: none; }
.sk-lc-text > .sk-lc-slot { margin-top: 3px; }
@media (max-width: 1100px) { .sk-lc-l3 { display: flex; } }
@media (max-width: 900px) { .sk-lc-main { grid-template-columns: 18px minmax(0, 1fr) 100px 84px; } .sk-lc-main > .sk-lc-est { display: none; } }
/* END sk:search */

/* BEGIN sk:discover */
/* Discover's deck (views/discover.js stageHtml, built by sk-discover.js). Mirrors app.css [G]: .g-stage { gap: 10px; padding: 12px 20px 0 }, .g-stack
   { width: min(480px, 100%) } (min(420px, 100%) from 1100px down, 100% from 560px down), the card's 1px border, .g-strip { gap: 4px; padding: 34px 14px 12px },
   .g-acts { gap: 12px; padding: 2px 0 10px } and its buttons (40px, the rewind 36px), .g-bar { gap: 8px; padding: 10px 26px 12px } over 30px controls, and
   .g-foot { font: 11.5px/1.4 }. The wrapper fills the stage like the stack and the buttons it stands for. */
.sk-discover { flex: 1; min-height: 0; align-self: stretch; display: flex; flex-direction: column; }
.sk-discover > .sk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* The first load only: the bar is not drawn yet (its row is, at the stage's top edge, which is where the bar will be) and the foot says nothing yet
   (the line it will take, 11.5px * 1.4, is left at the bottom), so the card is where it will land. */
.sk-dc-first { margin: -12px -20px calc(11.5px * 1.4); }
.sk-dc-first .sk-dc-stack { margin-top: 2px; }
.sk-dc-bar { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 10px 26px 12px; border-bottom: 1px solid var(--sk-base); }
.sk-dc-stack { position: relative; flex: 1; min-height: 0; width: min(480px, 100%); }
.sk-dc-card { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--sk-base); border-radius: var(--r1); background: var(--sk-soft); }
.sk-dc-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 34px 14px 12px; }
.sk-dc-slot { display: flex; align-items: center; width: 100%; height: var(--sh); }
.sk-dc-figures { display: flex; align-items: flex-start; gap: 16px; margin-top: 2px; }
.sk-dc-fig { display: flex; flex-direction: column; }
.sk-dc-end { align-items: flex-end; }
.sk-dc-fig .sk-dc-slot { width: auto; }
.sk-dc-comp { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 49.6px; margin-top: 2px; padding: 0 10px; border: 1px solid var(--sk-base); border-radius: var(--r1); }
.sk-dc-acts { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 0 10px; }
@media (max-width: 1100px) {
  .sk-dc-first { margin: -10px -16px calc(11.5px * 1.4); }
  .sk-dc-first .sk-dc-stack { margin-top: 0; }
  .sk-dc-bar { padding: 10px 16px 12px; }
  .sk-dc-stack { width: min(420px, 100%); }
}
@media (max-width: 560px) { .sk-dc-stack { width: 100%; } }
/* END sk:discover */

/* BEGIN sk:margins */
/* The Margin page's rows (views/margins.js stageHtml, built by sk-margins.js). The table's frame and head are real; the skeleton stands where the
   rows go. Mirrors app.css: .mg-stage-cell { padding: 0 14px } (the wrapper takes it back, the rows bring their own), .mg-row and .sc-row { gap: 10px;
   padding: 11px 14px; 1px bottom border } with their column templates, the 48px photo, and from 1100px down the narrower templates with the .drop columns
   (and the group rows' third column) gone and the lot's meta line shown. A lot row is 71px, a group row 59.05px. */
.sk-margins { margin: 0 -14px; }
.sk-m-row { display: grid; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--sk-soft); }
.sk-m-lot { grid-template-columns: 108px minmax(0, 1fr) 104px 132px 120px 96px 130px; }
.sk-m-grp { grid-template-columns: minmax(0, 1fr) 64px 96px 150px 132px 132px 24px; }
.sk-m-c { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sk-m-r { align-items: flex-end; }
.sk-m-r .sk-m-slot { justify-content: flex-end; }
.sk-m-acts { flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; } /* app.css .mg-acts */
.sk-m-slot { display: flex; align-items: center; width: 100%; height: var(--sh); }
.sk-m-lotc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-m-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sk-m-meta { display: none; }
.sk-m-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (max-width: 1100px) {
  .sk-m-lot { grid-template-columns: minmax(0, 1fr) 104px 120px 130px; }
  .sk-m-grp { grid-template-columns: minmax(0, 1fr) 56px 132px 24px; }
  .sk-m-drop { display: none; }
  .sk-m-meta { display: flex; }
}
/* END sk:margins */

/* BEGIN sk:lists */
/* Alerts, Automations, Runs (X2, 13 October 2026). Every number below is the real rule's in app.css, and test/sk-lists.test.mjs
   reads both: .c-al-rules/.c-al-rule/.c-al-log-row (1613-1629, 1745), .flows/.flow* (951-959), .c-run-* and .c-timeline
   (1709-1731, 1747-1749). A hairline is the app's ink at the real alpha (rgba(32,30,29,a) is --ink at a in light, and the page's
   own light in dark, which is what theme.js turns it into). The card is --desk, the page, as the real one is (#fff). */
.sk-lists {
  --sk-line: color-mix(in srgb, var(--ink) 10%, transparent);
  --sk-line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --sk-line-flow: color-mix(in srgb, var(--ink) 12%, transparent);
}
/* Alerts: .c-al-rules, .c-al-log (card), .c-run-table */
.sk-lists .sk-al-card { background: var(--desk); border: 1px solid var(--sk-line); border-radius: var(--r1); overflow: hidden; }
.sk-lists .sk-al-rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--sk-line-soft); }
.sk-lists .sk-al-rule:first-child { border-top: 0; }
.sk-lists .sk-al-rule-text { min-width: 0; flex: 1; }
.sk-lists .sk-al-kind { display: flex; align-items: center; height: calc(13px * 1.3); }
.sk-lists .sk-al-scope { display: flex; align-items: center; margin-top: 2px; height: calc(11.5px * 1.4); }
.sk-lists .sk-al-actions { display: flex; gap: 6px; }
.sk-lists .sk-al-log-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px 180px; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--sk-line-soft); }
.sk-lists .sk-al-log-row:first-child { border-top: 0; }
.sk-lists .sk-al-when { display: flex; align-items: center; height: calc(11.5px * 1.3); }
.sk-lists .sk-al-log-text { min-width: 0; }
.sk-lists .sk-al-note { display: flex; align-items: center; height: calc(11px * 1.4); overflow: hidden; }
/* Automations: .flows (gap 11px) > .flow */
.sk-lists .sk-flows { display: flex; flex-direction: column; gap: 11px; }
.sk-lists .sk-flow { border: 1px solid var(--sk-line-flow); border-radius: var(--r1); background: var(--desk); overflow: hidden; }
.sk-lists .sk-flow-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.sk-lists .sk-flow-name { display: flex; align-items: center; min-width: 0; height: calc(14px * 1.2); }
.sk-lists .sk-flow-last { display: flex; align-items: center; margin-left: auto; flex: none; height: 11.5px; }
.sk-lists .sk-flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 15px 14px; }
/* Runs: .c-run-table > .c-run-row, then .c-run-panel under the opened one */
.sk-lists .sk-run-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 76px 46px; align-items: center; gap: 12px; padding: 4px 14px; border-top: 1px solid var(--sk-line-soft); }
.sk-lists .sk-run-row:first-child { border-top: 0; }
.sk-lists .sk-run-main { min-width: 0; padding: 8px 0; }
.sk-lists .sk-run-q { display: flex; align-items: center; height: calc(13.5px * 1.3); }
.sk-lists .sk-run-detail { display: flex; align-items: center; margin-top: 2px; height: calc(11.5px * 1.4); }
.sk-lists .sk-run-when { display: flex; align-items: center; height: calc(11.5px * 1.3); }
.sk-lists .sk-run-units { display: flex; align-items: center; justify-content: flex-end; height: 12px; }
.sk-lists .sk-run-panel { padding: 4px 14px 16px; background: var(--subtle); border-top: 1px solid var(--sk-line-soft); }
.sk-lists .sk-run-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; }
.sk-lists .sk-run-panel-text { min-width: 0; flex: 1; }
.sk-lists .sk-run-panel-q { display: flex; align-items: center; height: calc(13px * 1.3); }
.sk-lists .sk-run-panel-meta { display: flex; align-items: center; margin-top: 2px; height: calc(11.5px * 1.4); }
.sk-lists .sk-run-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sk-lists .sk-timeline { margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--sk-line); }
.sk-lists .sk-tl-row { display: grid; grid-template-columns: 82px 128px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; position: relative; min-height: 28.3px; } /* 28.3: three baselines (11, 11.5 and 12px type) make the real row 0.3px over 5 + 18 + 5 */
.sk-lists .sk-tl-dot { position: absolute; left: -19px; top: 11px; }
.sk-lists .sk-tl-when { display: flex; align-items: center; height: calc(11px * 1.5); }
.sk-lists .sk-tl-kind { display: flex; align-items: center; height: calc(11.5px * 1.5); }
.sk-lists .sk-tl-detail { display: flex; align-items: center; height: calc(12px * 1.5); min-width: 0; }
@media (max-width: 1100px) {
  .sk-lists .sk-al-log-row { grid-template-columns: 84px minmax(0, 1fr) 84px; }
  .sk-lists .sk-al-note { display: none; }
  .sk-lists .sk-tl-row { grid-template-columns: 74px minmax(0, 1fr); }
  .sk-lists .sk-tl-kind { grid-column: 2; }
  .sk-lists .sk-tl-detail { grid-column: 2; }
}
/* A refresh keeps what is on screen and dims it, as the Calendar's does (.cal-body.loading): the same .55. */
.sk-lists-busy { opacity: .55; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .sk-lists-busy { transition: none; } }
/* END sk:lists */

/* BEGIN sk:settings */
/* The Settings panel's tabs that wait on the API (X2, 13 October 2026). Every number is the real rule's in app.css, and
   test/sk-settings.test.mjs reads both: .set-group/.set-row (987-989), .a-note and .su-* (2352-2384), .bb-* (R118, 2612-2644) and .u-h (2655-2656),
   .u-* (2412-2427), .cu-* (2750-2766, 2996-2999), the settings-keys.js rules (its own STYLE). The panel's cards are
   --sheet-card (a step above the panel in dark, where it is the same grey as --fill), so the shapes here are drawn from the
   page's ink over that card, not from --fill: the same 12% (bars) and 5% (large blocks) in both themes. A hairline is the
   app's ink at the real alpha, as in the lists' block. */
.sk-settings {
  --sk-card: var(--sheet-card, var(--desk));
  --sk-base: color-mix(in srgb, var(--ink) 12%, var(--sk-card));
  --sk-soft: color-mix(in srgb, var(--ink) 5%, var(--sk-card));
  --sk-line: color-mix(in srgb, var(--ink) 10%, transparent);
  --sk-line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --sk-line-card: color-mix(in srgb, var(--ink) 12%, transparent);
}
/* the card and its rows: .set-group, .set-row (.c-set-ctl: gap 12px), .a-note */
.sk-settings .sk-set-group { margin-top: 12px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--sk-card); overflow: hidden; }
.sk-settings .sk-set-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--sk-line-soft); }
.sk-settings .sk-set-ctl { gap: 12px; }
.sk-settings .sk-set-label { display: flex; align-items: center; flex: 1; min-width: 0; height: calc(13.5px * 1.35); }
.sk-settings .sk-set-anote { margin: -6px 0 0; padding: 0 16px 12px; }
.sk-settings .sk-set-anote-line { display: flex; align-items: center; height: calc(11.5px * 1.45); }
.sk-settings .sk-set-note { margin: 11px 2px 0; }
.sk-settings .sk-set-note-line { display: flex; align-items: center; height: calc(11.5px * 1.5); }
/* Set up: .su-cards, .su-card, .su-step, .su-sub, .su-body, .su-line, .su-finish */
.sk-settings .sk-set-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 18px; }
.sk-settings .sk-set-card { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--sk-card); }
.sk-settings .sk-set-step { display: flex; align-items: center; height: 9.5px; }
.sk-settings .sk-set-title { display: flex; align-items: center; margin-top: 7px; height: calc(14px * 1.3); }
.sk-settings .sk-set-sub { margin: 3px 0 10px; }
.sk-settings .sk-set-sub-line { display: flex; align-items: center; height: calc(12.5px * 1.45); }
.sk-settings .sk-set-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-settings .sk-set-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sk-settings .sk-set-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.sk-settings .sk-set-line-label { display: flex; align-items: center; height: calc(12.5px * 1.3); }
.sk-settings .sk-set-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sk-settings .sk-set-input { flex: 1 1 150px; width: auto; min-width: 0; max-width: 300px; } /* .su-input */
.sk-settings .sk-set-money { flex: 1 1 150px; width: auto; min-width: 0; max-width: 220px; } /* .su-money */
.sk-settings .sk-set-foot { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.sk-settings .sk-set-hint { display: flex; align-items: center; margin: -4px 0 0; height: calc(11.5px * 1.4); }
.sk-settings .sk-set-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.sk-settings .sk-set-finish-sub { display: flex; align-items: center; height: calc(12.5px * 1.45); }
/* Customise: .cu-preview, .cu-orb, .cu-who, .cu-work, .cu-grid, .cu-card, .cu-team, .cu-teams */
.sk-settings .sk-set-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 18px; padding: 16px 20px 16px 16px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--sk-card); }
.sk-settings .sk-set-orb { background: var(--sk-soft); }
.sk-settings .sk-set-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-settings .sk-set-eyebrow { display: flex; align-items: center; height: 9.5px; margin-bottom: 5px; }
.sk-settings .sk-set-who-name { display: flex; align-items: center; height: calc(26px * 1.1); }
.sk-settings .sk-set-who-kind { display: flex; align-items: center; height: calc(13px * 1.4); }
.sk-settings .sk-set-work { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-left: auto; min-width: 0; }
.sk-settings .sk-set-cap { display: flex; align-items: center; height: calc(12px * 1.45); }
.sk-settings .sk-set-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(132px, calc((100% - 30px) / 4)), 1fr)); gap: 10px; margin-top: 12px; }
.sk-settings .sk-set-mark { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 14px 8px 13px; border: 1.5px solid var(--sk-line-card); border-radius: var(--r1); background: var(--sk-card); }
.sk-settings .sk-set-mark .sk-set-orb { margin-bottom: 10px; }
.sk-settings .sk-set-mark-name { display: flex; align-items: center; height: calc(13.5px * 1.3); }
.sk-settings .sk-set-mark-kind { display: flex; align-items: center; margin-top: 2px; height: calc(12px * 1.3); }
.sk-settings .sk-set-team { margin-top: 26px; }
.sk-settings .sk-set-team-eyebrow { display: flex; align-items: center; height: calc(13.5px * 1.5); } /* the real .eyebrow is an inline span: its line is the body's, 13.5px type at 1.5 */
.sk-settings .sk-set-team .sk-set-cap { margin: 4px 0 0; }
.sk-settings .sk-set-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Billing (R118, 14 October 2026): .bb-sum with its .bb-sum-f, .bb-k and .bb-v; the "Plans" heading (.u-h: it comes after .bb-h in app.css, so its 22px is the margin that applies, not the 28px
   .bb-h asks for); .bb-pricing with .bb-plans > .bb-plan (.bb-plan-name, .bb-plan-price) and .bb-inc (its h4, ul and li). The strip, the rows and the panel are R118's own boxes: --subtle under the
   strip and --desk (the #fff theme.js recolours) under the rows and the panel, so their bars are drawn from the ink over that ground. Their corners are --r2 (14px) in app.css and --r1 here:
   this sheet's one radius (test/skeleton.test.mjs pins it), so the day it allows --r2 these three rules are the ones to change. */
.sk-settings .sk-set-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--subtle); --sk-base: color-mix(in srgb, var(--ink) 12%, var(--subtle)); }
.sk-settings .sk-set-sum-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-settings .sk-set-k { display: flex; align-items: center; height: calc(11.5px * 1.3); }
.sk-settings .sk-set-v { display: flex; align-items: center; height: calc(13.5px * 1.3); }
.sk-settings .sk-set-vpill { height: calc(11px * 1.3 + 4px); } /* the status is a .bb-pill (11px at 1.3 and 2px above and below: 18.3px), which fills .bb-v's line, measured in Instrument Sans */
.sk-settings .sk-set-h { display: flex; align-items: center; margin: 22px 2px 0; height: calc(14px * 1.3); }
.sk-settings .sk-set-pricing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; align-items: start; }
@media (max-width: 760px) { .sk-settings .sk-set-pricing { grid-template-columns: minmax(0, 1fr); } }
.sk-settings .sk-set-plans { display: flex; flex-direction: column; gap: 10px; }
.sk-settings .sk-set-plan { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--sk-line-card); border-radius: var(--r1); background: var(--desk); --sk-base: color-mix(in srgb, var(--ink) 12%, var(--desk)); }
.sk-settings .sk-set-plan-name { display: flex; align-items: center; height: calc(14px * 1.3); }
.sk-settings .sk-set-plan-price { display: flex; align-items: center; margin-left: auto; height: calc(17px * 1.2); }
.sk-settings .sk-set-inc { padding: 16px 18px; border: 1px solid var(--sk-line-card); border-radius: var(--r1); background: var(--desk); --sk-base: color-mix(in srgb, var(--ink) 12%, var(--desk)); }
.sk-settings .sk-set-inc-h { display: flex; align-items: center; margin: 0 0 8px; height: calc(13px * 1.3); }
.sk-settings .sk-set-inc-list { margin: 0 0 14px; }
.sk-settings .sk-set-inc-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--sk-line-soft); }
.sk-settings .sk-set-inc-row:first-child { border-top: 0; }
.sk-settings .sk-set-inc-line { display: flex; align-items: center; height: calc(12.5px * 1.4); }
/* Usage: .u-tiles, .u-tile, .u-card, .u-legend, .u-chart (200px), .u-days */
.sk-settings .sk-set-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-top: 18px; }
.sk-settings .sk-set-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--sk-card); }
.sk-settings .sk-set-tile-main { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.sk-settings .sk-set-ring { background: var(--sk-soft); }
.sk-settings .sk-set-tile-value { display: flex; align-items: center; height: calc(22px * 1.1); }
.sk-settings .sk-set-tile-label { display: flex; align-items: center; height: calc(12.5px * 1.3); }
.sk-settings .sk-set-tile-sub-line { display: flex; align-items: center; height: calc(11.5px * 1.4); }
.sk-settings .sk-set-ucard { min-width: 0; margin-top: 12px; padding: 16px 16px 12px; border: 1px solid var(--sk-line); border-radius: var(--r1); background: var(--sk-card); }
.sk-settings .sk-set-ucard-title { display: flex; align-items: center; height: calc(14px * 1.3); }
.sk-settings .sk-set-ucard-sub { margin: 4px 0 0; }
.sk-settings .sk-set-ucard-sub-line { display: flex; align-items: center; height: calc(12.5px * 1.5); }
.sk-settings .sk-set-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 2px; height: calc(12px * 1.3); }
.sk-settings .sk-set-chart { margin-top: 6px; height: 200px; }
.sk-settings .sk-set-days { display: flex; align-items: center; margin-top: 8px; height: 24.8px; }
/* API keys: the create row (.sk-create .set-row: gap 10px), the list (.sk-item: top-aligned, 13.5px name, 12px meta 3px under), the notes */
.sk-settings .sk-set-keyform { gap: 10px; }
.sk-settings .sk-set-key-input { flex: 1; width: auto; min-width: 0; } /* .sk-create input */
.sk-settings .sk-set-key { align-items: flex-start; }
.sk-settings .sk-set-key-main { flex: 1; min-width: 0; }
.sk-settings .sk-set-key-name { display: flex; align-items: center; height: calc(13.5px * 1.35); }
.sk-settings .sk-set-key-meta { display: flex; align-items: center; margin-top: 3px; height: calc(12px * 1.45); }
.sk-settings .sk-set-key-badge { margin-top: 1px; }
.sk-settings .sk-set-pre { margin: 6px 0 4px; }
/* END sk:settings */

/* BEGIN sk:public */
/* The older public pages (home.html, account.html, calendar.html) load the root sheet styles.css, which has no dark theme and no --fill or
   --desk, so the shapes take their colour from the page's own tokens (--ink, --white, --cream-2, --line) and follow the page. Its --r1 is the
   same 3px. It has no .sr-only either, so the screen-reader label is hidden here. Every number below is styles.css's number for the thing
   the shapes stand in for, written beside it; test/sk-public.test.mjs reads both sheets and keeps them equal. */
.sk-public {
  --sk-base: color-mix(in srgb, var(--ink) 9%, transparent);
  --sk-soft: color-mix(in srgb, var(--ink) 5.5%, transparent);
}
.sk-public .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* home: #spotlight-list is a 4-column grid of .spotlight-card, a scroller under 1000px; the wrapper spans four of its columns, so both lay out alike */
.sk-public-spot-wrap { grid-column: 1 / span 4; min-width: 0; }
.sk-public-spot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.sk-public-spot-card {
  min-width: 0; min-height: 285px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r1);
  background: color-mix(in srgb, var(--white) 70%, transparent); box-shadow: 0 16px 45px color-mix(in srgb, var(--ink) 5%, transparent);
}
.sk-public-spot-icon { width: 44px; height: 44px; margin-bottom: 28px; }
.sk-public-spot-cat { height: 14px; margin-bottom: 8px; display: flex; align-items: center; }
.sk-public-spot-title { height: calc(3.2 * 17px); padding-top: 3px; display: flex; flex-direction: column; gap: 5px; }
.sk-public-spot-line { height: 15.5px; margin-top: 10px; display: flex; align-items: center; }
.sk-public-spot-link { height: 18.2px; margin-top: 18px; display: flex; align-items: center; }

/* account: #signed is 980px wide at most, 50px below the form deck; .account-grid is two columns, one under 900px; each .card is padded 20px */
.sk-public-acct-wrap { max-width: 980px; margin: 50px auto 0; }
.sk-public-acct-lede { max-width: 760px; height: 29.45px; display: flex; align-items: center; gap: 10px; }
.sk-public-acct-pill { width: 46px; height: 24.6px; }
.sk-public-acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sk-public-acct-card {
  min-width: 0; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--white); box-shadow: 0 10px 35px color-mix(in srgb, var(--ink) 5%, transparent);
}
.sk-public-acct-head { height: 34.1px; margin-bottom: 8px; display: flex; align-items: center; }
.sk-public-acct-line { height: 23.25px; margin: 15px 0; display: flex; align-items: center; }
.sk-public-acct-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-public-acct-cta { width: var(--w); height: 37px; }
.sk-public-acct-note { height: 21.7px; margin-top: 10px; display: flex; align-items: center; }
.sk-public-acct-saved { padding-top: 21.7px; }
.sk-public-acct-row {
  min-height: 69px; padding: 10px 12px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: var(--r1);
  display: grid; gap: 14px; align-items: center;
}
.sk-public-acct-saved-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
.sk-public-acct-search-row { grid-template-columns: minmax(0, 1fr) auto; }
.sk-public-acct-text { min-width: 0; }
.sk-public-acct-title { height: 17.55px; display: flex; align-items: center; }
.sk-public-acct-meta { height: 15.5px; margin-top: 4px; display: flex; align-items: center; }
.sk-public-acct-btn { width: var(--w); height: 26px; }
.sk-public-acct-more { display: none; }
@media (max-width: 900px) { .sk-public-acct-grid { grid-template-columns: 1fr; } .sk-public-acct-title + .sk-public-acct-title { display: none; } }
@media (max-width: 800px) { .sk-public-acct-row { padding: 10px 8px; } }
@media (max-width: 520px) { .sk-public-acct-more { display: flex; } .sk-public-acct-title + .sk-public-acct-title { display: flex; } .sk-public-acct-saved-row { min-height: 127px; } }

/* calendar: .month-grid is seven columns 8px apart; a .cell is 112px high and padded 12px, its day number 22px, its count a 28px pill */
.sk-public-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sk-public-cal-dow { height: 35.5px; padding: 10px 4px; display: flex; align-items: center; justify-content: center; }
.sk-public-cal-dow-bar { width: 26px; height: 8px; }
.sk-public-cal-cell {
  min-height: 112px; padding: 12px; border-radius: var(--r1); box-shadow: inset 0 0 0 1px var(--line);
  background: color-mix(in srgb, var(--white) 80%, transparent); display: flex; flex-direction: column; justify-content: space-between; gap: 3px;
}
.sk-public-cal-other { background: color-mix(in srgb, var(--cream-2) 45%, transparent); box-shadow: none; }
.sk-public-cal-num { width: 24px; height: 16px; margin: 9px 0; }
.sk-public-cal-n { align-self: flex-end; width: 28px; height: 21.5px; }
@media (max-width: 1000px) { .sk-public-spot-card { scroll-snap-align: start; } }
@media (max-width: 900px) {
  .sk-public-cal-cell { min-height: 72px; padding: 8px; }
  .sk-public-cal-num { width: 17px; height: 11px; margin: 7px 0; }
}
@media (max-width: 760px) {
  .sk-public-spot-card { min-height: 275px; }
  .sk-public-cal { gap: 3px; }
  .sk-public-cal-dow { height: 26.4px; padding: 7px 1px; }
  .sk-public-cal-dow-bar { width: 19px; height: 6px; }
  .sk-public-cal-cell { min-height: 66px; padding: 6px; }
  .sk-public-cal-n { width: 21px; height: 16.4px; }
}
/* END sk:public */

/* BEGIN sk:house */
/* An auction house's page (views/house.js, built by sk-house.js), its whole page while the house is read: mirrors app.css's
   .hs (16px between blocks), .hs-hd, the About tile (.hs-about.nophotos: the prose beside the 330px glance), the sale rows
   (.hs-sale: 46px, the same five columns, and from 1000px down the title over the facts), the lot cards (.hs-lot: the
   160 by 120 stage, then the ledger) in three columns, two from 1180px and one from 860px, and the chart's 160px of bars. */
.sk-house .sk-body { display: flex; flex-direction: column; gap: 16px; }
.sk-h-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sk-h-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.sk-h-idt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sk-h-line { display: flex; align-items: flex-end; gap: 12px; }
.sk-h-acts { display: flex; gap: 8px; }
.sk-h-tile { border: 1px solid var(--sk-soft); border-radius: var(--r1); }
.sk-h-about { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0 32px; padding: 18px 20px 16px; }
.sk-h-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-h-glance { gap: 14px; padding-top: 2px; }
.sk-h-kv { display: flex; gap: 12px; }
.sk-h-gap { margin-top: 14px; }
.sk-h-sales { overflow: hidden; }
.sk-h-sales-head { display: flex; justify-content: space-between; padding: 16px 14px 12px; }
.sk-h-sale { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px 110px auto; align-items: center; gap: 0 16px; min-height: 46px; padding: 7px 14px; border-top: 1px solid var(--sk-soft); }
.sk-h-facts { display: contents; }
.sk-h-sale-acts { display: flex; justify-content: flex-end; gap: 6px; }
.sk-h-lots-sec { display: flex; flex-direction: column; gap: 12px; }
.sk-h-lots-head { display: flex; justify-content: space-between; padding: 6px 0 0; }
.sk-h-lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sk-h-lot { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0 14px; padding: 12px; border: 1px solid var(--sk-soft); border-radius: var(--r1); }
.sk-h-ph { grid-row: 1 / span 3; }
.sk-h-lot-text { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.sk-h-where { align-self: end; }
.sk-h-led { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 205fr) minmax(0, 306fr); margin-top: 10px; border: 1px solid var(--sk-soft); border-radius: var(--r1); }
.sk-h-led > div { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 9px; }
.sk-h-chart { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
.sk-h-chart-head { display: flex; justify-content: space-between; }
.sk-h-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 22px; border-bottom: 1px solid var(--sk-soft); }
@media (max-width: 1180px) { .sk-h-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-h-about { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 1000px) {
  .sk-h-about { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .sk-h-sale { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title acts" "facts acts"; row-gap: 4px; padding: 9px 14px; }
  .sk-h-sale > .sk:first-child { grid-area: title; }
  .sk-h-facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .sk-h-sale-acts { grid-area: acts; }
}
@media (max-width: 860px) { .sk-h-lots { grid-template-columns: minmax(0, 1fr); } }
/* and on a phone, as app.css's: a sale's row stacked, a standout's photo 120 by 90, and the name's line wrapping as the name does */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .sk-h-sale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "facts" "acts"; row-gap: 6px; padding: 12px 14px; }
  .sk-h-sale-acts { justify-content: flex-start; }
  .sk-h-lot { grid-template-columns: 120px minmax(0, 1fr); }
  .sk-house .sk-h-ph { width: 120px; height: 90px; }
  .sk-h-line { flex-wrap: wrap; }
}
/* END sk:house */