/* =========================================================================
   Vision Guard — app.css
   Shop, account and attendance. Loaded only on those pages; the landing page
   never pays for it.

   Every token, button, hairline and radius comes from styles.css — this file
   introduces no new colours and no second design language. If something here
   looks like a new idea, it is a mistake.
   ========================================================================= */

/* ---------- utilities ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{ display:none !important; }

/* =========================================================================
   PAGE HEAD
   ========================================================================= */
.pagehead{
  display:grid; gap:18px; max-width:760px;
  padding-block:clamp(40px,6vw,76px) clamp(28px,3.6vw,44px);
}
.pagehead--tight{ padding-block:0 clamp(20px,2.6vw,30px); }
.pagehead__note{ color:var(--ink-2); max-width:56ch; }

.view{ min-height:60vh; }

/* =========================================================================
   NAV ADDITIONS — account + cart buttons
   ========================================================================= */
.iconbtn{
  position:relative; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s;
}
.iconbtn:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.6); background:var(--accent-dim); }
.iconbtn--cart.has-items{ color:var(--ink); border-color:rgba(var(--accent-rgb),.5); }
.iconbtn__count{
  position:absolute; inset-block-start:-5px; inset-inline-end:-5px;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--latin); font-size:.6875rem; font-weight:700; line-height:1;
}

/* =========================================================================
   TOOLBAR — search, sort, category chips
   ========================================================================= */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  margin-bottom:18px;
}
.toolbar .field--search{ flex:1 1 280px; position:relative; }
.toolbar .field--sort{ flex:0 0 auto; min-width:200px; }
.field__icon{
  position:absolute; inset-inline-start:15px; inset-block-start:50%;
  transform:translateY(-50%); color:var(--ink-4); pointer-events:none;
}
.field--search input{ padding-inline-start:42px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{
  padding:9px 17px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent;
  font-size:.8125rem; font-weight:600; color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-4); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.resultline{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:20px;
}
html[lang="ar"] .resultline{ font-family:var(--arabic); font-size:.8125rem; letter-spacing:normal; text-transform:none; }

.empty{
  padding:56px 24px; text-align:center; color:var(--ink-3);
  border:1px dashed var(--line-2); border-radius:14px; max-width:52ch;
  margin-inline:auto; font-size:.9375rem;
}
.shopnote{ margin-top:clamp(34px,4vw,54px); padding-bottom:clamp(60px,8vw,110px); }

/* =========================================================================
   PRODUCT GRID
   ========================================================================= */
.grid{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
}
.pcard{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg-1); overflow:hidden;
  transition:border-color .5s var(--e-out), transform .6s var(--e-out);
}
.pcard:hover{ border-color:rgba(var(--accent-rgb),.4); transform:translateY(-3px); }
.pcard.is-in-cart{ border-color:rgba(var(--accent-rgb),.45); }

/* Same light plate as the landing page: the catalogue is shot on white. */
.pcard__plate{
  display:grid; place-items:center;
  background:var(--plate); aspect-ratio:4/3; padding:18px; overflow:hidden;
}
/* See the note on .cat__plate img in styles.css — height:auto is required,
   not cosmetic. */
.pcard__plate img{
  width:auto; height:auto; max-height:100%; object-fit:contain;
  mix-blend-mode:multiply; transition:transform .8s var(--e-out);
}
.pcard:hover .pcard__plate img{ transform:scale(1.045); }

.pcard__body{
  display:grid; gap:7px; align-content:start;
  padding:clamp(16px,1.8vw,22px);
}
.pcard__cat{ font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
html[lang="ar"] .pcard__cat{ font-family:var(--arabic); font-size:.75rem; letter-spacing:normal; text-transform:none; }
.pcard__name{ font-family:var(--latin); font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.35; }
.pcard__spec{ font-size:.8125rem; color:var(--ink-3); line-height:1.55; }
.pcard__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line);
}
.pcard__price{ display:inline-flex; align-items:baseline; gap:7px; font-family:var(--latin); }
.pcard__price b{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; color:var(--accent); }
.pcard__price s{ font-size:.75rem; color:var(--ink-4); }
.pcard__price em{ font-style:normal; font-size:.6875rem; color:var(--ink-3); font-family:var(--sans); }
.pcard__buy{ flex:none; }

/* ---------- quantity stepper ---------- */
.step2{
  display:inline-grid; grid-auto-flow:column; align-items:center;
  border:1px solid var(--line-2); border-radius:999px; overflow:hidden;
}
.step2__btn{
  width:34px; height:34px; display:grid; place-items:center;
  font-size:1.05rem; line-height:1; color:var(--ink-2);
  transition:background .25s, color .25s;
}
.step2__btn:hover:not(:disabled){ background:var(--accent-dim); color:var(--accent); }
.step2__btn:disabled{ opacity:.3; cursor:not-allowed; }
.step2__n{
  min-width:34px; text-align:center;
  font-family:var(--latin); font-size:.875rem; font-weight:700;
}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.field{ display:grid; gap:7px; }
.field > label{ font-size:.8125rem; color:var(--ink-3); font-weight:500; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], select, textarea{
  width:100%; padding:13px 15px;
  font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px;
  transition:border-color .3s, background .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none;
}
textarea{ resize:vertical; min-height:82px; line-height:1.6; }
select{
  /* the caret has to be drawn by hand once appearance is stripped */
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                   linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-inline-end:42px;
}
[dir="rtl"] select{
  background-position:20px calc(50% + 1px), 15px calc(50% + 1px);
  padding-inline-end:15px; padding-inline-start:42px;
}
select option{ background:var(--bg-2); color:var(--ink); }

input::placeholder, textarea::placeholder{ color:var(--ink-4); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13);
}
input:disabled, textarea:disabled, select:disabled{ opacity:.55; cursor:not-allowed; }

.btn--wide{ width:100%; }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }

/* ---------- checkboxes and radios ---------- */
.check{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.875rem; color:var(--ink-2); line-height:1.55; cursor:pointer;
}
.check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; margin:2px 0 0; flex:none;
  border:1px solid var(--line-2); border-radius:5px; background:var(--bg-2);
  display:grid; place-content:center; cursor:pointer;
  transition:background .25s, border-color .25s;
}
.check input[type="checkbox"]::after{
  content:""; width:10px; height:6px;
  border-inline-start:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink);
  transform:rotate(-45deg) scale(0); transition:transform .22s var(--e-out);
}
.check input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
.check input[type="checkbox"]:checked::after{ transform:rotate(-45deg) scale(1); }
.check input[type="checkbox"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.consents{
  display:grid; gap:16px; margin-block:26px;
  padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
}

.pay{ border:0; padding:0; margin:26px 0 0; display:grid; gap:10px; }
.pay legend{ font-size:.8125rem; color:var(--ink-3); font-weight:500; padding:0; margin-bottom:4px; }
.pay__opt{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:15px 17px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--bg-1); cursor:pointer;
  transition:border-color .3s, background .3s;
}
.pay__opt:hover{ border-color:var(--ink-4); }
.pay__opt:has(input:checked){ border-color:rgba(var(--accent-rgb),.6); background:var(--accent-dim); }
.pay__opt input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; margin:2px 0 0; flex:none;
  border:1px solid var(--line-2); border-radius:50%; background:var(--bg-2);
  display:grid; place-content:center; cursor:pointer; transition:border-color .25s;
}
.pay__opt input[type="radio"]::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .22s var(--e-out);
}
.pay__opt input[type="radio"]:checked{ border-color:var(--accent); }
.pay__opt input[type="radio"]:checked::after{ transform:scale(1); }
.pay__opt input[type="radio"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pay__opt b{ display:block; font-size:.9375rem; font-weight:600; }
.pay__opt em{ display:block; font-style:normal; font-size:.8125rem; color:var(--ink-3); margin-top:3px; line-height:1.5; }

.formerr{
  margin-block:18px 0; padding:13px 16px;
  border:1px solid rgba(224,86,86,.4); border-radius:10px;
  background:rgba(224,86,86,.08);
  color:#F0A8A8; font-size:.875rem; line-height:1.55;
}
.formok{
  margin-block:18px 0; padding:13px 16px;
  border:1px solid rgba(var(--accent-rgb),.4); border-radius:10px;
  background:var(--accent-dim); color:var(--ink-2); font-size:.875rem;
}
.fineprint{ margin-top:18px; font-size:.75rem; color:var(--ink-4); line-height:1.6; }

/* =========================================================================
   CART DRAWER
   ========================================================================= */
.scrim{
  position:fixed; inset:0; z-index:104;
  background:var(--scrim);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--e-out);
}
.scrim.is-on{ opacity:1; }

.cart{
  position:fixed; z-index:105;
  inset-block:0; inset-inline-end:0;
  width:min(430px, 100%);
  display:grid; grid-template-rows:auto 1fr auto;
  background:var(--bg-1);
  border-inline-start:1px solid var(--line-2);
  transform:translateX(100%);
  transition:transform .45s var(--e-out);
  will-change:transform;
}
[dir="rtl"] .cart{ transform:translateX(-100%); }
.cart.is-on{ transform:none; }

.cart__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
.cart__title{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; }
.cart__close{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--ink-2);
  transition:color .3s, border-color .3s;
}
.cart__close:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.5); }

.cart__body{ overflow-y:auto; overscroll-behavior:contain; padding:6px 22px; }
.cart__empty{ display:grid; gap:8px; align-content:center; min-height:220px; text-align:center; }
.cart__emptytitle{ font-size:.9375rem; color:var(--ink-2); }
.cart__emptyhint{ font-size:.8125rem; color:var(--ink-4); }

.cline{
  display:grid; grid-template-columns:66px 1fr auto; gap:14px;
  padding-block:18px; border-bottom:1px solid var(--line);
}
.cline__plate{
  width:66px; height:66px; border-radius:9px; overflow:hidden;
  background:var(--plate); display:grid; place-items:center; padding:7px;
}
.cline__plate img{ width:auto; height:auto; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cline__meta{ display:grid; gap:7px; align-content:start; min-width:0; }
.cline__name{ font-family:var(--latin); font-size:.8125rem; font-weight:600; line-height:1.35; }
.cline__spec{ font-size:.75rem; color:var(--ink-4); }
.cline__end{ display:grid; gap:8px; justify-items:end; align-content:start; text-align:end; }
.cline__price{ font-family:var(--latin); font-size:.875rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.cline__price em{ font-style:normal; font-size:.6875rem; color:var(--ink-3); font-family:var(--sans); font-weight:400; }
.cline__rm{ font-size:.75rem; color:var(--ink-4); transition:color .3s; padding:0; }
.cline__rm:hover{ color:#F0A8A8; }

.cart__foot{
  display:grid; gap:11px; padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--bg-2);
}
.cart__foot:empty{ display:none; }
.crow{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:.9375rem; }
.crow b{ font-family:var(--latin); color:var(--accent); font-size:1.06rem; }
.crow--muted{ font-size:.8125rem; color:var(--ink-4); }
.cart__foot .btn{ margin-top:6px; }

/* =========================================================================
   CHECKOUT
   ========================================================================= */
.checkout{ padding-block:clamp(28px,4vw,52px) clamp(60px,8vw,110px); }
.backlink{
  display:inline-flex; align-items:center; gap:9px; padding:0;
  font-size:.8125rem; color:var(--ink-3); margin-bottom:26px;
  transition:color .3s;
}
.backlink:hover{ color:var(--accent); }
.backlink i{ font-style:normal; transition:transform .4s var(--e-out); }
.backlink:hover i{ transform:translateX(-4px); }
[dir="ltr"] .backlink i{ transform:scaleX(-1); }
[dir="ltr"] .backlink:hover i{ transform:scaleX(-1) translateX(-4px); }

.checkout__grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4.5vw,70px); align-items:start;
}
.checkout__form form{ display:grid; gap:16px; }
.checkout__summary{
  position:sticky; top:96px;
  display:grid; gap:16px;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2);
}
.sumtitle{ font-size:.9375rem; font-weight:700; letter-spacing:-.015em; }
.sline{
  display:grid; grid-template-columns:1fr auto auto; gap:8px 14px;
  padding-block:11px; border-bottom:1px solid var(--line);
  font-size:.8125rem; align-items:baseline;
}
.sline__name{ font-family:var(--latin); color:var(--ink-2); min-width:0; overflow-wrap:anywhere; }
.sline__qty{ color:var(--ink-4); font-family:var(--latin); }
.sline__price{ font-family:var(--latin); font-weight:700; color:var(--ink); white-space:nowrap; }
.sumtotals{ display:grid; gap:9px; }

/* =========================================================================
   ORDER CONFIRMED
   ========================================================================= */
.done{
  display:grid; gap:16px; justify-items:center; text-align:center;
  max-width:660px; margin-inline:auto;
  padding-block:clamp(60px,9vw,130px) clamp(70px,10vw,140px);
}
.done__mark{ color:var(--accent); margin-bottom:6px; }
.done__num{
  font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:.06em;
  color:var(--accent); padding:11px 22px;
  border:1px dashed rgba(var(--accent-rgb),.45); border-radius:10px;
  background:var(--accent-dim);
}
.done__note{ color:var(--ink-2); max-width:48ch; }
.done__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
.done__fine{ max-width:52ch; }

/* =========================================================================
   ACCOUNT — auth card
   ========================================================================= */
.auth{
  max-width:520px; margin-inline:auto;
  padding-block:clamp(44px,7vw,96px) clamp(70px,10vw,140px);
}
.auth__card{
  border:1px solid var(--line); border-radius:16px;
  background:var(--bg-1); overflow:hidden;
}
.auth__tabs{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.auth__tab{
  padding:17px 12px; font-size:.9375rem; font-weight:600; color:var(--ink-3);
  border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:color .3s, border-color .3s, background .3s;
}
.auth__tab:hover{ color:var(--ink-2); background:rgba(var(--ink-rgb),.03); }
.auth__tab.is-on{ color:var(--ink); border-bottom-color:var(--accent); }
.auth__body{ padding:clamp(24px,3.2vw,36px); }
.auth__body form{ display:grid; gap:16px; }
.auth__intro{ font-size:.875rem; color:var(--ink-3); line-height:1.6; margin-bottom:4px; }
.auth__alt{ margin-top:20px; font-size:.8125rem; color:var(--ink-4); text-align:center; }
.auth__alt button{ color:var(--accent); font-weight:600; padding:0; }
.auth__alt button:hover{ text-decoration:underline; }

.pwhint{ font-size:.75rem; color:var(--ink-4); margin-top:-2px; }

/* Staff hint: shown once the typed address is on the company domain, so an
   employee knows before submitting that this is the right door. */
.staffhint{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px;
  border:1px solid rgba(var(--accent-rgb),.35); background:var(--accent-dim);
  font-size:.8125rem; color:var(--ink-2);
}

/* =========================================================================
   ACCOUNT — dashboard
   ========================================================================= */
.dash{ padding-block:clamp(36px,5vw,64px) clamp(70px,9vw,120px); }
.dash__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:clamp(26px,3.4vw,42px);
}
.dash__hello{ display:grid; gap:8px; }
.dash__name{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.dash__email{ font-family:var(--latin); font-size:.8125rem; color:var(--ink-4); }
.dash__badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.4); background:var(--accent-dim);
  font-size:.6875rem; font-weight:700; color:var(--accent); letter-spacing:.04em;
  width:fit-content;
}

.tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:clamp(24px,3vw,38px); }
.tab{
  position:relative; padding:12px 17px;
  font-size:.875rem; font-weight:600; color:var(--ink-3);
  transition:color .3s;
}
.tab::before{
  content:""; position:absolute; inset-inline:12px; inset-block-end:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .4s var(--e-out);
}
.tab:hover{ color:var(--ink-2); }
.tab.is-on{ color:var(--ink); }
.tab.is-on::before{ transform:scaleX(1); }

.panel{ display:grid; gap:clamp(20px,2.6vw,32px); }

.card{
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg-1); padding:clamp(20px,2.6vw,30px);
  display:grid; gap:16px; align-content:start;
}
.card__title{ font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.card__note{ font-size:.8125rem; color:var(--ink-3); line-height:1.6; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px); align-items:start; }

/* ---------- orders list ---------- */
.orow{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 18px; align-items:baseline;
  padding-block:16px; border-bottom:1px solid var(--line);
}
.orow:last-child{ border-bottom:0; }
.orow__id{ font-family:var(--mono); font-size:.8125rem; color:var(--accent); letter-spacing:.04em; }
.orow__meta{ font-size:.8125rem; color:var(--ink-4); }
.orow__total{ font-family:var(--latin); font-weight:700; font-size:.9375rem; white-space:nowrap; }
.orow__items{ grid-column:1 / -1; font-size:.75rem; color:var(--ink-3); line-height:1.6; }
.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line-2); font-size:.6875rem; color:var(--ink-3);
}
.pill--new{ border-color:rgba(var(--accent-rgb),.45); color:var(--accent); }

/* =========================================================================
   ATTENDANCE
   ========================================================================= */
.clock{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3vw,40px);
  align-items:center;
}
.dial{ position:relative; width:clamp(132px,17vw,176px); aspect-ratio:1; flex:none; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial__track{ stroke:var(--line-2); }
.dial__fill{
  stroke:var(--accent);
  stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--e-out);
}
.dial__fill.is-over{ stroke:#5BD1A0; }
.dial__mid{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:3px;
}
.dial__big{ font-family:var(--latin); font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.dial__sub{ font-size:.6875rem; color:var(--ink-4); }

.clock__side{ display:grid; gap:14px; justify-items:start; align-content:center; }
.clock__state{ display:flex; align-items:center; gap:9px; font-size:.9375rem; color:var(--ink-2); }
.clock__state .dot{ animation:none; }
.clock__state.is-live .dot{ animation:pulse 2.6s var(--e-io) infinite; }
.clock__state.is-off .dot{ background:var(--ink-4); }
.clock__since{ font-size:.8125rem; color:var(--ink-4); }
.clock__since b{ font-family:var(--latin); color:var(--ink-2); font-weight:600; }
.btn--out{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--out:hover{ border-color:#F0A8A8; color:#F0A8A8; box-shadow:none; background:rgba(240,168,168,.06); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stat{ background:var(--bg-1); padding:16px 18px; display:grid; gap:5px; }
.stat__k{ font-size:.6875rem; color:var(--ink-4); }
.stat__v{ font-family:var(--latin); font-size:1.25rem; font-weight:700; letter-spacing:-.025em; }
.stat__v.is-pos{ color:#5BD1A0; }
.stat__v.is-neg{ color:#F0A8A8; }

.tablewrap{ overflow-x:auto; }
table.att{ width:100%; border-collapse:collapse; min-width:520px; }
table.att th, table.att td{
  text-align:start; padding:12px 14px; font-size:.8125rem;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.att th{ color:var(--ink-4); font-weight:500; font-size:.75rem; }
table.att td{ color:var(--ink-2); }
table.att td.num{ font-family:var(--latin); }
table.att tr:last-child td{ border-bottom:0; }
table.att tr.is-today td{ background:rgba(var(--accent-rgb),.05); }
.tag{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.6875rem; border:1px solid var(--line-2); color:var(--ink-3);
}
.tag--complete{ border-color:rgba(91,209,160,.45); color:#5BD1A0; }
.tag--short{ border-color:rgba(240,168,168,.45); color:#F0A8A8; }
.tag--overtime{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
.tag--open{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
.att__note{ font-size:.6875rem; color:var(--ink-4); white-space:normal; }

/* =========================================================================
   TOAST
   ========================================================================= */
.toast{
  position:fixed; z-index:130;
  inset-block-end:clamp(84px,11vw,100px); inset-inline-start:50%;
  transform:translate(-50%, 14px);
  max-width:min(92vw, 420px);
  padding:12px 20px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink);
  font-size:.875rem; text-align:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
.toast.is-good{ border-color:rgba(var(--accent-rgb),.5); }
.toast.is-bad{ border-color:rgba(224,86,86,.5); color:#F0A8A8; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .checkout__grid{ grid-template-columns:1fr; }
  /* The summary moves above the form on narrow screens: you should see what
     you are paying for before you start typing an address. */
  .checkout__summary{ position:static; order:-1; }
  .cards2{ grid-template-columns:1fr; }
  .clock{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .clock__side{ justify-items:center; }
}

@media (max-width:640px){
  .frow{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
  .pcard__body{ padding:14px; }
  .pcard__foot{ flex-direction:column; align-items:stretch; gap:10px; }
  .pcard__buy .btn, .pcard__buy .step2{ width:100%; }
  .step2{ display:grid; grid-template-columns:1fr auto 1fr; }
  .toolbar .field--sort{ min-width:0; flex:1 1 100%; }
  .cart{ width:100%; }
  .auth__body{ padding:22px 18px; }
  .toast{ inset-block-end:76px; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .cart, .scrim, .toast, .dial__fill{ transition:none !important; }
}