/* The live preview on the home page (build/scripts/site/live_preview.py): two big buttons, and under them a live copy of
   Word with the LitArbi add-in (live_word.py, /assets/live-word.js) or of the LitArbi app (live_app.py, /assets/live-app.js).
   Everything is clickable — nothing plays by itself. Light by default and following dark mode; the paper stays paper. */
.lp { --lp-blue: var(--primary, #0066ff); --lp-tint: rgba(0,102,255,.10); --lp-chrome: #f2f2f5; max-width: 72rem; margin: 0 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp { --lp-chrome: #2a2b2f; --lp-tint: rgba(61,139,255,.16); } }
/* ---- the two big buttons: Word · Live | LitArbi app ---- */
.lp--two { max-width: none; }
.lp__switch { display: flex; justify-content: center; gap: 1rem; margin: 0 auto 1.6rem; flex-wrap: wrap; }
.lp__big { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; text-align: left; min-width: 21rem;
           padding: 1.15rem 1.8rem 1.2rem 1.25rem; border-radius: 18px; border: 1px solid var(--border, rgba(0,0,0,.08)); background: var(--surface, #fff);
           color: var(--foreground, #1d1d1f); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -14px rgba(0,0,0,.25); font: inherit;
           transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.lp__big:hover { transform: translateY(-1px); }
.lp__big b { font-size: 1.32rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.lp__big small { grid-column: 2; color: var(--muted-foreground, #6e6e73); font-size: .97rem; line-height: 1.3; margin-top: .15rem; }
.lp__big-ico { grid-row: span 2; width: 3rem; height: 3rem; border-radius: 13px; display: grid; place-items: center; background: var(--lp-chrome, #f2f2f5);
               color: var(--muted-foreground, #6e6e73); }
.lp__big[aria-selected="true"] { border-color: var(--lp-blue); box-shadow: 0 0 0 3px var(--lp-tint), 0 10px 24px -14px rgba(0,80,255,.45); }
.lp__big[aria-selected="true"] b { color: var(--lp-blue); }
.lp__big[aria-selected="true"] .lp__big-ico { background: var(--lp-blue); color: #fff; }
.lp__big:focus-visible { outline: 3px solid var(--ring, rgba(0,102,255,.25)); outline-offset: 2px; }
.lp__dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #e0322b; margin-right: .45rem; vertical-align: .12em;
           box-shadow: 0 0 0 0 rgba(224,50,43,.5); animation: lw-pulse 1.8s ease-out infinite; }
.lp__view[hidden] { display: none; }

/* ======================================================================= the live Word (live_word.py, live-word.js) */
.lw { --w-chrome: #f3f3f3; --w-rib: #fafafa; --w-line: #dddddd; --w-ink: #242424; --w-soft: #616161; --w-hover: #e6e6e6; --w-press: #d9d9d9;
      --w-canvas: #e9e9e9; --w-acc: #185abd; --w-field: #ffffff; --w-fieldline: #c8c8c8; --w-search: #e7e7e7;
      --p-bg: #f2f2f5; --p-card: #ffffff; --p-line: #d8d8dc; --p-ink: #1d1d1f; --p-soft: #6e6e73; --p-faint: #8e8e93; --p-seg: #e3e3e8; --p-pop: #e5e5ea;
      --p-blue: #0a84ff; --p-sel: #0a64d8; --p-purple: #af52de;
      position: relative; text-align: left; border-radius: 12px; overflow: hidden; background: var(--w-chrome); color: var(--w-ink);
      border: 1px solid rgba(0,0,0,.14); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 60px -24px rgba(0,0,0,.28);
      font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.lw button, .lw input, .lw select { font: inherit; color: inherit; }
.lw-svg .a { stroke: var(--w-acc); } .lw-svg .f { fill: var(--w-acc); stroke: none; } .lw-svg .o { opacity: .45; }
.lw-svg .r { stroke: #d13438; } .lw-svg .rf { fill: #d13438; stroke: none; } .lw-svg .y { stroke: #ffd400; } .lw-svg .yf { fill: #ffd400; stroke: none; }
.lw-svg .g { stroke: #107c10; } .lw-svg .gf { fill: #3aa13a; stroke: none; } .lw-svg .kf { fill: #333; stroke: none; } .lw-svg .bg { fill: var(--w-rib); }

/* title bar */
.lw__title { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; background: var(--w-chrome); }
.lw-lights { display: flex; gap: 8px; margin-right: 12px; } .lw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.lw-lights i:nth-child(2) { background: #febc2e; } .lw-lights i:nth-child(3) { background: #28c840; }
.lw-autosave { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0 8px 0 0; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.lw-autosave i { position: relative; width: 30px; height: 17px; border-radius: 9px; background: #c7c7cc; transition: background .2s; }
.lw-autosave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; }
.lw-autosave.on i { background: var(--w-acc); } .lw-autosave.on i::after { left: 15px; }
.lw-q { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 5px; background: none; color: var(--w-soft); cursor: pointer; }
.lw-q:hover { background: var(--w-hover); }
.lw-docname { flex: 1 1 auto; min-width: 0; text-align: center; color: var(--w-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.lw-find { display: flex; align-items: center; gap: 6px; width: 15.5rem; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--w-search); color: var(--w-soft); flex: none; }
.lw-find input { border: 0; outline: 0; background: none; min-width: 0; flex: 1; font-size: 12.5px; }
.lw-find input::placeholder { color: var(--w-soft); }
.lw-find:focus-within { box-shadow: 0 0 0 2px var(--w-acc); }
.lw-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: #d92d20; color: #fff;
           font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; flex: none; }
.lw-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lw-blink 1.6s ease-in-out infinite; }
@keyframes lw-blink { 50% { opacity: .35; } }
@keyframes lw-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,50,43,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(224,50,43,0); } }

/* tabs */
.lw__tabs { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; background: var(--w-chrome); }
.lw-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lw-tabs::-webkit-scrollbar { display: none; }
.lw-tab { position: relative; flex: none; border: 0; background: none; padding: 8px 10px 9px; font-size: 13px; color: var(--w-ink); cursor: pointer; border-radius: 5px 5px 0 0; }
.lw-tab:hover { background: var(--w-hover); }
.lw-tab.on { color: var(--w-acc); font-weight: 600; }
.lw-tab.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 3px; border-radius: 2px; background: var(--w-acc); }
.lw-cm, .lw-share { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 6px; cursor: pointer; font-size: 12.5px; flex: none; }
.lw-cm { border: 1px solid var(--w-fieldline); background: var(--w-field); }
.lw-share { border: 0; background: #1f63d1; color: #fff; font-weight: 600; }
.lw-cm:hover { background: var(--w-hover); } .lw-share:hover { background: #1a56b8; }

/* ribbon */
.lw__ribbon { background: var(--w-rib); border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); padding: 5px 8px; overflow-x: auto; scrollbar-width: thin; }
.lw-rb { display: flex; align-items: stretch; min-height: 72px; white-space: nowrap; width: max-content; }
.lw-rb[hidden] { display: none; }
.lw-g { display: flex; align-items: center; gap: 2px; padding: 0 9px; border-right: 1px solid var(--w-line); }
.lw-g:first-child { padding-left: 2px; } .lw-g:last-child { border-right: 0; }
.lw-col { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.lw-row { display: flex; align-items: center; gap: 2px; }
.lw-col > .lw-row + .lw-row { margin-top: 4px; }
.lw-b { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: none; color: var(--w-ink); cursor: pointer; padding: 0; }
.lw-b:hover, .lw-style:hover, .lw-set:hover { background: var(--w-hover); }
.lw-b[aria-pressed="true"] { background: var(--w-press); }
.lw-b:active { background: var(--w-press); }
.lw-b--L { flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 46px; max-width: 84px; height: 70px; padding: 5px 6px 3px; }
.lw-b--L > span { font-size: 11.5px; line-height: 1.15; text-align: center; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lw-b--L .lw-svg, .lw-b--L img { flex: none; }
.lw-b--la img { width: 32px; height: 32px; } .lw-b--sl.lw-b--la img { width: 16px; height: 16px; }
.lw-b--s { width: 26px; height: 26px; }
.lw-b--sl { justify-content: flex-start; gap: 6px; height: 23px; padding: 0 7px 0 5px; font-size: 12px; }
.lw-b--pen { width: 34px; height: 70px; }
.lw-dd > span::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
                       transform: rotate(45deg); vertical-align: 3px; opacity: .65; }
.lw-b--gl { font: 15px/1 "Times New Roman", Times, serif; }
.lw-b--gl sub, .lw-b--gl sup { font-size: 9px; }
.lw-hl { background: #fff200; padding: 0 2px; color: #222; } .lw-fc { border-bottom: 3px solid #e81123; line-height: 1; padding: 0 2px; }
.lw-font, .lw-size { height: 24px; border: 1px solid var(--w-fieldline); border-radius: 5px; background: var(--w-field); font-size: 12px; padding: 0 4px; margin-right: 3px; }
.lw-font { width: 9.6rem; } .lw-size { width: 3.6rem; }
.lw-styles { display: flex; gap: 4px; }
.lw-style { display: grid; align-content: center; justify-items: center; gap: 5px; width: 74px; height: 64px; padding: 0 4px; border: 1px solid var(--w-line);
            border-radius: 5px; background: #fff; color: #222; cursor: pointer; }
.lw-style span { font: 15px/1 "Times New Roman", Times, serif; } .lw-style em { font: normal 10.5px/1.15 inherit; color: #616161; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-style--2 span { color: #2f5496; font-size: 16px; } .lw-style--3 span { color: #2f5496; } .lw-style--4 span { font-size: 19px; }
.lw-style.on { box-shadow: inset 0 0 0 2px var(--w-acc); border-color: var(--w-acc); }
.lw-sets { display: flex; gap: 4px; margin: 0 4px; }
.lw-set { display: grid; align-content: start; gap: 4px; width: 54px; height: 64px; padding: 8px 7px; border: 1px solid var(--w-line); border-radius: 4px; background: #fff; cursor: pointer; }
.lw-set b { font: 700 9px/1 "Times New Roman", serif; color: #222; text-align: left; } .lw-set i { height: 3px; border-radius: 2px; background: #d6d6d6; } .lw-set i:last-child { width: 70%; }
.lw-set:nth-child(2) b { color: #2f5496; } .lw-set:nth-child(3) b { font-family: Arial, sans-serif; } .lw-set:nth-child(4) b { color: #c55a11; }
.lw-set.on { box-shadow: inset 0 0 0 2px var(--w-acc); }
.lw-flds { display: grid; gap: 3px; padding: 0 6px; } .lw-flds b { font-size: 11px; font-weight: 600; color: var(--w-soft); }
.lw-fld { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .lw-fld span { width: 3.6rem; }
.lw-fld input { width: 4.4rem; height: 21px; border: 1px solid var(--w-fieldline); border-radius: 4px; background: var(--w-field); padding: 0 5px; font-size: 11.5px; }
.lw-fld i { width: 8px; height: 12px; border-left: 1px solid transparent; background: linear-gradient(var(--w-soft), var(--w-soft)) center 3px / 6px 1px no-repeat,
            linear-gradient(var(--w-soft), var(--w-soft)) center 8px / 6px 1px no-repeat; opacity: .6; }
.lw-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 6px; cursor: pointer; }
.lw-chk input { accent-color: var(--w-acc); }
.lw-pop { position: relative; display: inline-flex; min-width: 0; }
.lw-pop::after { content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.3px solid var(--p-soft);
                 border-bottom: 1.3px solid var(--p-soft); transform: rotate(45deg); pointer-events: none; }
.lw-pop select { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; border: 0; border-radius: 6px; background: var(--p-pop); padding: 0 24px 0 9px;
                 font-size: 12.5px; color: var(--p-ink); cursor: pointer; text-overflow: ellipsis; }
.lw-pop--sm select { height: 23px; font-size: 12px; background: var(--w-field); border: 1px solid var(--w-fieldline); color: var(--w-ink); }

/* the window body: pages on the left, the pane on the right */
.lw__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: 37rem; }
.lw--nopane .lw__main, .lw--float .lw__main { grid-template-columns: minmax(0, 1fr) 0; }
.lw--nopane .lw-pane { display: none; }
.lw__work { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--w-canvas); }
.lw__ruler { height: 20px; flex: none; background: var(--w-rib); border-bottom: 1px solid var(--w-line); padding: 0 16px; }
.lw__ruler[hidden] { display: none; }
.lw__ruler div { max-width: 47rem; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 72px; font-size: 9px; color: var(--w-soft);
                 background: linear-gradient(to right, var(--w-chrome) 72px, #fff 72px, #fff calc(100% - 72px), var(--w-chrome) calc(100% - 72px)); }
.lw__canvas { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 16px 30px; overscroll-behavior: contain; }
.lw__pages { counter-reset: np; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; }
.lw__page { position: relative; display: flex; flex-direction: column; width: min(100%, 47rem); aspect-ratio: 1 / 1.414; padding: 64px 72px 34px; background: #fff; color: #111;
            box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.14); font: 15px/1.55 "Times New Roman", Times, serif; }
.lw__doc { outline: none; caret-color: #185abd; }
.lw__doc p { margin: 0 0 .7em; text-align: justify; }
.lw__doc p.c { text-align: center; } .lw__doc p.r { text-align: right; margin-bottom: .2em; }
.lw__doc .lw-small { font-size: 12.5px; letter-spacing: .02em; line-height: 1.45; }
.lw__doc .lw-party { margin: 1.1em 0 .5em; line-height: 1.5; } .lw__doc .lw-title { font-weight: 700; letter-spacing: .14em; font-size: 17px; margin: 1.5em 0 .3em; }
.lw__doc .lw-sign { margin-top: 2.2em; }
.lw__doc h1 { font: 700 20px/1.3 "Times New Roman", serif; text-align: center; margin: .6em 0; }
.lw__doc h2 { font: 700 15px/1.4 "Times New Roman", serif; text-transform: uppercase; letter-spacing: .03em; margin: 1.5em 0 .75em; }
.lw__doc h3 { font: italic 15px/1.4 "Times New Roman", serif; margin: 1em 0 .5em; }
.lw__doc p.np { counter-increment: np; position: relative; padding-left: 2.7em; }
.lw__doc p.np::before { content: counter(np) "."; position: absolute; left: 0; }
.lw__doc .lw-li { padding-left: 5.1em; text-indent: -2.4em; text-align: left; }
.lw__doc ul, .lw__doc ol { margin: 0 0 .7em; padding-left: 2.7em; }
.lw-todo { display: inline-block; margin-left: 3px; padding: 0 4px; border: 1px dashed #c9a100; border-radius: 3px; background: #fff3b0; color: #7a5a00;
           font: 600 11.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; vertical-align: 1px; cursor: pointer; user-select: none; text-indent: 0; }
.lw-todo:hover { background: #ffe680; }
.lw-todo.on { border: 1px solid #185abd; background: #e3edff; color: #185abd; box-shadow: 0 0 0 2px rgba(24,90,189,.18); }
.lw-cite { border-radius: 2px; transition: background .15s; } .lw-cite:hover { background: #e3e3e3; }
.lw-ref { font-size: .68em; line-height: 0; vertical-align: super; padding: 0 1px; cursor: default; }
.lw__fns { position: relative; margin-top: auto; padding-top: 12px; }
.lw__fns[hidden] { display: none; }
.lw__fns::before { content: ""; position: absolute; top: 4px; left: 0; width: 32%; border-top: 1px solid #333; }
.lw__fns ol { list-style: none; margin: 0; padding: 0; }
.lw__fns li { font-size: 12px; line-height: 1.4; margin: .3em 0; text-align: justify; padding-left: 1.2em; text-indent: -1.2em; }
.lw-fnno { font-size: .75em; vertical-align: super; line-height: 0; margin-right: .3em; }
.lw-fntext { outline: none; min-width: 2em; display: inline-block; text-indent: 0; }
.lw__pno { margin-top: 16px; text-align: center; font-size: 12px; color: #444; }
.lw__fns + .lw__pno { margin-top: 12px; }
.lw__fns[hidden] + .lw__pno { margin-top: auto; padding-top: 16px; }
.lw-table, .lw-utable { width: 100%; border-collapse: collapse; margin: .8em 0 1.1em; font-size: 13px; line-height: 1.4; text-indent: 0; }
.lw-table caption { font-weight: 700; letter-spacing: .06em; margin-bottom: .45em; }
.lw-table th, .lw-table td, .lw-utable td { border: 1px solid #8f8f8f; padding: .28em .5em; text-align: left; vertical-align: top; }
.lw-table th { background: #f2f2f2; } .lw-utable td { height: 1.6em; }
.lw-toc { margin: .6em 0 1.2em; } .lw-toc p { display: flex; align-items: baseline; gap: .3em; margin: 0 0 .3em; text-align: left; }
.lw-toc span { text-transform: uppercase; } .lw-toc i { flex: 1; border-bottom: 1px dotted #555; } .lw-toc b { font-weight: 400; }
.lw-toc .lw-toc__h { display: block; font-weight: 700; letter-spacing: .06em; margin-bottom: .6em; }
.lw-flash { animation: lw-flash 1.6s ease; }
@keyframes lw-flash { 0%, 35% { background: #fff1a6; box-shadow: 0 0 0 2px #fff1a6; } 100% { background: transparent; box-shadow: 0 0 0 2px transparent; } }
.lw--marks .lw__doc p::after, .lw--marks .lw__doc h2::after, .lw--marks .lw__doc h3::after { content: "¶"; margin-left: 2px; color: #2b7cd3; font: 13px Arial, sans-serif; }
.lw--ls15 .lw__doc { line-height: 1.95; } .lw--ls2 .lw__doc { line-height: 2.35; }
.lw-toast { position: absolute; left: 50%; bottom: 18px; z-index: 5; transform: translateX(-50%); max-width: min(30rem, 86%); padding: 9px 14px; border-radius: 9px;
            background: rgba(30,30,30,.94); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.28); text-align: center; }
.lw-toast[hidden] { display: none; }

/* the Insert Citation pane, as on the Mac */
.lw-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px; background: var(--p-bg); color: var(--p-ink); border-left: 1px solid var(--w-line); }
.lw-pane > * { flex: none; } .lw-pane > .lw-rows { flex: 1 1 auto; }
.lw-pane__top { display: flex; align-items: center; gap: 8px; }
.lw-pane__title { flex: 1 1 auto; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-float { flex: none; height: 22px; padding: 0 9px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-card); font-size: 11.5px; cursor: pointer; }
.lw-float:hover { background: var(--p-pop); }
.lw-close { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #a1a1a6; cursor: pointer; }
.lw-close .xc { fill: currentColor; stroke: none; } .lw-close .xx { stroke: var(--p-bg); stroke-width: 2; } .lw-close:hover { color: var(--p-soft); }
.lw-pane__hdr { margin: 0; font-size: 12px; color: var(--p-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-sf { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--p-line); border-radius: 9px; background: var(--p-card); color: var(--p-faint); flex: none; }
.lw-sf input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--p-ink); }
.lw-sf input::placeholder { color: var(--p-faint); }
.lw-sf:focus-within { border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(10,132,255,.28); }
.lw-seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--p-seg); flex: none; }
.lw-seg__b { flex: 1 1 auto; min-width: 0; height: 24px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font-size: 12px; color: var(--p-ink); cursor: pointer;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-seg__b:hover { background: rgba(0,0,0,.05); }
.lw-seg__b.on { background: var(--p-blue); color: #fff; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.lw-rows { list-style: none; margin: 0; padding: 4px; flex: 1 1 auto; min-height: 8rem; overflow-y: auto; border: 1px solid var(--p-line); border-radius: 9px; background: var(--p-card); }
.lw-r { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 4px 8px; border-radius: 7px; cursor: pointer; outline: none; }
.lw-r:hover { background: rgba(0,0,0,.045); }
.lw-r:focus-visible { box-shadow: inset 0 0 0 2px var(--p-blue); }
.lw-r.on { background: var(--p-sel); color: #fff; }
.lw-r__t { display: grid; min-width: 0; flex: 1 1 auto; }
.lw-r__t b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-r__t small { font-size: 11px; color: var(--p-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-r.on .lw-r__t small { color: rgba(255,255,255,.82); }
.lw-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 18px; padding: 0 5px; border-radius: 5px;
            background: var(--p-purple); color: #fff; font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: nowrap; }
.lw-ok { flex: none; font-style: normal; font-weight: 700; font-size: 14px; color: var(--p-purple); } .lw-r.on .lw-ok { color: #fff; }
.lw-none { padding: 10px; font-size: 12px; color: var(--p-faint); list-style: none; }
.lw-sep { flex: none; width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--p-line); }
.lw-ct { margin: 0; font-size: 13px; font-weight: 700; flex: none; }
.lw-pend { display: grid; gap: 5px; max-height: 8.6rem; overflow-y: auto; flex: none; }
.lw-empty { margin: 0; font-size: 12px; color: var(--p-faint); }
.lw-p { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
.lw-p__n { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-p small { font-size: 10.5px; color: var(--p-faint); }
.lw-p input { width: 36px; height: 21px; padding: 0 2px; border: 1px solid var(--p-line); border-radius: 5px; background: var(--p-bg); text-align: center; font-size: 11.5px; color: var(--p-ink); }
.lw-p input:focus { outline: 0; border-color: var(--p-blue); box-shadow: 0 0 0 2px rgba(10,132,255,.25); }
.lw-rm { flex: none; border: 0; background: none; padding: 0 2px; color: var(--p-faint); cursor: pointer; font-size: 12px; } .lw-rm:hover { color: var(--p-ink); }
.lw-opts { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.lw-opts .lw-pop { flex: 1 1 auto; }
.lw-cb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; cursor: pointer; flex: none; }
.lw-cb input { width: 14px; height: 14px; margin: 0; accent-color: var(--p-blue); }
.lw-into { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--p-soft); flex: none; min-width: 0; }
.lw-pop--wide { flex: 1 1 auto; }
.lw-insert { flex: none; width: 100%; height: 34px; border: 0; border-radius: 17px; background: var(--p-blue); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
             box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: background .15s, transform .1s; }
.lw-insert:not(:disabled):hover { background: #0071e3; } .lw-insert:not(:disabled):active { transform: scale(.985); }
.lw-insert:disabled { background: var(--p-pop); color: var(--p-faint); cursor: default; box-shadow: none; }
.lw-status { margin: 0; flex: none; font-size: 11px; line-height: 1.35; color: var(--p-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lw-status.ok { color: #248a3d; }
.lw--float .lw-pane { position: absolute; z-index: 4; top: 22px; right: 26px; width: 340px; height: calc(100% - 44px); border: 1px solid rgba(0,0,0,.18); border-radius: 12px;
                      box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.lw--float .lw-pane__top { cursor: move; touch-action: none; }

/* status bar */
.lw__status { display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 12px; background: var(--w-chrome); border-top: 1px solid var(--w-line); color: var(--w-soft);
              font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.lw-st-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lw-views { display: flex; gap: 3px; align-items: center; } .lw-views b { display: grid; padding: 2px; border-radius: 3px; background: var(--w-press); }
.lw-zb { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--w-soft); font-size: 13px; }
.lw-zr { width: 92px; accent-color: #7a7a7a; height: 14px; }
.lw-zv { min-width: 2.6rem; text-align: right; }
.lw__hint { text-align: center; color: var(--muted-foreground, #6e6e73); font-size: .95rem; margin: 1rem auto 0; max-width: 46rem; }

/* dark mode: Word's dark chrome and the Mac's dark pane; the paper stays paper */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lw { --w-chrome: #2b2b2b; --w-rib: #323232; --w-line: #454545; --w-ink: #e8e8e8; --w-soft: #ababab; --w-hover: #444; --w-press: #505050;
      --w-canvas: #1e1e1e; --w-acc: #5aa2ff; --w-field: #1f1f1f; --w-fieldline: #555; --w-search: #3b3b3b;
      --p-bg: #252527; --p-card: #1c1c1e; --p-line: #3a3a3c; --p-ink: #f2f2f7; --p-soft: #a1a1a8; --p-faint: #8d8d93; --p-seg: #3a3a3c; --p-pop: #3a3a3c;
      --p-sel: #0a5fd0; --p-purple: #bf5af2; border-color: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .lw-b--la img { filter: invert(1) brightness(1.1); }
  :root:not([data-theme="light"]) .lw-svg .kf { fill: #ddd; }
  :root:not([data-theme="light"]) .lw-r:hover, :root:not([data-theme="light"]) .lw-seg__b:hover { background: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .lw-r.on { background: var(--p-sel); }
  :root:not([data-theme="light"]) .lw-share { background: #2f73e0; }
  :root:not([data-theme="light"]) .lw__ruler div { background: linear-gradient(to right, var(--w-chrome) 72px, #3a3a3a 72px, #3a3a3a calc(100% - 72px), var(--w-chrome) calc(100% - 72px)); }
}

/* narrow screens: the pane above the pages, the ribbon scrolls */
@media (max-width: 860px) {
  .lp__big { min-width: 0; flex: 1 1 15rem; padding: .85rem 1.1rem; } .lp__big b { font-size: 1.12rem; } .lp__big-ico { width: 2.5rem; height: 2.5rem; }
  .lw__main { grid-template-columns: 1fr; height: auto; }
  .lw--nopane .lw__main, .lw--float .lw__main { grid-template-columns: 1fr; }
  .lw-pane, .lw--float .lw-pane { position: static; width: auto; height: auto; order: -1; border: 0; border-bottom: 1px solid var(--w-line); border-radius: 0; box-shadow: none; }
  .lw-rows { max-height: 12.5rem; min-height: 6rem; }
  .lw-float { display: none; }
  .lw__work { height: 62vh; min-height: 22rem; }
  .lw__page { aspect-ratio: auto; padding: 30px 24px 22px; font-size: 14px; }
  .lw-q, .lw-find, .lw-autosave span, .lw-cm span, .lw-st-a11y, .lw-st-lang, .lw-st-focus, .lw-views { display: none; }
  .lw-cm { padding: 0 7px; } .lw-lights { margin-right: 6px; }
  .lw-docname { text-align: left; padding: 0 6px; }
  .lw__status { gap: 12px; }
}
@media (max-width: 520px) {
  .lw-share span, .lw-autosave { display: none; } .lw-share { padding: 0 8px; }
  .lw__canvas { padding: 10px 8px 18px; }
  .lw__page { padding: 22px 16px 18px; font-size: 13.5px; }
  .lw__doc p.np { padding-left: 2.2em; }
  .lw-zr { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lw *, .lw *::after, .lp__dot { animation: none !important; transition: none !important; }
}

/* ======================================================================= the live LitArbi app (live_app.py, live-app.js) */
.la { --a-bar: #ececef; --a-rib: #f4f4f6; --a-side: #efeff2; --a-bg: #ffffff; --a-line: #e1e1e6; --a-ink: #1d1d1f; --a-soft: #6e6e73; --a-faint: #8e8e93;
      --a-zebra: #f6f6f8; --a-sel: #dcdfe6; --a-field: #ffffff; --a-fieldline: #d1d1d6; --a-insp: #f7f7f9; --a-canvas: #e7e7ea; --a-hover: rgba(0,0,0,.05);
      --a-pill: rgba(0,0,0,.08); --a-sheet: #f6f6f7; --a-menu: rgba(250,250,250,.98);
      position: relative; text-align: left; border-radius: 12px; overflow: hidden; background: var(--a-bg); color: var(--a-ink);
      border: 1px solid rgba(0,0,0,.14); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 60px -24px rgba(0,0,0,.28);
      font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.la button, .la input, .la select { font: inherit; color: inherit; }
.la__bar { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 14px; background: var(--a-bar); }
.la-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.07); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.la-tabs::-webkit-scrollbar { display: none; }
.la-tab { flex: none; border: 0; background: none; padding: 5px 17px; border-radius: 999px; font-size: 13px; color: var(--a-soft); cursor: pointer; }
.la-tab:hover { color: var(--a-ink); } .la-tab.on { background: var(--a-pill); color: var(--a-ink); font-weight: 500; }
.la-search { margin-left: auto; display: flex; align-items: center; gap: 7px; width: 16rem; height: 28px; padding: 0 10px; border-radius: 8px; flex: none;
             border: 1px solid rgba(0,0,0,.1); background: var(--a-field); color: var(--a-faint); }
.la-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 12.5px; color: var(--a-ink); }
.la-search:focus-within { box-shadow: 0 0 0 3px rgba(0,122,255,.3); border-color: #007aff; }
.la .lw-live { margin-left: 0; }
.la__ribbon { background: var(--a-rib); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); padding: 7px 8px 3px; overflow-x: auto; scrollbar-width: thin; }
.la-rb { display: flex; align-items: stretch; min-height: 76px; width: max-content; }
.la-rb[hidden] { display: none; }
.la-g { display: grid; grid-template-rows: 1fr auto; padding: 0 10px; border-right: 1px solid var(--a-line); color: var(--c); }
.la-g:last-child { border-right: 0; }
.la-g__b { display: flex; gap: 1px; align-items: flex-start; }
.la-b { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 50px; padding: 6px 6px 5px; border: 0; border-radius: 8px; background: none;
        color: var(--c) !important; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.la-b:hover { background: var(--a-hover); } .la-b:active { transform: scale(.96); }
.la-b.on { background: color-mix(in srgb, var(--c) 17%, transparent); }
.la-g__t { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 0 2px; color: var(--c); }
.la-rb--usage { gap: 30px; align-items: center; padding: 4px 10px; }
.la-meter { display: grid; gap: 5px; width: 15rem; } .la-meter b { font-size: 12px; font-weight: 600; }
.la-meter i { display: block; height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; } .la-meter em { display: block; height: 100%; background: #007aff; border-radius: 3px; }
.la-meter small { font-size: 11px; color: var(--a-soft); }

.la__body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 292px; height: 31rem; }
.la--noside .la__body { grid-template-columns: 0 minmax(0, 1fr) 292px; } .la--noinsp .la__body { grid-template-columns: 232px minmax(0, 1fr) 0; }
.la--noside.la--noinsp .la__body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.la--noside .la-side, .la--noinsp .la-insp { display: none; }
.la-side { overflow-y: auto; padding: 8px 8px 14px; background: var(--a-side); border-right: 1px solid var(--a-line); }
.la-h { margin: 12px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a-faint); }
.la-h:first-child { margin-top: 2px; }
.la-case { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: var(--a-pill); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.la-case span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-shared { display: flex; align-items: center; gap: 6px; margin: 6px 8px 0; font-size: 11px; color: #248a3d; } .la-shared[hidden] { display: none; }
.la-si { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; font-size: 12.5px; text-align: left; cursor: pointer; }
.la-si .la-sf { color: var(--c); flex: none; } .la-si span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-si em { font-style: normal; font-size: 11.5px; color: var(--a-faint); } .la-si:hover { background: var(--a-hover); } .la-si.on { background: var(--a-pill); font-weight: 500; }
.la-fold { flex: none !important; width: 15px; height: 12px; border-radius: 2px; background: var(--c); opacity: .8; }
.la-tags { display: grid; gap: 1px; }
.la-tag { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border: 0; border-radius: 6px; background: none; font-size: 12px; cursor: pointer; text-align: left; }
.la-tag i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--a-fieldline); } .la-tag.on i { background: #007aff; border-color: #007aff; }
.la-tag:hover { background: var(--a-hover); }
.la-main { overflow: auto; background: var(--a-bg); outline: none; min-width: 0; }
.la-table { width: 100%; min-width: 46rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; }
.la-table th { position: sticky; top: 0; z-index: 1; background: var(--a-bg); border-bottom: 1px solid var(--a-line); padding: 7px 8px 6px; font-size: 11.5px; font-weight: 500;
               color: var(--a-soft); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.la-table th.on { color: var(--a-ink); font-weight: 600; } .la-table th.on::after { content: " ⌃"; font-size: 10px; } .la-table th.on[data-dir="down"]::after { content: " ⌄"; }
.la-table td { padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.la-table tbody tr:nth-child(even) td { background: var(--a-zebra); }
.la-table tbody tr.sel td { background: var(--a-sel); }
.la-c-star { width: 30px; } .la-c-id { width: 38px; color: var(--a-soft); } .la-c-number { width: 66px; } .la-c-type { width: 62px; color: var(--a-soft); }
.la-c-date { width: 128px; } .la-c-tags { width: 140px; color: var(--a-soft); } .la-c-bates { width: 128px; color: var(--a-soft); font-variant-numeric: tabular-nums; }
.la-c-number b { font-weight: 700; }
.la-star { border: 0; background: none; padding: 0; color: #c7c7cc; font-size: 15px; line-height: 1; cursor: pointer; } .la-star.on { color: #ffcc00; }
.la-ti { display: inline-block; width: 11px; height: 14px; margin-right: 7px; vertical-align: -2px; border: 1.2px solid var(--a-soft); border-radius: 2px; position: relative; }
.la-ti::after { content: ""; position: absolute; left: 2px; right: 2px; top: 3px; height: 5px; border-top: 1px solid var(--a-soft); border-bottom: 1px solid var(--a-soft); }
.la-ti--audio { border: 0; width: 13px; background: linear-gradient(var(--a-soft), var(--a-soft)) 1px 5px / 1.5px 5px no-repeat, linear-gradient(var(--a-soft), var(--a-soft)) 4px 2px / 1.5px 11px no-repeat,
                linear-gradient(var(--a-soft), var(--a-soft)) 7px 4px / 1.5px 7px no-repeat, linear-gradient(var(--a-soft), var(--a-soft)) 10px 1px / 1.5px 12px no-repeat; }
.la-ti--audio::after { display: none; }
.la-nm { vertical-align: middle; }
.la-ok, .la-no, .la-lock, .la-clip { display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: -1px; border-radius: 50%; position: relative; }
.la-ok { background: #34c759; } .la-ok::after { content: ""; position: absolute; left: 3.5px; top: 1.6px; width: 2.5px; height: 5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.la-no { border: 1.5px solid #ff3b30; } .la-no::after { content: ""; position: absolute; left: 3.6px; top: -1px; width: 1.5px; height: 10px; background: #ff3b30; transform: rotate(45deg); }
.la-lock { border-radius: 2px; background: var(--a-soft); width: 9px; height: 7px; vertical-align: -1px; }
.la-lock::before { content: ""; position: absolute; left: 1.5px; top: -4px; width: 4px; height: 4px; border: 1.2px solid var(--a-soft); border-bottom: 0; border-radius: 3px 3px 0 0; }
.la-clip { border-radius: 0; width: 8px; border: 1.3px solid var(--a-soft); border-radius: 4px; height: 12px; }
.la-emptyrow td { color: var(--a-faint); text-align: center; padding: 30px; }

.la-insp { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--a-insp); border-left: 1px solid var(--a-line); }
.la-itabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--a-line); flex: none; }
.la-it { display: grid; place-items: center; width: 28px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--a-soft); cursor: pointer; }
.la-it:hover { background: var(--a-hover); } .la-it.on { background: var(--a-pill); color: var(--a-ink); }
.la-ihead { display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px; flex: none; } .la-ihead b { font-size: 13px; }
.la-ihead em { font-style: normal; font-size: 11px; color: var(--a-soft); } .la-iflags { margin-left: auto; display: flex; align-items: center; gap: 6px; } .la-starred { color: #ffcc00; }
.la-putback { height: 22px; padding: 0 9px; border: 0; border-radius: 6px; background: #007aff; color: #fff !important; font-size: 11.5px; cursor: pointer; }
.la-ibody { flex: 0 1 auto; max-height: 56%; overflow: auto; padding: 2px 12px 10px; }
.la-form label { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); align-items: center; gap: 8px; margin: 4px 0; }
.la-form label[hidden] { display: none; }
.la-form span { text-align: right; font-size: 11.5px; color: var(--a-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-form input, .la-form select { min-width: 0; height: 24px; padding: 0 7px; border: 1px solid var(--a-fieldline); border-radius: 6px; background: var(--a-field); font-size: 12px; }
.la-form input[readonly] { background: transparent; } .la-form input:disabled, .la-form select:disabled { opacity: .55; }
.la-form input:focus, .la-form select:focus { outline: 0; border-color: #007aff; box-shadow: 0 0 0 2px rgba(0,122,255,.25); }
.la-insp.none .la-ibody, .la-insp.none .la-prev { visibility: hidden; }
.la-prev { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; background: var(--a-canvas); border-top: 1px solid var(--a-line); }
.la-page { display: grid; justify-items: center; }
.la-pg { position: relative; width: 100%; max-width: 15.5rem; aspect-ratio: 1 / 1.414; padding: 20px 17px; overflow: hidden; background: #fff; color: #222;
         box-shadow: 0 1px 3px rgba(0,0,0,.18); font: 8.6px/1.5 "Times New Roman", Times, serif; text-align: left; }
.la-pg p { margin: 0 0 6px; } .la-pg p.h { font-weight: 700; text-align: center; font-size: 9.6px; margin-bottom: 9px; }
.la-page--scan { background: #fbf9f1; font-family: "Courier New", monospace; filter: blur(.4px) contrast(.88); transform: rotate(-.7deg); user-select: none; }
.la-page--scan.ocr { filter: none; user-select: text; box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 2px rgba(52,199,89,.35); }
.la-page--hand { background: repeating-linear-gradient(#fffef6 0 15px, #dfe7f5 15px 16px); color: #1f3c88; font: 11px/16px "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; padding-top: 24px; }
.la-page--hand p.h { font: inherit; text-align: left; font-weight: 400; margin: 0; } .la-page--hand p { margin: 0; }
.la-page--hand.read { box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 2px rgba(52,199,89,.35); }
.la-stamp { position: absolute; top: 9px; right: 9px; padding: 1px 5px; border: 1.5px solid #c8102e; border-radius: 2px; color: #c8102e; font: 700 9px/1.3 -apple-system, system-ui, sans-serif; transform: rotate(-4deg); }
.la-bates { position: absolute; right: 10px; bottom: 7px; font: 7px/1 -apple-system, system-ui, sans-serif; color: #333; }
.la-red { background: #000; color: #000; border-radius: 1px; }
.la-lines { display: grid; gap: 7px; padding-top: 6px; } .la-lines i { height: 3px; border-radius: 2px; background: #e2e2e6; } .la-lines i:nth-child(3n) { width: 72%; }
.la-pgno { position: absolute; right: 14px; bottom: 6px; font-size: 10.5px; color: var(--a-soft); }
.la-audio { display: grid; gap: 8px; width: 100%; padding: 6px 2px; }
.la-wave { display: flex; align-items: center; gap: 2px; height: 64px; } .la-wave i { flex: 1; border-radius: 2px; background: #ff2d55; opacity: .85; }
.la-audio b { font-size: 12px; } .la-trs { background: var(--a-field); border-radius: 8px; padding: 8px 10px; } .la-trs p { margin: 0 0 4px; font-size: 11.5px; }
.la-muted { color: var(--a-soft); font-size: 12px; } .la-sub { margin: 10px 0 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--a-faint); }
.la-text { background: var(--a-field); border: 1px solid var(--a-line); border-radius: 8px; padding: 8px 10px; } .la-text p { margin: 0 0 5px; font-size: 12px; } .la-text p:last-child { margin: 0; }
.la-ul { list-style: none; margin: 0; padding: 0; } .la-ul li { padding: 5px 0; border-bottom: 1px solid var(--a-line); font-size: 12px; }
.la-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.la-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--a-pill); font-size: 11.5px; }
.la-chip button { border: 0; background: none; padding: 0 4px; cursor: pointer; color: var(--a-soft); }
.la-addtag, .la-in { width: 100%; height: 28px; padding: 0 9px; border: 1px solid var(--a-fieldline); border-radius: 7px; background: var(--a-field); font-size: 12.5px; margin-bottom: 8px; }
.la-btn { height: 24px; padding: 0 10px; margin-top: 8px; border: 1px solid var(--a-fieldline); border-radius: 6px; background: var(--a-field); font-size: 12px; cursor: pointer; }
.la-btn:hover { background: var(--a-hover); }
.la__status { display: flex; align-items: center; height: 26px; padding: 0 12px; background: var(--a-insp); border-top: 1px solid var(--a-line); color: var(--a-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; }

/* sheets, menus, toasts */
.la-sheet { position: absolute; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding: 52px 16px 16px; background: rgba(0,0,0,.16); }
.la-sheet[hidden] { display: none; }
.la-sheet__box { width: min(31rem, 100%); max-height: calc(100% - 20px); overflow: auto; padding: 18px 20px 14px; border-radius: 12px; background: var(--a-sheet);
                 border: 1px solid rgba(0,0,0,.12); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.la-sheet__box.wide { width: min(48rem, 100%); }
.la-sheet__box h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.la-sheet__body { font-size: 12.5px; } .la-sheet__body p { margin: 0 0 8px; }
.la-sheet__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.la-sb { height: 27px; padding: 0 15px; border: 1px solid var(--a-fieldline); border-radius: 7px; background: var(--a-field); font-size: 12.5px; cursor: pointer; }
.la-sb.primary { background: #007aff; border-color: #007aff; color: #fff !important; } .la-sb:hover { filter: brightness(.97); }
.la-opts { display: grid; gap: 6px; } .la-opts label, .la-row { display: flex; align-items: center; gap: 8px; } .la-row { margin: 6px 0; } .la-row span { width: 4.5rem; color: var(--a-soft); }
.la-opts input { accent-color: #007aff; }
.la-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.la-check li { position: relative; padding-left: 26px; font-size: 12.5px; }
.la-check li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--a-fieldline); box-sizing: border-box; }
.la-check li.done::before { content: "✓"; border: 0; background: #34c759; color: #fff; font: 700 10px/15px system-ui; text-align: center; }
.la-check li.warn.done::before { content: "!"; background: #ff9500; }
.la-check li.done { color: var(--a-ink); } .la-check li.final { font-weight: 600; color: #248a3d; }
.la-check--big li { font-size: 13px; }
.la-lx { width: 100%; border-collapse: collapse; font-size: 12px; } .la-lx th, .la-lx td { padding: 5px 7px; border-bottom: 1px solid var(--a-line); text-align: left; vertical-align: top; }
.la-lx th { font-size: 11px; color: var(--a-soft); font-weight: 600; }
.la-thumbs { display: flex; flex-wrap: wrap; gap: 16px 22px; padding: 8px 2px; }
.la-th { position: relative; display: grid; justify-items: center; gap: 5px; }
.la-thp { display: grid; align-content: start; gap: 5px; width: 72px; height: 100px; padding: 9px 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s, opacity .2s; }
.la-thp i { height: 3px; border-radius: 2px; background: #dedee3; } .la-thp i:nth-child(2n) { width: 70%; }
.la-th b { font-size: 11px; font-weight: 500; color: var(--a-soft); } .la-th.del .la-thp { opacity: .2; }
.la-thb { display: flex; gap: 4px; } .la-thb button { width: 24px; height: 22px; border: 1px solid var(--a-fieldline); border-radius: 6px; background: var(--a-field); cursor: pointer; font-size: 12px; }
.la-cut { position: absolute; right: -22px; top: 38px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--a-fieldline); background: var(--a-field); cursor: pointer; font-size: 11px; padding: 0; z-index: 1; }
.la-cut.on { background: #ff9500; border-color: #ff9500; color: #fff; }
.la-thumbs--split .la-th[data-part="0"] .la-thp { box-shadow: 0 0 0 3px #af52de; } .la-thumbs--split .la-th[data-part="1"] .la-thp { box-shadow: 0 0 0 3px #007aff; }
.la-thumbs--split .la-th[data-part="2"] .la-thp { box-shadow: 0 0 0 3px #34c759; } .la-thumbs--split .la-th[data-part="3"] .la-thp { box-shadow: 0 0 0 3px #ff9500; }
.la-chrono { list-style: none; margin: 0; padding: 0; } .la-chrono li { display: grid; grid-template-columns: 9.5rem 4.2rem minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.la-chrono li:hover { background: var(--a-hover); } .la-chrono time { color: var(--a-soft); } .la-chrono b { color: #007aff; } .la-chrono span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.la-people li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.la-av { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #5856d6; color: #fff; font-size: 12px; font-weight: 700; }
.la-people b { font-size: 12.5px; } .la-people small { color: var(--a-soft); font-size: 11.5px; }
.la-fp { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--a-field); border: 1px solid var(--a-line); border-radius: 8px; padding: 8px 10px; }
.la-bundle { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 14px; }
.la-bidx { list-style: none; margin: 0; padding: 0; } .la-bidx li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 2.6rem; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.la-bidx li.h { display: block; font-weight: 700; cursor: default; padding-bottom: 8px; } .la-bidx li:not(.h):hover { background: var(--a-hover); }
.la-bidx li.on { background: rgba(0,122,255,.12); } .la-bidx b { color: #af52de; } .la-bidx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-bidx em { font-style: normal; text-align: right; color: #007aff; text-decoration: underline; }
.la-bview { position: relative; display: grid; justify-items: center; padding: 12px 12px 26px; background: var(--a-canvas); border-radius: 8px; }
.la-view { display: grid; justify-items: center; padding: 14px; background: var(--a-canvas); border-radius: 8px; } .la-view .la-pg { max-width: 22rem; font-size: 10.5px; }
.la-vnav { display: flex; justify-content: center; align-items: center; gap: 12px; } .la-vnav .la-btn { width: 32px; padding: 0; }
.la-menu { position: absolute; z-index: 7; min-width: 240px; padding: 5px; border-radius: 9px; background: var(--a-menu); border: 1px solid rgba(0,0,0,.12); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.la-menu[hidden] { display: none; }
.la-menu button { display: flex; gap: 4px; width: 100%; padding: 4px 10px 4px 6px; border: 0; border-radius: 5px; background: none; font-size: 13px; text-align: left; cursor: pointer; }
.la-menu button span { width: 1em; } .la-menu button:hover { background: #007aff; color: #fff; } .la-menu hr { border: 0; border-top: 1px solid var(--a-line); margin: 4px 6px; }
.la-toast { position: absolute; left: 50%; bottom: 40px; z-index: 8; transform: translateX(-50%); max-width: min(32rem, 88%); padding: 9px 14px; border-radius: 9px;
            background: rgba(30,30,30,.94); color: #fff; font-size: 13px; line-height: 1.4; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.la-toast[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .la { --a-bar: #2a2a2d; --a-rib: #2f2f32; --a-side: #252528; --a-bg: #1e1e20; --a-line: #3a3a3d; --a-ink: #f2f2f7; --a-soft: #a1a1a8;
      --a-faint: #8d8d93; --a-zebra: #232326; --a-sel: #3a3d45; --a-field: #1c1c1e; --a-fieldline: #48484c; --a-insp: #262629; --a-canvas: #19191b;
      --a-hover: rgba(255,255,255,.07); --a-pill: rgba(255,255,255,.12); --a-sheet: #2c2c2f; --a-menu: rgba(44,44,47,.98); border-color: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .la-tabs { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
}
@media (max-width: 860px) {
  .la__bar { gap: 8px; padding: 0 10px; } .la-search { display: none; } .la-tab { padding: 5px 11px; }
  .la__body, .la--noside .la__body, .la--noinsp .la__body { grid-template-columns: 1fr; grid-template-rows: auto 17rem auto; height: auto; }
  .la-side { display: flex; gap: 4px; overflow-x: auto; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--a-line); scrollbar-width: none; }
  .la-side .la-h, .la-side .la-case, .la-side .la-tags, .la-side .la-shared, .la-side .la-cols { display: none; }
  .la-si { width: auto; flex: none; } .la-si span { overflow: visible; }
  .la-insp { border-left: 0; border-top: 1px solid var(--a-line); } .la-ibody { max-height: none; } .la-prev { max-height: 22rem; }
  .la--noside .la-side, .la--noinsp .la-insp { display: flex; }
  .la-table { min-width: 0; } .la-c-tags, .la-c-bates, .la-c-id, .la-c-type, .la-c-date { display: none; }
  .la-bundle { grid-template-columns: 1fr; } .la-sheet { padding-top: 20px; }
}