/* =============================================================================
   look12-today.css — v463 · B · Today, the command center (look12-today.js draws it). Joe 22 Oct 2026 9:42am: "Make 5 major upgrades
   to the look of our dashboard make it look like a billion dollar crm … think of yourself as a world class software engineer".
   Every rule is under html:not(.nolook12) (the off switch) and, for Today, html.j12-today (set by look12-today.js only while Today
   is on screen and its block is drawn — so nothing here hides a thing unless the command center is there to take its place).
   The tokens are look12-tokens.css's; easy2.js turns the literal colours for light mode, and what it cannot know is written
   under html.je-light (a rule that names je-light is left as written).
   1 · look10's hero keeps only the CEO desk plate: its date, greeting, counters and Work the list fold into the command center.
   2 · The hello, the smart line, Work the list.
   3 · The four tiles (2×2): money with its sparkline, calls with the live dot, jobs with the ring, proposals.
   4 · Up next: wide cards in a sideways scroller; the empty state.
   5 · Your cards: the Expand all / Cards bar is the section's header; the folded cards are one inset grouped list.
   6 · The On Today buttons in the same type (no mono caps, no chamfer stripe).
   7 · Light mode.
   ============================================================================= */

/* ---- 1 · look10's hero: only the CEO desk plate stays to see -------------------------------------------------------------- */
html.j12-today:not(.nolook12) body #main>.j10-hero{margin:0!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
html.j12-today:not(.nolook12) body #main>.j10-hero::before,html.j12-today:not(.nolook12) body #main>.j10-hero::after{content:none!important;display:none!important}
html.j12-today:not(.nolook12) body #main>.j10-hero>.j10-date,html.j12-today:not(.nolook12) body #main>.j10-hero>.greet,
html.j12-today:not(.nolook12) body #main>.j10-hero>.hud,html.j12-today:not(.nolook12) body #main>.j10-hero>.worklist,
html.j12-today:not(.nolook12) body #main>.greet,html.j12-today:not(.nolook12) body #main>.hud,html.j12-today:not(.nolook12) body #main>.worklist{display:none!important}
/* the CEO desk plate (quotes.js, the owner's own, kept where v460 put it): the same card, a quiet overline instead of spaced caps,
   the one thing today as a title, 44 px buttons, no orange stripe; the "her" theme keeps its pink */
html.j12-today:not(.nolook12) body #main .jqt{margin:12px 0 4px!important;padding:16px 16px 14px!important;border-radius:var(--j12-r-card)!important;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,106,26,.15),rgba(255,106,26,0) 60%),var(--j12-card)!important;box-shadow:inset 0 0 0 1px var(--j12-hair),var(--j12-shadow)!important}
html.j12-today:not(.nolook12) body #main .jqt::before{content:none!important;display:none!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-k{color:rgba(255,138,61,.12)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-l{margin:0 0 10px!important;font:var(--j12-t-over)!important;letter-spacing:var(--j12-ls-over)!important;text-transform:uppercase;color:var(--j12-t3)!important;opacity:1!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-ol{display:block;margin:0 0 4px!important;font:var(--j12-t-over)!important;letter-spacing:var(--j12-ls-over)!important;text-transform:uppercase;color:var(--j12-or2)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-one{font:var(--j12-t-title)!important;letter-spacing:var(--j12-ls-title)!important;color:var(--j12-t1)!important;text-wrap:balance}
html.j12-today:not(.nolook12) body #main .jqt .jqt-biz{margin:6px 0 0!important;font:var(--j12-t-call)!important;color:var(--j12-t2)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-arow{gap:8px!important;margin:14px 0 2px!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-ask{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px!important;border-radius:var(--j12-r-btn)!important;
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(255,106,26,.28)!important;color:#1A0C02!important;font:650 15px/1 var(--j12-sf)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-open{display:inline-flex;align-items:center;min-height:44px;padding:0 8px!important;color:var(--j12-or2)!important;font:600 15px/1 var(--j12-sf)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-done{display:inline-flex;align-items:center;min-height:44px;padding:0 14px!important;border-radius:var(--j12-r-btn)!important;
  background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px var(--j12-stroke)!important;color:var(--j12-t1)!important;font:600 15px/1 var(--j12-sf)!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-talk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px!important;border-radius:var(--j12-r-btn)!important;
  background:rgba(255,138,61,.12)!important;box-shadow:inset 0 0 0 1px rgba(255,138,61,.45)!important;color:var(--j12-or2)!important;font:600 15px/1 var(--j12-sf)!important}   /* v497 */
html.j12-today:not(.nolook12) body #main .jqt .jqt-q{font:500 15px/21px var(--j12-sf)!important;color:var(--j12-t1)!important}
html.j12-today:not(.nolook12) body #main .jqt.jqt-ceo .jqt-q{margin-top:12px!important;padding-top:12px!important;border-top:1px solid var(--j12-hair)!important;color:var(--j12-t2)!important;opacity:1!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-w{margin-top:6px!important;font:600 13px/18px var(--j12-sf)!important;color:var(--j12-or2)!important;opacity:1!important}
html.j12-today:not(.nolook12) body #main .jqt .jqt-n{font:600 12px/1 var(--j12-sf)!important;color:var(--j12-t3)!important;opacity:1!important}
html.j12-today:not(.nolook12) body #main .jqt.her{background:radial-gradient(120% 90% at 100% 0%,rgba(255,111,168,.16),rgba(255,111,168,0) 60%),var(--j12-card)!important}

/* ---- 2 · the block, the hello --------------------------------------------------------------------------------------------- */
html.j12-today:not(.nolook12) #j12-cc{display:block;position:relative;margin:4px 0 0;color:var(--j12-t1);font-family:var(--j12-sf);-webkit-font-smoothing:antialiased}
html:not(.nolook12) #j12-cc .j12-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
html:not(.nolook12) #j12-cc .j12-hello{padding:4px 4px 0}   /* v465 compact (Joe 23 Oct 7:20am: the four tiles and Work the list on the first screen) */
html:not(.nolook12) #j12-cc .j12-hi{margin:0;font:800 25px/30px var(--j12-sf);letter-spacing:-.022em;color:var(--j12-t1);overflow-wrap:anywhere;
  background:none;-webkit-text-fill-color:currentColor}
html:not(.nolook12) #j12-cc .j12-sub{margin:2px 0 0;font:500 15px/20px var(--j12-sf);letter-spacing:-.005em;color:var(--j12-t2);text-wrap:pretty}
html:not(.nolook12) #j12-cc .j12-sub .j12-date{color:var(--j12-t2)}
html:not(.nolook12) #j12-cc .j12-sub .j12-sum{color:var(--j12-t2)}
/* Work the list: app.js's own action (data-hud="work") as one row under the tiles — the icon tile, the words, the count, the chevron */
html:not(.nolook12) #j12-cc .j12-work{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;margin:8px 0 0;padding:6px 12px 6px 8px;border:0;
  border-radius:var(--j12-r-row);background:var(--j12-card);box-shadow:inset 0 0 0 1px var(--j12-hair);color:var(--j12-t1);
  font:var(--j12-t-head);letter-spacing:-.01em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) #j12-cc .j12-work .j12-wi{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--j12-r-tile);
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A);color:#1A0C02}
html:not(.nolook12) #j12-cc .j12-work .j12-wi .j12-i{width:18px;height:18px;stroke-width:2.4}
html:not(.nolook12) #j12-cc .j12-work .j12-wt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-work b{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;
  background:rgba(255,106,26,.16);color:#FFC29E;font:700 13px/24px var(--j12-sf);font-variant-numeric:tabular-nums}
html:not(.nolook12) #j12-cc .j12-work .j12-ch{flex:none;width:16px;height:16px;color:var(--j12-t3)}
html:not(.nolook12) #j12-cc .j12-i{display:block;flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 3 · the four tiles ----------------------------------------------------------------------------------------------------- */
html:not(.nolook12) #j12-cc .j12-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
html:not(.nolook12) #j12-cc .j12-k{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;min-height:0;margin:0;
  padding:10px 13px 9px;border:0;border-radius:var(--j12-r-card);overflow:hidden;cursor:pointer;text-align:left;color:var(--j12-t1);font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),var(--j12-card);box-shadow:inset 0 0 0 1px var(--j12-hair),var(--j12-shadow);
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
html:not(.nolook12) #j12-cc .j12-k:focus-visible{outline:2px solid var(--j12-or);outline-offset:2px}
html:not(.nolook12) #j12-cc .j12-kl{display:flex;align-items:center;gap:6px;min-width:0;padding-right:0;font:600 13px/16px var(--j12-sf);letter-spacing:0;color:var(--j12-t2)}
html:not(.nolook12) #j12-cc .j12-kl,html:not(.nolook12) #j12-cc .j12-kv,html:not(.nolook12) #j12-cc .j12-kd{position:relative;z-index:1}   /* v465: above the money band */
html:not(.nolook12) #j12-cc .j12-kl>span{min-width:0}
html:not(.nolook12) #j12-cc .j12-k-jobs .j12-kl{padding-right:36px}
html:not(.nolook12) #j12-cc .j12-kv{display:block;margin:4px 0 0;font:750 25px/1 var(--j12-sf);letter-spacing:-.03em;color:var(--j12-t1);font-variant-numeric:tabular-nums;white-space:nowrap}
html:not(.nolook12) #j12-cc .j12-kv.j12-s1{font-size:22px}
html:not(.nolook12) #j12-cc .j12-kv.j12-s2{font-size:19px;letter-spacing:-.02em}
html:not(.nolook12) #j12-cc .j12-kv.j12-unk{color:var(--j12-t3)}
html:not(.nolook12) #j12-cc .j12-kv small{font:600 14px/1 var(--j12-sf);letter-spacing:0;color:var(--j12-t2)}
html:not(.nolook12) #j12-cc .j12-kd{display:block;margin:3px 0 0;font:600 13px/16px var(--j12-sf);color:var(--j12-t3);font-variant-numeric:tabular-nums}
html:not(.nolook12) #j12-cc .j12-kd>b,html:not(.nolook12) #j12-cc .j12-kd>span{font:inherit}
html:not(.nolook12) #j12-cc .j12-kd>b+span{margin-left:.25em}
html:not(.nolook12) #j12-cc .j12-kd .j12-q{color:var(--j12-t3)}
html:not(.nolook12) #j12-cc .j12-kd .j12-ok{color:var(--j12-ok)}
html:not(.nolook12) #j12-cc .j12-kd .j12-dn{color:var(--j12-t2)}
html:not(.nolook12) #j12-cc .j12-kd .j12-due{color:var(--j12-due)}
/* money: the 7 days as a sparkline across the foot of the tile (on a 375 px phone a chart beside the words would sit on them) */
html:not(.nolook12) #j12-cc .j12-spark{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:26px;margin:0;overflow:visible;opacity:.5;pointer-events:none;z-index:0}   /* v465: a faint band along the bottom edge, not a row of its own */
html:not(.nolook12) #j12-cc .j12-spark .j12-sl{fill:none;stroke:var(--j12-or2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
html:not(.nolook12) #j12-cc .j12-spark .j12-s0{stop-color:var(--j12-or2);stop-opacity:.42}
html:not(.nolook12) #j12-cc .j12-spark .j12-s1{stop-color:var(--j12-or2);stop-opacity:0}
/* calls: the live dot (green answering, amber taking messages, grey no line) */
html:not(.nolook12) #j12-cc .j12-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--j12-t3);box-shadow:0 0 0 3px rgba(110,123,144,.18)}
html:not(.nolook12) #j12-cc .j12-dot.j12-on{background:var(--j12-ok);box-shadow:0 0 0 3.5px rgba(52,211,153,.2)}
html:not(.nolook12) #j12-cc .j12-dot.j12-msg{background:var(--j12-due);box-shadow:0 0 0 3.5px rgba(251,191,36,.2)}
@media (prefers-reduced-motion:no-preference){
  html:not(.nolook12) #j12-cc .j12-dot.j12-on{position:relative}
  html:not(.nolook12) #j12-cc .j12-dot.j12-on::after{content:"";position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;
    background:rgba(52,211,153,.22);transform:scale(.55);opacity:.9;animation:j12live 2.4s ease-in-out infinite;pointer-events:none}
  @keyframes j12live{0%,100%{transform:scale(.55);opacity:.9}50%{transform:scale(1);opacity:.25}}   /* v463 assembler: transform + opacity only */
}
/* jobs: the ring at the top right */
html:not(.nolook12) #j12-cc .j12-ring{position:absolute;top:10px;right:10px;width:30px;height:30px}
html:not(.nolook12) #j12-cc .j12-ring circle{fill:none;stroke-width:5}
html:not(.nolook12) #j12-cc .j12-ring .j12-rt{stroke:rgba(255,255,255,.1)}
html:not(.nolook12) #j12-cc .j12-ring .j12-rv{stroke:var(--j12-ok);stroke-linecap:round}
@media (min-width:600px){html:not(.nolook12) #j12-cc .j12-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- 4 · Up next ------------------------------------------------------------------------------------------------------------ */
html:not(.nolook12) #j12-cc .j12-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 6px;padding:0 0 0 4px}
html:not(.nolook12) #j12-cc .j12-h{margin:0;font:var(--j12-t-title);letter-spacing:var(--j12-ls-title);color:var(--j12-t1);text-transform:none}
html:not(.nolook12) #j12-cc .j12-more{flex:none;min-width:44px;min-height:44px;margin:0;padding:0 2px 0 12px;border:0;background:none;color:var(--j12-or2);
  font:600 15px/1 var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) #j12-cc .j12-next{display:flex;gap:12px;align-items:stretch;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * var(--j12-bleed,16px));
  padding:4px var(--j12-bleed,16px) 22px;scroll-snap-type:x mandatory;scroll-padding:0 var(--j12-bleed,16px);-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none}
html:not(.nolook12) #j12-cc .j12-next::-webkit-scrollbar{display:none}
html:not(.nolook12) #j12-cc .j12-v{flex:0 0 auto;display:flex;flex-direction:column;width:min(300px,calc(100vw - 76px));min-width:0;margin:0;padding:16px;border:0;
  border-radius:var(--j12-r-card);scroll-snap-align:start;background:var(--j12-card);color:var(--j12-t1);text-align:left;
  box-shadow:inset 0 0 0 1px var(--j12-hair),0 8px 22px rgba(0,0,0,.3)}
html:not(.nolook12) #j12-cc .j12-vt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
html:not(.nolook12) #j12-cc .j12-vtime{min-width:0;font:750 24px/1.05 var(--j12-sf);letter-spacing:-.02em;color:var(--j12-t1);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;max-width:62%;padding:0 10px;border-radius:999px;
  font:700 12px/1 var(--j12-sf);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-chip i{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
html:not(.nolook12) #j12-cc .j12-chip.j12-info{background:var(--j12-info-bg);color:#BFDBFE}
html:not(.nolook12) #j12-cc .j12-chip.j12-ok{background:var(--j12-ok-bg);color:#A7F3D0}
html:not(.nolook12) #j12-cc .j12-chip.j12-due{background:var(--j12-due-bg);color:#FDE68A}
html:not(.nolook12) #j12-cc .j12-chip.j12-late{background:var(--j12-late-bg);color:#FECACA}
html:not(.nolook12) #j12-cc .j12-vm{display:block;width:100%;min-width:0;margin:10px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) #j12-cc div.j12-vm{cursor:default}
html:not(.nolook12) #j12-cc .j12-vn{display:block;font:var(--j12-t-head);letter-spacing:-.01em;color:var(--j12-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-vw{display:block;margin-top:3px;font:var(--j12-t-call);color:var(--j12-t2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-va{display:block;margin-top:2px;font:var(--j12-t-foot);color:var(--j12-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-vb{display:flex;gap:8px;margin-top:auto;padding-top:14px}
html:not(.nolook12) #j12-cc .j12-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;padding:0 10px;
  border-radius:var(--j12-r-btn);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--j12-stroke);color:var(--j12-t1);font:650 15px/1 var(--j12-sf);
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) #j12-cc .j12-btn span{overflow:hidden;text-overflow:ellipsis}
html:not(.nolook12) #j12-cc .j12-btn.j12-pri{background:linear-gradient(180deg,#FF8A3D,#FF6A1A);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(255,106,26,.28);color:#1A0C02}
html:not(.nolook12) #j12-cc .j12-btn .j12-i{width:17px;height:17px}
/* the last card when there are more than eight: "+3 · See all" */
html:not(.nolook12) #j12-cc button.j12-vmore{width:118px;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--j12-hair)}
html:not(.nolook12) #j12-cc button.j12-vmore b{font:750 24px/1 var(--j12-sf);color:var(--j12-t1)}
html:not(.nolook12) #j12-cc button.j12-vmore span{font:600 15px/1 var(--j12-sf);color:var(--j12-or2)}
/* nothing booked: one line and New job (easy.js's data-je="newjob") */
html:not(.nolook12) #j12-cc .j12-empty{display:flex;align-items:center;gap:12px;margin:4px 0 6px;padding:14px 14px 14px 16px;border-radius:var(--j12-r-card);
  background:var(--j12-card);box-shadow:inset 0 0 0 1px var(--j12-hair),var(--j12-shadow-sm)}
html:not(.nolook12) #j12-cc .j12-ei{flex:none;width:34px;height:34px;padding:8px;border-radius:var(--j12-r-tile);background:var(--j12-info-bg);color:var(--j12-info);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
html:not(.nolook12) #j12-cc .j12-et{flex:1 1 auto;min-width:0;margin:0;font:var(--j12-t-call);color:var(--j12-t2)}
html:not(.nolook12) #j12-cc .j12-new{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 12px;border:0;border-radius:var(--j12-r-btn);
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(255,106,26,.28);color:#1A0C02;
  font:650 15px/1 var(--j12-sf);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) #j12-cc .j12-new .j12-i{width:16px;height:16px;stroke-width:2.6}
/* the first week (starter.js's simple Today): app.js's own greeting stays where starter.js looks for it, so this block's hello steps
   aside; the numbers wait until there is something to count, as the counters did; Up next (and New job) stays */
html:not(.nolook12) body.st-on #j12-cc .j12-hello{display:none!important}
html:not(.nolook12) body.st-on:not(.st-hud) #j12-cc .j12-kpis,html:not(.nolook12) body.st-on:not(.st-hud) #j12-cc .j12-work{display:none!important}
html:not(.nolook12) body.st-on #j12-cc .j12-sec{margin-top:14px}
html.j12-today:not(.nolook12) body.st-on #main>.j10-hero>.greet{display:block!important;margin:0!important;padding:14px 4px 0!important;background:none!important;border:0!important;box-shadow:none!important}
html.j12-today:not(.nolook12) body.st-on #main>.j10-hero>.greet .hi{font:var(--j12-t-large)!important;letter-spacing:var(--j12-ls-large)!important}
html.j12-today:not(.nolook12) body.st-on #main>.j10-hero>.greet .sub{margin-top:6px!important;font:500 16px/22px var(--j12-sf)!important;color:var(--j12-t2)!important}

/* ---- 5 · Your cards ---------------------------------------------------------------------------------------------------------- */
/* todaycards.js's bar is the section's header: the title, then Expand all and Cards as text buttons (the button's own words stay for
   lang.js and the tests; the CSS shows them without the old ▦ ▤ ⚙ through data-j12-l, set by look12-today.js) */
html.j12-today:not(.nolook12) body #main>.tc-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:2px;margin:22px 0 6px;padding:0 0 0 4px}
html.j12-today:not(.nolook12) body #main>.tc-bar::before{content:attr(data-j12-t);flex:1 1 auto;min-width:0;font:var(--j12-t-title);letter-spacing:var(--j12-ls-title);
  color:var(--j12-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.j12-today:not(.nolook12) body #main>.tc-bar .tc-b{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;
  padding:0 8px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--j12-or2);font:600 15px/1 var(--j12-sf);letter-spacing:0;text-transform:none}
html.j12-today:not(.nolook12) body #main>.tc-bar .tc-b[data-j12-l]{font-size:0!important;color:transparent}
html.j12-today:not(.nolook12) body #main>.tc-bar .tc-b[data-j12-l]>*{display:none!important}   /* v465 · Joe 23 Oct 7:17am: the Cards gear sat on its word on his iPhone */
html.j12-today:not(.nolook12) body #main>.tc-bar .tc-b[data-j12-l]::after{content:attr(data-j12-l);font:600 15px/1 var(--j12-sf);letter-spacing:-.005em;color:var(--j12-or2);white-space:nowrap}
html.j12-today:not(.nolook12) body #main>.tc-bar .tc-b:active{background:rgba(255,138,61,.12)}
/* the wrappers the board draws its cards in keep no gap of their own: the rows decide the rhythm */
html.j12-today:not(.nolook12) body #main>#boardticks,html.j12-today:not(.nolook12) body #main>#boardtoday,html.j12-today:not(.nolook12) body #main>#boardtoday2{margin-top:0!important}
/* a folded card on its own: a rounded row */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed{position:relative;margin:12px 0 0!important;padding:0!important;border:0!important;border-radius:var(--j12-r-row)!important;
  background:var(--j12-card)!important;box-shadow:inset 0 0 0 1px var(--j12-hair)!important;overflow:hidden}
/* folded cards next to each other: one inset grouped list — hairlines between them, from the title (iOS), round only at its ends */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-row{margin:0!important;border-radius:0!important;box-shadow:none!important;
  background:linear-gradient(var(--j12-hair),var(--j12-hair)) 64px 0/calc(100% - 64px) 1px no-repeat,var(--j12-card)!important}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1{margin-top:8px!important;border-top-left-radius:var(--j12-r-card)!important;
  border-top-right-radius:var(--j12-r-card)!important;background:var(--j12-card)!important}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-rn{margin-bottom:12px!important;border-bottom-left-radius:var(--j12-r-card)!important;
  border-bottom-right-radius:var(--j12-r-card)!important}
/* the row: icon tile · title over its one-line status · count · chevron */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:auto auto;
  grid-auto-rows:auto;gap:1px 14px!important;align-items:center!important;align-content:center!important;min-height:60px!important;margin:0!important;
  padding:9px 48px 9px 16px!important;border:0!important;background:none!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd::before,html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd::after{content:none!important;display:none!important}
/* look6 (v271) hid every word in a folded title that was not its icon (it took them for counts): a title in a span of its own shows
   again (look12-today.js marks it .j12-ht); a span that is only a count stays hidden (the row's status says it) */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd h2>span.j12-ht{display:inline!important}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>*{grid-column:2;min-width:0}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.j12-ic{grid-column:1;grid-row:1/span 2;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--j12-r-tile);background:var(--j12-g-bg,rgba(255,106,26,.16));color:var(--j12-g,#FF8A3D);align-self:center}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.j12-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>h2,html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>h3{grid-row:1;align-self:end;margin:0!important;
  padding:0!important;font:var(--j12-t-head)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--j12-t1)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none!important;-webkit-text-fill-color:currentColor}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>h2::before,html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>h2::after{content:none!important}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.j12-ic~h2 .ji{display:none!important}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.sub{grid-row:2;align-self:start;max-width:none!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font:var(--j12-t-foot)!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--j12-t3)!important;opacity:1!important;text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important}
/* a status that is only a number: the count badge on the right */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.sub.j12-cnt{grid-column:3!important;grid-row:1/span 2;align-self:center;min-width:26px;height:24px;
  padding:0 8px!important;border-radius:999px!important;background:rgba(255,106,26,.16)!important;color:#FFC29E!important;font:700 13px/24px var(--j12-sf)!important;
  text-align:center!important;font-variant-numeric:tabular-nums}
/* no status line (none, or only a count): the title sits in the middle of the row */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-nosub>.bc-hd>h2,html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-nosub>.bc-hd>h3{grid-row:1/span 2;align-self:center}
/* the chevron: todaycards.js's fold button, a 44 px target at the row's right end, the ▸ drawn as a thin chevron */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd .tc-chev{position:absolute!important;top:50%!important;right:2px!important;width:44px!important;height:44px!important;
  margin:-22px 0 0!important;padding:0!important;border:0!important;border-radius:50%!important;transform:none!important;background:none!important;box-shadow:none!important;
  font-size:0!important;line-height:0!important;color:transparent!important;grid-column:auto}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd .tc-chev::after{content:"";position:absolute;left:16px;top:17px;width:8px;height:8px;
  border-top:2px solid var(--j12-t3);border-right:2px solid var(--j12-t3);transform:rotate(45deg);border-radius:1px}
/* the five groups' colours on the icon tile (todayjump.js's groups) */
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="day"]{--j12-g:#FF8A3D;--j12-g-bg:rgba(255,106,26,.16)}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="money"]{--j12-g:#6EE7B7;--j12-g-bg:rgba(52,211,153,.15)}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="biz"]{--j12-g:#93C5FD;--j12-g-bg:rgba(96,165,250,.15)}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="grow"]{--j12-g:#FCD34D;--j12-g-bg:rgba(251,191,36,.15)}
html.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="jetsy"]{--j12-g:#C4B5FD;--j12-g-bg:rgba(167,139,250,.16)}
/* an open card shows no icon tile (it is the card it was) */
html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd>.j12-ic{display:none!important}
html.nolook12 body #main .j12-ic{display:none!important}

/* ---- 6 · On Today, in the same type -------------------------------------------------------------------------------------------- */
html.j12-today:not(.nolook12) body #main .tj-row{margin:4px 0 6px}
html.j12-today:not(.nolook12) body #main .tj-row .tj-k,html.j12-today:not(.nolook12) body #main .tj-row .tj-gh{font:var(--j12-t-over)!important;letter-spacing:var(--j12-ls-over)!important;
  text-transform:uppercase;color:var(--j12-t3)}
html.j12-today:not(.nolook12) body #main .tj-row .tj-gh{color:var(--tjc,#FF8A3D)}
html.j12-today:not(.nolook12) body #main .tj-row .tj-gh b{font:inherit;letter-spacing:0;color:var(--j12-t3)}
html.j12-today:not(.nolook12) body .tj-row .tj-c.tj-t{min-height:48px;border-radius:var(--j12-r-row)!important;background:var(--j12-card)!important;
  box-shadow:inset 0 0 0 1px var(--j12-hair)!important;font:600 14px/18px var(--j12-sf)!important;color:var(--j12-t1)!important}
html.j12-today:not(.nolook12) body .tj-row .tj-t .tj-ic{border-radius:var(--j12-r-tile)}

/* ---- 7 · light mode -------------------------------------------------------------------------------------------------------------- */
html.je-light:not(.nolook12) #j12-cc .j12-k{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),0 10px 26px rgba(16,32,58,.08)}
html.je-light:not(.nolook12) #j12-cc .j12-v,html.je-light:not(.nolook12) #j12-cc .j12-empty{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),0 8px 20px rgba(16,32,58,.08)}
html.je-light:not(.nolook12) #j12-cc .j12-btn{background:rgba(10,20,40,.05);box-shadow:inset 0 0 0 1px rgba(10,20,40,.10);color:#0B1220}
html.je-light:not(.nolook12) #j12-cc .j12-btn.j12-pri,html.je-light:not(.nolook12) #j12-cc .j12-new{background:linear-gradient(180deg,#FF8A3D,#FF6A1A);color:#FFFFFF;box-shadow:0 6px 16px rgba(255,106,26,.25)}
html.je-light:not(.nolook12) #j12-cc .j12-chip.j12-info{background:rgba(37,99,235,.10);color:#1D4ED8}
html.je-light:not(.nolook12) #j12-cc .j12-chip.j12-ok{background:rgba(5,150,105,.12);color:#047857}
html.je-light:not(.nolook12) #j12-cc .j12-chip.j12-due{background:rgba(217,119,6,.12);color:#B45309}
html.je-light:not(.nolook12) #j12-cc .j12-chip.j12-late{background:rgba(220,38,38,.10);color:#B91C1C}
html.je-light:not(.nolook12) #j12-cc .j12-kd .j12-due{color:#B45309}
html.je-light:not(.nolook12) #j12-cc .j12-kd .j12-ok{color:#047857}
html.je-light:not(.nolook12) #j12-cc .j12-work{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08);color:#0B1220}
html.je-light:not(.nolook12) #j12-cc .j12-work .j12-wi{color:#FFFFFF}
html.je-light:not(.nolook12) #j12-cc .j12-work b{background:rgba(255,106,26,.12);color:#C2410C}
html.je-light:not(.nolook12) #j12-cc .j12-ring .j12-rt{stroke:rgba(10,20,40,.10)}
html.je-light:not(.nolook12) #j12-cc .j12-spark .j12-sl{stroke:#E85A0C}
html.je-light:not(.nolook12) #j12-cc .j12-spark .j12-s0,html.je-light:not(.nolook12) #j12-cc .j12-spark .j12-s1{stop-color:#FF6A1A}
html.je-light:not(.nolook12) #j12-cc .j12-more,html.je-light.j12-today:not(.nolook12) body #main>.tc-bar .tc-b[data-j12-l]::after{color:#C2410C}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed{background:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08)!important}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-row{background:linear-gradient(rgba(10,20,40,.08),rgba(10,20,40,.08)) 64px 0/calc(100% - 64px) 1px no-repeat,#FFFFFF!important;box-shadow:none!important}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1{background:#FFFFFF!important}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed>.bc-hd>.sub.j12-cnt{background:rgba(255,106,26,.12)!important;color:#C2410C!important}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="day"]{--j12-g:#D9480F;--j12-g-bg:rgba(255,106,26,.12)}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="money"]{--j12-g:#047857;--j12-g-bg:rgba(5,150,105,.12)}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="biz"]{--j12-g:#1D4ED8;--j12-g-bg:rgba(37,99,235,.10)}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="grow"]{--j12-g:#B45309;--j12-g-bg:rgba(217,119,6,.12)}
html.je-light.j12-today:not(.nolook12) body #main section.bc.tc-collapsed[data-j12-g="jetsy"]{--j12-g:#6D28D9;--j12-g-bg:rgba(124,58,237,.10)}
html.je-light.j12-today:not(.nolook12) body .tj-row .tj-c.tj-t{background:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08)!important}
html.je-light.j12-today:not(.nolook12) body #main .jqt{background:radial-gradient(120% 90% at 100% 0%,rgba(255,106,26,.10),rgba(255,106,26,0) 60%),#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),0 10px 26px rgba(16,32,58,.08)!important}
html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-ask{color:#FFFFFF!important}
html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-done{background:rgba(10,20,40,.05)!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.10)!important;color:#0B1220!important}
html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-talk{background:rgba(194,65,12,.07)!important;box-shadow:inset 0 0 0 1px rgba(194,65,12,.35)!important;color:#C2410C!important}   /* v497 */
html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-ol,html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-open,html.je-light.j12-today:not(.nolook12) body #main .jqt .jqt-w{color:#C2410C!important}