/* The client dashboard on tablets, unfolded foldables and desktops (wide.js): any window 600px
   wide or more. The width picks the layout (icon rail from 600px, full sidebar from 1000px, list and
   detail side by side from 760px); html[data-skin] picks the look:
   ipad / mac: glass sidebar, capsule toolbar. android: Material 3 rail, top app bar, chips.
   Pages reused from the phone layout (p-*) are restyled under body.is-wide, which also outranks
   phone.css's html[data-os] rules. Class names start with w-. */

/* ---------- skin tokens ---------- */
html[data-skin] body.is-wide { --w-rust-ink: #a83a17; --w-ochre-bg: #f6ead2; --w-ochre-ink: #6b4708; --w-ochre: #c9922c; }
html[data-skin="mac"], html[data-skin="ipad"] {
  --w-chrome: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  --w-bg: var(--sand-100); --w-paper: var(--sand-100); --w-card: rgba(251, 247, 240, .75); --w-card-line: transparent;
  --w-r-row: 10px; --w-r-card: 14px; --w-side: 240px; --w-side-total: 256px;
}
html[data-skin="android"] {
  --w-chrome: "Instrument Sans", system-ui, sans-serif;
  --w-bg: var(--sand-100); --w-paper: var(--sand-100); --w-card: var(--sand-50); --w-card-line: transparent;
  --w-r-row: 12px; --w-r-card: 16px; --w-side: 88px; --w-side-total: 88px;
}
.w-glass { background: rgba(251, 247, 240, .55); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 6px 20px -10px rgba(31, 26, 22, .3); }

/* ---------- frame ---------- */
body.is-wide { background: var(--w-bg); overflow: hidden; }
.w-app { --w-list: 340px; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; font: 400 13px/1.45 var(--w-chrome); color: var(--ink-900); min-height: 0; }
.w-app > .support { position: relative; flex: none; padding: 10px 20px; }
.w-body { flex: 1; min-height: 0; display: flex; min-width: 0; }
.w-side { flex: none; width: var(--w-side); display: flex; flex-direction: column; min-height: 0; }
.w-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--w-paper); }
.w-main.main { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 0; gap: 0; max-width: none; display: block; overscroll-behavior: contain; }
.w-main--list, .w-main--cal, .w-main--tabletop { overflow: hidden !important; display: flex !important; }
.w-main--settings.main { padding: 28px 32px 64px; }
.w-spacer { flex: 1; min-width: 0; }
.w-app :focus-visible, .w-pop :focus-visible, .w-dialog :focus-visible, .w-palette :focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.w-app svg { flex: none; }

/* ---------- sidebar: iPad + Mac glass ---------- */
html[data-skin="mac"] .w-side, html[data-skin="ipad"] .w-side {
  margin: 8px; border-radius: 14px; overflow: hidden; transition: width .3s var(--ease);
  background: rgba(251, 247, 240, .62); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 6px 20px -10px rgba(31, 26, 22, .3);
}
.w-side__drag { height: 0; flex: none; }
.w-side__head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; min-width: 0; }
.w-tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--rust-600); color: var(--sand-50); font: 400 17px var(--display); text-transform: uppercase; }
.w-tile--18 { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; }
.w-side__id { display: flex; flex-direction: column; min-width: 0; }
.w-side__id strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-side__id small { font-size: 11px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-side__groups { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 8px 10px; scrollbar-width: thin; }
.w-group__h { display: block; font: 600 11px var(--w-chrome); color: var(--ink-500); padding: 14px 10px 4px; white-space: nowrap; }
.w-nav__item { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--ink-900); text-decoration: none; min-width: 0; }
.w-nav__item svg { width: 16px; height: 16px; color: var(--ink-600); }
.w-nav__item:hover { background: rgba(31, 26, 22, .05); }
.w-nav__item[aria-current="page"] { background: rgba(194, 70, 31, .14); color: var(--w-rust-ink); font-weight: 600; }
.w-nav__item[aria-current="page"] svg { color: var(--rust-600); }
.w-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font: 700 11px/1 var(--w-chrome); background: rgba(31, 26, 22, .1); color: var(--ink-600); flex: none; }
.w-nav__item[aria-current="page"] .w-badge { background: var(--rust-600); color: var(--sand-50); }
.w-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; flex: none; }
.w-foot:hover { background: rgba(31, 26, 22, .04); }
.w-foot__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink-900); color: var(--sand-100); font: 400 13px var(--display); text-transform: uppercase; }
.w-foot__text { display: flex; flex-direction: column; min-width: 0; }
.w-foot__text strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-foot__text small { font-size: 10.5px; color: var(--ink-500); white-space: nowrap; }

/* ---------- Android: navigation rail ---------- */
.w-rail { align-items: center; padding: 12px 0; gap: 6px; background: var(--sand-100); }
.w-fab { width: 56px; height: 56px; border: 0; border-radius: 16px; display: grid; place-items: center; cursor: pointer; background: var(--rust-600); color: var(--sand-50); box-shadow: 0 6px 14px -4px rgba(31, 26, 22, .35); margin-bottom: 18px; flex: none; }
.w-fab[aria-expanded="true"] svg { rotate: 45deg; }
.w-fab svg { transition: rotate .25s; }
.w-rail__items, .w-rail__end { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.w-rail__items { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.w-rail__end { padding-top: 8px; }
.w-rail__item { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink-600); text-decoration: none; }
.w-rail__pill { position: relative; width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background .2s; }
.w-rail__pill svg { width: 22px; height: 22px; }
.w-rail__item:hover .w-rail__pill { background: rgba(31, 26, 22, .06); }
.w-rail__item[aria-current="page"] { color: var(--warn-ink); font-weight: 700; }
.w-rail__item[aria-current="page"] .w-rail__pill { background: var(--warn-bg); }
.w-rail .w-badge { position: absolute; top: 0; left: 32px; height: 16px; min-width: 16px; background: var(--rust-600); color: var(--sand-50); font-size: 10px; }

/* ---------- toolbars ---------- */
.w-toolbar { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 6px; min-width: 0; }
.w-titleblock { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.w-titleblock__t { margin: 0; font: 700 15px/1.2 var(--w-chrome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-titleblock__sub { font-size: 11.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-titleblock__sub:empty { display: none; }
.w-tactions { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.w-capsule { display: flex; height: 32px; border-radius: 999px; flex: none; }
.w-capsule button { width: 34px; height: 32px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink-900); border-radius: 999px; }
.w-capsule button:hover { background: rgba(31, 26, 22, .06); }
.w-capsule svg { width: 18px; height: 18px; }
.w-tbtn { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; font: 600 13px var(--w-chrome); color: var(--ink-900); text-decoration: none; cursor: pointer; white-space: nowrap; flex: none;
  background: rgba(251, 247, 240, .55); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 6px 20px -10px rgba(31, 26, 22, .3); }
.w-new { height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; font: 600 13px var(--w-chrome); color: var(--sand-50);
  background: rgba(194, 70, 31, .88); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 20px -10px rgba(194, 70, 31, .6); }
.w-new svg { width: 16px; height: 16px; }
.w-round { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; color: var(--ink-900); font-size: 18px; line-height: 1; }
.w-search { height: 34px; width: 220px; flex: none; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; font: 400 13px var(--w-chrome); color: var(--ink-600); text-align: left;
  background: rgba(251, 247, 240, .55); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 6px 20px -10px rgba(31, 26, 22, .3); }
.w-search svg { width: 16px; height: 16px; }
.w-search span:not(.w-search__kbd) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-search__kbd { font: 500 11px var(--mono); color: var(--ink-500); }

/* Android: top app bar */
html[data-skin="android"] .w-toolbar { height: 64px; padding: 0 16px 0 12px; gap: 12px; }
html[data-skin="android"] .w-titleblock__t { font: 500 22px/1.2 var(--w-chrome); }
html[data-skin="android"] .w-titleblock__sub { font-size: 12.5px; }
html[data-skin="android"] .w-tbtn { height: 40px; padding: 0 12px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; color: var(--w-rust-ink); }
html[data-skin="android"] .w-tbtn:hover { background: rgba(194, 70, 31, .08); }
html[data-skin="android"] .w-search { height: 48px; width: auto; flex: 0 1 300px; min-width: 140px; border-radius: 28px; background: var(--sand-300); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 16px; font-size: 15px; }
html[data-skin="android"] .w-search svg { width: 20px; height: 20px; }
.w-avatar { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; background: var(--rust-600); color: var(--sand-50); font: 400 18px var(--display); text-transform: uppercase; }
.w-chiprow { flex: none; display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.w-chiprow::-webkit-scrollbar { display: none; }
.w-chiprow__chip { flex: none; height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font: 600 13.5px var(--w-chrome); color: var(--ink-900); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink-500); }
.w-chiprow__chip[aria-current="page"] { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
.w-chiprow__chip[aria-current="page"]::before { content: "✓ "; white-space: pre; }

/* ---------- buttons, chips, segments, key/values ---------- */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 13px var(--w-chrome); background: rgba(31, 26, 22, .07); color: var(--ink-900); cursor: pointer; text-decoration: none; white-space: nowrap; flex: none; }
.w-btn:hover { background: rgba(31, 26, 22, .11); }
.w-btn:disabled { opacity: .5; cursor: default; }
.w-btn--primary { background: var(--rust-600); color: var(--sand-50); }
.w-btn--primary:hover { background: #b03e1a; }
.w-btn--danger { color: var(--rust-600); }
.w-btn__kbd { font: 500 11px var(--mono); opacity: .65; }
html[data-skin="android"] .w-btn { height: 40px; padding: 0 18px; font-size: 14px; background: var(--warn-bg); color: var(--warn-ink); }
html[data-skin="android"] .w-btn--primary { background: var(--rust-600); color: var(--sand-50); }
html[data-skin="android"] .w-btn--danger { background: none; color: var(--w-rust-ink); box-shadow: inset 0 0 0 1px var(--ink-500); }
.w-link { border: 0; background: none; padding: 0; cursor: pointer; font: 600 13px var(--w-chrome); color: var(--rust-600); text-decoration: none; }
.w-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--w-chrome); background: rgba(31, 26, 22, .07); color: var(--ink-900); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.w-chip--rust { background: var(--rust-600); color: var(--sand-50); }
.w-chip--sage { background: var(--sage-100); color: var(--sage-ink, #3c4734); }
.w-chip--ochre { background: var(--w-ochre-bg); color: var(--w-ochre-ink); }
.w-chip--off { background: var(--sand-300); color: var(--ink-600); }
html[data-skin="android"] .w-chip { border-radius: 8px; }
.w-eyebrow { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600); overflow-wrap: anywhere; }
.w-seg { display: inline-flex; max-width: 100%; padding: 2px; border-radius: 999px; background: rgba(31, 26, 22, .07); overflow-x: auto; scrollbar-width: none; }
.w-seg::-webkit-scrollbar { display: none; }
.w-seg button { flex: 1 0 auto; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 13px var(--w-chrome); color: var(--ink-900); white-space: nowrap; }
.w-seg button[aria-pressed="true"] { background: var(--sand-50); box-shadow: 0 1px 3px rgba(31, 26, 22, .15); }
html[data-skin="android"] .w-seg { background: none; padding: 0; gap: 8px; border-radius: 0; flex-wrap: wrap; overflow: visible; }
html[data-skin="android"] .w-seg button { flex: 0 0 auto; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ink-500); font-size: 13.5px; }
html[data-skin="android"] .w-seg button[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
html[data-skin="android"] .w-seg button[aria-pressed="true"]::before { content: "✓ "; white-space: pre; }
.w-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 0; background: var(--w-card); border-radius: var(--w-r-card); padding: 2px 16px; box-shadow: inset 0 0 0 1px var(--w-card-line); }
.w-kv dt { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); padding: 13px 12px 11px 0; border-top: 1px solid var(--line); }
.w-kv dd { margin: 0; font-size: 15px; padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
.w-kv dt:first-of-type, .w-kv dt:first-of-type + dd { border-top: 0; }
.w-empty { margin: 0; padding: 20px; color: var(--ink-600); font-size: 14px; }
.w-note { margin: 0; font-size: 13px; color: var(--ink-600); }

/* ---------- list and detail ---------- */
.w-ld { flex: 1; min-width: 0; min-height: 0; display: flex; }
.w-list { width: var(--w-list); flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.w-list__head { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.w-list__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.w-list__title strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-list__title span { font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.w-list__rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.w-row { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: stretch; width: 100%; padding: 10px 12px 10px 24px; border: 0; border-radius: var(--w-r-row); background: none; font: inherit; color: inherit; text-align: left; cursor: default; flex: none; min-width: 0; }
.w-row:hover { background: rgba(31, 26, 22, .04); }
.w-row__dot { position: absolute; left: 10px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--rust-600); }
.w-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.w-row__t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-row.is-unread .w-row__t { font-weight: 700; }
.w-row__meta { font-size: 12px; color: var(--ink-500); white-space: nowrap; flex: none; }
.w-row__sub { font-size: 13px; line-height: 1.4; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.w-row .w-chip { align-self: flex-start; height: 20px; font-size: 11.5px; margin-top: 3px; }
.w-row[aria-selected="true"] { background: var(--rust-600); color: var(--sand-50); }
.w-row[aria-selected="true"] .w-row__sub, .w-row[aria-selected="true"] .w-row__meta { color: rgba(251, 247, 240, .85); }
.w-row[aria-selected="true"] .w-row__dot { background: var(--sand-50); }
.w-row[aria-selected="true"] .w-chip { background: rgba(251, 247, 240, .22); color: var(--sand-50); }
html[data-skin="android"] .w-row[aria-selected="true"] { background: var(--warn-bg); color: var(--warn-ink); }
html[data-skin="android"] .w-row[aria-selected="true"] .w-row__sub, html[data-skin="android"] .w-row[aria-selected="true"] .w-row__meta { color: var(--warn-ink); }
html[data-skin="android"] .w-row[aria-selected="true"] .w-row__dot { background: var(--rust-600); }
html[data-skin="android"] .w-row[aria-selected="true"] .w-chip { background: rgba(138, 52, 21, .12); color: var(--warn-ink); }
.w-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.w-detail__in { max-width: 760px; padding: 28px 36px 48px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.w-detail__back { display: none; align-self: flex-start; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: rgba(31, 26, 22, .07); font: 600 13px var(--w-chrome); color: var(--ink-900); cursor: pointer; }
.w-detail__back svg { width: 18px; height: 18px; }
.w-detail__empty { margin: 0; padding: 64px 20px; text-align: center; color: var(--ink-500); font-size: 14px; }
.w-dview { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.w-dview__t { margin: 0; font: 400 44px/.92 var(--display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.w-dview__t--34 { font-size: 34px; }
.w-dview__chips, .w-dview__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.w-dview__chips { gap: 6px; }
.w-dview__body { margin: 0; font-size: 16px; line-height: 1.55; max-width: 620px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A request's line about Planning Center (phone-pco.js), with Retry. */
.w-dview__pco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 620px; }
.w-dview__pco .w-note { flex: 1 1 260px; overflow-wrap: anywhere; }
.w-dview__media { max-width: 520px; aspect-ratio: 4 / 3; border-radius: var(--w-r-card); overflow: hidden; background: var(--sand-300); }
.w-dview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-items { background: var(--w-card); border-radius: var(--w-r-card); padding: 4px 16px; box-shadow: inset 0 0 0 1px var(--w-card-line); }
.w-items__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.w-items__row:first-child { border-top: 0; }
.w-items__q { font: 500 13px var(--mono); color: var(--ink-600); }
.w-items__n { overflow-wrap: anywhere; }
.w-items__n small { display: block; font-size: 12.5px; color: var(--ink-600); }
.w-items__total { font-weight: 700; }

/* ---------- Notes ---------- */
.w-notes { background: var(--w-card); border-radius: var(--w-r-card); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 0 0 1px var(--w-card-line); }
.w-notes__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.w-notes__head strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.w-notes__status { font-size: 12px; color: var(--ink-500); }
.w-notes__clear { border: 0; background: none; padding: 0 4px; cursor: pointer; font: 600 12px var(--w-chrome); color: var(--rust-600); }
.w-notes__canvas { display: block; width: 100%; height: 160px; border-radius: 10px; touch-action: none; cursor: crosshair; background-color: var(--sand-50); background-image: repeating-linear-gradient(transparent 0 31px, rgba(31, 26, 22, .08) 31px 32px); box-shadow: inset 0 0 0 1px var(--line); }
.w-notes__text { min-height: 110px; font-size: 15px; }
.w-notes__hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-500); }
.w-notes [hidden] { display: none !important; }

/* ---------- dashboard ---------- */
.w-dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 300px); gap: 16px; padding: 28px 32px 48px; align-items: start; max-width: 1400px; }
.w-dash__hello { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.w-dash__h1 { margin: 0; font: 400 56px/.9 var(--display); text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.w-dash__preview { grid-column: 3; grid-row: 1 / span 4; position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.w-dash__preview .w-btn { align-self: center; }
.w-dash .w-hero { grid-column: 1; }
.w-dash .w-chart { grid-column: 2; }
.w-dash .w-stats, .w-dash .w-attn { grid-column: 1 / 3; }
.w-card { background: var(--w-card); border-radius: var(--w-r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: inset 0 0 0 1px var(--w-card-line); }
.w-card--ink { background: var(--ink-900); color: var(--sand-100); box-shadow: none; }
.w-card--sage { background: var(--sage-600); color: var(--sand-50); box-shadow: none; }
.w-card__label { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.w-card--ink .w-card__label { color: var(--rust-400); }
.w-card--sage .w-card__label { color: var(--sage-100); }
.w-hero { min-height: 190px; justify-content: flex-start; }
.w-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; }
.w-hero__big { font: 400 clamp(30px, 4.2vw, 76px)/.88 var(--display); text-transform: uppercase; overflow-wrap: anywhere; margin-top: auto; }
.w-hero__sub { font-size: 14.5px; font-weight: 500; }
.w-hero__next { font-size: 13px; color: var(--ink-300); border-top: 1px solid var(--line-dark); padding-top: 10px; }
.w-card--ink .w-btn { background: rgba(243, 236, 224, .14); color: var(--sand-100); }
.w-chart { min-height: 190px; }
.w-chart__n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w-chart__big { font: 400 48px/.9 var(--display); }
.w-chart__delta { font-size: 13.5px; font-weight: 600; color: var(--sage-600); }
.w-chart__delta.is-down { color: var(--rust-600); }
body.is-wide .w-chart .p-bars { height: 64px; margin-top: auto; }
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.w-stat { background: var(--w-card); border-radius: var(--w-r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; min-width: 0; box-shadow: inset 0 0 0 1px var(--w-card-line); }
a.w-stat:hover { background: var(--sand-50); }
.w-stat b { font: 400 34px/.9 var(--display); overflow-wrap: anywhere; }
.w-stat span { font-size: 13px; line-height: 1.3; color: var(--ink-600); }
.w-stat.is-rust b { color: var(--rust-600); }
.w-stat.is-sage b { color: var(--sage-600); }
/* Four tiles that stay in even rows: four across, or two and two (a church's Home, wide-dash.js). */
.w-stats--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .w-stats--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A second filter under Inbox / Archived (a church's forms, wide-lists.js): wraps as chips, nothing cut off. */
.w-list__more .w-seg { flex-wrap: wrap; overflow: visible; background: none; padding: 0; gap: 6px; border-radius: 0; }
.w-list__more .w-seg button { flex: 0 0 auto; height: 26px; padding: 0 10px; font-size: 12.5px; box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .18); }
.w-list__more .w-seg button[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-100); box-shadow: none; }
.w-attn__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.w-attn__t { margin: 0; font: 400 26px/1 var(--display); text-transform: uppercase; }
.w-attn__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.w-attn__row:first-child { border-top: 0; }
.w-attn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust-600); flex: none; }
.w-attn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.w-attn__text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-attn__text small { font-size: 13px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-attn__meta { font-size: 12px; color: var(--ink-500); white-space: nowrap; flex: none; }
.w-attn__none { margin: 0; color: var(--ink-600); font-size: 14px; }
.w-progress { height: 6px; border-radius: 999px; background: rgba(243, 236, 224, .2); overflow: hidden; }
.w-progress i { display: block; height: 100%; background: var(--rust-600); border-radius: inherit; }
body.is-wide .w-hero .p-switch[aria-checked="true"] { background: rgba(251, 247, 240, .35); }

/* ---------- settings (the phone's pages, in a centered column) ---------- */
.w-settings { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.is-wide .w-settings .p-head { padding: 0; gap: 8px; }
body.is-wide .w-settings .p-title { font-size: 48px; line-height: .9; }
body.is-wide .w-settings .p-label { padding: 6px 2px 0; }
body.is-wide .w-settings .p-intro { padding: 0 2px; }
body.is-wide .w-settings .p-list, body.is-wide .w-settings .p-card, body.is-wide .w-settings .p-empty { background: var(--w-card); border-radius: var(--w-r-card); box-shadow: inset 0 0 0 1px var(--w-card-line); }
body.is-wide .w-settings .p-list { padding: 0 16px; }
body.is-wide .w-settings .p-li { padding: 12px 0; }
body.is-wide .w-settings .p-li__title { font-size: 15px; }
body.is-wide .w-settings .p-btn--lg { height: 34px; font-size: 14px; padding: 0 18px; }
body.is-wide .w-settings .p-btn--block { width: auto; align-self: flex-start; }
.w-saverow { display: flex; justify-content: flex-end; position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(rgba(243, 236, 224, 0), var(--w-paper) 40%); }
body.is-wide .p-switch { width: 38px; height: 22px; padding: 2px; }
body.is-wide .p-switch::after { width: 18px; height: 18px; }
body.is-wide .p-switch[aria-checked="true"] { background: var(--rust-600); }
body.is-wide .p-switch[aria-checked="true"]::after { transform: translateX(16px); }
body.is-wide .w-settings .p-input, body.is-wide .w-settings .p-textarea { border-radius: 8px; font-size: 15px; }
body.is-wide .w-settings .p-input { height: 38px; }
html[data-skin="android"] body.is-wide .w-settings .p-list { background: none; box-shadow: none; padding: 0; }
html[data-skin="android"] body.is-wide .w-settings .p-list > * { padding: 14px 16px; }
html[data-skin="android"] body.is-wide .p-switch { width: 52px; height: 32px; padding: 0; }
html[data-skin="android"] body.is-wide .p-switch::after { width: 16px; height: 16px; transform: translateX(8px); }
html[data-skin="android"] body.is-wide .p-switch[aria-checked="true"]::after { width: 24px; height: 24px; transform: translateX(24px); }
html[data-skin="android"] body.is-wide .w-settings .p-btn--lg { height: 40px; }

/* Photos: the drop zone */
.w-drop { padding: 10px; border-radius: 14px; border: 2px dashed rgba(31, 26, 22, .14); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, background .15s; }
.w-drop.is-over { border-color: var(--rust-600); background: rgba(194, 70, 31, .06); }
.w-drop__hint { font-size: 13px; color: var(--ink-500); text-align: center; }
body.is-wide .w-drop .p-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; }
body.is-wide .w-drop .p-photo, body.is-wide .w-drop .p-up { aspect-ratio: 1; width: auto; height: auto; border-radius: 10px; }
body.is-wide .w-settings .p-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* ---------- calendar ---------- */
.w-cal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.w-cal__bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); min-width: 0; }
.w-cal__range { font-size: 15px; font-weight: 700; white-space: nowrap; }
.w-cal__nav { display: flex; gap: 4px; }
.w-cal__req { white-space: nowrap; }
.w-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-600); }
.w-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.w-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.w-sw--rust { background: rgba(194, 70, 31, .5); }
.w-sw--sage { background: rgba(95, 110, 83, .55); }
.w-sw--ochre { background: rgba(201, 146, 44, .6); }
.w-sw--ink { background: rgba(31, 26, 22, .4); }
.w-sw--req { background: var(--w-ochre-bg); box-shadow: inset 0 0 0 1.5px var(--w-ochre); }
.w-sw--block { background: repeating-linear-gradient(135deg, var(--sand-500) 0 3px, var(--sand-300) 3px 6px); }
.w-cal__wrap { flex: 1; min-height: 0; min-width: 0; display: flex; }
.w-cal__scroll { flex: 1; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; }
.w-cal__grid { min-width: var(--w-cal-min); position: relative; }
.w-cal__head, .w-cal__body { display: grid; grid-template-columns: var(--w-gutter) repeat(7, minmax(0, 1fr)); }
.w-cal__head { position: sticky; top: 0; z-index: 4; background: var(--w-paper); border-bottom: 1px solid var(--line); }
.w-cal__corner { position: sticky; left: 0; z-index: 1; background: var(--w-paper); }
.w-cal__day { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 8px 6px; border-left: 1px solid var(--line); min-width: 0; }
.w-cal__dow { font-size: 12px; font-weight: 600; }
.w-cal__num { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.w-cal__day.is-today .w-cal__dow { color: var(--rust-600); }
.w-cal__day.is-today .w-cal__num { background: var(--rust-600); color: var(--sand-50); }
.w-cal__day.is-closed .w-cal__dow, .w-cal__day.is-closed .w-cal__num { color: var(--ink-500); }
.w-cal__lanes { display: flex; width: 100%; gap: 4px; }
.w-cal__lanes small { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-cal__body { position: relative; }
.w-cal__gutter { position: sticky; left: 0; z-index: 3; background: var(--w-paper); }
.w-cal__gutter span { position: absolute; right: 8px; margin-top: 4px; font: 500 11px var(--mono); color: var(--ink-500); white-space: nowrap; }
.w-cal__col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--w-hour)); min-width: 0; }
.w-cal__col.is-closed { background-color: rgba(31, 26, 22, .045); }
.w-slot { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: copy; }
.w-slot:hover { background: rgba(194, 70, 31, .08); }
.w-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 4px 7px; border: 0; border-radius: 7px; overflow: hidden; text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.w-ev b { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ev span { font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ev--rust { background: rgba(194, 70, 31, .16); color: #7d2c12; --w-ev: var(--rust-600); }
.w-ev--sage { background: rgba(95, 110, 83, .2); color: #3c4734; --w-ev: var(--sage-600); }
.w-ev--ochre { background: rgba(201, 146, 44, .22); color: var(--w-ochre-ink); --w-ev: var(--w-ochre); }
.w-ev--ink { background: rgba(31, 26, 22, .12); color: var(--ink-900); --w-ev: var(--ink-900); }
.w-ev--req { background: var(--w-ochre-bg); color: var(--w-ochre-ink); box-shadow: inset 0 0 0 1.5px var(--w-ochre); border: 1.5px dashed var(--w-ochre); box-shadow: none; }
.w-ev--block { background: repeating-linear-gradient(135deg, var(--sand-400) 0 8px, var(--sand-450) 8px 16px); color: var(--ink-600); }
.w-ev.is-sel { box-shadow: 0 0 0 2px var(--ink-900); z-index: 2; }
html[data-skin="android"] .w-ev { border-radius: 4px; border-left: 3px solid var(--w-ev, transparent); }
html[data-skin="android"] .w-ev--req { border: 1.5px dashed var(--w-ochre); }
.w-cal__now { position: absolute; left: var(--w-gutter); right: 0; height: 1.5px; background: var(--rust-600); z-index: 2; pointer-events: none; }
.w-cal__now i { position: absolute; top: -4px; left: calc(100% * var(--w-now-day) / 7 - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--rust-600); }
.w-cal__insp { width: 340px; flex: none; border-left: 1px solid var(--line); overflow-y: auto; padding: 24px 24px 40px; min-height: 0; }

/* ---------- popovers ---------- */
.w-popscrim { position: fixed; inset: 0; z-index: 40; }
.w-pop { position: fixed; z-index: 41; min-width: 240px; max-width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border-radius: 12px; display: flex; flex-direction: column;
  background: rgba(251, 247, 240, .9); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 18px 44px -14px rgba(31, 26, 22, .45); font-family: var(--w-chrome); animation: w-fade .14s ease both; }
.w-pop--new { min-width: 260px; }
.w-pop--app { width: 270px; }
.w-pop__head { font: 600 11px var(--w-chrome); color: var(--ink-500); padding: 8px 10px 2px; }
.w-pop__sep { display: block; height: 1px; background: var(--line); margin: 4px 6px; }
.w-pop__item { display: flex; align-items: center; gap: 12px; min-height: 26px; padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-900); font: inherit; text-align: left; text-decoration: none; cursor: pointer; flex: none; }
.w-pop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-pop__item b { font-size: 13px; font-weight: 500; }
.w-pop--new .w-pop__item { padding: 8px 10px; }
.w-pop--new .w-pop__item b { font-weight: 600; }
.w-pop__item small { font-size: 11.5px; opacity: .7; }
.w-pop__kbd { font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.w-pop__item:hover, .w-pop__item:focus-visible { background: var(--rust-600); color: var(--sand-50); outline: 0; }
.w-pop__item:hover .w-pop__kbd, .w-pop__item:focus-visible .w-pop__kbd { color: inherit; opacity: .8; }
html[data-skin="android"] .w-pop { background: var(--sand-50); border-radius: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 8px 24px -8px rgba(31, 26, 22, .35); padding: 8px 0; min-width: 280px; }
html[data-skin="android"] .w-pop__item { padding: 10px 16px; border-radius: 0; }
html[data-skin="android"] .w-pop__item b { font-size: 15px; }
html[data-skin="android"] .w-pop__item small { font-size: 12.5px; }
html[data-skin="android"] .w-pop__head { padding: 10px 16px 2px; }
html[data-skin="android"] .w-pop__item:hover, html[data-skin="android"] .w-pop__item:focus-visible { background: rgba(31, 26, 22, .06); color: var(--ink-900); }
@keyframes w-fade { from { opacity: 0; } }

/* ---------- scrims, palette, dialogs ---------- */
.w-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(31, 26, 22, .18); opacity: 0; transition: opacity .2s; }
.w-scrim.is-on { opacity: 1; }
.w-scrim--palette { opacity: 1; background: transparent; }
html[data-skin="android"] .w-scrim, html[data-skin="android"] .w-scrim--palette { background: rgba(31, 26, 22, .32); }
.w-palette { position: fixed; z-index: 51; left: 50%; top: 16%; translate: -50% 0; width: min(640px, calc(100vw - 32px)); max-height: 70dvh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; font-family: var(--w-chrome);
  background: rgba(251, 247, 240, .85); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 24px 60px -16px rgba(31, 26, 22, .45); animation: w-fade .14s ease both; }
.w-palette__row { flex: none; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.w-palette__row svg { width: 20px; height: 20px; color: var(--ink-500); }
.w-palette__in { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 20px var(--w-chrome); color: var(--ink-900); }
.w-palette__in::-webkit-search-cancel-button { display: none; }
.w-palette__esc { font: 500 11px var(--mono); color: var(--ink-500); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.w-palette__list { overflow-y: auto; padding: 4px 8px 10px; }
.w-palette__h { display: block; font: 600 11px var(--w-chrome); color: var(--ink-500); padding: 10px 10px 4px; }
.w-palette__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.w-palette__label { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-palette__label small { margin-left: 8px; font-size: 12.5px; color: var(--ink-500); }
.w-palette__kbd { font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.w-palette__item[aria-selected="true"] { background: var(--rust-600); color: var(--sand-50); }
.w-palette__item[aria-selected="true"] small, .w-palette__item[aria-selected="true"] .w-palette__kbd { color: rgba(251, 247, 240, .78); }
.w-palette__none { margin: 0; padding: 18px 12px; color: var(--ink-500); font-size: 14px; }
html[data-skin="android"] .w-palette { top: 8%; border-radius: 28px; background: var(--sand-200); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 40px -12px rgba(31, 26, 22, .4); }
html[data-skin="android"] .w-palette__row { height: 56px; }
html[data-skin="android"] .w-palette__in { font-size: 16px; }
html[data-skin="android"] .w-palette__item[aria-selected="true"] { background: rgba(31, 26, 22, .07); color: var(--ink-900); }
html[data-skin="android"] .w-palette__item[aria-selected="true"] small, html[data-skin="android"] .w-palette__item[aria-selected="true"] .w-palette__kbd { color: var(--ink-500); }

.w-dialog { position: fixed; z-index: 51; left: 50%; top: 96px; translate: -50% 0; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 22px; font-family: var(--w-chrome); opacity: 0; transition: opacity .2s;
  background: rgba(251, 247, 240, .9); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 24px 60px -16px rgba(31, 26, 22, .45); }
.w-dialog.is-on { opacity: 1; }
.w-dialog__title { margin: 0; font: 700 17px var(--w-chrome); }
.w-dialog__body { display: flex; flex-direction: column; gap: 14px; }
.w-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.w-dialog .w-btn { height: 32px; }
.w-dialog .w-btn--primary:disabled { opacity: 1; background: var(--sand-400); color: var(--ink-500); }
.w-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-field__l { font: 500 13px var(--w-chrome); color: var(--ink-600); }
.w-field__note { font-size: 13px; color: var(--ink-500); padding: 6px 0; }
.w-input { width: 100%; height: 34px; border: 0; border-radius: 8px; background: rgba(31, 26, 22, .05); padding: 0 10px; font: 400 14px var(--body); color: var(--ink-900); }
.w-input--area { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; min-height: 84px; }
.w-input:focus { outline: 2px solid var(--rust-600); outline-offset: 0; }
.w-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.w-pick { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(31, 26, 22, .07); font: 600 13px var(--w-chrome); color: var(--ink-900); cursor: pointer; }
.w-pick:hover { background: rgba(31, 26, 22, .11); }
.w-pick[aria-pressed="true"] { background: var(--rust-600); color: var(--sand-50); }
html[data-skin="android"] .w-dialog { top: 14%; max-height: calc(86dvh - 16px); border-radius: 28px; background: var(--sand-100); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 40px -12px rgba(31, 26, 22, .4); padding: 24px; }
html[data-skin="android"] .w-dialog__title { font: 400 24px var(--w-chrome); }
html[data-skin="android"] .w-input { border-radius: 4px 4px 0 0; background: var(--sand-200); box-shadow: inset 0 -2px 0 var(--rust-600); }
html[data-skin="android"] .w-input:focus { outline: 0; box-shadow: inset 0 -3px 0 var(--rust-600); }
html[data-skin="android"] .w-pick { height: 32px; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--ink-500); }
html[data-skin="android"] .w-pick[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
html[data-skin="android"] .w-dialog .w-btn { height: 40px; }
html[data-skin="android"] .w-dialog .w-btn:not(.w-btn--primary) { background: none; color: var(--w-rust-ink); }

/* ---------- toast, shortcut overlay ---------- */
.w-toast { position: fixed; z-index: 60; top: 20px; right: 20px; width: min(340px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; font-family: var(--w-chrome); opacity: 0; translate: 24px 0; transition: opacity .3s, translate .35s var(--ease); pointer-events: none;
  background: rgba(251, 247, 240, .85); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 18px 44px -14px rgba(31, 26, 22, .45); }
.w-toast.is-on { opacity: 1; translate: 0 0; }
.w-toast__tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--rust-600); color: var(--sand-50); font: 400 16px var(--display); text-transform: uppercase; }
.w-toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-toast__text strong { font-size: 13px; font-weight: 600; }
.w-toast__text span { font-size: 13px; color: var(--ink-600); overflow-wrap: anywhere; }
html[data-skin="mac"] .w-toast { top: 64px; }
html[data-skin="android"] .w-toast { top: auto; bottom: 20px; right: 16px; border-radius: 8px; background: var(--sand-50); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 8px 24px -8px rgba(31, 26, 22, .35); }
html.is-tabletop .w-toast { top: auto; bottom: 160px; }
.w-keys { position: fixed; z-index: 70; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, calc(100vw - 32px)); padding: 20px 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; font-family: var(--w-chrome); animation: w-fade .15s ease both;
  background: rgba(251, 247, 240, .88); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px -16px rgba(31, 26, 22, .45); }
.w-keys__t { font-size: 15px; font-weight: 700; }
.w-keys__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.w-keys__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.w-keys__row kbd { font: inherit; color: var(--ink-500); white-space: nowrap; }
html[data-skin="android"] .w-keys { background: var(--sand-50); border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -16px rgba(31, 26, 22, .4); }

/* ---------- tabletop (a foldable folded flat on the counter) ---------- */
.w-table { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.w-table__stage { background: var(--sand-100); padding: 24px 28px; overflow-y: auto; min-height: 0; }
.w-table__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; }
.w-table__now, .w-table__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.w-table__big { font: 400 84px/.88 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.w-table__big--72 { font-size: 72px; }
.w-table__who { font-size: 18px; }
.w-table__hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-600); }
.w-table__up { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.w-table__up strong { display: block; font-size: 18px; font-weight: 600; }
.w-table__up small { font-size: 14px; color: var(--ink-600); }
.w-table__time { font: 600 14px var(--mono); color: var(--rust-600); padding-top: 4px; }
.w-table__none { margin: 0; color: var(--ink-600); font-size: 16px; }
.w-table__controls { background: var(--sand-200); padding: 22px 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.w-table__btn { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 110px; padding: 18px; border: 0; border-radius: 28px; background: var(--sand-50); color: var(--ink-900); font: 600 17px/1.25 var(--w-chrome); text-align: left; text-decoration: none; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.w-table__btn:disabled, .w-table__btn[disabled] { opacity: .5; cursor: default; }
.w-table__glyph { position: absolute; top: 16px; left: 18px; font-size: 22px; line-height: 1; }
.w-table__btn.is-rust { background: var(--rust-600); color: var(--sand-50); }
.w-table__btn.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.w-table__btn.is-sage { background: var(--sage-600); color: var(--sand-50); }
.w-check { display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; font: 500 16px var(--w-chrome); color: inherit; text-align: left; cursor: pointer; }
.w-check__box { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--ink-400); font-size: 15px; }
.w-check.is-on .w-check__box { background: var(--sage-600); color: var(--sand-50); box-shadow: none; }
.w-check.is-on span:last-child { text-decoration: line-through; color: var(--ink-500); }
@media (vertical-viewport-segments: 2) {
  .w-table { grid-template-rows: minmax(0, 1fr) calc(100dvh - env(viewport-segment-bottom 0 0, 50dvh)); }
}

/* ---------- window controls overlay (installed app) ---------- */
@media (display-mode: window-controls-overlay) {
  html[data-skin="mac"] .w-side__drag { height: 30px; -webkit-app-region: drag; app-region: drag; }
  html[data-skin="mac"] .w-toolbar { -webkit-app-region: drag; app-region: drag; }
  html[data-skin="mac"] .w-toolbar :is(button, a, input) { -webkit-app-region: no-drag; app-region: no-drag; }
  /* The Mac look on Windows: keep the toolbar clear of the caption buttons on the right. */
  html[data-skin="mac"] .w-toolbar { padding-right: calc(14px + 100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)); }
}

/* ---------- medium: 600 to 999px ---------- */
@media (max-width: 999px) {
  .w-app { --w-list: 300px; }
  html[data-skin="mac"] .w-app, html[data-skin="ipad"] .w-app { --w-side: 64px; --w-side-total: 80px; }
  html[data-skin="mac"] .w-side__head, html[data-skin="ipad"] .w-side__head { justify-content: center; padding: 14px 0 8px; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) :is(.w-side__id, .w-group__h, .w-nav__label, .w-foot__text) { display: none; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-group + .w-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-nav__item { justify-content: center; padding: 0; height: 36px; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-nav__item svg { width: 18px; height: 18px; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-side__groups { padding: 2px 6px 8px; }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-badge { position: absolute; top: 1px; right: 2px; height: 15px; min-width: 15px; padding: 0 3px; font-size: 9.5px; background: var(--rust-600); color: var(--sand-50); }
  :is(html[data-skin="mac"], html[data-skin="ipad"]) .w-foot { justify-content: center; padding: 10px 0; }
  .w-search { width: 150px; }
  .w-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px 28px 40px; }
  .w-dash__hello { grid-column: 1 / -1; }
  .w-dash__preview { grid-column: 1 / -1; grid-row: auto; position: static; order: 10; }
  .w-cal__wrap { flex-direction: column; }
  .w-cal__scroll { flex: 1 1 60%; }
  .w-cal__insp { width: auto; border-left: 0; border-top: 1px solid var(--line); flex: 0 0 auto; max-height: 40%; padding: 18px 20px 24px; }
  .w-table__big { font-size: 64px; }
  .w-detail__in { padding: 24px 28px 40px; }
  .w-main--settings.main { padding: 24px 28px 56px; }
}
@media (max-width: 860px) {
  .w-search span:not(.w-search__kbd), .w-search__kbd { display: none; }
  .w-search { width: 34px; padding: 0; justify-content: center; }
  html[data-skin="android"] .w-search { width: 48px; min-width: 48px; flex: none; padding: 0; }
}
/* Below 760px a list section shows the list or the item, with a back button. */
@media (max-width: 759px) {
  .w-list { width: 100%; border-right: 0; }
  .w-detail { display: none; }
  .w-ld.is-open .w-list { display: none; }
  .w-ld.is-open .w-detail { display: block; }
  .w-detail__back { display: inline-flex; }
  .w-detail__in { padding: 16px 20px 40px; }
  .w-new span { display: none; }
  .w-new { padding: 0; width: 34px; justify-content: center; }
  .w-dash { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 40px; }
  .w-dash > * { grid-column: 1 / -1 !important; }
  .w-dash__h1 { font-size: 40px; }
  .w-dview__t { font-size: 36px; }
  .w-kv { grid-template-columns: 110px minmax(0, 1fr); }
  .w-main--settings.main { padding: 16px 16px 48px; }
  .w-table__grid { grid-template-columns: minmax(0, 1fr); }
  .w-table__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-titleblock__sub { display: none; }
  .w-tbtn { padding: 0 10px; }
}

/* ---------- foldables: the list ends at the hinge ---------- */
@media (horizontal-viewport-segments: 2) {
  .w-list { width: calc(env(viewport-segment-right 0 0, 354px) - var(--w-side-total)); }
  .w-detail__in { padding-left: calc(36px + env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px)); }
  .w-ld .w-detail { display: block; }
  .w-ld .w-list { display: flex; }
  .w-detail__back { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .w-app *, .w-toast, .w-dialog, .w-scrim, .w-pop, .w-palette, .w-keys { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  body.is-wide { overflow: visible; }
  .w-app { height: auto; overflow: visible; }
  .w-side, .w-toolbar, .w-chiprow, .w-list { display: none !important; }
  .w-main.main, .w-detail { overflow: visible !important; }
}
.w-cal__insp .w-kv { grid-template-columns: 92px minmax(0, 1fr); }
.w-loading { margin: 0; padding: 28px 32px; color: var(--ink-500); font-size: 14px; }

/* ---------- account pages, booking setup and the full editors (phone-account.js,
   phone-booking-setup.js, phone-media.js) in the settings column ---------- */
body.is-wide .w-settings .p-card { padding: 16px 18px; }
body.is-wide .w-settings .p-card--ink { background: var(--ink-900); color: var(--sand-100); box-shadow: none; }
body.is-wide .w-settings .p-card--sage { background: var(--sage-600); color: var(--sand-50); box-shadow: none; }
body.is-wide .w-settings .p-card--warn { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
body.is-wide .w-settings .p-card--sand { background: var(--sand-200); box-shadow: none; }
body.is-wide .w-settings .p-bkonline.is-on { background: var(--sage-100); box-shadow: none; }
body.is-wide .w-settings .p-cardtitle { font-size: 24px; }
body.is-wide .w-settings .p-select { height: 38px; border-radius: 8px; font-size: 15px; }
body.is-wide .w-settings .p-time { height: 34px; border-radius: 8px; }
body.is-wide .w-settings .p-tabs { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
body.is-wide .w-settings .p-tabs__b, body.is-wide .w-bkfull .p-tabs__b { height: 32px; font: 600 13px var(--w-chrome); background: rgba(31, 26, 22, .07); }
body.is-wide .w-settings .p-tabs__b[aria-pressed="true"], body.is-wide .w-bkfull .p-tabs__b[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-100); }
body.is-wide .w-settings .p-seg { align-self: flex-start; max-width: 100%; }
body.is-wide .w-settings .p-seg button { height: 30px; font: 600 13px var(--w-chrome); padding: 0 12px; }
body.is-wide .w-settings .p-btn { font-family: var(--w-chrome); }
body.is-wide .w-settings .p-notice, body.is-wide .w-settings .p-confirm, body.is-wide .w-settings .p-formerr { border-radius: 10px; }
body.is-wide .w-settings .p-plan { border-radius: 10px; }
body.is-wide .w-settings .p-photox, body.is-wide .w-settings .p-pjphoto, body.is-wide .w-settings .p-spotx { padding: 8px; }
body.is-wide .w-settings .p-photox__img, body.is-wide .w-settings .p-pjphoto__img, body.is-wide .w-settings .p-spotx__img { border-radius: 8px; }
body.is-wide .w-settings .p-up--card { border-radius: var(--w-r-card); min-height: 160px; }
body.is-wide .w-settings .p-photosx { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body.is-wide .w-settings .p-pjphotos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
body.is-wide .w-settings .p-spotsx { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.is-wide .w-settings .p-picker { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
body.is-wide .w-settings .p-ins__tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
body.is-wide .w-settings .p-pro { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
body.is-wide .w-settings .p-appt-d { background: none; box-shadow: none; padding: 0; }
body.is-wide .w-settings .p-appt-d__svc { font-size: 40px; }
html[data-skin="android"] body.is-wide .w-settings .p-tabs__b, html[data-skin="android"] body.is-wide .w-bkfull .p-tabs__b { border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--ink-500); }
html[data-skin="android"] body.is-wide .w-settings .p-tabs__b[aria-pressed="true"], html[data-skin="android"] body.is-wide .w-bkfull .p-tabs__b[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }

/* An appointment in the detail pane: the settings column's look, without its centering. */
.w-settings--detail { margin: 0; max-width: none; }

/* Booking setup's Appointments tab: the tabs and search above the list and detail. */
.w-bkfull { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.w-bkfull__top { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.w-bkfull__top .p-tabs { margin: 0; padding: 0; overflow-x: auto; min-width: 0; }
.w-bkfull__tools { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.w-bkfull__tools .p-input { width: 220px; max-width: 100%; height: 34px; border-radius: 8px; background: rgba(31, 26, 22, .06); font-size: 14px; padding: 0 12px; }
.w-bkfull__tools .p-bkonline { padding: 4px 6px 4px 14px; border-radius: 999px; background: rgba(31, 26, 22, .06); flex-direction: row; }
.w-bkfull__tools .p-bkonline.is-on { background: var(--sage-100); }
.w-bkfull__tools .p-bkonline .p-li__title { font-size: 13px; white-space: nowrap; }
.w-bkfull > .p-notice { margin: 10px 16px 0; border-radius: 10px; }
.w-bkfull__offer { flex: none; padding: 10px 16px 0; }
.w-bkfull__offer .p-card { border-radius: 10px; }
.w-bkfull__body { flex: 1; min-height: 0; min-width: 0; display: flex; }

/* ---------- Store: the deeper pages (wide-store.js; the phone's pages, p-st-*) ---------- */
.w-st-page.is-wide { max-width: 1180px; }
.w-st-in { max-width: none; margin: 0; }
body.is-wide .w-settings .p-st-money { height: 38px; border-radius: 8px; }
body.is-wide .w-settings .p-st-money__in { font-size: 15px; }
body.is-wide .w-settings .p-st-card .p-list, body.is-wide .w-settings .p-st-bulk, body.is-wide .w-settings .p-st-group, body.is-wide .w-settings .p-st-item { background: var(--w-card); box-shadow: inset 0 0 0 1px var(--w-card-line); }
body.is-wide .w-settings .p-st-card .p-list { background: var(--sand-100); box-shadow: none; }
body.is-wide .w-settings .p-st-bulk, body.is-wide .w-settings .p-st-group, body.is-wide .w-settings .p-st-item { border-radius: var(--w-r-card); }
body.is-wide .w-settings .p-st-item.is-on { background: var(--sage-100); }
body.is-wide .w-settings .p-st-pvwell { border-radius: var(--w-r-card); }
body.is-wide .w-settings .p-st-big { font-size: 32px; }
body.is-wide .w-settings .p-st-sentence { font-size: 28px; }
body.is-wide .p-st-dock { bottom: 0; }
body.is-wide .p-st-brow.is-sel { margin: 0 -14px; }

/* Customers: the groups strip above the list and the person */
.w-st-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.w-st-strip { flex: none; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.w-st-strip .p-st-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.w-st-strip .p-st-group { background: var(--w-card); border-radius: var(--w-r-card); box-shadow: inset 0 0 0 1px var(--w-card-line); padding: 10px 12px; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.w-st-strip .p-st-group b { font-size: 26px; }
.w-st-strip .p-st-group__go { margin-top: 0; margin-left: auto; }
.w-st-sub { flex: 1; min-height: 0; min-width: 0; display: flex; }

/* Two columns once there's room */
@media (min-width: 1000px) {
  .w-st-page.is-wide .p-st-cols, .w-st-page.is-wide .p-st-pack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .w-st-page.is-wide .p-st-order { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .w-st-page.is-wide .p-st-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .w-st-page.is-wide .p-st-brow { grid-template-columns: auto auto minmax(0, 1fr) auto auto 150px; grid-template-areas: "box img t status step price"; }
}
@media (max-width: 759px) {
  .w-st-strip .p-st-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}