:root { --ink:#111; --mut:#6e6e73; --line:#dcdce0; --bg:#f7f7f8; --ok:#0a7d33; --warn:#c0392b; }
/* --mut passes WCAG AA on both backgrounds (5.07:1 on #fff, 4.74:1 on
   --bg); the previous #8a8a8e measured 3.44:1 and failed for labels,
   captions, and off-day chips. */
* { box-sizing:border-box; margin:0; }
/* The hidden attribute must ALWAYS win: author display rules (.banner's
   flex, button's block) silently override the UA's [hidden]{display:none},
   which made the banner's dismiss ✕ a no-op and kept "hidden" fallback
   buttons visible. !important restores the attribute's contract. */
[hidden] { display:none !important; }
body { font-family:-apple-system,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
main { max-width:28rem; margin:0 auto; padding:1rem; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
header h1 { font-size:1.25rem; padding:.5rem 0 1rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:.75rem; }
label, h2 { display:block; font-size:.7rem; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin:.75rem 0 .25rem; }
select,input,textarea { width:100%; font-size:1rem; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
/* textarea does not inherit the body font by default; vertical-only resize
   keeps the notes field from widening the single-column layout. */
textarea { font-family:inherit; resize:vertical; }
.strip-cap { font-size:.85rem; color:var(--mut); margin:-.15rem 0 .4rem; }
.days { display:flex; gap:.4rem; overflow-x:auto; padding:.25rem 0; }
.days a { position:relative; flex:0 0 3.2rem; text-align:center; border:1px solid var(--line); border-radius:10px; padding:.4rem 0; text-decoration:none; color:var(--ink); background:#fff; }
.days a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.days a.off { color:var(--mut); }
.days .dn { display:block; font-size:.65rem; color:inherit; opacity:.7; }
/* On off days the muted color already carries the meaning — stacking the
   .dn opacity on top of it dropped the weekday name below AA contrast. */
.days a.off .dn { opacity:1; }
.chips { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.5rem; }
/* Direct children only: a chip may nest a .visually-hidden state span for
   screen readers, and that span must never inherit chip geometry. */
.chips > a, .chips > button, .chips > span { display:block; width:100%; text-align:center; font-size:1rem; border:1px solid var(--line); border-radius:10px; padding:.7rem 0; margin:0; text-decoration:none; color:var(--ink); font-weight:600; background:#fff; cursor:pointer; }
.chips a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chips .gone { position:relative; color:var(--mut); border-style:dashed; font-weight:400; cursor:default; }
.chips .gone s { text-decoration:line-through; }
button,.btn { display:block; width:100%; text-align:center; font-size:1rem; font-weight:600; padding:.85rem; margin-top:1rem; border:0; border-radius:12px; background:var(--ink); color:#fff; text-decoration:none; cursor:pointer; }
.btn.secondary { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn.danger { background:#fff; color:var(--warn); border:1px solid var(--line); }
.msg { padding:.5rem 0; }
.msg.warn { color:var(--warn); font-weight:600; }
.msg.ok { color:var(--ok); font-weight:600; }
.meta { color:var(--mut); font-size:.9rem; }
.tel { font-weight:700; color:var(--ink); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* The chip/day containers are position:relative so these absolute boxes are
   contained locally and can never widen the document (horizontal-scroll
   regression caught in review). */
.row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 0; border-top:1px solid var(--line); }
.row:first-child { border-top:0; padding-top:0; }
.row-main { flex:1 1 auto; min-width:0; }
.row-main p { margin:0; }
.row-main a { color:var(--ink); }
a.row { color:inherit; text-decoration:none; }
.hero .brand { font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin:0 0 .3rem; }
.usps { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:34rem) { .usps { grid-template-columns:1fr 1fr; } }
.usp h3 { margin:0 0 .15rem; }
.usp p { margin:0; }
.row-actions { flex:0 0 auto; }
.row-actions form { margin:0; }
.btn-sm { display:inline-block; width:auto; font-size:.85rem; font-weight:600; padding:.5rem .9rem; margin:0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; }
.btn-sm.danger { color:var(--warn); }
.daynav { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.daynav a { color:var(--ink); text-decoration:none; font-weight:600; }
.daypick { display:flex; gap:.5rem; align-items:center; }
.daypick input { width:auto; flex:1 1 auto; }
.daypick button { width:auto; margin-top:0; padding:.7rem 1rem; }
.msg.nudge { background:#fff8e6; border:1px solid #f0d999; border-radius:10px; padding:.6rem .8rem; }
/* Notifications banner (Task 16): a non-interfering top bar the barber can
   keep working around or dismiss. Same warm tone as .msg.nudge. Flex row —
   message text, the enable button, and the ✕ pushed to the trailing edge;
   margin-inline-start:auto keeps that ✕ at the correct end in RTL (Arabic
   app pages) with no [dir] override. Base state is the HTML `hidden` attr;
   app.js decides whether to reveal it. */
.banner { display:flex; align-items:center; gap:.6rem; background:#fff8e6; border:1px solid #f0d999; border-radius:10px; padding:.6rem .8rem; margin-bottom:.75rem; }
.banner-text { margin:0; font-size:.9rem; }
.banner-text:empty { display:none; }
.banner .btn-sm { flex:0 0 auto; }
.banner-close { flex:0 0 auto; width:40px; height:40px; margin-inline-start:auto; padding:0; font-size:1.4rem; line-height:1; border:0; border-radius:8px; background:transparent; color:var(--mut); cursor:pointer; }
.tag { display:inline-block; font-size:.7rem; font-weight:600; color:var(--mut); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:.1rem .4rem; text-transform:none; }
.badge { display:inline-block; min-width:1.4rem; text-align:center; font-size:.8rem; font-weight:700; color:#fff; background:var(--ink); border-radius:999px; padding:.15rem .5rem; }
label.radio { display:inline-block; text-transform:none; font-size:.9rem; font-weight:400; color:var(--ink); margin:.5rem .75rem .5rem 0; }
label.radio input { width:auto; }
/* Settings notification toggles: same normal-case ink override as label.radio,
   but block — each checkbox+text pair is its own row. */
label.check { display:block; text-transform:none; font-size:.9rem; font-weight:400; color:var(--ink); margin:.5rem 0; }
label.check input { width:auto; }
/* "Clear my details": a button that reads as an inline link, undoing the
   block/full-width button default above. */
.linklike { display:inline; width:auto; font-size:.9rem; font-weight:400; padding:0; margin:0; border:0; border-radius:0; background:none; color:var(--mut); text-decoration:underline; cursor:pointer; }
.forget-form { margin:0; }
/* Barber-app hamburger: native details/summary — opens and closes with zero
   JS and is keyboard-operable out of the box. The summary is position:relative
   so its .visually-hidden label stays contained (same horizontal-scroll guard
   as the chip/day containers above). */
.menu { position:relative; flex:0 0 auto; margin-top:.25rem; }
.menu summary { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; cursor:pointer; border:1px solid var(--line); border-radius:10px; background:#fff; }
.menu summary::-webkit-details-marker { display:none; }
.menu .bars { position:relative; display:block; width:18px; height:2px; border-radius:1px; background:var(--ink); }
.menu .bars::before, .menu .bars::after { content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px; background:var(--ink); }
.menu .bars::before { top:-6px; }
.menu .bars::after { top:6px; }
/* inset-inline-end hangs the sheet from the icon's start-appropriate edge in
   both LTR and RTL (Arabic app pages) — no [dir="rtl"] override needed. */
.menu-sheet { position:absolute; top:calc(100% + .4rem); inset-inline-end:0; z-index:10; min-width:12rem; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.08); overflow:hidden; }
.menu-sheet a { display:block; padding:.7rem 1rem; color:var(--ink); text-decoration:none; font-weight:600; }
.menu-sheet .logout-form { margin:0; border-top:1px solid var(--line); }
.menu-sheet .logout-form button { width:100%; text-align:start; font-size:1rem; font-weight:600; padding:.7rem 1rem; margin:0; border:0; border-radius:0; background:#fff; color:var(--ink); cursor:pointer; }
.qr-code { display:block; width:100%; max-width:22rem; height:auto; margin:.75rem auto; }
@media print {
  .menu { display:none; }
  .banner { display:none; } /* the notifications nudge never belongs on paper */
  [data-print] { display:none; } /* the print button must not print itself */
  .qr-code { max-width:100%; }
  /* QR flyer (Task 17): "Save as PDF" / print yields a clean one-page flyer —
     the shop name (base.html's header h1), the QR code, and the booking URL
     text, nothing else. Hide this page's own "QR code" heading, the field
     label, and the mirror hint; the hamburger is already gone above. The
     header shop-name h1 lives outside .qr-page, so it stays. */
  .qr-page h1, .qr-page label, .qr-page .meta { display:none; }
}
/* Keyboard affordance: visible focus ring on the interactive grids and
   form controls. Touch/mouse users never see it (:focus-visible). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* Arabic (dir=rtl): tracking-out connected letterforms breaks them apart —
   drop the uppercase-label letter-spacing there. */
[dir="rtl"] label, [dir="rtl"] h2 { letter-spacing:0; }