/* =====================================================================
   PLAN > WEEK: the time grid (design batch C). Classes pc-cal*, pc-calbar*, pc-minseg.
   Tokens from paradise.css. No Turtles face in here. Also the tutorial's calendar page.
   ===================================================================== */

.pc {
  --cal-hour: rgba(255,255,255,.085);
  --cal-half: rgba(255,255,255,.035);
  --cal-sep: rgba(255,255,255,.06);
  --cal-today: rgba(255,210,31,.035);
  --cal-slate: #232C39;
  --cal-slate-ink: #EEF2F7;
  --cal-slate-edge: transparent;
  --cal-stripe: #FFD21F;
  --cal-stripe-quiet: #5B6880;
  --cal-meal: rgba(255,255,255,.05);
  --cal-meal-ink: #98A2B3;
  --cal-person: rgba(185,193,206,.42);
  --cal-person-ink: #C3CAD6;
  --cal-red: #FF4136;
  --cal-head-bg: var(--pc-ground);
}
.pc.pc-light {
  --cal-hour: rgba(10,12,16,.13);
  --cal-half: rgba(10,12,16,.055);
  --cal-sep: rgba(10,12,16,.09);
  --cal-today: rgba(255,210,31,.09);
  --cal-slate: #FFFFFF;
  --cal-slate-ink: #0A0C10;
  --cal-slate-edge: #AEB6C4;
  --cal-stripe: #0A0C10;
  --cal-stripe-quiet: #8D97A8;
  --cal-meal: rgba(10,12,16,.055);
  --cal-meal-ink: #4A5363;
  --cal-person: rgba(10,12,16,.4);
  --cal-person-ink: #333B48;
  --cal-red: #D92B20;
}

/* ---------- the week controls: range, arrows, 3-DAY / 5-DAY ---------- */
.pc-calbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.pc-calbar__range { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pc-calbar__range b { font: 800 15px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 0 4px; }
.pc-calbar__arrow { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--pc-ink-2); }
.pc-calbar__arrow:disabled { opacity: .3; }
.pc-calbar__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.pc-minseg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-light .pc-minseg { box-shadow: inset 0 0 0 1.5px #0A0C10; }
.pc-minseg a { position: relative; display: flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px; font: 800 13px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-minseg a::after { content: ""; position: absolute; inset: -8px -1px; } /* 44px tap area around the 28px pill */
.pc-minseg a.is-on { background: var(--pc-ink); color: var(--pc-ground); }

/* ---------- the scroller ---------- */
.pc-cal {
  position: relative; flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: var(--rail);
  scrollbar-width: none;
  --head-h: 60px;
}
.pc-cal.is-compact { --head-h: 56px; }
.pc-cal::-webkit-scrollbar { display: none; }
.pc-cal.is-compact { scroll-snap-type: none; }
.pc-cal.is-demo { flex: none; overflow: hidden; border-radius: 10px; border: var(--pc-border); }
.pc-cal__sheet { position: relative; }

/* headers: sticky while the grid scrolls down */
.pc-cal__heads { position: sticky; top: 0; z-index: 6; display: flex; background: var(--cal-head-bg); box-shadow: 0 1px 0 var(--pc-line); }
.pc-cal.is-demo .pc-cal__heads { --cal-head-bg: var(--pc-surface); }
.pc-cal__corner { position: sticky; left: 0; z-index: 2; flex: none; width: var(--rail); background: var(--cal-head-bg); }
.pc-cal__head { flex: none; width: var(--col); height: var(--head-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; scroll-snap-align: start; scroll-snap-stop: always; color: var(--pc-ink-2); }
.pc-cal__wd { font: 700 12px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-cal__dn { position: relative; display: flex; align-items: center; justify-content: center; }
.pc-cal__dn b { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font: 800 23px/1 var(--pc-font-display); color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.pc-cal__lvl { position: absolute; left: calc(100% + 1px); top: 50%; transform: translateY(-50%); padding: 3px 4px 2px; border-radius: 4px; font: 800 10.5px/1 var(--pc-font-display); font-style: normal; letter-spacing: .04em; color: var(--pc-ink-2); box-shadow: inset 0 0 0 1px var(--pc-line-strong); }
.pc-cal__head.is-today .pc-cal__wd { color: var(--pc-accent-ink); }
.pc-cal__head.is-today .pc-cal__dn b { background: var(--pc-accent); color: #0A0C10; box-shadow: inset 0 0 0 1.5px var(--pc-keyline); }
.pc-cal__head.is-today .pc-cal__lvl { background: #0A0C10; color: #FFD21F; box-shadow: inset 0 0 0 1px #FFD21F; }
.pc-cal__head.is-past .pc-cal__dn b { color: var(--pc-ink-3); }
.pc-cal.is-compact .pc-cal__dn b { width: 30px; height: 30px; font-size: 20px; }
.pc-cal.is-compact .pc-cal__wd { font-size: 11px; letter-spacing: .08em; }
.pc-cal.is-compact .pc-cal__lvl { font-size: 9.5px; padding: 2px 3px 1px; }

/* the body: the rail on the left stays put while the days swipe */
.pc-cal__body { position: relative; display: flex; }
.pc-cal__rail { position: sticky; left: 0; z-index: 5; flex: none; width: var(--rail); background: var(--cal-head-bg); }
.pc-cal.is-demo .pc-cal__rail { background: var(--pc-surface); }
.pc-cal__hr { position: absolute; right: 7px; transform: translateY(-50%); font: 700 11px/1 var(--pc-font-display); letter-spacing: .04em; color: var(--pc-ink-3); white-space: nowrap; }
.pc-cal__nowtag { position: absolute; right: 3px; transform: translateY(-50%); padding: 2px 4px 1px; border-radius: 4px; background: var(--cal-red); color: #FFF; font: 800 11px/1 var(--pc-font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.pc-cal__cols { position: relative; display: flex; flex: none; }
.pc-cal__lines { position: absolute; left: 0; right: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--cal-hour) 0 1px, transparent 1px),
    linear-gradient(var(--cal-half) 0 1px, transparent 1px);
  background-size: 100% var(--hour), 100% var(--hour);
  background-position: 0 0, 0 calc(var(--hour) / 2);
  border-bottom: 1px solid var(--cal-hour);
}
.pc-cal__break { position: absolute; left: 0; right: 0; height: 6px; pointer-events: none; opacity: .5;
  background: linear-gradient(135deg, transparent 33%, var(--pc-line-strong) 33% 43%, transparent 43%) 0 0 / 8px 6px repeat-x,
              linear-gradient(45deg, transparent 57%, var(--pc-line-strong) 57% 67%, transparent 67%) 0 0 / 8px 6px repeat-x; }
.pc-cal__col { position: relative; flex: none; width: var(--col); box-shadow: inset 1px 0 0 var(--cal-sep); }
.pc-cal__col.is-today { background: var(--cal-today); }

/* ---------- blocks ---------- */
.pc-cal__blk {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-width: 0;
  padding: 2px 3px 2px 7px; border-radius: 6px; overflow: hidden; text-align: left; color: var(--cal-slate-ink);
  background: var(--cal-slate); box-shadow: inset 3px 0 0 var(--cal-stripe-quiet), inset 0 0 0 1px var(--cal-slate-edge);
}
.pc-cal__blk.is-scored { box-shadow: inset 3px 0 0 var(--cal-stripe), inset 0 0 0 1px var(--cal-slate-edge); }
.pc-cal__blk.is-one { justify-content: center; padding-top: 0; padding-bottom: 0; }
.pc-cal__t {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal;
  font: 800 13px/14px var(--pc-font-display); letter-spacing: .02em; text-transform: uppercase;
}
.pc-cal__t.is-one { display: block; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.pc-cal__tico { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.pc-cal__real { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.pc-cal__then { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font: 800 13px/14px var(--pc-font-display); letter-spacing: .02em; text-transform: uppercase; opacity: .72; }
.pc-cal__m { display: flex; align-items: center; gap: 3px; min-width: 0; font: 600 11.5px/13px var(--pc-font-display); letter-spacing: .03em; opacity: .78; white-space: nowrap; }
.pc-cal__m > span { overflow: hidden; text-overflow: ellipsis; }
.pc-cal__m.is-inline { flex: none; margin-left: 2px; }
.pc-cal__m.is-wrap { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.pc-cal__m.is-wrap svg { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.pc-cal__m.is-wrap > span { overflow: visible; }
.pc-cal__in { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-cal__blk.is-tall { overflow: visible; }
.pc-cal__blk.is-tall .pc-cal__in { position: sticky; top: calc(var(--head-h) + 3px); }
.pc-cal__row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pc-cal__faces { display: inline-flex; flex: none; padding-left: 5px; }
.pc-cal__faces img, .pc-cal__faces i { display: block; margin-left: -6px; border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 1.5px var(--cal-head-bg); }
.pc-cal__blk:not(.is-one) .pc-cal__faces { margin-bottom: 2px; }

/* leave the house: the big moments */
.pc-cal__blk.is-exc { background: #FFD21F; color: #0A0C10; box-shadow: inset 3px 0 0 #1B0E22, inset 0 0 0 1.5px var(--pc-keyline); }
.pc-cal__blk.is-exc .pc-cal__m { opacity: .85; font-weight: 700; }
/* meals: a quiet band */
.pc-cal__blk.is-meal { background: var(--cal-meal); color: var(--cal-meal-ink); box-shadow: none; padding-left: 6px; }
.pc-cal__blk.is-meal .pc-cal__t { font-weight: 700; }
/* someone's own thing: outline only */
.pc-cal__blk.is-person { background: transparent; color: var(--cal-person-ink); box-shadow: inset 0 0 0 1px var(--cal-person); padding-left: 5px; }
.pc-cal__blk.is-person .pc-cal__t { font-weight: 700; }
/* over */
.pc-cal__blk.is-past { opacity: .45; }
.pc-cal__blk.is-past.is-exc { opacity: .5; }
.pc-light .pc-cal__blk.is-past { opacity: .5; }

/* the overview: smaller words */
.pc-cal.is-compact .pc-cal__blk { padding: 1px 3px 2px 6px; border-radius: 5px; }
.pc-cal.is-compact .pc-cal__t { font-size: 11px; line-height: 12.5px; letter-spacing: 0; }
.pc-cal.is-compact .pc-cal__then { font-size: 11px; line-height: 12.5px; letter-spacing: 0; }
.pc-cal.is-compact .pc-cal__m { font-size: 10.5px; line-height: 11.5px; letter-spacing: .03em; }
.pc-cal.is-compact .pc-cal__hr { right: 5px; font-size: 10.5px; letter-spacing: .02em; }
.pc-cal.is-compact .pc-cal__nowtag { right: 2px; font-size: 10px; padding: 2px 3px 1px; }

/* ---------- now: on top of everything ---------- */
.pc-cal__now { position: absolute; left: 0; right: 0; z-index: 4; height: 0; pointer-events: none; }
.pc-cal__nowfaint { position: absolute; left: 0; right: 0; top: -.5px; border-top: 1px solid var(--cal-red); opacity: .35; }
.pc-cal__nowbar { position: absolute; top: -1px; border-top: 2px solid var(--cal-red); }
.pc-cal__nowdot { position: absolute; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cal-red); box-shadow: 0 0 0 2px var(--cal-head-bg); }

/* ---------- legend: one line, three swatches ---------- */
.pc-cal__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 700 12px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-cal__legend i { width: 14px; height: 10px; border-radius: 3px; }
.pc-cal__legend i.is-exc { background: #FFD21F; box-shadow: inset 2px 0 0 #1B0E22, inset 0 0 0 1px var(--pc-keyline); }
.pc-cal__legend i.is-house { background: var(--cal-slate); box-shadow: inset 2px 0 0 var(--cal-stripe), inset 0 0 0 1px var(--cal-slate-edge); }
.pc-cal__legend i.is-meal { background: rgba(255,255,255,.14); }
.pc-light .pc-cal__legend i.is-meal { background: rgba(10,12,16,.1); }

/* ---------- PLAN in week mode: the grid fills the screen, edge to edge ---------- */
.pc-app .pc-body-area.pc-plan.is-week { overflow: hidden; padding-bottom: 0; }
.pc-plan.is-week .pc-cal { margin: 0 -16px; }