/* ════════════════════════════════════════════════════════════════════════════
   widget-picker.css — "Customize your workspace" (widget-picker.js), both apps.
   The supplied design's layout; colours from the theme's tokens, so it follows
   light and dark like the rest of the page. A phone gets the whole screen; a
   laptop a panel on the right.
   ════════════════════════════════════════════════════════════════════════════ */
html.wp-lock { overflow: hidden; }
.wp {
  position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end;
  background: rgba(3, 5, 10, .55); animation: wpFade .16s ease both;
}
.wp__sheet {
  width: min(500px, 100%); height: 100%; display: flex; flex-direction: column;
  background: linear-gradient(var(--e1-bg), var(--e1-bg)), var(--canvas);
  color: var(--ink); border-inline-start: 1px solid var(--hairline-strong);
  box-shadow: -24px 0 60px var(--shadow-color, rgba(0, 0, 0, .45));
  animation: wpIn .2s cubic-bezier(.2, .8, .2, 1) both;
}
@media (max-width: 620px) { .wp__sheet { width: 100%; border: 0; } }

.wp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
            padding: calc(env(safe-area-inset-top, 0px) + 22px) 22px 14px; }
.wp__head h2 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.wp__head p { margin: 6px 0 0; font-size: 16px; color: var(--ink-subtle); }
.wp__x { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
         background: var(--e2-bg); border: 1px solid var(--hairline-strong); color: var(--ink); cursor: pointer; }
.wp__x:hover { background: var(--e3-bg); }

.wp__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 18px; }

.wp__dd { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 14px;
          border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--e2-bg);
          color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.wp__dd:hover { background: var(--e3-bg); }
.wp__dd-ic { color: var(--ink-subtle); display: grid; }
.wp__dd-t { flex: 1; display: grid; gap: 2px; }
.wp__dd-t b { font-size: 16.5px; font-weight: 600; }
.wp__dd-t small { font-size: 13.5px; color: var(--ink-subtle); }
.wp__chev { display: grid; color: var(--ink-subtle); transition: transform .18s; }
[aria-expanded="true"] > .wp__chev { transform: rotate(180deg); }

.wp__grp { position: relative; margin: 14px 0 6px; padding-inline-start: 16px; font-size: 13px; font-weight: 700;
           letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.wp__grp::before { content: ""; position: absolute; inset-inline-start: 0; top: 1px; bottom: 1px; width: 4px;
                   border-radius: 2px; background: var(--wp-c); }
.wp__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.wp__rows > li { border-bottom: 1px solid var(--hairline); }
.wp__row { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 4px; cursor: pointer; }
.wp__row:hover { background: var(--wash); }
.wp__ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px;
          color: var(--ink-subtle); transition: background .15s, color .15s; }
.is-on > .wp__ic { background: color-mix(in srgb, var(--wp-c) 22%, transparent); color: var(--wp-c); }
.wp__t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.wp__t b { font-size: 16.5px; font-weight: 600; }
.wp__t small { font-size: 14px; color: var(--ink-subtle); }
.wp__cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wp__box { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
           border: 2px solid var(--ink-subtle); color: transparent; transition: background .15s, border-color .15s; }
.wp__box svg { width: 18px; height: 18px; stroke-width: 3; }
.wp__cb:checked ~ .wp__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wp__cb:focus-visible ~ .wp__box { outline: 2px solid var(--accent-focus, var(--accent)); outline-offset: 3px; }

.wp__pv { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--hairline-strong); }
.wp__pvh { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 4px; background: none; border: 0;
           color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .2em;
           text-transform: uppercase; cursor: pointer; text-align: start; }
.wp__pvh > span:first-of-type { flex: 1; }
.wp__pvl { border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--e2-bg); overflow: hidden; }
.wp__pr { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: none; border: 0;
          border-bottom: 1px solid var(--hairline); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.wp__pr:last-child { border-bottom: 0; }
.wp__pr:hover { background: var(--wash); }
.wp__pr .wp__ic { width: 40px; height: 40px; border-radius: 10px; }
.wp__pr-k { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.wp__pr-v { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.wp__pr-v b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wp__pr-v small { font-size: 13px; color: var(--ink-subtle); }
.wp__pr-go { display: grid; color: var(--ink-subtle); }
[dir="rtl"] .wp__pr-go { transform: scaleX(-1); }
.wp__none { margin: 0; padding: 16px; font-size: 14.5px; color: var(--ink-subtle); }

.wp__foot { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px;
            padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--hairline-strong); }
.wp__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 12px;
           border: 1px solid var(--hairline-strong); background: var(--e2-bg); color: var(--ink);
           font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.wp__btn:hover { background: var(--e3-bg); }
.wp__btn--go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.wp__btn--go:hover { background: var(--accent-hover, var(--accent)); }
.wp__btn:disabled { opacity: .45; cursor: not-allowed; }
.wp__btn svg { stroke-width: 2.6; }

/* The colour of each widget's icon square and each group's bar. */
.wp-t--amber  { --wp-c: #F7A11A; }
.wp-t--orange { --wp-c: #FB8A2E; }
.wp-t--blue   { --wp-c: #4D9BFF; }
.wp-t--teal   { --wp-c: #2DC5B6; }
.wp-t--rose   { --wp-c: #F2677E; }
.wp-t--purple { --wp-c: #A98BFF; }
.wp-t--green  { --wp-c: #3FC77F; }
.wp-t--cyan   { --wp-c: #2FC1DC; }
.wp-t--slate  { --wp-c: #A3AEBD; }
:root[data-scheme="light"] .wp-t--amber  { --wp-c: #A56300; }
:root[data-scheme="light"] .wp-t--orange { --wp-c: #B24D00; }
:root[data-scheme="light"] .wp-t--blue   { --wp-c: #1D5FD1; }
:root[data-scheme="light"] .wp-t--teal   { --wp-c: #0B7A70; }
:root[data-scheme="light"] .wp-t--rose   { --wp-c: #C0264A; }
:root[data-scheme="light"] .wp-t--purple { --wp-c: #6A47D6; }
:root[data-scheme="light"] .wp-t--green  { --wp-c: #17803F; }
:root[data-scheme="light"] .wp-t--cyan   { --wp-c: #0A7891; }
:root[data-scheme="light"] .wp-t--slate  { --wp-c: #556274; }
:root[data-scheme="light"] .wp { background: rgba(16, 24, 40, .35); }

@keyframes wpFade { from { opacity: 0; } }
@keyframes wpIn { from { transform: translateX(32px); opacity: 0; } }
@media (max-width: 620px) { @keyframes wpIn { from { transform: translateY(24px); opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { .wp, .wp__sheet { animation: none; } }

/* ── v4.145: the supplied layout, line by line ────────────────────────────────
   Header (title + line, a sliders button); one dropdown card; groups with a
   coloured bar; compact rows, a coloured square behind a ticked widget's icon
   and a bare icon behind an unticked one; the preview box; Reset / Apply.
   The dropdown's chevron points DOWN while its list is shown, as drawn. */
.wp__dd[aria-expanded="true"] > .wp__chev { transform: none; }
.wp__dd[aria-expanded="false"] > .wp__chev { transform: rotate(180deg); }
.wp__x { background: var(--e2-bg); width: 50px; height: 50px; border-radius: 13px; color: var(--ink); }
.wp__head h2 { font-size: 28px; letter-spacing: 0; }
.wp__head p { font-size: 15.5px; margin-top: 4px; }
.wp__head { padding-bottom: 12px; }
.wp__body { padding-top: 2px; }
.wp__dd { border-radius: 12px; padding: 12px 16px; }
.wp__grp { margin-top: 12px; font-size: 12.5px; letter-spacing: .24em; }
.wp__row { padding: 9px 4px; }
.wp__ic { width: 46px; height: 46px; border-radius: 12px; }
.wp__ic svg { width: 22px; height: 22px; }
.wp__t b { font-size: 16px; }
.wp__t small { font-size: 13.5px; }
/* a ticked amber widget is the solid orange square with a white glyph (the $) */
.wp-t--amber.is-on > .wp__ic, .wp__row.wp-t--amber.is-on > .wp__ic {
  background: linear-gradient(160deg, #F5A21B, #E2831B); color: #fff;
}
:root[data-scheme="light"] .wp-t--amber.is-on > .wp__ic { background: linear-gradient(160deg, #F5A21B, #E2831B); color: #fff; }
.wp__pvh { padding: 10px 4px; }
.wp__pvl { border-radius: 12px; }
.wp__pr { padding: 8px 12px; }
.wp__pr .wp__ic { width: 42px; height: 42px; }
.wp__pr-k { font-size: 15px; }
.wp__pr-v b { font-size: 21px; }
.wp__btn { min-height: 52px; font-size: 16.5px; }

/* The page sits above the bottom bar (the picker measures it and sets
   `bottom`), so the bar stays visible and usable, as drawn. */
.wp--page { background: transparent; animation: none; }
.wp--page .wp__sheet { width: 100%; border: 0; box-shadow: none; animation: none; }
@media (min-width: 621px) {
  /* a laptop: a panel on the right, the bar being a sidebar there */
  .wp--page { bottom: 0 !important; background: rgba(3, 5, 10, .55); }
  .wp--page .wp__sheet { width: min(500px, 100%); border-inline-start: 1px solid var(--hairline-strong); box-shadow: -24px 0 60px var(--shadow-color, rgba(0, 0, 0, .45)); }
}