/* ==========================================================================
   Inner pages, forms, results and dashboard.
   Extends site.css — same instrument-panel language, no new colour decisions.
   ========================================================================== */

/* ---------- page header + breadcrumb ------------------------------------ */
.phead { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--mo-teal-700) 0%, #01222B 48%, var(--ink-0) 100%); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.75rem); }
.phead::before { content: ""; position: absolute; inset: 0; background: var(--mo-teal-600); opacity: .16; clip-path: polygon(64% 100%, 96% 0, 100% 0, 100% 100%); }
.phead::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .34; clip-path: polygon(84% 100%, 116% 0, 100% 0, 100% 100%); }
.phead .shell { position: relative; z-index: 1; }
.phead h1 { font-size: clamp(1.65rem, 1.2rem + 2.1vw, 2.85rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.3; }
.phead p { color: rgba(234,242,243,.76); margin-top: .75rem; max-width: 62ch; }

.crumb { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--fg-dim); margin-bottom: 1rem; flex-wrap: wrap; }
.crumb a { color: var(--mo-teal-300); }
.crumb a:hover { text-decoration: underline; }
.crumb span { opacity: .5; }

/* ---------- filter bar --------------------------------------------------- */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--hair); }
.filters__l { font-family: var(--f-num); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-inline-end: .4rem; }
.fchip { padding: .5rem 1rem; border: 1px solid var(--hair); border-radius: 999px; font-size: .87rem; font-weight: 600; color: var(--fg-mute); transition: .22s var(--ease); white-space: nowrap; }
.fchip:hover { border-color: var(--hair-strong); color: var(--fg); }
.fchip[aria-current="true"] { background: var(--mo-teal-600); border-color: var(--mo-teal-600); color: #fff; }
.fcount { display: inline-block; margin-inline-start: .4rem; font-family: var(--f-num); font-size: .78rem; opacity: .75; }

.empty { text-align: center; padding: 4rem 1rem; border: 1px dashed var(--hair-strong); border-radius: 10px; color: var(--fg-mute); }
.empty b { display: block; color: var(--fg); font-size: 1.1rem; margin-bottom: .4rem; }

/* ---------- auction detail ---------------------------------------------- */
.adet { display: grid; grid-template-columns: 1.55fr .95fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
/* Same min-width:auto trap as .dash — without this a long input placeholder or
   a wide table inside a column widens the whole page instead of wrapping. */
.adet > *, .frow > *, .form > * { min-width: 0; }
@media (max-width: 1000px) {
  .adet { grid-template-columns: 1fr; }
  /* Auction page only: put the price + "order the booklet" box above the
     gallery and the description. Scoped with a modifier so the order form —
     which uses the same grid — keeps the form first and its summary after. */
  .adet--decide > .rail { order: -1; }
}

.gal__main { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 16/9; background: var(--ink-2); }
.gal__main img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .5rem; }
.gal__thumbs button { border-radius: 6px; overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 4/3; padding: 0; transition: border-color .22s, transform .22s; }
.gal__thumbs button:hover { transform: translateY(-2px); }
.gal__thumbs button[aria-current="true"] { border-color: var(--mo-teal-400); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .gal__thumbs { grid-template-columns: repeat(4, 1fr); } }

.aprose { margin-top: 2rem; }
.aprose h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .85rem; }
.aprose h2:not(:first-child) { margin-top: 2.25rem; }
.aprose p { color: var(--fg-mute); }

.spec { width: 100%; border-collapse: collapse; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.spec th, .spec td { text-align: right; padding: .78rem 1.05rem; border-bottom: 1px solid var(--hair); font-size: .92rem; }
.spec th { background: var(--ink-2); color: var(--fg-mute); font-weight: 600; width: 38%; }
.spec td { color: var(--fg); font-weight: 600; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.lots { display: grid; gap: .55rem; }
.lots li { display: flex; gap: 1rem; align-items: baseline; padding: .85rem 1.1rem; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 6px; }
.lots b { font-weight: 700; font-size: .96rem; }
.lots span { color: var(--fg-mute); font-size: .88rem; margin-inline-start: auto; text-align: left; }

/* sticky booking rail */
.rail { position: sticky; top: 96px; display: grid; gap: 1rem; }
@media (max-width: 1000px) { .rail { position: static; } }

/* ---------- forms -------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .frow { grid-template-columns: 1fr; } }
/* align-content:start — a .frow stretches both columns to the taller one, and
   a grid that stretches hands the extra height to its input. Put a hint under
   one field of a pair and the other field's box silently grows to match it. */
.field { display: grid; gap: .45rem; align-content: start; }
.field > label { font-size: .88rem; font-weight: 700; }
.field > label i { font-style: normal; color: var(--mo-teal-300); }
.field small { font-size: .8rem; color: var(--fg-dim); }
.field > label { color: var(--fg); }
.field input, .field select, .field textarea {
  width: 100%;
  /* fill sits ABOVE the panel, not below it — a darker hole reads as a gap */
  background: var(--ink-3);
  border: 1.5px solid var(--hair-strong);
  border-radius: 6px;
  padding: .82rem .95rem; color: var(--fg); font: inherit; font-size: .95rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(148, 198, 211, .6); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--mo-teal-300); background: var(--ink-4); outline: none;
  box-shadow: 0 0 0 3px rgba(92, 166, 185, .22);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mo-teal-300) 50%), linear-gradient(135deg, var(--mo-teal-300) 50%, transparent 50%); background-position: 18px calc(50% - 2px), 23px calc(50% - 2px); background-size: 5px 5px; background-repeat: no-repeat; }

.radios { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .radios { grid-template-columns: 1fr; } }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio span { display: block; padding: .9rem 1.05rem; border: 1.5px solid var(--hair-strong); border-radius: 6px; font-size: .92rem; font-weight: 600; transition: .2s; background: var(--ink-3); }
.radio:hover span { border-color: rgba(148, 198, 211, .6); }
.radio input:checked + span { border-color: var(--mo-teal-300); background: rgba(2, 97, 118, .5); color: #fff; }
.radio input:focus-visible + span { outline: 2px solid var(--mo-teal-300); outline-offset: 2px; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--fg-mute); }
.check input { margin-top: .35rem; accent-color: var(--mo-teal-500); width: 17px; height: 17px; flex: none; }
.check a { color: var(--mo-teal-300); text-decoration: underline; }

.fcard { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; padding: clamp(1.35rem, 3vw, 2.1rem); }
.fcard > h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: .35rem; }
.fcard > p.hint { color: var(--fg-mute); font-size: .9rem; margin-bottom: 1.5rem; }

/* form step rail */
/* ---------- order placed --------------------------------------------------
   Replaces the whole form after a booklet order goes in: a clear finish, the
   order number to keep, and a way onward — never the same empty form again. */
.ordok { text-align: center; padding: 1rem 0 .5rem; }
.ordok__ic {
  width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(14,124,90,.16); border: 1px solid rgba(79,191,149,.5); margin-bottom: 1.1rem;
}
.ordok__ic svg { width: 30px; height: 30px; color: #4FBF95; }
.ordok h2 { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.75rem); font-weight: 900; margin-bottom: .6rem; }
.ordok > p { color: var(--fg-mute); max-width: 46ch; margin: 0 auto; line-height: 1.85; }
.ordok__no {
  margin: 1.6rem auto .5rem; display: inline-flex; flex-direction: column; gap: .3rem;
  padding: 1rem 2.2rem; border: 1px dashed var(--hair-strong); border-radius: 10px; background: var(--ink-2);
}
.ordok__no span { font-size: .8rem; color: var(--fg-dim); }
.ordok__no b { font-family: var(--f-num); font-size: 1.9rem; font-weight: 700; color: var(--mo-teal-300); letter-spacing: .04em; }
.ordok__keep { font-size: .84rem; color: var(--fg-dim); margin-bottom: 1.6rem; }
.ordok__act { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

.steps2 { display: flex; gap: .5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.steps2 div { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: var(--fg-dim); }
.steps2 b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-num); font-size: .82rem; border: 1px solid var(--hair-strong); flex: none; }
.steps2 div[aria-current="step"] { color: var(--fg); }
.steps2 div[aria-current="step"] b { background: var(--mo-teal-600); border-color: var(--mo-teal-600); color: #fff; }
.steps2 i { width: 22px; height: 1px; background: var(--hair-strong); }

/* map picker stand-in */
.mapbox { position: relative; border: 1px solid var(--hair-strong); border-radius: 8px; overflow: hidden; aspect-ratio: 16/7; background:
  repeating-linear-gradient(0deg, #0B1416, #0B1416 27px, #0E191C 27px, #0E191C 28px),
  repeating-linear-gradient(90deg, #0B1416, #0B1416 27px, #0E191C 27px, #0E191C 28px); display: grid; place-items: center; }
.mapbox::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(2,97,118,.3), transparent 62%); }
.mapbox__pin { position: relative; z-index: 2; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.mapbox__pin svg { width: 34px; height: 34px; color: var(--mo-teal-300); filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.mapbox__pin b { font-size: .93rem; }
.mapbox__pin small { color: var(--fg-dim); font-size: .8rem; }
.mapbox__act { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .9rem; }
/* the aspect ratio is for the placeholder; once the real map is in, it fills */
.mapbox iframe { border: 0; display: block; width: 100%; height: 100%; }

/* summary rail */
.sumr { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.sumr__h { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hair); background: var(--ink-3); font-family: var(--f-num); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.sumr__b { padding: 1.25rem; }
.sumr__b .row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--hair); font-size: .9rem; color: var(--fg-mute); }
.sumr__b .row:last-of-type { border-bottom: 0; }
.sumr__b .row b { color: var(--fg); font-weight: 700; }
/* gap and wrap: on a 360px screen the label fills its side and the figure ends
   up touching it — "المبلغ المستحق1,560 ج.م" reads as one word */
.sumr__total { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--hair-strong); display: flex; justify-content: space-between; align-items: baseline; gap: .75rem 1rem; flex-wrap: wrap; }
.sumr__total span { font-size: .9rem; color: var(--fg-mute); }
.sumr__total b { font-family: var(--f-num); font-size: 1.65rem; font-weight: 700; color: var(--mo-teal-300); }

/* ---------- results table ------------------------------------------------ */
.rtable { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
.rtable th, .rtable td { text-align: right; padding: .9rem 1rem; border-bottom: 1px solid var(--hair); }
.rtable thead th { background: var(--ink-2); font-size: .8rem; font-weight: 700; color: var(--fg-mute); letter-spacing: .04em; white-space: nowrap; }
.rtable tbody tr { transition: background .2s; }
.rtable tbody tr:hover { background: var(--ink-2); }
.rtable .ttl { font-weight: 700; }
.rtable .money { font-family: var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtable .up { color: var(--mo-teal-300); font-weight: 700; }
.rtable .pct { font-family: var(--f-num); font-size: .84rem; color: #4FBF95; }
.scrollx { overflow-x: auto; border: 1px solid var(--hair); border-radius: 10px; }

/* ---------- dashboard ---------------------------------------------------- */
.dash { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }
/* Grid items default to min-width:auto, so a wide table inside .dmain would
   force its column open and push the whole dashboard past the viewport
   instead of scrolling inside its own .scrollx. This lets them shrink. */
.dash > * { min-width: 0; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }
.dside { background: var(--ink-2); border-inline-start: 1px solid var(--hair); padding: 1.5rem 1rem; display: flex; flex-direction: column; }
.dside__logo { display: block; padding: 0 .6rem 1.5rem; border-bottom: 1px solid var(--hair); margin-bottom: 1.1rem; }
.dside__logo img { height: 38px; width: auto; }
.dnav { display: grid; gap: .18rem; }
.dnav h5 { font-family: var(--f-num); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-dim); padding: .9rem .6rem .4rem; margin: 0; font-weight: 600; }
.dnav a { display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; border-radius: 6px; font-size: .9rem; font-weight: 600; color: var(--fg-mute); transition: .18s; }
.dnav a svg { width: 17px; height: 17px; flex: none; }
.dnav a:hover { background: var(--ink-3); color: var(--fg); }
.dnav a[aria-current="page"] { background: var(--mo-teal-600); color: #fff; }

/* On mobile a stacked sidebar would push every screen's content below a full
   page of navigation, so it collapses into one horizontal scrolling bar.
   NB: this block must stay AFTER the .dnav base rules above — same specificity,
   so source order decides which display value wins. */
@media (max-width: 900px) {
  .dside {
    border-inline-start: 0; border-bottom: 1px solid var(--hair);
    padding: .85rem 0;
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--ink-2) 96%, transparent);
    backdrop-filter: blur(12px);
  }
  .dside__logo { padding: 0 1rem .7rem; margin-bottom: .7rem; }
  .dside__logo img { height: 30px; }
  .dnav {
    display: flex; gap: .4rem; overflow-x: auto; padding-inline: 1rem .5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dnav::-webkit-scrollbar { display: none; }
  .dnav h5 { display: none; }
  .dnav a {
    white-space: nowrap; border: 1px solid var(--hair); border-radius: 999px;
    padding: .5rem .9rem; font-size: .84rem; flex: none;
  }
  .dnav a[aria-current="page"] { border-color: var(--mo-teal-600); }
}
.dmain { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--ink-0); }
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.dtop h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); font-weight: 900; }
.dtop p { color: var(--fg-mute); font-size: .9rem; margin-top: .25rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 9px; padding: 1.2rem 1.3rem; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--mo-teal-600); }
.stat--ok::before { background: #0E7C5A; } .stat--warn::before { background: #B4791A; }
.stat__k { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--fg-dim); }
.stat__k svg { width: 15px; height: 15px; }
.stat b { display: block; font-family: var(--f-num); font-size: 2rem; font-weight: 700; margin-top: .45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: .4rem; font-size: .78rem; color: #4FBF95; }

.panel { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
.panel__h { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel__h h2 { font-size: 1.02rem; font-weight: 800; }
.panel__b { padding: 1.25rem; }
.panel__b--flush { padding: 0; }

.dtable { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.dtable th, .dtable td { text-align: right; padding: .78rem 1.25rem; border-bottom: 1px solid var(--hair); }
.dtable thead th { background: var(--ink-3); font-size: .77rem; color: var(--fg-mute); white-space: nowrap; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--ink-3); }
.pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pill--open { background: rgba(2,97,118,.35); color: var(--mo-teal-200); }
.pill--soon { background: rgba(180,121,26,.28); color: #E0A94A; }
.pill--done { background: rgba(110,114,117,.25); color: var(--fg-mute); }
.pill--new  { background: rgba(14,124,90,.28); color: #4FBF95; }

/* ---- activity log: the "what changed" cell -------------------------------
   One chip per field. A field whose value was safe to keep shows old → new; a
   field where only the name was kept shows the name alone, which is the visible
   difference between "the status moved" and "the phone number was edited". */
.chg { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap;
       margin: 0 0 .3rem; padding: .16rem .45rem; border-radius: 6px;
       background: var(--ink-3); border: 1px solid var(--hair); font-size: .78rem; }
.chg + .chg { margin-inline-start: .3rem; }
.chg__f { color: var(--fg-mute); }
.chg__v { color: var(--fg-dim); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg__v--new { color: var(--mo-teal-200); font-weight: 600; }
.chg__a { color: var(--fg-mute); }
@media (max-width: 700px) {
  /* nothing under Cairo's legible floor, the arrow included */
  .chg, .chg__f, .chg__v, .chg__a { font-size: .8rem; }
  .chg__v { max-width: none; white-space: normal; }
}

/* media slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.slot { border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--ink-3); }
.slot__img { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.slot__img img { width: 100%; height: 100%; object-fit: cover; }
.slot__over { position: absolute; inset: 0; background: rgba(6,12,14,.72); display: grid; place-items: center; opacity: 0; transition: opacity .22s; }
.slot:hover .slot__over { opacity: 1; }
.slot__over span { border: 1px solid var(--mo-teal-300); color: var(--mo-teal-300); padding: .45rem .9rem; border-radius: 5px; font-size: .82rem; font-weight: 700; }
.slot__m { padding: .7rem .85rem; }
.slot__m b { display: block; font-size: .86rem; font-weight: 700; }
.slot__m small { font-family: var(--f-num); font-size: .75rem; color: var(--fg-dim); }

/* mini bar chart for the visitors screen */
.bars { display: flex; align-items: flex-end; gap: .5rem; height: 190px; padding-top: .5rem; }
.bars div { flex: 1; background: linear-gradient(180deg, var(--mo-teal-500), var(--mo-teal-700)); border-radius: 3px 3px 0 0; position: relative; min-height: 4px; transition: filter .2s; }
.bars div:hover { filter: brightness(1.35); }
.bars div span { position: absolute; inset-inline: 0; bottom: -1.5rem; text-align: center; font-family: var(--f-num); font-size: .72rem; color: var(--fg-dim); }
.bars div b { position: absolute; inset-inline: 0; top: -1.4rem; text-align: center; font-family: var(--f-num); font-size: .76rem; color: var(--fg-mute); font-weight: 600; }
.bars-wrap { padding-bottom: 1.75rem; }

.barlist { display: grid; gap: .8rem; }
.barlist div { display: grid; gap: .35rem; }
.barlist .t { display: flex; justify-content: space-between; font-size: .87rem; }
.barlist .t b { font-family: var(--f-num); color: var(--fg); }
.barlist .track { height: 7px; background: var(--ink-0); border-radius: 4px; overflow: hidden; }
.barlist .fill { height: 100%; background: linear-gradient(90deg, var(--mo-teal-500), var(--mo-teal-700)); border-radius: 4px; }

/* ---------- bilingual field pair -----------------------------------------
   Every editable string on a bilingual site needs both languages visible at
   once — a language *tab* hides the other half and that is where translations
   silently go missing. Side by side, an empty English box is obvious. */
.bilang { border: 1px solid var(--hair); border-radius: 8px; padding: 1rem 1.1rem 1.1rem; background: var(--ink-3); }
.bilang > .bl__t { font-size: .88rem; font-weight: 700; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.bilang > .bl__t i { font-style: normal; color: var(--mo-teal-300); }
.bl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 760px) { .bl__grid { grid-template-columns: 1fr; } }
.bl__f { display: grid; gap: .35rem; min-width: 0; }
.bl__tag {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  font-family: var(--f-num); font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .12rem .5rem; border-radius: 3px;
  background: rgba(148,198,211,.14); color: var(--fg-mute);
}
.bl__tag--en { background: rgba(2,97,118,.4); color: var(--mo-teal-200); }
.bl__f input, .bl__f textarea {
  width: 100%; background: var(--ink-0); border: 1.5px solid var(--hair-strong); border-radius: 5px;
  padding: .68rem .85rem; color: var(--fg); font: inherit; font-size: .9rem;
}
.bl__f input:focus, .bl__f textarea:focus { border-color: var(--mo-teal-300); outline: none; box-shadow: 0 0 0 3px rgba(92,166,185,.2); }
.bl__f textarea { min-height: 88px; resize: vertical; }
.bl__f[data-lang="en"] input, .bl__f[data-lang="en"] textarea { direction: ltr; text-align: left; font-family: var(--f-en); }
.bl__miss { border-color: rgba(224,169,74,.55) !important; }
.bl__warn { font-size: .76rem; color: #E0A94A; display: flex; align-items: center; gap: .35rem; }

/* ---------- a numbered section of page copy ------------------------------
   Legal pages are stored as sN.title / sN.body pairs. Shown raw, the editor
   is a wall of "s1.title, s1.body, s2.title…" that means nothing to the person
   who has to fill it in. Grouped, each section is one card: a heading input and
   the text under it, with the section's own wording as the card title so it is
   recognisable at a glance. */
.seccard { padding-top: .85rem; }
.seccard__h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--hair);
}
.seccard__n {
  flex: none; font-family: var(--f-num); font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  color: #fff; background: var(--mo-teal-600); padding: .18rem .6rem; border-radius: 5px;
}
.seccard__ttl { font-weight: 700; font-size: .95rem; color: var(--fg); min-width: 0; }
.seccard__lbl { font-size: .82rem; font-weight: 700; color: var(--fg-mute); margin: .9rem 0 .3rem; }
.seccard__lbl:first-of-type { margin-top: 0; }
textarea.bigbody { min-height: 150px; line-height: 1.85; }

/* ---------- foldable panel (native <details> dressed as a .panel) ---------
   The copy editor is what the client came for; the SEO table and the FAQ list
   are secondary on this screen, so they collapse instead of stacking into a
   mile-long scroll. */
details.panel > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2 { font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; }
details.panel > summary h2::before {
  content: "›"; font-size: 1.2rem; color: var(--mo-teal-300); transition: transform .2s; line-height: 1;
}
details.panel[open] > summary h2::before { transform: rotate(90deg); }
details.panel[open] > summary { border-bottom: 1px solid var(--hair); }
.fold__hint { color: var(--fg-dim); font-weight: 400; font-size: .82rem; }

/* ---------- per-governorate delivery fees --------------------------------
   27 small labelled number inputs. A responsive grid, not a 27-row table:
   short label above / beside a narrow field, wrapping to fit the screen. */
.shiprates { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem 1rem; }
.shiprate { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 7px; padding: .5rem .75rem; }
.shiprate label { font-size: .88rem; font-weight: 600; color: var(--fg); }
.shiprate input {
  width: 5.2rem; flex: none; background: var(--ink-0); border: 1.5px solid var(--hair-strong);
  border-radius: 5px; padding: .45rem .55rem; color: var(--fg); font: inherit; font-size: .9rem; text-align: center;
}
.shiprate input:focus { border-color: var(--mo-teal-300); outline: none; box-shadow: 0 0 0 3px rgba(92,166,185,.2); }

.dnote { display: flex; gap: .8rem; align-items: flex-start; background: rgba(180,121,26,.12); border: 1px solid rgba(224,169,74,.3); border-radius: 8px; padding: 1rem 1.15rem; font-size: .88rem; color: #E0A94A; margin-bottom: 1.5rem; }
.dnote svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; }
.dnote b { color: #F4C87A; }

/* ----------------------------------------------------------- sign-in screen
   One card, centred, on the brand gradient. Nothing else on the page: the
   dashboard is staff-only and there is no sign-up path to offer. */
.authbody { min-height: 100dvh; }
.auth {
  min-height: 100dvh; display: grid; place-content: center; justify-items: center;
  gap: 1.4rem; padding: clamp(1.25rem, 5vw, 3rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(15,132,155,.22), transparent 62%),
    var(--ink-0);
}
.auth__card {
  width: min(420px, 100%);
  background: var(--ink-2); border: 1px solid var(--hair); border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.auth__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.auth__logo img { height: 42px; width: auto; display: block; }
.auth__h {
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem); font-weight: 800; line-height: 1.35; margin: 0 0 .5rem;
}
.auth__hicon { width: 21px; height: 21px; flex: none; color: var(--mo-teal-300); }
.auth__lead { font-size: .88rem; color: var(--fg-dim); margin: 0 0 1.5rem; line-height: 1.6; }
.auth__err {
  display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.25rem;
  background: rgba(179,38,30,.12); border: 1px solid rgba(179,38,30,.42); border-radius: 8px;
  padding: .85rem 1rem; font-size: .86rem; color: #F0958E;
}
.auth__err svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }
.auth__remember { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--fg-mute); cursor: pointer; }
.auth__remember input { width: 17px; height: 17px; accent-color: var(--mo-teal-500); flex: none; }
.auth__submit { width: 100%; justify-content: center; margin-top: .35rem; }
/* #i-arrow points left, which IS forward in Arabic — only the English page
   needs it turned round. */
.auth__submit svg { transform: scaleX(-1); }
[dir="rtl"] .auth__submit svg { transform: none; }
.auth__note {
  margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hair);
  font-size: .8rem; color: var(--fg-dim); line-height: 1.65;
}
.auth__back { font-size: .82rem; color: var(--fg-dim); }
.auth__back:hover { color: var(--mo-teal-300); }

/* --------------------------------------------- signed-in block, dash sidebar */
.duser {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--hair);
  display: grid; gap: .7rem;
}
.duser__who { display: flex; align-items: center; gap: .65rem; padding: 0 .6rem; min-width: 0; }
.duser__av {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mo-teal-700); border: 1px solid var(--hair-strong);
  font-family: var(--f-num); font-weight: 700; font-size: .85rem; color: var(--mo-teal-100);
}
/* both children are spans, so they need to be told to stack */
.duser__t { min-width: 0; display: grid; }
.duser__n { font-size: .85rem; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duser__r { font-size: .74rem; color: var(--fg-dim); line-height: 1.35; }
.duser__out {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: none; border: 1px solid var(--hair); border-radius: 7px;
  padding: .55rem .6rem; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--fg-mute); cursor: pointer; text-align: start;
}
.duser__out:hover { border-color: rgba(179,38,30,.5); color: #F0958E; background: rgba(179,38,30,.08); }
.duser__out svg { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .duser__out svg { transform: scaleX(-1); }

/* ------------------------------------------------------------ denied screen */
.denied { min-height: 100dvh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1rem; padding: 2rem; background: var(--ink-0); }
.denied svg { width: 46px; height: 46px; color: #E0A94A; }
.denied h1 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin: 0; }
.denied p { max-width: 46ch; color: var(--fg-dim); font-size: .92rem; line-height: 1.7; margin: 0; }

/* The mobile sidebar is a sticky strip, so the signed-in block has to sit on
   one line beside the nav rather than eat a block of vertical space. */
@media (max-width: 900px) {
  .duser {
    margin-top: .7rem; padding: .7rem 1rem 0;
    grid-template-columns: 1fr auto; align-items: center; gap: .8rem;
  }
  .duser__who { padding: 0; }
  .duser__av { width: 28px; height: 28px; font-size: .78rem; }
  .duser__out { width: auto; padding: .45rem .75rem; }
}

/* On desktop the sidebar is pinned to the viewport and only the link list
   scrolls, so the logo stays at the top and the signed-in block stays at the
   bottom. Left to stretch with the document, that block would sit a whole page
   below the fold and sign-out would need a scroll to reach. */
@media (min-width: 901px) {
  .dside { position: sticky; top: 0; align-self: start; height: 100vh; }
  .dnav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}

/* ------------------------------------------------------- staff & permissions
   The name cell doubles as an edit field: the email sits under it as context,
   so one row reads as one person and edits in place. */
.ustable td { vertical-align: middle; }
.uname {
  width: 100%; min-width: 150px; background: var(--ink-3);
  border: 1px solid var(--hair-strong); border-radius: 5px;
  padding: .4rem .6rem; color: var(--fg); font: inherit; font-size: .86rem; font-weight: 600;
}
.uname:focus { border-color: var(--mo-teal-300); outline: none; box-shadow: 0 0 0 3px rgba(92,166,185,.2); }
.umail { display: block; font-size: .76rem; color: var(--fg-dim); margin-top: .3rem; }
.urole {
  background: var(--ink-3); border: 1px solid var(--hair-strong); border-radius: 5px;
  padding: .4rem .6rem; color: var(--fg); font: inherit; font-size: .82rem;
}
.urole:disabled { opacity: .55; cursor: not-allowed; }
.uacts { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ubtn { padding: .38rem .7rem; font-size: .78rem; white-space: nowrap; }
.ubtn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ubtn--danger { color: #F0958E; border-color: rgba(179,38,30,.4); }
.ubtn--danger:hover { color: #F0958E; border-color: rgba(179,38,30,.7); background: rgba(179,38,30,.1); }

/* Each lot in the auction form is a bordered block, so a long list still reads
   as separate rows rather than one wall of inputs. */
.itemrow {
  border: 1px solid var(--hair); border-radius: 8px;
  padding: 1rem 1.1rem; margin-bottom: .8rem;
  display: grid; gap: .9rem; background: var(--ink-1);
}
.itemrow .field > label { font-size: .8rem; }
.itemrow [data-drop] { justify-self: start; }

/* ---------------------------------------------------------- legal documents
   A policy is read, not scanned: one narrow column, generous leading, and
   numbered headings so a clause can be cited over the phone. */
.legal { max-width: 74ch; }
.legal__stamp {
  font-size: .82rem; color: var(--fg-dim); padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hair); margin-bottom: 2rem;
}
.legal__s { margin-bottom: 2.5rem; }
.legal__s h2 {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 800;
  margin-bottom: .9rem; display: flex; gap: .55rem; align-items: baseline;
}
.legal__s h2 .num { color: var(--mo-teal-300); flex: none; }
.legal__s p { color: var(--fg-mute); margin-bottom: .9rem; line-height: 1.95; }
.legal__s p:last-child { margin-bottom: 0; }
.legal__cta {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hair);
  display: grid; gap: 1.1rem;
}
.legal__cta p { color: var(--fg-mute); font-size: .95rem; margin: 0; }

/* ------------------------------------------------------------- SEO screen
   One editor at a time, with a preview of the actual Google result — the
   character limits mean nothing to the client until they see the snippet. */
.seorow--on > td { background: rgba(2, 97, 118, .16); }
.seorow--on > td:first-child { box-shadow: inset 3px 0 0 var(--mo-teal-400); }
[dir="rtl"] .seorow--on > td:first-child { box-shadow: inset -3px 0 0 var(--mo-teal-400); }

.serp {
  background: var(--ink-0); border: 1px solid var(--hair); border-radius: 8px;
  padding: 1.1rem 1.25rem; display: grid; gap: .3rem;
}
.serp__t {
  font-family: var(--f-num); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: .5rem;
}
.serp__url { font-size: .78rem; color: #9AA0A2; }
.serp__h { font-size: 1.08rem; color: #8AB4F8; line-height: 1.4; }
.serp__d { font-size: .86rem; color: var(--fg-mute); line-height: 1.6; }

.bl__count { font-size: .74rem; color: var(--fg-dim); font-family: var(--f-num); }
.bl__count--over { color: #E0A94A; font-weight: 700; }

/* a fold for the settings that are read once and then left alone */
.dfold { border: 1px solid var(--hair); border-radius: 8px; padding: .85rem 1.1rem; }
.dfold > summary {
  cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--fg-mute);
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.dfold > summary::-webkit-details-marker { display: none; }
.dfold > summary::before { content: "+"; color: var(--mo-teal-300); font-weight: 700; }
.dfold[open] > summary::before { content: "−"; }
.dfold > summary:hover { color: var(--fg); }

/* ------------------------------------------------------------ media slots
   Each slot is its own upload form. The picture itself is the file input, so
   the gesture is "click the photo you want to change" — no separate browse
   button, and no way to change one slot while looking at another. */
.slot { display: flex; flex-direction: column; }
.slot__img { cursor: pointer; display: block; }
.slot--dirty { border-color: var(--mo-teal-400); box-shadow: 0 0 0 3px rgba(92,166,185,.18); }
.slot--dirty .slot__img::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--mo-teal-300); border-radius: 2px; pointer-events: none;
}
.slot__alt { border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: .6rem .85rem; }
.slot__alt > summary { font-size: .78rem; }
/* `display` here would otherwise beat the hidden attribute's UA rule, and the
   save buttons would show before a file was ever chosen. */
[hidden] { display: none !important; }
/* ---------- add-a-picture tile -------------------------------------------
   The one control on the auction form that has to look pressable: it is how
   gallery pictures get added, and as a flat dashed label it read as decoration.
   Dashed border says "drop zone", the hover lift says "button". */
.addshot__drop {
  cursor: pointer; position: relative;
  border: 1.5px dashed var(--hair-strong) !important; background: var(--ink-0) !important;
  display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.addshot__drop:hover { border-color: var(--mo-teal-400) !important; background: var(--ink-3) !important; }
.addshot__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.addshot__hint { display: grid; justify-items: center; gap: .3rem; text-align: center; padding: .8rem; }
.addshot__hint svg { width: 26px; height: 26px; color: var(--mo-teal-300); }
.addshot__hint b { color: var(--mo-teal-300); font-size: .88rem; font-weight: 700; }
.addshot__hint small { color: var(--fg-dim); font-size: .74rem; line-height: 1.5; }
.addshot__name {
  font-size: .78rem; color: var(--mo-teal-200); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start;
}

.slot__act { display: flex; gap: .5rem; padding: .7rem .85rem; border-top: 1px solid var(--hair); background: var(--ink-2); }
.slot__act .ubtn { flex: 1; justify-content: center; }

/* -------------------------------------------------- lead search and paging
   The phone number is how an Egyptian customer identifies themselves, so the
   search box sits above everything else on the screen. */
.lsearch { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lsearch input {
  flex: 1; min-width: 240px; background: var(--ink-3);
  border: 1.5px solid var(--hair-strong); border-radius: 6px;
  padding: .7rem .95rem; color: var(--fg); font: inherit; font-size: .92rem;
}
.lsearch input:focus { border-color: var(--mo-teal-300); outline: none; box-shadow: 0 0 0 3px rgba(92,166,185,.2); }

/* -------------------------------------------------------- record detail
   A read-only field list: label one side, value the other.

   Not a .dtable. That one turns every row into its own bordered card below
   700px, which is right for a list of nine orders and wrong for nine fields of
   one order — you would get nine cards describing a single row. Here the label
   simply moves above its value. */
.kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: .8rem 1.25rem; border-bottom: 1px solid var(--hair); font-size: .92rem;
}
.kv > div:last-child { border-bottom: 0; }
.kv .k { color: var(--fg-mute); flex: none; }
.kv .v { color: var(--fg); font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.kv .v small { font-size: .78rem; }
@media (max-width: 620px) {
  .kv > div { flex-direction: column; align-items: stretch; gap: .2rem; }
  .kv .v { text-align: start; }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; }
.pager__n { color: var(--fg-dim); }
.pager__b { display: flex; align-items: center; gap: .5rem; }
.pager__l { padding: .4rem .85rem; border: 1px solid var(--hair); border-radius: 6px; color: var(--fg-mute); font-weight: 600; }
.pager__l:hover { border-color: var(--mo-teal-300); color: var(--mo-teal-300); }
.pager__l--off { opacity: .4; pointer-events: none; }
.pager__c { color: var(--fg-dim); padding-inline: .4rem; }

/* The count of what is waiting, beside its nav item. Amber rather than red:
   these are jobs to do, not failures. */
.dnav__n {
  margin-inline-start: auto; flex: none;
  min-width: 20px; padding: .05rem .35rem; border-radius: 999px;
  background: #B4791A; color: #fff;
  font-size: .72rem; font-weight: 700; text-align: center;
}
.dnav a[aria-current="page"] .dnav__n { background: rgba(255,255,255,.28); }

/* ==========================================================================
   Phone. Everything below is about a 360px screen held in one hand.
   ========================================================================== */

/* ---- dashboard tables become cards --------------------------------------
   A nine-column table on a 5in screen is a sideways scroll where you lose the
   heading the moment you move — you end up reading a phone number with no idea
   whose it is. Each row becomes a card instead, every value carrying its own
   label (written on by the script in dashboard/_layout). */
@media (max-width: 700px) {
  .dtable { min-width: 0 !important; display: block; font-size: .92rem; }
  .dtable thead { display: none; }
  .dtable tbody, .dtable tr, .dtable td { display: block; width: auto; }

  .dtable tbody tr {
    border: 1px solid var(--hair); border-radius: 10px;
    margin-bottom: .8rem; background: var(--ink-2); overflow: hidden;
  }
  .dtable tbody tr:hover { background: var(--ink-2); }

  .dtable td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .95rem; border-bottom: 1px solid var(--hair);
    text-align: start; min-height: 44px;
  }
  .dtable td:last-child { border-bottom: 0; }
  .dtable td::before {
    content: attr(data-label);
    flex: none; color: var(--fg-dim); font-size: .78rem; font-weight: 600;
  }
  /* a cell whose heading was blank is an actions cell — let it fill the row */
  .dtable td:not([data-label]) { justify-content: stretch; }
  .dtable td:not([data-label]) > * { flex: 1; }

  .dtable .dtable__empty td, .dtable td[colspan] {
    display: block; text-align: center; border: 0;
  }
  .dtable__empty td::before { content: none; }

  /* The dashboard wrapper no longer needs to scroll now its table is cards.
     Scoped to .dash on purpose: the public results table also uses .scrollx and
     is NOT converted, so unscoping this made the home page 737px wide. */
  .dash .scrollx { overflow-x: visible; }
  .panel__b--flush { padding: .85rem; }
}

/* ---- touch targets ------------------------------------------------------
   Controls a finger has to hit get 44px. Links inside a sentence are left
   alone — inflating those would break the paragraphs they live in. */
@media (max-width: 900px) {
  .btn, .fchip, .ubtn, .pager__l, .dnav a, .langsw a, .duser__out,
  .dtable td .btn, .lsearch button, .lsearch input {
    min-height: 44px;
  }
  .btn, .ubtn, .pager__l, .lsearch button { display: inline-flex; align-items: center; justify-content: center; }
  .fchip { display: inline-flex; align-items: center; }
  .langsw a { display: inline-flex; align-items: center; padding-inline: 1rem; }
  .dnav a { padding-block: .8rem; }

  /* the inline selects that change a status */
  .urole, .dtable select { min-height: 44px; padding: .5rem .7rem; font-size: .88rem; width: 100%; }

  /* checkboxes and radios a thumb can actually land on */
  .check input, .auth__remember input { width: 22px; height: 22px; }
  .slot__alt > summary, .dfold > summary { min-height: 44px; display: flex; align-items: center; }
}

/* ---- readable sizes -----------------------------------------------------
   Nothing under 12px on a phone: below that Arabic diacritics and the thin
   strokes of Cairo start to disappear. */
@media (max-width: 700px) {
  .dnav__n, .duser__r, .fcount, .bl__tag, .serp__url, .legal__stamp,
  .slot__m small, .field small, .dtable td::before, .pager__n {
    font-size: .8rem;
  }
  .dtable td, .lots span, .aprose p, .legal__s p { font-size: .95rem; }
}

/* ---- the public site on a phone ----------------------------------------
   Same 44px rule as the dashboard, applied to the header, the top bar and the
   footer. Written here rather than in site.css so every mobile decision for
   this project sits in one place. */
@media (max-width: 900px) {
  .topbar a, .social a, .nav a, .ftr__legal a, .ftr a, .crumb a, .fchip {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .ftr__contact li { min-height: 44px; }
  .social a { width: 44px; height: 44px; justify-content: center; }
  .hdr__logo { display: inline-flex; align-items: center; min-height: 48px; }

  /* the burger is the single most-tapped control on a phone */
  .burger { min-width: 48px; min-height: 48px; }
}

@media (max-width: 700px) {
  /* the countdown unit labels were 10.9px — under Cairo's legible floor once
     the diacritic-free Arabic shrinks */
  .cd small, .pill, .badge, .fchip, .crumb, .topbar { font-size: .8rem; }
  .cd small { display: block; margin-top: .25rem; }
}

/* the auction card's status chip and its CTA, both under the legible floor */
@media (max-width: 700px) {
  .chip { font-size: .8rem; }
  .auc__b a, .auc__cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- the last stragglers found by measuring at 360px --------------------- */
@media (max-width: 900px) {
  /* the sidebar logo, the map pin, and the "see all →" links in panel headers */
  .dside__logo a, .panel__h a, .dtable a, .duser__who { min-height: 44px; display: inline-flex; align-items: center; }
  .dside__logo a { min-height: 48px; }

  /* checkboxes: a 21px box is a miss more often than a hit */
  .check input, .auth__remember input, .slot__act input[type=checkbox] { width: 24px; height: 24px; }
  .check { align-items: center; gap: .85rem; }

  /* the inline name field on the staff row */
  .uname, .lsearch input, .field input, .field select { min-height: 44px; }
}

@media (max-width: 700px) {
  /* chart labels, the page key under a SEO row, and field hints */
  .bars span, .bars b, .seorow .num, .dtable .num, .field small, .slot__m small,
  .duser__r, .fcount, .dnav__n { font-size: .8rem; }
  .serp__url { font-size: .8rem; }
}

/* the small print under a field, and the chart's day labels */
.hint { font-size: .78rem; color: var(--fg-dim); }
@media (max-width: 700px) {
  .hint, .bars div span, .bars div b { font-size: .8rem; }
  .bars div span { bottom: -1.7rem; }
}

/* the SERP preview caption and the character counters beside each field */
@media (max-width: 700px) {
  .serp__t, .bl__count { font-size: .8rem; }
}

/* The consent row: the box is 24px (the accessible minimum) but the thumb aims
   at the whole label, so that is what gets the comfortable height. The link
   inside the sentence stays inline — WCAG exempts inline links, and padding one
   out here would break the line it sits in. */
@media (max-width: 900px) {
  .check { min-height: 44px; }
}