/* look14-calendar.css — v469 C · the calendar in Jetsy's own calendar look. Every rule under html:not(.nolook14).
   Joe, Fri 23 Oct 2026, 9:07pm: "Make 5 more upgrades please" (after v468's five; the same brief as v463 and v468: "make it look like a
   billion dollar crm … think of yourself as a world class software engineer"). The plan: /home/claude/tools/p469/PLAN.md, C.

   WHY: the Calendar card (board.js) was a week strip of outlined boxes, three outlined Week / Month / List buttons, and the day's things
   as red-outlined cards with a big icon on each. iOS Calendar is quieter and says more: a clean day strip (weekday small caps over the
   number, today a filled circle, small dots under the days that have things), a segmented control, a day drawn as a timeline (the time
   in a rail at the left, each thing a bar with a colored accent in its kind's color), a month grid of numbers and dots. This file does
   LAYOUT and the kind colors; the colors of buttons stay look13-actions.css's (B) and the coins look10's.
     1 · the strip: 7 day columns, weekday 11 px caps, the number 17 px in a 34 px circle — today filled orange with a white number, the
         picked day a ring; the icons under a day become dots, one per kind of thing, at most three (the markup's own cap);
     2 · Week / Month / List: an segmented control (one track, the picked segment raised); 36 px to the eye, 44 to a thumb;
     3 · the day: the heading 20 px, the counts 15 px quiet; each group of things (Overdue, Callbacks, On site …) ONE grouped surface with
         a 3 px accent down its left in the kind's color; a row = time rail (13 px tabular, the kind's icon under it) · name 17 px ·
         place 15 px quiet · the row's own buttons joined in one bar (same buttons, same handlers; the outer corners marked by
         look14-calendar.js when the bar takes two lines). Overdue is a red-accented list, not red-outlined cards;
     4 · Month: a 7 × 6 grid, 11 px weekday caps, numbers in circles (today filled orange, the picked day filled), dots under the days;
     5 · List: a day's heading 15 px with Today / Tomorrow in orange, the lines one grouped surface with hairlines and an accent;
     6 · an empty day: "Nothing on this day." centered and airy with a calendar glyph, "+ Add to calendar" a tinted capsule;
     7 · the phone-calendar blocks at the card's foot (calfeed, Google) as inset rows; Up next's visit cards on Today get the same
         accent (its kind's color down the left) and a time that reads as the rail's.
   One color per kind, the same on the dots, the rails, the group accents, the legend and Up next: job blue · estimate visit teal-blue ·
   yours indigo · callback orange · overdue red · new lead green · route purple · reservation pink. Dark and light (html.je-light: its own
   token values, which easy2's flip leaves alone). No animation or transition here (reduced motion has nothing to turn off).
   Off: localStorage nolook14 = 1 (html.nolook14) gives back v468's look exactly. The selectors carry #main#main so they beat look10/12's
   (#main, !important), compact-a's (#boardtoday) and board.js's inline rules at any class count. */

/* ---------------------------------------------------------------------------------------------------------- tokens -- */
html:not(.nolook14){
  --j14-grp:#162133; --j14-grp2:#1B2740; --j14-sep:rgba(255,255,255,.10); --j14-edge:rgba(255,255,255,.06);
  --j14-t1:#F5F7FB; --j14-t2:#A7B3C6; --j14-t3:#8794A8; --j14-press:rgba(255,255,255,.05);
  --j14-track:rgba(110,124,148,.24); --j14-on:#5B6A80; --j14-on-t:#FFFFFF; --j14-on-sh:0 3px 8px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.04);
  --j14-or:#FF6A1A; --j14-or-ink:#FFFFFF; --j14-sel:#F5F7FB; --j14-sel-ink:#06090F; --j14-ring:#F5F7FB;
  --j14-tint:#4BA3F5; --j14-tint-bg:rgba(75,163,245,.16);
  --j14-k-site:#4F9EFF; --j14-k-est:#5CC8E6; --j14-k-appt:#7D7AFF; --j14-k-due:#FFB259; --j14-k-late:#F25F5C; --j14-k-inn:#3ED598;
  --j14-k-route:#A58BFA; --j14-k-resv:#F2668B; --j14-k-done:#3ED598;
  --j14-sf:var(--j12-sf,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif);
}
html.je-light:not(.nolook14){
  --j14-grp:#F3F5F9; --j14-grp2:#FFFFFF; --j14-sep:rgba(52,64,84,.16); --j14-edge:rgba(10,20,40,.06);
  --j14-t1:#0B1220; --j14-t2:#5B6472; --j14-t3:#7C8594; --j14-press:rgba(0,0,0,.04);
  --j14-track:rgba(110,124,148,.12); --j14-on:#FFFFFF; --j14-on-t:#0B1220; --j14-on-sh:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
  --j14-or:#FF6A1A; --j14-or-ink:#FFFFFF; --j14-sel:#0B1220; --j14-sel-ink:#FFFFFF; --j14-ring:#0B1220;
  --j14-tint:#1F6FD1; --j14-tint-bg:rgba(31,111,209,.12);
  --j14-k-site:#1F6FD1; --j14-k-est:#1E9E92; --j14-k-appt:#5560D8; --j14-k-due:#D9822B; --j14-k-late:#D93B3B; --j14-k-inn:#1FA971;
  --j14-k-route:#7C5CD6; --j14-k-resv:#D93D68; --j14-k-done:#1FA971;
}
/* one color per kind, wherever the card draws it (the icons' own colors come from board.js's CAL1_CSS, plain .jce-e[data-k]) */
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=site]{color:var(--j14-k-site)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=est]{color:var(--j14-k-est)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=appt]{color:var(--j14-k-appt)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=due]{color:var(--j14-k-due)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=late]{color:var(--j14-k-late)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=inn]{color:var(--j14-k-inn)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=route]{color:var(--j14-k-route)}
html:not(.nolook14) body #main#main .jcal :is(.jce-e,.jce-i)[data-k=resv]{color:var(--j14-k-resv)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i,details.cmp-fold)[data-k=site],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-site"]{--j14-kc:var(--j14-k-site)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=est],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-est"]{--j14-kc:var(--j14-k-est)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=appt],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-appt"]{--j14-kc:var(--j14-k-appt)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=due],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-due"]{--j14-kc:var(--j14-k-due)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=late],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-late"]{--j14-kc:var(--j14-k-late)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=inn],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-inn"]{--j14-kc:var(--j14-k-inn)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=route],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-route"]{--j14-kc:var(--j14-k-route)}
html:not(.nolook14) body #main#main .jcal :is(.jct-i,.jcl-i)[data-k=resv],html:not(.nolook14) body #main#main .jcal details[data-fold="cal-resv"]{--j14-kc:var(--j14-k-resv)}

/* ------------------------------------------------------------------------------- 2 · Week / Month / List: a segmented control -- */
html:not(.nolook14) body #main#main .jcal .jc-mode{display:flex;gap:2px;margin:0 0 12px;padding:2px;border-radius:9px;background:var(--j14-track)}
html:not(.nolook14) body #main#main .jcal .jc-mb{position:relative;flex:1 1 0;min-height:36px;padding:0 8px;border:0!important;border-radius:7px!important;
  background:transparent!important;box-shadow:none!important;color:var(--j14-t1)!important;font:600 13px/18px var(--j14-sf)!important;letter-spacing:0;text-transform:none;
  text-shadow:none;-webkit-tap-highlight-color:transparent}
html:not(.nolook14) body #main#main .jcal .jc-mb::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}   /* 36 to the eye, 48 to a thumb */
html:not(.nolook14) body #main#main .jcal .jc-mb.on{background:var(--j14-on)!important;box-shadow:var(--j14-on-sh)!important;color:var(--j14-on-t)!important}
html:not(.nolook14) body #main#main .jcal .jc-mb:not(.on)+.jc-mb:not(.on)::after{content:"";position:absolute;left:-1.5px;top:9px;bottom:9px;width:1px;background:var(--j14-sep)}

/* ------------------------------------------------------------------------------------------------- 1 · the week strip -- */
html:not(.nolook14) body #main#main .jcal .jc-w{display:flex;align-items:center;gap:0;margin:0 -6px 8px}
html:not(.nolook14) body #main#main .jcal .jc-a{position:relative;flex:none;width:32px;min-height:44px;padding:0;border:0!important;border-radius:10px!important;
  background:none!important;box-shadow:none!important;color:var(--j14-t3)!important;font:400 24px/1 var(--j14-sf)!important;-webkit-tap-highlight-color:transparent}
html:not(.nolook14) body #main#main .jcal .jc-a::before{content:"";position:absolute;left:-6px;right:-6px;top:-2px;bottom:-2px}
html:not(.nolook14) body #main#main .jcal .jc-a:active{color:var(--j14-t1)!important}
html:not(.nolook14) body #main#main .jcal .jc-d7{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;min-width:0}
html:not(.nolook14) body #main#main .jcal .jc-d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:62px;
  margin:0;padding:4px 0 6px;border:0!important;border-radius:12px!important;background:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
html:not(.nolook14) body #main#main .jcal .jc-d:active{background:var(--j14-press)!important}
html:not(.nolook14) body #main#main .jcal .jc-dw{font:600 11px/13px var(--j14-sf)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--j14-t3)!important}
html:not(.nolook14) body #main#main .jcal .jc-d.now .jc-dw{color:var(--j14-or)!important}
html:not(.nolook14) body #main#main .jcal .jc-dn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:600 17px/1 var(--j14-sf)!important;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--j14-t1);text-shadow:none}
html:not(.nolook14) body #main#main .jcal .jc-d.now .jc-dn{background:var(--j14-or);color:var(--j14-or-ink)}
html:not(.nolook14) body #main#main .jcal .jc-d.sel:not(.now) .jc-dn{box-shadow:inset 0 0 0 1.5px var(--j14-ring)}
/* the things on a day: dots, one per kind (the markup draws at most three kinds and a +N; the +N is not drawn) */
html:not(.nolook14) body #main#main .jcal .jc-d .jc-dots{display:flex;align-items:center;justify-content:center;gap:3px;height:6px;min-height:0;margin:0}
html:not(.nolook14) body #main#main .jcal .jc-d .jce-dots{display:flex;gap:3px;align-items:center;justify-content:center;line-height:0}
html:not(.nolook14) body #main#main .jcal .jc-d .jce-e{display:block;width:5px;height:5px;font-size:0;line-height:0;border-radius:50%;background:currentColor;vertical-align:0}
html:not(.nolook14) body #main#main .jcal .jc-d .jce-e>svg{display:none}
html:not(.nolook14) body #main#main .jcal .jc-d .jce-n{display:none}

/* ------------------------------------------------------------------------------------------------- 4 · the month grid -- */
html:not(.nolook14) body #main#main .jcal .jc-mh{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;font:600 17px/22px var(--j14-sf)!important;
  letter-spacing:-.01em;color:var(--j14-t1)!important}
html:not(.nolook14) body #main#main .jcal .jc-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0 -6px 12px}
html:not(.nolook14) body #main#main .jcal .jc-mg .jc-dw{text-align:center;padding:2px 0 6px}
html:not(.nolook14) body #main#main .jcal .jc-md{min-height:46px;padding:2px 0 4px;gap:2px}
html:not(.nolook14) body #main#main .jcal .jc-md .jc-dn{width:32px;height:32px;font-size:17px!important}
html:not(.nolook14) body #main#main .jcal .jc-md.sel:not(.now) .jc-dn{box-shadow:none;background:var(--j14-sel);color:var(--j14-sel-ink)}   /* in the month the picked day is filled */
html:not(.nolook14) body #main#main .jcal .jc-md.out{opacity:.3}
html:not(.nolook14) body #main#main .jcal .jc-md.out .jc-dots{visibility:hidden}

/* ------------------------------------------------------------------------------ 3 · the day: heading, counts, Share the day -- */
html:not(.nolook14) body #main#main .jcal .jc-hd{margin:14px 0 0!important;font:700 20px/25px var(--j14-sf)!important;letter-spacing:-.02em;color:var(--j14-t1)}
html:not(.nolook14) body #main#main .jcal .jct-c{margin:2px 0 10px!important;font:400 15px/20px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j14-t2)!important}
html:not(.nolook14) body #main#main .jcal .jct-c span{font:inherit!important;letter-spacing:0!important;text-transform:none!important;color:inherit!important}
html:not(.nolook14) body #main#main .jcal .jcs-acts{margin:0 0 4px!important}

/* each group of things: the header a quiet row (name in the kind's color, the count pill, the chevron), the rows ONE grouped surface
   with a 3 px accent down its left in the kind's color */
html:not(.nolook14) body #main#main .jcal details.cmp-fold{margin:6px 0 0!important;padding:0;border:0;background:none!important;box-shadow:none!important}
html:not(.nolook14) body #main#main .jcal details.cmp-fold>summary.cmp-sum{min-height:44px;margin:0;padding:4px 4px 4px 2px!important;border:0!important;border-radius:10px;
  background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not(.nolook14) body #main#main .jcal details.cmp-fold>summary.cmp-sum:active{background:var(--j14-press)!important}
html:not(.nolook14) body #main#main .jcal details.cmp-fold>summary.cmp-sum .cmp-l{font:600 17px/22px var(--j14-sf)!important;letter-spacing:-.01em!important;color:var(--j14-kc,var(--j14-t1))!important}
html:not(.nolook14) body #main#main .jcal details.cmp-fold>.cmp-fb{position:relative;margin:0!important;padding:0!important;border-radius:16px;background:var(--j14-grp);
  box-shadow:inset 0 0 0 1px var(--j14-edge);overflow:hidden}
html:not(.nolook14) body #main#main .jcal details.cmp-fold>.cmp-fb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--j14-kc,var(--j14-t3));z-index:1;pointer-events:none}

/* a row: [ time rail · the kind's icon ] [ name / place ] and, under those, its bar of buttons */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i{position:relative;display:grid!important;grid-template-columns:60px minmax(0,1fr)!important;grid-template-rows:auto auto;
  column-gap:0!important;row-gap:0!important;align-items:start!important;min-height:64px;margin:0!important;padding:11px 12px 11px 3px!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;box-sizing:border-box;overflow:visible}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i+.jc-r.jct-i::before{content:"";position:absolute;left:60px;right:0;top:0;height:1px;background:var(--j14-sep);
  transform:scaleY(.5);transform-origin:0 0;pointer-events:none}
/* the rail: the time at the top (absolute, out of the head line), the kind's icon under it */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-k{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:auto;flex:none;min-width:0;margin:0;padding:24px 0 0;font-size:0;line-height:0;color:var(--j14-t3);justify-self:stretch;align-self:start}
/* fix after the assembler's look: the icon's room under the time is the default (so a row drawn a moment before the script marks
   it can never put the alarm on top of "Oct 20"); only a row that has no time at all lifts the icon level with the name — the CSS
   asks :has() itself and the script's data-j14t mark is the fallback for an older Safari */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i:not([data-j14t]):not(:has(.jct-t))>.jc-k{padding-top:3px}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i[data-j14t]>.jc-k{padding-top:24px}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-k .jce-e{display:block;width:16px;height:16px;font-size:16px;line-height:1}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-k .jce-e>svg{display:block;width:16px;height:16px}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-k i{display:none}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-t{position:absolute;left:6px;top:12px;width:52px;margin:0;padding:0;font:500 13px/18px var(--j14-sf)!important;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em!important;text-transform:none;color:var(--j14-t2)!important;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i.late .jct-t{color:var(--j14-k-late)!important}
/* the words */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jct-b{grid-column:2;grid-row:1;min-width:0;flex:none;width:auto;padding:0;margin:0}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-h{display:flex;align-items:center;gap:8px;min-width:0;min-height:22px}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-h .jc-tick{align-self:center;margin:-11px 0!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-n{display:block;flex:1 1 auto;min-width:0;font:600 17px/22px var(--j14-sf)!important;letter-spacing:-.01em;
  color:var(--j14-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i :is(.jct-a,.jct-w){margin:2px 0 0!important;font:400 15px/20px var(--j14-sf)!important;letter-spacing:0;color:var(--j14-t2)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-a a{color:var(--j14-tint);text-decoration:none;font-weight:500}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jct-wl{font:600 12px/16px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j14-t3)}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jc-pill{display:none}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .jc-done{opacity:.55}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i .rt-vt{font:600 12px/16px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important;padding:1px 6px;border-radius:6px;
  background:var(--j14-tint-bg)!important;color:var(--j14-k-route)!important}
/* the row's buttons: the same buttons, joined in ONE bar under the words (the colors stay look13-actions.css's); when the words
   don't fit on one line the bar takes a second row and look14-calendar.js marks the outer corners (data-j14c = tl tr bl br) */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns{grid-column:2!important;grid-row:2!important;position:relative;display:flex!important;flex-wrap:wrap!important;
  align-items:stretch!important;gap:1px!important;width:auto!important;min-width:0!important;margin:8px 0 0!important;padding:0!important;min-height:44px;border-radius:12px}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>*{flex:1 0 auto!important;max-width:100%;min-width:0!important;margin:0!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>:is(.b,a,button),
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>summary{position:relative!important;display:flex!important;align-items:center!important;
  justify-content:center!important;gap:6px!important;width:auto!important;min-width:0!important;min-height:44px!important;height:auto!important;padding:0 12px!important;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;font:600 15px/20px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;overflow:hidden;text-decoration:none;box-sizing:border-box;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:auto!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>:is(.b,a,button) svg{flex:none;width:17px!important;height:17px!important}
/* the four outer corners: before the script has measured (or without it) the first button's left and the last one's right */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns:not([data-j14b])>:first-child:is(.b,a,button),
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns:not([data-j14b])>details.cmp-more:first-child>summary{border-top-left-radius:12px!important;border-bottom-left-radius:12px!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns:not([data-j14b])>:last-child:is(.b,a,button),
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns:not([data-j14b])>details.cmp-more:last-child>summary{border-top-right-radius:12px!important;border-bottom-right-radius:12px!important}
/* … measured: the corners where each button really sits */
html:not(.nolook14) body #main#main .jcal [data-j14b]>[data-j14c~="tl"]:is(.b,a,button),html:not(.nolook14) body #main#main .jcal [data-j14b]>details[data-j14c~="tl"]>summary{border-top-left-radius:12px!important}
html:not(.nolook14) body #main#main .jcal [data-j14b]>[data-j14c~="tr"]:is(.b,a,button),html:not(.nolook14) body #main#main .jcal [data-j14b]>details[data-j14c~="tr"]>summary{border-top-right-radius:12px!important}
html:not(.nolook14) body #main#main .jcal [data-j14b]>[data-j14c~="bl"]:is(.b,a,button),html:not(.nolook14) body #main#main .jcal [data-j14b]>details[data-j14c~="bl"]>summary{border-bottom-left-radius:12px!important}
html:not(.nolook14) body #main#main .jcal [data-j14b]>[data-j14c~="br"]:is(.b,a,button),html:not(.nolook14) body #main#main .jcal [data-j14b]>details[data-j14c~="br"]>summary{border-bottom-right-radius:12px!important}
/* "More": a segment of the bar. Open, it takes the bar's last row and its buttons follow under it, two by two (in the flow, as before) */
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more{position:static!important;flex:1 0 auto!important;min-width:0!important;margin:0!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more[open]{flex:1 0 100%!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>summary{width:100%!important;list-style:none}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>summary::-webkit-details-marker{display:none}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>.cmp-mb{position:static!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;
  margin:8px 0 0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>.cmp-mb>:is(.b,a,button){flex:1 1 calc(50% - 4px)!important;min-height:44px!important;margin:0!important;
  border-radius:12px!important;font:600 15px/20px var(--j14-sf)!important;white-space:normal;text-align:center}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>.cmp-mb>.b.danger{flex:1 1 100%!important}
html:not(.nolook14) body #main#main .jcal .jc-r.jct-i>.jc-btns>details.cmp-more>.cmp-mb>:not(.b):not(a):not(button){flex:1 1 100%}

/* ------------------------------------------------------------------------------------------------------ 6 · an empty day -- */
html:not(.nolook14) body #main#main .jcal .jc-none{margin:12px 0 10px;padding:26px 16px 24px;border:0!important;border-radius:16px;background:var(--j14-grp);
  box-shadow:inset 0 0 0 1px var(--j14-edge);text-align:center;font:400 15px/20px var(--j14-sf)!important;color:var(--j14-t2)!important}
html:not(.nolook14) body #main#main .jcal .jc-none::before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background-color:var(--j14-tint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/32px 32px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/32px 32px no-repeat;
  opacity:.9}
html:not(.nolook14) body #main#main .jcal .jc-add{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0 0 2px;padding:0 14px;
  border:0!important;border-radius:14px!important;background:var(--j14-tint-bg)!important;box-shadow:none!important;color:var(--j14-tint)!important;font:600 15px/20px var(--j14-sf)!important}
html:not(.nolook14) body #main#main .jcal .jc-add:active{opacity:.7}
/* the legend ("What the icons mean"): a quiet row, the chips soft */
html:not(.nolook14) body #main#main .jcal details.cmp-tip{margin:4px 0 0}
html:not(.nolook14) body #main#main .jcal details.cmp-tip>summary{min-height:44px;font:500 15px/20px var(--j14-sf)!important;color:var(--j14-t3)!important;letter-spacing:0;text-transform:none}
html:not(.nolook14) body #main#main .jcal .jce-legend{gap:6px 6px;margin:2px 0 4px}
html:not(.nolook14) body #main#main .jcal .jce-legend .jce-k{border:0!important;padding:6px 10px 6px 8px;border-radius:999px;background:var(--j14-grp);color:var(--j14-t2);
  font:500 13px/18px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important}
html:not(.nolook14) body #main#main .jcal .jce-legend .jce-k .jce-e{font-size:15px;width:15px;height:15px}
html:not(.nolook14) body #main#main .jcal .jce-legend .jce-k i{font:inherit!important;letter-spacing:0!important;text-transform:none!important;color:inherit}

/* ------------------------------------------------------------------------------------------------------- 5 · List -- */
html:not(.nolook14) body #main#main .jcal .jcl{margin:0 0 6px}
html:not(.nolook14) body #main#main .jcal .jcl-day{display:block;margin:0 0 14px;gap:0}
html:not(.nolook14) body #main#main .jcal .jcl-h{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;padding:0 2px;font:600 15px/20px var(--j14-sf)!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--j14-t1);text-shadow:none}
html:not(.nolook14) body #main#main .jcal .jcl-h::before,html:not(.nolook14) body #main#main .jcal .jcl-h::after{content:none;display:none}
html:not(.nolook14) body #main#main .jcal .jcl-hd{font:inherit;color:var(--j14-t1);text-shadow:none}
html:not(.nolook14) body #main#main .jcal .jcl-day.now .jcl-hd{color:var(--j14-or)}
html:not(.nolook14) body #main#main .jcal .jcl-hl{font:600 15px/20px var(--j14-sf)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j14-or)!important;text-shadow:none}
html:not(.nolook14) body #main#main .jcal .jcl-hl::before{color:var(--j14-t3);margin-right:8px}
html:not(.nolook14) body #main#main .jcal .jcl-i{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0!important;padding:8px 10px 8px 14px!important;
  border:0!important;border-radius:0!important;background:var(--j14-grp)!important;box-shadow:none!important;color:var(--j14-t1);font:400 17px/22px var(--j14-sf)!important;text-align:left;
  -webkit-tap-highlight-color:transparent}
html:not(.nolook14) body #main#main .jcal .jcl-h+.jcl-i{border-top-left-radius:16px!important;border-top-right-radius:16px!important}
html:not(.nolook14) body #main#main .jcal .jcl-i:last-child{border-bottom-left-radius:16px!important;border-bottom-right-radius:16px!important}
html:not(.nolook14) body #main#main .jcal .jcl-i:active{background:var(--j14-grp2)!important}
@media (prefers-reduced-motion:reduce){html:not(.nolook14) body #main#main .jcal .jcl-i{transition:none}}
html:not(.nolook14) body #main#main .jcal .jcl-i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--j14-kc,var(--j14-t3))}
html:not(.nolook14) body #main#main .jcal .jcl-i+.jcl-i::after{content:"";position:absolute;left:40px;right:0;top:0;height:1px;background:var(--j14-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none}
html:not(.nolook14) body #main#main .jcal .jcl-e{flex:none;width:16px;height:16px;font-size:16px;line-height:1}
html:not(.nolook14) body #main#main .jcal .jcl-t{flex:0 0 58px;font:500 13px/18px var(--j14-sf)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;color:var(--j14-t2)!important}
html:not(.nolook14) body #main#main .jcal .jcl-i.late .jcl-t{color:var(--j14-k-late)!important}
html:not(.nolook14) body #main#main .jcal .jcl-n{flex:1 1 auto;min-width:0;font:600 17px/22px var(--j14-sf)!important;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:not(.nolook14) body #main#main .jcal .jcl-go{flex:none;padding-left:2px;font:400 20px/1 var(--j14-sf)!important;color:var(--j14-t3)}
html:not(.nolook14) body #main#main .jcal .jcl-none{margin:4px 0 8px}

/* ------------------------------------------------------- 7 · the phone-calendar blocks at the card's foot (calfeed, Google) -- */
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc){margin:12px 0 0;padding:12px 14px 12px;border:0;border-top:0;border-radius:16px;background:var(--j14-grp);
  box-shadow:inset 0 0 0 1px var(--j14-edge)}
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) :is(.jcf-h,.jgc-h){display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) :is(.jcf-h,.jgc-h)>b{flex:1 1 auto;min-width:0;font:600 15px/20px var(--j14-sf)!important;color:var(--j14-t1)}
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) :is(.jcf-h,.jgc-h)>.b{flex:none;white-space:nowrap}
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) :is(.jcf-note,.jgc-note){margin:6px 0 0;font:400 13px/18px var(--j14-sf)!important;color:var(--j14-t2)!important;opacity:1!important}
html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) :is(.jcf-note,.jgc-note)+.brow,html:not(.nolook14) body #main#main section.bc>.bc-bd>:is(.jcf,.jgc) .brow{margin-top:10px}
html:not(.nolook14) body #main#main section.bc>.bc-bd>.jcf .jcf-url{border-radius:10px;background:var(--j14-grp2);font:500 13px/18px ui-monospace,Menlo,monospace;color:var(--j14-t2)}

/* ------------------------------------------------------------------------------------------- 8 · Up next on Today -- */
/* the visit card gets the timeline's accent (its kind's color down the left) and a time that reads as the rail's; look13's coin stays */
html:not(.nolook14) body #main#main #j12-cc .j12-v:not(.j12-vmore){position:relative;padding-left:19px!important;--j14-kc:var(--j14-k-site)}
html:not(.nolook14) body #main#main #j12-cc .j12-v:not(.j12-vmore)::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 2px 2px 0;background:var(--j14-kc);pointer-events:none}
html:not(.nolook14) body #main#main #j12-cc .j12-v.j12-v-est{--j14-kc:var(--j14-k-est)}
html:not(.nolook14) body #main#main #j12-cc .j12-v.j12-v-rt{--j14-kc:var(--j14-k-route)}
html:not(.nolook14) body #main#main #j12-cc .j12-v.j12-v-appt{--j14-kc:var(--j14-k-appt)}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-vt{min-height:26px}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-vtime{font:700 20px/24px var(--j14-sf)!important;letter-spacing:-.02em!important;color:var(--j14-t1)}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-vm{margin-top:12px!important}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-vn{font:600 17px/22px var(--j14-sf)!important;letter-spacing:-.01em!important}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-vw{font:400 15px/20px var(--j14-sf)!important;color:var(--j14-t2)!important}
html:not(.nolook14) body #main#main #j12-cc .j12-v .j12-va{font:400 13px/18px var(--j14-sf)!important;color:var(--j14-t3)!important}