/* DARK MODE IS OFF: the app looks the same on every device, whatever its light/dark setting. The dark styles are kept
   below under a media query that never matches ('(prefers-color-scheme: dark) and (max-width: 0px)'); to bring dark mode back, put
   '(prefers-color-scheme: dark)' back in place of it, and link look-dark.css again in index.html and demo/build_demo.py. */
/* The app's look. .th-glass (liquid glass) is the one in use: app.js puts it on <body>. .th-depth (floating
   windows) is kept as an alternative; the demo's "Look" menu can switch between them. Both keep the firm's
   logo, navy and gold, add more violet and indigo, and keep the app's normal type sizes (Inter).
   .th-glass  "Liquid glass": frosted, see-through panels floating over a soft, glowing color field (2D)
   .th-depth  "Floating windows": solid panels that hover over a deep violet-navy field, lift and tilt toward
              you in 3D when touched, with layered shadows */

/* ---------- shared: type and colors ---------- */
body.th-glass, body.th-depth { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: Inter, system-ui, sans-serif;
  --violet: #8a3ffc; --indigo: #4f46e5; --navy: #141432; --navy-2: #22224d; --ink: #141432; --line: rgba(20,20,50,.10); }
body.th-glass h1, body.th-depth h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
body.th-glass h2, body.th-depth h2 { font-size: 11.5px; letter-spacing: .16em; font-weight: 700; }
body.th-glass .att b, body.th-depth .att b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
body.th-glass .demo-banner, body.th-depth .demo-banner { position: relative; z-index: 30; }

/* =====================================================================================================
   LIQUID GLASS (2D)
   ===================================================================================================== */
body.th-glass { color: #141432;
  background:
    radial-gradient(42vw 42vw at 8% 12%, rgba(138, 63, 252, .30), transparent 70%),
    radial-gradient(46vw 46vw at 92% 8%, rgba(79, 70, 229, .32), transparent 70%),
    radial-gradient(40vw 40vw at 85% 85%, rgba(193, 138, 72, .22), transparent 70%),
    radial-gradient(50vw 50vw at 15% 90%, rgba(56, 120, 255, .22), transparent 70%),
    linear-gradient(160deg, #eef0fb 0%, #f3eefb 50%, #eef3fb 100%);
  background-attachment: fixed; }
/* the glass recipe: see-through white, blurred and brightened behind, a bright top edge, a soft shadow */
body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat,
body.th-glass .clist li button, body.th-glass .cemodal-in {
  background: rgba(255, 255, 255, .62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .75) !important; border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), 0 10px 30px -12px rgba(40, 30, 110, .28) !important; }
body.th-glass .ctable { border-radius: 18px; }
body.th-glass .ctable th { background: rgba(255,255,255,.35); color: #5b5c86; }
body.th-glass .ctable td { border-bottom-color: rgba(20,20,50,.06); }
body.th-glass .ctable tr:hover td { background: rgba(255,255,255,.55); }
body.th-glass .clist li button { border-radius: 14px; }
/* a top bar of dark glass */
body.th-glass .top { background: rgba(18, 18, 46, .62) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.14) !important; }
body.th-glass .top .menu { border-radius: 999px; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
/* tiles lift a little and brighten */
body.th-glass .tile { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
body.th-glass .tile:hover { transform: translateY(-2px); background: rgba(255,255,255,.78) !important; box-shadow: inset 0 1px 0 #fff, 0 16px 36px -14px rgba(40,30,110,.38) !important; }
body.th-glass .tile .ic { border-radius: 14px; background: linear-gradient(145deg, #2a2a6e, #141432); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
body.th-glass .tile .ic svg { stroke: #f0d3a8; }
body.th-glass .tile.hero { background: linear-gradient(120deg, rgba(138,63,252,.85), rgba(79,70,229,.85)) !important; color: #fff; border-color: rgba(255,255,255,.35) !important; }
body.th-glass .tile.hero small { color: rgba(255,255,255,.85); }
body.th-glass .tile.hero .ic { background: rgba(255,255,255,.22); }
body.th-glass .tile.hero .ic svg { stroke: #fff; }
body.th-glass .badge { border-radius: 999px; background: rgba(79,70,229,.12); color: #3f37c9; }
body.th-glass .att { border-radius: 20px; }
body.th-glass .att:hover { background: rgba(255,255,255,.8) !important; }
body.th-glass .att b { color: #141432; }
/* buttons: pills; the main one a glossy violet-to-indigo */
body.th-glass .btn { border-radius: 999px !important; }
body.th-glass .btn.pri { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(110deg, #8a3ffc, #4f46e5); border: 1px solid rgba(255,255,255,.35) !important; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(79,70,229,.65); }
body.th-glass .btn.pri:hover { filter: brightness(1.06); }
body.th-glass .btn.sec { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.8); color: #141432;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px rgba(40,30,110,.25); }
body.th-glass .btn.sec:hover { background: rgba(255,255,255,.8); }
body.th-glass .btn.link { color: #4f46e5; }
body.th-glass .chip, body.th-glass .seg { border-radius: 999px; background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.8); }
body.th-glass .chip.on, body.th-glass .seg button[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
body.th-glass .seg button { background: transparent; }
/* fields: soft, rounded */
body.th-glass label.f input, body.th-glass label.f select, body.th-glass label.f textarea, body.th-glass .filters input, body.th-glass .filters select {
  border-radius: 12px !important; background: rgba(255,255,255,.75); border: 1px solid rgba(20,20,50,.12); }
body.th-glass label.f input:focus, body.th-glass label.f select:focus, body.th-glass label.f textarea:focus { outline: 3px solid rgba(79,70,229,.25); outline-offset: 0; border-color: #4f46e5; }
/* tabs: a glass segmented bar */
body.th-glass .ctabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(40,30,110,.3); max-width: 100%; overflow-x: auto; }
body.th-glass .ctabs button { border-radius: 999px; border: 0 !important; padding: 7px 14px; }
body.th-glass .ctabs button[aria-selected="true"] { background: #fff; color: #141432; box-shadow: 0 2px 8px -2px rgba(40,30,110,.25); }
body.th-glass .chd { border-radius: 24px; }
body.th-glass .spill { border-radius: 999px; }
body.th-glass .note { border-radius: 14px; background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.85); }
body.th-glass .cemodal { background: rgba(20, 20, 50, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.th-glass .cemodal-in { background: rgba(255,255,255,.82) !important; }

/* =====================================================================================================
   FLOATING WINDOWS (3D)
   ===================================================================================================== */
body.th-depth { color: #141432;
  background:
    radial-gradient(60vw 40vw at 50% -10%, rgba(120, 90, 255, .45), transparent 70%),
    radial-gradient(40vw 40vw at 100% 40%, rgba(79, 70, 229, .30), transparent 70%),
    radial-gradient(40vw 40vw at 0% 70%, rgba(138, 63, 252, .25), transparent 70%),
    linear-gradient(180deg, #171538 0%, #1d1a45 45%, #221d50 100%);
  background-attachment: fixed; }
/* on the dark field, page titles and section labels are light */
body.th-depth main > h1, body.th-depth main > .row h1, body.th-depth .row > h1 { color: #fff; }
body.th-depth main > .lead, body.th-depth main > p.lead { color: #b9b5e6; }
body.th-depth h2 { color: #c9b8ff; }
body.th-depth .back { color: #c9c6ee; } body.th-depth .back:hover { color: #fff; }
body.th-depth .foot { color: #a8a4d6; } body.th-depth .foot .btn.link { color: #d6ccff; }
body.th-depth main > .row .m, body.th-depth .fcount, body.th-depth main > p.m { color: #b9b5e6; }
/* windows: solid, rounded, floating on layered shadows with a lit top edge */
body.th-depth .tile, body.th-depth .card, body.th-depth .chd, body.th-depth .att, body.th-depth .ctable, body.th-depth .stat, body.th-depth .cemodal-in, body.th-depth .clist li button {
  background: linear-gradient(180deg, #ffffff 0%, #f7f6ff 100%) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.08), 0 8px 16px -6px rgba(8, 4, 40, .35), 0 28px 48px -18px rgba(8, 4, 40, .55) !important; }
body.th-depth .ctable { border-radius: 16px; }
body.th-depth .ctable th { background: #f1effc; color: #5b5c86; }
body.th-depth .clist li button { border-radius: 12px; }
/* in 3D: the home's windows stand in a slight perspective and come forward when touched */
body.th-depth .tiles, body.th-depth .attn { perspective: 1100px; }
body.th-depth .tile, body.th-depth .att { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; will-change: transform; }
body.th-depth .tile:hover, body.th-depth .att:hover { transform: translateY(-6px) rotateX(5deg) scale(1.015);
  box-shadow: inset 0 1px 0 #fff, 0 2px 2px rgba(0,0,0,.08), 0 18px 28px -10px rgba(8,4,40,.45), 0 44px 70px -24px rgba(8,4,40,.7) !important; }
body.th-depth .tile:active, body.th-depth .att:active { transform: translateY(-2px) rotateX(2deg) scale(.995); }
body.th-depth .tile .ic { border-radius: 12px; background: linear-gradient(145deg, #5b4cf0, #2a1f8f); box-shadow: 0 6px 14px -6px rgba(42,31,143,.8), inset 0 1px 0 rgba(255,255,255,.3); transform: translateZ(18px); }
body.th-depth .tile .ic svg { stroke: #fff; }
body.th-depth .tile.hero { background: linear-gradient(120deg, #2a1f8f 0%, #5b2bd6 55%, #8a3ffc 100%) !important; color: #fff; border-color: rgba(255,255,255,.25) !important; }
body.th-depth .tile.hero small { color: rgba(255,255,255,.85); }
body.th-depth .tile.hero .ic { background: linear-gradient(145deg, #e2b77d, #b77f3e); }
body.th-depth .tile.hero .ic svg { stroke: #1d1a45; }
body.th-depth .badge { border-radius: 999px; background: #efeaff; color: #4f46e5; }
body.th-depth .att b { color: #141432; }
/* the top bar: a dark pane with a gold line (the firm's) under a violet glow */
body.th-depth .top { background: rgba(15, 13, 40, .78) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(193,138,72,.7) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
body.th-depth .top .menu { border-radius: 10px; }
/* buttons: raised, with depth when pressed */
body.th-depth .btn { border-radius: 12px !important; transition: transform .12s ease, box-shadow .12s ease; }
body.th-depth .btn.pri { background: linear-gradient(180deg, #6d5cff 0%, #4f46e5 100%); border: 0 !important; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #2f2a9e, 0 10px 18px -6px rgba(47,42,158,.7); }
body.th-depth .btn.pri:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #2f2a9e, 0 4px 8px -4px rgba(47,42,158,.7); }
body.th-depth .btn.sec { background: #fff; border: 1px solid #dcd8f5; color: #141432; box-shadow: 0 2px 0 #e3e0f6, 0 6px 12px -8px rgba(8,4,40,.4); }
body.th-depth .btn.sec:active { transform: translateY(2px); box-shadow: 0 0 0 #e3e0f6; }
body.th-depth main > .row .btn.sec, body.th-depth main > .row .seg { box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
body.th-depth .btn.link { color: #4f46e5; }
body.th-depth main > .btn.link, body.th-depth main > .row .btn.link { color: #d6ccff; }
body.th-depth .chip.on, body.th-depth .seg button[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
body.th-depth .seg { border-radius: 12px; }
body.th-depth label.f input, body.th-depth label.f select, body.th-depth label.f textarea, body.th-depth .filters input, body.th-depth .filters select {
  border-radius: 10px !important; border: 1px solid #dcd8f5; box-shadow: inset 0 1px 2px rgba(20,20,50,.06); }
body.th-depth .filters input, body.th-depth .filters select { box-shadow: 0 6px 16px -8px rgba(0,0,0,.55); border-color: transparent; }
body.th-depth label.f input:focus, body.th-depth label.f select:focus, body.th-depth label.f textarea:focus { outline: 3px solid rgba(79,70,229,.3); outline-offset: 0; border-color: #4f46e5; }
/* tabs: a floating tab bar under the case window */
body.th-depth .ctabs { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16) !important; border-radius: 14px; padding: 4px; gap: 2px; display: flex; overflow-x: auto; }
body.th-depth .ctabs button { color: #cfcaf5; border-radius: 10px; border: 0 !important; }
body.th-depth .ctabs button b { color: inherit; }
body.th-depth .ctabs button[aria-selected="true"] { background: #fff; color: #141432; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
body.th-depth .chd { border-radius: 22px; }
body.th-depth .spill { border-radius: 999px; }
body.th-depth .note { border-radius: 12px; }
body.th-depth main > .note { box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
body.th-depth .cemodal { background: rgba(10, 8, 30, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* people who ask their device for less motion get no tilting or lifting */
@media (prefers-reduced-motion: reduce) {
  body.th-glass .tile:hover, body.th-depth .tile:hover, body.th-depth .att:hover { transform: none; }
}

/* fixes after checking the screens */
body.th-glass .top { background: rgba(16, 16, 42, .84) !important; }
body.th-depth .ctabs button b { background: rgba(255,255,255,.16); color: #fff; }
body.th-depth .ctabs button[aria-selected="true"] b { background: #efeaff; color: #4f46e5; }
body.th-depth main > .hint, body.th-depth #cs-list > .hint, body.th-depth main > p.m { color: #b9b5e6; }

/* ---------- sharper (after review: less haze, crisp edges, bright thin lines) ---------- */
/* header: solid ink, no blur, with a bright hairline of violet to blue under it */
body.th-glass .top, body.th-depth .top { background: #0d0c1f !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0 !important; box-shadow: none; }
body.th-glass .top::after, body.th-depth .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(138,63,252,0) 0%, #a066ff 18%, #6f7dff 50%, #8fd3ff 72%, rgba(143,211,255,0) 100%); }
body.th-depth .top::after { background: linear-gradient(90deg, rgba(193,138,72,0) 0%, #d9a865 15%, #a066ff 50%, #6f7dff 80%, rgba(111,125,255,0) 100%); }
body.th-glass .top .menu, body.th-depth .top .menu { background: transparent; border: 1px solid rgba(160,150,255,.45); }
body.th-glass .top .menu:hover, body.th-depth .top .menu:hover { border-color: #b9a8ff; }

/* glass: a cleaner field (fewer, fainter glows) with thin bright rings drawn on it */
body.th-glass { background:
    radial-gradient(38vw 38vw at 90% 6%, rgba(111, 125, 255, .18), transparent 70%),
    radial-gradient(34vw 34vw at 6% 30%, rgba(160, 102, 255, .14), transparent 70%),
    linear-gradient(180deg, #f6f6fc 0%, #f2f1fa 100%);
  background-attachment: fixed; }
body.th-glass::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 92% 14%, transparent 299px, rgba(124, 108, 255, .30) 300px, transparent 301.5px),
    radial-gradient(circle at 92% 14%, transparent 419px, rgba(124, 108, 255, .16) 420px, transparent 421.5px),
    radial-gradient(circle at 4% 96%, transparent 259px, rgba(160, 102, 255, .22) 260px, transparent 261.5px); }
body.th-glass main, body.th-glass .top { position: relative; z-index: 1; }
body.th-glass .top { position: sticky; z-index: 20; }
/* glass panels: mostly solid white, a crisp thin lavender edge, a tight shadow */
body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat,
body.th-glass .clist li button, body.th-glass .cemodal-in {
  background: rgba(255, 255, 255, .9) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(124, 108, 255, .28) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 20, 60, .05), 0 14px 28px -20px rgba(40, 30, 110, .45) !important; }
body.th-glass .tile:hover, body.th-glass .att:hover { background: #fff !important; border-color: rgba(111, 125, 255, .75) !important; }
body.th-glass .chd { border-top: 1px solid rgba(124,108,255,.28) !important; }
body.th-glass .ctable th { background: #f5f4fd; }
body.th-glass { --muted: #55577a; }
body.th-glass .tile small, body.th-glass .att span, body.th-glass .lead, body.th-glass .chd-sub { color: #55577a; }
/* the main tile: a crisp gradient with a bright line along its top */
body.th-glass .tile.hero { background: linear-gradient(115deg, #7b34f0 0%, #5b46ea 55%, #4a5cf0 100%) !important; border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 16px 30px -18px rgba(79,70,229,.8) !important; }
/* tabs, secondary buttons and chips: thin lavender lines instead of haze */
body.th-glass .ctabs { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(124,108,255,.28) !important; box-shadow: 0 1px 2px rgba(20,20,60,.05); }
body.th-glass .ctabs button[aria-selected="true"] { background: linear-gradient(110deg, #8a3ffc, #4f46e5); color: #fff; box-shadow: none; }
body.th-glass .ctabs button[aria-selected="true"] b { background: rgba(255,255,255,.22); color: #fff; }
body.th-glass .btn.sec { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(124,108,255,.38); box-shadow: none; }
body.th-glass .btn.sec:hover { border-color: #6f7dff; color: #4f46e5; }
body.th-glass .chip, body.th-glass .seg { background: #fff; border-color: rgba(124,108,255,.38); }
body.th-glass label.f input, body.th-glass label.f select, body.th-glass label.f textarea, body.th-glass .filters input, body.th-glass .filters select { background: #fff; border-color: rgba(124,108,255,.30); }
body.th-glass h2 { color: #5d5ad6; }
body.th-glass .cemodal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 12, 31, .35); }
body.th-glass .top::after { height: 1.5px; background: linear-gradient(90deg, #8a3ffc 0%, #a066ff 25%, #6f7dff 55%, #8fd3ff 100%); box-shadow: 0 0 10px rgba(138, 63, 252, .55), 0 0 2px rgba(143, 211, 255, .6); }
body.th-depth .top::after { height: 1.5px; background: linear-gradient(90deg, #d9a865 0%, #a066ff 45%, #6f7dff 75%, #8fd3ff 100%); box-shadow: 0 0 10px rgba(160, 102, 255, .5); }

/* ---------- the website's purple (a deeper, bluer indigo), no rings; big colored blocks get a gentle gradient ---------- */
body.th-glass, body.th-depth { --violet: #6a5fe0; --indigo: #4b3fd0; --site: #5a4fd8; --site-deep: #3f35b8; --site-light: #7a70e6; }
body.th-glass::before { display: none; }   /* the thin rings are gone; the color field still stays put while the page scrolls over it */
body.th-glass { background:
    radial-gradient(40vw 40vw at 92% 4%, rgba(90, 79, 216, .18), transparent 70%),
    radial-gradient(36vw 36vw at 4% 34%, rgba(63, 53, 184, .12), transparent 70%),
    radial-gradient(36vw 36vw at 70% 96%, rgba(122, 112, 230, .12), transparent 70%),
    linear-gradient(180deg, #f6f6fc 0%, #f1f0fa 100%);
  background-attachment: fixed; }
body.th-depth { background:
    radial-gradient(60vw 40vw at 50% -10%, rgba(90, 79, 216, .45), transparent 70%),
    radial-gradient(40vw 40vw at 100% 40%, rgba(63, 53, 184, .32), transparent 70%),
    radial-gradient(40vw 40vw at 0% 70%, rgba(122, 112, 230, .22), transparent 70%),
    linear-gradient(180deg, #110e30 0%, #17134a 50%, #1b1655 100%);
  background-attachment: fixed; }
/* header hairline in the website's indigo */
body.th-glass .top::after { background: linear-gradient(90deg, #3f35b8 0%, #5a4fd8 35%, #7a70e6 70%, #9fb4ff 100%); box-shadow: 0 0 10px rgba(90, 79, 216, .6); }
body.th-depth .top::after { background: linear-gradient(90deg, #d9a865 0%, #7a70e6 45%, #5a4fd8 75%, #9fb4ff 100%); box-shadow: 0 0 10px rgba(90, 79, 216, .55); }
/* large colored blocks: a soft top-to-bottom shade of the same indigo, not a two-color sweep */
body.th-glass .tile.hero, body.th-depth .tile.hero { background: linear-gradient(160deg, #6a5fe0 0%, #5a4fd8 45%, #4339c4 100%) !important; }
body.th-glass .tile.hero:hover, body.th-depth .tile.hero:hover { background: linear-gradient(160deg, #6f64e6 0%, #5f54de 45%, #473dca 100%) !important; }
body.th-glass .btn.pri { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), linear-gradient(170deg, #6458de 0%, #4b3fd0 100%); box-shadow: 0 8px 18px -8px rgba(75,63,208,.6); }
body.th-depth .btn.pri { background: linear-gradient(180deg, #6a5fe0 0%, #4b3fd0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #2f278f, 0 10px 18px -6px rgba(47,39,143,.7); }
body.th-glass .ctabs button[aria-selected="true"] { background: linear-gradient(170deg, #6458de, #4b3fd0); }
body.th-glass .chip.on, body.th-glass .seg button[aria-pressed="true"], body.th-depth .chip.on, body.th-depth .seg button[aria-pressed="true"] { background: linear-gradient(170deg, #6458de, #4b3fd0); border-color: #4b3fd0; }
body.th-depth .tile .ic { background: linear-gradient(160deg, #6a5fe0, #3f35b8); }
body.th-glass h2 { color: #5a4fd8; } body.th-depth h2 { color: #b3aaff; }
body.th-glass .btn.link, body.th-depth .btn.link, body.th-glass a { color: #4b3fd0; }
body.th-glass .badge, body.th-depth .badge { background: rgba(90,79,216,.12); color: #4339c4; }
body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat, body.th-glass .clist li button, body.th-glass .cemodal-in { border-color: rgba(90, 79, 216, .26) !important; }
body.th-glass .tile:hover, body.th-glass .att:hover { border-color: rgba(90, 79, 216, .7) !important; }

/* ---------- the color field stays still while the windows scroll over it (phones too) ----------
   Phones ignore a "fixed" page background, so the field is its own layer pinned to the screen. The glows are a
   little more defined so the movement over them shows. */
body.th-glass, body.th-depth { background-attachment: scroll; }
body.th-glass { background: #f3f2fb; }
body.th-depth { background: #120f33; }
body.th-glass::before, body.th-depth::before { display: block; content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.th-glass::before { background:
    radial-gradient(34vmax 30vmax at 96% 6%, rgba(90, 79, 216, .30), rgba(90, 79, 216, 0) 70%),
    radial-gradient(30vmax 26vmax at 2% 38%, rgba(63, 53, 184, .20), rgba(63, 53, 184, 0) 70%),
    radial-gradient(30vmax 26vmax at 78% 98%, rgba(122, 112, 230, .24), rgba(122, 112, 230, 0) 70%),
    radial-gradient(22vmax 18vmax at 30% 75%, rgba(193, 138, 72, .10), rgba(193, 138, 72, 0) 70%),
    linear-gradient(180deg, #f6f6fc 0%, #f0eefa 100%); }
body.th-depth::before { background:
    radial-gradient(50vmax 32vmax at 50% -8%, rgba(90, 79, 216, .55), rgba(90, 79, 216, 0) 70%),
    radial-gradient(32vmax 28vmax at 100% 45%, rgba(63, 53, 184, .40), rgba(63, 53, 184, 0) 70%),
    radial-gradient(32vmax 28vmax at 0% 78%, rgba(122, 112, 230, .30), rgba(122, 112, 230, 0) 70%),
    linear-gradient(180deg, #110e30 0%, #17134a 50%, #1b1655 100%); }
body.th-glass main, body.th-depth main { position: relative; z-index: 1; }
body.th-glass .top, body.th-depth .top { position: sticky; z-index: 20; }
body.th-glass .demo-banner, body.th-depth .demo-banner { z-index: 30; }

/* header: the website's header color (deep navy-indigo) */
body.th-glass .top, body.th-depth .top { background: #161337 !important; }

/* Home's icons: shiny purple — a violet-to-indigo gradient, a glossy highlight across the top, white symbols, a soft colored glow */
body.th-glass .tile .ic { position: relative; overflow: hidden; border-radius: 13px;
  background: linear-gradient(145deg, #9a8cff 0%, #6a5fe0 42%, #4b3fd0 78%, #3a2fb0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(30, 20, 110, .35), 0 6px 14px -6px rgba(75, 63, 208, .75); }
body.th-glass .tile .ic::after { content: ""; position: absolute; left: -10%; right: -10%; top: -35%; height: 70%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08)); pointer-events: none; }
body.th-glass .tile .ic svg { position: relative; z-index: 1; stroke: #fff; filter: drop-shadow(0 1px 1px rgba(30, 20, 110, .45)); }
body.th-glass .tile:hover .ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(30, 20, 110, .35), 0 8px 18px -6px rgba(75, 63, 208, .9); }
/* on the big indigo tile the icon is a shinier, lighter purple so it stands out */
body.th-glass .tile.hero .ic { background: linear-gradient(145deg, #c4b9ff 0%, #8f82f5 45%, #6a5fe0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px rgba(20, 10, 80, .7); }
/* (a deeper purple, after review) */
body.th-glass .tile .ic { background: linear-gradient(145deg, #7466ea 0%, #4f42d2 42%, #3a2eb4 78%, #2a2090 100%); }
body.th-glass .tile .ic::after { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.05)); }
body.th-glass .tile.hero .ic { background: linear-gradient(145deg, #a597ff 0%, #7366ea 45%, #5446d6 100%); }

/* (after review) header a bit lighter; icons a hair deeper; the partners' "Net fees" total keeps its own gold color */
body.th-glass .top, body.th-depth .top { background: #211c50 !important; }
body.th-glass .tile .ic { background: linear-gradient(145deg, #6c5ee4 0%, #483bcb 42%, #3529ac 78%, #261c88 100%); }
body.th-glass .stat.hi, body.th-depth .stat.hi { background: linear-gradient(160deg, #fffaf1 0%, #fbeedb 100%) !important; border: 1px solid rgba(193, 138, 72, .6) !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -16px rgba(138, 90, 34, .55) !important; }
body.th-glass .stat.hi .sn, body.th-depth .stat.hi .sn { color: #7a4c17; }
body.th-glass .stat.hi .sl, body.th-depth .stat.hi .sl { color: #8a5a22; font-weight: 600; }

/* pop-up forms: solid (no see-through blur, which makes phones stutter while scrolling); full screen on a phone */
body.th-glass .cemodal-in, body.th-depth .cemodal-in { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 600px) {
  body.th-glass .cemodal-in, body.th-depth .cemodal-in { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
}
/* the page content sits on its own layer (over the still color field); while a pop-up form is open that layer comes
   above the header, so the form covers the whole screen */
body.th-glass.modal-open main, body.th-depth.modal-open main { z-index: 70; }
/* panels are nearly solid, so they don't blur what's behind them. (A blur would also trap a pop-up form inside its panel,
   which is what made the new calendar entry form scroll with the page.) */
body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat, body.th-glass .clist li button { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.th-glass .card:has(.cemodal), body.th-depth .card:has(.cemodal) { transform: none !important; }

/* =====================================================================================================
   REDESIGN (branch "redesign"; everything before it is tagged pre-redesign)
   ===================================================================================================== */
/* ---------- status colors: soft tints with dark text; the stages step from cool to warm to green; red is kept for risk ---------- */
.spill.st1, .spill.st2, .spill.st3, .spill.st4, .spill.st5, .spill.st6, .spill.st7, .spill.st8, .spill.st9 { font-weight: 600; box-shadow: inset 0 0 0 1px rgba(20, 20, 60, .06); }
.spill.st1 { background: #fde8ea; color: #a11d33; }   /* Intake sent: red family (these need attention; there should be few) */
.spill.st2 { background: #f9c9cf; color: #9b1325; }   /* Intake received */
.spill.st3 { background: #d92d3a; color: #fff; }   /* Contract sent: the strongest red */
.spill.st4 { background: #eee9fe; color: #4b3fd0; }   /* Signed up */
.spill.st5 { background: #f3e9fd; color: #6a2db3; }   /* Treating */
.spill.st6 { background: #fcefdc; color: #87520a; }   /* Demand (money: the firm's gold) */
.spill.st7 { background: #dde7fb; color: #1d3f8f; }   /* Litigation: steel blue */
.spill.st8 { background: linear-gradient(135deg, #1fae5b, #0f8a5f); color: #fff; box-shadow: inset 0 0 0 1px rgba(193, 138, 72, .75), 0 1px 3px rgba(15, 138, 95, .35); }   /* Settled: solid emerald green (the money is coming), with the firm's gold edge */
.spill.st9 { background: #eceef2; color: #4b5563; }   /* Closed */
.spill.s-bad { background: #fde8e8; color: #b42318; }   /* risk only */
.spill.s-wait { background: #fdf1dc; color: #8a5300; }
.spill.s-ok { background: #e3f4e9; color: #16703e; }

/* ---------- navigation: sidebar (computer), tab bar (phone), search ---------- */
.sidenav, .tabbar { display: none; }
.sidenav svg, .tabbar svg, .gsearch svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
@media (min-width: 1100px) {
  body.has-nav .sidenav { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 15; left: 0; top: var(--top-h, 58px); bottom: 0; width: 228px;
    padding: 16px 12px; background: rgba(255, 255, 255, .72); border-right: 1px solid rgba(90, 79, 216, .16); overflow-y: auto; }
  body.has-nav main { margin-left: calc(244px + max(0px, (100vw - 244px - 760px) / 2)); margin-right: auto; }
  body.has-nav.wide main { margin-left: 244px; max-width: calc(100vw - 260px); }
  .sidenav a, .sidenav .snsearch { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: #3d3f66; cursor: pointer; }
  .sidenav a:hover { background: rgba(90, 79, 216, .08); color: #2b2a6e; }
  .sidenav a.on { background: linear-gradient(170deg, #6458de, #4b3fd0); color: #fff; box-shadow: 0 6px 14px -8px rgba(75, 63, 208, .8); }
  .sidenav .snsearch { border: 1px solid rgba(90, 79, 216, .25); background: #fff; color: #6b6d8f; margin-bottom: 10px; }
  .sidenav .snsearch span { flex: 1; } .sidenav kbd { font: 600 11px Inter, sans-serif; color: #8a8cab; border: 1px solid #dedcf3; border-radius: 5px; padding: 1px 5px; }
  .sidenav .snsp { flex: 1; min-height: 16px; }
  .sidenav .sncta { color: #4b3fd0; border: 1px dashed rgba(90, 79, 216, .45); justify-content: center; }
  .sidenav .sncta:hover { background: rgba(90, 79, 216, .06); }
  .sidenav .sncta.on { color: #fff; border-style: solid; }
  /* show / hide the menu: hidden leaves a narrow rail of icons (each named on hover) and gives the page the room */
  .sidenav .sntog { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; padding: 7px 12px; margin: -6px 0 6px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #6b6d8f; cursor: pointer; }
  .sidenav .sntog:hover { background: rgba(90, 79, 216, .08); color: #2b2a6e; }
  .sidenav .sntog:focus-visible { outline: 2px solid #6a37e8; outline-offset: 2px; }
  body.has-nav .sidenav { transition: width .18s ease, padding .18s ease; }
  body.has-nav main { transition: margin-left .18s ease, max-width .18s ease; }
  body.has-nav.nav-min .sidenav { width: 64px; padding: 16px 8px; }
  body.has-nav.nav-min .sidenav span, body.has-nav.nav-min .sidenav kbd { display: none; }
  body.has-nav.nav-min .sidenav a, body.has-nav.nav-min .sidenav .snsearch, body.has-nav.nav-min .sidenav .sntog { justify-content: center; padding: 10px 0; gap: 0; }
  body.has-nav.nav-min .sidenav .snsearch { border-color: transparent; background: transparent; }
  body.has-nav.nav-min main { margin-left: calc(80px + max(0px, (100vw - 80px - 760px) / 2)); }
  body.has-nav.nav-min.wide main { margin-left: 80px; max-width: calc(100vw - 96px); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) { body.has-nav .sidenav, body.has-nav main { transition: none; } }
/* the bottom tab bar on phones and tablets (anything narrower than the sidebar layout), so there's always navigation */
@media (max-width: 1099px) {
  body.has-nav .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    border-top: 1px solid rgba(90, 79, 216, .18); }
  .tabbar a, .tabbar button { all: unset; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 10.5px; font-weight: 600; color: #6b6d8f; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar a.on { color: #4b3fd0; }
  body.has-nav main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.has-nav.modal-open .tabbar { display: none; }
}
/* search */
.gsearch { position: fixed; inset: 0; z-index: 90; background: rgba(13, 12, 31, .38); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.gs-in { width: 100%; max-width: 620px; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(13, 12, 31, .6), 0 0 0 1px rgba(90, 79, 216, .2); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.gs-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #ecebf7; color: #6b6d8f; }
.gs-bar input { flex: 1; border: 0; outline: 0; font: 500 17px Inter, sans-serif; color: #141432; background: transparent; min-width: 0; }
.gs-x { all: unset; cursor: pointer; font-size: 14px; font-weight: 600; color: #4b3fd0; }
.gs-res { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.gs-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5a4fd8; padding: 10px 10px 4px; }
.gs-hint { color: #6b6d8f; font-size: 14px; padding: 14px 12px; margin: 0; }
.gs-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.gs-row.on, .gs-row:hover { background: #f1effd; }
.gs-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, #6c5ee4, #3529ac); flex: 0 0 32px; }
.gs-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #4b3fd0; background: #f1effd; flex: 0 0 32px; }
.gs-t { flex: 1; min-width: 0; } .gs-t b { display: block; font-weight: 600; color: #141432; } .gs-t small { display: block; color: #6b6d8f; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .gsearch { padding: 0; background: #fff; } .gs-in { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; } .gs-bar { padding-top: calc(14px + env(safe-area-inset-top)); } }
body.has-nav .tabbar a, body.has-nav .tabbar button { color: #74769a; }
body.has-nav .tabbar a.on { color: #4b3fd0; }
body.has-nav .sidenav a { color: #3d3f66; } body.has-nav .sidenav a:hover { color: #2b2a6e; }
body.has-nav .sidenav a.on { color: #fff; } body.has-nav .sidenav .sncta { color: #4b3fd0; } body.has-nav .sidenav .sncta.on { color: #fff; }

/* ---------- letters: numbered steps ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ltstep { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #efedf8; }
.ltstep:first-of-type { border-top: 0; padding-top: 4px; }
.ltn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #6a5fe0, #3f35b8); box-shadow: 0 4px 10px -4px rgba(75,63,208,.7); }
.ltb h4 { margin: 3px 0 10px; font-size: 15px; font-weight: 600; color: #141432; } .ltb h4 .m { font-weight: 400; font-size: 12.5px; color: #6b6d8f; }
.ltb label.f { margin-top: 0; } .ltb .grid { margin-top: 10px; } .ltb .grid:first-child { margin-top: 0; }
.ltvia { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ltvia .chip[aria-pressed="true"] { background: linear-gradient(170deg, #6458de, #4b3fd0); border-color: #4b3fd0; color: #fff; }

/* ---------- feedback: loading shapes, "Saved" toast, pages easing in, help behind ?, Yes/No toggle, empty states ---------- */
.empty.loading { position: relative; color: transparent !important; min-height: 92px; padding: 14px 0 !important; overflow: hidden; }
.empty.loading::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 74px; border-radius: 12px;
  background: linear-gradient(#ecebf7, #ecebf7) 0 0 / 62% 14px no-repeat, linear-gradient(#f1f0fa, #f1f0fa) 0 28px / 88% 12px no-repeat, linear-gradient(#f1f0fa, #f1f0fa) 0 52px / 74% 12px no-repeat; }
.empty.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%); transform: translateX(-100%); animation: vdShimmer 1.2s infinite; }
@keyframes vdShimmer { to { transform: translateX(100%); } }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #1d1a44; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 30px -10px rgba(13, 12, 31, .6); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; fill: none; stroke: #8ef0b4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1099px) { body.has-nav .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }
#view.enter > * { animation: vdEnter .22s ease-out backwards; }   /* (no lasting transform: it would trap pop-up forms) */
@keyframes vdEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
details.help { margin-top: 6px; } details.help summary { list-style: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #4b3fd0; background: #f1effd; border: 1px solid rgba(90, 79, 216, .3); }
details.help summary::-webkit-details-marker { display: none; }
details.help[open] summary { background: #4b3fd0; color: #fff; } details.help small { display: block; margin-top: 6px; }
/* Yes / No as one two-part switch */
.ce-dl .mrel.inl { display: inline-flex !important; gap: 0 !important; border: 1px solid rgba(90, 79, 216, .35); border-radius: 999px; padding: 3px; background: #fff; margin-top: 6px; }
.ce-dl .mrel.inl label { position: relative; display: block !important; padding: 7px 22px; border-radius: 999px; font-weight: 600; cursor: pointer; color: #3d3f66; }
.ce-dl .mrel.inl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ce-dl .mrel.inl label:has(input:checked) { background: linear-gradient(170deg, #6458de, #4b3fd0); color: #fff; box-shadow: 0 4px 10px -4px rgba(75, 63, 208, .7); }
.ce-dl .mrel.inl label:has(input:focus-visible) { outline: 2px solid #4b3fd0; outline-offset: 2px; }
.ce-dl .dlnote { display: block; margin-top: 6px; }
/* empty states: a quiet icon over the message */
.empty:not(.loading) { text-align: center; color: #6b6d8f; padding: 18px 8px !important; }
.empty:not(.loading)::before { content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 12px; background: #f1effd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---------- one system: three corner sizes, one type scale, steady spacing ---------- */
body.th-glass { --r-s: 10px; --r-m: 16px; --r-l: 20px; }
body.th-glass .tile, body.th-glass .card, body.th-glass .att, body.th-glass .stat, body.th-glass .ctable, body.th-glass .clist li button, body.th-glass .kn { border-radius: var(--r-m) !important; }
body.th-glass .chd, body.th-glass .cemodal-in, body.th-glass .gs-in { border-radius: var(--r-l) !important; }
body.th-glass label.f input, body.th-glass label.f select, body.th-glass label.f textarea, body.th-glass .filters input, body.th-glass .filters select, body.th-glass .note, body.th-glass .crow input, body.th-glass .invo input { border-radius: var(--r-s) !important; }
body.th-glass .invo input { border: 1px solid rgba(90, 79, 216, .3); padding: 9px 11px; font-size: 14.5px; background: #fff; }
body.th-glass { font-size: 15px; }
body.th-glass h1 { font-size: 26px; } body.th-glass .card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
body.th-glass .tile b { font-size: 15px; font-weight: 600; } body.th-glass .tile small, body.th-glass .m, body.th-glass .hint { font-size: 13px; }
body.th-glass .card, body.th-glass .tile { padding: 16px; } body.th-glass .tiles, body.th-glass .attn { gap: 12px; }
body.th-glass .ctable td, body.th-glass table.mini td, body.th-glass .kn b, body.th-glass .att b, body.th-glass .stat .sn { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #view.enter > *, .empty.loading::after { animation: none; } .toast { transition: none; } }

/* ---------- dark mode: follows the phone or computer's setting ---------- */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  html:root:root { color-scheme: dark !important; }
  body.th-glass { --ink: #ecebfa; --muted: #a9a7cc; --line: rgba(160, 150, 255, .16); background: #1a1838; color: #ecebfa; }
  body.th-glass::before { background:
      radial-gradient(34vmax 30vmax at 96% 6%, rgba(90, 79, 216, .32), rgba(90, 79, 216, 0) 70%),
      radial-gradient(30vmax 26vmax at 2% 38%, rgba(63, 53, 184, .26), rgba(63, 53, 184, 0) 70%),
      radial-gradient(30vmax 26vmax at 78% 98%, rgba(122, 112, 230, .2), rgba(122, 112, 230, 0) 70%),
      linear-gradient(180deg, #1d1b3d 0%, #16142f 100%) !important; }
  body.th-glass h1, body.th-glass h3, body.th-glass h4, body.th-glass b, body.th-glass strong, body.th-glass .att b, body.th-glass .kn b, body.th-glass .gs-t b, body.th-glass .stg-t b, body.th-glass .stg li.sg-now { color: #f3f2ff; }
  body.th-glass .m, body.th-glass .hint, body.th-glass .lead, body.th-glass .tile small, body.th-glass .att span, body.th-glass .chd-sub, body.th-glass .kn span, body.th-glass .stg-t, body.th-glass .gs-t small, body.th-glass .gs-hint, body.th-glass .empty, body.th-glass .foot, body.th-glass .back { color: #a9a7cc !important; }
  body.th-glass a, body.th-glass .btn.link, body.th-glass h2, body.th-glass .gs-h, body.th-glass .gs-x { color: #b3abff !important; }
  body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat, body.th-glass .clist li button, body.th-glass .cemodal-in, body.th-glass .gs-in, body.th-glass .seg, body.th-glass .ctabs {
    background: #262350 !important; border-color: rgba(160, 150, 255, .18) !important; color: #ecebfa; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 32px -20px rgba(0,0,0,.8) !important; }
  body.th-glass .tile:hover, body.th-glass .att:hover { background: #302c60 !important; border-color: rgba(160, 150, 255, .45) !important; }
  body.th-glass .tile.hero { background: linear-gradient(160deg, #5a4fd8 0%, #4a3fd0 45%, #3a2fb4 100%) !important; }
  body.th-glass .kn, body.th-glass .gs-ic, body.th-glass details.help summary { background: #2f2c5e; border-color: rgba(160, 150, 255, .16); }
  body.th-glass label.f input, body.th-glass label.f select, body.th-glass label.f textarea, body.th-glass .filters input, body.th-glass .filters select, body.th-glass .crow input, body.th-glass .invo input, body.th-glass input, body.th-glass select, body.th-glass textarea {
    background-color: #1e1c40 !important; color: #ecebfa !important; border-color: rgba(160, 150, 255, .28) !important; }
  body.th-glass ::placeholder { color: #7d7ba3; }
  body.th-glass .btn.sec, body.th-glass .chip, body.th-glass .seg button { background: #2e2b5e !important; color: #ecebfa !important; border-color: rgba(160, 150, 255, .3) !important; }
  body.th-glass .chip.on, body.th-glass .seg button[aria-pressed="true"], body.th-glass .ltvia .chip[aria-pressed="true"] { background: linear-gradient(170deg, #6458de, #4b3fd0) !important; color: #fff !important; }
  body.th-glass .ctable th, body.th-glass table.mini th { background: #2d2a5a !important; color: #b3abff; }
  body.th-glass .ctable td, body.th-glass table.mini td { border-color: rgba(255,255,255,.06) !important; color: #e3e2f6; }
  body.th-glass .ctable tr:hover td, body.th-glass table.mini tr.click:hover { background: rgba(255,255,255,.04) !important; }
  body.th-glass .ctabs button { color: #a9a7cc; } body.th-glass .ctabs button b { background: rgba(255,255,255,.08); color: #d6d4f2; }
  body.th-glass .note { background: #2e2b5e; border-color: rgba(160, 150, 255, .25); color: #ecebfa; }
  body.th-glass .note.ok { background: #13301f; border-color: #2c6b45; } body.th-glass .note.bad { background: #3a1820; border-color: #7a3036; }
  body.th-glass .closeq, body.th-glass .solwarn { background: #2a2342 !important; border-color: rgba(193, 138, 72, .4) !important; color: #ecebfa; }
  body.th-glass .solwarn.bad { background: #3a1820 !important; border-color: #7a3036 !important; }
  body.th-glass .stat.hi { background: linear-gradient(160deg, #2e2516, #261e12) !important; border-color: rgba(193, 138, 72, .6) !important; }
  body.th-glass .stat.hi .sn { color: #f0c98e; } body.th-glass .stat.hi .sl { color: #d9a865; }
  body.th-glass .spill.st1 { background: #4a1d29; color: #ffb7c1; } body.th-glass .spill.st2 { background: #6a1f2d; color: #ffd0d6; }
  body.th-glass .spill.st3 { background: #d0303f; color: #fff; } body.th-glass .spill.st4 { background: #2a2360; color: #c4bbff; }
  body.th-glass .spill.st5 { background: #34205a; color: #d8b9ff; } body.th-glass .spill.st6 { background: #3a2b14; color: #f0c98e; }
  body.th-glass .spill.st7 { background: #1f3260; color: #a9c4ff; } body.th-glass .spill.st8 { background: linear-gradient(135deg, #25c26a, #129a6a); color: #fff; box-shadow: inset 0 0 0 1px #d8a868; }
  body.th-glass .spill.st9 { background: #2a2c33; color: #c4c7cf; } body.th-glass .spill.s-bad { background: #3a1820; color: #ff9b94; }
  body.th-glass .spill.s-wait { background: #3a2b14; color: #f0c98e; } body.th-glass .spill.s-ok { background: #133222; color: #8fe0ad; }
  body.th-glass .badge { background: rgba(160, 150, 255, .16) !important; color: #c4bbff !important; }
  body.th-glass .sidenav { background: rgba(32, 30, 66, .92) !important; border-right-color: rgba(160, 150, 255, .14) !important; }
  body.has-nav.th-glass .sidenav a { color: #c9c7ea; } body.has-nav.th-glass .sidenav a.on { color: #fff; } body.has-nav.th-glass .sidenav .sncta { color: #b3abff; }
  body.th-glass .sidenav .snsearch { background: #262350; color: #a9a7cc; border-color: rgba(160, 150, 255, .25); } body.th-glass .sidenav .sntog { color: #a9a7cc; } body.th-glass.nav-min .sidenav .snsearch { background: transparent; border-color: transparent; } body.th-glass .sidenav kbd { border-color: rgba(160,150,255,.3); color: #a9a7cc; }
  body.has-nav.th-glass .tabbar { background: rgba(32, 30, 66, .96) !important; border-top-color: rgba(160, 150, 255, .16); }
  body.has-nav.th-glass .tabbar a, body.has-nav.th-glass .tabbar button { color: #8d8bb3; } body.has-nav.th-glass .tabbar a.on { color: #b3abff; }
  body.th-glass .gs-bar { border-color: rgba(160, 150, 255, .16); } body.th-glass .gs-bar input { color: #f3f2ff; } body.th-glass .gs-row.on, body.th-glass .gs-row:hover { background: #2f2c5e; }
  body.th-glass .gsearch { background: rgba(5, 4, 15, .6); }
  body.th-glass .ltstep { border-color: rgba(160, 150, 255, .12); }
  body.th-glass .ce-dl .mrel.inl { background: #1e1c40; } body.th-glass .ce-dl .mrel.inl label { color: #c9c7ea; }
  body.th-glass .empty.loading::before { background: linear-gradient(#2a2752, #2a2752) 0 0 / 62% 14px no-repeat, linear-gradient(#2f2c5e, #2f2c5e) 0 28px / 88% 12px no-repeat, linear-gradient(#2f2c5e, #2f2c5e) 0 52px / 74% 12px no-repeat; }
  body.th-glass .empty.loading::after { background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%); }
  body.th-glass .empty:not(.loading)::before { background-color: #2f2c5e; }
  body.th-glass .cemodal { background: rgba(5, 4, 15, .6); }
  body.th-glass .chd-grid { border-color: rgba(160, 150, 255, .14) !important; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) and (max-width: 760px) { body.th-glass .gsearch { background: #262350; } }

/* ---------- gradients the partners picked: the big "New client" button dark with violet and indigo glows; the buttons a violet-to-blue sweep ---------- */
body.th-glass .tile.hero { background: radial-gradient(120% 160% at 100% 0%, rgba(74, 63, 230, .62) 0, rgba(74, 63, 230, 0) 55%), radial-gradient(90% 140% at 0% 100%, rgba(143, 47, 227, .5) 0, rgba(143, 47, 227, 0) 60%), #15121f !important;
  border: 1px solid #2b2645 !important; box-shadow: 0 16px 32px -18px rgba(21, 18, 31, .8) !important; }
body.th-glass .tile.hero:hover { background: radial-gradient(120% 160% at 100% 0%, rgba(74, 63, 230, .78) 0, rgba(74, 63, 230, 0) 55%), radial-gradient(90% 140% at 0% 100%, rgba(143, 47, 227, .62) 0, rgba(143, 47, 227, 0) 60%), #15121f !important; border-color: #4a3fe6 !important; }
body.th-glass .btn.pri { background: var(--sweep) !important; border: 0 !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(74, 63, 230, .75) !important; }
body.th-glass .btn.pri:hover { background: var(--sweep-hover) !important; filter: none; }

/* saved letters and closing statements on a case */
ul.docs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
ul.docs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(90, 79, 216, .2); border-radius: 12px; background: #fff; }
ul.docs .dk { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
ul.docs .k-lt { background: #eee9fe; color: #4b3fd0; } ul.docs .k-cl { background: #fcefdc; color: #87520a; }
ul.docs .dn { min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } ul.docs .dn small { display: block; font-weight: 400; color: #6b6d8f; font-size: 12px; }
ul.docs .da { display: flex; gap: 6px; align-items: center; }
@media (max-width: 600px) { ul.docs li { grid-template-columns: minmax(0, 1fr); } ul.docs .dk { justify-self: start; } }
@media (prefers-color-scheme: dark) and (max-width: 0px) { body.th-glass ul.docs li { background: #262350; border-color: rgba(160, 150, 255, .18); } body.th-glass ul.docs .k-lt { background: #2a2360; color: #c4bbff; } body.th-glass ul.docs .k-cl { background: #3a2b14; color: #f0c98e; } }

/* ---------- one violet-to-blue sweep for every button that's chosen or primary, big or small (a shade deeper) ---------- */
body.th-glass { --sweep: linear-gradient(100deg, #8424d8 0%, #5d2cdc 48%, #3636d8 100%); --sweep-hover: linear-gradient(100deg, #7419c4 0%, #4f22c8 48%, #2c2cc4 100%); }
body.th-glass .chip.on, body.th-glass .seg button[aria-pressed="true"], body.th-glass .ltvia .chip[aria-pressed="true"],
body.th-glass .ctabs button[aria-selected="true"], body.th-glass .sidenav a.on, body.th-glass .ce-dl .mrel.inl label:has(input:checked),
body.th-glass details.help[open] summary, body.th-glass .vdi-lang button[aria-pressed="true"], body.th-glass .vdi-opt input:checked + span {
  background: var(--sweep) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(54, 54, 216, .75) !important; }
body.th-glass .chip.on:hover, body.th-glass .seg button[aria-pressed="true"]:hover, body.th-glass .ltvia .chip[aria-pressed="true"]:hover,
body.th-glass .vdi-lang button[aria-pressed="true"]:hover { background: var(--sweep-hover) !important; }

/* ---------- phones and tablets: every tab visible, and everything tappable at least 44px (Apple's guideline) ---------- */
@media (max-width: 760px) {
  /* the case tabs stay one line that slides sideways; a soft fade at an edge shows there are more tabs that way */
  .ctabs, body.th-glass .ctabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .ctabs button { flex: 0 0 auto; scroll-snap-align: center; }
  .ctabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .ctabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  .ctabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
}
@media (pointer: coarse) {
  #ca-prev, #ca-next, #fc-prev, #fc-next, #fp-prev, #fp-next, .cemx, #fp-x, #gs-x, .crow .x { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  #ca-today, #fc-today, .btn.sm, .invq .chip, .hfilters .chip, .chip { min-height: 44px; }
  .chd-grid .fv a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  details.isec > summary { min-height: 44px; display: flex; align-items: center; }
  label.chk, .mrel label, .fsel label { min-height: 44px; }
}
/* the home-screen app draws under the status bar: keep pop-ups and their close buttons below it, and clear the
   notch when the phone is sideways */
@media (max-width: 760px) {
  .cemodal-in { padding-top: max(12px, env(safe-area-inset-top)); }
  .cemx { top: calc(8px + env(safe-area-inset-top)); }
  .fcpop .cemodal-in { max-height: 86vh; max-height: 86dvh; }
}
.top, main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.solpast, b.solpast { color: #c0264a !important; font-weight: 700; }

/* dark mode: the intake form (filled in inside the app) takes the app's dark colors; the section headings stay readable */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .vdi { --paper: #262350; --wash: #2f2c5e; --ink: #ecebfa; --muted: #a9a7cc; --line: rgba(160, 150, 255, .22); --navy: #c9c3ff; --gold-wash: #2a2342; color: #ecebfa; }
  body.th-glass .vdi .vdi-tile .box { border-color: rgba(160, 150, 255, .25); }
  body.th-glass .vdi .vdi-tile b, body.th-glass .vdi label, body.th-glass .vdi .vdi-lbl, body.th-glass .vdi legend { color: #f3f2ff; }
  body.th-glass .vdi .vdi-tile input:checked + .box { background: #2a2360; border-color: #8f7cff; box-shadow: inset 0 -3px 0 #8f7cff; }
  body.th-glass .vdi .vdi-tile input:checked + .box svg { background: #8f7cff; color: #15121f; }
  body.th-glass .vdi .vdi-opt span { border-color: rgba(160, 150, 255, .3); background: #262350; color: #ecebfa; }
  body.th-glass .isec summary, body.th-glass .more summary, body.th-glass .tview summary { color: #e3dfff; }
}

/* keyboard focus is always visible (the sidebar resets its links' styles) */
.sidenav a:focus-visible, .sidenav .snsearch:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible, .gs-row:focus-visible, .gs-x:focus-visible { outline: 2px solid #6a37e8; outline-offset: 2px; }
/* very long words or links in notes and history never run outside their card */
#cv-notes li, .log li, .hlist li, .tddcard, .note { overflow-wrap: anywhere; }

/* Delete this case (partners): tucked away at the bottom of Overview, in red once opened */
details.delcase { margin-top: 14px; }
details.delcase > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #b3263d; list-style: none; }
details.delcase > summary::-webkit-details-marker { display: none; }
details.delcase[open] { border-color: rgba(192, 38, 74, .35) !important; }
details.delcase .m { margin: 10px 0 12px; }
.btn.danger, body.th-glass .btn.danger { background: #c0264a !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px -10px rgba(192, 38, 74, .8) !important; }
.btn.danger:hover { background: #a51e3e !important; }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { body.th-glass details.delcase > summary { color: #ff9bb0; } }

/* letters and closing statements previewed as printed pages stay white paper with dark ink, also in dark mode */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .lprev.page { background: #fff !important; color: #111 !important; color-scheme: light; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); }
  body.th-glass .lprev.page *:not(img):not(svg) { color: #111 !important; }
  body.th-glass .lprev.page a { color: #1a3d8f !important; }
  body.th-glass .lprev.page .lh2, body.th-glass .lprev.page .lh2 *, body.th-glass .lprev.page .lfoot, body.th-glass .lprev.page .lfoot * { color: #6b6b6b !important; }   /* the letterhead's grey, as printed */
}

/* report charts: bars in the app's violet-to-blue, bright enough on light and dark; gold on hover */
body.th-glass .cb { background: linear-gradient(180deg, #8f5cf0 0%, #5a46e6 100%) !important; }
body.th-glass .bb { background: linear-gradient(90deg, #5a46e6 0%, #8f5cf0 100%) !important; }
body.th-glass .col:hover .cb, body.th-glass .brow:hover .bb, body.th-glass tr:hover > .bt .bb, body.th-glass .srct tr:hover .bb { background: var(--gold, #c18a48) !important; }

/* dark mode: surfaces a few shades lighter than the page, visible edges, softer text that's still easy to read */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .cb { background: linear-gradient(180deg, #b49cff 0%, #7d6cff 100%) !important; }
  body.th-glass .bb { background: linear-gradient(90deg, #7d6cff 0%, #b49cff 100%) !important; }
  body.th-glass .bt { background: #3a366e !important; }
  body.th-glass .cv { color: #f3f2ff !important; } body.th-glass .cx { color: #b9b6dc !important; }
  body.th-glass .cols { border-bottom-color: rgba(190, 180, 255, .3) !important; }
  body.th-glass .tile, body.th-glass .card, body.th-glass .chd, body.th-glass .att, body.th-glass .ctable, body.th-glass .stat, body.th-glass .cemodal-in, body.th-glass .gs-in {
    border-color: rgba(180, 170, 255, .26) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 36px -22px rgba(0,0,0,.85) !important; }
  body.th-glass .tile:hover, body.th-glass .att:hover { background: #302c60 !important; border-color: rgba(180, 170, 255, .55) !important; }
  body.th-glass .m, body.th-glass .hint, body.th-glass .lead, body.th-glass .tile small, body.th-glass .att span, body.th-glass .stat .sl, body.th-glass .chd-sub { color: #bdbae0 !important; }
  body.th-glass .ctable td, body.th-glass table.mini td { border-color: rgba(255,255,255,.08) !important; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass { background:
      radial-gradient(42vw 42vw at 92% 4%, rgba(124, 108, 255, .22), transparent 70%),
      radial-gradient(38vw 38vw at 4% 34%, rgba(90, 79, 216, .16), transparent 70%),
      radial-gradient(38vw 38vw at 70% 96%, rgba(150, 120, 255, .14), transparent 70%),
      linear-gradient(180deg, #211e48 0%, #1c1a40 100%) !important;
    background-attachment: fixed !important; }
  body.has-nav.th-glass .sidenav { background: rgba(38, 35, 78, .9) !important; }
}

/* ---------- a soft violet wash on hover, like the sidebar, wherever something can be clicked (mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.th-glass .ctabs button:not([aria-selected="true"]),
  body.th-glass .seg button:not([aria-pressed="true"]),
  body.th-glass .chip:not(.on):not([aria-pressed="true"]),
  body.th-glass .rchip, body.th-glass .tdr, body.th-glass .ctable tbody tr td, body.th-glass table.mini tr.click td,
  body.th-glass .cday, body.th-glass .clist li button, body.th-glass details summary, body.th-glass .gs-row,
  body.th-glass .btn.sec, body.th-glass .btn.link, body.th-glass .mrow { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  body.th-glass .ctabs button:not([aria-selected="true"]):hover,
  body.th-glass .seg button:not([aria-pressed="true"]):hover { background: rgba(90, 79, 216, .09) !important; color: #2b2a6e !important; }
  body.th-glass .chip:not(.on):not([aria-pressed="true"]):hover, body.th-glass .rchip:hover { background: rgba(90, 79, 216, .09) !important; border-color: rgba(90, 79, 216, .45) !important; color: #2b2a6e !important; }
  body.th-glass .ctable tbody tr:hover td, body.th-glass table.mini tr.click:hover td { background: rgba(90, 79, 216, .06) !important; }
  body.th-glass .tdr:not(.sel):hover, body.th-glass .clist li button:hover, body.th-glass .mrow:hover { background: rgba(90, 79, 216, .07) !important; }
  body.th-glass .cday:not(.out):hover { background: rgba(90, 79, 216, .07) !important; }
  body.th-glass .isec > summary:hover, body.th-glass .more > summary:hover, body.th-glass .tview > summary:hover { color: #4b3fd0 !important; }
  body.th-glass .btn.sec:hover { background: rgba(90, 79, 216, .07) !important; border-color: rgba(90, 79, 216, .5) !important; }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .ctabs button:not([aria-selected="true"]):hover,
  body.th-glass .seg button:not([aria-pressed="true"]):hover,
  body.th-glass .chip:not(.on):not([aria-pressed="true"]):hover, body.th-glass .rchip:hover { background: rgba(180, 170, 255, .14) !important; color: #fff !important; border-color: rgba(180, 170, 255, .45) !important; }
  body.th-glass .ctable tbody tr:hover td, body.th-glass table.mini tr.click:hover td,
  body.th-glass .tdr:not(.sel):hover, body.th-glass .clist li button:hover, body.th-glass .mrow:hover, body.th-glass .cday:not(.out):hover { background: rgba(180, 170, 255, .09) !important; }
  body.th-glass .isec > summary:hover, body.th-glass .more > summary:hover, body.th-glass .tview > summary:hover { color: #fff !important; }
  body.th-glass .btn.sec:hover { background: #3a3670 !important; border-color: rgba(180, 170, 255, .55) !important; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) { body.th-glass .sorth.on, body.th-glass .sorth.on .arr, body.th-glass .sorth:hover { color: #d9d3ff !important; } }
.rqp .fl { display: block; font-weight: 600; font-size: 13.5px; margin: 8px 0 6px; }

/* calendar lists (under the calendar, in a day's pop-up, on Deadlines): each item carries its color like the month view —
   SOL red, deadline orange, unsigned contract purple, Outlook blue, calendar entry navy */
body.th-glass .clist li button { box-shadow: inset 4px 0 0 #2b2a6e, 0 1px 2px rgba(20, 20, 60, .05) !important; }
body.th-glass .clist li.k-dl button { box-shadow: inset 4px 0 0 #fa6514, 0 1px 2px rgba(20, 20, 60, .05) !important; background: #fff5ee !important; }
body.th-glass .clist li.k-sol button { box-shadow: inset 4px 0 0 #dc2626, 0 1px 2px rgba(20, 20, 60, .05) !important; background: #fef1f1 !important; }
body.th-glass .clist li.k-contract button { box-shadow: inset 4px 0 0 #7c3aed, 0 1px 2px rgba(20, 20, 60, .05) !important; background: #f6f1ff !important; }
body.th-glass .clist li.k-outlook button { box-shadow: inset 4px 0 0 #0f6cbd, 0 1px 2px rgba(20, 20, 60, .05) !important; background: #eef5fc !important; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .clist li button { box-shadow: inset 4px 0 0 #a9a3ff !important; }
  body.th-glass .clist li.k-dl button, body.th-glass .witem.k-dl { box-shadow: inset 4px 0 0 #ff8a3d !important; background: #3a2a2a !important; }
  body.th-glass .clist li.k-sol button, body.th-glass .witem.k-sol { box-shadow: inset 4px 0 0 #ff5a5a !important; background: #3d2030 !important; }
  body.th-glass .clist li.k-contract button, body.th-glass .witem.k-contract { box-shadow: inset 4px 0 0 #a77bff !important; background: #33285e !important; }
  body.th-glass .clist li.k-outlook button, body.th-glass .witem.k-outlook { box-shadow: inset 4px 0 0 #4ea1ff !important; background: #1f3050 !important; }
}
/* a day's pop-up: add something on that day */
.fpadd { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(90, 79, 216, .15); }
.fpadd .fl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5a4fd8; margin-bottom: 8px; }
.fpaddr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fpaddr select { flex: 1 1 200px; min-height: 36px; border-radius: 999px; padding: 0 12px; border: 1px solid rgba(90, 79, 216, .35); background: #fff; font: inherit; font-size: 14px; color: #2b2a6e; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { body.th-glass .fpaddr select { background: #1e1c40; color: #ecebfa; border-color: rgba(180, 170, 255, .3); } body.th-glass .fpadd .fl { color: #b9b0ff; } }

/* ---------- To-dos: two calm columns (lists, tasks) with the task's details as a card that floats over the right ---------- */
body.th-glass .tdapp { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 18px; }
body.th-glass .tdside { background: rgba(255, 255, 255, .72); border: 1px solid rgba(90, 79, 216, .14) !important; border-radius: 18px; padding: 10px 8px; align-self: start; position: sticky; top: calc(var(--top-h, 58px) + 16px); max-height: calc(100vh - var(--top-h, 58px) - 40px); overflow-y: auto; }
body.th-glass .tdl { border-radius: 10px; color: #2b2a4e; }
body.th-glass .tdl.on { background: linear-gradient(100deg, #8424d8 0%, #5d2cdc 48%, #3636d8 100%) !important; color: #fff !important; }
body.th-glass .tdl.on svg, body.th-glass .tdl.on b { color: #fff !important; }
body.th-glass .tdsh { color: #5a4fd8; border-top-color: rgba(90, 79, 216, .14); }
body.th-glass .tdsh span { text-transform: none; letter-spacing: 0; font-weight: 600; color: #8a87a6; }
.tdnone { margin: 2px 10px 8px; font-size: 13px; color: #8a87a6; }
body.th-glass .tdmain { padding: 4px 4px 30px; }
body.th-glass .tdhead h1 { font-size: 28px; letter-spacing: -.01em; }
body.th-glass .tdsub { color: #5d5b7a; }
body.th-glass .tdadd { border: 1px solid rgba(90, 79, 216, .2); border-radius: 14px; box-shadow: 0 6px 18px -12px rgba(43, 42, 110, .35); }
body.th-glass .tdgh { color: #2b2a6e; font-size: 13.5px; padding: 8px 4px 6px; }
body.th-glass .tdgh b { background: #eeebff; color: #4b3fd0; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
body.th-glass .tdr { border: 1px solid rgba(90, 79, 216, .14); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px -10px rgba(43, 42, 110, .4); }
body.th-glass .tdr.sel { background: #f1eeff !important; border-color: rgba(90, 79, 216, .45); box-shadow: inset 4px 0 0 #6a37e8, 0 4px 12px -10px rgba(43, 42, 110, .4); }
body.th-glass .tdt { color: #1b1a3a; font-weight: 500; }
body.th-glass .tdm { color: #6b6988; }
body.th-glass .tdue.today { color: #fff; background: #4b3fd0; border-radius: 999px; padding: 0 8px; }
body.th-glass .tdue.late { color: #fff; background: #c0264a; border-radius: 999px; padding: 0 8px; }
body.th-glass .tdue.today svg, body.th-glass .tdue.late svg { stroke: #fff; }
body.th-glass .tds.on { color: #d99a2b; } body.th-glass .tds.on svg { fill: #f2b84b; stroke: #d99a2b; }
body.th-glass .tdc { color: #6a37e8; }
@media (min-width: 861px) {
  body.th-glass .tdapp, body.th-glass .tdapp.withdet { grid-template-columns: 250px minmax(0, 1fr) !important; }
  body.th-glass .tdapp.withdet .tddet { position: fixed; right: 24px; top: calc(var(--top-h, 58px) + 18px); bottom: 20px; width: min(420px, 40vw); z-index: 35;
    background: rgba(250, 249, 255, .97) !important; border: 1px solid rgba(90, 79, 216, .22) !important; border-radius: 22px; padding: 14px 16px 18px;
    box-shadow: 0 30px 70px -24px rgba(30, 24, 90, .45), 0 0 0 1px rgba(255,255,255,.6) inset; animation: tdslide .18s ease-out backwards; }
  body.th-glass .tdapp.withdet .tdmain { padding-right: min(440px, 41vw); }
}
@keyframes tdslide { from { transform: translateX(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.th-glass .tdapp.withdet .tddet { animation: none; } }
body.th-glass .tddcard { border: 1px solid rgba(90, 79, 216, .14); border-radius: 14px; padding: 14px 16px; box-shadow: none; }
body.th-glass .tddcard:first-of-type { background: linear-gradient(160deg, #ffffff 0%, #f4f1ff 100%); }
body.th-glass .tddtop textarea { font-size: 19px; color: #1b1a3a; background: transparent; }
body.th-glass .tddf label { border-bottom-color: rgba(90, 79, 216, .1); color: #2b2a4e; }
body.th-glass .tddf label span { color: #6b6988; font-weight: 600; font-size: 13px; }
body.th-glass .tddsub { color: #5a4fd8; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .tdside { background: rgba(38, 35, 78, .85) !important; border-color: rgba(180, 170, 255, .2) !important; }
  body.th-glass .tdl { color: #e3e0ff; } body.th-glass .tdsh { color: #b9b0ff; }
  body.th-glass .tdr { background: #262350 !important; border-color: rgba(180, 170, 255, .2); }
  body.th-glass .tdr.sel { background: #33306a !important; }
  body.th-glass .tdt { color: #f3f2ff; } body.th-glass .tdm, body.th-glass .tdsub { color: #bdbae0; }
  body.th-glass .tdgh { color: #e3e0ff; } body.th-glass .tdgh b { background: #3a366e; color: #e3e0ff; }
  body.th-glass .tdapp.withdet .tddet { background: rgba(34, 31, 72, .98) !important; border-color: rgba(180, 170, 255, .28) !important; }
  body.th-glass .tddcard, body.th-glass .tddcard:first-of-type { background: #2a2756 !important; border-color: rgba(180, 170, 255, .2); }
  body.th-glass .tddtop textarea { color: #f3f2ff; } body.th-glass .tddf label { color: #e3e0ff; border-bottom-color: rgba(180, 170, 255, .14); }
}

/* Overview: related providers and insurance at a glance */
.ovsub { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(90, 79, 216, .12); }
.ovsub .fl, .insov h3 { display: flex; align-items: center; gap: 8px; }
.ovsub .fl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5a4fd8; margin-bottom: 8px; }
.ovsub .fl b { background: #eeebff; color: #4b3fd0; border-radius: 999px; padding: 0 8px; font-size: 11.5px; letter-spacing: 0; }
.ovlist { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.ovlist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid rgba(90, 79, 216, .12); border-radius: 10px; background: rgba(255, 255, 255, .6); font-size: 14px; }
.ovlist .ovn { flex: 1 1 180px; min-width: 0; font-weight: 600; color: #1b1a3a; }
.ovlist .ovn small { display: block; font-weight: 400; font-size: 12px; color: #6b6988; }
.ovlist .ovamt { font-size: 13px; color: #3d3b5c; font-variant-numeric: tabular-nums; }
.ovst { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #f0eff6; color: #5d5b7a; white-space: nowrap; }
.ovst.wait { background: #fff1e6; color: #b4531a; } .ovst.ok { background: #e3f6ea; color: #16703e; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .ovlist li { background: #2a2756; border-color: rgba(180, 170, 255, .18); }
  body.th-glass .ovlist .ovn { color: #f3f2ff; } body.th-glass .ovlist .ovn small, body.th-glass .ovlist .ovamt { color: #bdbae0; }
  body.th-glass .ovst { background: #3a366e; color: #e3e0ff; } body.th-glass .ovst.wait { background: #4a3218; color: #ffc98a; } body.th-glass .ovst.ok { background: #183a26; color: #8fe0ad; }
  body.th-glass .ovsub .fl { color: #b9b0ff; } body.th-glass .ovsub .fl b { background: #3a366e; color: #e3e0ff; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  /* to-dos: the quiet inline boxes (title, add a step, add a task, open a case) blend into their card */
  body.th-glass .tddtop textarea, body.th-glass .tdstep.add input, body.th-glass .tdai input, body.th-glass .tdnew select, body.th-glass #tdd-note { background: transparent !important; color: #f3f2ff !important; border-color: transparent !important; }
  body.th-glass .tdstep.add, body.th-glass .tdai, body.th-glass .tdnew { color: #b9b0ff; }
  body.th-glass .tdstep.add input::placeholder, body.th-glass .tdai input::placeholder, body.th-glass #tdd-note::placeholder { color: #b9b0ff !important; opacity: .9; }
  body.th-glass .tdadd { background: #262350 !important; }
}
/* to-dos: whose to-dos (mine, the whole firm, or anyone at the firm) */
.tdwho { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #5b5a7a; }
.tdwho select { appearance: none; -webkit-appearance: none; border: 1px solid rgba(79, 70, 229, .28); border-radius: 999px; padding: 6px 30px 6px 12px; font: inherit; font-weight: 600; color: #3b2fb8; cursor: pointer;
  background: #f4f1ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234f46e5' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }
.tdwho select:hover { border-color: #8a3ffc; background-color: #ede8ff; }
.tdwho select:focus-visible { outline: 2px solid #8a3ffc; outline-offset: 2px; }
.tdwho-side { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 2px 4px 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(90, 79, 216, .14); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6a5fd8; }
.tdwho-side select { text-transform: none; letter-spacing: 0; font-size: 14px; padding: 8px 30px 8px 12px; border-radius: 12px; }
@media (min-width: 861px) { .tdwho-head { display: none; } }
@media (max-width: 860px) { .tdwho { display: flex; } .tdwho select { flex: 1; } }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body.th-glass .tdwho { color: #a9a7cc; }
  body.th-glass .tdwho select { background-color: #2f2c5e; color: #d9d4ff; border-color: rgba(160, 150, 255, .35); }
  body.th-glass .tdwho select:hover { background-color: #383470; }
}
/* Fees: each column heading on one line (the table scrolls sideways on a narrow screen instead) */
table.fees:not(.srct) th, table.fees:not(.srct) th .sorth { white-space: nowrap; }   /* the Fees page; the Reports table wraps its headings so it fits */
table.fees:not(.srct) td:first-child { min-width: 190px; }
.srct.fees td:first-child { min-width: 140px; } .srct.fees .bcell { width: 14%; min-width: 60px; } .srct.fees th { white-space: normal; vertical-align: bottom; }
/* to-dos: each case's status beside its name, so the automatic to-dos read against where the case stands */
.tdgh .spill { margin-left: 8px; margin-right: auto; font-size: 11px; padding: 2px 9px; vertical-align: middle; }
.tdhead h1 .spill { font-size: 13px; vertical-align: middle; margin-left: 6px; font-family: var(--f-body, inherit); letter-spacing: 0; }
/* records chips (Requested / Received / Request records): a full-size tap target on a phone, since one tap changes the record */
@media (pointer: coarse) { .rchip { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } .rec { gap: 8px; flex-wrap: wrap; } }
/* calendar entry attachments: a button like the others instead of the browser's plain file box */
#ce-f::file-selector-button { font: inherit; font-weight: 600; color: #3b2fb8; background: #f4f1ff; border: 1px solid rgba(79, 70, 229, .28); border-radius: 999px; padding: 6px 14px; margin-right: 10px; cursor: pointer; }
#ce-f::file-selector-button:hover { background: #ede8ff; border-color: #8a3ffc; }
/* search: the words searched for, highlighted and bold in the results */
mark.hit { background: #ffe066; color: inherit; font-weight: 700; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px rgba(193, 138, 72, .35); }
.gs-row.on mark.hit, .gs-row:hover mark.hit { background: #ffd23f; }
/* Records requests page */
.rqf { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .rqf select { max-width: 260px; } .rqf input[type=search] { flex: 1; min-width: 200px; }
.rqf .rqlate { white-space: nowrap; margin: 0; }
table.rqt td { vertical-align: middle; } table.rqt th { white-space: nowrap; } table.rqt td:first-child { min-width: 180px; }
table.rqt tr.rqdone td { opacity: .55; } table.rqt tr.rqdone td:last-child { opacity: 1; }
.hint b.bad { color: #b42318; }

/* To-dos: link to the Records requests page (the way in on a phone) */
a.tdrq { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 8px; width: 100%; text-decoration: none; }
a.tdrq svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rq-ph { display: none; }
/* Records requests on a phone: each request is a card, the Mark received button full width */
@media (max-width: 700px) {
  .rqf select, .rqf input[type=search] { max-width: none; width: 100%; min-width: 0; }
  table.rqt, table.rqt tbody { display: block; } table.rqt thead { display: none; }
  table.rqt tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 14px; border-bottom: 1px solid var(--line, #E6E3F0); }
  table.rqt td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  table.rqt td.rq-c { grid-column: 1 / -1; } table.rqt td.rq-p { grid-column: 1 / -1; font-weight: 500; }
  table.rqt td.rq-d { grid-column: 1; align-self: center; color: var(--muted, #5B6070); } table.rqt td.rq-w { grid-column: 2; justify-self: end; }
  table.rqt td.rq-f { grid-column: 1 / -1; }
  table.rqt td.rq-b { grid-column: 1 / -1; text-align: left; margin-top: 6px; } table.rqt td.rq-b .btn { width: 100%; min-height: 44px; justify-content: center; }
  table.rqt td.rq-b .spill { display: inline-block; }
  .rq-ph { display: inline; }
}

/* phone: words that only make sense on a desktop layout */
@media (max-width: 700px) { .nophone { display: none; } }
/* Admin on a phone: each person is a card; the actions sit under them, wrapping, all in view */
@media (max-width: 700px) {
  table.adm, table.adm tbody { display: block; } table.adm thead { display: none; }
  table.adm tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px; border-bottom: 1px solid var(--line, #E6E3F0); }
  table.adm td { display: block; padding: 0; border: 0; }
  table.adm td:first-child { grid-column: 1 / -1; } table.adm td.acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
  table.adm td.acts .btn { min-height: 44px; }
}

/* Review the letter (before it downloads): a full-screen sheet with the letter on paper, every paragraph editable */
.ledm { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 50, .55); display: flex; flex-direction: column; }
.ledbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(20, 20, 50, .12); }
.ledbar b { display: block; font-size: 17px; color: var(--ink); } .ledbar span { font-size: 13.5px; color: #55577a; }
.ledbar .btns { margin: 0; display: flex; gap: 8px; }
.ledscroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px 60px; }
.ledpage { max-width: 816px; margin: 0 auto; background: #fff; color: #111; padding: 56px 72px 72px; border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  font: 15px/1.5 "Times New Roman", Times, serif; }
.ledpage.asprev { box-shadow: none; padding: 28px 30px; max-width: none; font-size: 13.5px; }
.ledlh { text-align: center; color: #8a8aa3; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; border: 1px dashed #d4d2e6; border-radius: 4px; padding: 14px; margin-bottom: 18px; }
.ledsig { height: 44px; color: #8a8aa3; font: italic 12px/44px system-ui, sans-serif; }
.ledgap { height: .9em; }
.ledp { display: flex; gap: 10px; } .ledp.n { padding-left: .5in; } .ledn { flex: none; min-width: 1.4em; }
.ledp.b .ledt { font-weight: 700; } .ledp.u .ledt { text-decoration: underline; }
.ledt { flex: 1; min-width: 0; white-space: pre-wrap; tab-size: 6; -moz-tab-size: 6; overflow-wrap: anywhere; border-radius: 3px; outline: none; text-align: inherit; }
.ledt[contenteditable]:not([contenteditable="false"]) { cursor: text; transition: background .12s; }
.ledt[contenteditable]:not([contenteditable="false"]):hover { background: #f3f1ff; }
.ledt[contenteditable]:not([contenteditable="false"]):focus { background: #ecebff; box-shadow: 0 0 0 2px #c9c3ff; }
.ledt.chg { box-shadow: inset 3px 0 0 #8a3ffc; padding-left: 4px; }
.ledpage mark.lmiss, .ledbar mark.lmiss { background: #fff200; color: inherit; padding: 0 1px; }
@media (max-width: 700px) {
  .ledbar { padding: 10px 16px; } .ledbar .btns { width: 100%; } .ledbar .btns .btn { flex: 1; min-height: 44px; justify-content: center; }
  .ledscroll { padding: 12px 8px 40px; } .ledpage { padding: 20px 16px 28px; font-size: 15px; } .ledp.n { padding-left: 12px; }
}
.ledpage mark.lmiss.done { background: none; padding: 0; }

/* no internet connection */
#offline { position: fixed; left: 50%; transform: translateX(-50%); top: 10px; z-index: 1200; width: min(640px, calc(100% - 24px)); box-sizing: border-box; background: #7a1f1f; color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
#offline b { margin-right: 4px; }

/* the date of a calendar entry: picked, or counted from another date (Rule 2.514) */
.cedate > span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.cedate .dsrc { display: inline-flex; margin-bottom: 8px; flex-wrap: wrap; }
.cedate input[readonly] { background: #f4f3fb; color: #3b3b5c; }
.cedate { min-width: 0; } .cedate input#ce-d { max-width: 220px; }
.cecnt { min-width: 0; max-width: 640px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #faf9ff; display: grid; gap: 8px; }
.cecnt .cnrow { display: flex; align-items: center; gap: 8px; } .cecnt .cnrow input { width: 96px; } .cecnt .cnrow select { width: auto; } .cecnt > select { width: 100%; min-width: 0; }
.cecnt .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cecnt .two label { font-size: 13px; }
.cnout { font-size: 13.5px; line-height: 1.45; } .cnout b { font-size: 15px; } .cnout ol { margin: 6px 0; padding-left: 20px; } .cnout li { margin: 2px 0; } .cnout p { margin: 4px 0 0; }
.rcnt { margin: 10px 0; } .cemodal.rcm { z-index: 1000; } .rcm .cemodal-in { padding: 18px 20px; max-width: 560px; }
@media (max-width: 700px) { .cecnt .two { grid-template-columns: 1fr; } .cedate .dsrc button { min-height: 44px; } }
ul.log li.cdl { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; } .cdl .cdx { color: #b42318; padding: 4px 8px; min-height: 0; flex: none; }

/* Deadlines page: long descriptions wrap in their own column (they ran over the attorney's name) */
.ctable.dtable td, .ctable.dtable td:not(:first-child):not(:nth-child(8)) { white-space: normal; overflow-wrap: anywhere; vertical-align: top; } .dtable td .spill { display: inline-block; margin: 2px 0; white-space: nowrap; }
/* case list on a laptop screen: Intake and Source give way first, so SOL is never cut off (they're in the export and on each case) */
@media (max-width: 1440px) { .ctable .col-intake, .ctable .col-source { display: none; } }
/* an email address in the case header stays on one line (cut short with …; the whole address is in the link) */
a.cvmail { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* money tiles shrink to fit a phone instead of running off the screen */
.stats .stat { min-width: 0; }
@media (max-width: 700px) { .stat .sn { font-size: clamp(16px, 5vw, 26px); white-space: nowrap; } .stats.five .sn { font-size: clamp(15px, 4.6vw, 22px); } }
/* phone: small icon buttons on a case get a full finger-sized target; header choices never run off the side */
@media (pointer: coarse) { #cv .xbtn, #cv .dls button, #cv .btn.link.sm { min-width: 44px; min-height: 44px; } }
@media (max-width: 700px) { #cv .chd select, #cv .chd .f select { max-width: 100%; text-overflow: ellipsis; } }

/* review window: the page as it prints (the Word file drawn by docx-preview, or the demo's page), shrunk to fit a phone */
.ledfit { margin: 0 auto; overflow: hidden; }
#led-doc { background: transparent; }
#led-doc .docx-wrapper { background: transparent; padding: 8px 0 24px; }
#led-doc section.docx { box-shadow: 0 8px 30px rgba(0, 0, 0, .28); margin-bottom: 18px; }
#led-doc .led-ed { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
#led-doc .led-ed:hover { background: rgba(124, 92, 255, .08); box-shadow: 0 0 0 3px rgba(124, 92, 255, .08); }
#led-doc .led-ed:focus { outline: none; background: rgba(124, 92, 255, .10); box-shadow: 0 0 0 3px rgba(124, 92, 255, .28); }
#led-doc .led-ed.chg { box-shadow: -4px 0 0 #8a3ffc; }
#led-doc .ledprev { width: 816px; max-height: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .28); }
#led-doc .ledprev mark.lmiss.done { background: none; padding: 0; }
/* an empty line in the demo page (a <br> between its blocks) */
.ledbr { height: 1.15em; }
.ledsheet { position: fixed; inset: 0; z-index: 1100; background: rgba(20, 20, 50, .45); display: flex; align-items: flex-end; }
.ledsheet-in { background: #fff; width: 100%; border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); }
.ledsheet-in b { display: block; margin-bottom: 8px; } .ledsheet-in textarea { width: 100%; font: 16px/1.45 "Times New Roman", Times, serif; box-sizing: border-box; }
.ledsheet-in .btns { margin-top: 10px; display: flex; gap: 8px; } .ledsheet-in .btn { flex: 1; min-height: 44px; justify-content: center; }

/* Medical tab: providers and health insurance liens each in their own panel, so they don't run together */
.msec { padding: 0 !important; border: 1px solid #dcdcf0; border-radius: 14px; overflow: hidden; margin: 20px 0 8px; background: #fff; box-shadow: 0 1px 2px rgba(20, 20, 50, .04); }
.msech { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; border-bottom: 1px solid; flex-wrap: wrap; }
.msech > b { letter-spacing: .01em; }
.msecic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.msecn { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.msect { margin-left: auto; font-size: 13px; } .msect b { font-size: 15px; margin-left: 4px; }
.msec-providers .msech { background: linear-gradient(180deg, #f0efff, #e7e5ff); color: #2f2a8a; border-color: #d9d6ff; }
.msec-liens .msech { background: linear-gradient(180deg, #e9f8f4, #ddf2ec); color: #0d6152; border-color: #c4e8de; }
.msec .msecb { padding: 0; }
.msec .mtable { border: 0; border-radius: 0; margin: 0; }
.msec .mrow.mh { background: #fafafe; }
.msec-liens .mrow.mh { background: #f7fcfa; }
/* each provider (or lien) its own band: numbered, alternating rows clearly shaded, a colored edge, the name larger */
.msec .mrow.mi { position: relative; padding: 13px 16px 13px 52px; border-top: 1px solid #e3e1f7; }
.msec .mrow.mi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #7b72e9; opacity: .55; }
.msec .mrow.mi.zb { background: #f1f0ff; }
.msec .mrow.mi:hover { background: #e6e4ff !important; } .msec .mrow.mi:hover::before { opacity: 1; }
.msec .mnum { position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #e3e0ff; color: #3b33a8; }
.msec .mrow.mi.zb .mnum { background: #fff; }
.msec .mname { font-size: 15px; color: #1d1b4a; }
.msec .mrow.mi .r.b { color: #2f2a8a; }
.msec-liens .mrow.mi { border-top-color: #d6ece5; } .msec-liens .mrow.mi::before { background: #1f9b82; }
.msec-liens .mrow.mi.zb { background: #e9f6f2; } .msec-liens .mrow.mi:hover { background: #dbf0e9 !important; }
.msec-liens .mnum { background: #d4efe7; color: #0d6152; } .msec-liens .mname { color: #0f3d35; } .msec-liens .mrow.mi .r.b { color: #0d6152; }
.msec .mrow.mi.mx::before { background: #b9bccc; } .msec .mrow.mi.mx .mname { color: #5f6280; }
@media (max-width: 760px) { .msec .mrow.mi { padding: 12px 12px 12px 46px; } .msec .mnum { left: 10px; width: 24px; height: 24px; } }
.msec .mrow.mt { background: #efeefe; border-top: 2px solid #d9d6ff; }
.msec-liens .mrow.mt { background: #e6f5f1; border-top-color: #c4e8de; }
.msec .msecnone { margin: 0; padding: 18px 16px; color: #5f6280; font-size: 14px; }
.msec .msecf { padding: 8px 10px; border-top: 1px solid #eeeef7; background: #fcfcff; }
.msec .mform { margin: 12px; }
@media (max-width: 700px) { .msect { margin-left: 0; width: 100%; } }

/* Deadlines: passed dates leave the list; an SOL gone by on a case not in suit is the alarm */
#dl-body h2.alarm, h2.alarm { color: #b42318 !important; }
details.dlpast { margin-top: 22px; } details.dlpast summary { cursor: pointer; color: #5f6280; font-weight: 600; padding: 6px 0; }
details.dlpast .ctable td { color: #6b6e8a; } details.dlpast td.past b { color: #6b6e8a; }
ul.dls li.gone b, ul.dls li.gone .m { color: #8a8da6; } ul.dls li.gone { opacity: .85; }
.msec .mrow.mh, .msec .mrow.mt, .msec .mrow.mt2 { padding-left: 52px; } @media (max-width: 760px) { .msec .mrow.mt, .msec .mrow.mt2 { padding-left: 12px; } }
.closing .note.csmiss, .note.csmiss { background: #fff4e0 !important; border: 1px solid #f0cf8f !important; color: #5c3d06; border-radius: 12px; padding: 10px 14px; }

/* ---- Nov 2026 audit: rendering fixes ---- */
/* closing statement on a phone: the bill boxes are as tall as any input (the 130px width rule had become a height) */
@media (max-width: 600px) { .crow[data-k="medical"] .cin input { flex: none; } }
/* closing statement on a laptop: provider names get room before the money columns */
@media (min-width: 601px) { .crow[data-k="medical"], .chead2.med { grid-template-columns: minmax(170px, 1fr) 118px 118px auto 28px; } }   /* (phones keep their own stacked layout: app.css) */
/* Deadlines on a phone: each row a small card (date and client on one line, what's due below), words never split */
@media (max-width: 760px) {
  .ctable.dtable, .ctable.dtable tbody { display: block; }
  .ctable.dtable tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid #e8e7f3; }
  .ctable.dtable td, .ctable.dtable td:not(:first-child):not(:nth-child(8)) { display: block; width: auto !important; padding: 0; border: 0; overflow-wrap: break-word; word-break: normal; }
  .ctable.dtable td:nth-child(3) { grid-column: 1 / -1; } .ctable.dtable td:nth-child(4) { display: none; }
}
.dtable tr:focus-visible, .ctable tr[tabindex]:focus-visible { outline: 2px solid #4b3fd0; outline-offset: -2px; }
/* the letter review shows the page as printed on every screen: the phone layout of the letterhead stays out of it */
@media (max-width: 560px) { #led-doc .lprev .lh2, .ledprev .lh2 { grid-template-columns: 1fr auto 1fr; } #led-doc .lprev .lh2 .lhc, .ledprev .lh2 .lhc { grid-column: auto; order: 0; } #led-doc .lprev .lh2 .lhc img, .ledprev .lh2 .lhc img { max-width: 300px; } }
/* sample text in forms reads as an example, not as something already filled in */
input::placeholder, textarea::placeholder { color: #9a9cb4; font-style: italic; opacity: 1; }
/* the calendar entry's date box looks like every other input */
.cedate input[type="date"], #ce-d { border: 1px solid #c9cedb; border-radius: 10px; padding: 8px 11px; min-height: 40px; background: #fff; font: inherit; }
/* contrast (WCAG AA) */
.tabbar a, .tabbar button { color: #5f6189; } kbd { color: #4b4d6b; } .mrow.mx > span:not(:first-child) { color: #6b7385; }
.msum .hi span { color: #ece9ff; }
/* touch: everything tappable is at least 44px tall */
@media (pointer: coarse) {
  .rchip, .ctabs button, .ctabs a, #ca-prev, #ca-next, #ca-today, .btn.sm, .btn.link:not(.inl), button.back, #signOut, .chip { min-height: 44px; }
  .rchip, .chip { display: inline-flex; align-items: center; }
}
/* iPad: the case list keeps what fits (Staff and Incident give way too; they're on each case and in the export) */
@media (min-width: 761px) and (max-width: 1100px) { .ctable .col-staff, .ctable .col-incident { display: none; } }
/* Social Security numbers on the Overview */
.sslist .ssrow { display: grid; grid-template-columns: 70px auto 1fr auto; gap: 4px 12px; align-items: center; }
.sslist .ssv { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
.sslist .ssb { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sslist .ssin { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sslist .ssin input { max-width: 170px; }
@media (max-width: 760px) { .sslist .ssrow { grid-template-columns: 70px 1fr; } .sslist .ssm, .sslist .ssb { grid-column: 1 / -1; justify-content: flex-start; } }
/* closing statement on a phone: a line's name, amount and × stay on one row */
@media (max-width: 600px) { .crow[data-k="sources"], .crow[data-k="costs"] { flex-wrap: nowrap; } .crow[data-k="sources"] input, .crow[data-k="costs"] input { flex: 1 1 0; width: 0; min-width: 0; } .crow[data-k="sources"] input.money, .crow[data-k="costs"] input.money { flex: 0 0 112px; } .crow .x { flex: none; width: 32px; padding: 0; } }
/* lines added in the review (Enter at the end of a line) are ordinary paragraphs; an empty one keeps a line's height */
#led-doc .led-new, #led-doc .ledline { min-height: 1.15em; }
#led-doc .led-new.led-ed:empty::before { content: '\200b'; }
.ledsh2 { margin-top: 6px !important; justify-content: space-between; }