/* look14-cards.css — v469 F · the Cards sheet in Jetsy's own look (Joe, Fri 23 Oct 2026 10:49pm, a screenshot of "Your Today cards":
   "Upgrade this as well"; the same brief as v463/v468: "make it look like a billion dollar crm … think of yourself as a world class
   apple Software engineer").
   What todaycards.js draws (the .tc-ov overlay, .tc-sheet, the title, the explainer, one line per block with its switch, "Bring back
   all N cards put away", Done) and what todayorder.js adds (▲ ▼ ⤒ on every line, "Original order", its hint) read like a settings
   dump on his phone: a long flat list, big grey switch pills, three big square buttons per line. Now it is an iOS sheet: a grabber
   and a navigation-bar header (the title centered, Done in the tint at the right — the sheet's own Done, placed there with flex
   order), "Bring back all N" as a filled tint button pinned at the TOP of the list when something is put away (a nearly empty
   Today shows the fix first), the lines as one inset grouped list (52 px, hairlines, the name 17 px wrapping to two lines, an
   iPhone switch 51×31 green when on, the three move buttons as one compact 3-segment control at the right), the explainer as a
   13 px footer note under the group, "Original order" as a quiet row at the bottom with its hint under it.
   Nothing in the sheet is added or moved in the DOM: every element is the one the two scripts draw (the grabber is ::before);
   the order is flex `order`; every handler stays. Colors are custom properties set in the two blocks below (dark, then
   html.je-light) — easy2.js rewrites the literal colors of every rule whose text does not say je-light, so no rule here holds one.
   Every rule sits under html:not(.nolook14): localStorage nolook14 = 1 gives v468's sheet back exactly. Reduced motion: no slide. */

/* ------------------------------------------------------------------------------------------- the colors: dark, then light -- */
html:not(.nolook14){
  --j14c-ink1:#F5F7FB; --j14c-ink2:#A7B3C6; --j14c-ink3:#8794A8;
  --j14c-sheet:#0C131F; --j14c-cell:#162133; --j14c-cell-press:#1E2C43; --j14c-sep:rgba(255,255,255,.10);
  --j14c-ov:rgba(0,0,0,.52); --j14c-grab:rgba(255,255,255,.30); --j14c-sheet-sh:0 -16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  --j14c-tint:#FF8A3D; --j14c-fill:#FF8A3D; --j14c-fill-ink:#1A0B03; --j14c-fill-press:#FF6A1A;
  --j14c-sw-off:rgba(110,124,148,.36); --j14c-sw-on:#3ED598; --j14c-knob:#FFFFFF; --j14c-knob-sh:0 3px 8px rgba(0,0,0,.2),0 3px 1px rgba(0,0,0,.08);
  --j14c-seg:rgba(110,124,148,.24); --j14c-seg-ink:#EBEBF5; --j14c-seg-press:#5B6A80; --j14c-seg-sh:0 2px 6px rgba(0,0,0,.24);
  --j14c-ring:#4BA3F5;
}
html.je-light:not(.nolook14){
  --j14c-ink1:#0B1220; --j14c-ink2:#5B6475; --j14c-ink3:#6B7486;
  --j14c-sheet:#F3F5F9; --j14c-cell:#FFFFFF; --j14c-cell-press:#E3E8EF; --j14c-sep:rgba(52,64,84,.18);
  --j14c-ov:rgba(0,0,0,.30); --j14c-grab:rgba(52,64,84,.30); --j14c-sheet-sh:0 -10px 40px rgba(16,32,58,.16);
  --j14c-tint:#C2410C; --j14c-fill:#C2410C; --j14c-fill-ink:#FFFFFF; --j14c-fill-press:#9A3412;
  --j14c-sw-off:rgba(110,124,148,.16); --j14c-sw-on:#1FA971; --j14c-knob:#FFFFFF; --j14c-knob-sh:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  --j14c-seg:rgba(110,124,148,.12); --j14c-seg-ink:#3C3C43; --j14c-seg-press:#FFFFFF; --j14c-seg-sh:0 2px 6px rgba(0,0,0,.10);
  --j14c-ring:#1F6FD1;
}

/* -------------------------------------------------------------------------------------------------- the overlay and sheet -- */
html:not(.nolook14) .tc-ov{
  background:var(--j14c-ov);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-tap-highlight-color:transparent;touch-action:none;transition:opacity 280ms var(--j12-spring);
}
html:not(.nolook14) .tc-sheet{
  box-sizing:border-box;width:100%;max-width:34rem;max-height:calc(100% - 44px - env(safe-area-inset-top,0px));
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  margin:0;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;
  background:var(--j14c-sheet);color:var(--j14c-ink1);box-shadow:var(--j14c-sheet-sh);text-align:left;
  font:400 17px/22px var(--j12-sf);
}
/* look14-cards.js: .l14-pre is on the overlay for the first frame (the closed position), so the sheet slides up; a swipe down
   on the header drags it (.l14-drag: no transition while a finger holds it) */
/* v470: the slide-up is an animation that runs on its own (v469 held the sheet in place for a frame by script; on Joe's iPhone it
   never let go). Reduced motion: no slide. */
@keyframes l14-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes l14-veil{from{opacity:0}to{opacity:1}}
html:not(.nolook14) .tc-ov{animation:l14-veil 220ms ease-out both}
html:not(.nolook14) .tc-ov .tc-sheet{animation:l14-up 380ms cubic-bezier(.2,.9,.3,1.05) both}
@media (prefers-reduced-motion:reduce){html:not(.nolook14) .tc-ov,html:not(.nolook14) .tc-ov .tc-sheet{animation:none}}
html:not(.nolook14) .tc-sheet > *{box-sizing:border-box;flex:0 0 100%;width:100%;min-width:0}
/* the grabber: the sheet's own ::before, sticky at the top with the header */
html:not(.nolook14) .tc-sheet::before{
  content:"";display:block;order:0;flex:0 0 100%;width:100%;height:13px;position:sticky;top:0;z-index:3;
  background:linear-gradient(var(--j14c-grab),var(--j14c-grab)) center 6px/36px 5px no-repeat var(--j14c-sheet);border-radius:0 0 3px 3px;
}
/* the header, like a navigation bar: the title centered 17 px semibold, Done (the sheet's own, flex order 2) in the tint at the right */
html:not(.nolook14) .tc-sheet > .tc-sh-hd{
  order:1;flex:1 1 0%;width:auto;min-width:0;position:sticky;top:13px;z-index:3;display:flex;align-items:center;justify-content:center;
  height:44px;margin:0;padding:0 0 0 60px;background:var(--j14c-sheet);
}
html:not(.nolook14) .tc-sheet > .tc-sh-hd h3{margin:0;min-width:0;font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;color:var(--j14c-ink1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook14) .tc-sheet > .tc-done{
  order:2;flex:0 0 60px;width:60px;position:sticky;top:13px;z-index:3;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;
  background:var(--j14c-sheet);color:var(--j14c-tint);font:600 17px/22px var(--j12-sf);text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html:not(.nolook14) .tc-sheet > .tc-done:active{opacity:.55}
/* the hairline under the header (drawn on both halves so it reads as one line) */
html:not(.nolook14) .tc-sheet > .tc-sh-hd,html:not(.nolook14) .tc-sheet > .tc-done{box-shadow:0 .5px 0 var(--j14c-sep)}

/* "Bring back all N cards put away": a filled tint button at the TOP of the list (only drawn when N ≥ 1) */
html:not(.nolook14) .tc-sheet > .tc-allslot{order:3;margin:0}
html:not(.nolook14) .tc-sheet > .tc-allslot:empty{display:none}
html:not(.nolook14) .tc-sheet .tc-all{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin:14px 0 16px;padding:10px 16px;border:0;border-radius:14px;
  background:var(--j14c-fill);box-shadow:none;color:var(--j14c-fill-ink);font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear;
}
html:not(.nolook14) .tc-sheet .tc-all:active{background:var(--j14c-fill-press)}
/* v473 (Joe 24 Oct 9:30am): "Put away all N cards" — the quiet twin under Bring back all; the two sit together, 8px apart */
html:not(.nolook14) .tc-sheet .tc-all.tc-away{background:var(--j14c-cell);color:var(--j14c-t1,#F5F7FB);box-shadow:inset 0 0 0 1px var(--j14c-hair,rgba(255,255,255,.14));font-weight:600}
html:not(.nolook14) .tc-sheet .tc-all.tc-away:active{background:var(--j14c-cell-press,rgba(255,255,255,.08))}
html:not(.nolook14) .tc-sheet .tc-all + .tc-all{margin-top:-8px}

/* the lines: one inset grouped list (todayorder.js wraps each line in .tco-row; before it does, the bare .tc-item gets the same look) */
html:not(.nolook14) .tc-sheet > .tco-row,html:not(.nolook14) .tc-sheet > .tc-item{order:4;position:relative;margin:0;background:var(--j14c-cell)}
html:not(.nolook14) .tc-sheet > .tc-sh-sub + .tco-row,html:not(.nolook14) .tc-sheet > .tc-sh-sub + .tc-item,
html:not(.nolook14) .tc-sheet > .tc-sh-hd + .tco-row,html:not(.nolook14) .tc-sheet > .tc-sh-hd + .tc-item{margin-top:14px;border-radius:16px 16px 0 0}
/* the last line: the one before .tc-allslot (todaycards always draws that div after the lines) */
html:not(.nolook14) .tc-sheet > .tco-row:nth-last-of-type(2),html:not(.nolook14) .tc-sheet > .tc-item:nth-last-of-type(2){border-radius:0 0 16px 16px}
html:not(.nolook14) .tc-sheet > .tc-sh-sub + .tco-row:nth-last-of-type(2){border-radius:16px}
html:not(.nolook14) .tc-sheet > .tco-row{display:flex;align-items:stretch;gap:0;padding:0 12px 0 0}
html:not(.nolook14) .tc-sheet > .tco-row + .tco-row::before,html:not(.nolook14) .tc-sheet > .tc-item + .tc-item::before{
  content:"";position:absolute;top:0;right:0;left:16px;height:1px;background:var(--j14c-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none;
}
html:not(.nolook14) .tc-sheet .tco-row > .tc-item{flex:1 1 auto;min-width:0;width:auto;padding-right:0}
html:not(.nolook14) .tc-sheet button.tc-item,html:not(.nolook14) .tc-sheet .tc-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin:0;padding:8px 10px 8px 16px;
  border:0;border-radius:0;background:none;color:var(--j14c-ink1);font:400 17px/22px var(--j12-sf);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear;
}
html:not(.nolook14) .tc-sheet .tc-item:active{background:var(--j14c-cell-press)}
html:not(.nolook14) .tc-sheet .tc-item span{flex:1 1 auto;min-width:0;font:400 17px/22px var(--j12-sf);letter-spacing:-.01em;color:var(--j14c-ink1);overflow-wrap:anywhere;opacity:1}
html:not(.nolook14) .tc-sheet .tc-item.off span{color:var(--j14c-ink2);opacity:1}
/* the switch: an iPhone switch, green when on */
html:not(.nolook14) .tc-sheet .tc-sw,html:not(.nolook14) .tc-sheet i.tc-sw{
  display:block;flex:0 0 51px;position:relative;width:51px;height:31px;margin:0;padding:0;border:0;border-radius:999px;
  background:var(--j14c-sw-off);pointer-events:none;transition:background-color var(--j12-t) var(--j12-spring);
}
html:not(.nolook14) .tc-sheet .tc-sw::after{
  content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--j14c-knob);box-shadow:var(--j14c-knob-sh);
  transition:transform var(--j12-t) var(--j12-spring);
}
html:not(.nolook14) .tc-sheet .tc-sw.on{background:var(--j14c-sw-on)}
html:not(.nolook14) .tc-sheet .tc-sw.on::after{left:2px;transform:translateX(20px)}
/* ▲ ▼ ⤒: one compact 3-segment control at the line's right (where iOS keeps its reorder control), each segment a 44 px thumb target */
html:not(.nolook14) .tc-sheet .tco-mv{
  display:inline-flex;flex:0 0 auto;align-self:center;align-items:center;gap:2px;margin:0 0 0 10px;padding:2px;border-radius:9px;background:var(--j14c-seg);
}
html:not(.nolook14) .tc-sheet .tco-mv button{
  position:relative;width:30px;min-width:30px;height:28px;margin:0;padding:0;border:0;border-radius:7px;background:none;box-shadow:none;
  color:var(--j14c-seg-ink);font:600 13px/1 var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear;
}
html:not(.nolook14) .tc-sheet .tco-mv button[data-tco="top"]{font-size:15px}   /* ⤒ is a lighter glyph than ▲ ▼: two sizes up reads the same weight */
html:not(.nolook14) .tc-sheet .tco-mv button::before{content:"";position:absolute;top:-10px;bottom:-10px;left:-7px;right:-7px}
html:not(.nolook14) .tc-sheet .tco-mv button:active{opacity:1;background:var(--j14c-seg-press);box-shadow:var(--j14c-seg-sh)}
html:not(.nolook14) .tc-sheet .tco-mv button[disabled]{opacity:.3;cursor:default}
html:not(.nolook14) .tc-sheet .tco-mv button[disabled]:active{background:none;box-shadow:none}
html:not(.nolook14) .tc-sheet .tco-mv button + button::after{content:"";position:absolute;top:7px;bottom:7px;left:-1.5px;width:1px;background:var(--j14c-sep)}

/* the explainer: a 13 px footer note under the group (and the "No cards on Today right now." line, when that is all there is) */
html:not(.nolook14) .tc-sheet > .tc-sh-sub{order:5;margin:8px 0 22px;padding:0 16px;font:400 13px/18px var(--j12-sf);color:var(--j14c-ink2);opacity:1}
/* "Original order": a quiet row at the bottom, its hint a footer note under it */
html:not(.nolook14) .tc-sheet > .tco-reset{
  order:6;display:flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:8px 16px;border:0;border-radius:16px;
  background:var(--j14c-cell);color:var(--j14c-tint);font:400 17px/22px var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear;
}
html:not(.nolook14) .tc-sheet > .tco-reset:active{background:var(--j14c-cell-press)}
html:not(.nolook14) .tc-sheet > .tco-reset[disabled]{color:var(--j14c-ink3);cursor:default}
html:not(.nolook14) .tc-sheet > .tco-reset[disabled]:active{background:var(--j14c-cell)}
html:not(.nolook14) .tc-sheet > .tco-hint{order:7;margin:8px 0 0;padding:0 16px;font:400 13px/18px var(--j12-sf);color:var(--j14c-ink2)}
/* keyboard focus */
html:not(.nolook14) .tc-sheet .tc-item:focus-visible,html:not(.nolook14) .tc-sheet > .tc-done:focus-visible,html:not(.nolook14) .tc-sheet .tc-all:focus-visible,
html:not(.nolook14) .tc-sheet .tco-mv button:focus-visible,html:not(.nolook14) .tc-sheet > .tco-reset:focus-visible{outline:2px solid var(--j14c-ring);outline-offset:-2px}
/* a closing sheet (look14-cards.js leaves a picture of it for the slide down): never in the way */
html:not(.nolook14) .tc-ov.l14-ghost{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html:not(.nolook14) .tc-ov,html:not(.nolook14) .tc-sheet,html:not(.nolook14) .tc-sheet .tc-sw,html:not(.nolook14) .tc-sheet .tc-sw::after,
  html:not(.nolook14) .tc-sheet .tc-item,html:not(.nolook14) .tc-sheet .tc-all,html:not(.nolook14) .tc-sheet .tco-mv button,html:not(.nolook14) .tc-sheet > .tco-reset{transition:none!important}
}
/* the page behind stays where it is while the sheet is open (look14-cards.js sets html.l14-lock) */
html.l14-lock:not(.nolook14),html.l14-lock:not(.nolook14) body{overflow:hidden!important;overscroll-behavior:none}