/* rmedia-barber — the week grid. One 15-minute row is --row tall; everything else is
   calc()'d off it, so a pinch rescales the whole grid without a re-render. */

.cal {
  --row: 18px;              /* one 15-minute row — set inline, changed by pinch */
  --rail: var(--cal-rail);
  --grid-line: var(--cal-line);      /* quarter-hour rule */
  --grid-hour: var(--cal-hour);      /* the hour rule is stronger, or nothing reads as an hour */
  --col-bg: var(--cal-work);         /* working hours */
  --col-off: var(--cal-off);         /* closed hours, lunch, days off — shaded, still ruled */
  --col-none: var(--cal-none);       /* a barber with no hours at all that day */
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--tbh));
}

/* the barber name row — exactly what the references show: avatar, name, nothing else */
.whorow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 12px; background: var(--paper-0); border-bottom: 1px solid var(--line);
  flex: 0 0 auto; color: var(--ink-900); font-size: 16px;
}
.whorow .ava { width: 32px; height: 32px; font-size: 13px; }

.calscroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 88px; overscroll-behavior-x: contain; scrollbar-gutter: stable;
  /* one finger scrolls both ways natively; two fingers belong to us, not to page zoom */
  touch-action: pan-x pan-y; }
/* The reference reserves ~8px for the scrollbar, not the platform's 15, and a whole 7px of
   column width per week rides on that. DESKTOP ONLY: styling ::-webkit-scrollbar on a phone
   turns its overlay scrollbar into a permanently visible classic one. */
@media (min-width: 1024px) {
  .calscroll::-webkit-scrollbar { width: var(--cal-bar); height: var(--cal-bar); }
  .calscroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .calscroll::-webkit-scrollbar-track { background: transparent; }
}
.calgrid { display: grid; grid-template-columns: var(--rail) repeat(7, minmax(44px, 1fr));
  min-width: 100%; }

/* day header */
.dhead {
  position: sticky; top: var(--cal-whorow); z-index: 6; background: var(--cal-chrome);
  border-bottom: 1px solid var(--grid-line); border-left: 1px solid var(--grid-line);
  padding: 6px 2px 7px; text-align: center; color: var(--ink-500); cursor: pointer;
}
.dhead .n { font-size: 25px; font-weight: 400; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dhead .w { font-size: 12px; }
.dhead.today { background: #2e6f80; color: #fff; }
.dhead.today .n { color: #fff; }
.dhead.corner { border-left: 0; position: sticky; left: 0; z-index: 7; cursor: default;
  background: var(--cal-chrome); }

/* time rail */
.rail { position: sticky; left: 0; z-index: 5; background: var(--paper-50);
  border-right: 1px solid var(--grid-line); }
.rail .lab {
  height: var(--row); font-size: 11px; color: var(--ink-500); text-align: right;
  padding-right: 5px; font-variant-numeric: tabular-nums; line-height: var(--row);
  overflow: hidden;
}
.rail .lab.hr { font-size: 10.5px; color: var(--ink-500); white-space: nowrap; }

/* columns */
.daycol { position: relative; background: var(--col-bg); --grid-h: var(--row); --grid-w: 100%; }
/* THE GRID, DRAWN ONCE. The calendar column paints it as an overlay (so shading a closed
   hour can never delete a rule) and the sign-in surface paints it as its own background.
   Both feed the same two custom properties and read the same two line colours, so there is
   exactly one place to change what a grid line looks like. */
.daycol::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* Only the PAINT is shared. Sharing the box as well let week.css's `inset: 0` overwrite
   the surface's own left/top from app.css, and the two grids drifted 4px apart. */
.daycol::after, #surface {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--grid-h) * 4 - 1px),
      var(--cal-hour) calc(var(--grid-h) * 4 - 1px) calc(var(--grid-h) * 4)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--grid-h) - 1px),
      var(--cal-line) calc(var(--grid-h) - 1px) var(--grid-h)),
    repeating-linear-gradient(to right, var(--cal-line) 0 1px, transparent 1px var(--grid-w));
}
.daycol.off { background: var(--col-off); }
/* closed hours + lunch: a darker ground, lines still on top */
.daycol .closed { position: absolute; left: 0; right: 0; z-index: 0; background: var(--col-off); }
.apt, .nowline { z-index: 2; }

/* appointment block */
.apt {
  position: absolute; left: 0; right: 0; overflow: hidden; cursor: pointer;
  border: 0; border-radius: 0; padding: 2px 4px 6px 12px; text-align: left;
  font: inherit; line-height: 1.15; color: #fff; user-select: none;
  background: var(--b-bg);
  /* A block is lit from above: the top edge is a hairline of light, the other three stay
     dark so neighbours still separate. The old dark top inset read as a line ON the block. */
  box-shadow: inset -1px 0 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
/* Mouse only. On a touch screen :hover sticks after a tap, so a tapped block would stay
   scaled up over its neighbours until something else was tapped. */
@media (hover: hover) and (pointer: fine) {
  .apt { transition: filter 140ms ease-out, transform 140ms ease-out, box-shadow 140ms ease-out; }
  .apt:hover {
    /* Grows right and up/down, never LEFT. A Day-view block is the full 577px column and
       scaling about its centre pushed it 14px over the hour rail, hiding the times. */
    filter: brightness(1.08); transform: scale(1.05); transform-origin: left center;
    z-index: 12;                       /* above its neighbours AND above the column edge */
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .22);
  }
  .ghost:hover { filter: brightness(1.08); transform: scale(1.05); z-index: 3; }
  /* An empty slot answers the cursor with weight, not colour: a hair darker and ~5px bigger,
     so the grid feels alive without implying the slot has a state. One element that follows
     the pointer, not 420 slot divs. */
  .slothint {
    position: absolute; z-index: 6; pointer-events: none; border-radius: 4px;
    display: grid; place-items: center; overflow: hidden;
    color: var(--ink-500); font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: rgba(0, 0, 0, .012);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .06);
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    transform: scale(1.04);
  }
  .slothint[hidden] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .slothint { transition: none; transform: none; } }
/* 4px status bar down the LEFT edge — the bar-vs-fill rule made physical.
   The inset stroke used to run BETWEEN the bar and the block edge, which read as a 2-3px
   outline around the bar. The stroke is now inset on three sides only (a left border would
   sit on top of the bar), so the bar is literally the first 4px of the block. */
.apt::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--b-bar, var(--b-bg));
  border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* the resize grip Vagaro puts at the bottom edge of every block */
.apt .grip {
  position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: -8px;
  border-radius: 1px; background: rgba(255, 255, 255, .45);
}
.apt .hd { position: absolute; right: 3px; bottom: 3px; display: flex; align-items: center; gap: 3px; }
.apt .code {
  display: inline-flex; align-items: center; background: #333; color: #fff;
  border-radius: 2px; padding: 0 3px; font-size: 11px; font-weight: 600; line-height: 15px;
}
.apt .src { display: grid; place-items: center; flex: 0 0 auto; width: 13px; height: 13px; color: #fff; }
.apt .src .icon { width: 13px; height: 13px; stroke-width: 2; }
.apt .nm { font-size: 15px; font-weight: 600; line-height: 18px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apt .sv { font-size: 12px; font-weight: 500; color: #fff; opacity: .92; line-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apt.short .nm, .apt.tiny .nm { -webkit-line-clamp: 1; }
.apt.tiny { padding-top: 0; }
.apt.tiny .nm { font-size: 13px; line-height: 15px; }
.apt.tiny .grip, .apt.short .grip { display: none; }
.apt .pop {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px;
  border-radius: 3px; background: #f0d9a8; color: #24160f; font-size: 10px; font-weight: 800;
  vertical-align: 1px;
}

/* Bar-vs-fill (VAGARO-TEARDOWN §1.2): the service CATEGORY fills the block; the left bar
   carries one story only — has this client confirmed, and did they turn up (Grady,
   2026-09-04). Nothing has happened yet = no bar at all, so a bar always means something. */
.apt { --b-bar: transparent; }
.apt[data-s="awaiting"]  { --b-bar: #e0b52c; }   /* reminder sent, no reply yet */
.apt[data-s="confirmed"] { --b-bar: #e8577f; }   /* the client texted back */
.apt[data-s="no_show"]   { --b-bar: #d5372b; }   /* staff marked them absent */
.apt[data-s="done"]      { --b-bar: #9aa1ab; }   /* checked out */
.apt[data-cat]           { background: var(--b-cat); }
.apt[data-cat="mens"]    { --b-cat: var(--cat-mens); }
.apt[data-cat="kids"]    { --b-cat: var(--cat-kids); }
.apt[data-cat="combo"]   { --b-cat: var(--cat-combo); }
.apt[data-cat="womens"]  { --b-cat: var(--cat-womens); }
.apt[data-cat="other"]   { --b-cat: var(--cat-other); }
@media (max-width: 1023px) {
  .apt.checkedout::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: rgba(214, 218, 224, .8); z-index: 2;
  }
}
.apt .pop {
  display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 4px;
  border-radius: 3px; background: #f0d9a8; color: #24160f; font-size: 10px; font-weight: 800;
  vertical-align: 1px;
}

/* status colours — ours, mapped to the same roles their grid uses */
/* QA-W11: #3d7ab8 on white is 4.49:1 — under AA by a hundredth, and as the Men's cuts
   fill it is most of a real day rather than a subset of statuses. #3a76b3 is 4.77:1. */
.apt[data-s="booked"]    { --b-bg: #1674df; }
.apt[data-s="confirmed"] { --b-bg: #f0c419; }
/* Vagaro puts DARK text on its yellow blocks and white on every other colour, and it is
   right to: white on #b08c22 is 3.18:1, dark ink on it is 8.6:1. The rule is the colour,
   not the theme — a yellow block is dark-on-light in both. */
.apt[data-cat="kids"] .nm, .apt[data-cat="kids"] .sv,
.apt:not([data-cat])[data-s="confirmed"] .nm,
.apt:not([data-cat])[data-s="confirmed"] .sv { color: #241c05; }
.apt[data-cat="kids"] .sv, .apt[data-cat="womens"] .sv, .apt[data-cat="other"] .sv, .apt:not([data-cat])[data-s="confirmed"] .sv { opacity: .78; }
.apt[data-cat="kids"] .code, .apt[data-cat="womens"] .code, .apt[data-cat="other"] .code, .apt:not([data-cat])[data-s="confirmed"] .code {
  background: rgba(0,0,0,.3); color: #241c05; }
.apt[data-cat="kids"] .src, .apt:not([data-cat])[data-s="confirmed"] .src { color: #241c05; }
.apt[data-cat="womens"] .nm, .apt[data-cat="womens"] .sv, .apt[data-cat="womens"] .src,
.apt[data-cat="other"] .nm, .apt[data-cat="other"] .sv, .apt[data-cat="other"] .src { color: #101010; }
.apt[data-s="awaiting"] { --b-bg: #8d7a2e; }
.apt[data-s="no_show"] { --b-bg: #8a4038; }
.apt[data-s="started"]   { --b-bg: #12844f; }
.apt[data-s="done"]      { --b-bg: #3a4a5a; color: #cfd6de; }
.apt[data-s="no_show"]   { --b-bg: #8a4038; }
.apt[data-k="personal"]  { --b-bg: var(--cat-personal); color: #fff; }
.apt[data-k="personal"] .sv { color: rgba(255,255,255,.8); }
.apt[data-k="personal"] .code { background: rgba(0,0,0,.35); color: #fff; }
.apt[data-k="walkin"]    { --b-bg: #5560d8; }

.nowline { position: absolute; left: 0; right: 0; height: 2px; background: #e2705f; z-index: 3; }
.nowline::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: #e2705f; }

/* day list */
.dayhead { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; color: var(--ink-500);
  font-size: 13px; }
.dayhead b { color: var(--ink-900); font-size: 15px; }

/* week/day change slides in the direction of travel */
.slide-left  { animation: slidein-l 180ms var(--ease, ease-out); }
.slide-right { animation: slidein-r 180ms var(--ease, ease-out); }
@keyframes slidein-l { from { transform: translateX(9%); opacity: .35; } }
@keyframes slidein-r { from { transform: translateX(-9%); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .slide-left, .slide-right { animation: none; } }

/* ---------- desktop: the same page, given room ---------- */
@media (max-width: 899px) {
  /* Phone blocks are a different animal from desktop ones (Grady's phone reference):
     rounded, separated by a real gutter, with the status as a thin strip along the TOP
     instead of a bar down the left, and the chip at the top-left above the name. */
  /* Measured off the reference: its hour rail is 56 CSS px and its day columns are 54.9.
     Ours was 44, which made the columns 56 — every column landed ~2px left of where the
     reference puts it, compounding to 14px by Saturday. At 56 the arithmetic matches:
     (440 - 56) / 7 = 54.86. */
  .cal { --apt-gap: 4px; }
  .apt {
    left: 2px; right: 2px; padding: 5px 6px 0; border-radius: 6px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .apt::after {                       /* the left bar becomes a top strip */
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px;
    border-radius: 6px 6px 0 0;
    background: color-mix(in srgb, var(--b-bar, var(--b-bg)) 70%, #fff);
  }
  .apt .hd {                          /* chip and source glyph, top-left, above the name */
    position: static; align-self: flex-start; margin-bottom: 1px;
    flex-direction: row-reverse; gap: 4px;
  }
  .apt .code { flex: 0 0 auto; font-size: 10px; line-height: 13px; padding: 0 3px;
    border-radius: 3px; }
  /* The name is the one thing that must survive max zoom-out, so it wraps rather than
     truncating and keeps its size even in a short block. */
  .apt .nm { font-size: 15px; line-height: 16px; -webkit-line-clamp: 2;
    overflow-wrap: break-word; }   /* break a long name, never cut it */
  .apt.short .nm { -webkit-line-clamp: 2; }
  .apt.tiny .nm { font-size: 14px; line-height: 16px; -webkit-line-clamp: 2; }
  .apt.tiny .hd { display: none; }    /* the chip goes before the name does */
  .apt .sv { font-size: 12px; }
  .apt .grip { display: none; }       /* resize is a long-press on the phone, not a handle */
}

@media (min-width: 900px) {
  .calgrid { grid-template-columns: var(--rail) repeat(7, minmax(0, 1fr)); }
  .calscroll { padding-bottom: 24px; }
  .rail .lab { font-size: 12px; padding-right: 10px; }
  .rail .lab.hr { font-size: 13px; color: var(--ink-500); font-weight: 600; }
  .dhead { padding: 10px 4px 12px; }
  .dhead .n { font-size: 30px; }
  .dhead .w { font-size: 13px; }
  .apt { left: 2px; right: 2px; padding: 2px 6px 0; border-radius: 3px; }
  .apt .nm { font-size: 13px; }
  .apt .sv { font-size: 12px; }
  .apt .code { font-size: 10.5px; line-height: 15px; padding: 0 4px; }
  .barberbar { padding: 10px 16px; gap: 8px; }
}

/* ---------- desktop blocks (reference: a14, measured x1.28) ----------
   Full column width, no radius, no margin; padding left 12 (clears the 4px bar), right 4,
   bottom 6. Name 15/600 on an 18px line, service 12/500 — their numbers, not ours. */
@media (min-width: 1024px) {
  .apt { left: 0; right: 0; padding: 2px 4px 6px 12px; border-radius: 0; }
  .apt .hd { position: absolute; right: 4px; bottom: 3px; height: auto; gap: 3px; }
  .apt .nm { margin: 0; font-size: 15px; font-weight: 600; line-height: 18px;
    -webkit-line-clamp: 1; }
  .apt .sv { font-size: 12px; font-weight: 500; line-height: 15px; }
  .apt.tiny { padding-left: 12px; }
  .apt.tiny .nm { font-size: 15px; line-height: 18px; }
  .apt.tiny .hd { display: flex; }
  .whorow { font-size: 17px; padding: 10px 12px; }
  .whocell { padding: 12px 8px; font-size: 15px; font-weight: 400; }
  .whocell .ava { width: 34px; height: 34px; font-size: 13px; }
  /* reference reads "Sun 30" on one line in a 35px band */
  .dhead { padding: 7px 4px; display: flex; flex-direction: row-reverse;
    align-items: baseline; justify-content: center; gap: 5px; }
  .dhead .n, .dhead .w { font-size: 15px; font-weight: 500; line-height: 20px; }
  .dhead.today { background: #2e6f80; }
}


/* ---------- one barber block of columns per checked employee (refs a15 / a16) ---------- */
.whorow-grid { display: grid; grid-template-columns: inherit; grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 8; height: var(--cal-whorow); background: var(--cal-chrome);
  border-bottom: 1px solid var(--grid-hour); }
.whocell { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 8px; font-size: 15px; color: var(--cal-ink);
  border-left: 1px solid var(--grid-hour); min-width: 0; }
.whocell.corner { border-left: 0; position: sticky; left: 0; background: var(--cal-chrome); }
.whocell .ava { width: 26px; height: 26px; font-size: 11px; }
.whocell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal.multi .dhead { border-left: 1px solid var(--grid-line); }
/* the barber block boundary is heavier than the day boundary */
.cal.multi .daycol.groupstart, .cal.multi .dhead.groupstart { border-left: 2px solid var(--grid-hour); }
.cal.day .daycol.nohours { background: var(--col-none); }
.daycol.nohours::after { opacity: .35; }

/* Day view: the barber row IS the header, exactly as ref a16 has it */
.cal.day .dhead { display: none; }
.cal.day .whorow-grid { border-bottom: 1px solid var(--grid-hour); }

/* ---------- dragging (VAGARO-BEHAVIOR §4) ---------- */
.apt { touch-action: none; }              /* the grid owns the gesture, not the scroller */
.apt.dragging { opacity: .85; z-index: 6; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); }
.apt.moving-col { outline: 2px solid #fff; outline-offset: -2px; }
.apt .grip { cursor: ns-resize; }
.apt .draghint {
  position: absolute; left: 12px; bottom: 3px; z-index: 3;
  background: rgba(0,0,0,.72); color: #fff; border-radius: 3px; padding: 0 5px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.daycol { cursor: cell; }

/* Narrow columns (a 7-day week on a phone). Grady's reference keeps the chip AND a fully
   readable name at max zoom-out, so nothing here drops either: the name breaks across lines
   rather than being cut, and the service line is the only thing that goes. */
.cal.narrow .apt { padding-left: 5px; padding-right: 3px; }
.cal.narrow .apt::after { width: 3px; }
/* Scaled off the reference itself: its day numbers are 30px, which fixes the screenshot
   scale, and against that the client name measures ~12px on two lines in a ~45px block.
   What was actually missing was the CHIP, not a bigger name. */
.cal.narrow .apt .nm { font-size: 12px; line-height: 13.5px; overflow-wrap: break-word; }
/* A 15-minute block on a 375px phone is one 34px line. A step down in size is what keeps a
   first name whole there; the alternative is cutting it, which is the one thing barred. */
.cal.narrow .apt.tiny { padding-left: 4px; padding-right: 2px; }
.cal.narrow .apt.tiny .nm { font-size: 10.5px; line-height: 11.5px; }
.cal.narrow .apt .code { flex: 0 0 auto; font-size: 9.5px; line-height: 12px; padding: 0 2px; }
.cal.narrow .apt .src, .cal.narrow .apt .src .icon { width: 11px; height: 11px; }
.cal.narrow .apt .sv { display: none; }
.cal.narrow .apt .grip { display: none; }

/* ---------- month: a chooser, not a calendar you work in ---------- */
.cal.month { padding: 8px; }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--grid-line); border: 1px solid var(--grid-line); border-radius: 6px;
  overflow: hidden; }
.mdow { background: var(--cal-chrome, var(--col-bg)); padding: 8px 4px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.mday { position: relative; min-height: 84px; background: var(--col-bg); border: 0;
  padding: 6px 8px; text-align: left; font: inherit; color: var(--ink-900); cursor: pointer; }
.mday .mn { font-size: 17px; font-weight: 600; }
.mday.out { background: var(--col-off); }
.mday.out .mn { color: var(--ink-400); }
.mday.today .mn { display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  border-radius: 6px; background: var(--accent); color: #fff; }
.mpill { position: absolute; left: 8px; bottom: 8px; display: inline-block;
  min-width: 22px; padding: 2px 6px; border-radius: 999px; text-align: center;
  background: var(--fill-dark, #3a3f47); color: #fff; font-size: 12px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .mday:hover { filter: brightness(.97); } }

/* ---------- zoom between Day / Week / Month ---------- */
/* A camera move, not a swap: both frames scale about the cell you clicked, one growing into
   place while the other keeps going the way it was already headed. */
.zoom-in, .zoom-out, .zoom-in-out, .zoom-out-out {
  transform-origin: var(--zx, 50%) var(--zy, 40%);
}
.zoom-in  { animation: zin  480ms cubic-bezier(.16, .84, .32, 1) both; }
.zoom-out { animation: zout 480ms cubic-bezier(.16, .84, .32, 1) both; }
.zoom-in-out  { animation: zinold  480ms cubic-bezier(.4, 0, .7, .5) both; }
.zoom-out-out { animation: zoutold 480ms cubic-bezier(.4, 0, .7, .5) both; }
@keyframes zin     { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zinold  { from { transform: none; opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes zout    { from { transform: scale(1.28); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zoutold { from { transform: none; opacity: 1; } to { transform: scale(.78); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .zoom-in, .zoom-out, .zoom-in-out, .zoom-out-out { animation: none; }
  .zoom-in-out, .zoom-out-out { display: none; }
}
.pick.on { background: var(--paper-100); }
.pick-tick { display: grid; color: var(--accent); }
.pick-tick .icon { width: 18px; height: 18px; }