/* ================= tokens ================= */
*,*::before,*::after{box-sizing:border-box}

/* ---------- nothing may push the page sideways ----------
   A portal full of other people's text — addresses, agency names, email addresses, a
   pasted link — will sooner or later be handed a word with nothing in it to break on,
   and the usual result is a page that scrolls sideways on a phone and a column that
   runs under its neighbour on a desktop. These are the standing answer, so it is not a
   thing to be found and fixed one screen at a time.

   `clip` rather than `hidden`: hidden would make the document a scroll container, and
   that quietly breaks `position: sticky` on everything inside it. */
html{overflow-x:clip}

/* Out of sight until a keyboard finds it, then the first thing on the page. */
.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;border-radius:9px;
  background:var(--gold);color:#2A1B06;font-weight:600;font-size:13.5px;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.28);
  transform:translateY(-180%);transition:transform .16s cubic-bezier(.22,.7,.3,1);
}
.skip:focus{transform:none}
#main:focus{outline:none}
body{overflow-wrap:break-word}
/* a picture, a frame or a drawing is at most as wide as what holds it */
img,svg,video,canvas,iframe{max-width:100%}
/* A flex or grid child will not shrink below its own content unless it is told it may,
   and that one default is behind most of the overflow in most layouts. */
.row,.card,.fld,.na,.lg,.topbar,.side__link,.mhead,.mfoot,.checks__head,.lg__bar,.na__opt{min-width:0}
.row>*,.card>*,.topbar>*,.mhead>*,.lg__bar>*,.na>*,.na__side>*{min-width:0}
:root{
  /* where the top of the scrolling pane is: nothing on a desktop, the height of the
     bar on a phone, where the bar is sticky and the document does the scrolling */
  --topstick:0px;
  --brown:#7A5222;          /* top bar */
  --brown-d:#5F3F19;
  --side:#4A2F11;           /* sidebar */
  --side-hi:#5E3D16;
  --side-on:#F6EDE0;
  --gold:#C58C36;
  --gold-d:#A97327;
  --page:#232323;           /* outer frame */
  --ink:#1B1712;
  --ink-2:#6B625A;
  --ink-3:#9A9089;
  --line:#E7E1D9;
  --line-2:#F2EEE8;
  --paper:#FFFFFF;
  --paper-2:#FAF8F5;
  --ok:#1F7A45; --warn:#B4741A; --bad:#B3392E; --idle:#6B7280;
  --r:10px;
  --shadow:0 18px 44px rgba(0,0,0,.28);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--ink);font:400 15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
[hidden]{display:none !important}

/* ================= scrollbars =================
   The default grey bar sits oddly against the warm palette, so every scrollable
   surface gets the same slim one. Firefox takes the two-value form; WebKit and Blink
   need the pseudo-elements. */
html{scrollbar-width:thin;scrollbar-color:#CFC5B6 transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#CFC5B6;border-radius:8px;
  /* a transparent border padded by background-clip keeps the thumb slim without
     shrinking the hit area */
  border:3px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:#B9AC98;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

/* dark surfaces need a light thumb instead */
.side,.lightbox{scrollbar-color:rgba(246,237,224,.32) transparent}
.side::-webkit-scrollbar-thumb,.lightbox::-webkit-scrollbar-thumb{background:rgba(246,237,224,.3)}
.side::-webkit-scrollbar-thumb:hover,.lightbox::-webkit-scrollbar-thumb:hover{background:rgba(246,237,224,.5)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap;
  padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  background:var(--brown);color:#fff;transition:background .18s,transform .12s,box-shadow .18s;
}
.btn:hover{background:var(--brown-d)}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#2A1B06}
.btn--gold:hover{background:var(--gold-d);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--paper-2);border-color:#D9D2C8}
.btn--danger{background:#fff;color:var(--bad);border:1px solid #E9C7C3}
.btn--danger:hover{background:#FDF3F2}
.btn--sm{padding:6px 12px;font-size:12.5px;border-radius:7px}
.btn--lg{padding:13px 18px;font-size:15px;width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

.sel,.inp,textarea.inp{
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;
  transition:border-color .16s,box-shadow .16s;width:100%;
}
.sel{width:auto;padding-right:30px;appearance:none;
  background:#fff 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") no-repeat right 9px center/12px}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
textarea.inp{resize:vertical;min-height:74px;line-height:1.5}

/* ---------- the date field, and the portal's own calendar ---------- */
/* the browser's little calendar button belongs to the browser; ours sits in its place */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;cursor:pointer;width:16px;height:16px;margin:0;padding:0}
input[type="date"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2' fill='none' stroke='%236B625A' stroke-width='1.3'/%3E%3Cpath d='M2 6.6h12M5.5 1.8v2.6M10.5 1.8v2.6' fill='none' stroke='%236B625A' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;
  padding-right:30px;
}
.cal{
  position:fixed;z-index:120;width:264px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(58,38,12,.18);padding:12px 12px 9px;
  animation:calIn .14s ease-out;
}
@keyframes calIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.cal__head b{font-size:13.5px;font-weight:600;color:var(--ink)}
.cal__nav{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink-2);background:transparent;border:0;
}
.cal__nav:hover{background:var(--line-2);color:var(--brown)}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.cal__dow span{
  text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);padding:3px 0}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__day{
  height:31px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink);
  transition:background .12s,color .12s;
}
.cal__day:hover:not(:disabled){background:#FBF3E4;color:var(--brown)}
.cal__day.is-today{font-weight:700;color:var(--gold-d)}
.cal__day.is-on{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#fff;font-weight:600}
.cal__day:disabled{color:var(--line);cursor:default}
.cal__day.is-out{visibility:hidden}
.cal__foot{display:flex;justify-content:space-between;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--line)}
.cal__link{
  background:transparent;border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink-3);padding:3px 5px;border-radius:6px}
.cal__link:hover{color:var(--brown);background:var(--line-2)}

/* ---------- the wait before the portal appears ----------
   Small, and only what is needed: the flame from the lockup with a ring turning around
   it, on the page's own white. The flame is cropped out of the artwork with a mask, the
   same way the wall screens crop it, so there is no second copy to keep in step. */
.splash{
  position:fixed;inset:0;z-index:200;
  display:grid;place-content:center;
  background:#fff;
  transition:opacity .35s ease, visibility .35s;
}
.splash.is-done{opacity:0;visibility:hidden}

.splash__ring{position:relative;width:62px;height:62px}
.splash__ring i{
  position:absolute;left:calc(50% - 2px);top:1px;
  width:4px;height:11px;border-radius:99px;background:var(--gold);
  transform-origin:2px 30px;
  transform:rotate(calc(var(--a) * 30deg));
  animation:spokeFade 1.02s linear infinite;
  animation-delay:calc(var(--a) * -85ms);
}
@keyframes spokeFade{0%{opacity:1}70%,100%{opacity:.13}}
/* the flame, cropped out of the lockup: 300 × 367 of it, starting 338 across */
.splash__mark{
  --w:21px;
  position:absolute;left:50%;top:50%;
  width:var(--w);height:calc(var(--w) * 367 / 300);
  transform:translate(-50%,-50%);
  background:var(--brown);
  -webkit-mask:url("/assets/logo.png") no-repeat;
  mask:url("/assets/logo.png") no-repeat;
  -webkit-mask-size:calc(var(--w) * 976 / 300) auto;
  mask-size:calc(var(--w) * 976 / 300) auto;
  -webkit-mask-position:calc(var(--w) * -338 / 300) 0;
  mask-position:calc(var(--w) * -338 / 300) 0;
  animation:flameTurn 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
/* the flame turns on the spot, in step with the ring going round it */
@keyframes flameTurn{
  from{transform:translate(-50%,-50%) rotateY(0deg)}
  to{transform:translate(-50%,-50%) rotateY(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .splash__ring i,.splash__mark{animation:none}
  .splash__ring i{opacity:.4}
}



/* ================= login ================= */
.login{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;overflow:auto;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(197,140,54,.34), transparent 62%),
    radial-gradient(900px 620px at 108% 112%, rgba(197,140,54,.20), transparent 60%),
    linear-gradient(158deg, #6B451B 0%, #4A2F11 44%, #2A1908 100%);
}
.login::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
}
.login__panel,.login__card{position:relative;z-index:1}

.login{grid-template-columns:auto auto;justify-content:center;align-content:center;
  gap:clamp(30px,6vw,78px)}
.login__panel{width:min(430px,40vw);justify-self:end;color:#F6EDE0}
.login__logo{width:min(300px,72%);height:auto;margin-bottom:16px}
.login__tag{
  margin:0 0 26px;font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(246,237,224,.62);padding-left:3px;
}
.login__points{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.login__points li{
  position:relative;padding-left:24px;font-size:13.5px;line-height:1.6;color:rgba(246,237,224,.82);
}
.login__points li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.22);
}

.login__card{
  width:min(382px,92vw);background:#fff;border-radius:16px;padding:32px 30px 26px;
  box-shadow:0 32px 74px rgba(0,0,0,.46);display:grid;gap:14px;align-content:start;
}
.login__card h1{font-size:23px;letter-spacing:-.02em}
.login__sub{margin:-8px 0 6px;font-size:13px;color:var(--ink-3)}
.fld{display:grid;gap:6px;align-content:start}
.fld>span{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14.5px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
.login__err{margin:0;padding:10px 13px;border-radius:9px;background:#FDF0EE;color:var(--bad);font-size:13px}
.login__hint{margin:6px 0 0;text-align:center;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}

@media (max-width:820px){
  /* The card was sized in vw while the container also had side padding, so the two
     together ran past the edge of the screen and clipped the card. Inside the padded
     column, 100% is the right width. */
  .login{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 18px;justify-content:stretch}
  .login__panel{width:100%;max-width:380px;justify-self:center;text-align:center}
  .login__card{width:100%;max-width:400px;justify-self:center}
  /* a block-level image ignores text-align, so it needs auto margins to sit centred
     under the panel's centred text */
  .login__logo{width:min(215px,58%);margin-inline:auto}
  .login__points{display:none}
  .login__tag{margin-bottom:0;font-size:11px;letter-spacing:.28em}
}

@media (max-width:400px){
  .login{padding:20px 14px;gap:18px}
  .login__card{padding:24px 20px 20px;border-radius:14px}
  .login__card h1{font-size:21px}
  .login__logo{width:min(180px,54%);margin-inline:auto}
}

/* ================= app frame ================= */
.app{
  height:100%;display:grid;
  /* minmax(0,1fr), not 1fr: a grid track's floor is its content, so one long unbroken
     word — an address, an agency name, a pasted link — widens the whole column past the
     window and takes the page sideways with it. This is that bug's one true fix; the
     overflow-x on the document is only the net under it. */
  grid-template-columns:284px minmax(0, 1fr);
  grid-template-rows:64px 1fr;
  grid-template-areas:"top top" "side main";
}

/* ---- top bar ---- */
.topbar{
  grid-area:top;background:var(--brown);color:#fff;display:flex;align-items:center;gap:16px;
  padding:0 18px 0 20px;
}
.topbar__brand{flex:none;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
/* the artwork is 976x592 with the flame mark at x338 y0, 300x367 — crop to it */
.brandmark{
  flex:none;width:25px;height:31px;
  background:url("/assets/logo.png") no-repeat 0 0;
  background-size:calc(25px * 976 / 300) auto;
  background-position:calc(-338px * 25 / 300) 0;
}
.brandtext{display:flex;flex-direction:column;line-height:1.12}
.brandtext b{font-size:14.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.brandtext i{font-size:10px;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.topbar__burger{display:none;flex-direction:column;gap:4px;padding:8px;margin-left:-8px}
.topbar__burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.topbar__search{position:relative;flex:1;max-width:520px;margin-left:8px}
.topbar__search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:rgba(255,255,255,.62)}
.topbar__search input{
  width:100%;padding:8px 12px 8px 35px;border-radius:8px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.16);color:#fff;font-size:13.5px;
}
.topbar__search input::placeholder{color:rgba(255,255,255,.55)}
.topbar__search input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.24)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:rgba(255,255,255,.88)}
.tbtn:hover{background:rgba(255,255,255,.13);color:#fff}
.who{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:20px;background:rgba(0,0,0,.16)}
.who__avatar{width:27px;height:27px;border-radius:50%;background:var(--gold);color:#2A1B06;display:grid;place-items:center;font-size:12.5px;font-weight:700}
.who__meta{display:flex;flex-direction:column;line-height:1.15}
.who__meta b{font-size:12.5px;font-weight:600}
.who__meta i{font-size:10.5px;font-style:normal;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.06em}

/* ---- sidebar ---- */
.side{
  grid-area:side;background:var(--side);color:var(--side-on);padding:26px 0 16px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.side__title{padding:0 26px 18px;font-size:25px;font-weight:400;letter-spacing:-.01em;color:#fff}
/* Five words down the side, so a sidebar of fifteen things reads as five decisions:
   what is being planned, what is being made, how it is doing, what the shops need,
   and the one thing only an admin reads. */
.side__sect{
  margin:18px 0 5px;padding:0 26px;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(246,237,224,.4);
}
.side__sect:first-of-type{margin-top:2px}
.side__nav{display:flex;flex-direction:column}
.side__link{
  display:flex;align-items:center;gap:10px;padding:11px 26px;text-align:left;font-size:16px;
  color:rgba(246,237,224,.86);border-left:3px solid transparent;transition:background .15s,color .15s;
}
.side__link:hover{background:var(--side-hi);color:#fff}
.side__link.is-on{background:var(--side-hi);color:#fff;border-left-color:var(--gold);font-weight:600}
.side__link b{font-weight:inherit;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side__add{
  margin:14px 20px 0;padding:9px;border-radius:8px;border:1px dashed rgba(246,237,224,.32);
  color:rgba(246,237,224,.72);font-size:13px;font-weight:600;
}
.side__add:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(246,237,224,.6)}
.side__foot{margin-top:auto;padding:16px 26px 0;font-size:11.5px;color:rgba(246,237,224,.45);letter-spacing:.03em}
.side__scrim{display:none}

/* ---- main ---- */
/* min-width:0 for the same reason: a grid item will not shrink below its own content
   until it is told that it may */
.main{grid-area:main;min-width:0;background:var(--paper);overflow-y:auto;padding:26px 30px 60px}
/* The rule under the title is the head's own, and the air below it belongs with the
   rule, not with whatever screen happens to be mounted. Three screens remembered to
   add it and every .dash one — the calendar, the newspaper ad, the creatives, the
   rates, the logs — did not, so their first row of controls sat on the line. It is
   one gap in one place now. */
.main__head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding-bottom:20px;
  border-bottom:1px solid var(--line-2);margin-bottom:22px}
.main__head>*{min-width:0}
.main__head h1{font-size:26px}
.main__head p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.main__actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* on a phone the bar is sticky over the document, so a panel that pins itself inside
   the pane has to clear the bar rather than disappear behind it */
.main :is(.na__out,.dc__out){top:var(--topstick)}

/* ---- grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:18px}
.card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  text-align:left;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;
}
.card:hover{box-shadow:0 10px 26px rgba(60,42,20,.13);transform:translateY(-2px);border-color:#DFD7CB}
.card__img{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__ph{width:100%;height:100%;display:grid;place-items:center;color:#D3C9BB;background:repeating-linear-gradient(45deg,#FAF8F5,#FAF8F5 9px,#F4F0EA 9px,#F4F0EA 18px)}
.card__ph svg{width:30px;height:30px}
.card__n{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:20px;background:rgba(27,23,18,.72);color:#fff;font-size:11px;font-weight:600;backdrop-filter:blur(3px)}
.card__body{padding:11px 13px 13px;display:grid;gap:5px}
.card__title{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{font-size:12px;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap}
.card__meta span{display:inline-flex;align-items:center;gap:4px}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.card__date{font-size:11.5px;color:var(--ink-3)}

/* ---- store cards + breadcrumb ---- */
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.crumb button{color:var(--brown);font-weight:600;padding:0}
.crumb button:hover{text-decoration:underline}
.crumb span{color:var(--ink-3)}

.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px}
.store{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-align:left;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.store:hover{box-shadow:0 10px 26px rgba(60,42,20,.13);transform:translateY(-2px);border-color:#DFD7CB}
.store__img{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;position:relative}
.store__img img{width:100%;height:100%;object-fit:cover}
.store__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--side-on);
  background:linear-gradient(140deg,var(--brown),var(--side));font-size:30px;font-weight:600;letter-spacing:-.02em}
.store__body{padding:12px 14px 14px;display:grid;gap:3px}
.store__name{font-size:15.5px;font-weight:600}
.store__meta{font-size:12.5px;color:var(--ink-2)}
.store__go{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--brown);display:flex;align-items:center;gap:5px}
.store:hover .store__go{gap:9px}
.store--add{border:2px dashed var(--line);background:transparent;display:grid;place-items:center;
  min-height:170px;color:var(--ink-3);font-size:14px;font-weight:600;transition:border-color .18s,background .18s,color .18s}
.store--add:hover{border-color:var(--gold);background:#FDF8F0;color:var(--brown);transform:none;box-shadow:none}
.store--empty .store__ph{background:repeating-linear-gradient(45deg,#EFE9E1,#EFE9E1 9px,#E7E0D6 9px,#E7E0D6 18px);color:#B9AE9F}

/* ---- filter sheet ----
   On a wide screen this is pure scaffolding: `display:contents` drops the wrapper so the
   controls lay out in the toolbar exactly as they did. On a phone it becomes a bottom
   sheet, which keeps the toolbar down to two buttons. */
.sheet{display:contents}
.sheet__open,.sheet__head,.sheet__foot,.sheet__scrim{display:none}
.sheet__count{
  min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--gold);
  color:#2A1B06;font-size:11px;font-weight:700;display:grid;place-items:center;
}

/* ---- list view ---- */
.facets{display:contents}
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.viewtog button{padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--ink-3);background:#fff;transition:background .15s,color .15s}
.viewtog button+button{border-left:1px solid var(--line)}
.viewtog button:hover{background:var(--paper-2);color:var(--ink)}
.viewtog button.is-on{background:var(--brown);color:#fff}

.list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
/* One set of grid tracks, shared by the heading and every row, so the columns line up
   by construction instead of by coincidence. The track list is handed in as --tracks
   because the number of value columns depends on the category. */
.row{display:grid;grid-template-columns:var(--tracks, 66px minmax(0,1.9fr) repeat(3,minmax(0,1fr)) 92px auto);
  align-items:center;gap:0 16px;width:100%;padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--line-2);transition:background .15s}
/* the wrappers exist for the phone layout; on a wide screen their children are the cells */
.row__cols,.row__end{display:contents}
.row:last-child{border-bottom:0}
.row:hover{background:var(--paper-2)}
.row__thumb{flex:none;width:66px;height:50px;border-radius:6px;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center;position:relative}
.row__thumb img{width:100%;height:100%;object-fit:cover}
.row__thumb svg{width:18px;height:18px;color:#D3C9BB}
.row__n{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:rgba(27,23,18,.75);
  color:#fff;font-size:9.5px;font-weight:700}
.row__main{min-width:0}
.row__title{font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Under a heading row the columns have to line up, so they share the space equally.
   That used to cut "Sujal Advertising" short; values now wrap to a second line instead,
   which the two-line title beside them already makes room for. */
.row__col{min-width:0}
.row__col b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
/* An agency called "Sujal Advertising" used to arrive as "Sujal A…". The title beside it
   already runs to two lines, so let the values use the second line too rather than
   cutting a word that is the whole point of the column. */
.row__col span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:13px;font-weight:500;line-height:1.35;
  overflow:hidden;white-space:normal;overflow-wrap:normal}
.row__col.is-blank span{color:var(--line)}

/* The headings sit once at the top of the list rather than on every row — with a
   hundred and fifty entries, repeating CITY / SIZE / AGENCY shouted louder than the
   values themselves. */
.row--head{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  color:var(--ink-3);padding-top:9px;padding-bottom:9px;cursor:default;
}
.row--head:hover{background:var(--paper-2)}
.row__thumb--ghost{background:none;border:0}
/* The box in the heading takes the whole list, the way a table's corner box should. */
/* Shift-clicking down a list would otherwise drag a blue text selection with it. */
body.is-picking .row,body.is-picking .card{user-select:none;-webkit-user-select:none}
.pick--all{cursor:pointer}
.pick--all.is-on{background:var(--gold);border-color:var(--gold)}
.pick--all.is-on::after{opacity:1;transform:rotate(-45deg) scale(1)}
/* Only the headings themselves are set in small capitals. The hidden button beside them
   keeps the row's own type, or its track would come out wider and drag the columns off. */
.row--head .row__main,
.row--head .row__st,
.row--head .row__col{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;
}
/* Status sits in a slot of its own so a short "Live" and a long "Archived" start at the
   same place, and the heading above them lines up with both. */
.row__btn--ghost{visibility:hidden}
.row__st{min-width:0;display:flex;align-items:center}
.row__btn{padding:7px 13px;border-radius:7px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--brown);white-space:nowrap;transition:background .15s,border-color .15s}
.row:hover .row__btn{background:var(--brown);border-color:var(--brown);color:#fff}

@media (max-width:900px){
  .row{flex-wrap:wrap}
  .row__cols{flex-basis:100%;order:3;padding-left:80px;gap:14px;flex-wrap:wrap}
  .row__end{margin-left:auto}
}
@media (max-width:560px){
  .row__cols{padding-left:0}
  .row__col{flex:0 0 auto;min-width:86px}
}

/* Status reads as a word with a coloured dot beside it, not as shouted capitals —
   the state is the point, and a dot carries it faster than uppercase letters do. */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1.2;white-space:nowrap;
}
.pill::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--live{background:#E7F4EC;color:var(--ok)}
.pill--planned{background:#FDF1DF;color:var(--warn)}
.pill--removed{background:#FBEBE9;color:var(--bad)}
.pill--archived{background:#EFEFEF;color:var(--idle)}

/* Only what is up right now pulses. The ring is drawn with box-shadow so no extra
   element is needed, and the row's own --i keeps 150 dots from blinking in unison. */
.pill--live::before{
  animation:livePulse 2.4s ease-out infinite;
  animation-delay:calc(var(--i, 0) * 160ms);
}
@keyframes livePulse{
  0%   {box-shadow:0 0 0 0 rgba(31,122,69,.5)}
  55%  {box-shadow:0 0 0 5px rgba(31,122,69,0)}
  100% {box-shadow:0 0 0 0 rgba(31,122,69,0)}
}

.empty{padding:70px 20px;text-align:center;color:var(--ink-3)}
.empty h3{font-size:17px;color:var(--ink-2);margin-bottom:6px}
.empty p{margin:0 0 16px;font-size:13.5px}

/* ================= modal ================= */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px}
.modal__scrim{position:absolute;inset:0;background:rgba(20,14,6,.55);backdrop-filter:blur(2px)}
.modal__box{
  position:relative;width:100%;max-width:880px;max-height:90vh;overflow:auto;background:#fff;
  border-radius:14px;box-shadow:var(--shadow);
}
.mhead{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:#fff;border-bottom:1px solid var(--line-2);
}
.mhead h2{font-size:17.5px;flex:1}
.mhead .x{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--ink-2);font-size:22px;line-height:1}
.mhead .x:hover{background:var(--paper-2);color:var(--ink)}
.mbody{padding:18px 20px}
.mfoot{
  position:sticky;bottom:0;display:flex;gap:9px;justify-content:flex-end;padding:14px 20px;
  background:#fff;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.mfoot .left{margin-right:auto}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.form-grid .wide{grid-column:1/-1}
.sect{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2)}
.sect__h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sect__h h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.sect__h .line{flex:1;height:1px;background:var(--line-2)}

/* drop zone */
.drop{
  border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--ink-3);
  transition:border-color .16s,background .16s;cursor:pointer;
}
.drop:hover,.drop.is-over{border-color:var(--gold);background:#FDF8F0;color:var(--brown)}
.drop b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.drop small{font-size:12px}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:12px}
.thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb__x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(27,23,18,.75);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1}
.thumb__x:hover{background:var(--bad)}
.thumb__cover{position:absolute;left:4px;bottom:4px;padding:2px 6px;border-radius:5px;background:rgba(27,23,18,.75);color:#fff;font-size:10px;font-weight:600}
.thumb--file{display:grid;place-items:center;color:var(--ink-3);font-size:11px;padding:8px;text-align:center;word-break:break-all}
.thumb__camp{position:absolute;left:4px;top:4px;max-width:calc(100% - 32px);padding:2px 6px;border-radius:5px;
  background:rgba(197,140,54,.94);color:#2A1B06;font-size:10px;font-weight:700;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb__camp:hover{background:var(--gold-d);color:#fff}
.thumb__camp--none{background:rgba(27,23,18,.6);color:#fff;font-weight:600}
.gal__camp{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:4px 0 -2px;font-size:11.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.gal__camp::after{content:"";flex:1;height:1px;background:var(--line-2)}
.thumb.is-busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23C58C36' stroke-width='4' stroke-dasharray='70 30'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/26px no-repeat}

/* ---- detail view: photo first, details compact ---- */
.hero{
  margin:0;position:relative;border-radius:10px;overflow:hidden;background:#141110;
  display:grid;place-items:center;cursor:zoom-in;
  /* tall and wide photos both fit whole — nothing is cropped */
  min-height:min(38vh,300px);max-height:min(58vh,520px);
}
/* A portrait shot leaves empty space either side; fill it with a blurred copy of the
   same photo so the frame reads as deliberate rather than broken. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--hero-bg) center/cover no-repeat;
  filter:blur(30px) brightness(.42) saturate(1.1);transform:scale(1.2);
}
.hero img{position:relative;width:100%;height:100%;max-height:min(58vh,520px);object-fit:contain;display:block}
.hero__file{display:grid;place-items:center;padding:40px;color:rgba(246,237,224,.7);font-size:13px;text-align:center}
.hero__bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:9px 13px;font-size:12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.hero__bar b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero__bar span{margin-left:auto;flex:none;color:rgba(255,255,255,.72)}
.hero__camp{
  flex:none;padding:2px 8px;border-radius:20px;background:var(--gold);color:#2A1B06;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
}
.hero__zoom{
  position:absolute;top:10px;right:10px;padding:5px 10px;border-radius:7px;
  background:rgba(20,15,8,.62);color:#fff;font-size:11.5px;font-weight:600;
  backdrop-filter:blur(3px);pointer-events:none;
}

.strip{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:thin}
.strip__i{
  flex:0 0 auto;width:78px;height:58px;border-radius:7px;overflow:hidden;position:relative;
  border:2px solid transparent;background:var(--paper-2);transition:border-color .16s,transform .16s;
}
.strip__i img{width:100%;height:100%;object-fit:cover}
.strip__i:hover{transform:translateY(-2px)}
.strip__i.is-on{border-color:var(--gold)}
.strip__i .thumb--file{font-size:9.5px;padding:4px}

.nophoto{
  border:2px dashed var(--line);border-radius:10px;padding:38px 20px;text-align:center;
  color:var(--ink-3);font-size:13.5px;
}

/* details block, deliberately quieter than the photo */
.kv--tight{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 18px}
.kv--tight .kv__r{padding:5px 0;font-size:12.5px}
.kv--tight .kv__r dt{flex:0 0 44%;font-size:11.5px}

/* gallery in detail view */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.gal__i{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal__i:hover img{transform:scale(1.05)}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 18px}
.kv__r{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.kv__r dt{flex:0 0 42%;color:var(--ink-3);font-size:12.5px}
.kv__r dd{margin:0;flex:1;font-weight:500;word-break:break-word}

/* checkbox lists (branch pickers) */
.checks{display:grid;gap:2px;max-height:196px;overflow-y:auto;padding:6px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper-2)}
.checks__i{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
  font-size:13.5px;cursor:pointer;transition:background .14s,color .14s}
.checks__i:hover{background:#fff}
.checks__i.is-on{background:#fff;color:var(--brown-d);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line)}

/* the line above a tick list: what it is, how many are ticked, and one button to
   do the whole list at once rather than eight clicks */
.checks__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.checks__head > span:first-child{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.checks__n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.checks__all{
  font:inherit;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;
  transition:border-color .14s,color .14s;
}
.checks__all:hover{border-color:var(--gold);color:var(--brown-d)}
.checks__find{
  width:100%;margin-bottom:6px;padding:7px 11px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.checks__find:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
.checks__none{margin:0;padding:10px 8px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* one option is one question, drawn as a line rather than a box with a row in it */
.onecheck{
  display:flex;align-items:flex-start;gap:11px;padding:12px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);
  transition:border-color .15s,background .15s;
}
.onecheck:hover{border-color:var(--gold)}
.onecheck.is-on{background:#FDF8F0;border-color:var(--gold)}
.onecheck input{width:16px;height:16px;accent-color:var(--gold);flex:none;margin-top:2px}
.onecheck__t{display:grid;gap:3px}
.onecheck__t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.onecheck__t em{font-size:11.5px;font-style:normal;color:var(--ink-3);line-height:1.5}

/* ---------- how a dialog lays itself out ----------
   Short answers two to a row, lists the full width. A column of tick boxes squeezed
   into half a dialog cannot be read, and a one-word answer does not need all of it. */
.askgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 16px}
.askgrid .wide,
.askgrid > .askgrid__sect{grid-column:1/-1}
.askgrid__sect{display:flex;align-items:center;gap:10px;margin-top:4px}
.askgrid__sect:first-child{margin-top:0}
.askgrid__sect h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:700;margin:0}
.askgrid__sect i{flex:1;height:1px;background:var(--line-2)}
@media (max-width:560px){ .askgrid{grid-template-columns:1fr} }
.checks__i input{width:16px;height:16px;accent-color:var(--gold);flex:none}
.checks__hint{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-3);font-style:normal}
.branchtag{display:inline-block;margin:1px 3px 1px 0;padding:2px 8px;border-radius:20px;
  background:var(--paper-2);border:1px solid var(--line);font-size:11px;color:var(--ink-2)}

/* simple table (settings) */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:hover td{background:var(--paper-2)}
.tbl .act{text-align:right;white-space:nowrap}

.tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line-2);background:#fff;position:sticky;top:64px;z-index:2}
.tab{padding:10px 13px;font-size:13.5px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--brown);border-bottom-color:var(--gold)}

.note{padding:10px 13px;border-radius:8px;background:#FDF8F0;border:1px solid #F0E2CB;font-size:12.5px;color:var(--brown-d)}
.err{padding:9px 12px;border-radius:8px;background:#FDF0EE;color:var(--bad);font-size:13px;margin-bottom:12px}

/* ================= lightbox ================= */
.lightbox{
  position:fixed;inset:0;z-index:230;background:rgba(12,9,5,.94);   /* above every modal and sheet: a photo enlarged from an entry opens over it */
  display:grid;place-items:center;overflow:hidden;
  /* the chrome around the image: nav arrows on the sides, caption bar at the bottom */
  --lb-x:64px; --lb-y-top:56px; --lb-y-bottom:76px;
  padding:var(--lb-y-top) var(--lb-x) var(--lb-y-bottom);
}
/* Sized against the viewport rather than the grid track: a large image would otherwise
   stretch the track and spill past the edges instead of scaling down to fit. */
.lightbox img{
  max-width:calc(100vw - var(--lb-x) * 2);
  max-height:calc(100dvh - var(--lb-y-top) - var(--lb-y-bottom));
  width:auto;height:auto;min-width:0;min-height:0;
  object-fit:contain;border-radius:4px;
}
.lightbox__x{position:absolute;top:14px;right:18px;width:40px;height:40px;border-radius:9px;color:#fff;font-size:28px;line-height:1}
.lightbox__x:hover{background:rgba(255,255,255,.14)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:9px;color:#fff;font-size:36px;line-height:1}
.lightbox__nav:hover{background:rgba(255,255,255,.14)}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}
.lightbox__bar{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;display:flex;align-items:center;gap:14px;color:#fff;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lightbox__bar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.lightbox .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ================= motion ================= */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:translateY(6px) scale(.99)}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* staggered entrance for cards / rows / store tiles — capped so long lists stay snappy */
.row,.card,.store,.gal__i,.thumb{
  animation:riseIn .34s cubic-bezier(.22,.72,.16,1) backwards;
  animation-delay:calc(var(--i, 0) * 22ms);
}
.list,.grid,.stores{animation:fadeIn .22s ease both}
.main__head h1{animation:slideDown .3s cubic-bezier(.22,.72,.16,1) both}
.crumb{animation:fadeIn .25s ease both}
.side__link{transition:background .18s,color .18s,border-color .18s,padding-left .18s}
.side__link:hover{padding-left:29px}

/* skeletons while a list loads */
.skel{display:grid;gap:10px;padding-top:22px}
.skel__row{
  height:72px;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(100deg,#F7F4EF 30%,#EFEAE2 48%,#F7F4EF 66%);
  background-size:200% 100%;animation:shimmer 1.15s linear infinite;
}
.skel--cards{grid-template-columns:repeat(auto-fill,minmax(214px,1fr))}
.skel--cards .skel__row{height:206px}

/* modal + lightbox */
.modal__scrim{animation:scrimIn .2s ease both}
.modal__box{animation:popIn .28s cubic-bezier(.22,.72,.16,1) both}
.modal.is-closing .modal__box{animation:popOut .15s ease both}
.modal.is-closing .modal__scrim{animation:scrimIn .15s ease reverse both}
.lightbox{animation:fadeIn .2s ease both}
.lightbox img{animation:zoomIn .28s cubic-bezier(.22,.72,.16,1) both}

/* interactive polish */
.btn,.tbtn,.row__btn,.tab,.viewtog button{transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn:active,.tbtn:active,.viewtog button:active{transform:translateY(1px) scale(.985)}
.thumb{transition:transform .18s,box-shadow .18s}
.thumb:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,42,20,.16)}
.pill{transition:background .2s,color .2s}
.who{transition:background .2s}
.who:hover{background:rgba(0,0,0,.26)}
.login__panel{animation:riseIn .5s cubic-bezier(.22,.72,.16,1) both}
.login__card{animation:popIn .48s cubic-bezier(.22,.72,.16,1) .08s both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .side__link:hover{padding-left:26px}
}

/* ================= custom select menu ================= */
select[data-cs-open]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16)}
.cs-menu{
  position:fixed;z-index:2500;max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px rgba(38,26,10,.24),0 2px 6px rgba(38,26,10,.08);
  animation:popIn .16s cubic-bezier(.22,.72,.16,1) both;outline:none;
}
.cs-menu.is-closing{animation:popOut .12s ease both}
.cs-opt{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:7px;
  font-size:13.5px;line-height:1.35;text-align:left;color:var(--ink);
  animation:fadeIn .18s ease backwards;animation-delay:calc(var(--i,0) * 12ms);
  transition:background .14s,color .14s;
}
.cs-opt:hover,.cs-opt.is-hi{background:var(--paper-2)}
.cs-opt.is-on{color:var(--brown);font-weight:600}
.cs-opt.is-off{opacity:.45;pointer-events:none}
.cs-opt__tick{flex:none;width:14px;height:14px;display:grid;place-items:center}
.cs-opt.is-on .cs-opt__tick::before{
  content:"";width:12px;height:12px;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.6l3 3L12 3.4' fill='none' stroke='%237A5222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ================= toast ================= */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:99;
  padding:11px 18px;border-radius:9px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-bad{background:var(--bad)}

/* ================= responsive ================= */
@media (max-width:980px){
  /* iOS scrolls to the top when you tap the status bar, but only for the page itself —
     it cannot reach a scrolling <div>. On phones the document does the scrolling and the
     top bar sticks, so that gesture works and the address bar hides on scroll as usual. */
  html,body{height:auto;min-height:100%}
  /* min-height:100% would resolve against a body that is now auto-height, which is to
     say against nothing — a short screen then ends early and leaves a band of the
     page's own dark background under it */
  .app{height:auto;min-height:100dvh;grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .topbar{position:sticky;top:0;z-index:45;padding-top:env(safe-area-inset-top)}
  :root{--topstick:calc(64px + env(safe-area-inset-top))}
  .main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .sheet{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .main{overflow:visible}
  .side{top:0;padding-top:78px}
  .topbar__burger{display:flex}
  /* the wordmark will not fit beside the search box, but the mark on its own does */
  .topbar__brand{display:flex;gap:0}
  .brandtext{display:none}
  .topbar{gap:10px;padding:0 10px}
  .topbar__search{margin-left:0}
  .topbar__search input{font-size:16px}   /* 16px stops iOS zooming on focus */
  .side{
    position:fixed;bottom:0;left:0;width:min(270px,78vw);z-index:44;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .side__title{font-size:22px;padding:0 22px 14px}
  .side__link{padding:12px 22px}
  .side.is-open{transform:none;box-shadow:14px 0 40px rgba(0,0,0,.35)}
  .side__scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:43;opacity:0;pointer-events:none;transition:opacity .25s}
  .side__scrim.is-on{opacity:1;pointer-events:auto}
  .main{padding:20px 16px 50px}
  .main__actions{width:100%;margin-left:0}
  .who__meta{display:none}
  .who{display:none}          /* the avatar is decorative; settings and sign-out remain */
  .lightbox{--lb-x:12px; --lb-y-top:52px; --lb-y-bottom:72px}
}
/* ---- phones ---- */
@media (max-width:640px){
  .main{padding:12px 12px 40px}
  .main__head{padding-bottom:10px;gap:8px;margin-bottom:14px}
  .main__head h1{font-size:19px}
  .main__head p{margin-top:2px;font-size:12px}
  .crumb{margin-bottom:3px;font-size:12px}

  /* Six controls side by side read as clutter on a phone. The toolbar keeps only
     Filters and Add; everything else moves into a sheet. */
  .main__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .sheet__open{display:inline-flex;justify-content:center;gap:7px;padding:10px 12px}
  .sheet__open svg{width:16px;height:16px}
  #btnAddItem{justify-content:center;padding:10px 12px}

  .sheet{
    display:flex;flex-direction:column;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    max-height:82dvh;overflow-y:auto;padding:0 16px 16px;
    background:#fff;border-radius:18px 18px 0 0;
    /* the shadow reaches upward, so a closed sheet would still show a grey band along
       the bottom edge — keep it hidden until it opens */
    transform:translateY(101%);
    transition:transform .28s cubic-bezier(.22,.72,.16,1);
  }
  .sheet.is-open{
    transform:none;
    box-shadow:0 -18px 50px rgba(28,18,6,.34);
  }
  .sheet__head{
    display:flex;align-items:center;position:sticky;top:0;z-index:1;
    padding:14px 0 10px;background:#fff;border-bottom:1px solid var(--line-2);margin-bottom:2px;
  }
  .sheet__head h3{flex:1;font-size:16px}
  .sheet__head .x{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;font-size:22px;color:var(--ink-2)}
  .sheet__foot{display:block;position:sticky;bottom:0;padding:10px 0 0;background:#fff}
  .sheet .sel,.sheet .btn{width:100%}
  .sheet .sel{padding:11px 26px 11px 12px;background-position:right 10px center}
  .sheet__scrim{
    display:block;position:fixed;inset:0;z-index:74;background:rgba(20,14,6,.5);
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .sheet__scrim.is-on{opacity:1;pointer-events:auto}
  .viewtog{width:100%}
  .viewtog button{flex:1;padding:10px 0;text-align:center}
  .facets{display:contents}

  /* Two clean lines per entry: picture and title, then the values.
     Repeating CITY / SIZE / AGENCY on every row was louder than the values themselves,
     so on a phone the labels go and the values run together with separators. */
  .list{margin-top:14px}
  .row{
    display:grid;grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"thumb main end" "thumb cols cols";
    gap:3px 10px;padding:11px 12px;align-items:center;
  }
  /* While picking, a tick column opens at the front and the rest shifts along. */
  .row.is-picking{
    grid-template-columns:24px 52px minmax(0,1fr) auto;
    grid-template-areas:"pick thumb main end" "pick thumb cols cols";
  }
  .row .pick{grid-area:pick;justify-self:center}
  .row__thumb{grid-area:thumb;width:52px;height:52px;align-self:center}
  .row__main{grid-area:main;align-self:end}
  .row__title{font-size:14px;-webkit-line-clamp:2;line-height:1.3}
  .row__cols{grid-area:cols;display:flex;flex-wrap:wrap;gap:0 7px;padding-left:0;align-self:start}
  .row--head{display:none}
  .row__col{flex:0 0 auto;display:flex;align-items:baseline;min-width:0}
  .row__col.is-blank{display:none}
  .row__col span{font-size:12px;margin-top:0;color:var(--ink-2);font-weight:400}
  .row__col + .row__col::before{content:"·";margin-right:7px;color:var(--ink-3)}
  .row__end{grid-area:end;display:flex;align-items:center;align-self:center;gap:8px}
  /* the whole row is tappable, so a chevron says "open" more quietly than a button
     repeated 153 times */
  .row__btn{padding:0;border:0;background:none;font-size:0;line-height:0}
  .row__btn::after{content:"\203A";font-size:23px;line-height:1;color:var(--ink-3)}
  .row:hover .row__btn{background:none}
  .pill{font-size:11.5px;padding:4px 10px 4px 8px;gap:6px}
  .pill::before{width:6px;height:6px}

  .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .stores{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
  .store__name{font-size:14px}
  .store__meta,.store__go{font-size:11.5px}

  .modal{padding:0}
  /* openModal() sets an inline max-width for the desktop layout; on a phone the box
     should always fill the screen, so this has to win over it */
  .modal__box{max-height:100dvh;height:100%;border-radius:0;max-width:none !important}
  .mhead{padding:13px 14px}
  .mhead h2{font-size:16px}
  .mbody{padding:14px}
  .mfoot{padding:11px 14px;gap:7px}
  .mfoot .btn{flex:1;min-width:0}
  .mfoot .left{flex-basis:100%;margin-right:0;order:-1}

  .hero{min-height:min(34vh,240px);max-height:min(46vh,380px)}
  .hero img{max-height:min(46vh,380px)}
  .strip__i{width:64px;height:48px}
  .form-grid{grid-template-columns:1fr;gap:11px}

  /* wide tables cannot fit a phone — show each row as a stacked card instead */
  .tabs{padding:0 14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;padding:10px 11px;font-size:13px}
  .tbl thead{display:none}
  .tbl tr{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
  .tbl tr:hover td{background:none}
  .tbl td{display:block;padding:2px 0;border:0}
  .tbl td:first-child{font-weight:600;font-size:14px}
  .tbl td.act{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px}
  .tbl td.act .btn{flex:0 0 auto}

  .cs-menu{max-width:calc(100vw - 24px)}
  /* iOS zooms the whole page when a focused field is under 16px */
  .fld input,.fld select,.fld textarea,.inp,textarea.inp,.sel{font-size:16px}
  .fld>span{font-size:11.5px}
  .toast{left:12px;right:12px;transform:translateY(14px);max-width:none}
  .toast.is-on{transform:none}
}

/* A label like "View Online Banner" is wider than the values it sits beside, and on a
   narrow laptop it squeezed "Instagram" down to "Instagr". The whole row opens the entry
   anyway, so below a comfortable width the label gives way to a chevron — in the heading
   too, so the columns stay lined up. */
@media (max-width:1180px){
  .row__btn{padding:0;border:0;background:none;font-size:0;line-height:0}
  .row__btn::after{content:"\203A";font-size:23px;line-height:1;color:var(--ink-3)}
  .row:hover .row__btn{background:none}
}

/* ---------- pager ----------
   A long category shows one page at a time. The bar stays quiet: a count on the
   left, the two arrows in the middle, the page size on the right. */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:20px 0 6px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--ink-3);
  animation:riseIn .28s ease both;
}
.pager__count{white-space:nowrap}
.pager__nav{display:flex;align-items:center;gap:8px}
.pager__at{min-width:104px;text-align:center;color:var(--ink-2);white-space:nowrap}
.pager__b{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
.pager__b:hover:not(:disabled){background:var(--paper-2);border-color:#D9D2C8}
.pager__b:active:not(:disabled){transform:translateY(1px)}
.pager__b:disabled{opacity:.35;cursor:default}
.pager__per{display:flex;align-items:center;gap:8px;white-space:nowrap}
.pager__per select{
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
@media (max-width:640px){
  .pager{justify-content:center;gap:12px;margin-top:16px}
  .pager__count{order:3;width:100%;text-align:center}
  .pager__b{width:40px;height:40px}
}

/* A branch user looking at another branch: say why the buttons are missing. */
.mfoot__note{
  margin-right:auto;font-size:12.5px;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px;
}
.mfoot__note::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--line);flex:none;
}

/* ---------- first contact ----------
   The API sleeps on the free plan. Rather than a blank screen for a minute, say so. */
.boot{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:var(--paper);padding:28px;animation:fadeIn .2s ease both;
}
.boot__box{max-width:380px;text-align:center}
.boot__box h2{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.boot__box p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-3)}
.boot__box .btn{margin-top:18px}
.boot__spin{
  width:30px;height:30px;display:block;margin:0 auto 18px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
.boot.is-stuck .boot__spin{animation:none;border-top-color:var(--line);opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .boot__spin{animation-duration:2.4s}
}
.login__slow{
  margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3);
  animation:riseIn .25s ease both;
}
.img--missing{object-fit:contain !important;background:var(--paper-2);padding:20%}
.store__when{display:block;margin-top:2px;font-size:11.5px;color:var(--gold-d);font-weight:600;letter-spacing:.01em}

/* ---------- bulk action bar ----------
   Only shows once a filter or a search has narrowed the list, so a whole set can be
   filed under one campaign without opening thirty entries. */
.bulkbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 14px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  font-size:13px;color:var(--ink-2);
  animation:riseIn .25s ease both;
}
.bulkbar__n{flex:1;min-width:0}
.bulkbar__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulkbar__on{display:flex;align-items:center;gap:8px;flex-wrap:wrap;animation:riseIn .2s ease both}
.bulkbar .btn:disabled{opacity:.4;cursor:default}
@media (max-width:640px){
  .bulkbar{margin-bottom:12px;padding:10px 12px}
  .bulkbar__n{flex:0 0 100%;text-align:center}
  .bulkbar__acts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bulkbar__acts .btn{width:100%;justify-content:center}
  .bulkbar__on{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bulkbar__on .btn:last-child{grid-column:1/-1}
  .bulkbar > #selStart{width:100%;justify-content:center}
}

/* ---------- picking entries ----------
   A plain box on the left of each row, the way a list of things to tick should look.
   The row itself is the hit area, so there is no nested control to miss. */
.pick{
  flex:none;width:22px;height:22px;border-radius:6px;
  border:1.5px solid #D6CEC3;background:#fff;
  display:grid;place-items:center;
  transition:background .14s ease,border-color .14s ease;
}
.pick::after{
  content:"";width:11px;height:6px;margin-top:-3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.5);opacity:0;
  transition:opacity .14s ease,transform .14s ease;
}
.is-sel .pick{background:var(--gold);border-color:var(--gold)}
.is-sel .pick::after{opacity:1;transform:rotate(-45deg) scale(1)}
.row:hover .pick{border-color:#BDB2A3}

.row.is-sel{background:#FDF7EE}
.card{position:relative}
.pick--card{position:absolute;top:10px;left:10px;z-index:2;box-shadow:0 1px 4px rgba(28,18,6,.18)}
.card.is-sel{outline:2px solid var(--gold);outline-offset:-2px}
@media (max-width:640px){
  .pick{width:24px;height:24px}
}

/* ---------- audio and video in the hero ----------
   A recording has nothing to look at, so the hero gives it a mark and a player rather
   than pretending it is a picture. */
.hero__media{display:grid;place-items:center;width:100%;height:100%}
.hero__audio{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:min(460px,86%);padding:24px 20px;
}
.hero__note{width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.hero__audio audio{width:100%}
.hero__video{max-width:100%;max-height:100%;border-radius:4px}
.thumb--audio{display:grid;place-items:center;width:100%;height:100%;background:var(--paper-2)}
.thumb--audio .hero__note{width:20px;height:20px}


/* ---------- dashboard ----------
   One campaign, everything it touches. Nothing here changes anything; it is a place to
   look before going into a category. */
.side__link--dash{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 26px;margin-bottom:6px;text-align:left;
  color:rgba(246,237,224,.72);font-size:14.5px;
}
.side__link--dash svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.side__link--dash b{font-weight:500}
.side__link--dash:hover{color:#fff;background:rgba(255,255,255,.05)}
.side__link--dash.is-on{color:#fff;background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 var(--gold)}

/* minmax(0,1fr), not an implicit auto column: an auto track is sized to its content,
   and a screen whose children all carry min-width:0 — which they must, or they push the
   page sideways — has a min-content width of almost nothing. The calendar came out two
   hundred pixels wide in an eight-hundred pixel column because of it. */
.dash{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;animation:riseIn .3s ease both}
.dash__pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash__pick .sel{min-width:220px}
.dash__span{font-size:12.5px;color:var(--gold-d);font-weight:600}

.dash__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{
  padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:var(--paper);
}
.stat b{display:block;font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat--live b{color:var(--ok)}

.dash__h{display:flex;align-items:baseline;gap:10px;margin-bottom:-8px}
.dash__h h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dash__h span{font-size:12.5px;color:var(--ink-3)}

.dash__cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.dcat{
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.dcat:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,42,20,.13);border-color:#DFD6C8}
.dcat--empty{opacity:.6}
.dcat--empty:hover{transform:none;box-shadow:none}
.dcat__img{height:104px;background:var(--paper-2);display:grid;place-items:center;overflow:hidden}
.dcat__img img{width:100%;height:100%;object-fit:cover}
.dcat__ph{font-size:20px;font-weight:700;color:#D3C9BB;letter-spacing:.06em}
.dcat__body{padding:12px 14px 14px}
.dcat__name{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.dcat__meta{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.dcat__go{display:block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--gold-d)}

.dash__recent{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.drow{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--paper);text-align:left;width:100%}
.drow:hover{background:var(--paper-2)}
.drow b{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow em{font-style:normal;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:640px){
  .dash{gap:18px}
  .dash__cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .dcat__img{height:84px}
  .drow em{display:none}
}
.dcat__when{display:block;margin-top:3px;font-size:11.5px;color:var(--gold-d);font-weight:600}

/* ---------- menu card site settings ---------- */
.mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:20px}
.mcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.mcard__img{height:190px;background:var(--paper-2);display:grid;place-items:center;overflow:hidden}
.mcard__img img{width:100%;height:100%;object-fit:contain}
.mcard__ph{font-size:13px;color:var(--ink-3)}
.mcard__body{padding:14px;display:grid;gap:11px}
.mcard__body>b{font-size:14.5px}

/* ---------- menu card usage ---------- */
.dash__h{align-items:center}
.mcrange{display:inline-flex;gap:2px;padding:2px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:9px;margin-left:auto}
.mcrange button{padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;
  color:var(--ink-3);transition:background .15s,color .15s}
.mcrange button:hover{color:var(--ink)}
.mcrange button.is-on{background:var(--paper);color:var(--brown);
  box-shadow:0 1px 3px rgba(60,42,20,.12)}

.livedot{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ok)}
.livedot i{width:7px;height:7px;border-radius:50%;background:var(--ok);
  animation:livePulse 2.4s ease-out infinite}

.stat--live-num b{transition:color .2s}
.stat--live-num b.is-new{animation:numIn .9s ease both}
@keyframes numIn{
  0%{color:var(--gold);transform:translateY(-3px)}
  100%{color:inherit;transform:none}
}
.delta{display:block;margin-top:6px;font-size:11.5px;font-style:normal;font-weight:600}
.delta.up{color:var(--ok)}
.delta.down{color:var(--bad)}
.delta.flat{color:var(--ink-3);font-weight:500}

.mcrate{margin:14px 0 0;padding:11px 14px;border-radius:10px;background:var(--paper-2);
  border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.55}
.mcrate b{color:var(--ink);font-weight:600}

.spark i.is-peak{opacity:1;background:var(--brown)}

.spark{display:flex;align-items:flex-end;gap:2px;height:64px;padding:0 1px;
  border-bottom:1px solid var(--line);}
.spark i{flex:1;min-width:2px;background:var(--gold);opacity:.75;border-radius:2px 2px 0 0;
  transition:opacity .15s}
.spark i:hover{opacity:1}
.spark__ends{display:flex;justify-content:space-between;margin:6px 0 0;
  font-size:11.5px;color:var(--ink-3)}
.meter{display:block;height:7px;border-radius:4px;background:var(--line-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);border-radius:4px}

/* the line under the menu card figures, linking out to the site and its settings */
.mcline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--paper);
  font-size:13px;color:var(--ink-2);
}
.mcline>span{flex:1;min-width:220px;line-height:1.55}
@media (max-width:640px){ .mcline .btn{flex:1;justify-content:center} }

/* ---------- the marks on the usage tiles ----------
   Each one moves a little, on a long loop, so a screen that updates itself does not sit
   there looking frozen. The global reduced-motion rule stops all of it. */
.stat{position:relative}
.stat__ico{position:absolute;top:13px;right:13px;display:block;width:22px;height:22px}
.mci{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* an eye that looks, then rests */
.mci--eye circle{fill:var(--gold);stroke:none;transform-origin:12px 12px;
  animation:mciLook 5s ease-in-out infinite}
@keyframes mciLook{
  0%,60%,100%{transform:none}
  70%{transform:translateX(2.4px) scale(.92)}
  85%{transform:translateX(-2.2px) scale(.92)}
}

/* an arrow that drops into the tray */
.mci--dl .arrow{animation:mciDrop 2.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mciDrop{
  0%,55%{transform:translateY(0);opacity:1}
  72%{transform:translateY(3.5px);opacity:.35}
  73%{transform:translateY(-5px);opacity:0}
  85%,100%{transform:translateY(0);opacity:1}
}
.mci--dl .tray{stroke:var(--gold)}

/* the play mark, with the beam easing out to the side */
.mci--play path:first-child{fill:var(--gold);stroke:none}
.mci--play .beam{fill:var(--gold);stroke:none;opacity:.45;transform-origin:17px 12px;
  animation:mciBeam 3.2s ease-in-out infinite}
@keyframes mciBeam{
  0%,100%{opacity:.35;transform:translateX(0)}
  50%{opacity:.9;transform:translateX(1.6px)}
}

/* the apple, breathing */
.mci--apple path{fill:var(--gold);stroke:none;transform-origin:12px 13px;
  animation:mciBob 4s ease-in-out infinite}
@keyframes mciBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1.2px) scale(1.04)}
}

@media (max-width:640px){
  .stat__ico{top:11px;right:11px;width:19px;height:19px}
  .mci{width:19px;height:19px}
}

/* the chosen dates, and the part of the chart they cover */
.mcdates{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2)}
.mcdates label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;color:var(--ink-3)}
.mcdates input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);font:inherit;font-size:13px;color:var(--ink)}
.mcdates__err{font-size:12.5px;color:var(--bad);font-weight:600}
.spark i.out{opacity:.22}
.spark i.in{opacity:.8}
.spark i.in:hover{opacity:1}
.spark i.is-peak.in{opacity:1;background:var(--brown)}
@media (max-width:640px){
  .mcrange{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .mcrange::-webkit-scrollbar{display:none}
  .mcrange button{flex:0 0 auto}
  .mcdates label{flex:1;min-width:130px}
  .mcdates input{flex:1;min-width:0}
}
.spark__cap{margin:16px 0 8px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.spark__cap b{color:var(--ink-2);font-weight:600}

/* ---------- daily rates ----------
   Two columns: what is typed on the left, what comes out of the printer on the right.
   The sheet on the right is the real page in a frame, scaled — a drawing of it would be
   one more thing to keep in step with the artwork. */
.rt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.rt__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.rt__card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.rt__head{margin-bottom:14px}
.rt__head h3{margin:0 0 3px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rt__head span{font-size:12.5px;color:var(--ink-3);line-height:1.5}

.rt__row{display:flex;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.rt__k{flex:0 0 68px;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.rt__in{
  flex:1;display:flex;align-items:center;gap:7px;min-width:0;
  border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--bg);
  transition:border-color .16s,box-shadow .16s;
}
.rt__in:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.16)}
.rt__in i{font-style:normal;font-size:15px;color:var(--ink-3)}
.rt__in input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:10px 0;
}
.rt__in input:disabled{color:var(--ink-2)}

.rt__act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.rt__note{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:10px 0 0}
.rt__act .rt__note{margin:0}
.rt__link{
  background:var(--tint);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;overflow:auto;
}
.rt__link code{font-size:12.5px;color:var(--ink-2);white-space:nowrap}

.rt__preview{min-width:0}
.rt__pv{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid var(--line);background:#fff;
}
.rt__pv iframe{
  width:794px;height:1123px;border:0;display:block;
  transform-origin:top left;
}
@media (max-width:900px){
  .rt{grid-template-columns:minmax(0,1fr)}
  .rt__preview{order:-1}
}

/* ---------- people, in Settings ----------
   One card a person: who they are, what they can reach, and what you might do about it.
   This was a table of eight columns that cut its own buttons off at the edge and grew a
   row ten lines tall whenever somebody had a few categories. */
.uhead{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.uhead .note{flex:1;min-width:0}
.uhead .btn{flex:none}

.ulist{display:flex;flex-direction:column;gap:9px}
.ucard{
  display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(0,1.3fr) auto auto;
  align-items:center;gap:14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  transition:border-color .16s,box-shadow .16s;
}
.ucard:hover{border-color:#E3D7C2;box-shadow:0 6px 18px rgba(74,47,17,.06)}
.ucard.is-off{background:var(--tint);opacity:.72}

.ucard__who{display:flex;align-items:center;gap:11px;min-width:0}
.uava{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#EFE6D7;color:var(--gold-d);font-size:14px;font-weight:700;
}
.uava--admin{background:var(--gold);color:#fff}
.ucard__name{display:flex;flex-direction:column;min-width:0}
.ucard__name b{font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard__name b em{font-style:normal;font-weight:400;color:var(--ink-3)}
.ucard__name span{font-size:12px;color:var(--ink-3)}

.ucard__reach{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.utag{
  font-style:normal;font-size:11.5px;line-height:1;
  padding:5px 9px;border-radius:99px;
  background:var(--tint);border:1px solid var(--line);color:var(--ink-2);
}
.utag--all{background:#F3EADA;border-color:#E6D6B8;color:var(--gold-d);font-weight:600}
.utag--agency{background:#EDF3EC;border-color:#CFE0CB;color:#3F6B45;font-weight:600}
.utag--soft{background:none;border-color:transparent;color:var(--ink-3);padding-left:0}
/* an agency login with nobody's boards: worth saying plainly rather than showing blank */
.utag--warn{background:#FBF0E6;border-color:#E8C9A6;color:#9A5B22;font-weight:600}

.ucard__set{display:flex;align-items:center;gap:8px}
.ucard__set .sel{padding:5px 26px 5px 9px;font-size:12.5px}
.ucard__act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ucard__act .udel:hover{border-color:#D9A0A0;color:#9B3B3B}

@media (max-width:860px){
  .ucard{grid-template-columns:1fr;gap:10px}
  .ucard__act{justify-content:flex-start}
  .uhead{flex-direction:column;gap:10px}
}

/* ================= the log =================
   A long list of short sentences. The eye runs down the middle column — what happened —
   so the time and the name beside it are set quiet and the sentence is not. */
.lg{display:grid;gap:14px}
.lg__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.lg__find{
  flex:1;min-width:190px;font:inherit;font-size:13.5px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper-2);
}
.lg__find:focus,.lg__bar select:focus,.lg__bar input[type=date]:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
.lg__bar select,.lg__bar input[type=date]{
  font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink)}
.lg__bar label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-3)}

.lg__t{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lg__t td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:baseline}
.lg__t tr:last-child td{border-bottom:0}
.lg__t tr:hover td{background:var(--paper-2)}
.lg__when{width:1%;white-space:nowrap;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lg__who{width:1%;white-space:nowrap;font-size:13px;font-weight:600;color:var(--brown-d)}
.lg__what{font-size:13.5px;color:var(--ink);line-height:1.5}
.lg--bad .lg__what{color:var(--ink-2)}
.lg__x{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;
  background:#FDF0EE;color:var(--bad);font-size:11px;font-weight:600;
}
.lg__foot{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12.5px;color:var(--ink-3);
}
@media (max-width:620px){
  .lg__t td{padding:9px 10px}
  .lg__when,.lg__who{font-size:11.5px}
  .lg__what{font-size:13px}
}

/* ================= the material group =================
   Eight kinds of material under one heading that opens and closes, so the screens that
   are not material are not eight rows down the page. The fold is animated with grid
   rows rather than a height, because nothing here knows how tall eight categories are. */
.side__group{display:grid}
.side__link--group{font-weight:600}
.side__link--group b{flex:1;text-align:left}
.side__chev{
  width:15px;height:15px;flex:none;opacity:.6;
  transition:transform .2s cubic-bezier(.22,.7,.3,1);
}
.side__link--group[aria-expanded="false"] .side__chev{transform:rotate(-90deg)}
.side__link--group[aria-expanded="true"]{color:#fff}

.side__fold{
  display:grid;
  /* minmax(0,…) on both, for the third time in this stylesheet: a track's floor is its
     own content, so a plain 0fr leaves the row exactly as tall as the list inside it
     and nothing appears to close. */
  grid-template-rows:minmax(0, 1fr);
  transition:grid-template-rows .24s cubic-bezier(.22,.7,.3,1);
}
.side__fold>*{min-height:0;overflow:hidden}
.side__group.is-shut .side__fold{grid-template-rows:minmax(0, 0fr)}
/* overflow has to be hidden on the fold's child for the rows trick to clip anything */
.side__fold{overflow:hidden}

/* a child of the group is stepped in, so the list reads as belonging to the heading */
#catNav .side__link{padding-left:30px;font-size:13.5px;gap:11px}
#catNav .side__link svg{width:16px;height:16px;flex:none;opacity:.62}
#catNav .side__link:hover svg,
#catNav .side__link.is-on svg{opacity:1}
.side__group .side__add{margin-left:30px;margin-right:20px}

@media (prefers-reduced-motion:reduce){
  .side__fold,.side__chev{transition:none}
}

/* ---------- a rate that is waiting for the morning ----------
   Marked out rather than mixed in: the boxes above hold tomorrow's figures, and without
   this somebody would read them as what the shops are printing today. */
.rt__wait{
  display:grid;gap:5px;margin:14px 0 2px;padding:12px 14px;border-radius:11px;
  background:#FDF8F0;border:1px solid var(--gold);
}
.rt__wait b{font-size:13px;font-weight:600;color:var(--brown-d)}
.rt__wait span{font-size:12px;line-height:1.55;color:var(--ink-2)}
.rt__waitact{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.rt__waitact .btn{flex:0 0 auto}
@media (max-width:620px){ .rt__waitact .btn{flex:1 1 auto} }

/* ---------- the front page ----------
   A tile with a mark on it reads as a thing; a tile with only a number on it reads as a
   cell in a spreadsheet. Everything here is a row of: mark, what it is, the number. */
.ov__wait{padding:40px 0;text-align:center;color:var(--ink-3)}
.ov__wait.is-down{color:#9B3B3B}

.ov__ic{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--line-2);color:var(--gold-d)
}
.ov__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ov__ic--warn{background:#FBF0E2;color:#8A5A12}
.ov__ic--sm{width:30px;height:30px;border-radius:8px}
.ov__ic--sm svg{width:15px;height:15px}

.ov__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.ov__tile{
  display:flex;align-items:flex-start;gap:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;min-width:0
}
/* The text beside the mark has to be a flex item that fills what is left, not one
   sized to its own widest line. Sized to content it leaves a third of the tile empty
   on a wide screen, and on a narrow one it grows past the tile's edge instead of
   ellipsising — which is the overflow you can see rather than measure. */
.ov__tile>div{flex:1 1 auto;min-width:0;max-width:100%}
.ov__tile span{
  display:block;font-size:12px;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ov__tile b{display:block;font-size:27px;line-height:1.2;margin:2px 0 1px;color:var(--ink)}
.ov__tile em{
  font-style:normal;font-size:11.5px;color:var(--ink-3);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

.ov__cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
@media (max-width:1040px){.ov__cols{grid-template-columns:minmax(0,1fr)}}
.ov__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 12px;min-width:0
}
.ov__card h3{
  display:flex;align-items:center;margin:0 0 4px;font-size:15.5px;font-weight:700;
  color:var(--ink);letter-spacing:-.01em
}
.ov__sub{margin:0 0 10px;font-size:12px;color:var(--ink-3)}
.ov__card h3+.ov__wrap,.ov__card h3+.ov__list,.ov__card h3+.ov__soon,
.ov__card h3+.ov__stages,.ov__card h3+.ov__none,.ov__card h3+.ov__media{margin-top:10px}
.ov__all{
  margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:12px;
  font-weight:600;color:var(--gold-d);cursor:pointer
}
.ov__all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ov__none{margin:2px 0 10px;color:var(--ink-3);font-size:13.5px}
.ov__na{font-style:normal;font-size:11px;color:var(--ink-3)}

.ov__wrap{overflow-x:auto}
.ov__table{width:100%;border-collapse:collapse;font-size:13px}
.ov__table th,.ov__table td{text-align:left;padding:10px 12px 10px 0;border-top:1px solid var(--line-2)}
.ov__table thead th{
  border-top:0;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:7px
}
.ov__table tbody tr{cursor:pointer}
.ov__table tbody tr:hover th b{color:var(--gold-d)}
.ov__table th[scope=row]{font-weight:400;max-width:210px}
.ov__table th b{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ov__table th em{font-style:normal;font-size:11px;color:var(--ink-3)}

/* the bar and the number together — a bar alone cannot be read to a colleague */
.ov__barwrap{display:inline-flex;align-items:center;gap:8px}
.ov__bar{
  display:inline-block;width:62px;height:6px;border-radius:3px;background:var(--line-2);
  overflow:hidden
}
.ov__bar i{display:block;height:100%;background:var(--gold-d)}
.ov__barwrap b{font-size:12px;font-weight:600;color:var(--ink-2)}

.ov__pill{
  display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--line-2);color:var(--ink-2);white-space:nowrap
}
.ov__pill--done{background:#E6F2EA;color:#1F7A45}
.ov__pill--in-progress,.ov__pill--confirmed{background:#FDF1DF;color:#8A5A12}
.ov__pill--cancelled{background:#F6E6E4;color:#9B3B3B}

.ov__list,.ov__soon{list-style:none;margin:0;padding:0}
.ov__list li,.ov__soon li{
  display:flex;align-items:center;gap:11px;padding:11px 0;min-width:0;
  border-top:1px solid var(--line-2)
}
.ov__list li:first-child,.ov__soon li:first-child{border-top:0}
.ov__list li{cursor:pointer}
.ov__list li>span,.ov__soon li>span:nth-child(2){flex:1 1 auto;min-width:0;max-width:100%}
.ov__list b,.ov__soon b{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ov__list em,.ov__soon em{
  font-style:normal;display:block;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ov__list li:hover b{color:var(--gold-d)}
.ov__chev{flex:none;width:15px;height:15px;fill:none;stroke:var(--ink-3);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* the date as a block, so the eye finds the day before it reads the line */
.ov__date{
  flex:none;display:grid;place-items:center;width:42px;padding:5px 0;border-radius:8px;
  background:var(--line-2)
}
.ov__date b{font-size:15px;font-weight:700;color:var(--ink);line-height:1}
.ov__date i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-3)}

.ov__media{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap}
.ov__chartwrap{flex:1 1 320px;min-width:0}
.ov__legend{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:11.5px;color:var(--ink-2)}
.ov__legend i{width:9px;height:9px;border-radius:50%;background:var(--gold-d)}
.ov__chart{width:100%;height:auto;display:block}
.ov__grid{stroke:var(--line-2);stroke-width:1}
.ov__ax{font:500 10px var(--font);fill:var(--ink-3)}
.ov__area{fill:rgba(169,115,39,.10)}
.ov__line{fill:none;stroke:var(--gold-d);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ov__dot{fill:var(--gold-d);stroke:#fff;stroke-width:2}
.ov__stats{flex:0 0 132px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ov__stats div{border-left:2px solid var(--line);padding-left:11px}
.ov__stats span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)
}
.ov__stats b{font-size:19px;color:var(--ink)}

.ov__pipe{margin-top:16px;min-width:0;overflow:hidden}
.ov__stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ov__stage{border:1px solid var(--line);border-radius:10px;padding:13px;cursor:pointer;min-width:0;overflow:hidden}
.ov__stage:hover{border-color:var(--gold-d)}
.ov__stagetop{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.ov__stagetop>div{flex:1 1 auto;min-width:0;max-width:100%}
.ov__stage span{
  display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ov__stage b{display:block;font-size:20px;line-height:1.2;color:var(--ink)}
/* The thumbnails are the one part of a stage that has no natural width limit: three of
   them plus the overflow badge is wider than the card gets on a narrow column, and a
   flex row with nothing allowed to shrink pushes the card, the panel and the page out
   sideways. So they shrink, the row clips what still will not fit, and the badge never
   does — it is the part that carries a number. */
/* A grid rather than a flex row, because the tracks decide the widths and the items
   cannot argue. In a flex row the thumbnails came out at 98px against a declared 44 —
   three of them and the badge needing 312px of a 244px card — and the third was
   clipped. Three equal tracks and one that takes what the badge needs always fits. */
.ov__shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;min-width:0}
.ov__shots img{
  width:100%;height:46px;border-radius:7px;object-fit:cover;background:var(--line-2);
  display:block
}
.ov__more{
  display:grid;place-items:center;min-width:40px;height:46px;padding:0 7px;
  border-radius:7px;background:var(--line-2);font-size:12px;font-weight:700;color:var(--ink-3)
}
/* nothing to show: the row is one track wide, not three empty ones */
.ov__shots:has(.ov__na){grid-template-columns:1fr}

/* Users: add several at once, and the one-time list of logins */
.uhead__btns{display:flex;gap:8px;flex:none}
.bu h2{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
.bu__t{display:grid;gap:0;margin:14px 0 16px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;max-height:50vh;overflow-y:auto}
.bu__r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--edge);font-size:13.5px}
.bu__r:first-child{border-top:0}.bu__h{position:sticky;top:0;background:#FBF6EA;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bu__r em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:6px}
.bu__r code{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;user-select:all}
.bu__bad{background:#FDF0EE}.bu__e{grid-column:2/4;color:#9B3A2C}
.bu__a{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.bu__r{grid-template-columns:1fr 1fr}.bu__r span:first-child{grid-column:1/3;font-weight:600}.bu__h{display:none}}
.bu{padding:26px 28px 24px}

/* Premium icons (premium-icons.js): Ionicons, the iOS outline set. They carry their own stroke and fill, so the page's line-icon rules must not touch them. */
svg[data-pi]{fill:currentColor;stroke:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
button:hover>svg[data-pi],a:hover>svg[data-pi],.side__item:hover svg[data-pi]{transform:translateY(-1px) scale(1.06)}
/* the social media marks keep their own colours */
svg[data-pi="logo-facebook"]{fill:#1877F2}svg[data-pi="logo-instagram"]{fill:url(#kmIg)}svg[data-pi="logo-pinterest"]{fill:#E60023}svg[data-pi="logo-linkedin"]{fill:#0A66C2}
svg[data-pi="logo-youtube"]{fill:#FF0000}svg[data-pi="logo-x"],svg[data-pi="at-outline"],svg[data-pi="logo-apple"]{fill:#111}svg[data-pi="logo-google-playstore"]{fill:#01875F}
/* Creative Studio: a magic wand whose colours flow along it and whose stars twinkle (all animated in the icon itself) */
.studio-ic{width:24px;height:24px;fill:none;stroke:none;overflow:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#navStudio:hover .studio-ic{transform:scale(1.14) rotate(-8deg)}

/* Radio plan: the spots and the money */
.rd__band{display:flex;align-items:baseline;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid var(--edge)}
.rd__band b{font-size:13px}.rd__band em{font-style:normal;font-size:12px;color:var(--ink-3)}
.rd__brow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto 30px;gap:8px;align-items:center;margin-bottom:8px}
.rd__brow input{height:36px;padding:0 11px;border:1px solid var(--edge);border-radius:10px;font:inherit;font-size:13px;background:#fff;min-width:0}
.rd__bx{border:0;background:none;width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--ink-3)}.rd__bx:hover{background:#F1E7D2;color:var(--ink)}
.rd__bx svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rd__days{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;padding:8px 10px;background:#FAF6EC;border-radius:12px}
.rd__days label{display:grid;gap:2px;font-size:10.5px;color:var(--ink-3);text-align:center}.rd__days i{font-style:normal}
.rd__days input{height:30px;padding:0 4px;text-align:center}
.rd__calc{border:1px solid var(--edge);border-radius:14px;padding:14px 16px;background:#FFFBF2}
.rd__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 26px}
.rd__r{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;border-bottom:1px dashed #eadfc6}
.rd__r span{color:var(--ink-3)}.rd__r.is-total{border-bottom:0;padding-top:9px}.rd__r.is-total b{font-size:15px;color:#7A5410}.rd__hint{margin:0;font-size:13px;color:var(--ink-3)}
.rd__sum{background:#fff;border:1px solid var(--edge);border-radius:18px;padding:16px 18px;margin:0 0 14px}
.rd__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.rd__head h3{margin:0;font-size:15px}.rd__tools{display:flex;gap:8px}
.rd__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.rd__tile{background:#FAF6EC;border-radius:14px;padding:11px 13px;display:grid;gap:2px;min-width:0}
.rd__tile span{font-size:12px;color:var(--ink-3)}.rd__tile b{font-size:18px;white-space:nowrap}.rd__tile em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.rd__seg{display:inline-flex;gap:2px;padding:3px;background:#F3ECDD;border-radius:999px;margin-bottom:10px;flex-wrap:wrap}
.rd__seg button{border:0;background:none;padding:6px 14px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer}
.rd__seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(60,40,10,.12)}
.rd__scroll{overflow-x:auto}
.rd__tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;min-width:640px}
.rd__tbl th{text-align:right;font-weight:500;color:var(--ink-3);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--edge)}
.rd__tbl td{padding:9px 8px;border-bottom:1px solid #f0e8d6;text-align:right;white-space:nowrap}
.rd__tbl th:first-child,.rd__tbl td:first-child{text-align:left;width:30%;white-space:normal;font-weight:600}
.rd__tbl tr.is-sum td{border-bottom:0;background:#FAF6EC;font-weight:600}.rd__tbl em{font-style:normal;font-size:11px;color:var(--ink-3)}
.rd__tbl--flow{min-width:0;margin-bottom:10px}
@media (max-width:820px){.rd__grid{grid-template-columns:1fr}.rd__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rd__brow{grid-template-columns:1fr 1fr}}
.rd__addco{margin-left:10px;border:0;background:none;padding:0;color:#8a5a14;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.rd__addco:hover{text-decoration:underline}

/* the flowchart, drawn as the media plan is: orange heads, a column for every day */
.rd__fcw{overflow-x:auto;margin:0 0 14px;padding-bottom:4px}
.rd__fc{border-collapse:collapse;font-size:12px;text-align:center;white-space:nowrap;min-width:100%}
.rd__fc th,.rd__fc td{border:1px solid #2a2118;padding:5px 7px;min-width:30px}
.rd__fc th{background:#ED7D31;color:#1a1208;font-weight:700}
.rd__fc td.b{font-weight:700}.rd__fc tr.gap td{height:10px;padding:0}.rd__fc tr.tot td{font-weight:700}
.rd__fc td:first-child,.rd__fc th:first-child{min-width:92px}.rd__fc td:nth-child(2),.rd__fc th:nth-child(2){min-width:84px}
.rd__mk{display:flex;align-items:baseline;gap:12px;margin:14px 0 8px;font-size:14px}.rd__mk span{font-size:13px;color:#7A5410;font-weight:600}

/* the same flowchart, typed into on the entry form */
.rd__fc--edit td{padding:0}.rd__fc--edit td:not(:has(input)){padding:5px 7px}
.rd__fc--edit input{width:100%;min-width:34px;height:28px;border:0;background:transparent;text-align:center;font:inherit;font-size:12px;padding:0 3px}
.rd__fc--edit input:focus{outline:2px solid var(--gold);outline-offset:-2px;background:#fff}
.rd__fc--edit .rd__bt{min-width:92px;text-align:left;padding:0 7px}.rd__fc--edit .rd__ev{min-width:56px;background:#FFF4E4}
.rd__fc--edit .rd__bx{width:24px;height:24px}
.rd__pop{padding-top:6px}.rd__pop .rd__fcw{margin-bottom:16px}
.rd__mo{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 2px 0;font-size:12.5px;color:var(--ink-2)}.rd__mo b{margin-right:4px}.rd__mo em{font-style:normal;color:var(--ink-3)}
.rd__fc tr.amt td{font-weight:600;background:#FFF4E4}

/* ================= back to the top (gsap-fx.js) ================= */
.fx-top{position:fixed;right:22px;bottom:24px;z-index:90;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(#e0bb70,#c8963e);color:#3a2610;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 28px rgba(122,82,34,.32),0 2px 6px rgba(38,26,10,.12);cursor:pointer;transition:filter .2s,box-shadow .2s}
.fx-top:hover{filter:brightness(1.05);box-shadow:0 16px 34px rgba(122,82,34,.4),0 2px 6px rgba(38,26,10,.14)}
.fx-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-top[hidden]{display:none}
@media (max-width:980px){.fx-top{right:16px;bottom:calc(18px + env(safe-area-inset-bottom))}}
.modal.is-ghosted{visibility:hidden}