/* ============================================================
   Pipezoom - css/board.css, the stylesheet of My Calendar's board.

   The top strip, the legend, the time grid with its rail, day headers
   and their Routes press, cards, the NOW line, a card's drag, the
   marking sheet and the sharing sheet. Every rule is scoped under .rb.
   The 7 kind colors are the board's own, light by default and stepped
   for the dark themes; the page colors read the shell's tokens.
   Defines the --rb- tokens and the classes under .rb.
   Notes: docs/notes/app.pipezoom.com/css/board.css.md
   ============================================================ */

.rb{
  --rb-paper:var(--surface-page);
  --rb-surface:var(--surface-raised);
  --rb-rule:var(--line);
  --rb-ink:var(--ink);
  --rb-ink-2:var(--ink-soft);
  --rb-ink-3:var(--ink-faint);
  --rb-door:#2A5A82;
  --rb-prio:#4B3A76;
  --rb-call:#1A2130;
  --rb-maybe:#DCE3EB;
  --rb-maybe-ink:#394353;
  --rb-cluster:#2F6B5E;
  --rb-backup:#8E3A4E;
  --rb-appt:#0F5C6B;
  --rb-on-dark:#FFFFFF;
  --rb-on-dark-2:#A9B6CC;
  --rb-tick:#15603F;
  --rb-tick-bg:#FFFFFFEB;
  --rb-ring:#FFFFFF8C;
  --rb-vis:7;
  --rb-gap:8px;
  color:var(--rb-ink);
  font-size:14px;
  line-height:1.4;
}
/* The dark theme is the html tag with no data-theme, and black is dark with a black page. */
html:not([data-theme]) .rb,
html[data-theme="dark"] .rb,
html[data-theme="black"] .rb{
  --rb-door:#3D7BAC;
  --rb-prio:#6B57A0;
  --rb-call:#080C14;
  --rb-maybe:#26314A;
  --rb-maybe-ink:#CCD6E4;
  --rb-cluster:#3C8A78;
  --rb-backup:#B85B71;
  --rb-appt:#2A8E9F;
}
.rb *{min-width:0}

/* A public board drawn with no shell pads its own edges. */
.rb.rb-solo{padding:20px clamp(10px,1.4vw,22px) 40px}

/* header strip */
.rb .top{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:14px clamp(18px,2.5vw,40px);
  margin-bottom:14px;
}
.rb h1{
  margin:0;
  font-size:clamp(21px,2.4vw,30px);
  font-weight:700;letter-spacing:-0.025em;line-height:1.05;
}
.rb .dateline{margin:3px 0 0;color:var(--rb-ink-2);font-size:13px;font-weight:500}
.rb .rb-ro{margin-left:8px;font-size:11px;font-weight:700;color:var(--rb-ink-3)}
.rb .rb-weeks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rb .rb-step{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface-high);color:var(--ink);
  font-size:12px;font-weight:600;
}
.rb .rb-step:hover{background:var(--surface-hover);text-decoration:none}
.rb .tally{display:flex;gap:clamp(16px,2vw,32px)}
.rb .tally b{display:block;font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.rb .tally span{font-size:11px;color:var(--rb-ink-3);font-weight:500}

.rb .next{
  background:var(--rb-call);color:var(--rb-on-dark);
  border-radius:9px;padding:11px 16px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 14px;
  margin-left:auto;flex:1 1 320px;
}
.rb .next .t{font-size:20px;font-weight:700;letter-spacing:-0.02em}
.rb .next .n{font-size:15px;font-weight:600}
.rb .next .d{color:var(--rb-on-dark-2);font-size:12.5px;font-weight:400}
.rb .next .then{width:100%;opacity:.7}

.rb .rb-acts{display:flex;align-items:center;gap:8px;align-self:center}
.rb .rb-err{
  flex:1 1 100%;margin:0;padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--danger-wash);color:var(--ink);font-size:13px;
}
.rb .rb-empty{margin:0 0 14px;color:var(--rb-ink-2);font-size:14px}

.rb .legend{
  display:flex;flex-wrap:wrap;gap:7px 16px;
  margin:0 0 14px;font-size:12px;color:var(--rb-ink-2);
}
.rb .legend i{
  display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;font-style:normal;
}
.rb .k-door{background:var(--rb-door)}
.rb .k-prio{background:var(--rb-prio)}
.rb .k-call{background:var(--rb-call)}
.rb .k-cluster{background:var(--rb-cluster)}
.rb .k-backup{background:var(--rb-backup)}
.rb .k-appt{background:var(--rb-appt)}
.rb .k-maybe{background:var(--rb-maybe)}

/* board */
.rb .board{
  --rb-colw:calc((100% - 46px - (var(--rb-vis) + 1) * var(--rb-gap)) / var(--rb-vis));
  display:grid;
  grid-template-columns:46px repeat(var(--rb-cols,8), var(--rb-colw));
  column-gap:var(--rb-gap);
  row-gap:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-left:46px;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--rb-rule) transparent;
}
.rb .board::-webkit-scrollbar{height:9px}
.rb .board::-webkit-scrollbar-track{background:transparent}
.rb .board::-webkit-scrollbar-thumb{background:var(--rb-rule);border-radius:5px}
.rb .board::-webkit-scrollbar-thumb:hover{background:var(--rb-ink-3)}

.rb .daybg{
  background:var(--rb-surface);
  border-radius:10px;
  z-index:0;
}
.rb .rowline{
  height:1px;
  background:var(--rb-rule);
  align-self:start;
  opacity:.3;
  z-index:1;
}
.rb .rowline.hour{opacity:.75}
.rb .tlabel.hour{color:var(--rb-ink-2);font-weight:700}
.rb .tlabel.half{font-size:9px;opacity:.65}
.rb .tlabel{
  position:sticky;
  left:0;
  background:var(--rb-paper);
  font-size:10.5px;
  font-weight:600;
  color:var(--rb-ink-3);
  font-variant-numeric:tabular-nums;
  text-align:right;
  padding:5px 7px 0 0;
  align-self:start;
  white-space:nowrap;
  z-index:3;
}
.rb .dhead{
  padding:0 8px 8px;
  margin-bottom:6px;
  border-bottom:1px solid var(--rb-rule);
  scroll-snap-align:start;
  z-index:2;
}
.rb .dhead.corner{position:sticky;left:0;background:var(--rb-paper);border-bottom:0;z-index:4}
/* The Routes press of a day header, at its top right; the header's words keep clear of it. */
.rb .dhead{position:relative}
.rb .dhead:has(.rb-day-route){padding-right:38px}
.rb .rb-day-route{
  position:absolute;top:-2px;right:4px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:var(--surface-high);color:var(--ink);
  font-size:13px;text-decoration:none;
}
.rb .rb-day-route:hover{background:var(--surface-hover);text-decoration:none}
.rb .rb-day-route:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rb .dow{font-size:11.5px;font-weight:700;letter-spacing:0.05em;line-height:1.2}
.rb .dnum{font-size:12px;color:var(--rb-ink-3);font-weight:500;margin-top:1px}
.rb .today .dow{color:var(--rb-door)}
.rb .badge{
  display:inline-block;background:var(--rb-door);color:var(--rb-on-dark);
  font-size:9px;font-weight:700;letter-spacing:0.05em;
  padding:2px 6px;border-radius:9px;margin-left:5px;vertical-align:1px;
}

.rb .ev{
  background:var(--rb-door);color:var(--rb-on-dark);
  border-radius:7px;
  padding:5px 8px 6px;
  margin:3px 6px 4px;
  z-index:2;
}
.rb a.ev{display:block;text-decoration:none;color:var(--rb-on-dark);-webkit-tap-highlight-color:transparent}
.rb a.ev.maybe{color:var(--rb-maybe-ink)}
.rb a.ev:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rb .ev.prio{background:var(--rb-prio)}
.rb .ev.cluster{background:var(--rb-cluster)}
.rb .ev.backup{background:var(--rb-backup)}
.rb .ev.appt{background:var(--rb-appt)}
.rb a.ev.appt{color:var(--rb-on-dark)}
.rb a.ev.backup{color:var(--rb-on-dark)}
.rb a.ev.cluster{color:var(--rb-on-dark)}
.rb .nowline{height:2px;background:var(--rb-prio);align-self:start;z-index:5;position:relative}
.rb .nowline::after{content:"NOW";position:absolute;left:2px;top:-8px;font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--rb-on-dark);background:var(--rb-prio);padding:1px 5px;border-radius:7px}
.rb .ev.tight{padding:3px 7px 4px;margin:2px 6px 2px}
.rb .ev.tight .nm{font-size:11.5px;line-height:1.15}
.rb .ev.tight .mt{font-size:9.5px;line-height:1.25;margin-top:1px}
.rb .ev.tight .tm,.rb .ev.tight .amt{font-size:9.5px}
.rb .ev .ct{font-size:10px;font-weight:700;opacity:.9;margin-top:3px}
.rb .ev.call{background:var(--rb-call)}
.rb .ev.maybe{background:var(--rb-maybe);color:var(--rb-maybe-ink)}
/* In a narrow column the revenue drops under the time. */
.rb .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 6px}
.rb .tm{font-size:10.5px;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb .amt{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb .nm{font-size:12.5px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;margin-top:1px;overflow-wrap:anywhere}
.rb .mt{font-size:10.5px;line-height:1.32;opacity:.87;margin-top:2px;overflow-wrap:anywhere}

@media (max-width:1280px){
  .rb{--rb-vis:6}
}
@media (max-width:960px){
  .rb{--rb-vis:4}
}
@media (max-width:760px){
  .rb{--rb-vis:3;--rb-gap:6px}
  .rb.rb-solo{padding:16px 8px 32px}
  .rb .next{margin-left:0}
  .rb .board{--rb-colw:calc((100% - 40px - (var(--rb-vis) + 1) * var(--rb-gap)) / var(--rb-vis));
         grid-template-columns:40px repeat(var(--rb-cols,8), var(--rb-colw));
         scroll-padding-left:40px}
  .rb .tlabel{font-size:9.5px;padding-right:5px}
  .rb .dhead{padding:0 5px 7px}
  .rb .ev{padding:5px 6px 6px;margin:3px 4px 5px}
  .rb .nm{font-size:12px}
  .rb .mt{font-size:10px}
}
@media print{
  .rb.rb-solo{padding:0}
  .rb .board{overflow:visible;--rb-colw:1fr;grid-template-columns:40px repeat(var(--rb-cols,8),minmax(0,1fr));column-gap:4px}
  .rb .ev{break-inside:avoid}
}

/* marks on a card */
.rb .ev{position:relative;-webkit-touch-callout:none}
.rb .ev .tick{
  position:absolute;top:4px;right:5px;
  width:15px;height:15px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--rb-tick-bg);color:var(--rb-tick);font-size:9px;
}
.rb .ev.visited .tick{display:flex}
.rb .ev.visited .row{padding-right:16px}
.rb .ev.visited{box-shadow:inset 0 0 0 2px var(--rb-ring)}
.rb .ev.maybe.visited .tick{background:var(--rb-tick);color:var(--rb-on-dark)}
/* Because CSS reads the space after a hex escape as the escape's end, 2 spaces print 1. */
.rb .ev.noted .mt::after{content:" \00b7  note";font-weight:600;opacity:.75}

/* a card's drag (js/boarddrag.js): the card left in place fades, the ghost follows the pointer, and the
   band it would land in is filled */
.rb .ev.rb-lift{opacity:.35}
.rb .ev.rb-moving{opacity:.6}
.rb .ev.rb-ghost{
  position:fixed;z-index:95;margin:0;pointer-events:none;
  opacity:.94;box-shadow:var(--shadow-overlay);
}
.rb .rb-drop{background:var(--accent-wash);border-radius:7px;margin:2px 4px;z-index:1;pointer-events:none}
.rb.rb-dragging,.rb.rb-dragging *{-webkit-user-select:none;user-select:none;cursor:grabbing}

/* the sheets */
.rb .sheet-wrap{position:fixed;inset:0;z-index:90;display:none}
.rb .sheet-wrap.open{display:block}
.rb .sheet-bg{position:absolute;inset:0;background:var(--scrim)}
.rb .sheet{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(460px,100%);
  background:var(--rb-surface);color:var(--rb-ink);
  border-radius:16px 16px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-overlay);
  max-height:88vh;overflow-y:auto;
}
@media (min-width:640px){
  .rb .sheet{top:50%;bottom:auto;transform:translate(-50%,-50%);border-radius:14px}
}
.rb .sheet-head{margin-bottom:14px}
.rb .sheet-title{font-size:18px;font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.rb .sheet-sub{font-size:13px;color:var(--rb-ink-3);font-weight:500;margin-top:3px}
.rb .sheet-l{display:block;font-size:12px;font-weight:700;color:var(--rb-ink-2);margin:12px 0 6px}
.rb .sheet-note{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.rb .sheet textarea,
.rb .sheet input[type=date],
.rb .sheet input[type=time],
.rb .picker input[type=text],
.rb .rb-link input[type=text]{
  width:100%;box-sizing:border-box;
  font:inherit;font-size:15px;line-height:1.45;
  padding:11px 13px;border:1px solid var(--rb-rule);border-radius:10px;
  background:var(--rb-paper);color:var(--rb-ink);
}
.rb .sheet textarea{resize:vertical}
.rb .sheet textarea:focus,
.rb .sheet input:focus,
.rb .picker input[type=text]:focus{outline:2px solid var(--accent);outline-offset:-1px}
.rb .ocs{display:flex;flex-wrap:wrap;gap:6px}
.rb .oc{
  min-height:40px;padding:0 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface-high);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.rb .oc:hover{background:var(--surface-hover)}
.rb .oc[aria-pressed="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse)}
.rb .sheet-when{display:flex;gap:8px;margin-top:8px}
.rb .sheet-when > *{flex:1 1 0}
.rb .sheet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rb .sheet-actions .btn-ghost,.rb .sheet-actions .btn-go,.rb .sheet-actions .btn-stop{
  flex:1 1 auto;text-align:center;text-decoration:none;
  font:inherit;font-size:15px;font-weight:600;
  padding:12px 10px;border-radius:10px;border:0;cursor:pointer;
}
.rb .btn-ghost{background:var(--surface-high);color:var(--ink)}
.rb .btn-ghost:hover{background:var(--surface-hover);text-decoration:none}
.rb .btn-go{background:var(--accent-strong);color:var(--ink-inverse)}
.rb .btn-go:hover{background:var(--accent-hover)}
.rb .btn-go:disabled{opacity:.5;cursor:default}
.rb .btn-stop{background:var(--danger-wash);color:var(--ink)}
.rb .sheet-msg{font-size:12.5px;color:var(--rb-ink-2);margin-top:10px;min-height:1em}

/* sharing sheet */
.rb .gear{
  align-self:center;
  width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--rb-surface);color:var(--rb-ink-2);
  border:0;border-radius:10px;cursor:pointer;font-size:17px;
}
.rb .gear:hover{color:var(--rb-ink)}
.rb .gear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.rb .pick{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;margin-bottom:8px;
  background:var(--rb-paper);border-radius:10px;cursor:pointer;
}
.rb .pick.off{cursor:default;opacity:.6}
.rb .pick input{flex:0 0 19px;width:19px;height:19px;accent-color:var(--accent);margin:1px 0 0}
.rb .pick b{display:block;font-size:14.5px;font-weight:600}
.rb .pick em{display:block;font-style:normal;font-size:12px;color:var(--rb-ink-3);margin-top:2px}
.rb .pick .rb-plan{display:inline;margin:0 0 0 8px;font-size:11px;font-weight:700;color:var(--rb-ink-2)}

/* the public address under Anyone with the link, with its Copy press */
.rb .rb-link{margin:4px 0 2px}
.rb .rb-link .sheet-l{margin-top:4px}
.rb .rb-link-row{display:flex;gap:8px}
.rb .rb-link-row input{flex:1 1 auto}
.rb .rb-link-row .btn-ghost{
  flex:0 0 auto;font:inherit;font-size:14px;font-weight:600;
  padding:0 16px;border-radius:10px;border:0;cursor:pointer;
}

.rb .picker{margin:4px 0 2px}
.rb .hits{margin-top:6px}
.rb .hit{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  width:100%;text-align:left;
  font:inherit;font-size:14px;
  padding:10px 12px;border:0;border-radius:8px;
  background:var(--rb-paper);color:var(--rb-ink);cursor:pointer;margin-bottom:4px;
}
.rb .hit:hover{background:var(--surface-hover)}
.rb .hit em{font-style:normal;font-size:12px;color:var(--rb-ink-3)}
.rb .hit-none{font-size:13px;color:var(--rb-ink-3);padding:8px 4px}
.rb .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rb .chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-strong);color:var(--ink-inverse);
  font-size:13px;font-weight:600;
  padding:6px 8px 6px 11px;border-radius:20px;
}
.rb .chip button{
  font:inherit;font-size:16px;line-height:1;
  background:transparent;border:0;color:var(--ink-inverse);opacity:.8;
  padding:0 2px;cursor:pointer;
}
.rb .chip button:hover{opacity:1}