/* Gujarati and Devanagari at every weight.
   Some Macs answer a medium or bold weight of Gujarati with a face whose letters come out as the wrong glyphs
   (the text turns into symbols). The portal's own faces are named for those scripts only, so Latin text keeps Inter and
   Gujarati and Hindi/Marathi text is always set in a face that has them, at any weight. They are fetched only when a
   page actually shows that script. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;unicode-range:U+0A80-0AFF;src:url(/assets/newsad/Anek-SemiCondensed-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;unicode-range:U+0A80-0AFF;src:url(/assets/newsad/Anek-SemiCondensed-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;unicode-range:U+0A80-0AFF;src:url(/assets/newsad/Anek-SemiCondensed-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:700 900;unicode-range:U+0A80-0AFF;src:url(/assets/newsad/Anek-SemiCondensed-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;unicode-range:U+0900-097F;src:url(/assets/newsad/Mukta-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;unicode-range:U+0900-097F;src:url(/assets/newsad/Mukta-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;unicode-range:U+0900-097F;src:url(/assets/newsad/Mukta-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-style:normal;font-weight:700 900;unicode-range:U+0900-097F;src:url(/assets/newsad/Mukta-Bold.ttf) format("truetype");font-display:swap}
/* ================= the dashboard shell =================
 *
 * A second skin over styles.css, loaded straight after it, after the layout of the
 * invoice dashboard we were given: a dark upper zone with a huge title and glass cards,
 * and one large white panel below it that holds the work, with dark cards standing in
 * it. The colours are the portal's own — the deep browns of the side menu for the dark,
 * gold where that design has its lime, white for the panel.
 *
 * Selectors are prefixed with `body` on purpose: the module stylesheets (calendar.css,
 * ads.css …) load later and lazily, and would otherwise win on order alone.
 */
:root{
  --b0:#241405;             /* the deepest brown: behind everything */
  --b1:#35200C;             /* a dark card */
  --b2:#4A2F11;             /* the side menu's brown: a raised dark card */
  --glass:rgba(246,237,224,.055);
  --glass-2:rgba(246,237,224,.10);
  --gline:rgba(246,237,224,.12);
  --t1:#F6EDE0;             /* text on the dark */
  --t2:rgba(246,237,224,.68);
  --t3:rgba(246,237,224,.44);
  --gold:#CF9438;
  --gold-d:#A97327;
  --gold-hi:#E4AE52;
  --gap:16px;
  --page:#F1E9DB;
  --lift:0 12px 30px rgba(80,56,20,.08);
  --soft:#FAF6EF;
  --edge:#EAE1D3;
}

/* The warm page background sits on a layer of its own that the compositor holds still. `background-attachment:fixed` made the
   browser repaint the whole page on every scroll frame, which is what shows on a 120 Hz screen as a stutter. */
html{background:#F2EBDD}
body{
  background:transparent;
  color:var(--ink);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 560px at 6% -14%, rgba(207,148,56,.26), transparent 62%),
    radial-gradient(900px 620px at 112% 108%, rgba(207,148,56,.16), transparent 60%),
    linear-gradient(165deg,#F6F0E5 0%,#EFE6D6 100%);
  transform:translateZ(0);
}
html{scrollbar-color:rgba(122,82,34,.35) transparent}
*::-webkit-scrollbar-thumb{background:rgba(122,82,34,.35);background-clip:padding-box}

/* ---------- frame: no bars, just things floating on the dark ---------- */
body .app{
  padding:20px 22px 20px;gap:var(--gap);
  grid-template-columns:250px minmax(0,1fr);
  grid-template-rows:56px minmax(0,1fr);
}

/* ---------- top: the mark, a search pill, round buttons ---------- */
body .topbar{background:transparent;padding:0;gap:16px;color:var(--ink)}
body .brandmark{
  background:var(--brown);
  -webkit-mask:url("/assets/logo.png") no-repeat;mask:url("/assets/logo.png") no-repeat;
  -webkit-mask-size:calc(25px * 976 / 300) auto;mask-size:calc(25px * 976 / 300) auto;
  -webkit-mask-position:calc(-338px * 25 / 300) 0;mask-position:calc(-338px * 25 / 300) 0;
}
body .topbar__burger span{background:var(--ink)}
body .brandtext b{letter-spacing:.07em}
body .brandtext i{color:var(--ink-3)}
body .topbar__search{max-width:460px}
body .topbar__search input{
  height:44px;border-radius:999px;border:1px solid var(--edge);background:#fff;
  color:var(--ink);padding:0 18px 0 44px;box-shadow:0 4px 14px rgba(80,56,20,.05);
}
body .topbar__search input::placeholder{color:var(--ink-3)}
body .topbar__search input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(207,148,56,.2)}
body .topbar__search svg{left:16px;color:var(--ink-3)}
body .tbtn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:#fff;
  color:var(--ink-2);box-shadow:0 4px 14px rgba(80,56,20,.05);transition:background .15s,color .15s,border-color .15s;
}
body .tbtn:hover{background:var(--soft);color:var(--gold-d);border-color:var(--gold)}
body .who{background:#fff;border:1px solid var(--edge);padding:5px 16px 5px 5px;box-shadow:0 4px 14px rgba(80,56,20,.05)}
body .who__avatar{width:34px;height:34px;font-size:13px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-d))}
body .who__meta i{color:var(--ink-3)}

/* ---------- side menu: a glass card ---------- */
body .side{
  background:linear-gradient(180deg,#5E3D16,#4A2F11);
  border:0;border-radius:30px;padding:22px 0 14px;
  box-shadow:0 18px 40px rgba(74,47,17,.28);
}
body .side__title{padding:0 26px 12px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--t1)}
body .side__sect{padding:0 28px;margin:20px 0 6px;color:var(--t3)}
body .side__link{
  margin:2px 12px;padding:11px 16px;border-radius:999px;border-left:0;width:calc(100% - 24px);
  font-size:14px;color:var(--t2);
}
body .side__nav .side__link{padding-left:20px}
body .side__link:hover{background:var(--glass-2);color:var(--t1)}
body .side__link.is-on{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#2A1B06;font-weight:700;
  box-shadow:0 10px 24px rgba(207,148,56,.3);
}
body .side__add{margin:12px 14px 2px;border-radius:999px;border-color:var(--gline)}
body .side__foot{color:var(--t3)}

/* ---------- main: the title, then one white panel ---------- */
body .main{
  background:transparent;padding:0 2px 24px;overflow-y:auto;box-shadow:none;
}
body .main__head{
  position:static;margin:0 0 20px;padding:2px 4px 0;border:0;background:none;
  align-items:center;gap:18px;color:var(--ink);
}
body .main__head h1{
  font-size:clamp(34px,4.2vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--ink);
}
body .main__head p{color:var(--ink-3);font-size:13.5px;margin-top:10px}
body .crumb{color:var(--ink-3);margin-bottom:12px}
body .crumb button{
  color:var(--ink);padding:6px 14px;border-radius:999px;border:1px solid var(--edge);background:#fff;
  font-weight:500;
}
body .crumb button:hover{background:var(--soft);text-decoration:none;border-color:var(--gold)}
body .crumb span{color:var(--ink-3)}
body .main__actions{gap:10px}

/* controls that live on the dark: glass pills */
body .main__head .btn--ghost,body .bulkbar .btn--ghost{
  background:#fff;border:1px solid var(--edge);color:var(--ink);
}
body .main__head .btn--ghost:hover,body .bulkbar .btn--ghost:hover{
  background:var(--soft);border-color:var(--gold);color:var(--gold-d);
}
body .main__head .sel{
  height:42px;background-color:#fff;border:1px solid var(--edge);color:var(--ink);border-radius:999px;
  padding:0 34px 0 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B625A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
body .main__head .sel option{color:#1B1712}
body .main__head .sel:focus{border-color:var(--gold)}
body .main__head .viewtog{border:1px solid var(--edge);border-radius:999px;background:#fff;padding:3px;gap:2px}
body .main__head .viewtog button{background:transparent;color:var(--ink-3);border-radius:999px;padding:7px 16px}
body .main__head .viewtog button+button{border-left:0}
body .main__head .viewtog button:hover{color:var(--ink);background:var(--soft)}
body .main__head .viewtog button.is-on{background:var(--gold);color:#2A1B06}
body .bulkbar{color:var(--ink);margin-bottom:14px}
body .bulkbar__n{color:var(--ink-2)}

/* the white panel: whatever screen is showing sits on it */
body :is(.dash,.stores,.grid,.list,.empty):not([hidden]){
  background:#fff;border:1px solid var(--edge);border-radius:34px;padding:26px 26px 30px;
  box-shadow:var(--lift);
}
body .list{padding:8px 12px;overflow:visible}
body .grid,body .stores{padding:26px}
body .empty{color:var(--ink-3)}
body .pager{margin-top:14px;padding:0 6px}
body .pager__b{border-radius:50%}
body .pager__per select{border-radius:999px}

/* ---------- buttons: pills; gold is the one that does the thing ---------- */
body .btn{border-radius:999px;padding:11px 22px;background:var(--brown);color:#fff}
body .btn:hover{background:var(--brown-d)}
body .btn--gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#2A1B06;box-shadow:0 8px 20px rgba(207,148,56,.3)}
body .btn--gold:hover{background:linear-gradient(135deg,#F0C268,var(--gold-hi));color:#2A1B06}
body .btn--ghost{background:transparent;color:var(--ink);border:1px solid #DDD2C0}
body .btn--ghost:hover{background:var(--soft);border-color:var(--gold)}
body .btn--danger{border-radius:999px}
body .btn--sm{padding:8px 16px}
body .btn--lg{border-radius:18px}

/* ---------- inside the white panel ---------- */
/* figures: the dark cards of the reference, big numbers on brown */
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat){
  background:
    radial-gradient(260px 130px at 100% 0%, rgba(207,148,56,.20), transparent 70%),
    linear-gradient(160deg,#8A5E28,#6A4519);
  border:0;border-radius:26px;padding:20px 22px;
  box-shadow:0 18px 36px rgba(106,69,25,.26);color:var(--t1);
}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi) span{color:var(--t3)}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) b{
  color:var(--t1);font-size:34px;font-weight:500;letter-spacing:-.04em;line-height:1.1;
}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) em{color:var(--t2)}
body .ov__tile .ov__ic{background:rgba(255,255,255,.16);color:#FFE2A8;border-radius:14px}
body .pr__kpi.is-loud{background:linear-gradient(160deg,#A8453A,#7E2F26)}
body .pr__kpi.is-loud b{color:#fff}
body .ev__kpis--inset .ev__kpi{background:var(--soft);color:var(--ink);box-shadow:none}
body .ev__kpis--inset .ev__kpi b{color:var(--ink);font-size:22px}
body .ev__kpis--inset .ev__kpi span,body .ev__kpis--inset .ev__kpi em{color:var(--ink-3)}

/* cards, tables and panels: soft white on white */
body :is(.card,.store){border:1px solid var(--edge);border-radius:26px;box-shadow:0 10px 26px rgba(80,56,20,.07)}
body :is(.card,.store):hover{box-shadow:0 20px 44px rgba(80,56,20,.16);transform:translateY(-3px)}
body .store--add{border-radius:26px;box-shadow:none}
body .store--add:hover{box-shadow:none}
body :is(.ov__card,.ev__panel,.pr__panel,.qr__panel,.ev__wrap,.pr__wrap,.ev__grid,.qr__card,.rv__rep,.ads__card){
  border:1px solid var(--edge);border-radius:26px;box-shadow:0 10px 26px rgba(80,56,20,.06);
}
body .rv__rep:hover{box-shadow:0 20px 44px rgba(80,56,20,.16)}

/* a row in a list: the one under the pointer goes dark, like the picked invoice */
body .row{border-radius:20px;border-bottom:0;margin:2px 0;transition:background .16s,color .16s}
body .row--head{background:transparent;border-bottom:0;margin-bottom:2px}
body .row:not(.row--head):hover{background:linear-gradient(135deg,#8A5E28,#6A4519);color:var(--t1)}
body .row:not(.row--head):hover .row__col b{color:var(--t3)}
body .row:not(.row--head):hover .row__col.is-blank span{color:var(--t3)}
body .row__btn{border-radius:999px}
body .row:hover .row__btn{background:var(--gold);border-color:var(--gold);color:#2A1B06}
body .row__thumb{border-radius:14px}
body .row__n{border-radius:999px}

/* status as pills */
body .pill{padding:6px 14px 6px 11px}

/* the pill switchers inside the panel (view toggles, range pickers, tabs) take the gold */
body .viewtog{border-radius:999px}
body :is(.ev__ranges,.ads__ranges) {border-radius:999px}

/* ---------- forms and dialogs stay white, rounder ---------- */
body :is(.sel,.inp,textarea.inp){border-radius:14px}
body .fld :is(input,select,textarea){border-radius:14px}
body .modal__scrim{background:rgba(42,24,8,.5)}
body .modal__box{border-radius:32px;box-shadow:0 40px 90px rgba(0,0,0,.55)}
body .toast{border-radius:999px}

/* ---------- sign-in ---------- */
body .login__card{border-radius:32px}
body .login__card .fld input{border-radius:14px}

/* ---------- phones and narrow windows: the frame gives way ---------- */
@media (max-width:980px){
  body .app{padding:0;gap:0;grid-template-columns:1fr;grid-template-rows:auto}
  body .topbar{padding:0 12px;background:#fff;border-bottom:1px solid var(--edge)}
  body .tbtn{width:40px;height:40px}
  body .topbar__search input{height:40px}
  body .side{border-radius:0;border:0;box-shadow:none}
  body .main{padding:16px 12px 40px}
  body .main__head{margin-bottom:16px}
  body :is(.dash,.stores,.grid,.list,.empty):not([hidden]){border-radius:26px;padding:16px}
  body .list{padding:6px 8px}
}
@media (max-width:640px){
  body .main__head h1{font-size:32px}
  body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) b{font-size:28px}
  body :is(.dash,.stores,.grid,.list,.empty):not([hidden]){padding:12px;border-radius:22px}
}

/* `.ov__tile span` (the label) also matched the icon box, which is a span, and turned its
   centring grid into a plain block — the icon slid to the corner of its square */
body .ov__tile .ov__ic{
  display:grid;place-items:center;overflow:visible;flex:none;
  width:46px;height:46px;border-radius:16px;font-size:0;
}
body .ov__tile .ov__ic svg{width:21px;height:21px;margin:0}

/* every icon box, wherever a label rule for `span` also reaches it */
body .ov__ic{
  display:grid !important;place-items:center;overflow:visible;flex:none;font-size:0;
  white-space:normal;text-overflow:clip;
}
body .ov__ic--sm{width:36px;height:36px;border-radius:12px}
body .ov__ic svg{margin:0;display:block}
body .ov__ic--sm svg{width:17px;height:17px}
body .ov__ic--warn{width:40px;height:40px;border-radius:14px}

/* ================= Overview, as a dashboard =================
   Two brown cards of figures, a pill switcher, then a white panel: a list on the left and
   the one picked, opened up on a brown card on the right. */
body #overview:not([hidden]){background:none;border:0;box-shadow:none;padding:0}
.ovx{display:grid;gap:18px;min-width:0}
.ovx__hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px}
.ovx__card{
  position:relative;min-width:0;border-radius:32px;padding:26px 28px;color:var(--t1);overflow:hidden;
  background:radial-gradient(420px 220px at 100% 0%, rgba(228,174,82,.22), transparent 70%),
             linear-gradient(160deg,#6A4519,#4A2F11);
  box-shadow:0 22px 46px rgba(74,47,17,.28);
}
.ovx__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-content:start}
.ovx__m{min-width:0;display:grid;gap:4px;align-content:start}
.ovx__m span{font-size:12.5px;font-weight:500;color:var(--t2)}
.ovx__m b{font-size:clamp(28px,2.7vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.1;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__m em{font-style:normal;font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__track{display:block;height:7px;border-radius:99px;background:rgba(246,237,224,.16);margin-top:14px;overflow:hidden}
.ovx__track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#E4AE52,#F3CB7B)}
.ovx__m small{font-size:11.5px;color:var(--t2);margin-top:4px}

.ovx__media{display:grid;gap:8px;align-content:start}
.ovx__mtop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ovx__mtop span{font-size:12.5px;font-weight:500;color:var(--t2)}
.ovx__mtop em{font-style:normal;font-size:11px;padding:4px 12px;border-radius:99px;background:rgba(246,237,224,.12);color:var(--t1)}
.ovx__big{font-size:clamp(32px,3.2vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1.1;color:#fff}
.ovx__chips{display:flex;gap:8px;flex-wrap:wrap}
.ovx__chips span{font-size:12px;padding:5px 12px;border-radius:99px;border:1px solid var(--gline);color:var(--t1);background:rgba(246,237,224,.08)}
.ovx__chart{min-height:96px}
.ovx__chart p{margin:8px 0;font-size:12.5px;color:var(--t3)}
.ovx__chart svg{width:100%;height:auto;max-height:130px}
.ovx__chart .ov__line{stroke:#F3CB7B}
.ovx__chart .ov__area{fill:rgba(243,203,123,.16)}
.ovx__chart .ov__ax{fill:rgba(246,237,224,.55)}
.ovx__chart .ov__grid{stroke:rgba(246,237,224,.12)}
.ovx__chart .ov__dot{fill:#F3CB7B}
.ovx__go{
  justify-self:start;margin-top:6px;padding:12px 24px;border-radius:99px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06;border:0;box-shadow:0 8px 20px rgba(228,174,82,.3);
}
.ovx__go:hover{background:linear-gradient(135deg,#F7D184,#EBB95E)}

/* the pill switcher */
.ovx__bar{display:flex;justify-content:center}
.ovx__tabs{display:inline-flex;gap:4px;padding:5px;border-radius:99px;background:#fff;border:1px solid var(--edge);
  box-shadow:0 8px 22px rgba(80,56,20,.08);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ovx__tabs button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s;
}
.ovx__tabs button i{font-style:normal;font-size:11px;min-width:20px;padding:2px 6px;border-radius:99px;background:var(--soft);color:var(--ink-3);text-align:center}
.ovx__tabs button:hover{background:var(--soft)}
.ovx__tabs button.is-on{background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06}
.ovx__tabs button.is-on i{background:rgba(42,27,6,.14);color:#2A1B06}

/* the white panel */
.ovx__panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start;
  background:#fff;border:1px solid var(--edge);border-radius:36px;padding:26px;
  box-shadow:0 14px 34px rgba(80,56,20,.08);
}
.ovx__lh{margin:0 0 12px 6px;font-size:15px;font-weight:600}
.ovx__list{display:grid;gap:6px;min-width:0;align-content:start}
.ovx__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;
  width:100%;text-align:left;padding:10px 16px 10px 10px;border-radius:99px;font:inherit;cursor:pointer;
  transition:background .15s,color .15s;
}
.ovx__row:hover{background:var(--soft)}
.ovx__row.is-on{background:linear-gradient(135deg,#6A4519,#4A2F11);color:#fff;box-shadow:0 12px 26px rgba(74,47,17,.28)}
.ovx__rt{min-width:0;display:grid;gap:1px}
.ovx__rt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__rt em{font-style:normal;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__row.is-on .ovx__rt em{color:var(--t3)}
.ovx__rv{display:grid;justify-items:end;gap:1px}
.ovx__rv b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ovx__rv em{font-style:normal;font-size:11px;color:var(--ink-3)}
.ovx__row.is-on .ovx__rv em{color:var(--t3)}
.ovx__row .ov__date{background:var(--soft);border-radius:14px}
.ovx__row.is-on .ov__date{background:rgba(246,237,224,.14)}
.ovx__row.is-on .ov__date b,.ovx__row.is-on .ov__date i{color:#fff}
.ovx__row .ov__ic{background:var(--soft)}
.ovx__row.is-on .ov__ic{background:rgba(246,237,224,.14);color:#FFE2A8}

/* the opened-up card */
.ovx__detail{
  border-radius:30px;padding:24px;color:var(--t1);min-width:0;display:grid;gap:18px;
  background:radial-gradient(360px 200px at 100% 0%, rgba(228,174,82,.2), transparent 70%),
             linear-gradient(160deg,#6A4519,#4A2F11);
  box-shadow:0 18px 40px rgba(74,47,17,.26);
}
.ovx__detail--empty{place-items:center;min-height:200px;color:var(--t2)}
.ovx__dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ovx__dhead span{display:block;font-size:12.5px;color:var(--t2);margin-bottom:6px}
.ovx__dhead b{display:block;font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:#fff;overflow-wrap:anywhere}
.ovx__chip{font-style:normal;flex:none;font-size:12px;font-weight:600;padding:6px 14px;border-radius:99px;
  border:1px solid var(--gline);background:rgba(246,237,224,.1);text-transform:capitalize}
.ovx__cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.ovx__cell{border-radius:22px;padding:16px 18px;background:rgba(246,237,224,.08);border:1px solid rgba(246,237,224,.08);display:grid;gap:6px;align-content:start;min-width:0}
.ovx__cell span{font-size:12px;color:var(--t3)}
.ovx__cell b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.ovx__cell .ovx__track{margin-top:4px}
.ovx__shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ovx__shots img{width:100%;height:84px;object-fit:cover;border-radius:16px;background:rgba(246,237,224,.1)}
.ovx__dfoot{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid rgba(246,237,224,.1)}
.ovx__dfoot .ovx__go{margin-top:12px}

@media (max-width:1180px){
  .ovx__hero{grid-template-columns:minmax(0,1fr)}
  .ovx__panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ovx__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ovx__card{padding:20px}
  .ovx__panel{padding:14px;border-radius:26px}
  .ovx__row{grid-template-columns:auto minmax(0,1fr) auto;border-radius:22px}
  .ovx__row .ov__pill{display:none}
  .ovx__bar{justify-content:flex-start}
}

/* ================= the menu moves to the top =================
   The side menu becomes a white pill in the top bar, as in the reference: one round icon
   per place, the one you are in opened out with its name, and the groups (material,
   hiring, ads, events) drop a card of their own when pointed at. The markup is the same —
   only where it sits and how it is drawn has changed — so nothing that finds a button by
   its id has been touched. Phones keep the drawer. */
@media (min-width:981px){
  body .app{
    padding:18px 24px 22px;gap:18px 16px;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"brand nav search right" "main main main main";
  }
  body .topbar{display:contents}
  body .topbar__brand{grid-area:brand;align-self:center}
  body .topbar__search{grid-area:search;width:230px;max-width:none;margin:0;align-self:center}
  body .topbar__right{grid-area:right;margin:0;align-self:center}
  body .side__scrim{display:none}

  body .side{
    grid-area:nav;justify-self:center;align-self:center;max-width:100%;
    display:flex;flex-direction:row;align-items:center;gap:2px;height:56px;padding:6px;
    background:#fff;border:1px solid var(--edge);border-radius:99px;
    box-shadow:0 12px 30px rgba(80,56,20,.12);overflow:visible;backdrop-filter:none;
  }
  body .side :is(.side__title,.side__sect,.side__foot){display:none !important}

  body .side__link{
    position:relative;margin:0;width:auto;height:44px;padding:0 13px;gap:8px;border-radius:99px;
    color:var(--ink-2);font-size:13.5px;font-weight:600;justify-content:center;flex:none;
    transition:background .15s,color .15s;
  }
  body .side__link svg{width:19px;height:19px;opacity:1}
  body .side__link:hover{background:var(--soft);color:var(--ink)}
  body .side__link.is-on,
  body .side__group:has(.side__fold .is-on)>.side__link--group{
    background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06;
    box-shadow:0 8px 18px rgba(228,174,82,.35);
  }
  body .side__chev{display:none}

  /* a name only for the place you are in; the others say theirs when pointed at */
  body .side__link b{
    position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
    padding:5px 12px;border-radius:99px;background:#2A1808;color:#fff;font-size:12px;font-weight:600;
    white-space:nowrap;opacity:0;pointer-events:none;z-index:70;transition:opacity .12s;
    overflow:visible;flex:none;
  }
  body .side__link:hover b{opacity:1}
  body .side__link.is-on b,
  body .side__group:has(.side__fold .is-on)>.side__link--group b{
    position:static;transform:none;opacity:1;padding:0;background:none;color:inherit;font-size:13.5px;pointer-events:auto;
  }

  /* groups: a card that drops from the icon */
  body .side__group{position:relative;display:block;flex:none}
  body .side__fold{
    display:none;position:absolute;top:calc(100% + 12px);left:0;z-index:60;min-width:250px;
    padding:10px;border-radius:26px;overflow:visible;
    background:linear-gradient(160deg,#6A4519,#4A2F11);box-shadow:0 24px 50px rgba(42,24,8,.38);
  }
  body .side__fold::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  body #evGroup .side__fold,body #adsGroup .side__fold,body #reportsGroup .side__fold{left:auto;right:0}
  body .side__group:hover>.side__fold,
  body .side__group:focus-within>.side__fold{display:block}
  body .side__fold>*{overflow:visible}
  body .side__fold .side__nav{display:grid;gap:2px}
  body .side__fold .side__link,
  body #catNav .side__link{
    width:100%;height:auto;padding:10px 14px;justify-content:flex-start;border-radius:16px;
    color:var(--t2);font-size:14px;font-weight:500;box-shadow:none;background:none;
  }
  body .side__fold .side__link:hover{background:rgba(246,237,224,.12);color:#fff}
  body .side__fold .side__link.is-on{background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06;font-weight:700}
  body .side__fold .side__link b{
    position:static;transform:none;opacity:1;padding:0;background:none;color:inherit;
    font-size:14px;font-weight:inherit;pointer-events:auto;
  }
  body .side__fold .side__add{display:block;width:calc(100% - 8px);margin:8px 4px 2px;padding:10px;border-radius:99px;
    border:1px dashed rgba(246,237,224,.3);color:var(--t2)}
  body .side__fold .side__add:hover{background:rgba(246,237,224,.1);color:#fff}
  body .side__fold p{padding:8px 14px !important;color:var(--t3) !important}

  body .main{grid-area:main}
}

/* ================= Settings, as a page =================
   It used to be a dialog. It is a screen now, on the same white panel as the rest, with
   its sections as the pill switcher across the top. */
body #settings:not([hidden]){padding:22px 26px 30px}
.setpage{display:grid;gap:22px;min-width:0}
body .setpage__tabs{
  position:static;display:inline-flex;justify-self:start;gap:4px;padding:5px;max-width:100%;
  border:1px solid var(--edge);border-radius:99px;background:#fff;
  box-shadow:0 8px 22px rgba(80,56,20,.08);overflow-x:auto;scrollbar-width:none;
}
body .setpage__tabs::-webkit-scrollbar{display:none}
body .setpage__tabs .tab{
  flex:none;padding:9px 18px;margin:0;border:0;border-radius:99px;font-size:13.5px;color:var(--ink-2);
}
body .setpage__tabs .tab:hover{background:var(--soft);color:var(--ink)}
body .setpage__tabs .tab.is-on{background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06}
body .setpage__body{padding:0;max-width:1100px}
body .setpage__body .tbl{border:1px solid var(--edge);border-radius:22px;overflow:hidden;border-collapse:separate;border-spacing:0}
body #btnSettings.is-on{background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06;border-color:transparent}

/* the group buttons were set white when they sat on the brown side menu */
@media (min-width:981px){
  body .side .side__link--group,
  body .side .side__link--group[aria-expanded="true"]{color:var(--ink-2)}
  body .side .side__link--group:hover{color:var(--ink)}
  body .side__group:has(.side__fold .is-on)>.side__link--group,
  body .side .side__link--group.is-on{color:#2A1B06}
}

/* the pill is the middle of a row with the brand, the search and the account either
   side of it, so on a modest screen those give way before it does */
@media (min-width:981px) and (max-width:1560px){
  body .who__meta{display:none}
  body .who{padding:4px}
  body .topbar__search{width:190px}
  body .side__link{padding:0 11px}
}
/* the name beside the mark only gives way when there is truly no room for it */
@media (min-width:981px) and (max-width:1279px){
  body .brandtext{display:none}
}
@media (min-width:981px) and (max-width:1220px){
  body .topbar__search{width:150px}
  body .side__link{padding:0 9px}
}

@media (min-width:981px){
  body #catNav .side__link:hover{background:rgba(246,237,224,.12);color:#fff}
  body #catNav .side__link.is-on{background:linear-gradient(135deg,#F0C268,#E4AE52);color:#2A1B06;font-weight:700}
  body #catNav .side__link svg{opacity:.9}
}

/* `body .btn` (brown) outranked the quieter variants, so Delete came out as a solid button */
body .btn.btn--danger{background:#fff;color:var(--bad);border:1px solid #E9C7C3}
body .btn.btn--danger:hover{background:#FDF3F2}
body .btn.btn--ghost{background:transparent;color:var(--ink)}
body .main__head .btn.btn--ghost{background:#fff}


/* ================= motion: the menu =================  */
@media (min-width:981px){
  /* the one gold highlight, gliding behind whichever button is the current place */
  body #side{position:relative}
  body #side .side__ink{
    position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:99px;pointer-events:none;opacity:0;
    background:linear-gradient(135deg,#F3CB7B,#E4AE52);
    box-shadow:0 8px 20px rgba(228,174,82,.4);will-change:transform;
  }
  body #side .side__ink.is-ready{
    transition:transform .5s cubic-bezier(.34,1.25,.5,1),width .5s cubic-bezier(.34,1.25,.5,1),
               height .3s,opacity .25s;
  }
  body #side>.side__link,body #side>.side__group>.side__link--group{position:relative;z-index:1;gap:0}
  /* a button that is the current place no longer paints itself; the highlight does */
  body #side>.side__link.is-on,
  body #side>.side__group>.side__link--group.is-on,
  body #side>.side__group:has(.side__fold .is-on)>.side__link--group{
    background:transparent;box-shadow:none;color:#2A1B06;
  }
  /* the label opens out of the icon instead of appearing */
  body #side>.side__link>b,body #side>.side__group>.side__link--group>b{
    position:static;transform:none;display:block;max-width:0;margin:0;padding:0;opacity:0;overflow:hidden;
    background:none;color:inherit;font-size:13.5px;pointer-events:none;white-space:nowrap;
    transition:max-width .45s cubic-bezier(.22,.8,.2,1),opacity .3s ease,margin .45s cubic-bezier(.22,.8,.2,1);
  }
  body #side>.side__link.is-on>b,
  body #side>.side__group>.side__link--group.is-on>b,
  body #side>.side__group:has(.side__fold .is-on)>.side__link--group>b{max-width:190px;opacity:1;margin-left:8px;transition-delay:.04s}
  body #side>.side__link:active,body #side>.side__group>.side__link--group:active{transform:scale(.94)}
  body #side>.side__link svg,body #side>.side__group>.side__link--group>svg{transition:transform .25s cubic-bezier(.34,1.56,.5,1)}
  body #side>.side__link:hover svg,body #side>.side__group>.side__link--group:hover>svg{transform:scale(1.14)}

  /* a name under the button, for the ones that are folded */
  body #side>.side__link::after,body #side>.side__group>.side__link--group::after{
    content:attr(data-tip);position:absolute;top:calc(100% + 12px);left:50%;
    transform:translate(-50%,-6px) scale(.92);padding:5px 12px;border-radius:99px;background:#2A1808;color:#fff;
    font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;z-index:70;
    transition:opacity .16s,transform .2s cubic-bezier(.34,1.56,.5,1);
  }
  body #side>.side__link:not(.is-on):hover::after,
  body #side>.side__group:not(:hover):not(:focus-within):not(:has(.is-on))>.side__link--group:hover::after{
    opacity:1;transform:translate(-50%,0) scale(1);
  }

  /* ---- the drop-down card ---- */
  body .side__fold{
    display:block;visibility:hidden;opacity:0;pointer-events:none;
    min-width:268px;padding:8px;border-radius:28px;
    background:
      radial-gradient(240px 140px at 100% 0%, rgba(228,174,82,.22), transparent 70%),
      linear-gradient(160deg,#6E4819,#46290F);
    border:1px solid rgba(246,237,224,.1);
    box-shadow:0 30px 60px rgba(42,24,8,.42),0 2px 0 rgba(255,255,255,.06) inset;
    transform-origin:28px -8px;transform:translateY(-10px) scale(.94);
    transition:opacity .2s ease,transform .32s cubic-bezier(.2,1.05,.3,1),visibility 0s linear .32s;
  }
  body #evGroup .side__fold,body #adsGroup .side__fold,body #reportsGroup .side__fold{transform-origin:calc(100% - 28px) -8px}
  body .side__group:hover>.side__fold,
  body .side__group:focus-within>.side__fold{
    visibility:visible;opacity:1;pointer-events:auto;transform:none;
    transition:opacity .2s ease,transform .32s cubic-bezier(.2,1.05,.3,1),visibility 0s;
  }
  /* a little notch pointing at the icon that opened it */
  body .side__fold::after{
    content:"";position:absolute;top:-6px;left:26px;width:14px;height:14px;border-radius:4px 0 0 0;
    background:#6E4819;transform:rotate(45deg);border-left:1px solid rgba(246,237,224,.1);border-top:1px solid rgba(246,237,224,.1);
  }
  body #evGroup .side__fold::after,body #adsGroup .side__fold::after,body #reportsGroup .side__fold::after{left:auto;right:26px}
  /* what the card is */
  body .side__fold>div{position:relative}
  body .side__fold>div::before{
    content:attr(data-title);display:block;padding:10px 14px 8px;font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:rgba(246,237,224,.5);
  }
  /* the items come in one after another */
  body .side__fold .side__link{
    opacity:0;transform:translateY(-8px);gap:12px;position:relative;overflow:hidden;
    transition:opacity .26s ease,transform .34s cubic-bezier(.2,1.05,.3,1),background .16s,color .16s,padding .2s;
    transition-delay:0s;
  }
  body .side__group:hover .side__fold .side__link,
  body .side__group:focus-within .side__fold .side__link{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 38ms + 60ms),calc(var(--i,0) * 38ms + 60ms),0s,0s,0s}
  body .side__fold .side__link:nth-child(1){--i:1} body .side__fold .side__link:nth-child(2){--i:2}
  body .side__fold .side__link:nth-child(3){--i:3} body .side__fold .side__link:nth-child(4){--i:4}
  body .side__fold .side__link:nth-child(5){--i:5} body .side__fold .side__link:nth-child(6){--i:6}
  body .side__fold .side__link:nth-child(7){--i:7} body .side__fold .side__link:nth-child(8){--i:8}
  body .side__fold .side__link:nth-child(9){--i:9} body .side__fold .side__link:nth-child(10){--i:10}
  /* the icon sits in a round chip; hover slides the row and turns the chip gold */
  body .side__fold .side__link svg{
    flex:none;width:32px;height:32px;padding:8px;border-radius:50%;opacity:1;
    background:rgba(246,237,224,.1);transition:background .18s,color .18s,transform .25s cubic-bezier(.34,1.56,.5,1);
  }
  body .side__fold .side__link:hover{padding-left:18px}
  body .side__fold .side__link:hover svg{background:rgba(228,174,82,.28);color:#F3CB7B;transform:scale(1.08)}
  body .side__fold .side__link.is-on svg{background:rgba(42,27,6,.14);color:#2A1B06}
  body .side__fold .side__link::after{
    content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;
    border-right:2px solid currentColor;border-top:2px solid currentColor;transform:translateX(-6px) rotate(45deg);
    opacity:0;transition:opacity .18s,transform .22s;
  }
  body .side__fold .side__link:hover::after{opacity:.7;transform:translateX(0) rotate(45deg)}
  body .side__fold .side__add{opacity:0;transform:translateY(-6px);
    transition:opacity .26s ease .3s,transform .3s cubic-bezier(.2,1.05,.3,1) .3s,background .16s,color .16s}
  body .side__group:hover .side__fold .side__add,
  body .side__group:focus-within .side__fold .side__add{opacity:1;transform:none}
}

/* ================= motion: moving between pages ================= */
@keyframes pageIn{from{opacity:0;transform:translateY(18px) scale(.992)}to{opacity:1;transform:none}}
@keyframes titleIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes subIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body .main>:is(.dash,.stores,.grid,.list,.empty):not([hidden]){
  animation:pageIn .5s cubic-bezier(.22,.8,.2,1) both;
}
body .main__head.is-swap h1{animation:titleIn .55s cubic-bezier(.22,.8,.2,1) both}
body .main__head.is-swap :is(p,.crumb){animation:subIn .5s cubic-bezier(.22,.8,.2,1) .06s both}
body .main__head.is-swap .main__actions{animation:subIn .5s cubic-bezier(.22,.8,.2,1) .1s both}
@media (prefers-reduced-motion:reduce){
  body .main>*,body .main__head.is-swap *,body #side *,body .side__fold,body .side__fold *{
    animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important;
  }
}


/* ================= phones and tablets: a top bar and a drawer worth opening ================= */
@media (max-width:980px){
  body .topbar{
    position:sticky;top:0;z-index:45;height:62px;padding:env(safe-area-inset-top) 12px 0;gap:10px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:0;border-radius:0 0 26px 26px;box-shadow:0 10px 28px rgba(80,56,20,.12);
  }
  :root{--topstick:calc(62px + env(safe-area-inset-bottom,0px))}
  body .topbar__burger{
    display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;margin:0;padding:0;gap:0;
    border-radius:50%;border:1px solid var(--edge);background:#fff;position:relative;
  }
  body .topbar__burger span{position:absolute;width:17px;height:2px;border-radius:2px;background:var(--brown);
    transition:transform .3s cubic-bezier(.34,1.3,.5,1),opacity .2s}
  body .topbar__burger span:nth-child(1){transform:translateY(-5px)}
  body .topbar__burger span:nth-child(3){transform:translateY(5px)}
  body:has(#side.is-open) .topbar__burger span:nth-child(1){transform:rotate(45deg)}
  body:has(#side.is-open) .topbar__burger span:nth-child(2){opacity:0}
  body:has(#side.is-open) .topbar__burger span:nth-child(3){transform:rotate(-45deg)}
  body .topbar__brand{gap:9px}
  body .brandtext{display:none}
  body .topbar__search{flex:1;min-width:0;max-width:none;margin:0}
  body .topbar__search input{height:42px;font-size:15px;padding-left:40px}
  body .topbar__right{gap:6px}
  body .tbtn{width:42px;height:42px}
  body .who{display:none}

  /* the drawer */
  body .side{
    width:min(318px,86vw);padding:calc(78px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
    border-radius:0 34px 34px 0;border:0;z-index:44;
    background:radial-gradient(300px 220px at 100% 0%, rgba(228,174,82,.22), transparent 70%),linear-gradient(175deg,#6A4519,#432810);
    transform:translateX(-104%);transition:transform .42s cubic-bezier(.22,.9,.28,1);
    box-shadow:none;
  }
  body .side.is-open{transform:none;box-shadow:24px 0 60px rgba(30,16,4,.5)}
  body .side__title{font-size:0;padding:0 26px 6px}
  body .side__title::after{content:"Menu";font-size:26px;font-weight:600;letter-spacing:-.03em;color:#fff}
  body .side__sect{padding:0 28px;margin:18px 0 6px}
  body .side__link{margin:2px 14px;padding:12px 18px;width:calc(100% - 28px);font-size:15px}
  body .side__link svg{width:20px;height:20px}
  body .side__nav .side__link,body #catNav .side__link{padding-left:30px;font-size:14px}
  body .side__foot{padding:16px 28px 0}
  body .side__scrim{
    display:block;background:rgba(32,18,6,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    transition:opacity .35s ease;
  }
  /* the entries come in one after another when the drawer opens */
  body .side>*{opacity:0;transform:translateX(-18px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,.9,.28,1)}
  body .side.is-open>*{opacity:1;transform:none}
  body .side.is-open>*:nth-child(1){transition-delay:.06s} body .side.is-open>*:nth-child(2){transition-delay:.09s}
  body .side.is-open>*:nth-child(3){transition-delay:.12s} body .side.is-open>*:nth-child(4){transition-delay:.15s}
  body .side.is-open>*:nth-child(5){transition-delay:.18s} body .side.is-open>*:nth-child(6){transition-delay:.21s}
  body .side.is-open>*:nth-child(7){transition-delay:.24s} body .side.is-open>*:nth-child(8){transition-delay:.27s}
  body .side.is-open>*:nth-child(9){transition-delay:.30s} body .side.is-open>*:nth-child(10){transition-delay:.33s}
  body .side.is-open>*:nth-child(n+11){transition-delay:.36s}
  body .side__ink{display:none}
}
@media (min-width:521px) and (max-width:980px){
  body .brandtext{display:flex}
  body .topbar__search{max-width:340px;margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  body .side,body .side>*{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ================= a lighter skin =================
   Too many boxes had gone to deep brown. The big cards, the figures, the picked row and the
   drop-downs are champagne and white now, with brown kept for type and gold for what is
   active. Declared last so it can say so without touching the rules above. */
:root{--champ:#FFF3D9;--champ-2:#FCE9BE;--champ-line:#F1DDB0;--gold-ink:#3A2410}

/* ---- Overview ---- */
body .ovx__card{
  background:radial-gradient(420px 220px at 100% 0%, rgba(240,194,104,.38), transparent 70%),
             linear-gradient(160deg,#FFFFFF,var(--champ));
  border:1px solid var(--champ-line);color:var(--ink);box-shadow:0 18px 40px rgba(197,140,54,.14);
}
body .ovx__m span,body .ovx__mtop span{color:var(--ink-3)}
body .ovx__m b,body .ovx__big{color:var(--gold-ink)}
body .ovx__m em{color:var(--ink-3)}
body .ovx__m small{color:var(--ink-2)}
body .ovx__track{background:#F1E3C6}
body .ovx__mtop em{background:var(--champ-2);color:var(--gold-ink)}
body .ovx__chips span{border-color:var(--champ-line);background:#fff;color:var(--ink-2)}
body .ovx__chart p{color:var(--ink-3)}
body .ovx__chart .ov__line{stroke:#C58C36}
body .ovx__chart .ov__area{fill:rgba(197,140,54,.16)}
body .ovx__chart .ov__ax{fill:var(--ink-3)}
body .ovx__chart .ov__grid{stroke:#EFE0BF}
body .ovx__chart .ov__dot{fill:#C58C36}
body .ovx__row.is-on{
  background:linear-gradient(135deg,var(--champ-2),#F7D98F);color:var(--gold-ink);
  box-shadow:0 10px 22px rgba(197,140,54,.24);
}
body .ovx__row.is-on .ovx__rt em,body .ovx__row.is-on .ovx__rv em{color:var(--ink-2)}
body .ovx__row.is-on .ov__date{background:rgba(255,255,255,.65)}
body .ovx__row.is-on .ov__date b,body .ovx__row.is-on .ov__date i{color:var(--gold-ink)}
body .ovx__row.is-on .ov__ic{background:rgba(255,255,255,.65);color:var(--gold-d)}
body .ovx__detail{
  background:radial-gradient(360px 200px at 100% 0%, rgba(240,194,104,.34), transparent 70%),
             linear-gradient(160deg,#FFFEFA,var(--champ));
  border:1px solid var(--champ-line);color:var(--ink);box-shadow:0 14px 32px rgba(197,140,54,.12);
}
body .ovx__detail--empty{color:var(--ink-3)}
body .ovx__dhead span{color:var(--ink-3)}
body .ovx__dhead b{color:var(--gold-ink)}
body .ovx__chip{border-color:var(--champ-line);background:var(--champ-2);color:var(--gold-ink)}
body .ovx__cell{background:#fff;border:1px solid #F2E7D0}
body .ovx__cell span{color:var(--ink-3)}
body .ovx__cell b{color:var(--gold-ink)}
body .ovx__shots img{background:#F6EEDD}
body .ovx__dfoot{border-top-color:#F1E6CF}

/* ---- the figures on every screen ---- */
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat){
  background:radial-gradient(240px 120px at 100% 0%, rgba(240,194,104,.3), transparent 70%),
             linear-gradient(160deg,#FFFFFF,#FFF5E0);
  border:1px solid var(--champ-line);color:var(--ink);box-shadow:0 12px 28px rgba(197,140,54,.12);
}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi) span{color:var(--ink-3)}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) b{color:var(--gold-ink)}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) em{color:var(--ink-2)}
body .ov__tile .ov__ic{background:var(--champ-2);color:var(--gold-d)}
body .pr__kpi.is-loud{background:linear-gradient(160deg,#FFF6F4,#FDE7E3);border-color:#F2CFCA}
body .pr__kpi.is-loud b{color:#A8453A}
body .ev__kpis--inset .ev__kpi{background:var(--soft);box-shadow:none}

/* ---- lists ---- */
body .row:not(.row--head):hover{background:linear-gradient(135deg,#FFF8E8,var(--champ));color:var(--ink)}
body .row:not(.row--head):hover .row__col b,
body .row:not(.row--head):hover .row__col.is-blank span{color:var(--ink-3)}
body .row:not(.row--head):hover .row__col.is-blank span{color:var(--line)}

/* ---- menu drop-downs: white cards ---- */
@media (min-width:981px){
  body .side__fold{
    background:#fff;border:1px solid var(--edge);
    box-shadow:0 30px 60px rgba(80,56,20,.2),0 4px 14px rgba(80,56,20,.06);
  }
  body .side__fold::after{background:#fff;border-left-color:var(--edge);border-top-color:var(--edge)}
  body .side__fold>div::before{color:var(--ink-3)}
  body .side__fold .side__link,body #catNav .side__link{color:var(--ink-2)}
  body .side__fold .side__link:hover,body #catNav .side__link:hover{background:#FFF6E3;color:var(--gold-ink)}
  body .side__fold .side__link svg{background:#F6EFE3;color:var(--ink-2)}
  body .side__fold .side__link:hover svg{background:var(--champ-2);color:var(--gold-d)}
  body .side__fold .side__link.is-on,body #catNav .side__link.is-on{
    background:linear-gradient(135deg,#F7D98F,#EDB955);color:#2A1B06;
  }
  body .side__fold .side__link.is-on svg{background:rgba(255,255,255,.55);color:#2A1B06}
  body .side__fold .side__add{border-color:#E4D6BA;color:var(--ink-3)}
  body .side__fold .side__add:hover{background:#FFF6E3;color:var(--gold-ink)}
  body .side__fold p{color:var(--ink-3) !important}
}

/* ---- the phone drawer: light too ---- */
@media (max-width:980px){
  body .side{
    background:radial-gradient(300px 220px at 100% 0%, rgba(240,194,104,.32), transparent 70%),
               linear-gradient(175deg,#FFFFFF,var(--champ));
  }
  body .side.is-open{box-shadow:24px 0 60px rgba(80,56,20,.3)}
  body .side__title::after{color:var(--gold-ink)}
  body .side__sect{color:var(--ink-3)}
  body .side__link{color:var(--ink-2)}
  body .side__link:hover{background:rgba(255,255,255,.8);color:var(--ink)}
  body .side__link.is-on{background:linear-gradient(135deg,#F7D98F,#EDB955);color:#2A1B06;box-shadow:0 8px 18px rgba(197,140,54,.3)}
  body .side__link--group,body .side__link--group[aria-expanded="true"]{color:var(--gold-ink)}
  body .side__add{border-color:#E4D6BA;color:var(--ink-3)}
  body .side__add:hover{background:#fff;color:var(--gold-ink)}
  body .side__foot{color:var(--ink-3)}
  body #catNav .side__link{color:var(--ink-2)}
  body #catNav .side__link.is-on{color:#2A1B06}
  body .side__scrim{background:rgba(60,40,16,.4)}
}


/* ================= motion, the way a phone does it =================
   Springs rather than linear ramps: things arrive a touch fast, overshoot by a hair and
   settle. Entrances are short and staggered so a screen builds itself rather than
   appearing; presses give a little under the finger; nothing moves for longer than it
   needs to. Everything below stands down for people who ask their system for less. */
:root{
  --spring:cubic-bezier(.32,1.25,.42,1);
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body .main{scroll-behavior:smooth}

@keyframes appleIn{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{opacity:0;transform:translateY(30px) scale(.93)}to{opacity:1;transform:none}}
@keyframes blurIn{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@keyframes detailIn{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ringIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* a screen builds itself: its cards and rows arrive in turn */
body :is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,
         .qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*){
  animation:appleIn .75s var(--ease) both;
  animation-delay:calc(min(var(--i,1),12) * 52ms);
}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(1){--i:1}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(2){--i:2}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(3){--i:3}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(4){--i:4}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(5){--i:5}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(6){--i:6}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(7){--i:7}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(8){--i:8}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(9){--i:9}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(10){--i:10}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(11){--i:11}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(12){--i:12}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(13){--i:13}
:is(.grid>.card,.stores>.store,.list>.row,.ev__kpis>*,.pr__kpis>*,.qr__kpis>*,.ads__kpis>*,.qr__cards>*,.rv__reps>*,.rv__stats>*,.acct>*,.ov__tiles>*,.ov__stages>*):nth-child(14){--i:14}

/* the Overview's entrance, once; redraws after that stay still */
body .ov-enter :is(.ovx__card,.ovx__bar,.ovx__panel){animation:appleIn .85s var(--ease) both}
body .ov-enter .ovx__hero .ovx__card:nth-child(1){animation-delay:.02s}
body .ov-enter .ovx__hero .ovx__card:nth-child(2){animation-delay:.1s}
body .ov-enter .ovx__bar{animation-delay:.2s}
body .ov-enter .ovx__panel{animation-delay:.28s}
body .ov-enter .ovx__m{animation:appleIn .8s var(--ease) both}
body .ov-enter .ovx__m:nth-child(1){animation-delay:.12s} body .ov-enter .ovx__m:nth-child(2){animation-delay:.18s}
body .ov-enter .ovx__m:nth-child(3){animation-delay:.24s} body .ov-enter .ovx__m:nth-child(4){animation-delay:.3s}
body .ov-enter .ovx__track i{transform-origin:left;animation:growX 1.2s var(--ease) .45s both}
body .ov-enter .ovx__row{animation:appleIn .7s var(--ease) both}
body .ov-enter .ovx__row:nth-child(2){animation-delay:.36s} body .ov-enter .ovx__row:nth-child(3){animation-delay:.41s}
body .ov-enter .ovx__row:nth-child(4){animation-delay:.46s} body .ov-enter .ovx__row:nth-child(5){animation-delay:.51s}
body .ov-enter .ovx__row:nth-child(n+6){animation-delay:.55s}
/* picking a row opens its card with a small pop */
body .ovx__detail{animation:detailIn .55s var(--spring) both}
body .ovx__row{transition:background .25s,color .25s,box-shadow .35s,transform .45s var(--spring)}
body .ovx__row:hover:not(.is-on){transform:translateX(4px)}
body .ovx__tabs button{transition:background .3s var(--ease),color .2s,transform .35s var(--spring)}

/* hovering lifts, pressing gives */
body :is(.card,.store,.qr__card,.rv__rep){
  transition:transform .55s var(--spring),box-shadow .45s var(--ease),border-color .3s;
}
body :is(.card,.store,.qr__card,.rv__rep):hover{transform:translateY(-5px) scale(1.012)}
body :is(.card,.store,.qr__card,.rv__rep):active{transform:scale(.985);transition-duration:.15s}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat,.ovx__card){
  transition:transform .55s var(--spring),box-shadow .45s var(--ease);
}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat):hover{transform:translateY(-3px)}
body .btn{transition:transform .4s var(--spring),background .25s,box-shadow .35s,color .2s,border-color .2s}
body .btn:hover{transform:translateY(-1px)}
body :is(.btn,.tbtn,.tab,.ovx__tabs button,.row__btn,.pager__b,.ovx__go,.viewtog button,.crumb button):active{
  transform:scale(.95);transition-duration:.12s;
}
body .row{transition:background .22s,color .22s,transform .4s var(--spring)}
body .row:not(.row--head):active{transform:scale(.995)}
body :is(.inp,.sel,textarea.inp,.fld input,.fld select,.fld textarea,.topbar__search input){
  transition:border-color .25s,box-shadow .35s var(--ease),background .25s;
}
body .pill::before{transition:transform .3s var(--spring)}

/* dialogs rise out of a blurred page */
body .modal__scrim{animation:blurIn .45s ease both}
body .modal__box{animation:sheetIn .6s var(--spring) both}
body .modal.is-closing .modal__box{animation:popOut .2s ease both}
body .modal.is-closing .modal__scrim{animation:blurIn .2s ease reverse both}
/* the little message at the foot of the screen slides up on a spring */
@media (min-width:641px){
  body .toast{transform:translate(-50%,26px) scale(.94);transition:opacity .3s ease,transform .6s var(--spring)}
  body .toast.is-on{transform:translate(-50%,0) scale(1)}
}
body .lightbox img{animation:zoomIn .55s var(--spring) both}

/* ---- My account ---- */
.acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.acct__card{
  background:#fff;border:1px solid var(--edge,#EAE1D3);border-radius:28px;padding:24px 26px;
  box-shadow:0 12px 30px rgba(80,56,20,.07);min-width:0;
}
.acct__card h3{font-size:18px;letter-spacing:-.02em;margin:0 0 4px}
.acct__hint{margin:0 0 16px;font-size:13px;color:var(--ink-3)}
.acct__who{
  grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);gap:6px 20px;align-items:center;
  background:radial-gradient(420px 200px at 0% 0%, rgba(240,194,104,.36), transparent 70%),linear-gradient(160deg,#fff,#FFF3D9);
  border-color:#F1DDB0;
}
.acct__avatar{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:600;color:#2A1B06;
  background:linear-gradient(145deg,#F3CB7B,#E0A94E);box-shadow:0 10px 24px rgba(197,140,54,.35);
}
.acct__id{display:grid;gap:2px;min-width:0}
.acct__id b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#3A2410;overflow-wrap:anywhere}
.acct__id em{font-style:normal;font-size:13px;color:var(--ink-3)}
.acct__who p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.acct__form{display:grid;gap:14px;max-width:420px}
.acct__form .fld small{font-size:11.5px;color:var(--ink-3)}
.acct__form input:disabled{background:var(--soft,#FAF6EF);color:var(--ink-3)}
.acct__act{display:flex;justify-content:flex-start;padding-top:4px}
@media (max-width:900px){
  .acct{grid-template-columns:minmax(0,1fr)}
  .acct__who{grid-template-columns:auto minmax(0,1fr)}
  .acct__who p{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  html,body .main{scroll-behavior:auto}
  body *,body *::before,body *::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
}

/* ================= figures that stay whole =================
   A figure is the one thing on a tile that must never be cut off. The numbers were set big
   with an ellipsis behind them, so "₹5,31,420" arrived as "₹5,3…". The tiles are wider now,
   the number scales with the screen instead of being clipped, and it wraps rather than
   hides if a value is ever longer than the space. */
body :is(.ads__kpis,.ev__kpis,.pr__kpis,.qr__kpis){grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
body :is(.ov__tile,.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat) b{
  font-size:clamp(20px,1.75vw,27px);line-height:1.15;letter-spacing:-.03em;
  overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;
}
body :is(.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi) span{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;
}
body :is(.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi) em{white-space:normal;overflow:visible;text-overflow:clip}
body :is(.ev__kpi,.pr__kpi,.qr__kpi,.ads__kpi,.rv__stat){padding:16px 18px}
body .ovx__m b,body .ovx__big{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
body .ovx__m b{font-size:clamp(24px,2.3vw,36px)}

/* ================= a menu that always fits =================
   The search folds into a round button until it is wanted, which gives the pill the room
   its labels need; it opens over the menu rather than pushing it. */
@media (min-width:981px){
  body .topbar__search{position:relative;width:46px;height:46px;z-index:55}
  body .topbar__search input{
    position:absolute;right:0;top:0;width:46px;height:46px;padding:0;color:transparent;cursor:pointer;
    border-radius:99px;transition:width .5s var(--spring,cubic-bezier(.32,1.25,.42,1)),padding .3s,box-shadow .35s,color .2s;
  }
  body .topbar__search input::placeholder{color:transparent;transition:color .2s}
  body .topbar__search svg{left:14px;width:18px;height:18px;z-index:1;pointer-events:none}
  body .topbar__search:focus-within input,
  body .topbar__search input:not(:placeholder-shown){
    width:min(380px,44vw);padding:0 18px 0 42px;color:var(--ink);cursor:text;
    box-shadow:0 18px 40px rgba(80,56,20,.2);
  }
  body .topbar__search:focus-within input::placeholder{color:var(--ink-3)}
  body .who__meta{display:none}
  body .who{padding:4px}
  body .side__link{padding:0 11px}
}
@media (min-width:981px) and (max-width:1180px){
  body .app{padding-left:16px;padding-right:16px;gap:16px 10px}
  body .side__link{padding:0 9px}
  body .side{padding:5px}
}
/* the pill and its parts never spill past the page edge, whatever is hovered */
body #side{min-width:0}
body #side>*{flex:none}

/* ================= Overview: the other tabs ================= */
.ovx__view{display:grid;gap:18px;min-width:0;animation:appleIn .55s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.ovx__tabs button i{margin-left:0}
.ovx__bar--left{justify-content:flex-start}
.ovx__tabs--sm button{padding:7px 14px;font-size:13px}
.ovx__panel--one{display:block;padding:24px 26px}
.ovx__note{margin:0;padding:11px 16px;border-radius:16px;background:#FFF3D9;border:1px solid #F1DDB0;font-size:13px;color:var(--ink-2)}
.ovx__empty{margin:6px 0;font-size:13px;color:var(--ink-3);font-style:normal}
.ovx__none{display:grid;justify-items:start;gap:6px;padding:10px 4px}
.ovx__none h3{font-size:20px;letter-spacing:-.02em}
.ovx__none p{margin:0 0 10px;font-size:13.5px;color:var(--ink-3)}
.ovx__ghost{
  padding:9px 18px;border-radius:99px;border:1px solid var(--edge);background:#fff;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .4s var(--spring,ease);
}
.ovx__ghost:hover{background:#FFF6E3;border-color:#E9C987}

/* the figures */
.ovx__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.ovx__kpis--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ovx__kpi{
  display:grid;gap:5px;align-content:start;min-width:0;padding:18px 20px;border-radius:26px;
  background:radial-gradient(240px 120px at 100% 0%, rgba(240,194,104,.3), transparent 70%),linear-gradient(160deg,#fff,#FFF5E0);
  border:1px solid #F1DDB0;box-shadow:0 12px 28px rgba(197,140,54,.12);
  transition:transform .55s var(--spring,ease),box-shadow .45s;
}
.ovx__kpi:hover{transform:translateY(-3px)}
.ovx__kpi span{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.ovx__kpi b{font-size:clamp(22px,1.9vw,30px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:#3A2410;overflow-wrap:anywhere}
.ovx__kpi em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ovx__delta{font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;justify-self:start;white-space:nowrap}
.ovx__delta.is-good{background:#E4F3EA;color:#1F7A45}
.ovx__delta.is-bad{background:#FBE6E3;color:#B3392E}
.ovx__delta.is-flat{background:#F3ECDD;color:var(--ink-2)}
.ovx__vs{margin:-6px 4px 0;font-size:12px;color:var(--ink-3)}

/* a panel with a title row */
.ovx__ctop{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:16px}
.ovx__ctop h3{font-size:19px;letter-spacing:-.025em;margin:0}
.ovx__ctop p{margin:3px 0 0;font-size:13px;color:var(--ink-3)}
.ovx__ctop>div:first-child{margin-right:auto}
.ovx__legend{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.ovx__legend i,.ovx__ph i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:8px}
.ovx__legend i:first-child{margin-left:0}
.ovx__mpills{display:inline-flex;gap:3px;padding:4px;border-radius:99px;background:#F6EFE3}
.ovx__mpills button{padding:7px 14px;border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .25s,color .2s,transform .3s var(--spring,ease)}
.ovx__mpills button:hover{color:var(--ink)}
.ovx__mpills button.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(80,56,20,.14)}

/* the chart */
.ovx__plotwrap{position:relative;min-width:0}
.ovx__plot{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.ovx__gl{stroke:#EFE4CE;stroke-width:1;stroke-dasharray:3 5}
.ovx__gt{fill:var(--ink-3);font-size:11.5px}
.ovx__ln{stroke-dasharray:1;stroke-dashoffset:0;animation:drawLn 1.3s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.ovx__ar{animation:fadeIn 1.2s ease .2s both}
@keyframes drawLn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ovx__cross{stroke:#C9B48C;stroke-width:1.5;stroke-dasharray:4 4;opacity:0;transition:opacity .2s;pointer-events:none}
.ovx__pt{opacity:0;transition:opacity .2s;pointer-events:none}
.ovx__tip{
  position:absolute;top:6px;transform:translateX(-50%);min-width:150px;padding:10px 14px;border-radius:16px;
  background:rgba(42,24,8,.92);color:#fff;font-size:12.5px;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 36px rgba(42,24,8,.3);
  display:grid;gap:4px;z-index:3;
}
.ovx__tip[hidden]{display:none}
.ovx__tip b{font-size:12px;opacity:.7;font-weight:600}
.ovx__tip span{display:flex;align-items:center;gap:7px}
.ovx__tip span i{width:8px;height:8px;border-radius:50%}
.ovx__tip em{font-style:normal;margin-left:auto;font-weight:700;padding-left:14px}
.ovx__tipsum{border-top:1px solid rgba(255,255,255,.18);padding-top:5px;margin-top:2px;opacity:.9}

/* Meta against Google */
.ovx__split{display:flex;height:12px;border-radius:99px;overflow:hidden;background:#F1E3C6;margin:4px 0 20px}
.ovx__split i{display:block;height:100%;transition:width 1s var(--ease,ease)}
.ovx__split i:first-child{border-radius:99px 0 0 99px}
.ovx__provs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ovx__prov{padding:20px 22px;border-radius:26px;border:1px solid #F1E6CF;background:linear-gradient(160deg,#fff,#FFFAF0);min-width:0}
.ovx__ph{display:flex;align-items:center;gap:0}
.ovx__ph i{margin:0 8px 0 0;width:12px;height:12px}
.ovx__ph b{font-size:15px}
.ovx__ph em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:#FCE9BE;color:#3A2410}
.ovx__pv{display:block;margin:10px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.04em;color:#3A2410}
.ovx__prov dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px 14px;margin:0}
.ovx__prov dt{font-size:11.5px;color:var(--ink-3)}
.ovx__prov dd{margin:2px 0 0;font-size:16px;font-weight:600;letter-spacing:-.02em}

/* campaigns */
.ovx__camps{display:grid;gap:4px;min-width:0}
.ovx__ch,.ovx__cr{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(5,minmax(0,1fr));gap:14px;align-items:center;padding:12px 14px;border-radius:20px}
.ovx__ch--ev,.ovx__cr--ev{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}
.ovx__ch{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:4px;padding-bottom:6px}
.ovx__cr{transition:background .2s,transform .4s var(--spring,ease)}
.ovx__cr:hover{background:#FFF6E3}
.ovx__cr--ev{cursor:pointer}
.ovx__cn{display:flex;align-items:center;gap:12px;min-width:0}
.ovx__cn>span{min-width:0;display:grid;gap:1px}
.ovx__cn b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__cn em{font-style:normal;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c,#C58C36);opacity:.5}
.ovx__dot.is-live{opacity:1;animation:livePulse 2.4s ease-out infinite;box-shadow:0 0 0 0 var(--c)}
.ovx__cv{display:grid;gap:5px;min-width:0}
.ovx__cv b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ovx__mini{display:block;height:5px;border-radius:99px;background:#F1E3C6;overflow:hidden}
.ovx__mini i{display:block;height:100%;border-radius:99px;transition:width .9s var(--ease,ease)}

/* lists */
.ovx__soon{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ovx__soon li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:20px;cursor:default;transition:background .2s}
.ovx__soon li:hover{background:#FFF6E3}
.ovx__soon li[data-go]{cursor:pointer}
.ovx__soon li>span:nth-child(2){flex:1;min-width:0;display:grid;gap:1px}
.ovx__soon b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__soon em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ovx__alert{flex:none;min-width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#FBE6E3;color:#B3392E;font-weight:700}
.ovx__subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px 2px}
.ovx__subtabs button{padding:7px 14px;border-radius:99px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:background .2s,color .2s}
.ovx__subtabs button i{font-style:normal;font-size:11px;padding:1px 7px;border-radius:99px;background:#F6EFE3}
.ovx__subtabs button:hover{color:var(--ink)}
.ovx__subtabs button.is-on{background:#FCE9BE;color:#3A2410}
.ovx__subtabs button.is-on i{background:rgba(255,255,255,.7)}
.ovx__panel--one .ov__stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ovx__panel--one .ov__stage{border-radius:24px;border:1px solid #F1E6CF;transition:transform .5s var(--spring,ease),box-shadow .4s}
.ovx__panel--one .ov__stage:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(80,56,20,.1)}

@media (max-width:820px){
  .ovx__provs{grid-template-columns:minmax(0,1fr)}
  .ovx__ch{display:none}
  .ovx__cr,.ovx__cr--ev{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .ovx__cr .ovx__cv:nth-child(n+3){display:none}
  .ovx__panel--one{padding:18px 16px}
}

/* ================= the page runs to the bottom of the window =================
   The frame kept a band of padding under the scrolling area, so a long screen was sliced
   off with a straight edge a little above the bottom of the window and looked as if it had
   ended. The scroll area now reaches the window's edge, with room to scroll the last card
   clear, and the content fades out softly at the very bottom instead of being cut. */
@media (min-width:981px){
  body .app{padding-bottom:0}
  body .main{
    padding:0 4px 56px;margin:0 -4px;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  }
}


/* The portal's base style gives every <svg> a 1.7px outline in the current colour, for its
   line icons. A chart inherits that too, so its labels came out bold and its hit area got a
   black frame. Charts draw their own lines; they are told to stop inheriting the icons'. */
.ovx__plot,.ovx__chart svg{stroke:none;stroke-width:0}
.ovx__plot text,.ovx__chart svg text{stroke:none}
.ovx__plot .ovx__hit{stroke:none;fill:transparent}
.ovx__plot{max-height:360px}


/* ================= finish =================
   Type, focus, selection and the small things that make a screen feel looked-after. */
:root{--font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif}
body{
  font-family:var(--font);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss03','calt';
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font-family:inherit}
h1,h2,h3{letter-spacing:-.025em}
/* figures line up in columns and do not jitter as they change */
:is(.ovx__kpi b,.ovx__m b,.ovx__big,.ovx__pv,.ovx__cv b,.ovx__rv b,.ads__kpi b,.ev__kpi b,.pr__kpi b,.qr__kpi b,
    .rv__stat b,.ov__tile b,.tbl td,.ovx__prov dd,.lg__t td){font-variant-numeric:tabular-nums}

::selection{background:#F7D98F;color:#2A1B06}
:focus{outline:none}
:focus-visible{outline:3px solid rgba(228,174,82,.55);outline-offset:2px;border-radius:inherit}
body :is(.btn,.tbtn,.tab,.side__link,.ovx__tabs button,.ovx__row,.ovx__go,.ovx__ghost,.pager__b):focus-visible{
  outline:3px solid rgba(228,174,82,.7);outline-offset:2px}
body :is(.fld input,.fld select,.fld textarea,.inp,.sel):focus{
  border-color:#E4AE52;box-shadow:0 0 0 4px rgba(228,174,82,.2);outline:none}
body .btn[disabled],body .btn:disabled{opacity:.45;filter:saturate(.6);transform:none;box-shadow:none}

/* tables */
body .tbl th{font-size:11px;letter-spacing:.08em;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--edge)}
body .tbl td{padding:11px 12px;border-bottom:1px solid #F3ECDD}
body .tbl tr:last-child td{border-bottom:0}
body .tbl tr:hover td{background:#FFF8E8}

/* empty states and notices */
body .empty h3{font-size:18px;letter-spacing:-.02em;color:var(--ink)}
body .empty p{max-width:46ch;margin-inline:auto}
body .note{border-radius:18px;background:#FFF8E8;border:1px solid #F1DDB0;padding:14px 16px;font-size:13.5px;line-height:1.6}
body .err{border-radius:14px}

/* dialogs */
body .mhead{padding:20px 24px;border-bottom-color:#F3ECDD}
body .mhead h2{font-size:19px;letter-spacing:-.025em}
body .mhead .x{border-radius:50%}
body .mbody{padding:22px 24px}
body .mfoot{padding:16px 24px;border-top-color:#F3ECDD}
body .tabs{border-bottom-color:#F3ECDD}
body .toast{
  border-radius:99px;padding:12px 22px;font-weight:600;font-size:13.5px;
  background:rgba(42,24,8,.92);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(42,24,8,.35);
}
body .toast.is-bad{background:rgba(179,57,46,.95)}

/* pills and chips read the same everywhere */
body :is(.pill,.ov__pill){font-weight:600}
body .pill--live,body .ov__pill--done{background:#E4F3EA;color:#1F7A45}
body .pill--planned,body .ov__pill--confirmed,body .ov__pill--in-progress{background:#FDF0D4;color:#8A5A12}

/* print: the report and the rate sheet print their own pages; nothing here should leak in */
@media print{
  body .topbar,body .side,body .main__head,body .toast{display:none !important}
  body{background:#fff}
  body .app{display:block;padding:0}
  body .main{box-shadow:none;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
}

/* Meta and Google keep one colour each across the whole portal — the Overview, the Ad
   Performance screen and its legends all agree: brown for Meta, gold for Google. */
body .ads{--meta:#7A4A1B;--google:#E4AE52}
body .ads__badge--google{color:#3A2410}

/* the Menu card's four figures */
body .dash__stats{gap:14px}
body .dash__stats .stat{
  background:radial-gradient(240px 120px at 100% 0%, rgba(240,194,104,.3), transparent 70%),linear-gradient(160deg,#fff,#FFF5E0);
  border:1px solid #F1DDB0;border-radius:26px;padding:18px 20px;box-shadow:0 12px 28px rgba(197,140,54,.12);
  transition:transform .55s var(--spring,ease);
}
body .dash__stats .stat:hover{transform:translateY(-3px)}
body .dash__stats .stat b{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.035em;color:#3A2410;font-variant-numeric:tabular-nums}

/* a grid's one column is as wide as its widest unbreakable thing unless told it may shrink;
   the row of tabs was that thing, and on a phone it widened every card on the page */
.ovx,.ovx__view,.ovx__hero,.ovx__panel--one{grid-template-columns:minmax(0,1fr)}
.ovx__hero{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:1180px){.ovx__hero{grid-template-columns:minmax(0,1fr)}}
.ovx__bar{min-width:0;max-width:100%}
.ovx__tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.ovx__tabs::-webkit-scrollbar{display:none}
@media (max-width:640px){
  body #overview:not([hidden]){padding:0;background:none}
  .ovx__bar{justify-content:flex-start}
  .ovx__panel{padding:16px;border-radius:26px}
  .ovx__kpis,.ovx__kpis--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ovx__kpi{padding:14px 15px;border-radius:22px}
  .ovx__ctop{align-items:flex-start}
  .ovx__mpills{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .ovx__card{padding:20px;border-radius:26px}
  .ovx__metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
}

/* A transform on a parent — even one that has finished — becomes the frame that a
   fixed-position child is placed in. The heading's action buttons hold the phone's filter
   sheet, which is fixed to the window, so their entrance only fades. */
body .main__head.is-swap .main__actions{animation:fadeIn .5s ease .1s both}


/* ================= Calendar ================= */
body .mcal{
  --k-festival:#D2493A; --k-wedding:#9A5FC4; --k-offer:#D49A38;
  --k-content:#2F9A7F;  --k-anniversary:#3F7FC4;
  --k-event:#7A5BBE;    --k-deliverable:#C4721F;
}
body .mcal__bar2{gap:10px;margin-bottom:20px}
body .mcal__title{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.035em;margin-left:10px;color:#2A1B0A}
body .mcal__today{
  padding:9px 20px;border-radius:99px;font-weight:600;color:var(--ink);border-color:var(--edge);
  transition:background .25s,border-color .25s,transform .4s var(--spring,ease);
}
body .mcal__today:hover:not(:disabled){background:#FFF6E3;border-color:#E9C987}
body .mcal__arw{width:40px;height:40px;border:1px solid var(--edge);background:#fff;transition:background .25s,transform .4s var(--spring,ease)}
body .mcal__arw:hover{background:#FFF6E3}
body .mcal__arw:active{transform:scale(.9)}
body .mcal__views{background:#F6EFE3;padding:4px;border-radius:99px}
body .mcal__view{padding:8px 18px;border-radius:99px;font-weight:600;transition:background .3s var(--ease,ease),color .2s}
body .mcal__view.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(80,56,20,.14)}

body .mcal__kinds{gap:8px;margin-bottom:18px}
body .mcal__kind{
  padding:7px 14px;border-radius:99px;border-color:var(--edge);font-weight:600;
  transition:background .25s,border-color .25s,opacity .25s,transform .4s var(--spring,ease);
}
body .mcal__kind:hover{background:#FFF8EA;border-color:#E9C987}
body .mcal__kind:active{transform:scale(.95)}
body .mcal__kind i{width:10px;height:10px}

/* the month itself: one rounded card */
body .mcal__grid{
  border:1px solid var(--edge);border-radius:26px;overflow:hidden;background:#fff;
  box-shadow:0 10px 28px rgba(80,56,20,.06);animation:appleIn .6s var(--ease,ease) both;
}
body .mcal__dow{background:#FBF6EC}
body .mcal__dow span{padding:12px 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink-3)}
body .mcal__week{border-top-color:#F1E8D6;animation:appleIn .6s var(--ease,ease) both}
body .mcal__grid>.mcal__week:nth-of-type(1){animation-delay:45ms}
body .mcal__grid>.mcal__week:nth-of-type(2){animation-delay:90ms}
body .mcal__grid>.mcal__week:nth-of-type(3){animation-delay:135ms}
body .mcal__grid>.mcal__week:nth-of-type(4){animation-delay:180ms}
body .mcal__grid>.mcal__week:nth-of-type(5){animation-delay:225ms}
body .mcal__grid>.mcal__week:nth-of-type(6){animation-delay:270ms}
body .mcal__grid>.mcal__week:nth-of-type(7){animation-delay:315ms}

body .mcal__day{border-left-color:#F4ECDB;transition:background .25s}
body .mcal__day:hover{background:#FFF8E8}
body .mcal__day i{font-weight:500;font-variant-numeric:tabular-nums}
body .mcal__day.is-out{background:#FDFBF6}
body .mcal__day:nth-child(1),body .mcal__day:nth-child(7){background-color:rgba(251,246,236,.45)}
body .mcal__day.is-today i{
  background:linear-gradient(145deg,#F3CB7B,#E0A94E);color:#2A1B06;font-weight:700;
  box-shadow:0 6px 14px rgba(197,140,54,.4);
}

/* a date on the month: a soft tint with a coloured edge, as a phone draws it, not a solid block */
body .mcal__bar{
  --kc:#C58C36;
  background:color-mix(in srgb,var(--kc) 15%,#fff);
  color:color-mix(in srgb,var(--kc) 68%,#1b1007);
  border-radius:8px;font-weight:600;box-shadow:inset 3px 0 0 var(--kc);
  transition:transform .35s var(--spring,ease),box-shadow .3s,background .25s;
}
body .mcal__bar:hover{filter:none;background:color-mix(in srgb,var(--kc) 24%,#fff);transform:translateY(-1px);
  box-shadow:inset 3px 0 0 var(--kc),0 6px 14px rgba(80,56,20,.14)}
body .mcal__bar.is-cl{box-shadow:none}
body .mcal__bar em{opacity:.7}
body .mcal__bar--festival{--kc:var(--k-festival)}
body .mcal__bar--wedding{--kc:var(--k-wedding)}
body .mcal__bar--offer{--kc:var(--k-offer)}
body .mcal__bar--content{--kc:var(--k-content)}
body .mcal__bar--anniversary{--kc:var(--k-anniversary)}
body .mcal__bar--deliverable{--kc:var(--k-deliverable)}
body .mcal__bar--event{--kc:var(--k-event)}

/* year and list */
body .mcal__year{gap:26px 22px}
body .mcal__mini{padding:14px 14px 10px;border:1px solid var(--edge);border-radius:22px;background:#fff;
  box-shadow:0 6px 18px rgba(80,56,20,.05);transition:transform .5s var(--spring,ease),box-shadow .35s}
body .mcal__mini:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(80,56,20,.1)}
body .mcal__md.is-today{background:linear-gradient(145deg,#F3CB7B,#E0A94E);color:#2A1B06}
body .mcal__row{border-radius:20px;border-color:var(--edge);transition:border-color .25s,background .25s,transform .4s var(--spring,ease)}
body .mcal__row:hover{background:#FFF8E8;border-color:#E9C987;transform:translateX(3px)}
body .mcal__mon{letter-spacing:.1em}

/* ================= scrollbars =================
   A slim rounded thumb that floats off the edge instead of a grey bar bolted to it. On the
   main page it is invisible until the page is pointed at or scrolled, the way a phone does
   it; elsewhere it is simply quiet. */
html,*{scrollbar-width:thin;scrollbar-color:rgba(140,100,48,.32) transparent}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent;margin:16px 0;border-radius:99px}
*::-webkit-scrollbar:horizontal{height:12px}
*::-webkit-scrollbar-track:horizontal{margin:0 16px}
*::-webkit-scrollbar-thumb{
  background:rgba(140,100,48,.30);border-radius:99px;border:3.5px solid transparent;background-clip:padding-box;
  min-height:48px;min-width:48px;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(140,100,48,.55);background-clip:padding-box;border-width:3px}
*::-webkit-scrollbar-thumb:active{background:#D49A38;background-clip:padding-box;border-width:3px}
*::-webkit-scrollbar-corner{background:transparent}

/* the page: shows only while it is in use */
@media (min-width:981px){
  body .main{scrollbar-color:transparent transparent;transition:scrollbar-color .3s}
  body .main:hover,body .main:focus-within{scrollbar-color:rgba(140,100,48,.4) transparent}
  body .main::-webkit-scrollbar{width:14px}
  body .main::-webkit-scrollbar-track{margin:20px 0 70px}
  body .main::-webkit-scrollbar-thumb{background:transparent;background-clip:padding-box;border-width:4px}
  body .main:hover::-webkit-scrollbar-thumb,body .main:focus-within::-webkit-scrollbar-thumb{background:rgba(140,100,48,.34);background-clip:padding-box}
  body .main::-webkit-scrollbar-thumb:hover{background:rgba(140,100,48,.6);background-clip:padding-box}
}

/* the strips of pills and the wide tables scroll sideways without a bar to look at */
body :is(.ovx__tabs,.setpage__tabs,.ovx__mpills,.ovx__subtabs){scrollbar-width:none}
body :is(.ovx__tabs,.setpage__tabs,.ovx__mpills)::-webkit-scrollbar{display:none}

/* dialogs and the menu's cards: a little room from the rounded corners */
body .modal__box::-webkit-scrollbar-track{margin:22px 0}
body .side::-webkit-scrollbar-track{margin:20px 0}
body .side{scrollbar-color:rgba(140,100,48,.3) transparent}

/* ================= the name beside the mark ================= */
body .topbar__brand{gap:13px}
body .brandmark{
  width:32px;height:39px;
  background:linear-gradient(160deg,#9A6724,#5E3D16);
  -webkit-mask-size:calc(32px * 976 / 300) auto;mask-size:calc(32px * 976 / 300) auto;
  -webkit-mask-position:calc(-338px * 32 / 300) 0;mask-position:calc(-338px * 32 / 300) 0;
}
body .brandtext{line-height:1.1;gap:3px}
body .brandtext b{
  font-size:19px;font-weight:700;letter-spacing:.09em;color:#3A2410;
}
body .brandtext i{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;color:#B07A2A;
}
@media (min-width:981px) and (max-width:1279px){
  body .brandtext{display:none}
  body .brandmark{width:30px;height:37px;
    -webkit-mask-size:calc(30px * 976 / 300) auto;mask-size:calc(30px * 976 / 300) auto;
    -webkit-mask-position:calc(-338px * 30 / 300) 0;mask-position:calc(-338px * 30 / 300) 0}
}
@media (min-width:521px) and (max-width:980px){
  body .brandtext b{font-size:16px}
  body .brandtext i{font-size:9px;letter-spacing:.16em}
}

/* ================= the search, folded and open =================
   It opens leftwards from its button, so the magnifier stays at its right end where the
   button was and the placeholder starts at the left edge of the field. */
@media (min-width:981px){
  body .topbar__search svg{left:auto;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-2);transition:color .25s}
  body .topbar__search input{padding:0 46px 0 20px}
  body .topbar__search:focus-within input,
  body .topbar__search input:not(:placeholder-shown){
    width:min(360px,38vw);padding:0 46px 0 20px;border-color:#E4AE52;
    box-shadow:0 0 0 4px rgba(228,174,82,.2),0 18px 40px rgba(80,56,20,.18);
  }
  body .topbar__search:focus-within svg{color:#B07A2A}
  /* the field's own search clear button would sit on top of the magnifier */
  body .topbar__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
}

/* while the search is open it lies over the end of the menu, so the menu steps back */
@media (min-width:981px){
  body #side{transition:opacity .35s ease,filter .35s ease}
  body:has(.topbar__search:focus-within) #side{opacity:.35;filter:blur(1.5px);pointer-events:none}
}


/* the figures card also carries the library and what is next, so it is not left half empty
   beside the taller card next to it */
.ovx__metrics{align-content:space-between}
.ovx__ext{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px 34px;
  margin-top:8px;padding-top:22px;border-top:1px solid #F1DDB0;
}
.ovx__blk{min-width:0}
.ovx__blk h4{margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.ovx__bars,.ovx__nx{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ovx__bars li{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr) auto;align-items:center;gap:12px;cursor:pointer;
  border-radius:12px;transition:transform .4s var(--spring,ease)}
.ovx__bars li:hover{transform:translateX(3px)}
.ovx__bars span{font-size:13px;font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__bt{display:block;height:9px;border-radius:99px;background:#F1E3C6;overflow:hidden}
.ovx__bt b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#E4AE52,#F3CB7B);transform-origin:left}
.ovx__bars em{font-style:normal;font-size:13px;font-weight:600;color:#3A2410;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
body .ov-enter .ovx__bt b{animation:growX 1.1s var(--ease,ease) .5s both}
.ovx__nx li{display:flex;align-items:center;gap:13px;min-width:0}
.ovx__nx li>span:last-child{min-width:0;display:grid;gap:1px}
.ovx__nx b{font-size:13.5px;font-weight:600;color:#3A2410;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__nx em{font-style:normal;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx__nx .ov__date{background:#fff;border:1px solid #F1E6CF;border-radius:14px}
@media (max-width:760px){.ovx__ext{grid-template-columns:minmax(0,1fr)}}

.ovx__fine{margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.ovx__bars li[data-top],.ovx__bars li[data-go]{cursor:pointer}

/* ================= a heading that does not take the page =================
   The page title was set at a poster's size and took a fifth of the screen before any work
   began. It is a title now: clear, but out of the way of what it names. */
body .main__head{margin:0 0 14px;padding:0 4px;gap:12px}
body .main__head h1{font-size:clamp(24px,1.9vw,30px);font-weight:650;letter-spacing:-.03em;line-height:1.15}
body .main__head p{margin-top:3px;font-size:13px}
body .crumb{margin-bottom:6px}
body .crumb button{padding:4px 12px;font-size:12.5px}
body .main__actions{gap:8px}
body .main__actions .btn{padding:9px 18px}
@media (max-width:640px){
  body .main__head h1{font-size:23px}
  body .main__head{margin-bottom:12px}
}

/* ================= explanations, kept small =================
   Notes and footnotes are set small and close, and their copy is kept short. */
body :is(.note,.rt__note,.dc__note,.ev__note,.na__note,.mc__note,.rv__note){
  padding:9px 14px;border-radius:14px;font-size:12px;line-height:1.5;color:var(--ink-2);margin-block:0;max-width:78ch;
}
body :is(.qr__fine,.pr__fine,.ads__fine,.ovx__fine){font-size:12px;line-height:1.5;color:var(--ink-3);margin:0;max-width:78ch}
body .main__head p{max-width:70ch}


/* ================= one highlight that glides ================= */
.pill__ink{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:99px;opacity:0;will-change:transform,width}
.pill__ink.is-live{
  transition:transform .55s cubic-bezier(.34,1.25,.5,1),width .55s cubic-bezier(.34,1.25,.5,1),height .3s ease,opacity .2s ease;
}
.pill__ink--gold{background:linear-gradient(135deg,#F3CB7B,#E4AE52);box-shadow:0 6px 16px rgba(228,174,82,.35)}
.pill__ink--soft{background:#FCE9BE}
.pill__ink--thumb{background:#fff;box-shadow:0 2px 8px rgba(80,56,20,.16)}
.pill__ink--line{border-radius:3px;background:linear-gradient(90deg,#E4AE52,#D49A38)}
.has-ink>*:not(.pill__ink){position:relative;z-index:1}
/* the choice that is made no longer paints itself; the marker does */
.has-ink--gold .is-on,.has-ink--soft .is-on,.has-ink--thumb .is-on{background:transparent !important;box-shadow:none !important}
.has-ink--line .is-on{border-bottom-color:transparent !important}
.has-ink--line{border-bottom:1px solid var(--line-2,#F3ECDD)}
@media (prefers-reduced-motion:reduce){.pill__ink.is-live{transition-duration:.01ms}}


/* ================= loading, the way apps do it ================= */
/* the bar across the top of the window */
#busybar{position:fixed;left:0;right:0;top:0;height:3px;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s ease}
#busybar.is-on{opacity:1}
#busybar i{
  display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#E4AE52,#F3CB7B 60%,#E4AE52);box-shadow:0 0 10px rgba(228,174,82,.7);
  border-radius:0 3px 3px 0;transition:transform .3s ease-out;
}

/* tiles that stand where the real ones will be */
.sk{
  border-radius:28px;
  background:linear-gradient(100deg,#F4EBD9 30%,#FCF6E8 50%,#F4EBD9 70%);background-size:220% 100%;
  animation:skShimmer 1.5s ease-in-out infinite;
}
@keyframes skShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.sk--pills{display:block;width:min(560px,100%);height:50px;border-radius:99px}
.sk--card{min-height:290px}
.sk--panel{min-height:300px;border-radius:34px}
.ovx--skel .ovx__bar{justify-content:center}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* the page does not replay its entrance when only a part of it changes */
.ovx__view{animation:none}
.ovx__view.is-enter{animation:appleIn .5s var(--ease,cubic-bezier(.16,1,.3,1)) both}
@keyframes softSwap{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.is-swap{animation:softSwap .34s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.ovx__rows{display:grid;gap:6px}

/* ================= the page fades out at the top as it does at the bottom =================
   Content scrolling up under the menu was sliced off with a straight edge. It now thins out
   over the last stretch before the menu, the same soft feather as at the foot of the window.
   The first screenful starts below that stretch, so a title at rest is never faded. */
@media (min-width:981px){
  body .main{
    padding-top:30px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to bottom,transparent 0,#000 30px,#000 calc(100% - 26px),transparent);
  }
}


/* ================= the paid-media card fills its card =================
   The chart draws across the whole width and takes whatever height the card has spare, the
   button sits at the foot, and nothing is left floating in a gap. */
body .ovx__media{display:flex;flex-direction:column;gap:10px}
body .ovx__media .ovx__chart{flex:1;display:flex;flex-direction:column;min-height:170px;margin:6px 0 0}
body .ovx__media .ovx__chart>p{margin:auto 0}
.ovx__spark{position:relative;flex:1;min-height:130px}
.ovx__spark svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;stroke:none}
.ovx__peak{
  position:absolute;left:0;top:0;padding:4px 12px;border-radius:99px;background:#fff;border:1px solid #F1DDB0;
  font-size:11.5px;font-weight:600;color:#3A2410;box-shadow:0 4px 12px rgba(197,140,54,.14);
}
.ovx__sx{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:2px}
body .ovx__media .ovx__go{margin-top:8px;align-self:flex-start}
.ovx__peak{left:auto;right:0}


/* how far off a date is, as a word beside it */
.ovx__when{
  flex:none;margin-left:auto;font-style:normal;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;
  white-space:nowrap;letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;
}
.ovx__when--today{background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06;box-shadow:0 6px 14px rgba(228,174,82,.35)}
.ovx__when--today::before{content:"";width:7px;height:7px;border-radius:50%;background:#2A1B06;animation:livePulse 2s ease-out infinite;box-shadow:0 0 0 0 rgba(42,27,6,.5)}
.ovx__when--soon{background:#FCE9BE;color:#7A4A1B}
.ovx__when--near{background:#F7EFE0;color:#7A5A2B}
.ovx__when--far{background:transparent;color:var(--ink-3);font-weight:600;padding-inline:4px}
.ovx__when--past{background:#F3ECDD;color:var(--ink-3)}
.ovx__nx li>span:nth-child(2),.ovx__soon li>span:nth-child(2){min-width:0;flex:1;display:grid;gap:1px}
.ovx__nx li.is-today,.ovx__soon li.is-today{background:linear-gradient(90deg,#FFF4D6,transparent 80%);border-radius:18px;margin:0 -8px;padding:6px 8px}
.ovx__nx li{justify-content:flex-start}

/* ================= the bell ================= */
body .tbtn--bell{position:relative}
body .tbtn--bell.is-on{background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06;border-color:transparent}
.nbadge{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:linear-gradient(135deg,#E4AE52,#D49A38);color:#2A1B06;font-size:10.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid #F6F0E5;font-variant-numeric:tabular-nums;
  box-shadow:0 4px 10px rgba(197,140,54,.4);animation:badgePop .5s var(--spring,cubic-bezier(.32,1.25,.42,1)) both;
}
.nbadge[hidden]{display:none}
.nbadge.is-alert{background:linear-gradient(135deg,#E0705F,#C4493A);color:#fff;box-shadow:0 4px 10px rgba(196,73,58,.4)}
@keyframes badgePop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.tbtn--bell.is-ring svg{transform-origin:50% 8%;animation:bellRing 1.1s ease-in-out .15s 1}
@keyframes bellRing{
  0%,100%{transform:rotate(0)} 12%{transform:rotate(16deg)} 28%{transform:rotate(-14deg)}
  44%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)} 76%{transform:rotate(3deg)}
}

/* the panel it opens */
.np{
  position:fixed;top:78px;right:24px;z-index:120;width:min(430px,calc(100vw - 24px));max-height:min(640px,calc(100vh - 100px));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--edge,#EAE1D3);border-radius:28px;
  box-shadow:0 34px 70px rgba(80,56,20,.26),0 4px 14px rgba(80,56,20,.08);overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.96);transform-origin:calc(100% - 60px) -10px;
  transition:opacity .18s ease,transform .34s var(--spring,cubic-bezier(.32,1.25,.42,1));
}
.np[hidden]{display:none}
.np.is-open{opacity:1;transform:none}
.np__head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 12px}
.np__head>div{display:grid;gap:2px;margin-right:auto}
.np__head b{font-size:18px;font-weight:650;letter-spacing:-.025em;color:#2A1B0A}
.np__head em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.np__all{
  padding:7px 14px;border-radius:99px;border:1px solid var(--edge);background:#fff;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s;
}
.np__all:hover:not(:disabled){background:#FFF6E3;border-color:#E9C987}
.np__all:disabled{opacity:.4;cursor:default}
.np__tabs{display:flex;gap:4px;margin:0 20px 6px;padding:4px;border-radius:99px;background:#F6EFE3;align-self:flex-start}
.np__tabs button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.np__tabs button i{font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.7);color:var(--ink-3)}
.np__tabs button.is-on{color:var(--ink)}
.np__tabs.has-ink--soft .pill__ink{background:#fff;box-shadow:0 2px 8px rgba(80,56,20,.14)}
.np__list{overflow-y:auto;padding:4px 10px 14px;display:grid;gap:2px;align-content:start;min-height:120px}
.np__sec h4{margin:12px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.np__item{
  position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 14px 11px 12px;border-radius:20px;
  font:inherit;cursor:pointer;transition:background .2s,transform .4s var(--spring,ease);
}
.np__item:hover{background:#FFF6E3;transform:translateX(2px)}
.np__item.is-new{background:linear-gradient(90deg,#FFF9EA,transparent 90%)}
.np__ic{
  flex:none;width:42px;height:42px;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--k) 14%,#fff);color:var(--k);
}
.np__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.np__tx{min-width:0;flex:1;display:grid;gap:2px}
.np__tx b{font-size:13.5px;font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np__item.is-new .np__tx b{font-weight:650;color:#2A1B0A}
.np__tx em{font-style:normal;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np__when{
  flex:none;font-style:normal;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:99px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.np__when--today{background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06}
.np__when--today::before{content:"";width:6px;height:6px;border-radius:50%;background:#2A1B06;animation:livePulse 2s ease-out infinite}
.np__when--soon{background:#FCE9BE;color:#7A4A1B}
.np__when--near{background:#F7EFE0;color:#7A5A2B}
.np__when--far{background:transparent;color:var(--ink-3);font-weight:600;padding-inline:2px}
.np__dot{flex:none;width:8px;height:8px;border-radius:50%;background:#E4AE52;box-shadow:0 0 0 3px rgba(228,174,82,.22);text-decoration:none}
.np__empty{display:grid;justify-items:center;gap:6px;padding:34px 24px 40px;text-align:center}
.np__empty span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#FFF3D9;color:#C58C36;margin-bottom:6px}
.np__empty svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.np__empty b{font-size:15px;color:#2A1B0A}
.np__empty em{font-style:normal;font-size:12.5px;color:var(--ink-3);max-width:30ch}
@media (max-width:980px){
  .np{top:68px;right:8px;left:8px;width:auto;transform-origin:calc(100% - 40px) -10px}
}
@media (prefers-reduced-motion:reduce){.np,.nbadge,.tbtn--bell.is-ring svg{transition-duration:.01ms;animation:none}}


/* the menu tightening itself when it has outgrown its place (nav-motion.js) */
@media (min-width:981px){
  body.nav-t1 .side{padding:4px}
  body.nav-t1 .side__link{padding:0 8px}
  body.nav-t2 .brandtext{display:none}
  body.nav-t2 .side__link{padding:0 7px}
  body.nav-t3 .who{display:none}
  body.nav-t3 .tbtn{width:40px;height:40px}
  body.nav-t3 .topbar__search{width:40px;height:40px}
  body.nav-t3 .topbar__search:not(:focus-within) input{width:40px;height:40px}
}


/* ================= My dashboard: widgets ================= */
.md{display:grid;gap:18px;min-width:0}
.md__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md__title{display:grid;gap:2px;margin-right:auto}
.md__title b{font-size:18px;font-weight:650;letter-spacing:-.025em;color:#2A1B0A}
.md__title span{font-size:12.5px;color:var(--ink-3)}
.md__saved{font-size:12px;font-weight:600;color:#1F7A45;opacity:0;transition:opacity .25s}
.md__saved.is-on{opacity:1}
.md__saved.is-bad{color:#B3392E}
.md__btn{
  padding:9px 18px;border-radius:99px;border:1px solid var(--edge);background:#fff;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .4s var(--spring,ease);
}
.md__btn:hover{background:#FFF6E3;border-color:#E9C987}
.md__btn:active{transform:scale(.95)}
.md__btn--gold{background:linear-gradient(135deg,#F3CB7B,#E4AE52);border-color:transparent;color:#2A1B06;box-shadow:0 6px 16px rgba(228,174,82,.32)}
.md__btn--gold:hover{background:linear-gradient(135deg,#F7D28A,#EBB95E)}
.md__home{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.md__home input{accent-color:#D49A38}
.md__empty{margin:30px 0;text-align:center;color:var(--ink-3);font-size:14px}

/* the grid: four columns of equal rows, packed */
.wd-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:172px;grid-auto-flow:dense;gap:16px;
  padding:4px 2px 24px;
}
.wd{
  position:relative;grid-column:span var(--c,1);grid-row:span var(--r,1);min-width:0;min-height:0;
  border-radius:30px;padding:18px 20px;overflow:hidden;color:var(--ink);
  border:1px solid #F1DDB0;box-shadow:0 12px 28px rgba(197,140,54,.12);
  background:radial-gradient(240px 130px at 100% 0%, rgba(240,194,104,.3), transparent 70%),linear-gradient(160deg,#fff,#FFF5E0);
  transition:box-shadow .4s ease,transform .5s var(--spring,ease);
}
.wd--white{background:#fff;border-color:var(--edge)}
.wd--gold{background:radial-gradient(260px 160px at 0% 0%, rgba(255,255,255,.45), transparent 70%),linear-gradient(145deg,#F7D88F,#E4AE52);border-color:transparent;box-shadow:0 14px 30px rgba(228,174,82,.35)}
.wd--sand{background:linear-gradient(160deg,#F7EEDC,#EFE2C7);border-color:#E6D6B4}
.wd__body{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wd__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wd__head>span{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.wd--gold .wd__head>span,.wd--gold .wd__kpi span,.wd--gold .wd__fine{color:rgba(42,27,6,.6)}
.wd__head>i{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.7);color:#7A4A1B}
.wd__alertn{background:#FBE6E3 !important;color:#B3392E !important}
.wd__legend{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;font-weight:600}
.wd__legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px}
.wd__legend i:first-child{margin-left:0}
.wd__empty{margin:auto 0;font-size:13px;color:var(--ink-3)}
.wd__fine{margin:0;font-size:12px;color:var(--ink-3)}
.wd__big{font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.04em;line-height:1.1;color:#3A2410;font-variant-numeric:tabular-nums}

.wd__hello{display:flex;flex-direction:column;justify-content:center;height:100%;gap:4px}
.wd__hello span{font-size:12.5px;color:var(--ink-3)}
.wd--gold .wd__hello span{color:rgba(42,27,6,.6)}
.wd__hello b{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.035em;color:#2A1B0A;line-height:1.15}
.wd__hello p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2)}
.wd--l .wd__hello b{font-size:clamp(28px,2.8vw,40px)}

.wd__kpi{display:flex;flex-direction:column;height:100%}
.wd__kpi span{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.wd__kpi b{margin-top:auto;font-size:clamp(26px,2.5vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.05;color:#3A2410;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.wd__kpi em{font-style:normal;font-size:12px;color:var(--ink-2);margin-top:4px}
.wd__bar{display:block;height:6px;border-radius:99px;background:rgba(197,140,54,.18);margin-top:10px;overflow:hidden}
.wd__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#E4AE52,#F3CB7B)}
.wd--gold .wd__bar{background:rgba(255,255,255,.4)}.wd--gold .wd__bar i{background:#2A1B06}

.wd__media{display:flex;flex-direction:column;height:100%;gap:2px}
.wd__chart{flex:1;min-height:0;position:relative;margin-top:6px}
.wd__chart .ovx__spark{position:absolute;inset:0;min-height:0}
.wd__chart .ovx__sx,.wd__chart .ovx__peak{display:none}
.wd__plot{flex:1;min-height:0}
.wd__plot .ovx__plotwrap,.wd__plot .ovx__plot{height:100%;max-height:none}
.wd__plot .ovx__plot{width:100%}
.wd__body:has(.wd__plot){height:100%}

.wd__bars,.wd__list,.wd__camps{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start;min-height:0}
.wd__bars li{display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr) auto;align-items:center;gap:6px 10px;cursor:default}
.wd__bars li[data-cat]{cursor:pointer}
.wd__bars li>span{font-size:13px;font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd__bt{display:block;height:9px;border-radius:99px;background:rgba(197,140,54,.18);overflow:hidden}
.wd__bt b{display:block;height:100%;border-radius:99px}
.wd__bars em{font-style:normal;font-size:13px;font-weight:650;color:#3A2410;font-variant-numeric:tabular-nums}
.wd__bars small{grid-column:1/-1;font-size:11.5px;color:var(--ink-3);margin-top:-4px}
.wd__list li{display:flex;align-items:center;gap:12px;min-width:0;border-radius:16px}
.wd__list li[data-go]{cursor:pointer}
.wd__list li>span:not(.ov__date){min-width:0;flex:1;display:grid;gap:2px}
.wd__list li{padding:4px 0}
.wd__list b{font-size:13.5px;font-weight:600;color:#3A2410;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd__list em{font-style:normal;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd__list strong{font-size:13px;font-weight:650;color:#3A2410;margin-left:auto}
.wd__list .ov__date{background:#fff;border:1px solid #F1E6CF;border-radius:14px;flex:none}
.wd__n{flex:none;min-width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#FBE6E3;color:#B3392E;font-weight:700;font-size:13px}
.wd__camps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px}
.wd__camps li>span:nth-child(2){min-width:0;display:grid}
.wd__camps b{font-size:13.5px;font-weight:600;color:#3A2410;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd__camps em{font-style:normal;font-size:12px;color:var(--ink-3)}
.wd__camps strong{font-size:13.5px;font-weight:650;color:#3A2410;font-variant-numeric:tabular-nums}
.wd__mini{grid-column:2/-1;display:block;height:5px;border-radius:99px;background:rgba(197,140,54,.18);overflow:hidden}
.wd__mini i{display:block;height:100%;border-radius:99px}
.wd__dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.wd__grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.wd__grid4 div{display:grid;gap:3px}
.wd__grid4 span{font-size:11.5px;color:var(--ink-3)}
.wd__grid4 b{font-size:20px;font-weight:600;letter-spacing:-.03em;color:#3A2410;font-variant-numeric:tabular-nums}
.wd__chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.wd__chips button{padding:8px 14px;border-radius:99px;border:1px solid rgba(197,140,54,.28);background:rgba(255,255,255,.75);font:inherit;font-size:12.5px;font-weight:600;color:#3A2410;cursor:pointer;transition:background .2s,transform .4s var(--spring,ease)}
.wd__chips button:hover{background:#fff;transform:translateY(-1px)}

/* editing: the widgets wobble, show their controls, and can be carried */
.md.is-editing .wd{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;animation:wdWobble .34s ease-in-out infinite alternate}
.md.is-editing .wd:nth-child(2n){animation-duration:.4s;animation-delay:-.1s}
.md.is-editing .wd:nth-child(3n){animation-duration:.37s;animation-delay:-.2s}
.md.is-editing .wd__body{pointer-events:none}
@keyframes wdWobble{from{transform:rotate(-.55deg)}to{transform:rotate(.55deg)}}
.md.is-editing .wd.is-drag{animation:none;cursor:grabbing;z-index:60;box-shadow:0 30px 60px rgba(80,56,20,.32);transition:box-shadow .2s}
.wd.is-pop{animation:wdPop .5s var(--spring,cubic-bezier(.32,1.25,.42,1)) both}
.md.is-editing .wd.is-pop{animation:wdPop .5s var(--spring,cubic-bezier(.32,1.25,.42,1)) both,wdWobble .34s .5s ease-in-out infinite alternate}
@keyframes wdPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.wd.is-out{animation:wdOut .22s ease both !important}
@keyframes wdOut{to{opacity:0;transform:scale(.8)}}
.wd__x,.wd__ctl{opacity:0;pointer-events:none;transition:opacity .2s,transform .35s var(--spring,ease)}
.md.is-editing .wd__x,.md.is-editing .wd__ctl{opacity:1;pointer-events:auto}
.wd__x{
  position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(42,24,8,.78);color:#fff;
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3;
}
.wd__x:hover{background:#B3392E;transform:scale(1.12)}
.wd__ctl{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;z-index:3;justify-content:space-between}
.wd__sizes{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:rgba(42,24,8,.78)}
.wd__sizes button{min-width:26px;width:auto;height:24px;padding:0 7px;white-space:nowrap;line-height:24px;border-radius:99px;border:0;background:transparent;color:rgba(255,255,255,.7);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.wd__sizes button.is-on{background:#fff;color:#2A1B06}
.wd__tint{width:26px;height:26px;border-radius:50%;border:2px solid #fff;cursor:pointer;background:conic-gradient(#fff 0 25%,#F3CB7B 0 50%,#F0E4CC 0 75%,#FFF1D0 0);box-shadow:0 2px 8px rgba(42,24,8,.3)}
.wd-add{
  grid-column:span 1;grid-row:span 1;border-radius:30px;border:2px dashed #E3D2AC;background:rgba(255,255,255,.5);color:#B07A2A;
  font:inherit;font-size:13px;font-weight:600;display:grid;place-content:center;justify-items:center;gap:4px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .4s var(--spring,ease);
}
.wd-add span{font-size:34px;font-weight:300;line-height:1}
.wd-add:hover{background:#fff;border-color:#E4AE52;transform:scale(1.02)}
.wd-grid.is-dragging{user-select:none}

/* the widget gallery */
.wg{position:fixed;inset:0;z-index:150;display:grid;align-items:end;justify-items:center;pointer-events:none}
.wg__scrim{position:absolute;inset:0;background:rgba(42,24,8,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;pointer-events:auto}
.wg__sheet{
  position:relative;width:min(860px,100%);max-height:82vh;display:flex;flex-direction:column;background:#fff;border-radius:34px 34px 0 0;
  box-shadow:0 -24px 70px rgba(42,24,8,.3);transform:translateY(100%);transition:transform .45s var(--spring,cubic-bezier(.2,.9,.3,1.05));pointer-events:auto;
}
.wg.is-open .wg__scrim{opacity:1}
.wg.is-open .wg__sheet{transform:none}
.wg__head{display:flex;align-items:flex-start;gap:12px;padding:24px 28px 12px}
.wg__head>div{display:grid;gap:3px;margin-right:auto}
.wg__head b{font-size:20px;font-weight:650;letter-spacing:-.03em}
.wg__head span{font-size:13px;color:var(--ink-3)}
.wg__x{width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-2)}
.wg__grid{overflow-y:auto;padding:8px 22px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wg__card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;text-align:left;padding:14px 16px;border-radius:22px;
  border:1px solid var(--edge);background:linear-gradient(160deg,#fff,#FFFAF0);font:inherit;cursor:pointer;
  transition:transform .4s var(--spring,ease),box-shadow .3s,border-color .2s;
}
.wg__card:hover{transform:translateY(-2px);border-color:#E9C987;box-shadow:0 12px 26px rgba(197,140,54,.18)}
.wg__ic{grid-row:span 2;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#FCE9BE;color:#9A6724}
.wg__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wg__tx{display:grid;gap:2px}
.wg__tx b{font-size:14px;font-weight:650;color:#2A1B0A}
.wg__tx em{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.4}
.wg__sz{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#B07A2A}

@media (max-width:980px){
  .wd-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:158px}
  .wd--m,.wd--l,.wd--w{grid-column:span 2}
  .wd--w{grid-row:span 2}
}
@media (max-width:560px){.md__home span{display:none}}
@media (prefers-reduced-motion:reduce){.md.is-editing .wd{animation:none}}

/* while editing, the controls get a strip of their own so they never sit on the figures */
.md.is-editing .wd-grid{grid-auto-rows:206px}
.md.is-editing .wd{padding-top:44px;padding-bottom:50px}
.md.is-editing .wd__body{overflow:hidden}
.md.is-editing .wd__x{top:12px;left:12px}
.md.is-editing .wd__ctl{left:12px;right:12px;bottom:12px}
.md.is-editing .wd__kpi b{margin-top:6px;font-size:clamp(22px,2vw,30px)}
.md.is-editing .wd__hello{justify-content:flex-start}
.md.is-editing .wd--gold .wd__x{background:rgba(42,24,8,.85)}


/* ================= the greeting's character ================= */
.wd__hello{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 10px;height:100%}
.wd__hi{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;align-self:center}
.wd__hi span{font-size:12.5px;color:var(--ink-3)}
.wd--gold .wd__hi span{color:rgba(42,27,6,.6)}
.wd__hi b{font-size:clamp(20px,1.9vw,28px);font-weight:600;letter-spacing:-.035em;color:#2A1B0A;line-height:1.15}
.wd--l .wd__hi b{font-size:clamp(26px,2.6vw,38px)}
.wd__hi p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2)}
.wd__avatar{position:relative;align-self:end;height:100%;max-height:100%;aspect-ratio:200/230;display:grid;place-items:end center;cursor:pointer;margin-right:-4px}
.wd--l .wd__avatar{height:88%}
.wd--m .wd__avatar{height:118%;margin-bottom:-20px}
.wd__avatar .av{height:100%;width:auto;display:block;overflow:visible}
.av__head,.av__body,.av__iris,.av__lid,.av__brow{transform-box:fill-box;transform-origin:center}
.av__head{transform-origin:50% 90%}
.av__lid{transform-origin:50% 0;transform:scaleY(.001)}
.wd__avatar.is-swapped .av{animation:avPop .5s var(--spring,cubic-bezier(.32,1.25,.42,1)) both}
@keyframes avPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.wd__look{
  position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.85);color:#7A4A1B;opacity:0;transition:opacity .2s,transform .35s var(--spring,ease);box-shadow:0 2px 8px rgba(42,24,8,.2);z-index:2;
}
.wd__look svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd__avatar:hover .wd__look{opacity:1}
.wd__look:hover{transform:rotate(90deg) scale(1.1)}
.md.is-editing .wd__body{pointer-events:none}
.md.is-editing .wd__look{display:none}
@media (max-width:560px){.wd__avatar{display:none}.wd__hello{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wd__avatar.is-swapped .av{animation:none}}


/* ================= pressing Edit: everything eases ================= */
.wd-grid{grid-auto-rows:196px}
.md.is-editing .wd-grid{grid-auto-rows:196px}
.wd{padding:18px 20px;transition:padding .5s var(--ease,cubic-bezier(.16,1,.3,1)),box-shadow .4s ease,transform .5s var(--spring,ease)}
.md.is-editing .wd{padding-top:44px;padding-bottom:50px}
.md .wd{animation:none}
.md.is-editing .wd{animation:wdWobble .34s ease-in-out infinite alternate;animation-delay:var(--w,0ms)}
/* the controls rise into place a touch after the widget has made room for them */
.wd__x,.wd__ctl{opacity:0;transform:scale(.7);transition:opacity .25s ease,transform .45s var(--spring,ease)}
.wd__ctl{transform:translateY(8px)}
.md.is-editing .wd__x{opacity:1;transform:none;transition-delay:.12s}
.md.is-editing .wd__ctl{opacity:1;transform:none;transition-delay:.16s}
.wd-add{
  opacity:0;transform:scale(.85);pointer-events:none;grid-column:span 1;grid-row:span 1;
  transition:opacity .3s ease,transform .5s var(--spring,ease),background .2s,border-color .2s;
}
.md.is-editing .wd-add{opacity:1;transform:none;pointer-events:auto;transition-delay:.18s}
.md:not(.is-editing) .wd-add{display:grid;max-height:0;min-height:0;height:0;margin:0;padding:0;border:0;overflow:hidden;grid-row:auto;position:absolute;visibility:hidden}
/* the bar: the tools slide in where "Edit" was, and the two buttons trade places */
.md__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow:hidden;max-width:0;opacity:0;transition:max-width .55s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .3s ease}
.md.is-editing .md__tools{max-width:720px;opacity:1;transition-delay:.05s}
.md__sub{position:relative;display:block;min-height:18px}
.md__sub i{font-style:normal;font-size:12.5px;color:var(--ink-3);display:block;transition:opacity .3s ease,transform .45s var(--ease,ease)}
.md__sube{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(6px)}
.md.is-editing .md__subv{opacity:0;transform:translateY(-6px)}
.md.is-editing .md__sube{opacity:1;transform:none}
.md__swap{position:relative;display:inline-grid;min-width:84px}
.md__swap .md__btn{grid-area:1/1;transition:opacity .25s ease,transform .45s var(--spring,ease),background .2s}
.md__swap .md__done{opacity:0;transform:scale(.8);pointer-events:none}
.md.is-editing .md__swap .md__done{opacity:1;transform:none;pointer-events:auto}
.md.is-editing .md__swap .md__edit{opacity:0;transform:scale(.8);pointer-events:none}
@media (max-width:980px){.wd-grid{grid-auto-rows:170px}.md.is-editing .wd-grid{grid-auto-rows:170px}}
@media (prefers-reduced-motion:reduce){.md .wd,.wd__x,.wd__ctl,.md__tools,.md__swap .md__btn,.wd-add{transition-duration:.01ms;animation:none}}

/* The portal draws every <svg> as an outlined icon (no fill, a 1.7px stroke in the text
   colour). The character is a picture, so it takes none of that: its shapes carry their own
   fills and, where they want a line, their own stroke. */
.av{stroke:none;stroke-width:0;fill:none}
.av path[stroke],.av g[stroke] path,.av rect[stroke]{stroke-linecap:round;stroke-linejoin:round}


/* the character stands on the foot of the card, shoulders running off it, like a portrait */
.wd__body:has(.wd__hello){overflow:visible}
.wd__hello{display:block;position:static}
.wd__hi{max-width:56%;height:100%}
.wd__avatar,.wd--l .wd__avatar,.wd--m .wd__avatar{
  position:absolute;right:22px;bottom:-2px;height:94%;margin:0;aspect-ratio:200/230;display:block;
}
.wd--m .wd__avatar{height:104%}
.md.is-editing .wd__avatar{height:78%;bottom:50px}
.wd__avatar{transition:height .5s var(--ease,cubic-bezier(.16,1,.3,1)),bottom .5s var(--ease,cubic-bezier(.16,1,.3,1))}
.wd__avatar .av{position:absolute;inset:0;height:100%;width:100%}

/* the editing tools sit in one row however narrow they are folded to; wrapping them inside a
   zero-width box made the bar as tall as the tools were many */
.md__tools{flex-wrap:nowrap;white-space:nowrap;flex:none;min-width:0}
.md__tools>*{flex:none}
.md__bar{min-height:46px}
@media (max-width:760px){.md.is-editing .md__tools{max-width:100%;flex-wrap:wrap;white-space:normal}.md__tools{flex:0 0 auto}}

/* the character fills its card from the top: no empty band above its head */
.wd--l .wd__avatar{top:22px;bottom:-4px;height:auto;right:18px;max-width:52%}
.wd--m .wd__avatar{top:10px;bottom:-14px;height:auto;right:18px}
.wd--l .wd__hi{max-width:48%}
.md.is-editing .wd--l .wd__avatar{top:26px;bottom:44px}
.md.is-editing .wd--m .wd__avatar{top:12px;bottom:44px}
.wd__look{top:auto;bottom:auto}
.wd__avatar .wd__look{top:8px;right:8px}
.wd--l .wd__avatar{top:auto;bottom:-4px;height:calc(100% - 18px);width:auto}
.wd--m .wd__avatar{top:auto;bottom:-14px;height:calc(100% + 4px);width:auto}
.md.is-editing .wd--l .wd__avatar{top:auto;bottom:44px;height:calc(100% - 78px)}
.md.is-editing .wd--m .wd__avatar{top:auto;bottom:44px;height:calc(100% - 52px)}


/* ================= widgets answer to their own width =================
   A card is placed by the grid, so its width is whatever the grid gives it — one column on a
   wide screen, two on a tablet. What is inside is sized by that, not by the window. */
.wd{container-type:inline-size}
.wd__avatar .av{position:absolute;left:0;right:0;bottom:0;top:auto;height:100%;width:100%;overflow:visible}
.wd__hi b{font-size:clamp(19px,7cqw,34px)}
.wd--l .wd__hi b{font-size:clamp(22px,8cqw,40px)}
.wd__hi p{font-size:clamp(11.5px,2.7cqw,13px)}
.wd__kpi b{font-size:clamp(22px,13cqw,40px)}
@container (max-width:470px){
  .wd__hi{max-width:54%}
  .wd--l .wd__avatar,.wd--m .wd__avatar{right:8px}
}
@container (max-width:380px){
  .wd__hi{max-width:100%}
  .wd__avatar{opacity:.2;right:-14px}
  .wd__hi{position:relative;z-index:1}
}
@container (max-width:250px){
  .wd__avatar{display:none}
}
.wd__avatar{max-width:none}


/* the head reaches near the top of its card; what is above it was only air */
.wd--l .wd__avatar{aspect-ratio:200/208;height:calc(100% - 4px);bottom:-4px;top:auto}
.wd--m .wd__avatar{aspect-ratio:200/208;height:calc(100% + 16px);bottom:-14px;top:auto}
.md.is-editing .wd--l .wd__avatar{height:calc(100% - 90px)}
.md.is-editing .wd--m .wd__avatar{height:calc(100% - 52px)}


/* the 3D characters */
.wd__avatar .av3d{position:absolute;left:0;right:0;bottom:0;top:auto;height:100%;width:100%;display:grid;place-items:end center;perspective:700px}
.av3d img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;
  transform-origin:50% 70%;will-change:transform;filter:drop-shadow(0 14px 14px rgba(90,52,16,.32));transition:filter .3s}
.av3d__glow{position:absolute;left:12%;right:12%;bottom:4%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.75),transparent);filter:blur(6px)}
.wd__avatar:hover .av3d img{filter:drop-shadow(0 18px 16px rgba(90,52,16,.4))}
.wd--l .wd__avatar{aspect-ratio:1/1}
.wd--m .wd__avatar{aspect-ratio:1/1}


/* the 3D picture and the eyes laid over it move as one */
.av3d__rig{position:relative;height:100%;aspect-ratio:1/1;max-width:100%;transform-origin:50% 70%;will-change:transform}
.av3d__rig img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 14px rgba(90,52,16,.32))}
.av3d__eyes{position:absolute;inset:0;width:100%;height:100%;stroke:none;fill:none;overflow:visible;pointer-events:none}
.av3d__lid,.av3d__iris{transform-box:view-box}
.av3d img{transform:none !important}


/* ================= choosing a character ================= */
.acct__char{grid-column:1/-1}
.acct__gender{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:#F6EFE3;position:relative;margin-bottom:16px}
.acct__gender button{position:relative;z-index:1;padding:8px 22px;border-radius:99px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color .2s}
.acct__gender button.is-on{color:var(--ink)}
.acct__gender.has-ink--thumb .pill__ink{background:#fff;box-shadow:0 2px 8px rgba(80,56,20,.16)}
.acct__chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-width:520px}
.acct__chars:empty{display:none}
.acct__ch{
  display:grid;justify-items:center;gap:6px;padding:12px 8px 10px;border-radius:24px;border:1.5px solid var(--edge);background:linear-gradient(160deg,#fff,#FFF8EA);
  font:inherit;cursor:pointer;transition:transform .45s var(--spring,ease),box-shadow .3s,border-color .2s,background .2s;
}
.acct__ch span{width:84px;height:84px;display:grid;place-items:center}
.acct__ch img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(90,52,16,.28));transition:transform .5s var(--spring,ease)}
.acct__ch b{font-size:13px;font-weight:600;color:var(--ink-2)}
.acct__ch:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(197,140,54,.2)}
.acct__ch:hover img{transform:scale(1.08) rotate(-3deg)}
.acct__ch.is-on{border-color:#E4AE52;background:linear-gradient(160deg,#FFF6DB,#FBE3A6);box-shadow:0 12px 26px rgba(228,174,82,.34)}
.acct__ch.is-on b{color:#3A2410}

.wd__look{display:none !important}


.acct__snd{display:inline-flex;align-items:center;gap:9px;margin:18px 18px 0 0;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.acct__snd input{accent-color:#D49A38;width:16px;height:16px}
.acct__hear{margin-top:18px;padding:8px 16px;border-radius:99px;border:1px solid var(--edge);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .4s var(--spring,ease)}
.acct__hear:hover{background:#FFF6E3;border-color:#E9C987}
.acct__hear:active{transform:scale(.95)}


/* ================= Calendar: the side panel ================= */
.cpanel{
  position:fixed;top:92px;right:22px;z-index:110;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 116px);overflow:auto;
  background:#fff;border:1px solid var(--edge,#EAE1D3);border-radius:28px;padding:16px 20px 22px;
  box-shadow:0 34px 70px rgba(80,56,20,.28),0 4px 14px rgba(80,56,20,.08);
  opacity:0;transform:translateX(36px) scale(.97);transform-origin:100% 20%;
  transition:opacity .22s ease,transform .45s var(--spring,cubic-bezier(.32,1.25,.42,1));
}
.cpanel.is-open{opacity:1;transform:none}
.cpanel.is-swap{animation:cpSwap .35s var(--ease,cubic-bezier(.16,1,.3,1))}
@keyframes cpSwap{from{opacity:.4;transform:translateX(14px)}to{opacity:1;transform:none}}
.cp__top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp__rel{font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;background:#F3ECDD;color:#7A5A2B}
.cp__rel.is-now{background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06}
.cp__tools{margin-left:auto;display:flex;gap:2px}
.cp__tools button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,transform .35s var(--spring,ease)}
.cp__tools button:hover{background:#FFF3D9;color:#7A4A1B}
.cp__tools button[data-cp="del"]:hover{background:#FBE6E3;color:#B3392E}
.cp__tools button:active{transform:scale(.9)}
.cp__tools svg,.cp__facts svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cp__title{display:flex;gap:14px;align-items:flex-start;margin:6px 0 16px}
.cp__title>i{flex:none;width:18px;height:18px;border-radius:6px;margin-top:8px}
.cp__title h3{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:#2A1B0A;overflow-wrap:anywhere}
.cp__title p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.cp__facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cp__facts li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-3)}
.cp__facts li>span{display:grid;gap:2px;min-width:0;color:var(--ink)}
.cp__facts b{font-weight:600;font-size:14px}
.cp__facts em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.cp__note>span{font-size:13.5px;line-height:1.6;color:var(--ink-2);white-space:normal}
.cp__go{margin-top:18px;width:100%;padding:11px 16px;border-radius:99px;border:0;background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.cp__ro{margin:16px 0 0;font-size:12px;color:var(--ink-3)}
body.has-cpanel .main{padding-right:0}
@media (max-width:980px){.cpanel{top:auto;bottom:10px;right:10px;left:10px;width:auto;max-height:62vh;transform:translateY(40px)}.cpanel.is-open{transform:none}}

/* ================= Calendar: adding and changing a date ================= */
.modal__box--ce{border-radius:30px !important;overflow:visible !important;max-height:none}
.modal__box--ce.is-shake{animation:ceShake .4s ease}
@keyframes ceShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ce{padding:22px 26px 22px;display:grid;gap:18px}
.ce__head{display:flex;align-items:flex-start;gap:12px}
.ce__title{
  flex:1;min-width:0;border:0;border-bottom:2px solid #E6DBC6;border-radius:0;background:none;padding:6px 2px 10px;
  font:inherit;font-size:26px;font-weight:500;letter-spacing:-.03em;color:#2A1B0A;outline:none;transition:border-color .25s;
}
.ce__title::placeholder{color:#B9AD98}
.ce__title:focus{border-bottom-color:#E4AE52}
.ce__x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;flex:none;transition:background .2s,transform .35s var(--spring,ease)}
.ce__x:hover{background:#F3ECDD;transform:rotate(90deg)}
.ce__x svg,.ce__row>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ce__err{margin:-6px 0 0;padding:9px 14px;border-radius:14px;background:#FDF0EE;color:#B3392E;font-size:13px}
.ce__kinds{display:flex;flex-wrap:wrap;gap:8px}
.ce__kind{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;border:1.5px solid var(--edge,#EAE1D3);background:#fff;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .25s,border-color .25s,color .2s,transform .4s var(--spring,ease);
}
.ce__kind i{width:11px;height:11px;border-radius:50%;background:var(--k)}
.ce__kind:hover{border-color:var(--k)}
.ce__kind:active{transform:scale(.95)}
.ce__kind.is-on{background:color-mix(in srgb,var(--k) 14%,#fff);border-color:var(--k);color:color-mix(in srgb,var(--k) 70%,#1b1007)}
.ce__row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;align-items:center;color:var(--ink-3)}
.ce__row--top{align-items:start}
.ce__row--top>svg{margin-top:12px}
.ce__dates{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ce__dates b{font-weight:500;color:var(--ink-3);font-size:13px}
.ce__dates label{display:grid;gap:3px}
.ce__dates label span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ce input[type="date"],.ce select,.ce textarea{
  width:100%;padding:11px 14px;border-radius:14px;border:1px solid transparent;background:#F6F1E6;font:inherit;font-size:14px;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .3s;
}
.ce__dates input{width:160px}
.ce textarea{resize:vertical;min-height:84px;line-height:1.5}
.ce input[type="date"]:focus,.ce select:focus,.ce textarea:focus{outline:none;border-color:#E4AE52;background:#fff;box-shadow:0 0 0 4px rgba(228,174,82,.2)}
.ce__field{display:grid;gap:8px;min-width:0}
.ce__field small{font-size:12px;color:var(--ink-3)}
.ce__seg{display:inline-flex;gap:3px;padding:4px;border-radius:99px;background:#F6EFE3;justify-self:start;position:relative}
.ce__seg button{position:relative;z-index:1;padding:8px 18px;border-radius:99px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color .2s}
.ce__seg button.is-on{color:var(--ink)}
.ce__seg.has-ink--thumb .pill__ink{background:#fff;box-shadow:0 2px 8px rgba(80,56,20,.16)}
.ce__foot{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:6px}
.ce__sp{flex:1}
.ce__del{padding:10px 16px;border-radius:99px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:#B3392E;cursor:pointer}
.ce__del:hover{background:#FBE6E3}
.ce__cancel{padding:10px 18px;border-radius:99px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.ce__cancel:hover{background:#F3ECDD}
.ce__save{padding:11px 26px;border-radius:99px;border:0;background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(228,174,82,.34);transition:transform .4s var(--spring,ease),box-shadow .3s}
.ce__save:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(228,174,82,.42)}
.ce__save:active{transform:scale(.96)}
.ce__save:disabled{opacity:.5;pointer-events:none}
@media (max-width:560px){.ce{padding:18px 16px}.ce__row{grid-template-columns:20px minmax(0,1fr);gap:12px}.ce__dates input{width:100%}.ce__dates label{flex:1}.ce__title{font-size:22px}}

/* with the panel open the calendar makes room for it beside it, as a sidebar does */
@media (min-width:1100px){
  body .main{transition:padding-right .45s var(--ease,cubic-bezier(.16,1,.3,1))}
  body.has-cpanel .main{padding-right:408px}
}
body .modal{z-index:160}


/* ================= the date card, beside its date ================= */
.cpanel{top:0;left:0;right:auto;width:352px;max-height:min(70vh,520px);border-radius:22px;padding:14px 18px 18px;
  transform:translateY(6px) scale(.96);transform-origin:var(--ax,50%) 0;
  transition:opacity .16s ease,transform .3s var(--spring,cubic-bezier(.32,1.25,.42,1))}
.cpanel.is-up{transform-origin:var(--ax,50%) 100%}
.cpanel.is-open{transform:none}
body.has-cpanel .main{padding-right:0 !important}
.cp__title h3{font-size:19px}
.cp__facts{gap:11px}
@media (max-width:980px){.cpanel{left:10px !important;right:10px;top:auto !important;bottom:10px;width:auto !important}}

/* ================= Users: who may do what ================= */
.uhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.uhead__t{display:grid;gap:2px;margin-right:auto}
.uhead__t b{font-size:18px;font-weight:650;letter-spacing:-.025em}
.uhead__t span{font-size:12.5px;color:var(--ink-3)}
.ulist{display:grid;gap:12px}
.ucard{
  display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,1.6fr) auto;gap:14px 22px;align-items:center;padding:16px 20px;
  border:1px solid var(--edge,#EAE1D3);border-radius:24px;background:#fff;box-shadow:0 8px 22px rgba(80,56,20,.05);
  transition:box-shadow .3s,transform .45s var(--spring,ease),border-color .2s;
}
.ucard:hover{box-shadow:0 14px 30px rgba(80,56,20,.1);transform:translateY(-2px);border-color:#E9D6AE}
.ucard.is-off{opacity:.62}
.ucard__who{display:flex;align-items:center;gap:13px;min-width:0}
.ucard__name{display:grid;gap:1px;min-width:0}
.ucard__name b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard__name b em{font-style:normal;font-weight:500;color:var(--ink-3);font-size:12px}
.ucard__name>span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:16px;background:#F3ECDD;color:#7A4A1B}
.uava--admin{background:linear-gradient(145deg,#F3CB7B,#E0A94E);color:#2A1B06}
.ucard__mid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ucard__reach{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex-basis:100%}
.urole{font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;letter-spacing:.02em}
.urole--admin{background:#FCE9BE;color:#7A4A1B}.urole--editor{background:#E4F3EA;color:#1F7A45}
.urole--viewer{background:#EAF1FB;color:#2D5E9E}.urole--agency{background:#F3E8FA;color:#7A3FA3}
.utag{font-style:normal;font-size:12px;font-weight:600;padding:4px 11px;border-radius:99px;background:#F6EFE3;color:var(--ink-2);white-space:nowrap}
.utag--edit{background:#E4F3EA;color:#1F7A45}
.utag--view{background:#EAF1FB;color:#2D5E9E}
.utag--soft{background:#F6EFE3;color:var(--ink-3)}
.utag--warn{background:#FBE6E3;color:#B3392E}
.utag--agency{background:#F3E8FA;color:#7A3FA3}
.ucard__act{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:980px){.ucard{grid-template-columns:minmax(0,1fr)}.ucard__act{justify-content:flex-start}}

/* the editor */
.modal__box--ua{border-radius:30px !important;max-height:92vh;overflow:hidden !important}
.modal__box--ua.is-shake{animation:ceShake .4s ease}
.ua{display:flex;flex-direction:column;max-height:92vh}
.ua__head{display:flex;align-items:flex-start;gap:12px;padding:22px 26px 12px}
.ua__head>div{display:grid;gap:3px;margin-right:auto}
.ua__head b{font-size:21px;font-weight:650;letter-spacing:-.03em;color:#2A1B0A}
.ua__head span{font-size:13px;color:var(--ink-3)}
.ua__x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:background .2s,transform .35s var(--spring,ease)}
.ua__x:hover{background:#F3ECDD;transform:rotate(90deg)}
.ua__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ua__err{margin:0 26px 8px;padding:9px 14px;border-radius:14px;background:#FDF0EE;color:#B3392E;font-size:13px}
.ua__body{overflow-y:auto;padding:4px 26px 8px;display:grid;gap:22px}
.ua__sec{display:grid;gap:12px}
.ua__sec h4{margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.ua__sech{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ua__sech h4{margin-right:auto}
.ua__bulk{display:inline-flex;gap:4px}
.ua__bulk button{padding:5px 12px;border-radius:99px;border:1px solid var(--edge);background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .2s,border-color .2s}
.ua__bulk button:hover:not(:disabled){background:#FFF6E3;border-color:#E9C987}
.ua__bulk button:disabled{opacity:.4;cursor:default}
.ua__note{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ua__note--big{padding:16px 18px;border-radius:18px;background:#FFF8E8;border:1px solid #F1DDB0;font-size:13.5px;color:var(--ink-2)}
.ua__who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ua__who label{display:grid;gap:5px}
.ua__who label span,.ua__lab{font-size:12px;font-weight:600;color:var(--ink-2)}
.ua__who input{padding:11px 14px;border-radius:14px;border:1px solid transparent;background:#F6F1E6;font:inherit;font-size:14px;transition:border-color .2s,background .2s,box-shadow .3s}
.ua__who input:focus{outline:none;border-color:#E4AE52;background:#fff;box-shadow:0 0 0 4px rgba(228,174,82,.2)}
.ua__roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ua__role{
  display:grid;gap:5px;align-content:start;text-align:left;padding:14px 14px 15px;border-radius:20px;border:1.5px solid var(--edge,#EAE1D3);background:linear-gradient(160deg,#fff,#FFFAF0);
  font:inherit;cursor:pointer;transition:transform .45s var(--spring,ease),box-shadow .3s,border-color .2s,background .2s;
}
.ua__role:hover:not(:disabled){transform:translateY(-2px);border-color:#E9C987}
.ua__role:disabled{opacity:.45;cursor:default}
.ua__ric{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#FCE9BE;color:#9A6724}
.ua__ric svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ua__role b{font-size:14.5px;font-weight:650;color:#2A1B0A;margin-top:4px}
.ua__role em{font-style:normal;font-size:12px;line-height:1.4;color:var(--ink-3)}
.ua__role.is-on{border-color:#E4AE52;background:linear-gradient(160deg,#FFF6DB,#FBE3A6);box-shadow:0 12px 26px rgba(228,174,82,.32)}
.ua__role.is-on .ua__ric{background:#fff}
.ua__grid{border:1px solid var(--edge,#EAE1D3);border-radius:22px;overflow:hidden;background:#fff}
.ua__grid.is-off{opacity:.55}
.ua__mod{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid #F3ECDD;transition:background .2s}
.ua__mod:first-child{border-top:0}
.ua__mod:hover{background:#FFFBF2}
.ua__mt{display:grid;gap:1px;min-width:0}
.ua__mt b{font-size:14px;font-weight:600}
.ua__mt em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ua__seg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:#F6EFE3;flex:none}
.ua__seg button{padding:7px 15px;border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:background .25s,color .2s,box-shadow .25s}
.ua__seg button:hover:not(:disabled):not(.is-on){color:var(--ink)}
.ua__seg button:disabled{opacity:.35;cursor:default}
.ua__seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(80,56,20,.16)}
.ua__seg.lv-edit button.is-on{background:#E4F3EA;color:#1F7A45}
.ua__seg.lv-view button.is-on{background:#EAF1FB;color:#2D5E9E}
.ua__seg.lv-none button.is-on{background:#F3ECDD;color:var(--ink-2)}
.ua__seg--wide{display:flex;flex-wrap:wrap;border-radius:20px;justify-self:start}
.ua__seg--wide button.is-on{background:#fff;color:var(--ink)}
.ua__cover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.ua__cover>div{display:grid;gap:8px;align-content:start}
.ua__chips{display:flex;flex-wrap:wrap;gap:7px}
.ua__chip{padding:7px 14px;border-radius:99px;border:1.5px solid var(--edge,#EAE1D3);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .4s var(--spring,ease)}
.ua__chip:hover{border-color:#E9C987}
.ua__chip:active{transform:scale(.95)}
.ua__chip.is-on{background:#FCE9BE;border-color:#E4AE52;color:#3A2410}
.ua__foot{display:flex;align-items:center;gap:10px;padding:14px 26px 20px;border-top:1px solid #F3ECDD;background:#fff}
.ua__hint{margin-right:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ua__cancel{padding:10px 18px;border-radius:99px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.ua__cancel:hover{background:#F3ECDD}
.ua__save{padding:11px 26px;border-radius:99px;border:0;background:linear-gradient(135deg,#F3CB7B,#E4AE52);color:#2A1B06;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(228,174,82,.34);transition:transform .4s var(--spring,ease),box-shadow .3s}
.ua__save:hover{transform:translateY(-1px)}
.ua__save:active{transform:scale(.96)}
.ua__save:disabled{opacity:.5;pointer-events:none}
@media (max-width:720px){.ua__roles{grid-template-columns:repeat(2,minmax(0,1fr))}.ua__who,.ua__cover{grid-template-columns:minmax(0,1fr)}.ua__mod{grid-template-columns:minmax(0,1fr)}.ua__body,.ua__head,.ua__foot{padding-left:16px;padding-right:16px}}
.ucard{grid-template-columns:minmax(210px,1fr) minmax(0,1.7fr) 330px}
@media (max-width:1180px){.ucard{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.ucard__act{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:980px){.ucard{grid-template-columns:minmax(0,1fr)}}
.ua__save,.ua__cancel{white-space:nowrap}
@media (max-width:560px){.ua__foot{flex-wrap:wrap}.ua__hint{flex-basis:100%;order:-1}.ua__save{flex:1}}


/* ================= Office holidays: the whole day goes red ================= */
body .mcal{--k-holiday:#B3162A}
body .mcal__bar--holiday{--kc:#B3162A;background:#B3162A;color:#fff;box-shadow:none;font-weight:700;letter-spacing:.01em}
body .mcal__bar--holiday:hover{background:#9C1223}
body .mcal__day.is-shut{
  background:linear-gradient(180deg,rgba(179,22,42,.13),rgba(179,22,42,.07)) !important;
  box-shadow:inset 0 0 0 1.5px rgba(179,22,42,.22);
}
body .mcal__day.is-shut i{color:#B3162A;font-weight:700}
body .mcal__day.is-shut.is-today i{background:#B3162A;color:#fff;box-shadow:0 6px 14px rgba(179,22,42,.4)}
body .mcal__day.is-shut:hover{background:rgba(179,22,42,.18) !important}
body .mcal__md.is-shut{background:#B3162A;color:#fff;font-weight:700;border-radius:8px}
body .mcal__md.is-shut::after{background:#fff}
body .mcal__chip--holiday{background:#B3162A;color:#fff}
.ce__kind[data-kind="holiday"]{--k:#B3162A}

/* the short hello that stands in for the figures when somebody has none to show */
body .ovx__hello .ovx__m{max-width:none;flex:1 1 auto}
body .ovx__hello .ovx__m b{font-size:26px;white-space:normal}

/* a widget already on the dashboard shows in the gallery but cannot be added again */
body .wg__card.is-added{opacity:.55;cursor:default;pointer-events:none}
body .wg__card.is-added .wg__sz{color:var(--gold-d,#8a5a14);font-weight:600}

/* the agenda widget's tabs */
body .wd__tabs{display:flex;gap:6px;flex-wrap:wrap}
body .wd__tabs button{border:0;background:rgba(122,74,27,.07);color:var(--ink-2,#5b4a38);font:600 12.5px/1 inherit;padding:8px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
body .wd__tabs button i{font-style:normal;opacity:.6}
body .wd__tabs button.is-on{background:linear-gradient(180deg,#E9BD6A,#D9A24E);color:#3b2a14}

/* resizing a widget by its corner, as on an iPhone home screen */
body .wd__ctl{justify-content:flex-start;right:56px}
body .wd__rz{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;z-index:4;cursor:nwse-resize;
  display:grid;place-items:center;color:#4a3216;touch-action:none;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 16px rgba(42,24,8,.18),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;pointer-events:none;transform:scale(.6);
  transition:opacity .25s ease,transform .5s var(--spring,cubic-bezier(.34,1.56,.64,1)),background .2s,box-shadow .2s}
body .wd__rz svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring,ease)}
body .md.is-editing .wd__rz{opacity:1;pointer-events:auto;transform:none;transition-delay:.12s}
body .md.is-editing .wd__rz:hover{background:rgba(255,255,255,.85);transform:scale(1.1)}
body .md.is-editing .wd__rz:hover svg{transform:scale(1.12)}
body .md.is-editing .wd__rz:active{transform:scale(.94)}
body .wd.is-resizing{box-shadow:0 0 0 2px rgba(228,174,82,.9),0 22px 46px rgba(197,140,54,.32);z-index:5;user-select:none}
body .wd.is-resizing .wd__rz{background:#fff;transform:scale(1.14);box-shadow:0 8px 20px rgba(42,24,8,.28)}
body .wd.is-resizing .wd__rz svg{transform:scale(1.15)}

/* a row that does not fit the card is left out, not cut in half */
body .wd__list > li[hidden]{display:none !important}

/* designation: who somebody is in the company, beside what kind of login they have */
body .udesig{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#7A4A1B;background:rgba(228,174,82,.22);border-radius:999px;padding:4px 10px}
body .ua__desig{display:flex;flex-wrap:wrap;gap:8px}
body .ua__desig button{border:1px solid var(--edge);background:#fff;border-radius:999px;padding:10px 16px;font:600 13px/1 inherit;color:var(--ink-2);cursor:pointer;transition:all .25s var(--spring,ease)}
body .ua__desig button:hover{border-color:#E9C987}
body .ua__desig button.is-on{background:linear-gradient(180deg,#F7D88F,#E4AE52);border-color:transparent;color:#3b2a14;box-shadow:0 6px 14px rgba(207,148,56,.28)}
body .udesig--ext{color:#6B4B1E;background:#EFE2CA}
body .ua__ext{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:1px solid var(--edge);border-radius:16px;background:#fff;font-size:13px;color:var(--ink-2);cursor:pointer}
body .ua__ext input{margin-top:2px;accent-color:#D9A24E;width:18px;height:18px}
body .ua__ext b{color:var(--ink)}
body .ua__copy{display:grid;gap:6px;margin-top:12px;font-size:13px;font-weight:650;color:var(--ink-2)}
body .ua__copy select{width:100%;box-sizing:border-box;border:1px solid var(--edge);background:#fff;border-radius:14px;padding:12px 14px;font:500 14px/1.4 inherit;color:var(--ink)}
body .ua__pick{display:grid;gap:8px;max-height:46vh;overflow:auto}
/* a row in the 'Copy access to…' list. (It was also called ua__who, the name of the Add user name/username/password block, and took that block's layout over.) */
body .ua__person{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--edge);border-radius:16px;background:#fff;cursor:pointer}
body .ua__person input{accent-color:#D9A24E;width:18px;height:18px}
body .ua__person span{display:grid;gap:2px}body .ua__person b{font-size:14px}body .ua__person em{font-style:normal;font-size:12px;color:var(--ink-3)}

/* Phones: the figure tiles sit two to a row instead of one long column, so a screen's numbers are seen
   at a glance and not scrolled through. */
@media (max-width:560px){
  body :is(.pr__kpis,.ev__kpis,.ads__kpis,.qr__kpis,.ev__kpis--wide){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body :is(.pr__kpis,.ev__kpis,.ads__kpis,.qr__kpis)>*{padding:14px 14px;min-width:0}
  body :is(.pr__kpis,.ev__kpis,.ads__kpis,.qr__kpis)>* b{font-size:clamp(19px,6vw,24px);overflow-wrap:anywhere}
  body :is(.pr__kpis,.ev__kpis,.ads__kpis,.qr__kpis)>* em{font-size:11.5px}
}

/* The rate sheet's preview is a 794px page shrunk to fit by the portal. Something was holding the frame to the
   width of its column as well, so the page inside shrank a second time and ended up the size of a stamp. */
body .rt__pv iframe{width:794px;max-width:none;height:1123px}

/* the newspaper ad's size line gets its own row on a phone instead of a sliver beside the buttons */
@media (max-width:760px){
  body .na__bar .na__status{flex:1 1 100%;order:-1}
}

/* The filter sheet is a bottom sheet that slides up on a phone. Closed, it is only moved out of sight, and where a
   parent was animating it ended up in the middle of the page: its Done button showed as a wide gold bar behind the
   My dashboard heading. Closed means hidden, not just moved. */
@media (max-width:760px){
  body .sheet:not(.is-open){visibility:hidden;pointer-events:none;transition:transform .28s cubic-bezier(.22,.72,.16,1),visibility 0s linear .28s}
  body .sheet.is-open{visibility:visible;transition:transform .28s cubic-bezier(.22,.72,.16,1)}
}

/* Editing on a phone: the colour and size controls sit along the bottom of every widget, so the greeting's small
   line is dropped while editing rather than being half-covered by them. */
@media (max-width:760px){
  body .md.is-editing .wd__hi p{display:none}
}

/* The lightbox's Download button sits on a near-black bar. The ghost button's theme colours (dark text, gold edge)
   and the link underline made it unreadable there, so it gets its own light-on-dark look. */
body .lightbox a.btn,body .lightbox .btn--ghost{
  color:#fff;text-decoration:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  box-shadow:none;font-weight:600;
}
body .lightbox a.btn:hover,body .lightbox .btn--ghost:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.7);color:#fff}
body .lightbox .lightbox__bar span{color:#fff}
body .lightbox{background:rgba(12,9,5,.97)}

body .udesig--team{color:#1F6B4F;background:#DDF1E2}
body .ua__team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
body .ua__team label{display:grid;gap:6px;font-size:12.5px;font-weight:650;color:var(--ink-3)}
body .ua__team input[type=number],body .ua__team input:not([type]){width:100%;box-sizing:border-box;border:1px solid var(--edge);background:#fff;border-radius:14px;padding:11px 13px;font:500 14px/1.4 inherit;color:var(--ink)}
body .ua__team .ua__ext{grid-column:1/-1;margin-top:0}
@media (max-width:560px){body .ua__team{grid-template-columns:minmax(0,1fr)}}

/* The resize handle the way the phone does it: a thick curved bar hugging the card's bottom-right corner, shown while
   arranging. It is the whole corner that grabs, not a small button. */
body .wd__rz{right:3px;bottom:3px;width:50px;height:50px;border-radius:0 0 30px 0;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:rgba(74,50,22,.62);transform:scale(.8);transform-origin:100% 100%}
body .wd__rz svg{width:46px;height:46px;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 2px 5px rgba(42,24,8,.28))}
body .md.is-editing .wd__rz:hover{background:none;color:rgba(184,119,28,.95);transform:scale(1.06)}
body .md.is-editing .wd__rz:hover svg{transform:none}
body .md.is-editing .wd__rz:active{transform:scale(.97)}
body .wd.is-resizing .wd__rz{background:none;color:rgba(184,119,28,1);transform:scale(1.1);box-shadow:none}
body .wd.is-resizing .wd__rz svg{transform:none}
/* the minus badge: a soft round button, a little bigger, like the phone's */
.wd__x{width:30px;height:30px;font-size:22px;font-weight:300;background:rgba(74,50,22,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(42,24,8,.25)}

/* closer to the phone's: a glassy violet bar that follows the card's own corner, outlined in light */
body .wd__rz{right:0;bottom:0;width:48px;height:48px;color:inherit;transform:scale(.85)}
body .wd__rz svg{width:48px;height:48px;filter:drop-shadow(0 3px 7px rgba(40,30,110,.35));overflow:visible}
body .wd__rz .rz-o{fill:none;stroke:rgba(255,255,255,.85);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
body .wd__rz .rz-i{fill:none;stroke:url(#rzg);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
body .md.is-editing .wd__rz:hover{color:inherit;transform:scale(1.05)}
body .wd.is-resizing .wd__rz{color:inherit;transform:scale(1.1)}
.wd__x{width:32px;height:32px;top:8px;left:8px;font-size:24px;font-weight:400;color:#111;background:rgba(160,160,205,.88);
  border:1.5px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(40,30,110,.25)}
.md.is-editing .wd__x{top:8px;left:8px}
.md.is-editing .wd--gold .wd__x{background:rgba(160,160,205,.88)}
.wd__x:hover{background:rgba(140,140,200,.95);transform:scale(1.08)}

/* in the portal's own colours: a gold arc and a warm brown minus */
body .wd__rz svg{filter:drop-shadow(0 3px 7px rgba(120,76,16,.35))}
.wd__x{color:#fff;background:rgba(74,50,22,.7);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(42,24,8,.25)}
.md.is-editing .wd--gold .wd__x{background:rgba(42,24,8,.85)}
.wd__x:hover{background:#B3392E}

/* the list of signed-in devices in My account */
.acct__sess{display:grid;gap:8px;margin:6px 0 12px}
.acct__sessrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(74,50,22,.12);border-radius:14px;background:rgba(255,255,255,.55)}
.acct__sessrow b{display:block;font-size:14px}
.acct__sessrow span{display:block;font-size:12px;color:#8A7B63;margin-top:2px}
.acct__this{display:inline-block !important;margin:0 0 0 6px !important;padding:2px 8px;border-radius:99px;background:rgba(228,174,82,.28);color:#7A4A1B !important;font-size:11px !important;font-weight:700;vertical-align:middle}

/* the gold rate poster in My rates */
.rt__poster{display:flex;justify-content:center;margin:4px 0 12px}
.rt__poster canvas{width:100%;max-width:300px;height:auto;border-radius:14px;background:#4a0f1a;box-shadow:0 10px 28px rgba(60,18,28,.28)}

.rt__sizes{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:rgba(74,50,22,.08);margin:2px 0 10px}
.rt__sizes button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#6b5a40;padding:7px 14px;border-radius:99px;cursor:pointer}
.rt__sizes button i{font-style:normal;font-weight:500;opacity:.7;margin-left:4px}
.rt__sizes button.is-on{background:#fff;color:#2A1B06;box-shadow:0 1px 4px rgba(42,24,8,.18)}

/* Creatives: the counter standees */
.st__tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:rgba(74,50,22,.08);margin:0 0 16px;flex-wrap:wrap}
.st__tabs button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#6b5a40;padding:9px 18px;border-radius:99px;cursor:pointer}
.st__tabs button.is-on{background:#fff;color:#2A1B06;box-shadow:0 1px 5px rgba(42,24,8,.18)}
.st__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:24px;align-items:start}
.st__form{background:rgba(255,255,255,.7);border:1px solid rgba(74,50,22,.1);border-radius:22px;padding:20px 22px}
.st__head h3{margin:0 0 2px;font-size:19px}.st__head span{font-size:13px;color:#8A7B63}
.st__grp{margin-top:16px;padding-top:14px;border-top:1px solid rgba(74,50,22,.1)}
.st__grp>b{display:block;font-size:13px;letter-spacing:.03em;color:#4a3216;margin-bottom:8px}
.st__cells{display:grid;gap:12px}.st__cells--2{grid-template-columns:1fr 1fr}.st__cells--1{grid-template-columns:minmax(0,260px)}
.st__cell span{display:block;font-size:12px;color:#8A7B63;margin-bottom:4px}
.st__cell input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;font-weight:700;padding:10px 14px;border-radius:14px;border:1px solid rgba(74,50,22,.18);background:#fff;color:#2A1B06}
.st__cell input:focus{outline:2px solid rgba(228,174,82,.7);border-color:transparent}
.st__act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.st__note{font-size:12.5px;color:#8A7B63;margin:12px 0 0}
.st__view{position:sticky;top:90px}
.st__view canvas{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 12px 30px rgba(42,24,8,.25);background:#fff}
@media (max-width:860px){.st__body{grid-template-columns:1fr}.st__view{position:static;max-width:340px;margin:0 auto}}

/* Celebrity display: the showroom screens */
.cd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:start}
.cd__form{background:rgba(255,255,255,.7);border:1px solid rgba(74,50,22,.1);border-radius:22px;padding:20px 22px}
.cd__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cd__fields .st__cell input{font-size:16px;font-weight:600}
.cd__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.cd__slot{border-radius:16px;transition:box-shadow .15s}
.cd__slot.is-drop{box-shadow:0 0 0 3px rgba(228,174,82,.8)}
.cd__img{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#f3e9d8;border:1px dashed rgba(74,50,22,.28);display:grid;place-items:center;cursor:pointer}
.cd__img img{width:100%;height:100%;object-fit:cover;display:block}
.cd__img span{font-size:13px;font-weight:600;color:#8A7B63;text-align:center;line-height:1.5}
.cd__slot:not(.is-empty) .cd__img{border-style:solid;border-color:rgba(74,50,22,.12)}
.cd__ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin-top:8px}
.cd__ctl b{font-size:13px;color:#4a3216}
.cd__ctl span{display:inline-flex;gap:4px}
.cd__ctl .btn{padding:4px 9px}
.cd__state{font-size:13px;color:#8A7B63}
.cd__links{margin-top:22px;padding-top:16px;border-top:1px solid rgba(74,50,22,.1)}
.cd__links h4{margin:0 0 2px;font-size:15px}.cd__links p{margin:0 0 10px;font-size:13px;color:#8A7B63}
.cd__link{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:8px;align-items:center;margin-top:8px}
.cd__link span{font-size:13px;font-weight:600;color:#4a3216}
.cd__link input{min-width:0;font:inherit;font-size:13px;padding:8px 10px;border-radius:10px;border:1px solid rgba(74,50,22,.18);background:#fff;color:#2A1B06}
.cd__view{position:sticky;top:90px}
.cd__frame{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(42,24,8,.25);background:#2a1606}
.cd__frame--h{aspect-ratio:16/9}
.cd__frame--v{aspect-ratio:9/16;max-width:210px;margin:0 auto}
.cd__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cd__view .st__note{text-align:center;margin:6px 0 14px}
@media (max-width:980px){.cd{grid-template-columns:1fr}.cd__view{position:static}}
@media (max-width:620px){.cd__fields{grid-template-columns:1fr}.cd__link{grid-template-columns:1fr auto auto}.cd__link span{grid-column:1/-1}}
.cd__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cd__tabs button{border:0;font:inherit;font-size:13px;font-weight:600;color:#6b5a40;background:rgba(74,50,22,.08);padding:8px 14px;border-radius:99px;cursor:pointer}
.cd__tabs button.is-on{background:#fff;color:#2A1B06;box-shadow:0 1px 5px rgba(42,24,8,.18)}
.cd__tabs button i{font-style:normal;color:#c58c36;margin-left:2px}
.cd__tabs .cd__add{background:transparent;border:1px dashed rgba(74,50,22,.35)}
.cd__slidectl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* the hover card for graphs */
.tipcard{position:fixed;left:0;top:0;z-index:300;pointer-events:none;max-width:280px;min-width:130px;padding:10px 13px;border-radius:13px;
  background:rgba(255,255,255,.97);border:1px solid rgba(74,50,22,.14);box-shadow:0 12px 32px rgba(42,24,8,.22),0 2px 6px rgba(42,24,8,.1);
  font-size:12.5px;line-height:1.4;color:#3d2c15;opacity:0;transition:opacity .12s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tipcard.is-on{opacity:1}
.tipcard__h{font-weight:700;font-size:13px;color:#2A1B0A;margin-bottom:5px}
.tipcard__row{display:flex;justify-content:space-between;gap:16px;padding:1px 0}
.tipcard__row span{color:#7a6a52}.tipcard__row b{color:#2A1B0A;font-weight:650;text-align:right}
.tipcard__dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.tipcard__sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
/* bars and points answer the pointer too */
.ads__col,.qr__col,.ev__tcol,.as__bars rect,.as__donut circle{transition:filter .12s,opacity .12s}
.ads__col:hover,.qr__col:hover,.ev__tcol:hover{filter:brightness(.9) saturate(1.15)}
.as__donut circle:hover{opacity:.82}

.tipx{stroke:#7A4A1B;stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none;vector-effect:non-scaling-stroke}
.tipdot{fill:#fff;stroke:#B8771C;stroke-width:2.5;opacity:0;pointer-events:none}
svg[data-tipline]{cursor:crosshair}

/* the Campaigns list inside Ad performance: air between the filter pills and the table under them */
.ovx__panel .ovx__bar--left{margin:6px 0 16px;padding:0}
.ovx__panel #ovCamps{margin-top:2px}

/* the daily rates: follow the live rate automatically */
.rt__auto{display:flex;gap:12px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border:1px solid #EFE2C7;border-radius:14px;background:#FFFCF6;cursor:pointer}
.rt__auto input{position:absolute;opacity:0;pointer-events:none}
.rt__auto>i{flex:none;position:relative;width:38px;height:22px;margin-top:1px;border-radius:99px;background:#D9CDB8;transition:background .2s}
.rt__auto>i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(60,40,10,.3);transition:transform .25s var(--spring,ease)}
.rt__auto input:checked+i{background:linear-gradient(135deg,#E9B552,#C58C36)}
.rt__auto input:checked+i::after{transform:translateX(16px)}
.rt__auto input:focus-visible+i{outline:2px solid #C58C36;outline-offset:2px}
.rt__auto span{display:grid;gap:3px;min-width:0}
.rt__auto b{font-size:13.5px;color:var(--ink)}
.rt__auto em{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.rt__auto em u{text-decoration:none;color:var(--bad)}

/* social media at a glance */
.wd .sa__verdict{margin:6px 0 8px;font-size:13.5px;font-weight:600;color:#3A2410}
.wd .sa__rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wd .sa__rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 6px;border-top:1px solid rgba(120,90,40,.12);cursor:pointer;border-radius:10px;transition:background .15s}
.wd .sa__rows li:first-child{border-top:0}
.wd .sa__rows li:hover{background:rgba(255,255,255,.6)}
.wd .sa__t{display:grid;gap:1px;min-width:0}
.wd .sa__t b{font-size:13.5px;font-weight:600;color:#3A2410}
.wd .sa__t b i{font-style:normal;font-size:10px;font-weight:600;color:#8A6A2E;background:#FBF0D9;border-radius:7px;padding:1px 6px;margin-left:4px}
.wd .sa__t em{font-style:normal;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd .sa__n{display:grid;justify-items:end;gap:1px}
.wd .sa__n strong{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#3A2410;font-variant-numeric:tabular-nums}
.wd .sa__c{text-decoration:none;font-size:11.5px;font-weight:500;white-space:nowrap}
.wd .sa__c--up{color:#2F7D4F}.wd .sa__c--down{color:#B2402F}.wd .sa__c--flat{color:var(--ink-3)}
.wd .sa__fine{margin:8px 0 0;font-size:11.5px;color:var(--ink-3)}

.wd .wd__add{margin-left:auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid rgba(120,90,40,.22);background:rgba(255,255,255,.7);color:#7A5718;cursor:pointer;padding:0;transition:background .15s,transform .15s}
.wd .wd__add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.wd .wd__add:hover{background:#fff;transform:scale(1.08)}

/* Performance, everything: one big card of tiles */
.wd--x{min-height:0}
.pf{height:calc(100% - 38px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:8px 0 4px}
.pf__s h4{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pf__g{display:flex;flex-wrap:wrap;gap:10px}.pf__g>.pf__t{flex:1 1 140px}
.pf__t{background:rgba(255,255,255,.72);border:1px solid rgba(197,140,54,.18);border-radius:18px;padding:12px 14px;display:grid;gap:3px;align-content:start;min-width:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pf__t:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(197,140,54,.16)}
.pf__t>span{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf__t b{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.pf__t em{font-style:normal;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf__c{text-decoration:none;font-size:11px;font-weight:600}.pf__c--up{color:#2F7D4F}.pf__c--down{color:#B2402F}.pf__c--flat{color:var(--ink-3)}
@media (max-width:980px){.wd--x{grid-column:span 2;grid-row:span 4}}
.pf__cg{display:flex;flex-wrap:wrap;gap:12px}.pf__cg>.pf__ch{flex:1 1 250px}
.pf__ch{background:rgba(255,255,255,.72);border:1px solid rgba(197,140,54,.18);border-radius:18px;padding:12px 14px;min-width:0}
.pf__ch h5{margin:0 0 6px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.pf__plot{height:150px}.pf__ch .wd__wkbars{margin:4px 0 0;height:96px}.pf__ch .wkw__svg{max-height:120px}
.pf__svg{display:block;width:100%;height:auto;overflow:visible}
.pf__base{stroke:#E4D9C3;stroke-width:1}.pf__ax{font-size:9.5px;fill:var(--ink-3);stroke:none}
.pf__lg{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);margin-bottom:4px}.pf__lg i{width:8px;height:8px;border-radius:50%;display:inline-block}.pf__lg i:not(:first-child){margin-left:8px}.pf__lg em{margin-left:auto;font-style:normal}
.pf__bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pf__bars li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;align-items:center;gap:10px;font-size:12px}
.pf__bars li>span{display:grid;min-width:0}.pf__bars b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf__bars em{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.pf__bars u{text-decoration:none;height:9px;border-radius:99px;background:rgba(197,140,54,.14);overflow:hidden;display:block}.pf__bars u i{display:block;height:100%;border-radius:99px}
.pf__bars strong{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.pf__pie{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:14px;align-items:center}
.pf__pie svg{width:100%;height:auto;transform:rotate(-90deg)}.pf__pie svg circle{transition:stroke-width .2s}.pf__pie svg circle:hover{stroke-width:7.4}
.pf__pie svg text{transform:rotate(90deg);transform-origin:21px 21px}
.pf__pt{font-size:5.4px;font-weight:700;fill:var(--ink)}.pf__ps{font-size:2.9px;fill:var(--ink-3)}
.pf__pie ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:12px}
.pf__pie li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:7px;align-items:center}
.pf__pie li i{width:9px;height:9px;border-radius:50%}.pf__pie li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.pf__pie li b{font-variant-numeric:tabular-nums}.pf__pie li em{font-style:normal;color:var(--ink-3);min-width:46px;text-align:right}
/* the svg line-icon rule gives every shape a dark outline: the graphs draw their own */
.pf__svg rect,.pf__svg polygon,.pf__pie svg text{stroke:none}
.pf__svg rect{fill:transparent}
.pf__pie svg circle{stroke-linecap:butt}
.pf__pie svg text{fill:var(--ink)}.pf__pie svg .pf__ps{fill:var(--ink-3)}
.pf__pie li em{display:none}
.pf__pie{grid-template-columns:1fr;justify-items:center;gap:10px}.pf__pie svg{max-width:150px}.pf__pie ul{width:100%}
.pf__tg{display:flex;flex-wrap:wrap;gap:12px}.pf__tg>.pf__post{flex:1 1 210px;max-width:340px}
.pf__post{background:rgba(255,255,255,.72);border:1px solid rgba(197,140,54,.18);border-radius:18px;overflow:hidden;cursor:pointer;display:grid;grid-template-rows:auto 1fr;min-width:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pf__post:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(197,140,54,.16)}
.pf__img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#F6E7C7,#EBCB8A);display:grid;place-items:center;overflow:hidden}
.pf__img img{width:100%;height:100%;object-fit:cover;display:block}.pf__img>span{transform:scale(1.8);opacity:.9}
.pf__img i{position:absolute;left:8px;top:8px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.9);color:#5a3a0a}
.pf__pb{padding:10px 12px 12px;display:grid;gap:3px;align-content:start;min-width:0}
.pf__pl{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.pf__pb b{font-size:13px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf__pb em{font-style:normal;font-size:11.5px;color:var(--ink-2)}
.pf__post[style*="--pc"] .pf__pb em{color:var(--pc)}
.pf__wait{margin:0;font-size:12px;color:var(--ink-3)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .wd{animation:wdIn .65s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--n,0) * 55ms)}
  @keyframes wdIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
  .wd:hover{box-shadow:0 18px 38px rgba(197,140,54,.2)}
  .pf__t,.pf__ch,.pf__post{animation:pfIn .6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(220ms + var(--k,0) * 40ms)}
  .pf__g>.pf__t:nth-child(2),.pf__cg>.pf__ch:nth-child(2),.pf__tg>.pf__post:nth-child(2){--k:1}.pf__g>.pf__t:nth-child(3),.pf__cg>.pf__ch:nth-child(3),.pf__tg>.pf__post:nth-child(3){--k:2}
  .pf__g>.pf__t:nth-child(4),.pf__cg>.pf__ch:nth-child(4),.pf__tg>.pf__post:nth-child(4){--k:3}.pf__g>.pf__t:nth-child(5),.pf__cg>.pf__ch:nth-child(5){--k:4}.pf__g>.pf__t:nth-child(n+6){--k:5}
  @keyframes pfIn{from{opacity:0;transform:translateY(12px)}}
  .pf__svg polyline{stroke-dasharray:1;animation:pfLine 1.3s cubic-bezier(.45,0,.2,1) .35s both}
  @keyframes pfLine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .pf__svg polygon{animation:pfFade 1.1s ease .5s both}@keyframes pfFade{from{opacity:0}}
  .pf__pie svg circle{animation:pfArc 1.1s cubic-bezier(.45,0,.2,1) .3s backwards}
  @keyframes pfArc{from{stroke-dasharray:0 100}}
  .pf__bars u i{animation:pfBar .9s cubic-bezier(.16,1,.3,1) .35s backwards}@keyframes pfBar{from{width:0}}
  .wd__mini i,.wd__bar i{animation:pfBar .9s cubic-bezier(.16,1,.3,1) .3s backwards}
  .pf__img img{animation:pfFade .8s ease .3s both}
}
.pf__img{max-height:230px}