@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Tokens: HSL triplets copied from web/packages/ui/src/styles/preset.css (light :root, dark under data-theme). */
:root{
  --background:40 25% 97%;--foreground:33 9% 9.8%;--muted:41 27% 94%;--muted-foreground:34 7% 34.1%;--caption-foreground:33 6.5% 39%;
  --popover:0 0% 100%;--card:0 0% 100%;--border:40 24% 90%;--input:36 4% 65.9%;--field:45 40% 99%;
  --primary:155.4 79% 20.6%;--primary-foreground:0 0% 100%;--primary-hover:155.4 79% 15.5%;--primary-subtle:150 31.3% 93.7%;--primary-subtle-foreground:155.4 79% 11.5%;
  --surface-subtle:41 27% 94%;--surface-hover:41.5 20.6% 87.6%;--surface-active:41.2 16.3% 80.8%;--border-strong:37.9 11.8% 68.4%;
  --accent:201.5 40.6% 32.4%;--accent-subtle:201.8 35.5% 93.9%;--accent-subtle-foreground:203.3 42.9% 24.7%;
  --destructive:357.1 67.4% 42.2%;--destructive-foreground:0 0% 100%;--warning:35.2 89.6% 29.5%;--success:164 75.9% 25.3%;
  --ring:155.4 79% 20.6%;--ring-width:3px;--ring-alpha:69%;--overlay:33 9% 5.9%;
  --sidebar:42 33.3% 94.1%;--sidebar-foreground:34 7% 34.1%;--sidebar-accent:41.5 20.6% 87.6%;--sidebar-border:40 24% 90%;
  --sidebar-active:156 20.7% 76.3%;--sidebar-active-foreground:33 9% 9.8%;--sidebar-active-border:153.7 26% 42.9%;--content:45 28.6% 97.3%;
  --recipient-green:100 48% 55%;--recipient-blue:212 56% 50%;--recipient-purple:266 100% 64%;--recipient-orange:36 92% 54%;--recipient-yellow:51 100% 43%;--recipient-teal:173 80% 36%;--recipient-pink:313 65% 57%;
  /* Fake paper stays white in both themes (a scanned page does not invert): the light card and foreground values. */
  --paper:0 0% 100%;--paper-ink:33 9% 9.8%;
  --shadow-xs:0 1px 2px 0 hsl(40 12% 12% / .06);
  --shadow-sm:0 1px 3px 0 hsl(40 12% 12% / .08),0 1px 2px -1px hsl(40 12% 12% / .06);
  --shadow-md:0 4px 10px -2px hsl(40 12% 12% / .1),0 2px 4px -2px hsl(40 12% 12% / .06);
  --shadow-lg:0 12px 24px -6px hsl(40 12% 12% / .14),0 4px 8px -4px hsl(40 12% 12% / .08);
  --shadow-modal:0 24px 48px -12px hsl(40 12% 8% / .22),0 0 0 1px hsl(40 12% 12% / .05);
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --background:33 13% 7.6%;--foreground:38 14% 95.5%;--muted:33 12% 13.5%;--muted-foreground:36 8% 74.3%;--caption-foreground:34 7% 63.7%;
  --popover:33 12.5% 10.6%;--card:33 12.5% 10.6%;--border:33 10% 20%;--input:33 8% 34.5%;--field:33 13% 12.7%;
  --primary:155.4 69.2% 58%;--primary-foreground:153.8 33.3% 9.4%;--primary-hover:155.4 71% 66%;--primary-subtle:155.7 44.6% 16.3%;--primary-subtle-foreground:155.4 72% 76%;
  --surface-subtle:33 10.5% 15.9%;--surface-hover:33 10.5% 16.3%;--surface-active:33 10% 20.2%;--border-strong:33 8% 32.9%;
  --accent:199.2 36.4% 61.2%;--accent-subtle:198.8 33.3% 18.8%;--accent-subtle-foreground:199.6 42.6% 76.1%;
  --destructive:0 90.6% 79%;--destructive-foreground:358.4 61.3% 12.2%;--warning:39.6 84.6% 61.8%;--success:162.9 72% 58%;
  --ring:155.4 69.2% 58%;--ring-alpha:57%;--overlay:33 13% 3.9%;
  --sidebar:33 13% 7.6%;--sidebar-foreground:36 8% 74.3%;--sidebar-accent:33 9.5% 17.8%;--sidebar-border:33 10% 20%;
  --sidebar-active:155.7 44.6% 16.3%;--sidebar-active-foreground:38 14% 95.5%;--sidebar-active-border:153.7 43.2% 33.1%;--content:33 12.5% 10.6%;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);background:hsl(var(--sidebar));color:hsl(var(--foreground));font:400 14px/1.5 var(--font);font-feature-settings:"rlig" 1,"calt" 1;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.021em}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{flex:none}
.muted{color:hsl(var(--muted-foreground))}
.cap{color:hsl(var(--caption-foreground))}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:8px 14px;border-radius:10px}
.skip:focus{top:8px}

/* Shell: one canvas for header + sidebar, content in an inset card */
/* Header mirrors Sedeya's app-topbar.tsx: from 901px a 1fr/auto/1fr grid puts the search on the viewport centre line, and the brand cell is the sidebar's width minus the header's left padding (264 - 16 = 248; collapsed rail 48 - 16 = 32, bare mark), so the toggle lands on the sidebar's right edge, which is the content card's left edge, in both states. Below that, a flex row. */
.top{display:flex;align-items:center;gap:8px;padding:0 12px 0 16px}
.top-l{display:flex;align-items:center;flex:none}
.top-r{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
@media (min-width:901px){
  .top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
  .top-l .brand{width:248px}
  body[data-nav="closed"] .top-l .brand{width:32px;padding:4px 0;justify-content:center}
  .top .pill{margin-left:0;width:min(480px,40vw)}
  .top-r{justify-self:end}
}
/* Home: the hero search is the search while it is on screen; the header pill fades in once it scrolls away. */
.top .pill{transition:opacity .15s,visibility .15s}
body[data-hero-search="visible"] .top .pill{opacity:0;visibility:hidden}
.brand{display:flex;align-items:center;border-radius:10px;padding:4px}
.logo,.mark{height:28px;width:auto;display:block}
.mark{display:none;flex:none}
.logo .leaf,.mark .leaf{fill:hsl(var(--primary))}
.logo .text{fill:hsl(var(--foreground))}
.pill{display:flex;align-items:center;gap:8px;height:36px;width:min(420px,100%);flex:0 1 420px;margin-left:12px;padding:0 12px;border-radius:12px;background:hsl(var(--background));border:1px solid hsl(var(--input));color:hsl(var(--muted-foreground));cursor:pointer;text-align:left}
[data-theme="dark"] .pill{background:hsl(var(--field))}
.pill span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font:500 14px/1 var(--font);padding:3px 6px;border-radius:6px;border:1px solid hsl(var(--border));background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.shell{display:flex;min-height:0;position:relative}
#side{display:flex;flex-direction:column;width:264px;flex:none;overflow:auto;padding:8px 12px 16px}
#side>#nav{flex:1 0 auto}
.content{flex:1;min-width:0;margin:0 12px 12px 0;background:hsl(var(--content));border:1px solid hsl(var(--border));border-radius:16px;overflow:auto;position:relative}
.content:focus,[tabindex="-1"]:focus{outline:none}
.scrim{display:none}
.grp{margin:16px 0 4px;padding:0 12px;font-size:14px;font-weight:600;color:hsl(var(--foreground))}
.nav{display:flex;flex-direction:column;gap:2px}
.row-nav{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:hsl(var(--sidebar-foreground));font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.row-nav span.l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-nav .n{font-size:14px;color:hsl(var(--sidebar-foreground))}
.row-nav:hover{background:hsl(var(--sidebar-accent))}
.row-nav[aria-current="page"]{background:hsl(var(--sidebar-active));box-shadow:inset 0 0 0 1px hsl(var(--sidebar-active-border));color:hsl(var(--sidebar-active-foreground));font-weight:500}
.row-nav[aria-current="page"] .n{color:hsl(var(--sidebar-active-foreground))}
.wrap{max-width:1200px;margin:0 auto;padding:32px 32px 64px}

/* Buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid hsl(var(--border-strong) / .55);background:hsl(var(--field));color:hsl(var(--foreground));font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-xs)}
.btn:hover{background:hsl(var(--surface-hover))}
.btn.sm{height:36px;padding:0 12px}
.btn.icon{width:40px;padding:0}
.btn.pri{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn.pri:hover{background:hsl(var(--primary-hover));border-color:hsl(var(--primary-hover))}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:hsl(var(--surface-hover))}
.btn.dng{color:hsl(var(--destructive))}
.btn.dng.fill{background:hsl(var(--destructive));border-color:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[aria-pressed="true"]{background:hsl(var(--primary-subtle));border-color:hsl(var(--sidebar-active-border));color:hsl(var(--primary-subtle-foreground))}
.in{display:block;width:100%;height:40px;padding:0 12px;border:1px solid hsl(var(--input));border-radius:10px;background:hsl(var(--field));color:hsl(var(--foreground))}
textarea.in{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
.in:focus-visible{border-color:hsl(var(--ring))}
.in[aria-invalid="true"]{border-color:hsl(var(--destructive))}
.in::placeholder{color:hsl(var(--muted-foreground))}
select.in{appearance:none;padding-right:36px;cursor:pointer}
.selw{position:relative}
.selw .ico{position:absolute;right:12px;top:12px;pointer-events:none;color:hsl(var(--muted-foreground))}
label.lb{display:block;margin-bottom:6px;font-weight:500}
.err{color:hsl(var(--destructive));min-height:0}

/* Tags and badges */
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:14px;line-height:1;white-space:nowrap;background:hsl(var(--c) / .18);border:1px solid hsl(var(--c) / .45);color:hsl(var(--foreground))}
.tag .dot{width:8px;height:8px;border-radius:50%;background:hsl(var(--c))}
.tag-x{display:inline-grid;place-items:center;width:20px;height:20px;margin:0 -6px 0 0;border:0;border-radius:50%;background:none;cursor:pointer}
.tag-x:hover{background:hsl(var(--surface-hover))}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;margin-left:8px;border-radius:999px;background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground));font-size:14px;font-weight:500;letter-spacing:0;vertical-align:2px}

/* Fake A4 pages: .page is the container, .pg uses cqw so one markup scales from thumbnail to preview */
.page{container-type:inline-size;aspect-ratio:1/1.414;width:100%;background:hsl(var(--paper));border-radius:2px;box-shadow:var(--shadow-sm),0 0 0 1px hsl(var(--border));overflow:hidden}
.pg{height:100%;padding:7cqw 8cqw;display:flex;flex-direction:column;gap:2.6cqw;color:hsl(var(--paper-ink));font-size:2cqw}
.pg i{display:block;height:1.2cqw;border-radius:1cqw;background:hsl(var(--paper-ink) / .16);flex:none}
.pg b{font-size:4.2cqw;font-weight:700;letter-spacing:.03em;white-space:nowrap;line-height:1.1}
.pg .amt{font-size:3.4cqw;letter-spacing:0}
.lh{display:flex;justify-content:space-between;gap:4cqw;align-items:flex-start}
.who{display:flex;gap:2.4cqw;align-items:center;width:46%}
.mk{flex:none;width:9cqw;height:9cqw;border-radius:2.4cqw;background:hsl(var(--c))}
.ws,.rt,.col{display:grid;gap:1.6cqw;align-content:start;flex:1}
.rt{text-align:right;width:46%;flex:none}
.rt i{margin-left:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6cqw}
.tb{display:grid;gap:1.8cqw 3cqw;align-items:center}
.tb .th{height:2.8cqw;width:auto;border-radius:.6cqw;background:hsl(var(--c) / .28)}
.tot{margin-left:auto;width:46%;display:grid;gap:1.6cqw;border-top:.4cqw solid hsl(var(--paper-ink) / .4);padding-top:2cqw}
.tot div{display:flex;justify-content:space-between;gap:2cqw}
.foot{margin-top:auto;display:grid;gap:1.4cqw}
.band{margin:-7cqw -8cqw 1cqw;padding:7cqw 8cqw 5cqw;background:hsl(var(--c) / .3);display:flex;justify-content:space-between;align-items:center}
.chart{display:flex;align-items:flex-end;gap:2cqw;height:20cqw}
.chart i{flex:1;height:auto;border-radius:.6cqw .6cqw 0 0;background:hsl(var(--c) / .75)}
.bigamt{display:grid;gap:1.6cqw;padding:4cqw;border:.4cqw solid hsl(var(--c));border-radius:2cqw}
.grid2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3cqw}
.net{display:flex;justify-content:space-between;align-items:center;padding:3cqw;border-radius:1.6cqw;background:hsl(var(--c) / .22);margin-top:auto}
.ctr{display:grid;justify-items:center;gap:2cqw;margin:3cqw 0}
.para{display:grid;gap:1.4cqw}
.sigs{display:flex;justify-content:space-between;margin-top:auto;gap:8cqw}
.sigs div{flex:1;display:grid;gap:1.4cqw}
.scr{width:100%;height:9cqw;color:hsl(var(--accent));fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);border:.3cqw solid hsl(var(--paper-ink) / .35)}
.boxes div{padding:2cqw;border:.15cqw solid hsl(var(--paper-ink) / .25);display:grid;gap:1.2cqw}
.stamp{width:15cqw;height:15cqw;border-radius:50%;border:.7cqw solid hsl(var(--c));margin-left:auto;opacity:.8}
.cert{border:.4cqw solid hsl(var(--c));border-radius:2cqw;padding:4cqw;display:grid;gap:2.4cqw}
.cert div{display:grid;grid-template-columns:1fr 1.4fr;gap:3cqw}
.qr{width:17cqw;height:17cqw;background:repeating-conic-gradient(hsl(var(--paper-ink)) 0 25%,transparent 0 50%) 0 0/3.4cqw 3.4cqw;border:.6cqw solid hsl(var(--paper));outline:.3cqw solid hsl(var(--paper-ink))}
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.sum div{padding:2.4cqw;border-radius:1.6cqw;background:hsl(var(--c) / .16);display:grid;gap:1.4cqw}
.pn{align-self:center;margin-top:auto;font-size:2.4cqw;color:hsl(var(--paper-ink) / .6)}

/* Cards and grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .12s}
.card:hover{box-shadow:var(--shadow-md)}
.card.on{border-color:hsl(var(--sidebar-active-border));box-shadow:0 0 0 1px hsl(var(--sidebar-active-border)),var(--shadow-md)}
.thumb{position:relative;display:block;aspect-ratio:4/3;background:hsl(var(--muted));overflow:hidden;text-decoration:none}
.thumb .page{position:absolute;left:17%;right:17%;top:9%;width:auto}
.card-b{padding:14px 16px 16px;display:grid;gap:4px}
.card-b h3{font-size:16px;font-weight:500;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-b h3 a{text-decoration:none}
.card-b h3 a::after{content:"";position:absolute;inset:0}
.card-b .tags{margin-top:8px}
.chk{position:absolute;left:8px;top:8px;z-index:2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.chk input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chk .box{width:24px;height:24px;border-radius:8px;border:1px solid hsl(var(--input));background:hsl(var(--field));display:grid;place-items:center;color:transparent;opacity:0;transition:opacity .12s}
.card:hover .chk .box,.card:focus-within .chk .box,.selmode .chk .box,.chk input:checked~.box{opacity:1}
.chk input:checked~.box{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.chk input:focus-visible~.box{outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:2px;opacity:1}
@media (hover:none){.chk .box{opacity:1}}

/* Home */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center;text-align:center;padding:24px 0 12px}
.hero h1{font-size:32px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.bigsearch{display:flex;align-items:center;gap:12px;width:min(680px,100%);height:56px;padding:0 20px;border-radius:12px;border:1px solid hsl(var(--input));background:hsl(var(--field));box-shadow:var(--shadow-sm);color:hsl(var(--muted-foreground));font-size:16px;cursor:pointer;text-align:left;margin-top:8px}
.bigsearch:hover{box-shadow:var(--shadow-md)}
.bigsearch span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid hsl(var(--border-strong) / .55);background:hsl(var(--field));font-weight:500;cursor:pointer;white-space:nowrap}
.chip:hover{background:hsl(var(--surface-hover))}
.chip.act{background:hsl(var(--primary-subtle));border-color:hsl(var(--sidebar-active-border));color:hsl(var(--primary-subtle-foreground))}
.sec{margin-top:40px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sh-head h2{font-size:18px}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(256px,280px);gap:16px;overflow-x:auto;padding:4px;margin:-4px;scroll-snap-type:x proximity}
.shelf>*{scroll-snap-align:start}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vcard{display:grid;gap:4px;text-align:left;padding:16px;border-radius:16px;border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden}
.vcard:hover{box-shadow:var(--shadow-md)}
.vcard h3{font-size:16px;font-weight:500;display:flex;gap:8px;align-items:center}
.stack{position:relative;height:84px;margin-bottom:8px;background:hsl(var(--muted));border-radius:10px;overflow:hidden}
.empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:72px 24px;max-width:520px;margin:0 auto}
.empty h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.empty h2{font-size:20px;line-height:1.25}
.empty.in-page{padding:48px 24px}
.fan{position:relative;width:200px;height:150px;margin-bottom:12px}
.fan .page{position:absolute;width:96px;top:6px;left:52px;transform-origin:50% 100%}
.fan .page:nth-child(1){transform:rotate(-14deg) translateX(-34px)}
.fan .page:nth-child(3){transform:rotate(14deg) translateX(34px)}
.fan .page:nth-child(2){top:0;z-index:1}
.sk{background:linear-gradient(90deg,hsl(var(--muted)),hsl(var(--surface-subtle)),hsl(var(--muted)));background-size:200% 100%;animation:sh 1.4s linear infinite;border-radius:10px}
@keyframes sh{to{background-position:-200% 0}}

/* Browse */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.phead h1{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools .selw{width:168px}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.rows{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));overflow:hidden}
.row{position:relative;display:grid;grid-template-columns:44px 40px minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.4fr) 112px 120px;gap:12px;align-items:center;padding:8px 16px 8px 4px;border-top:1px solid hsl(var(--border))}
.row:first-child{border-top:0}
.row:hover{background:hsl(var(--muted))}
.row.on{background:hsl(var(--primary-subtle))}
.row.on .cap{color:hsl(var(--muted-foreground))}
.card-b h3 a:focus-visible,.row a:focus-visible{outline:none}
.card-b h3 a:focus-visible::after{outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:-2px;border-radius:16px}
.row a:focus-visible::after{outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:-3px;border-radius:8px}
.row .chk{position:relative;left:auto;top:auto;width:44px;height:44px;z-index:2}
.row .chk .box{opacity:1}
.row .page{width:32px}
.row a{text-decoration:none;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row a::after{content:"";position:absolute;inset:0}
.row .tags{flex-wrap:nowrap;overflow:hidden}
.more{display:grid;justify-items:center;gap:8px;margin-top:28px}
.bulk{position:sticky;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:min(920px,100%);margin:24px auto 0;padding:10px 12px;border-radius:16px;background:hsl(var(--popover));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg)}
.bulk strong{padding:0 8px;font-weight:600}
.noresult{display:grid;justify-items:center;gap:8px;padding:56px 16px;text-align:center}

/* Document detail */
.dhead{display:grid;gap:12px;margin-bottom:20px}
.dnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dnav .sp{flex:1}
.pager{display:flex;align-items:center;gap:4px}
.dhead h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.dmeta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:hsl(var(--muted-foreground))}
.dbody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.preview{position:sticky;top:0;display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:16px;background:hsl(var(--muted));overflow:hidden;max-height:calc(100dvh - 96px)}
.pvbar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border))}
.pvbar .sp{flex:1}
#pgstat{white-space:nowrap}
.pvpages{flex:1 1 auto;min-height:0;overflow:auto;padding:20px;display:grid;gap:20px;justify-items:safe center;align-content:start}
.pvpages>div{width:calc(min(100%,720px) * var(--z,1))}
.tabs{display:flex;gap:4px;border-bottom:1px solid hsl(var(--border));margin-bottom:16px;overflow-x:auto}
.tab{position:relative;height:44px;padding:0 14px;border:0;background:none;color:hsl(var(--muted-foreground));font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;border-radius:10px 10px 0 0}
.tab:hover{color:hsl(var(--foreground))}
.tab[aria-selected="true"]{color:hsl(var(--foreground))}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:hsl(var(--primary))}
.panel{display:grid;gap:16px}
.panel>div:empty{display:none}
.box-s{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;box-shadow:var(--shadow-xs);padding:20px;display:grid;gap:16px}
.box-s h3{font-size:16px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.callout{display:grid;gap:10px;padding:16px;border-radius:16px;background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground));border:1px solid hsl(var(--sidebar-active-border))}
.callout p{color:inherit}
.sugg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sugg .chip{height:32px;border-style:dashed}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.list{list-style:none;margin:0;padding:0;display:grid}
.list li{display:grid;gap:4px;padding:14px 0;border-top:1px solid hsl(var(--border))}
.list li:first-child{border-top:0}
.ptab{width:100%;border-collapse:collapse}
.ptab th,.ptab td{padding:10px 8px;text-align:left;border-top:1px solid hsl(var(--border))}
.ptab thead th{border-top:0;font-weight:500}
.ptab input{width:20px;height:20px;accent-color:hsl(var(--primary))}

/* Menus, dialogs, toast */
#menu{position:fixed;z-index:60;padding:6px;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:12px;box-shadow:var(--shadow-lg);max-height:min(60vh,420px);overflow:auto;max-width:calc(100vw - 16px)}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;color:hsl(var(--foreground))}
.mi:hover{background:hsl(var(--surface-hover))}
.mi.dng{color:hsl(var(--destructive))}
.mfs{border:0;margin:0;padding:0;display:grid;gap:0}
.mfs label{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:8px;cursor:pointer}
.mfs label:hover{background:hsl(var(--surface-hover))}
.mfs input{width:18px;height:18px;accent-color:hsl(var(--primary));margin:0}
.mhead{padding:6px 10px 8px;font-weight:600}
.mform{display:grid;gap:10px;padding:6px;min-width:240px}
dialog{padding:0;border:1px solid hsl(var(--border));border-radius:16px;background:hsl(var(--popover));color:hsl(var(--foreground));box-shadow:var(--shadow-modal);max-width:calc(100vw - 24px)}
dialog::backdrop{background:hsl(var(--overlay) / .5)}
#dlg-pal{width:640px;margin:12vh auto 0;overflow:hidden}
.pq{display:flex;align-items:center;gap:12px;padding:0 16px;height:56px;border-bottom:1px solid hsl(var(--border))}
.pq input{flex:1;height:100%;border:0;background:none;font-size:16px;min-width:0}
.pq input:focus-visible{outline:none}
.pq:focus-within{box-shadow:inset 0 -2px 0 hsl(var(--primary))}
#plist{max-height:min(56vh,440px);overflow:auto;padding:8px}
.gh{padding:10px 10px 4px;font-weight:600}
.opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:10px;cursor:pointer;list-style:none}
.opt[aria-selected="true"]{background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground));box-shadow:inset 0 0 0 1px hsl(var(--sidebar-active-border))}
.opt .t{flex:1;min-width:0;display:grid}
.opt .t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:hsl(var(--muted-foreground))}
.opt .page{width:26px;flex:none}
.opt .oi{display:grid;place-items:center;width:26px;color:hsl(var(--muted-foreground));flex:none}
.opt[aria-selected="true"] .oi,.opt[aria-selected="true"] .t span{color:inherit}
mark{background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground));border-radius:3px;padding:0 1px;font-weight:600;box-shadow:0 0 0 1px hsl(var(--sidebar-active-border) / .5)}
.opt[aria-selected="true"] mark{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.pfoot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));flex-wrap:wrap}
.pnote{padding:28px 16px;text-align:center;color:hsl(var(--muted-foreground))}
.dlg{width:520px}
.dlg-in{padding:24px;display:grid;gap:16px}
.dlg-in h2{font-size:20px}
.drop{display:grid;justify-items:center;gap:8px;text-align:center;padding:28px 16px;border:1.5px dashed hsl(var(--border-strong));border-radius:16px;background:hsl(var(--muted))}
.drop.over{border-color:hsl(var(--primary));background:hsl(var(--primary-subtle))}
.upl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.upl li{display:grid;gap:6px}
.upl .r{display:flex;justify-content:space-between;gap:12px}
.upl .r span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:8px;border-radius:99px;background:hsl(var(--muted));overflow:hidden;border:1px solid hsl(var(--border))}
.bar i{display:block;height:100%;background:hsl(var(--primary));border-radius:99px}
#live{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;max-width:calc(100vw - 24px);padding:10px 16px;border-radius:12px;background:hsl(var(--foreground));color:hsl(var(--background));box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .15s}
#live.on{opacity:1}

@media (max-width:1000px){
  .dbody{grid-template-columns:minmax(0,1fr)}
  .preview{position:static;max-height:70dvh}
  .row{grid-template-columns:44px 40px minmax(0,1fr) 112px}
  .row .c-type,.row .tags,.row .c-amt{display:none}
}
/* Collapsed desktop sidebar = icon rail (Sedeya's SIDEBAR_WIDTH_ICON, 3rem): icons only, labels in tooltips, no group headers or counts. */
@media (min-width:901px){
  body[data-nav="closed"] .top-l .brand .logo{display:none}
  body[data-nav="closed"] .top-l .brand .mark{display:block}
  body[data-nav="closed"] #side{width:48px;padding:8px 6px 16px;overflow-x:hidden;scrollbar-width:none}
  body[data-nav="closed"] #side::-webkit-scrollbar{display:none}
  body[data-nav="closed"] #side .nav{align-items:center}
  body[data-nav="closed"] #side .nav[hidden]{display:flex!important}
  body[data-nav="closed"] #side .row-nav{width:36px;height:36px;padding:0;justify-content:center}
  body[data-nav="closed"] #side .row-nav .l,body[data-nav="closed"] #side .row-nav .n,body[data-nav="closed"] #side .grp-btn{display:none}
  /* Saved views are identical bookmark icons: the rail keeps only the active one (the palette and the home page still reach the rest). */
  body[data-nav="closed"] #side h2[data-grp="views"],body[data-nav="closed"] #side nav>h2.grp:first-child,body[data-nav="closed"] #side .nav[data-grp="views"] .row-nav:not([aria-current]){display:none}
  body[data-nav="closed"] #side h2.grp{height:1px;margin:8px 4px;padding:0;overflow:hidden;font-size:0;background:hsl(var(--sidebar-border))}
  body[data-nav="closed"] #side .gwrap{margin-top:8px;padding-top:8px;border-top:1px solid hsl(var(--sidebar-border))}
  body[data-nav="closed"] #side .gwrap .nav{margin-top:0}
}
@media (max-width:900px){
  #side{position:fixed;z-index:30;left:0;top:56px;bottom:0;background:hsl(var(--sidebar));border-right:1px solid hsl(var(--sidebar-border));box-shadow:var(--shadow-lg);width:288px;max-width:86vw}
  body[data-nav="open"] .scrim{display:block;position:fixed;inset:56px 0 0 0;z-index:20;background:hsl(var(--overlay) / .4)}
  body[data-nav="closed"] #side{display:none}
  .content,body[data-nav="closed"] .content{margin:0 8px 8px}
}
@media (max-width:560px){
  .top{padding:0 8px 0 10px;gap:4px}
  .logo{height:22px}
  .pill{margin-left:4px;flex:1 1 auto;min-width:0}
  .pill kbd{display:none}
  .top-r{gap:4px}
  .upl-l{display:none}
  #upbtn{width:36px;padding:0}
  .wrap{padding:20px 14px 56px}
  .hero h1{font-size:26px}
  .grid,.vgrid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row}
  .card .thumb{width:104px;aspect-ratio:auto;flex:none;min-height:132px}
  .thumb .page{left:12%;right:12%;top:12%}
  .card-b{padding:12px 14px;min-width:0;align-content:start}
  .shelf{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:0;margin:0}
  .shelf>.card:nth-child(n+5){display:none}
  .f2{grid-template-columns:1fr}
  .dnav .lbl{display:none}
  .dnav .btn{padding:0;width:40px}
  .dnav .btn.sm{width:36px}
  .dnav .btn.back{width:auto;padding:0 12px}
  .dnav .btn.back .lbl{display:inline}
  .dhead h1,.phead h1{font-size:24px}
  .tools .selw{width:140px}
  .pvpages{padding:12px}
  .box-s{padding:16px}
  .row{grid-template-columns:44px 40px minmax(0,1fr)}
  .row .c-date{display:none}
}

/* ===== Foundation additions: shell extras and generic building blocks (tokens only, no new colours) ===== */
html{background:hsl(var(--sidebar))}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
.lnk{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:hsl(var(--primary-hover))}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Sidebar groups and user menu */
h2.grp{font-size:14px}
.gwrap{margin-top:12px}
.grp-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:36px;padding:0 12px;border:0;border-radius:10px;background:none;font-size:14px;font-weight:600;color:hsl(var(--foreground));cursor:pointer;text-align:left}
.grp-btn:hover{background:hsl(var(--sidebar-accent))}
.grp-btn .ico{color:hsl(var(--muted-foreground))}
.gwrap .nav{margin-top:2px}
.top .btn,.top .brand{flex:none}
.avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid hsl(var(--sidebar-active-border));border-radius:50%;background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground));font-weight:600;font-size:14px;letter-spacing:0;cursor:pointer}
.avatar:hover{background:hsl(var(--surface-hover))}
.msep{border:0;border-top:1px solid hsl(var(--border));margin:6px 0}
.mi[aria-checked="true"]{font-weight:500}
/* User menu: theme and language as compact segmented rows, so the whole menu (incl. Sign out) fits without scrolling. */
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 2px 10px;font-weight:500}
.mrow+.mrow{margin-top:4px}
.mseg{display:inline-flex;padding:2px;gap:2px;border-radius:10px;background:hsl(var(--muted));border:1px solid hsl(var(--border))}
.mi.mseg-b{width:auto;min-width:36px;min-height:32px;padding:0 10px;justify-content:center;border-radius:8px;color:hsl(var(--muted-foreground));font-weight:500}
.mi.mseg-b:hover{color:hsl(var(--foreground))}
.mi.mseg-b[aria-checked="true"]{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:var(--shadow-xs)}
a.mi{text-decoration:none}

/* Toast with optional undo */
#live{display:flex;align-items:center;gap:12px}
#live.act{pointer-events:auto}
.toast-undo{height:32px;padding:0 10px;border:1px solid hsl(var(--background) / .5);border-radius:8px;background:transparent;color:inherit;font-weight:600;cursor:pointer}
.toast-undo:hover{background:hsl(var(--background) / .16)}
.toast-undo:focus-visible{outline:var(--ring-width) solid hsl(var(--background));outline-offset:2px}

/* Page header */
.phead .sub{margin-top:4px}
.phead-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs{display:flex;gap:6px;align-items:center;color:hsl(var(--muted-foreground));margin-bottom:8px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* Data table: wrap a <table class="dt"> in .tablewrap. Sortable headers hold a <button class="sort"> and carry aria-sort. */
.tablewrap{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));overflow:auto}
.dt{width:100%;border-collapse:collapse;min-width:560px}
.dt th,.dt td{padding:10px 16px;text-align:left;vertical-align:middle;border-top:1px solid hsl(var(--border))}
.dt thead th{border-top:0;font-weight:600;background:hsl(var(--muted));white-space:nowrap;padding-top:8px;padding-bottom:8px}
.dt th.num,.dt td.num{text-align:right}
.dt tbody tr:hover{background:hsl(var(--muted))}
.dt tbody tr.on{background:hsl(var(--primary-subtle))}
.dt .sort{display:inline-flex;align-items:center;gap:6px;height:32px;margin:-4px -8px;padding:0 8px;border:0;border-radius:8px;background:none;font-weight:600;cursor:pointer}
.dt .sort:hover{background:hsl(var(--surface-hover))}
.dt .sort .ico{color:hsl(var(--caption-foreground))}
.dt th[aria-sort="ascending"] .sort .ico,.dt th[aria-sort="descending"] .sort .ico{opacity:1;color:hsl(var(--primary))}
.dt td.act,.dt th.act{width:1%;white-space:nowrap;text-align:right}
.row-actions{display:inline-flex;gap:2px;opacity:.55;transition:opacity .12s}
.dt tr:hover .row-actions,.dt tr:focus-within .row-actions,.row-actions:focus-within{opacity:1}
@media (hover:none){.row-actions{opacity:1}}
.dt .chk{position:relative;left:auto;top:auto}
.dt .chk .box{opacity:1}
.dt td.cell-main{font-weight:500}
.dt td.cell-main a{text-decoration:none}.dt td.cell-main a:hover{text-decoration:underline}
.dt-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}

/* Empty / error / skeleton / inline alert */
.empty .art{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground))}
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;border:1px solid hsl(var(--c) / .45);background:hsl(var(--c) / .12);color:hsl(var(--foreground));--c:var(--accent)}
.alert .ico{margin-top:2px;color:hsl(var(--c))}
.alert.error{--c:var(--destructive)}.alert.warning{--c:var(--warning)}.alert.success{--c:var(--success)}
.sk-line{height:14px}.sk-title{height:28px;width:240px}

/* Status badges: colour is never the only signal, the label always says it */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:14px;line-height:1;white-space:nowrap;background:hsl(var(--c) / .14);border:1px solid hsl(var(--c) / .4);color:hsl(var(--foreground));--c:var(--muted-foreground)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:hsl(var(--c))}
.badge.success{--c:var(--success)}.badge.warning{--c:var(--warning)}.badge.destructive{--c:var(--destructive)}.badge.neutral{--c:var(--muted-foreground)}

/* Drawer (a <dialog class="drawer"> sliding from the right) */
dialog.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(480px,100vw);max-width:100vw;border-radius:16px 0 0 16px;border-width:0 0 0 1px;overflow:auto}
dialog.drawer .dlg-in{min-height:100%;align-content:start}
.dlg-body{display:grid;gap:16px}

/* Forms */
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.lb{margin:0;font-weight:500}
.help{color:hsl(var(--muted-foreground))}
.req::after{content:" *";color:hsl(var(--destructive))}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fgrid .wide{grid-column:1/-1}
fieldset.fs{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
fieldset.fs>legend{padding:0;margin-bottom:6px;font-weight:500}
.check{display:flex;align-items:flex-start;gap:12px;min-height:32px;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:hsl(var(--primary));flex:none}
.check .t{display:grid}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer}
.switch input{appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:99px;background:hsl(var(--border-strong));cursor:pointer;transition:background .12s}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:hsl(var(--card));box-shadow:var(--shadow-xs);transition:transform .12s}
.switch input:checked{background:hsl(var(--primary))}
.switch input:checked::after{transform:translateX(18px);background:hsl(var(--primary-foreground))}
.switch input:focus-visible{outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:2px}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.rc{position:relative;display:grid;gap:4px;padding:14px 16px 14px 44px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));cursor:pointer}
.rc:hover{background:hsl(var(--muted))}
.rc input{position:absolute;left:14px;top:16px;width:20px;height:20px;margin:0;accent-color:hsl(var(--primary))}
.rc:has(input:checked){border-color:hsl(var(--sidebar-active-border));background:hsl(var(--primary-subtle));box-shadow:0 0 0 1px hsl(var(--sidebar-active-border))}
.rc:has(input:focus-visible){outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:2px}
.rc strong{font-weight:500}
.rc .help{color:inherit;opacity:.85}
.fieldicon{position:relative}
.fieldicon .ico{position:absolute;left:12px;top:11px;color:hsl(var(--muted-foreground));pointer-events:none}
.fieldicon .in{padding-left:38px}

/* Segmented control: buttons with aria-pressed, or radios as input + span */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:hsl(var(--muted));border:1px solid hsl(var(--border))}
.seg button,.seg label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:9px;background:none;font-weight:500;color:hsl(var(--muted-foreground));cursor:pointer;white-space:nowrap}
.seg button:hover,.seg label:hover{color:hsl(var(--foreground))}
.seg button[aria-pressed="true"],.seg label:has(input:checked){background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:var(--shadow-xs)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:focus-visible){outline:var(--ring-width) solid hsl(var(--ring) / var(--ring-alpha));outline-offset:1px}

/* Settings layout: .sset rows, label column left, controls right */
.settings{display:grid}
.sset{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:12px 48px;padding:28px 0;border-top:1px solid hsl(var(--border))}
.sset:first-child{border-top:0;padding-top:8px}
.sset>div:first-child{display:grid;gap:4px;align-content:start}
.sset h2{font-size:18px}
.sset .body{display:grid;gap:16px;min-width:0;max-width:640px}
.sset-actions{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;padding:12px 0;background:hsl(var(--content));border-top:1px solid hsl(var(--border))}

/* Code and log blocks */
.code{margin:0;padding:12px 14px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--muted));font:400 13px/1.55 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;white-space:pre;tab-size:2}
.log{display:block;max-height:min(60vh,560px)}
.log .ln{display:block;white-space:pre-wrap;word-break:break-word}
.log .ts{color:hsl(var(--caption-foreground))}
.log .lv{font-weight:600}
.log .lv.ERROR{color:hsl(var(--destructive))}.log .lv.WARNING{color:hsl(var(--warning))}.log .lv.INFO{color:hsl(var(--success))}.log .lv.DEBUG{color:hsl(var(--caption-foreground))}

@media (max-width:900px){.sset{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0}.fgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.phead-actions{width:100%}.dlg{width:calc(100vw - 24px)!important}.seg{max-width:100%;overflow-x:auto}}

/* Touch: 44px targets */
a.vcard,a.chip{text-decoration:none;color:inherit}
a.vcard:hover h3{text-decoration:underline}
@media (pointer:coarse){
  .btn,.in,.chip,.tab,.grp-btn,.seg button,.seg label{min-height:44px}
  .btn.icon{width:44px}
  .btn.sm{height:44px}
  .row-nav,.mi,.mfs label,.opt{min-height:44px}
  .avatar{width:44px;height:44px}
  #upbtn{min-width:44px}
  .dt .sort{height:44px}
  .toast-undo{height:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Tooltip for [data-tip] (rail icons, sidebar toggle): one fixed element, positioned by shell.js. */
#tip{position:fixed;z-index:60;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:hsl(var(--foreground));color:hsl(var(--background));font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md)}
#tip kbd{padding:2px 5px;border:1px solid hsl(var(--background) / .35);background:transparent;color:inherit;font-size:12px}

/* ===== Audit pass (2026-10-07): one pattern each ===== */
/* Touch floor (DESIGN.md): controls paint at 40/36px, the hit area reaches 44px through a pseudo-element. */
.btn,.chip,.row-nav{position:relative}
.btn::before,.chip::before{content:"";position:absolute;inset:-2px 0}
.btn.sm::before,.chip::before{inset:-4px 0}
.btn.icon::before{inset:-2px}
.btn.icon.sm::before{inset:-4px}
body[data-nav="closed"] #side .row-nav::before{content:"";position:absolute;inset:-4px}
.tag-x{position:relative}
.tag-x::after{content:"";position:absolute;inset:-12px}
.btn.icon.sm{width:36px}
/* Row delete: neutral, never red. */
.rdel{color:hsl(var(--muted-foreground))}
.rdel:hover,.rdel:focus-visible{color:hsl(var(--foreground))}
/* Dialog footer: Cancel then the primary, right-aligned; stacked full width on phones. */
.dlg-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
/* Tabs: counts inside; they scroll sideways if they overflow (pages keep them fitting at 360px). */
.tab .n{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 7px;border-radius:999px;background:hsl(var(--muted));color:hsl(var(--muted-foreground));font-size:13px;font-weight:500}
.tab[aria-selected="true"] .n{background:hsl(var(--primary-subtle));color:hsl(var(--primary-subtle-foreground))}
.tab .n.dng{background:hsl(var(--destructive) / .14);color:hsl(var(--destructive))}
.tabs{scrollbar-width:none;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{scroll-snap-align:start}
/* Date fields spell the date in the UI language under the native control. */
.date-hint{display:block;margin-top:4px;min-height:1.5em}
@media (max-width:560px){
  .tab{padding:0 10px}
  .dlg-foot{flex-direction:column-reverse;align-items:stretch}
  /* Full-screen tables become a card list: every td carries data-label. */
  .dt.mlist{min-width:0}
  .dt.mlist thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dt.mlist tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 4px;border-top:1px solid hsl(var(--border))}
  .dt.mlist tbody tr:first-child{border-top:0}
  .dt.mlist td{display:block;padding:0;border:0;text-align:left;min-width:0}
  .dt.mlist td[data-label]:not(.cell-main):not(.act)::before{content:attr(data-label) " · ";color:hsl(var(--caption-foreground))}
  .dt.mlist td.cell-main{grid-column:1;overflow-wrap:anywhere}
  .dt.mlist td.act{grid-column:2;grid-row:1;align-self:start}
  .dt.mlist td:not(.cell-main):not(.act){grid-column:1}
}

/* Pinned Paramètres row: sticky footer of the app sidebar (an icon in the rail). The fade shows only while rows scroll beneath it (shell.js). */
.side-foot{position:sticky;bottom:-16px;margin:8px 0 -16px;padding:8px 0 12px;background:hsl(var(--sidebar));border-top:1px solid hsl(var(--sidebar-border))}
.side-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;background:linear-gradient(to bottom,transparent,hsl(var(--sidebar)));pointer-events:none;opacity:0;transition:opacity .15s}
.side-foot.fade::before{opacity:1}

/* Settings frame (mountShell({ settings: true })): the settings nav replaces the app sidebar; no header, the pane gets the whole main column. */
body.sf{grid-template-rows:minmax(0,1fr)}
body.sf .content{margin-top:12px}
.sf-nav{display:flex;flex-direction:column;gap:2px}
.sf-nav .row-nav{height:36px;text-decoration:none}
.sf-nav .sf-back{color:hsl(var(--muted-foreground));margin-bottom:4px}
.sf-nav .sf-back:hover{color:hsl(var(--foreground))}
.sf-title{margin:8px 0 0;padding:0 12px;font-size:18px;font-weight:600}
.sf-grp{margin:16px 0 4px;padding:0 12px;font-size:12px;font-weight:600;color:hsl(var(--caption-foreground))}
.sf-nav .row-nav .ico{color:hsl(var(--muted-foreground))}
.sf-nav .row-nav[aria-current="page"] .ico{color:inherit}
/* Desktop filter field (the mobile topic list has its own search). */
.sf-filter{position:relative;margin:8px 0 0}
.sf-filter .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:hsl(var(--muted-foreground));pointer-events:none}
.sf-filter .in{height:36px;padding-left:36px;padding-right:36px;font-size:14px}
/* Desktop filter and mobile search share one rule set: hairline sides, a >=3:1 bottom edge, focus = a 2px bottom edge in the ring token (no ring). */
.sf-filter .in,.sf-search .in{border-color:hsl(var(--border)) hsl(var(--border)) hsl(var(--muted-foreground));border-radius:8px}
.sf-filter .in:focus-visible,.sf-search .in:focus-visible{outline:none;border-color:hsl(var(--border)) hsl(var(--border)) hsl(var(--ring));box-shadow:0 1px 0 0 hsl(var(--ring))}
.sf-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px;padding:2px 6px;pointer-events:none}
.sf-filter:focus-within .sf-kbd,.sf-filter:has(.in:not(:placeholder-shown)) .sf-kbd{display:none}
.sf-d{display:none;white-space:normal;font-size:12px;line-height:1.35;color:hsl(var(--muted-foreground))}
.sf-nav .row-nav[aria-current] .sf-d{color:hsl(var(--sidebar-active-foreground))}
.sf-in{margin:8px 0 0;padding:0 12px;font-size:12px;line-height:1.35;color:hsl(var(--muted-foreground))}
.sf-in[hidden]{display:none}
.sf-nav.sf-on .sf-d{display:block}
.sf-nav.sf-on .row-nav[data-k]{height:auto;min-height:36px;padding-top:6px;padding-bottom:6px}
.sf-nav.sf-on .row-nav[data-k] .ico{align-self:flex-start;margin-top:2px}
.sf-sec[hidden],.sf-nav .row-nav[hidden],.sf-none[hidden]{display:none!important}
.sf-none{margin:16px 0 0;padding:0 12px;color:hsl(var(--muted-foreground));font-size:14px}
.sf-none .btn,.sf-nomatch .btn{margin-top:8px}
.sf-none .sf-clear,.sf-nomatch .sf-clear{display:flex;width:fit-content;margin-left:-13px}
@media (max-width:900px){.sf-clear{min-height:44px}}
/* Mobile chrome (topic list, back links) lives outside #main. */
.sf-m{display:none}
@media (min-width:901px){
  body.sf #side{display:block;width:264px;padding:12px 12px 16px;overflow:auto;overflow-x:hidden;scrollbar-width:auto}
}
@media (max-width:900px){
  body.sf #side{display:none}
  body.sf .shell{flex-direction:column}
  body.sf .content{margin-top:8px;flex:1 1 auto;min-height:0}
  body.sf .sf-m{display:block;flex:none;padding:8px 8px 0}
  body.sf.sf-list #main{display:none}
  body.sf:not(.sf-list) .sf-m .sf-listbox{display:none}
  body.sf.sf-list .sf-m{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:16px}
  body.sf.sf-list .sf-m .sf-backpane{display:none}
}
.sf-mb{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:10px;color:hsl(var(--muted-foreground));text-decoration:none;font-weight:500}
.sf-mb:hover{background:hsl(var(--sidebar-accent));color:hsl(var(--foreground))}
.sf-listbox h1{font-size:22px;margin:4px 8px 12px}
.sf-search{position:relative;margin:0 0 8px}
.sf-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:hsl(var(--muted-foreground));pointer-events:none}
.sf-search .in{width:100%;padding-left:38px;box-sizing:border-box}
.sf-list-h{margin:16px 8px 4px;font-size:12px;font-weight:600;color:hsl(var(--caption-foreground))}
.sf-topic{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:0;text-decoration:none;color:hsl(var(--foreground));border-top:1px solid hsl(var(--border))}
.sf-topic:hover{background:hsl(var(--sidebar-accent))}
.sf-topic .tx{flex:1;min-width:0;display:grid;gap:2px}
.sf-topic .tx strong{font-weight:500}
.sf-topic .tx span{color:hsl(var(--muted-foreground));font-size:14px}
.sf-topic .ico{color:hsl(var(--muted-foreground))}
.sf-nomatch{padding:16px 8px;color:hsl(var(--muted-foreground))}