/* =====================================================================
   public/app/schedule.css: Calendar and Bookings in the list system the owner chose (14 October 2026)

   Calendar: one soft panel; the bar's buttons with 10px corners, Add appointment the one lit; quieter grid lines;
   today's date on the hero colour, as on Home's calendar card; appointments with 10px corners. Bookings: its settings
   are Setup's Hours and booking task, one press away (Booking settings); the filters, the list and its rows are the
   shared list system (lists.css); Add booking the one lit button. Every colour and size is a token. Hover only where
   a pointer hovers.
   ===================================================================== */

/* ---------- Calendar: the panel and its bar ---------- */
.cal-page.card{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
.cal-bar{padding:18px 20px 14px}
.cal-range{font-weight:600}
.cal-bar .cal-nav{gap:8px}
.cal-bar .btn{gap:8px;height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.cal-bar .btn svg.i{width:16px;height:16px}
.cal-bar .btn.btn-primary{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);font-weight:600;color:var(--night)}
@media (hover:hover){.cal-bar .btn:not(.btn-primary):hover{background:var(--btn-2-hover);color:var(--ink)}.cal-bar .btn.btn-primary:hover{background:var(--lime-hover);color:var(--night)}}
.cal-bar .btn:active{scale:.96}
.cal-bar .icon-btn{width:var(--h-field);height:var(--h-field);border-radius:var(--r-btn)}

/* ---------- the week: quieter lines; today on the hero colour (as Home's calendar card) ---------- */
.cal-page .wk-head{border-top-color:var(--hair-2);border-bottom-color:var(--hair-2)}
.cal-page .wk-hd{border-left-color:var(--hair)}
.cal-page .wk-col{border-left-color:var(--hair);background-image:linear-gradient(var(--hair) 1px,transparent 1px)}
.cal-page .wk-hd.today b{min-width:28px;height:28px;padding:0 5px;border-radius:var(--r-btn);background:var(--hero-bg);box-shadow:var(--hero-lift);font-weight:700;color:var(--on-hero)}
.cal-page .ev{overflow:hidden;border-radius:var(--r-btn)}
/* a phone: the week strip, today's number on the hero colour too */
.cal-page .cal-strip{border-bottom-color:var(--hair-2)}
.cal-page .cal-empty .btn{gap:8px;height:var(--h-field);margin-top:12px;padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-weight:500;color:var(--ink)}
.cal-page .cal-empty .btn svg.i{width:15px;height:15px}
.cal-page .wd.today .wd-d{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 5px;border-radius:var(--r-btn);background:var(--hero-bg);box-shadow:var(--hero-lift);font-weight:700;color:var(--on-hero)}

/* ---------- Bookings: Booking settings quiet, Add booking lit ---------- */
#bookings .bk-bar>.btn{gap:8px;height:var(--h-field);padding:0 14px;border:0;border-radius:var(--r-btn);font-size:var(--fs-sm)}
#bookings .bk-bar>.btn:not(.btn-primary){background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-weight:500;color:var(--ink)}
@media (hover:hover){#bookings .bk-bar>.btn:not(.btn-primary):hover{background:var(--btn-2-hover)}}
#bookings .bk-bar>.btn.btn-primary{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);font-weight:600;color:var(--night)}
@media (hover:hover){#bookings .bk-bar>.btn.btn-primary:hover{background:var(--lime-hover);color:var(--night)}}
#bookings .bk-bar>.btn:active{scale:.96}
#bookings .bk-f{margin:0 0 14px}
#bookings .tbl.bk td.bk-t{font-weight:600}
#bookings .tbl.bk th.act{width:128px} /* the row button (92 at least) and the cell's padding, never cut */

@media (max-width:720px){
  /* the bar wraps: the range on its own line, then the buttons, the arrows at the end of their line (never cut off) */
  .cal-bar{flex-wrap:wrap;padding:16px 16px 12px}
  .cal-bar .cal-nav{width:100%;margin-left:0;flex-wrap:nowrap}
  .cal-bar .cal-nav [data-cal-week="-1"]{margin-left:auto}
}
@media (pointer:coarse){
  .cal-bar .btn{height:var(--h-ctl)} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
  .cal-bar .icon-btn{width:var(--h-touch);height:var(--h-touch)}
  #bookings .bk-bar>.btn{height:var(--h-ctl)}
}
@media (prefers-reduced-motion:reduce){
  .cal-bar .btn:active,#bookings .bk-bar>.btn:active{scale:1}
}

/* batch 3 (15 Oct): the filters, "Booking settings" and "Add booking" are one bar */
#bookings .bk-bar{flex-wrap:wrap;align-items:center;margin-bottom:14px}
#bookings .bk-bar>.bk-f{margin:0 auto 0 0}

/* 27 Oct 2026 (approved mockup, "Calendar Google mockup"): a change made in Google Calendar, shown where the owner looks.
   The chip: deleted in Google and waiting its 10 minutes (faded, struck through), or moved in Google (dashed amber, the
   "needs you" look "To confirm" has). The appointment sheet: one box with what happened and the choices; the amber
   "you" wash when it needs the owner, a plain raised box when it's only telling. Tokens only, no new colours. */
.ev.gcx,.ev.gcx:not(.past):not(.req){background:transparent;border:1px dashed var(--line-strong);opacity:.7}
.ev.gcx::before{background:var(--line-strong)}
.ev.gcx .ev-t b{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-2)}
.ev.gcx:not(.past) .ev-s{color:var(--ink-3)}
.ev.gmv,.ev.gmv:not(.past):not(.req){border:1px dashed var(--you-dot);background:var(--you-bg-strong)}
.ev.gmv::before{background:var(--you-dot)}
.gc{margin-top:16px;padding:12px 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--raise)}
.gc.you{background:var(--st-you-wash);border-color:transparent}
.gc-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.gc-h svg{flex:none;width:16px;height:16px;color:var(--ink-2)}
.gc.you .gc-h svg{color:var(--you-ink)}
.gc-t{margin-inline-start:auto;font-size:var(--fs-meta);font-weight:500;color:var(--you-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gc p{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.gc p b{font-weight:500;color:var(--ink)}
.gc .acts{margin-top:12px;flex-wrap:wrap}
.gc .gc-s{margin-top:8px;font-size:var(--fs-meta);color:var(--ink-3)}