@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/plain-zero.woff2") format("woff2");
  unicode-range: U+0030;
}

@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/varela-round-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/varela-round-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@property --toasts-h { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --topbar-h { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  
  --surface-1: #F7F7F5; 
  --surface-2: #F1F1EF; 
  --e1: 0 0 0 1px rgba(15, 15, 15, .06), 0 1px 2px rgba(15, 15, 15, .08);
  --e2: 0 0 0 1px rgba(15, 15, 15, .08), 0 2px 4px rgba(15, 15, 15, .10);
  --e3: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .10), 0 9px 24px rgba(15, 15, 15, .20);
  --e4: 0 0 0 1px rgba(15, 15, 15, .05), 0 5px 10px rgba(15, 15, 15, .10), 0 15px 40px rgba(15, 15, 15, .20);
  --ink: #37352F;
  --ink-soft: #6B6A65;
  --bark: #DFDEDA;
  --wood: #7D6450; --leaf-new: #58B27A; --blossom: #E28AA2; 
  --stem: #AEADA8;
  --sap: #2E7556;
  --sap-wash: #DCEBE2;
  --mark: #1E4D39; 
  --amber: #B7791F;
  --amber-text: #8F5E17; 
  --on-amber: #1C231E; 
  --danger: #B3402F;
  --danger-wash: #F6E1DC;
  --violet: #6550A8; 
  --hover: #ECECEA;
  --lane: color-mix(in srgb, var(--ink) 4%, var(--paper)); 
  --shadow: var(--e1);
  --overlay: rgba(15, 15, 15, 0.4);
  
  --toast: #16201A;
  --on-toast: #E6EDE6;
  --toast-accent: #86D6AB;
  --on-toast-accent: #0F1A13;
  --toast-edge: transparent;
  --toast-shadow: 0 10px 28px rgba(16, 24, 19, .28), 0 2px 6px rgba(16, 24, 19, .16);

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  
  --t-2xs: 12px; --t-xs: 14px; --t-s: 15px; --t-m: 17px; --t-l: 20px; --t-xl: 24px;

  --indent: 40px;   
  --stem-x: 20px;   
  --elbow-y: 26px;  
  --stem-w: 2px;
  
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  
  --r-s: 4px;   
  --r-m: 6px;   
  --r-l: 8px;   
  --r-xl: 12px; 
  --r-pill: 999px; 
  --d-fast: 120ms; 
  --d-base: 180ms; 
  --d-slow: 260ms; 
  --radius-root: var(--r-l);
  --radius-card: var(--r-m);
  --rail-w: 210px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1); 
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191919;
    --card: #232323;
    --surface-1: #1F1F1F;
    --surface-2: #2A2A2A;
    --e1: 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4);
    --e2: 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .45);
    --e3: 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45);
    --e4: 0 0 0 1px rgba(255, 255, 255, .08), 0 5px 10px rgba(0, 0, 0, .3), 0 15px 40px rgba(0, 0, 0, .5);
    --ink: #D6D6D4;
    --ink-soft: #9B9B98;
    --bark: #373737;
    --wood: #A88B70; --leaf-new: #8FD3A0; --blossom: #E8A3B5; 
    --stem: #5A5A58;
    --sap: #6DBE95;
    --sap-wash: #1F3329;
    --mark: #6DBE95;
    --amber: #E0A54A;
    --amber-text: #E0A54A;
    --on-amber: #1F1F1F;
    --danger: #E47A68;
    --danger-wash: #3A211C;
    --violet: #AE9EF0;
    --hover: #2C2C2C;
    --lane: #141414;
    --shadow: var(--e1);
    --overlay: rgba(0, 0, 0, 0.5);
    --toast: #1E2A22;
    --toast-edge: rgba(134, 214, 171, .22);
    --toast-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

  :root[data-theme="dark"] {
    --paper: #191919;
    --card: #232323;
    --surface-1: #1F1F1F;
    --surface-2: #2A2A2A;
    --e1: 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4);
    --e2: 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .45);
    --e3: 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45);
    --e4: 0 0 0 1px rgba(255, 255, 255, .08), 0 5px 10px rgba(0, 0, 0, .3), 0 15px 40px rgba(0, 0, 0, .5);
    --ink: #D6D6D4;
    --ink-soft: #9B9B98;
    --bark: #373737;
    --wood: #A88B70; --leaf-new: #8FD3A0; --blossom: #E8A3B5; 
    --stem: #5A5A58;
    --sap: #6DBE95;
    --sap-wash: #1F3329;
    --mark: #6DBE95;
    --amber: #E0A54A;
    --amber-text: #E0A54A;
    --on-amber: #1F1F1F;
    --danger: #E47A68;
    --danger-wash: #3A211C;
    --violet: #AE9EF0;
    --hover: #2C2C2C;
    --lane: #141414;
    --shadow: var(--e1);
    --overlay: rgba(0, 0, 0, 0.5);
    --toast: #1E2A22;
    --toast-edge: rgba(134, 214, 171, .22);
    --toast-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }


:root[data-text="s"]  { --t-2xs: 12px; --t-xs: 13px; --t-s: 14px; --t-m: 16px; --t-l: 19px; --t-xl: 23px; }
:root[data-text="l"]  { --t-2xs: 13px; --t-xs: 15px; --t-s: 16px; --t-m: 18px; --t-l: 21px; --t-xl: 26px; }
:root[data-text="xl"] { --t-2xs: 15px; --t-xs: 17px; --t-s: 18px; --t-m: 20px; --t-l: 24px; --t-xl: 29px; }

@media (max-width: 899px) { :root:not([data-text]) { --t-2xs: 13px; } }

:root[data-contrast="more"] {
  --ink-soft: color-mix(in srgb, var(--ink) 84%, var(--paper));
  --bark: color-mix(in srgb, var(--ink) 48%, var(--paper));
  --stem: color-mix(in srgb, var(--ink) 58%, var(--paper));
}

:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-m)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
::placeholder { color: var(--ink-soft); opacity: 1; } 

:root {
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='5.4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.7'/%3E%3C/svg%3E") 12 12, default;
  --cursor-act: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23FBFCFA' stroke-width='3.8'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%232E7556' stroke-width='2'/%3E%3Ccircle cx='12' cy='12.8' r='4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.4'/%3E%3C/svg%3E") 12 12, pointer;
  --cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%23FBFCFA' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%231C231E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, text;
  --cursor-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='18.60' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='18.60' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='5.40' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='5.40' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, grab;
  --cursor-grabbing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='7' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='6.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%236DBE95'/%3E%3C/svg%3E") 12 12, grabbing;
  --cursor-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23FBFCFA' stroke-width='4.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23FBFCFA' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23B5523B' stroke-width='2.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23B5523B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, not-allowed;
}
@supports (cursor: image-set(url("data:,") 1x) 12 12, auto) {
  :root {
    --cursor: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='5.4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.7'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='5.4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.7'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='5.4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.7'/%3E%3C/svg%3E") 3x) 12 12, default;
    --cursor-act: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23FBFCFA' stroke-width='3.8'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%232E7556' stroke-width='2'/%3E%3Ccircle cx='12' cy='12.8' r='4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.4'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23FBFCFA' stroke-width='3.8'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%232E7556' stroke-width='2'/%3E%3Ccircle cx='12' cy='12.8' r='4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.4'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23FBFCFA' stroke-width='3.8'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%232E7556' stroke-width='2'/%3E%3Ccircle cx='12' cy='12.8' r='4' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.4'/%3E%3C/svg%3E") 3x) 12 12, pointer;
    --cursor-text: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%23FBFCFA' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%231C231E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%23FBFCFA' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%231C231E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%23FBFCFA' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M9 4.5h6M12 4.5v15M9 19.5h6' fill='none' stroke='%231C231E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 3x) 12 12, text;
    --cursor-grab: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='18.60' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='18.60' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='5.40' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='5.40' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.2'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='18.60' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='18.60' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='5.40' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='5.40' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.2'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Ccircle cx='18.60' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='18.60' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='5.40' cy='12.00' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12.00' cy='5.40' r='2.3' fill='%236DBE95' stroke='%231C231E' stroke-width='1.1'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.2'/%3E%3C/svg%3E") 3x) 12 12, grab;
    --cursor-grabbing: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='7' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='6.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%236DBE95'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='7' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='6.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%236DBE95'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.8' r='7' fill='rgba(0,0,0,.28)'/%3E%3Ccircle cx='12' cy='12' r='6.2' fill='%232E7556' stroke='%23FBFCFA' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%236DBE95'/%3E%3C/svg%3E") 3x) 12 12, grabbing;
    --cursor-no: image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23FBFCFA' stroke-width='4.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23FBFCFA' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23B5523B' stroke-width='2.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23B5523B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23FBFCFA' stroke-width='4.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23FBFCFA' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23B5523B' stroke-width='2.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23B5523B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 2x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23FBFCFA' stroke-width='4.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23FBFCFA' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23B5523B' stroke-width='2.2'/%3E%3Cpath d='M6.8 17.2L17.2 6.8' stroke='%23B5523B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 3x) 12 12, not-allowed;
  }
}
@media (forced-colors: active) { :root { --cursor: default; --cursor-act: pointer; --cursor-text: text; --cursor-grab: grab; --cursor-grabbing: grabbing; --cursor-no: not-allowed; } }

html { cursor: var(--cursor); }
a[href] { cursor: var(--cursor-act); }
input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset]), textarea, [contenteditable="true"] { cursor: var(--cursor-text); }
button { cursor: var(--cursor-act); }

@media (hover: none) { :is(.btn, .icon-btn, .crumbs a, .settings-back):active { background: var(--hover); } }
button:disabled, [aria-disabled="true"] { cursor: var(--cursor); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; border-radius: 4px; }

::selection { background: color-mix(in srgb, var(--sap) 30%, transparent); }

:root, [dir="ltr"] { --lead-x: 2px; }
[dir="rtl"] { --lead-x: -2px; }

.flip-rtl:dir(rtl) { transform: scaleX(-1); }
input, textarea, [contenteditable="true"] { caret-color: var(--sap); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -40px; background: var(--card); padding: 8px 12px; z-index: 50; }
.skip:focus { top: 8px; }
[hidden]:not([hidden="until-found"]) { display: none !important; } 



.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 8px;
  background: var(--surface-1);
  border-inline-end: 1px solid color-mix(in srgb, var(--bark) 60%, transparent);
}
.brand { display: flex; align-items: center; gap: .3em; color: var(--mark); text-decoration: none; font-weight: 600; font-size: var(--t-m); padding: 4px 10px 14px; }

.brand svg { width: 1.4em; height: 1.4em; flex: none; translate: 0 -.05em; fill: currentColor; }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.places a, .rail-settings {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 32px; padding: 5px 10px; border-radius: var(--r-m);
  text-decoration: none; background: none; border: 0; text-align: start; font-size: var(--t-s);
}
.places a:hover, .rail-settings:hover { background: var(--hover); }

.places a[aria-current="page"], .rail-settings[aria-current="page"] { background: color-mix(in srgb, var(--ink) 8%, var(--surface-1)); font-weight: 600; } 
.count { color: var(--ink-soft); font-size: var(--t-xs); }

.places-group { display: grid; gap: 2px; margin-block-start: var(--s-3); }
.places-group[hidden] { display: none; }
.places-head { display: flex; align-items: center; gap: 2px; }

.places-toggle {
  display: inline-flex; align-items: center; gap: 4px; flex: 1; min-width: 0; min-height: 28px; padding: 2px 10px;
  border: 0; border-radius: var(--r-m); background: none; color: var(--ink-soft); font-size: var(--t-xs); text-align: start;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.places-toggle:hover { background: var(--hover); color: var(--ink); }
.places-toggle > svg { width: 12px; height: 12px; flex: none; opacity: .7; transition: rotate var(--d-fast) var(--ease); } 
.is-closed .places-toggle > svg { rotate: -90deg; }
.is-closed .places-toggle > svg:dir(rtl) { rotate: 90deg; }
.places-add {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-m); background: none; color: var(--ink-soft);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.places-add:hover { background: var(--hover); color: var(--ink); }
.places-add svg { width: 16px; height: 16px; }
.places-group.is-closed > .places:not(:has([data-place="home"])), .is-closed .rail-projects, .rail-pins.is-closed > ul { display: none; }

.rail-end {
  margin-block-start: auto; position: sticky; bottom: 0; z-index: 1;
  display: grid; gap: 2px; padding-block: var(--s-3) 0; background: var(--surface-1);
}
.rail-note { margin: 8px 10px 0; color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.4; }
.rail-note:empty { display: none; }

.rail-account {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-block-start: var(--s-2); padding: 6px 8px;
  border: 0; border-radius: var(--r-m); background: none; color: var(--ink); text-align: start; font-size: var(--t-s);
  transition: background-color var(--d-fast) var(--ease);
}
.rail-account:hover, .rail-account[aria-expanded="true"] { background: var(--hover); }
.rail-account[hidden] { display: none; }
.rail-account .avatar {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden;
  border-radius: var(--r-pill); background: var(--sap-wash); color: var(--sap); font-size: var(--t-xs); font-weight: 600;
}
.rail-account .avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail-account .avatar svg { width: 16px; height: 16px; }
.account-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.account-name, .account-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { font-weight: 600; }
.account-sub { color: var(--ink-soft); font-size: var(--t-xs); }
.account-more { display: inline-grid; flex: none; color: var(--ink-soft); }
.account-more svg { width: 16px; height: 16px; }

.rail-signin {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 10px 0; min-height: 40px; padding: 8px 14px;
  border-radius: var(--r-m); background: var(--sap-wash); color: var(--ink); font-size: var(--t-s); font-weight: 600; text-decoration: none;
}
.rail-signin .nav-icon { color: var(--sap); }
.rail-signin:hover { background: color-mix(in srgb, var(--sap) 16%, var(--sap-wash)); }
.rail-signin[hidden] { display: none; }

.nav-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
.nav-icon svg { width: 18px; height: 18px; }
.places a, .rail-settings { justify-content: flex-start; gap: 10px; }
.places a > .count, .places a > .tend-dot { margin-inline-start: auto; }
.places a[aria-current="page"] .nav-icon { color: var(--sap); }
.places a:hover .nav-icon, .rail-settings:hover .nav-icon { color: var(--ink); }
.rail { position: sticky; }
.rail-toggle { position: absolute; top: 22px; inset-inline-end: 12px; width: 30px; height: 30px; color: var(--ink-soft); }
.grove-switch > .nav-icon { display: none; }

.app.rail-slim { --rail-w: 68px; }
.rail-slim .rail { padding-inline: 10px; align-items: center; }
.rail-slim .rail-toggle { position: relative; inset: auto; margin: -8px 0 6px; } 
.rail-slim .brand { padding: 4px 0 14px; }

.rail-slim :is(.brand > span, .nav-label, .places a > .count, .rail-note, .rail-search kbd, .grove-switch > :not(.nav-icon)) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rail-slim :is(.places, .places-group, .rail-end) { width: 100%; }
.rail-slim .places-head { display: none; } 
.rail-slim .places-group.is-closed > .places { display: grid; } 
.rail-slim .rail-account { justify-content: center; width: 44px; padding-inline: 0; margin-inline: auto; }
.rail-slim .account-more { display: none; }
.rail-slim :is(.places a, .rail-settings, .rail-search, .grove-switch, .rail-signin) { position: relative; justify-content: center; padding-inline: 0; width: 44px; margin-inline: auto; }
.rail-slim .grove-switch > .nav-icon { display: inline-grid; }
.rail-slim :is(.rail-search, .grove-switch) { display: flex; align-items: center; min-height: 40px; margin-block: 0 2px; padding-block: 8px; border-color: transparent; background: none; color: var(--ink-soft); }
.rail-slim :is(.rail-search, .grove-switch):hover { background: var(--hover); color: var(--ink); }
.rail-slim :is(.places a, .rail-settings)[aria-current="page"] { box-shadow: none; } 
.rail-slim .places a > .tend-dot { position: absolute; top: 6px; inset-inline-end: 8px; margin: 0; }
.btn > svg { width: 16px; height: 16px; flex: none; }
.shape-switch a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.shape-switch a > svg { width: 15px; height: 15px; flex: none; }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px; background: var(--paper);
  border-bottom: 1px solid transparent;
}

.capture { flex: 1; min-width: min(100%, 18rem); max-width: 640px; display: flex; gap: 8px; }

.capture-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); padding-inline-end: var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-m); background: var(--surface-2);
  transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.capture-field:hover { background: color-mix(in srgb, var(--surface-2) 82%, var(--bark)); }
.capture-field:focus-within { background: var(--card); box-shadow: var(--e2); }
.capture-field:has(input:focus-visible) { outline: 2px solid var(--sap); outline-offset: 0; }
.capture input {
  flex: 1; min-width: 0; padding: 10px 18px; padding-inline-end: 0; text-overflow: ellipsis; 
  border: 0; border-radius: var(--r-m); background: transparent;
}
.capture input:focus-visible { outline: none; } 
.capture-dest {
  
  flex: none; max-width: max(50%, 9em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px var(--s-2); border: 0; border-radius: var(--r-s); font-family: inherit; line-height: inherit;
  background: var(--sap-wash); color: color-mix(in srgb, var(--sap) 75%, var(--ink)); font-size: var(--t-xs); font-weight: 500; 
}
.capture-dest:disabled { cursor: inherit; }

.capture-dest:not(:disabled) { cursor: var(--cursor-act); transition: background-color .12s var(--ease); }
.capture-dest:not(:disabled):hover { background: color-mix(in srgb, var(--sap) 22%, var(--card)); }

.capture-add { padding: 0 16px; border-radius: var(--r-m); border: 1px solid var(--sap); background: var(--sap); color: var(--card); font-size: var(--t-s); font-weight: 600; }
.capture-add:hover { background: color-mix(in srgb, var(--sap) 90%, var(--card)); }
.capture-add:disabled { opacity: .5; }
.save-status { margin: 0; margin-inline-start: auto; font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; }

.save-status:has(.save-size) { display: inline-grid; justify-items: end; }
.save-status > * { grid-area: 1 / 1; }
.save-size { visibility: hidden; }
.save-status[data-state="error"], .save-status[data-state="conflict"], .save-status[data-state="stopped"] { color: var(--danger); font-weight: 600; }
.save-short { display: none; }
.phone-search { display: none; }
.scratch-open { flex: none; width: 40px; height: 40px; }
.scratch-open svg { width: 20px; height: 20px; }

.view { padding: 8px 28px calc(120px + var(--toasts-h, 0px)); outline: none;  max-width: 860px; width: 100%; }



#banners:empty { display: none; }

#banners { padding: 0 28px; display: grid; gap: 8px; max-width: 860px; position: sticky; top: var(--below-top, 0px); z-index: 4; }
#banners:not(:empty) { padding-bottom: 8px; }

#banners:not(:has(> .banner:not(.scrolls))) { position: static; }

@media (max-width: 640px) { .banner.scrolls p { flex-basis: 200px; order: -2; } .banner.scrolls .banner-x { order: -1; } }
.banner-icon { display: flex; color: var(--sap); }
.banner-icon svg { width: 20px; height: 20px; }
.banner-x { margin-inline-start: auto; flex: none; }
.banner.remind { background: var(--card); border-color: var(--sap); box-shadow: var(--float); }
.banner.remind p { font-weight: 600; flex-basis: 200px; } 
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px; border-radius: var(--r-l);
  background: var(--card); border: 1px solid transparent; box-shadow: var(--e1);
}
.banner p { margin: 0; flex: 1 1 280px; }
.banner.warn { background: var(--danger-wash); border-color: var(--danger); }
.banner.info { background: var(--sap-wash); border-color: transparent; }


#guide:empty { display: none; }
#guide { padding: 0 28px; max-width: 860px; }
.nudge {
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 10px 0 0;
  padding-block: 4px; padding-inline: 14px 4px; border-radius: var(--r-m); background: var(--sap-wash); font-size: var(--t-s);
}
.nudge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sap); flex: none; }
.nudge-text { min-width: 0; }
.nudge-close { flex: none; width: 36px; height: 36px; }
.nudge-show { flex: none; min-height: 32px; padding-inline: 12px; }

.nudge .btn.quiet.nudge-show { color: color-mix(in srgb, var(--sap) 88%, var(--ink)); }

.status.show-me { position: relative; border-radius: 50%; box-shadow: 0 0 0 3px var(--sap); animation: show-me 1.2s ease-out 2; }
@keyframes show-me { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sap) 70%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .status.show-me { animation: none; } }
@media (max-width: 640px) { .nudge { width: auto; border-radius: 12px; } }



.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-m); min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--stem) 70%, transparent); background: transparent;
  font-size: var(--t-s); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), scale var(--d-fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--hover); }

.btn:not(.primary):active:not(:disabled) { scale: .97; }
.btn.primary { background: var(--sap); border-color: var(--sap); color: var(--card); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--sap) 90%, var(--card)); }
.btn.danger { color: var(--danger); }
.btn.quiet { border-color: transparent; background: none; }
.btn.quiet:not(.danger) { color: var(--sap); } 
.btn.quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--sap) 9%, transparent); }
.btn:disabled { opacity: .5; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: none; color: var(--ink-soft);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), scale var(--d-fast) var(--ease);
}
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.icon-btn:active:not(:disabled) { scale: .9; }
.icon-btn svg { width: 18px; height: 18px; }



.view-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin: 10px 0 14px; }
.view-head > :first-child { min-width: 0; flex: 1 1 12rem; } 
.view-title { margin: 0; font-size: calc(var(--t-xl) * 1.5); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } 
@media (max-width: 640px) { .view-title { font-size: calc(var(--t-xl) * 1.2); } }

.grove-rename { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: var(--cursor-text); }
.grove-rename span { min-width: 0; overflow-wrap: anywhere; }
.grove-rename svg { flex: none; width: 16px; height: 16px; color: var(--ink-soft); opacity: .7; }
.grove-rename:hover { background: var(--hover); }
.grove-rename:hover svg { opacity: 1; }
.grove-rename-input { width: min(100%, 24rem); padding: 0 6px; margin: 0 -6px; border: 1px solid var(--sap); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; letter-spacing: inherit; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 12px 0 10px; font-size: var(--t-s); color: var(--ink-soft); list-style: none; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--bark); }
.crumbs a, .crumbs button { color: var(--ink-soft); text-decoration: none; background: none; border: 0; padding: 2px 4px; border-radius: 4px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a:hover, .crumbs button:hover { color: var(--ink); background: var(--hover); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumb-title { margin: 0; font: inherit; min-width: 0; overflow-wrap: anywhere; } 

@media (max-width: 899px) {
  .crumbs li:last-child { flex: 1 1 0; min-width: 4em; }
  .crumb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.view.is-branch .crumbs li:last-child { flex: 1 1 0; min-width: 4em; }
.view.is-branch .crumb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crumbs .crumb-back { display: none; }
.crumbs .crumb-back + li::before { content: none; }
@media (max-width: 640px) {
  .crumbs { margin-top: 0; flex-wrap: nowrap; gap: 2px; }
  .crumbs .crumb-back { display: flex; flex: none; }
  .crumbs li:not(.crumb-back, :last-child) { display: none; }
  .crumbs li:last-child::before { content: none; }
  .crumbs .crumb-back a { display: grid; place-items: center; width: 44px; height: 44px; max-width: none; margin-inline-start: -12px; padding: 0; border-radius: 50%; color: var(--ink); }
  .crumb-back svg { width: 22px; height: 22px; }
  .crumb-title { font-size: var(--t-l); font-weight: 600; color: var(--ink); }
}
.up-link { font-size: var(--t-s); }



.tree { list-style: none; margin: 0; padding: 0; }
.row {
  position: relative;
  
  padding-block: 2px; padding-inline: calc(var(--depth) * var(--indent)) 0;
}
.row.top { margin-top: 18px; }
.row.top:first-child { margin-top: 0; }


.row.is-stub { min-height: 62px; }
.row.is-paper.is-stub { min-height: 94px; }
.stub-title { display: block; margin: 0; margin-inline-start: 64px; padding: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.g { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.g > i { position: absolute; display: block; border-color: var(--stem); border-style: solid; border-width: 0; }
.g > i.lit { border-color: var(--sap); z-index: 1; }
.g .pass { top: 0; bottom: 0; border-inline-start-width: var(--stem-w); }
.g .top { top: 0; height: calc(var(--elbow-y) - 10px); border-inline-start-width: var(--stem-w); }
.g .curve {
  top: calc(var(--elbow-y) - 10px); height: 10px; width: calc(var(--indent) - var(--stem-x));
  border-inline-start-width: var(--stem-w); border-bottom-width: var(--stem-w); border-end-start-radius: 10px;
}
.g .bottom { top: calc(var(--elbow-y) - 10px); bottom: 0; border-inline-start-width: var(--stem-w); }
.g .below { top: 24px; bottom: 0; border-inline-start-width: var(--stem-w); }

.card {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: start; gap: 2px 6px;
  padding-block: 6px; padding-inline: 4px 6px;
  width: fit-content; min-width: min(300px, 100%); max-width: 100%;
  background: var(--card); border: 1px solid var(--bark); border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: var(--cursor);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color var(--d-fast) var(--ease);
}

.card.paper { padding-block: 12px; padding-inline: 8px 10px; border-radius: var(--r-l); width: 100%; border-color: color-mix(in srgb, var(--bark) 70%, transparent); box-shadow: none; }
.card.paper:hover { box-shadow: var(--e1); }
.card.paper.selected { border-color: var(--sap); background-color: color-mix(in srgb, var(--sap-wash) 45%, var(--card)); box-shadow: var(--e2); }

.card.paper.selected.has-cover.cover-full { background-color: color-mix(in srgb, var(--cv) var(--cover-mix), var(--card)); box-shadow: 0 0 0 1px var(--sap), var(--e2); }

.view.is-branch .tree > .row.top > .card.paper:not(.has-cover) { border-color: transparent; background-color: var(--paper); } 
.view.is-branch .tree > .row.top > .card.paper:not(.selected):hover { box-shadow: none; }
.view.is-branch .tree > .row.top > .card.paper.selected:not(.has-cover) { background-color: var(--sap-wash); box-shadow: none; }
.view.is-branch .tree > .row.top > .card.paper :is(.title, .title-edit) { font-size: calc(var(--t-xl) * 1.5); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
@media (max-width: 640px) { .view.is-branch .tree > .row.top > .card.paper :is(.title, .title-edit) { font-size: var(--t-xl); } }

@media (min-width: 641px) {
  .view.is-branch .tree > .row.top > .card.paper > :is(.chev, .status) { margin-top: max(0px, calc((var(--t-xl) * 1.8 - 28px) / 2)); }
  .view.is-branch .tree > .row.top > .card.paper > .more { margin-top: max(0px, calc((var(--t-xl) * 1.8 - 32px) / 2)); }
} 

.card:not(.paper) { border-color: transparent; background: transparent; box-shadow: none; }

.card:not(.paper) { grid-template-columns: auto auto minmax(0, max-content) minmax(max-content, 1fr) auto; }
.card:not(.paper) > .meta { justify-self: start; }
.card:not(.paper):hover { background: var(--hover); }
.card:not(.paper).selected { background: var(--sap-wash); box-shadow: inset var(--lead-x) 0 0 var(--sap); }

.card.picked:not(.selected) { background-color: color-mix(in srgb, var(--sap-wash) 70%, var(--card)); }
.card.paper.picked { border-color: var(--sap); }
@media (forced-colors: active) { .card.picked { outline: 2px solid Highlight; outline-offset: -2px; } }

.chev[aria-expanded="false"]:dir(rtl) svg { transform: rotate(90deg); }

.card:not(.paper) .excerpt { -webkit-line-clamp: 1; grid-column: 3 / -1; contain: inline-size; }
.card:not(.paper).is-done .title { text-decoration: line-through 1px var(--bark); }
.card.paper .title { -webkit-line-clamp: 4; }
.card.paper > .meta { grid-column: 3 / 5; grid-row: 3; padding: 4px 4px 0; } 
.card.paper > .more { grid-column: 5; grid-row: 1; }
.card.paper > .meta:empty { display: none; }
@media (max-width: 899px) { .card.paper > .more { grid-column: 4; } .card.paper > .meta { grid-column: 3 / -1; } } 

:is(.card, .ccard, .board-card, .money-entry).arrived::after {
  content: ''; position: absolute; inset: -3px; border-radius: calc(var(--r-m) + 3px); pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 2px var(--sap); animation: arrive 1.2s var(--ease) forwards;
}
.card.paper.arrived::after { border-radius: calc(var(--r-l) + 3px); }
.board-card.arrived:not(.drag-ghost) { position: relative; } 
@keyframes arrive { from { opacity: 1; } 60% { opacity: .8; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :is(.card, .ccard, .board-card, .money-entry).arrived::after { animation: none; } } 

.count-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-pill);
  background: var(--hover); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 500; cursor: var(--cursor-act);
  transition: background-color var(--d-fast) var(--ease);
}
.count-pill:hover { background: color-mix(in srgb, var(--hover) 60%, var(--bark)); }

.ring {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--sap) var(--p), var(--hover) 0);
  -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px);
}

@media (hover: hover) and (pointer: fine) {
  .card:not(.paper) > .more { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
  .card:not(.paper):is(:hover, :focus-within, .selected) > .more { opacity: 1; }
}
.card:focus-visible { outline-offset: 3px; border-radius: var(--radius-card); }

.chev { width: 24px; height: 28px; border: 0; background: none; color: var(--ink-soft); border-radius: 6px; display: grid; place-items: center; }
.chev:hover { background: var(--hover); color: var(--ink); }
.chev svg { width: 14px; height: 14px; transition: transform .16s var(--ease); }
.chev[aria-expanded="false"] svg { transform: rotate(-90deg); }
.chev-space { width: 24px; }


.status { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.status:hover:not(:disabled) { background: var(--hover); }
.status svg { width: 22px; height: 22px; }
.status { position: relative; }

.done-ring { position: absolute; inset: calc(50% - 11px); border-radius: 50%; border: 2px solid var(--sap); pointer-events: none; }
.done-leaf { position: absolute; inset: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 100% 0; background: var(--sap); pointer-events: none; z-index: 1; }
.done-leaf.amber { background: var(--amber); }

.done-peel { position: fixed; z-index: 40; margin: 0; padding: 0; box-sizing: border-box; color: var(--ink); text-decoration: none; pointer-events: none; }

.title {
  min-width: 0; padding: 2px 4px; margin: 0;
  font-size: var(--t-m); font-weight: 500; line-height: 24px;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  border-radius: 4px; cursor: var(--cursor);
}

.card.paper .title { font-size: var(--t-l); font-weight: 650; letter-spacing: -.012em; }
.card:not(.paper) .title { font-weight: 400; }
.card.paper .meta { color: var(--ink-soft); }

.card.paper.has-cover { --mark: color-mix(in srgb, var(--cv) 70%, var(--ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.paper.has-cover { --mark: var(--cv); } }
:root[data-theme="dark"] .card.paper.has-cover { --mark: var(--cv); }
.card.paper.has-cover > .status circle[stroke="var(--ink-soft)"] { stroke: var(--mark); }
.card.paper.has-cover .ring { background: conic-gradient(var(--mark) var(--p), var(--hover) 0); }
.card.paper.has-cover .leaf-mark { color: var(--mark); }
.card.paper.has-cover .bar > span { background: var(--mark); }
:root[data-contrast="more"] .card.paper { border-color: var(--bark); }
@media (forced-colors: active) { .card.paper { border-color: CanvasText; } }
.title.untitled { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.card.is-done .title { color: var(--ink-soft); }
.title-edit {
  min-width: 0; width: 100%; padding: 1px 4px; margin: 0;
  font-weight: 500; line-height: 24px; resize: none; overflow: hidden;
  border: 1px solid var(--sap); border-radius: 4px; background: var(--card);
  outline: none;
}
.card.paper .title-edit { font-size: var(--t-l); font-weight: 600; }

.meta { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.bar { width: 44px; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--sap); border-radius: 2px; transform-origin: 0 50%; } 
.bar > span:dir(rtl) { transform-origin: 100% 50%; }
.card.paper .bar { width: 64px; }
.more { color: var(--ink-soft); }


.deeper {
  margin: 6px 0 0; margin-inline-start: calc((var(--depth) + 1) * var(--indent)); font-size: var(--t-s);
  max-width: calc(100% - (var(--depth) + 1) * var(--indent)); white-space: normal; text-align: start;
}


.row.fold-row { padding-block: 2px; }
.fold-row .fold-btn { gap: var(--s-1); font-size: var(--t-s); }
.fold-row .fold-btn svg { inline-size: 16px; block-size: 16px; }

.add-row { margin-top: 10px; padding-inline-start: calc(var(--depth, 0) * var(--indent)); }



.empty {
  margin: 48px 0; padding: 28px; max-width: 520px;
  border: 1px dashed var(--bark); border-radius: var(--radius-root);
}
.empty h2 { margin: 0 0 6px; font-size: var(--t-l); text-wrap: balance; }
.empty p { margin: 0 0 14px; color: var(--ink-soft); text-wrap: pretty; }
.empty > :last-child { margin-bottom: 0; } 



.trash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trash-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-block: 10px; padding-inline: 16px 12px; background: var(--card); border: 1px solid var(--bark); border-radius: var(--radius-card);
}
.trash-item .what { flex: 1 1 240px; min-width: 0; }
.trash-item .what strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
.trash-item .what span { color: var(--ink-soft); font-size: var(--t-xs); }
.trash-item .what :is(.origin, .trash-hit) { display: block; overflow-wrap: anywhere; } 
.trash-item .acts { display: flex; gap: 6px; }



.panel {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  background: var(--card); border-inline-start: 1px solid var(--bark);
  padding: 14px 20px calc(40px + var(--toasts-h, 0px)); 
}

@media (min-width: 900px) {
  .panel {
    position: fixed; inset: 0; z-index: 30; margin: auto;
    width: min(760px, calc(100vw - 64px)); height: fit-content; max-height: calc(100vh - 64px);
    border: 0; border-radius: var(--r-xl); box-shadow: var(--e4);
    padding: 18px 28px 32px;
    
    border-block: 14px solid transparent; padding-block: 4px calc(18px + var(--toasts-h, 0px)); background-origin: border-box;
  }
  .panel:not([hidden]) { animation: dialog-in .22s var(--ease-out); }
  .panel:focus-visible { outline: none; }
  .panel-scrim { position: fixed; inset: 0; z-index: 29; background: var(--overlay); backdrop-filter: blur(2px); animation: backdrop-in .18s var(--ease-out); }
}
.panel-scrim[hidden] { display: none; }

@media (min-width: 900px) {
  .panel-head {
    position: sticky; top: -4px; z-index: 3; margin-inline: -28px; padding-inline: 28px; padding-block: 4px; 
    background: var(--card); cursor: var(--cursor-grab); touch-action: none; user-select: none;
  }
  .panel.moving, .panel.moving .panel-head { cursor: var(--cursor-grabbing); }
}
.panel-head .panel-full, .panel.full .panel-head .panel-focus { margin-inline-start: auto; }
.panel.full .panel-head .panel-focus + .panel-full { margin-inline-start: 0; }
.panel:not(.full) .panel-focus { display: none; }
.panel-head .panel-full + .panel-minimize, .panel-head .panel-minimize + .panel-close { margin-inline-start: 0; }

@media (min-width: 900px) {
  .panel.full {
    --full-pad: max(28px, calc((100vw - 704px) / 2));
    width: 100vw; height: 100vh; max-height: none; border-radius: 0; border-block-width: 0;
    padding: 4px var(--full-pad) calc(48px + var(--toasts-h, 0px));
  }
  
  .panel.full > :last-child { margin-block-end: 40vh; }
  .panel.full .panel-head { top: -4px; margin-inline: calc(-1 * var(--full-pad)); padding-inline: var(--full-pad); cursor: auto; }
  
  .panel.full[data-wide="true"] { --full-pad: max(28px, min(96px, 8vw)); }
  .panel.full[data-wide="true"] :is(.notes-editor, .notes) { max-width: none; } 
  .panel-full[aria-pressed="true"], .panel-focus[aria-pressed="true"] { color: var(--sap); }
  
  .panel.full.writing-focus .notes-editor:focus[data-focus-line] > :not([data-caret]),
  .panel.full.writing-focus .notes-editor:focus[data-focus-line] > [data-caret] > li:not([data-caret]) { opacity: 0.3; }
  .panel.full.writing-focus .notes-editor > *, .panel.full.writing-focus .notes-editor > * > li { transition: opacity 0.3s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .panel.full.writing-focus .notes-editor > *, .panel.full.writing-focus .notes-editor > * > li { transition: none; } }
@media (max-width: 899px) { .panel-full { display: none; } }

.panel-tray {
  position: fixed; z-index: 31; inset-inline-end: 16px; bottom: 16px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
  pointer-events: none; 
}
.panel-tray[hidden] { display: none; }
.panel-tray > * { pointer-events: auto; }
.tray-bar {
  display: flex; align-items: center; gap: 2px; width: 232px; padding: 4px;
  border-radius: var(--r-l); background: var(--card); box-shadow: var(--e3);
  animation: dialog-in .2s var(--ease-out);
}
.tray-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding-inline: 10px 6px;
  border: 0; border-radius: var(--r-m); background: none; color: var(--ink); font: inherit; font-size: var(--t-s); font-weight: 600; text-align: start;
  cursor: var(--cursor-act);
}
.tray-open:hover { background: var(--surface-1); }
.tray-open > svg, .tray-open > .card-icon svg { width: 18px; height: 18px; flex: none; color: var(--sap); }
.tray-open > .card-icon { display: inline-flex; flex: none; }
.tray-emoji { flex: none; width: 18px; text-align: center; line-height: 1; }
.tray-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-close { flex: none; }
.tray-close-all { background: var(--card); box-shadow: var(--e2); border-color: transparent; }


.leave-copy, .leave-copy * { pointer-events: none; animation: none !important; transition: none !important; }
.tray-ghost { position: fixed; z-index: 32; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e4); transform-origin: 0 0; pointer-events: none; }

@media (min-width: 900px) {
  .panel.beside-tray {
    --tray-room: clamp(0px, 1288px - 100vw, 248px);
    inset-inline-end: var(--tray-room); width: min(760px, calc(100vw - 32px - var(--tray-room)));
  }
}

@media (max-width: 939px) {
  .toasts.over-min { bottom: max(calc(var(--tray-h, 48px) + 28px), calc(var(--toast-lift, 0px) + 8px)); }
}
@media (max-width: 899px) {
  
  .panel-tray {
    bottom: calc(112px + env(safe-area-inset-bottom)); inset-inline: 16px; max-height: none;
    flex-direction: row; align-items: center; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 8px; margin: -8px;  pointer-events: auto;
  }
  .tray-bar { flex: 1 0 min(232px, 72vw); width: auto; }
  .tray-close-all { flex: none; }
  .panel:not([hidden]) ~ .panel-tray, html.keyboard-up .panel-tray { display: none; } 
  .toasts.over-min { bottom: max(calc(var(--tray-h, 48px) + 108px + env(safe-area-inset-bottom)), calc(var(--toast-lift, 0px) + 8px)); }
  html.keyboard-up .toasts.over-min { bottom: 8px; }
}

details[open] > summary ~ * { animation: fold-in .18s var(--ease-out); }

details.is-steady[open] > summary ~ * { animation: none; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:not(.inside-section > summary, .fold-line, .due-more > summary, .day-done > summary)::before {
  content: ""; display: inline-block; inline-size: 6px; block-size: 6px; flex: none; align-self: center;
  margin-inline: 2px 8px; vertical-align: .2em;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  rotate: -45deg; transition: rotate var(--d-fast) var(--ease);
}
summary:not(.inside-section > summary, .fold-line, .due-more > summary, .day-done > summary):dir(rtl)::before { rotate: 45deg; } 
details[open] > summary:not(.inside-section > summary, .fold-line, .due-more > summary, .day-done > summary)::before { rotate: 45deg; }
details[open] > summary:not(.inside-section > summary, .fold-line, .due-more > summary, .day-done > summary):dir(rtl)::before { rotate: -45deg; }
@media (prefers-reduced-motion: reduce) { summary::before { transition: none; } }
:root[data-motion="reduce"] summary::before { transition: none; }

.skeleton { padding: var(--s-5) var(--s-4); }
.sk-branch { display: grid; gap: var(--s-3); max-width: 420px; --sk-line: color-mix(in srgb, var(--sap) 40%, var(--paper)); --sk-dur: 3.2s; }
.sk-card { display: flex; align-items: center; gap: var(--s-3); height: 48px; padding-inline: var(--s-4); border-radius: var(--r-l); background: var(--surface-2); }
.sk-card.is-child { height: 40px; flex: 1; border-radius: var(--r-m); animation: sk-card var(--sk-dur) var(--ease-out) infinite; animation-delay: calc(var(--sk-dur) * .14 * var(--i)); transform-origin: 0 50%; }
.sk-card.is-child:dir(rtl) { transform-origin: 100% 50%; }
.sk-mark { flex: none; width: 18px; height: 18px; border-radius: var(--r-s); background: var(--sk-line); }
.sk-ring { flex: none; width: 14px; height: 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px var(--bark); }
.sk-bar { width: 140px; height: 10px; border-radius: var(--r-pill); background: var(--bark); animation: sk-pulse 1.6s ease-in-out infinite alternate; }
.sk-card.is-child .sk-bar { height: 8px; width: 110px; }
.sk-row:nth-child(3) .sk-bar { width: 80px; }
.sk-row:nth-child(4) .sk-bar { width: 128px; }
.sk-row { display: flex; align-items: center; gap: var(--s-2); padding-inline-start: 24px; }

.sk-stem { flex: none; align-self: flex-start; width: 16px; height: calc(32px + 52px * var(--i)); margin-top: calc(-12px - 52px * var(--i)); border-inline-start: 2px solid var(--sk-line); border-block-end: 2px solid var(--sk-line); border-end-start-radius: 8px; transform-origin: 50% 0; animation: sk-line var(--sk-dur) var(--ease-out) infinite; animation-delay: calc(var(--sk-dur) * .14 * var(--i)); }
@keyframes sk-line { 0% { transform: scaleY(0); } 12%, 78% { transform: scaleY(1); opacity: 1; } 90%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes sk-card { 0%, 6% { transform: scaleX(.6); opacity: 0; } 18%, 78% { transform: none; opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes sk-pulse { from { opacity: .55; } to { opacity: 1; } }

#view.is-stuck .skeleton * { animation: none; }
@media (prefers-reduced-motion: reduce) { .skeleton * { animation: none; } }
:root[data-motion="reduce"] .skeleton * { animation: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }

.panel-path { font-size: var(--t-xs); color: var(--ink-soft); min-width: 0; flex: 0 1 auto; overflow: hidden; }
.panel-path ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.panel-path li { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.panel-path li + li::before { content: "›" / ""; flex: none; padding-inline: 2px; }
.panel-path li:last-child { flex-shrink: 0.4; } 
.crumb { min-width: 0; max-width: 100%; min-height: 28px; padding: 2px 6px; border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.crumb:hover { background: var(--hover); color: var(--ink); text-decoration: underline 1px; text-underline-offset: 2px; }
.panel-path li:last-child .crumb { color: var(--ink); font-weight: 500; }
.crumb-gap { flex: none; }
.panel-back { flex: none; margin-inline-end: -4px; }
.panel-title {
  
  width: calc(100% + 14px); margin: 6px -7px 10px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px;
  font-size: var(--t-xl); font-weight: 600; line-height: 1.3; resize: none; overflow: hidden; background: none;
}

.panel-look { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 -4px; }
.look-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.look-btn svg { width: 16px; height: 16px; flex: none; }
.look-btn:not(.has-icon) { color: var(--ink-soft); }
.look-btn:not(.has-icon):hover:not(:disabled) { color: var(--sap); }
.look-btn .cover-dot { margin: 0; }
.look-icon.has-icon { min-width: 48px; min-height: 48px; padding: 4px; justify-content: center; border-radius: var(--r-m); }
#panel .look-icon.has-icon .card-icon { margin: 0; }
.look-icon.has-icon .card-icon svg { width: 34px; height: 34px; }
.look-emoji { font-size: 34px; line-height: 1; }
@media (pointer: coarse) { .look-btn { min-height: 44px; } }
.panel.has-cover { --cover-band: 8px; }
.panel-title:hover { border-color: var(--bark); }
.panel-title:focus-visible { outline: none; border-color: var(--sap); }
.panel section { margin: var(--s-5) 0; }
.panel h3 { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid transparent; }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 5px 12px; border-radius: var(--r-s); font-size: var(--t-s); }
.seg button svg { width: 14px; height: 14px; }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: var(--e1); font-weight: 600; }

.status-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.status-seg button { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; text-align: center; line-height: 1.2; font-size: var(--t-xs); } 
.status-seg button[aria-checked="true"] { background: var(--sap-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 45%, transparent); font-weight: 600; }

.status-seg { position: relative; }
.status-seg button { position: relative; z-index: 1; transition: scale var(--d-fast) var(--ease); }
.status-seg button:active:not(:disabled) { scale: .95; }
.status-seg > .pick-pill { position: absolute; left: 0; top: 0;  border-radius: var(--r-s); background: var(--sap-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 45%, transparent); pointer-events: none; }
.status-seg.has-pill button[aria-checked="true"] { background: none; box-shadow: none; }
@media (forced-colors: active) { .status-seg button[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.seg button:disabled { opacity: .5; } 

.shape-switch, .agenda-tabs, .board-mode { display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; justify-self: start; }
.progress-line { margin: 8px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.progress-line strong { color: var(--ink); font-weight: 600; }
.pace-line { margin: 2px 0 0; }
.pace-forecast { display: block; }
.milestone-line { margin: 2px 0 0; }
.why summary { cursor: var(--cursor-act); width: fit-content; margin-top: 4px; font-size: var(--t-xs); color: var(--sap); }
.why .hint { margin: 6px 0 2px; font-size: var(--t-xs); color: var(--ink-soft); }
.why-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; font-size: var(--t-s); }
.why-list li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; min-width: 0; }
.why-list .status { flex: none; align-self: center; display: inline-flex; }
.why-list .linklike { overflow-wrap: anywhere; }
.why-list .hint { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.notes, .resume-text, .flow-resume-input {
  width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--bark); border-radius: 8px;
  background: var(--paper); line-height: 1.55; resize: vertical; max-width: 68ch;
}
.notes:focus-visible, .resume-text:focus-visible, .flow-resume-input:focus-visible { outline: none; border-color: var(--sap); }
.notes[hidden], .notes-view[hidden], .notes-section .btn[hidden], .notes-hint[hidden] { display: none; }
.notes-view:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.notes-view { padding: 10px 12px; border: 1px solid var(--bark); border-radius: var(--radius-card); background: var(--card); cursor: var(--cursor-text); overflow-wrap: anywhere; line-height: 1.5; }
.notes-view > :first-child { margin-top: 0; }
.notes-view > :last-child { margin-bottom: 0; }
.notes-view p { margin: 0 0 8px; }
.notes-view .notes-h { margin: 12px 0 6px; font-size: var(--t-m); }
.notes-view h4.notes-h { font-size: var(--t-l); }
.notes-view a { color: var(--sap); }
.notes-view code { font-size: .92em; padding: 1px 4px; border-radius: 4px; background: var(--paper); }
.notes-list { margin: 0 0 8px; padding-inline-start: 20px; }
.notes-list li { margin: 2px 0; }
.notes-check { list-style: none; margin-inline-start: -20px !important; }
.notes-check label { display: flex; gap: 8px; align-items: flex-start; cursor: var(--cursor-act); }
.notes-check input { margin-top: 4px; flex: none; }
.notes-check.done span { color: var(--ink-soft); text-decoration: line-through; }

.notes-quote { margin: 0 0 8px; padding-inline-start: 12px; border-inline-start: 3px solid var(--bark); }
.notes-editor .notes-quote { margin: 0; min-height: 1.55em; }

.notes-callout, .notes-quote[data-callout] { --co: var(--ink-soft); } 
:is(.notes-callout.callout-tip, .notes-quote[data-callout="tip"]) { --co: var(--sap); }
:is(.notes-callout.callout-important, .notes-quote[data-callout="important"]) { --co: var(--violet); }
:is(.notes-callout.callout-warning, .notes-quote[data-callout="warning"]) { --co: var(--amber); }
:is(.notes-callout.callout-caution, .notes-quote[data-callout="caution"]) { --co: var(--danger); }
.notes-callout, .notes-editor .notes-quote[data-callout] { background: color-mix(in srgb, var(--co) 11%, transparent); }
.notes-callout { display: flex; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-s); }
.notes-callout > svg { flex: none; width: 18px; height: 18px; margin-block-start: 2px; color: var(--co); }
.notes-callout-body { min-width: 0; }
.notes-callout-title { display: block; }
.notes-editor .notes-quote[data-callout] { border-inline-start: 0; padding-inline: 12px; }
.notes-editor .notes-quote[data-callout-head] { font-weight: 600; }
.notes-editor .notes-quote[data-callout-first] { padding-block-start: 8px; border-start-start-radius: var(--r-s); border-start-end-radius: var(--r-s); margin-block-start: 4px; }
.notes-editor .notes-quote[data-callout-last] { padding-block-end: 8px; border-end-start-radius: var(--r-s); border-end-end-radius: var(--r-s); margin-block-end: 4px; }
.notes-hr { margin: 12px 0; border: 0; border-top: 1px solid var(--bark); }

.notes-pre { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-s); background: var(--paper); }
.notes-pre code, .notes-editor :is(.notes-code, .notes-fence) { font: .9em/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-pre code { padding: 0; background: none; }

:is(.notes-pre, .notes-editor) .tok-kw { color: var(--violet); }
:is(.notes-pre, .notes-editor) .tok-str { color: var(--sap); }
:is(.notes-pre, .notes-editor) .tok-num { color: var(--danger); }
:is(.notes-pre, .notes-editor) .tok-com { color: var(--ink-soft); font-style: italic; }
.notes-editor .notes-code[data-typed] [class^="tok-"] { color: inherit; font-style: inherit; } 
.notes-editor :is(.notes-code, .notes-fence) { padding-inline: 12px; background: var(--card); min-height: 1.7em; }

.panel[data-font="serif"] .notes-editor, .menu-font.f-serif { font-family: ui-serif, "Iowan Old Style", Charter, Georgia, Cambria, "Times New Roman", serif; }
.panel[data-font="mono"] .notes-editor, .menu-font.f-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.panel[data-font="mono"] .notes-editor { font-size: .94em; }

.panel[data-font="rounded"] .notes-editor, .menu-font.f-rounded { font-family: "Varela Round", var(--font); }
.panel[data-small="true"] .notes-editor { font-size: .875em; } 
.panel[data-small="true"][data-font="mono"] .notes-editor { font-size: .82em; }
.menu-font { font-size: 14px; font-weight: 600; line-height: 1; }
.menu-font.f-small { font-size: 11px; }
.notes-editor .notes-fence { color: var(--ink-soft); font-size: .8em; border-radius: var(--r-s) var(--r-s) 0 0; margin-top: 4px; }
.notes-editor .notes-code + .notes-fence { border-radius: 0 0 var(--r-s) var(--r-s); margin: 0 0 4px; }

.notes-table-wrap { overflow-x: auto; margin-block: 4px 8px; }
.notes-table-wrap table { border-collapse: collapse; font-size: .95em; }
.notes-table-wrap :is(th, td) { padding: 5px 10px; border: 1px solid var(--bark); text-align: start; vertical-align: top; min-width: 4em; }
.notes-table-wrap th { font-weight: 600; background: var(--surface-1); }
.notes-table-wrap .align-center { text-align: center; }
.notes-table-wrap .align-end { text-align: end; }
.notes-editor .notes-table { position: relative; cursor: pointer; user-select: none; }
.notes-editor .notes-table-edit {
  position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 2px 8px; border: 0; border-radius: var(--r-s);
  background: var(--surface-2); color: var(--ink-soft); font: inherit; font-size: var(--t-xs); cursor: pointer; opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.notes-editor .notes-table:hover .notes-table-edit, .notes-editor .notes-table-edit:focus-visible { opacity: 1; }
@media (hover: none) { .notes-editor .notes-table-edit { opacity: 1; } }
.notes-editor[aria-readonly="true"] .notes-table { cursor: default; }
.notes-editor[aria-readonly="true"] .notes-table-edit { display: none; }

.notes-pic { position: relative; margin-block: 6px; width: fit-content; max-width: 100%; }
.notes-pic-img { display: block; max-width: 100%; max-height: 480px; border-radius: var(--r-m); background: var(--surface-1); }
.notes-pic-gone { display: inline-block; padding: 6px 10px; border-radius: var(--r-s); background: var(--surface-1); color: var(--ink-soft); font-size: var(--t-xs); }
.notes-editor .notes-pic { user-select: none; }
.notes-editor .notes-pic-remove {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; border-radius: var(--r-s);
  background: var(--surface-2); color: var(--ink-soft); font: inherit; font-size: var(--t-m); line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.notes-editor .notes-pic:hover .notes-pic-remove, .notes-editor .notes-pic-remove:focus-visible { opacity: 1; }
.notes-editor .notes-pic-remove:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
@media (hover: none) { .notes-editor .notes-pic-remove { opacity: 1; } }
.notes-pic:has(.notes-pic-gone) .notes-pic-remove { position: static; margin-inline-start: 4px; vertical-align: middle; }
.notes-editor[aria-readonly="true"] .notes-pic-remove { display: none; }

.notes-pic.notes-embed { width: auto; }
.notes-embed-card { padding: 10px 14px; border-radius: var(--r-m); background: var(--surface-1); }
.notes-embed-head { margin-block-end: 4px; padding-inline-end: 32px; }
.notes-embed-body > :first-child { margin-block-start: 0; }
.notes-embed-body > :last-child { margin-block-end: 0; }
.notes-embed-empty { margin: 0; color: var(--ink-soft); font-size: var(--t-xs); }
.notes-editor .notes-embed { user-select: text; }

.notes-query-count { color: var(--ink-soft); font-size: var(--t-xs); }
.notes-query-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.notes-query-row { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.notes-query-row.done > :first-child { text-decoration: line-through; color: var(--ink-soft); }
.notes-query-where { margin-inline-start: auto; color: var(--ink-soft); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.notes-query-edit {
  margin-block-start: 6px; padding: 2px 6px; border: 0; border-radius: var(--r-s); background: none;
  color: var(--ink-soft); font: inherit; font-size: var(--t-xs); cursor: pointer;
}
.notes-query-edit:hover { background: var(--hover); color: var(--ink); }
.notes-query-edit:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.notes-editor[aria-readonly="true"] .notes-query-edit { display: none; }
.query-form { display: grid; gap: var(--s-2); }
.query-form .hint { margin: 0; color: var(--ink-soft); font-size: var(--t-xs); }

.table-sheet-dialog { max-width: min(760px, 100vw - 32px); }
.table-sheet-wrap { overflow-x: auto; max-height: 55vh; }
.table-sheet { border-collapse: separate; border-spacing: 4px; }
.table-sheet td { padding: 0; }
.table-sheet-cell { min-width: 8em; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); font: inherit; }
.table-sheet-cell:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
.table-sheet .is-head .table-sheet-cell { font-weight: 600; }
.table-sheet-add { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }
.table-sheet-delete { margin-inline-end: auto; }

.notes-editor {
  position: relative; min-height: 120px; max-width: 68ch; padding: 10px 12px; border: 1px solid var(--bark); border-radius: 8px;
  background: var(--paper); line-height: 1.55; overflow-wrap: anywhere; cursor: var(--cursor-text); caret-color: var(--sap);
}
.notes-editor:focus-visible { outline: none; border-color: var(--sap); }
.notes-editor[contenteditable="false"] { background: var(--card); cursor: var(--cursor); }
.notes-editor.is-empty::before { content: attr(data-placeholder); position: absolute; color: var(--ink-soft); pointer-events: none; }
.notes-editor > .line, .notes-editor li { min-height: 1.55em; }
.notes-editor .notes-h { margin: 10px 0 4px; font-size: var(--t-m); line-height: 1.35; }
.notes-editor h4.notes-h { font-size: var(--t-l); }
.notes-editor > :first-child { margin-top: 0; }

.notes-editor > [data-folded-away], .notes-editor li[data-folded-away] { display: none; }
.notes-editor.has-folds { padding-inline-start: 32px; }
.notes-editor > [data-folded]::after, .notes-editor li[data-folded]::after { content: " …"; color: var(--ink-soft); }
.notes-folds { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 0; }
.notes-fold { position: absolute; display: grid; place-items: center; inline-size: 24px; block-size: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); cursor: var(--cursor-act); }
.notes-fold:hover { background: var(--card); color: var(--ink); }
.notes-fold svg { transition: transform var(--d-fast) var(--ease); }
.notes-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
[dir="rtl"] .notes-fold[aria-expanded="false"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .notes-fold svg { transition: none; } }
.notes-editor a { color: var(--sap); text-decoration: underline; text-underline-offset: 2px; }

.notes-mark, .notes-editor span[style*="background-color"]:not([style*="transparent"]) { background: color-mix(in srgb, var(--amber) 24%, transparent) !important; color: inherit; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.notes-fn { font-size: .72em; line-height: 0; color: var(--sap); font-weight: 600; padding-inline: 1px; }
.notes-editor .notes-fn { cursor: var(--cursor-act); user-select: none; }
.notes-fn-go, .notes-fn-back { font: inherit; color: var(--sap); background: none; border: 0; padding: 0 2px; cursor: var(--cursor-act); border-radius: 3px; }
.notes-fn-go:hover, .notes-fn-back:hover { background: var(--sap-wash); }
.notes-footnotes { list-style: none; margin: 16px 0 0; padding: 10px 0 0; border-block-start: 1px solid var(--surface-1); font-size: var(--t-xs); color: var(--ink-soft); }
.notes-footnotes li { margin-block: 4px; }
.notes-footnotes li:focus { outline: none; background: var(--sap-wash); border-radius: 4px; }
.notes-fn-label { color: var(--sap); font-weight: 600; margin-inline-end: 4px; }
.notes-editor code { font-size: .92em; padding: 1px 4px; border-radius: 4px; background: var(--card); }
.notes-editor .notes-list { margin: 0; }
.notes-editor .notes-check input { margin: 0; margin-inline-end: 8px; vertical-align: -2px; cursor: var(--cursor-act); }
.notes-editor .notes-check.done { color: var(--ink-soft); text-decoration: line-through; }
:is(.notes-editor, .notes-list) .in-1 { margin-inline-start: 1.5em; } :is(.notes-editor, .notes-list) .in-2 { margin-inline-start: 3em; } :is(.notes-editor, .notes-list) .in-3 { margin-inline-start: 4.5em; }
:is(.notes-editor, .notes-list) .in-4 { margin-inline-start: 6em; } :is(.notes-editor, .notes-list) .in-5 { margin-inline-start: 7.5em; } :is(.notes-editor, .notes-list) .in-6 { margin-inline-start: 9em; }
.notes-editor .notes-check.in-1 { margin-inline-start: calc(1.5em - 20px) !important; } .notes-editor .notes-check.in-2 { margin-inline-start: calc(3em - 20px) !important; }
.notes-editor .notes-check.in-3 { margin-inline-start: calc(4.5em - 20px) !important; }
.notes-editor .notes-chip { white-space: normal; }
.notes-section { position: relative; }

.notes-linkfield, .notes-linkbar {
  position: absolute; z-index: 5; display: flex; gap: 2px; padding: 4px; max-width: min(360px, 100%);
  border: 1px solid var(--bark); border-radius: var(--r-s); background: var(--card); box-shadow: var(--e2);
}
.notes-linkfield[hidden], .notes-linkbar[hidden] { display: none; }
.notes-linkfield input { width: min(300px, 70vw); padding: 6px 8px; border: 1px solid var(--bark); border-radius: 6px; background: var(--paper); color: var(--ink); }
.notes-linkfield input:focus-visible { outline: none; border-color: var(--sap); }

.notes-replace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-end: var(--s-2); padding: 6px; border-radius: var(--r-s); background: var(--card); }
.notes-replace[hidden] { display: none; }
.notes-replace input { flex: 1 1 140px; min-width: 0; padding: 6px 8px; border: 1px solid var(--bark); border-radius: 6px; background: var(--paper); color: var(--ink); }
.notes-replace input:focus-visible { outline: none; border-color: var(--sap); }
.notes-replace .btn { margin-top: 0; }
.notes-replace-count { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
::highlight(twig-notes-find) { background-color: color-mix(in srgb, var(--amber) 38%, transparent); color: inherit; }
.notes-section .btn { margin-top: 6px; }
.notes-hint { margin: 6px 0 0; font-size: var(--t-xs); }
.notes-count { margin: 6px 0 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; } 
.notes-count[hidden] { display: none; }
.notes-goal { width: 120px; margin-block-start: 6px; } 
.notes-goal[hidden] { display: none; }

.notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-end: var(--s-2); }
.notes-head h3 { margin: 0; }
.notes-toc-btn[hidden] { display: none; }

.notes-rail { display: none; }
@media (min-width: 1240px) {
  .panel.full:not([data-wide="true"]) .notes-rail:not([hidden]) {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 112px; inset-inline-end: 32px; z-index: 2;
    width: min(240px, calc((100vw - 704px) / 2 - 64px)); max-height: calc(100vh - 176px); overflow: auto;
  }
  .panel.full:not([data-wide="true"]) .notes-section:has(.notes-rail:not([hidden])) .notes-toc-btn { display: none; } 
}
.rail-item {
  display: block; width: 100%; padding: 4px 10px; border: 0; border-radius: var(--r-m); background: none;
  border-inline-start: 2px solid transparent; border-start-start-radius: 0; border-end-start-radius: 0;
  font: inherit; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-soft); text-align: start; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-item[data-level="2"] { padding-inline-start: 22px; }
.rail-item[data-level="3"] { padding-inline-start: 34px; }
.rail-item:hover { color: var(--ink); background: var(--hover); }
.rail-item[aria-current] { color: var(--ink); border-inline-start-color: var(--sap); }

.notes-lock-btn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--s-1); }
.notes-lock-btn[hidden] { display: none; }
.notes-lock-btn svg { width: 14px; height: 14px; flex: none; }
.notes-editor :is(h4, h5, h6) { scroll-margin-block-start: 72px; }

.mi-indent-1 .mi-label { padding-inline-start: 14px; }
.mi-indent-2 .mi-label { padding-inline-start: 28px; }

.notes-tools { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 4px; }
.notes-tools[hidden] { display: none; }
.notes-tools .icon-btn { width: 36px; height: 36px; border-radius: var(--r-s); }
.notes-tools .icon-btn[aria-pressed="true"] { background: var(--sap-wash); color: var(--sap); }
@media (pointer: coarse) { .notes-tools .icon-btn { width: 44px; height: 44px; } }

@media not all and (pointer: coarse) { .notes-tools [data-shift] { display: none; } }
.notes-tools .icon-btn:disabled { opacity: .4; }
.breakdown > summary { display: none; } 
.breakdown textarea { width: 100%; min-height: 110px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--bark); border-radius: 8px; background: var(--paper); line-height: 1.5; resize: vertical; }
.breakdown .hint { margin: 6px 0 8px; font-size: var(--t-xs); color: var(--ink-soft); }
.breakdown .bd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; }
.breakdown .bd-head .hint { margin: 6px 0 0; }
.breakdown .bd-head .btn { margin-top: 6px; }
.breakdown .bd-summary { margin: 8px 0 4px; }
.bd-preview { list-style: none; margin: 0 0 10px; padding: 8px 10px; max-height: 240px; overflow-y: auto; border-inline-start: 2px solid var(--bark); font-size: var(--t-s); }
.bd-preview li { padding: 1px 0; padding-inline-start: calc(var(--depth, 0) * 16px); overflow-wrap: anywhere; }
.bd-preview li::before { content: '\2022'; color: var(--ink-soft); margin-inline-end: 6px; }
.breakdown .row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); }
.check input { width: 16px; height: 16px; accent-color: var(--sap); }
.children { list-style: none; margin: 0 0 8px; padding: 0; }

.inside-section > summary { cursor: var(--cursor-act); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-block-size: 44px; align-content: center; }
.inside-section > summary::-webkit-details-marker { display: none; }
.inside-section > summary::before, .fold-line::before { content: ""; inline-size: 7px; block-size: 7px; flex: none; border-inline-end: 1.6px solid var(--ink-soft); border-block-end: 1.6px solid var(--ink-soft); rotate: -45deg; align-self: center; margin-inline-end: 2px; transition: rotate var(--d-fast) var(--ease); }
:is(.inside-section, .panel-more)[open] > summary::before { rotate: 45deg; }
:is(.inside-section > summary, .fold-line):dir(rtl)::before { rotate: 45deg; } 
:is(.inside-section, .panel-more)[open] > summary:dir(rtl)::before { rotate: -45deg; }
.inside-section > summary h3 { margin: 0; }
.inside-section.is-empty > summary { display: none; } 
.inside-line { font-size: var(--t-s); color: var(--ink-soft); }
.inside-section[open] > .children { margin-top: 4px; }
.children:empty { display: none; }
@media (prefers-reduced-motion: reduce) { :is(.inside-section > summary, .fold-line)::before { transition: none; } }
:root[data-motion="reduce"] :is(.inside-section > summary, .fold-line)::before { transition: none; }

.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inside-box > .section-actions { margin-top: 4px; }
.inside-box > .breakdown[open] { margin-top: 12px; }

.fold-btn::before { content: ""; order: 1; inline-size: 6px; block-size: 6px; flex: none; margin-inline-start: 2px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate var(--d-fast) var(--ease), translate var(--d-fast) var(--ease); }
.fold-btn[aria-expanded="true"]::before { rotate: 225deg; translate: 0 1px; }
.fold-btn:dir(rtl)::before { rotate: -45deg; } 
.fold-btn[aria-expanded="true"]:dir(rtl)::before { rotate: 135deg; }
.fold-btn[aria-expanded="true"] { background: var(--hover); }
@media (prefers-reduced-motion: reduce) { .fold-btn::before { transition: none; } }
:root[data-motion="reduce"] .fold-btn::before { transition: none; }

.children li { display: flex; align-items: center; gap: var(--s-1); border-radius: var(--r-m); }
.children li:hover { background: var(--hover); }
.children .child-title { flex: 1; min-width: 0; text-align: start; border: 0; background: none; padding: 6px; border-radius: var(--r-m); font-size: var(--t-m); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.children .is-done .child-title { color: var(--ink-soft); text-decoration: line-through 1px var(--bark); }

.children .status { flex: none; }
.children .child-more { flex: none; color: var(--ink-soft); }
.children li:is(:hover, :focus-within) .child-more { color: var(--ink); }
.panel-remove { border-top: 0; padding-top: 4px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--bark); }
.slot { display: contents; } 
.panel-more > summary { cursor: var(--cursor-act); display: flex; align-items: center; gap: 8px; width: fit-content; min-block-size: 44px; font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); }
.panel-more > summary:hover { color: var(--ink); }
.panel-more-body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.panel-more .panel-actions { padding-top: 0; border-top: 0; }
.panel-more-body section, .panel-more-body .panel-look { margin: 0; } 
.panel-aka { margin: 0 0 var(--s-1); font-size: var(--t-xs); } 
.day-nav { display: flex; gap: var(--s-2); margin-block: var(--s-1) var(--s-2); } 
.day-nav[hidden] { display: none; }
.day-nav .day-later { margin-inline-start: auto; }
.panel-age { margin: 4px 0 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; } 

.panel-more-body .btn { padding: 7px 12px; font-size: var(--t-s); }
.panel-more-body .btn.quiet { border-color: var(--bark); background: var(--card); }




.menu {
  position: fixed; z-index: 40; inset: auto; margin: 0; color: var(--ink);  min-width: 232px; max-width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--card); border: 1px solid transparent; border-radius: var(--r-l);
  box-shadow: var(--e3);
}
.menu.opens-down { transform-origin: top left; animation: menu-down .14s var(--ease-out); }
.menu.opens-up { transform-origin: bottom left; animation: menu-up .14s var(--ease-out); }
.menu.opens-down:dir(rtl) { transform-origin: top right; } 
.menu.opens-up:dir(rtl) { transform-origin: bottom right; }
@keyframes menu-down { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
@keyframes menu-up { from { opacity: 0; transform: translateY(3px) scale(.98); } }
.menu-title {
  padding: 4px 10px 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu button {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 32px; padding-block: 5px; padding-inline: 8px 10px; text-align: start; overflow-wrap: anywhere;
  border: 0; background: none; border-radius: var(--r-s); font-size: var(--t-s); line-height: 20px;
}
.menu.plain button { grid-template-columns: minmax(0, 1fr) auto; }

.menu button:has(.mi-keys + .mi-more) { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.menu.plain button:has(.mi-keys + .mi-more) { grid-template-columns: minmax(0, 1fr) auto auto; }
.menu.plain .mi-icon { display: none; }
.menu button:focus { background: var(--hover); outline: none; }
.menu button:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
.menu button:disabled { opacity: .45; }
.menu button:disabled:focus { background: none; }
.mi-icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ink-soft); }
.mi-icon svg { width: 17px; height: 17px; }
.mi-icon .card-icon { margin: 0; vertical-align: 0; } 
.menu-emoji { font-size: 15px; line-height: 1; }
.mi-keys { font-size: 12px; color: var(--ink-soft); white-space: nowrap; padding-inline-start: 12px; }
.menu button:focus .mi-icon, .menu button:focus .mi-keys { color: var(--ink); }
.menu button.danger, .menu button.danger .mi-icon { color: var(--danger); }
.menu button.danger:focus { background: var(--danger-wash); }
.menu hr { border: 0; border-top: 1px solid var(--bark); margin: 5px 4px; }

.mi-more { display: grid; place-items: center; color: var(--ink-soft); transform: rotate(-90deg); }
.mi-more:dir(rtl) { transform: rotate(90deg); } 
.mi-more svg { width: 14px; height: 14px; }
.menu button.sub-open { background: var(--hover); }
.menu.submenu:not(.sheet) { min-width: 200px; max-height: calc(100vh - 16px); animation: menu-side .12s var(--ease-out); }
@keyframes menu-side { from { opacity: 0; transform: translateX(-3px); } }
.menu.submenu:not(.sheet):dir(rtl) { animation-name: menu-side-rtl; } 
@keyframes menu-side-rtl { from { opacity: 0; transform: translateX(3px); } }
.menu .submenu-back { font-weight: 600; }

.menu-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 2px; }
.menu .menu-chip {
  flex: 1 1 0; grid-template-columns: auto auto; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 8px;
  border: 1px solid var(--bark); border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.menu .menu-chip .mi-icon, .menu .menu-chip .mi-icon svg { width: 16px; height: 16px; }
.menu .menu-chip.checked { border-color: var(--sap); background: var(--sap-wash); }
.menu .menu-chip.checked:focus { background: color-mix(in srgb, var(--sap-wash) 70%, var(--hover)); }

.menu.sheet .menu-row:has(> :nth-child(3)) > .menu-chip {
  grid-template-columns: none; grid-auto-flow: row; justify-items: center; align-content: center; gap: 2px;
  min-width: min-content; padding: 6px 4px; border-radius: var(--r-l); white-space: normal; overflow-wrap: normal; text-align: center; line-height: 1.15;
}

.menu-heading { padding: 6px 10px 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.menu-group + .menu-group, hr + .menu-group { margin-block-start: 2px; }
.menu-scroll { position: relative; max-height: min(330px, 42vh); overflow: auto; overscroll-behavior: contain; }
.menu .menu-find {
  display: block; width: calc(100% - 8px); margin: 2px 4px 6px; padding: 7px 10px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); font-size: var(--t-s);
}
.menu .menu-find:focus { outline: none; border-color: var(--sap); background: var(--card); }
.menu-empty { padding: 6px 10px 8px; font-size: var(--t-s); color: var(--ink-soft); overflow-wrap: anywhere; }
.menu-empty:empty { display: none; }

.menu button.current { background: var(--sap-wash); }
.menu button.current .mi-label { font-weight: 600; }
.menu button.current:focus { background: color-mix(in srgb, var(--sap-wash) 70%, var(--hover)); }


dialog {
  width: min(480px, calc(100vw - 32px)); padding: 0 24px 24px; border: 0; border-radius: var(--r-xl);
  background: var(--card); color: var(--ink); box-shadow: var(--e4);
}
dialog[open] { animation: dialog-in .22s var(--ease-out); }

dialog:not(.popover, .palette) { border-block: 14px solid transparent; padding-bottom: 10px; }
dialog:not(.popover, .palette) > .dialog-head { padding-top: 4px; }
@media (forced-colors: active) { dialog:not(.popover, .palette), .panel { border-block-color: Canvas; } } 

@media (pointer: coarse) { 
  dialog:modal { overscroll-behavior: contain; }
  dialog:modal::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: calc(100% + 1px); pointer-events: none; }
}
dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); animation: backdrop-in .18s var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } }
.dialog-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  margin: 0 -22px 8px; padding: 18px 22px 10px; background: var(--card);
}
.dialog-head h2 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.dialog-x { width: 32px; height: 32px; margin-inline-end: -8px; flex: none; }
dialog h2 { margin: 0 0 8px; font-size: var(--t-l); line-height: 1.3; }
dialog p { margin: 0 0 12px; color: var(--ink-soft); }
dialog .dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
dialog section + section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bark); }
dialog h3 { margin: 0 0 6px; font-size: var(--t-m); }
.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.plus-benefits { display: grid; gap: 6px; margin: 0 0 14px; padding-inline-start: 1.25em; }
.plus-parts { display: grid; gap: 14px; margin: 14px 0; }
.plus-part p { margin: 0 0 6px; }

.plus-promises { margin-block-start: var(--s-5); }
.plus-promises p { margin: 0 0 var(--s-2); }
.plus-promises ul { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.25em; }
.account-problem { color: var(--danger); font-size: var(--t-s); }

.account-invite { display: grid; justify-items: start; gap: 12px; margin: 4px 0 12px; padding: 16px; border-radius: var(--r-l); background: var(--sap-wash); }
.account-invite p { margin: 0; color: var(--ink); } 
.btn.tonal { border-color: transparent; background: var(--card); color: var(--sap); font-weight: 600; }
.btn.tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--sap) 8%, var(--card)); }



.settings { max-width: 960px; }
.settings .view-title:focus, .settings-title:focus { outline: none; }
.settings-grid { display: grid; grid-template-columns: minmax(200px, 264px) minmax(0, 640px); gap: var(--s-6); align-items: start; }
.settings-nav { position: sticky; top: var(--s-3); }
.settings-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.settings-nav a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) 10px;
  border-radius: var(--r-m); color: var(--ink); text-decoration: none;
  transition: background var(--d-fast);
}
.settings-nav a:hover { background: var(--hover); }
.settings-nav a[aria-current="page"] { background: var(--sap-wash); box-shadow: inset var(--lead-x) 0 0 var(--sap); }

.settings-nav ul { position: relative; }
.settings-nav a { position: relative; z-index: 1; }
.settings-nav ul > .pick-pill { position: absolute; left: 0; top: 0;  border-radius: var(--r-m); background: var(--sap-wash); box-shadow: inset var(--lead-x) 0 0 var(--sap); pointer-events: none; }
.settings-nav ul.has-pill a[aria-current="page"] { background: none; box-shadow: none; }
.settings-nav a[aria-current="page"] .settings-nav-name { font-weight: 600; }
.settings-nav a[aria-current="page"] .settings-nav-sum { color: color-mix(in srgb, var(--ink-soft) 70%, var(--ink)); } 
.settings-nav-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--r-m); background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); color: var(--ink-soft);
}
.settings-nav-icon svg { width: 18px; height: 18px; }
.settings-nav a[aria-current="page"] .settings-nav-icon { color: var(--sap); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 40%, transparent); }
.settings-nav-text { display: grid; flex: 1; min-width: 0; }
.settings-nav-name { font-size: var(--t-s); line-height: 1.3; overflow-wrap: anywhere; }
.settings-nav-sum { font-size: var(--t-xs); line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.settings-nav-go { display: none; flex: none; color: var(--ink-soft); }
.settings-nav-go svg { display: block; width: 16px; height: 16px; }
.settings-nav-go svg { rotate: -90deg; }
.settings-nav-go svg:dir(rtl) { rotate: 90deg; }
.settings-back { display: none; }

.settings-content { min-width: 0; }
.settings-title { margin: 0; font-size: var(--t-l); line-height: 1.3; }
.settings-blurb { margin: var(--s-1) 0 var(--s-5); color: var(--ink-soft); font-size: var(--t-s); line-height: 1.5; }

:where(.settings-body) p { margin: 0 0 var(--s-3); color: var(--ink-soft); }
:where(.settings-body) h3 { margin: 0 0 6px; font-size: var(--t-m); }
.settings-body > * + * { margin-top: var(--s-5); }
.settings-body > section + section { padding-top: var(--s-5); border-top: 1px solid var(--bark); }
:where(.settings-body) section section + section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bark); }
.settings-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.settings-foot p { margin: 0; }
.settings-foot .btn { margin-inline-start: -10px; }


.tiles { min-width: 0; margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; }
.tiles legend { margin: 0 0 10px; padding: 0; font-weight: 600; color: var(--ink); }

.places-choice { display: grid; justify-items: start; gap: 10px; min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.places-choice legend { margin: 0 0 10px; padding: 0; font-weight: 600; color: var(--ink); }
.places-choice .check { font-size: var(--t-m); }
.tiles-row { display: grid; gap: 10px; }
.tiles-text .tiles-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles-theme .tiles-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-2) 10px; border-radius: var(--r-l);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); text-align: center; cursor: var(--cursor-act);
  transition: background var(--d-fast), box-shadow var(--d-fast);
}
.tile:hover { background: color-mix(in srgb, var(--hover) 55%, var(--card)); }
.tile:has(.tile-input:checked) { background: var(--sap-wash); box-shadow: inset 0 0 0 2px var(--sap); }
.tile:has(.tile-input:focus-visible) { outline: 2px solid var(--sap); outline-offset: 2px; }
.tile-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tile-label { font-size: var(--t-xs); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tile:has(.tile-input:checked) .tile-label { font-weight: 600; }

.tile-sample { display: grid; place-items: center; height: 40px; font-weight: 600; line-height: 1; color: var(--ink); }
.tile-sample.size-s { font-size: 15px; }
.tile-sample.size-m { font-size: 18px; }
.tile-sample.size-l { font-size: 22px; }
.tile-sample.size-xl { font-size: 27px; }
.theme-pic {
  --pic-paper: #F7F7F5; --pic-card: #FFFFFF; --pic-line: #DFDEDA; --pic-dot: #2E7556;
  display: grid; align-content: center; gap: 5px; width: 100%; max-width: 128px; aspect-ratio: 8 / 5; padding: 8px;
  border-radius: var(--r-m); background: var(--pic-paper); box-shadow: inset 0 0 0 1px rgba(28, 35, 30, .12);
  forced-color-adjust: none;
}
.theme-dark, .theme-system .pic-card + .pic-card { --pic-paper: #191919; --pic-card: #232323; --pic-line: #373737; --pic-dot: #6DBE95; }
.theme-system { background: linear-gradient(135deg, #F7F7F5 50%, #191919 50%); }
.pic-card { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; background: var(--pic-card); }
.pic-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pic-dot); }
.pic-dot.done { background: var(--pic-dot); }
.pic-lines { display: grid; flex: 1; gap: 3px; }
.pic-lines span { height: 3px; border-radius: 2px; background: var(--pic-line); }
.pic-lines span + span { width: 60%; }
@media (forced-colors: active) {
  .settings-nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .tile { border: 1px solid CanvasText; }
  .tile:has(.tile-input:checked) { outline: 3px solid Highlight; outline-offset: -1px; }
}

@media (max-width: 899px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-nav { position: static; }
  .settings[data-open="list"] .settings-content,
  .settings[data-open="section"] .settings-nav { display: none; }
  
  .settings[data-open="section"] .view-head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  
  .settings-nav ul { gap: 0; padding: var(--s-1); border-radius: var(--r-l); background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); }
  .settings-nav li + li { border-top: 1px solid color-mix(in srgb, var(--bark) 60%, transparent); }
  .settings-nav a { min-height: 60px; padding: 10px; }
  .settings-nav-icon { background: var(--paper); }
  .settings-nav-go { display: block; }
  .settings-top { display: flex; align-items: center; gap: 2px; }
  .settings-back { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-start: -12px; border-radius: 50%; color: var(--ink); }
  .settings-back svg { width: 22px; height: 22px; }
  .settings-back:hover { background: var(--hover); }
  .settings-title { font-size: var(--t-xl); }
}



.signin { max-width: 440px; margin: 48px auto 0; }
.signin-mark { display: block; width: 44px; height: 44px; margin: 0 0 20px; }
.signin-stem { fill: var(--mark); }
.signin-bud { fill: var(--mark); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  
  .signin-grow .signin-stem { animation: sprig-grow .9s cubic-bezier(.16, 1, .3, 1) both; }
  .signin-grow .signin-bud { animation: bud-open .5s cubic-bezier(.16, 1, .3, 1) .55s both; }
}

@keyframes sprig-grow { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes bud-open { from { transform: scale(0); } to { transform: scale(1); } }
.signin-title { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.signin-title:focus { outline: none; }
.signin-lead { margin: 10px 0 28px; color: var(--ink-soft); font-size: var(--t-m); line-height: 1.55; }
.signin-lead strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.signin-wide { width: 100%; min-height: 48px; justify-content: center; font-size: var(--t-m); }
.signin-google { gap: 10px; font-weight: 600; }
.signin-g { width: 18px; height: 18px; flex: none; }
.signin-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--ink-soft); font-size: var(--t-xs); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--bark); }
.signin-form { display: grid; gap: 10px; }
.signin-label { font-size: var(--t-s); font-weight: 600; }
.signin-input {
  width: 100%; min-height: 48px; padding: 0 14px; font-size: var(--t-m);
  border: 1px solid var(--bark); border-radius: 10px; background: var(--card); color: var(--ink);
}
.signin-input:focus-visible { outline-offset: 0; border-color: var(--sap); }
.signin-small { margin: 0; color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }
.signin .account-problem { margin: 12px 0 0; }
.signin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.signin-actions .btn { min-height: 44px; padding-inline: 16px; }
.signin-next { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--bark); }
.signin-next h2 { margin: 0 0 8px; font-size: var(--t-s); font-weight: 600; }
.signin-next ul { margin: 0; padding-inline-start: 18px; color: var(--ink-soft); font-size: var(--t-s); line-height: 1.5; }
.signin-next li { margin: 6px 0; }
.signin-next li::marker { color: var(--sap); }
.signin-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 28px 0 0; font-size: var(--t-s); }
.signin-foot a { color: var(--ink-soft); text-underline-offset: 3px; }
.signin-foot a:hover { color: var(--ink); }
.signin-foot .btn { min-height: 44px; }
@media (max-width: 899px) { .signin { margin-top: 20px; } }
.btn.danger-quiet { color: var(--danger); border-color: transparent; background: none; padding-inline-start: 0; }
.versions { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.versions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bark); font-size: var(--t-s); }
.versions li:first-child { border-top: 0; }
.notes-versions li { align-items: flex-start; }
.notes-versions details { flex: 1; min-width: 0; }
.notes-versions summary { display: flex; gap: 12px; align-items: center; cursor: pointer; min-height: 32px; }
.version-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; max-height: 30vh; overflow: auto; color: var(--ink-soft); }
.notes-past-btn { margin-block-start: 4px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--sap); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.import-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.import-compare > div { padding: 10px 12px; border: 1px solid var(--bark); border-radius: 10px; min-width: 0; }
.import-stats, .import-errors { margin: 0; padding-inline-start: 18px; color: var(--ink-soft); font-size: var(--t-s); overflow-wrap: anywhere; }
.import-errors { margin-bottom: 4px; }

.import-steps { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-3); }
.import-step { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; color: var(--ink-soft); transition: color var(--d-base) var(--ease); }
.import-step:is([data-state="active"], [data-state="done"], [data-state="failed"]) { color: var(--ink); }
.import-step[data-state="active"] { font-weight: 600; }
.import-step-words { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.import-step-detail { font-size: var(--t-s); font-weight: 400; color: var(--ink-soft); }
.import-step-detail:empty { display: none; }
.import-step-mark { position: relative; inline-size: 20px; block-size: 20px; margin-block-start: 1px; border-radius: var(--r-pill); border: 1.6px solid var(--ink-soft);
  display: grid; place-items: center; transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.import-step-mark::after { content: ''; inline-size: 8px; block-size: 8px; border-radius: var(--r-pill); background: transparent; }
[data-state="active"] > .import-step-mark { border-color: var(--sap); }
[data-state="active"] > .import-step-mark::after { background: var(--sap); animation: step-bud .7s var(--ease) infinite alternate; }
:is([data-state="done"], [data-state="failed"]) > .import-step-mark { border-color: transparent; background: var(--sap); animation: step-set .26s var(--ease-out); }
[data-state="failed"] > .import-step-mark { background: var(--danger); }
:is([data-state="done"], [data-state="failed"]) > .import-step-mark::after { inline-size: 12px; block-size: 12px; border-radius: 0; background: var(--card);
  -webkit-mask: var(--step-glyph) center / contain no-repeat; mask: var(--step-glyph) center / contain no-repeat; }
[data-state="done"] > .import-step-mark { --step-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-state="failed"] > .import-step-mark { --step-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6m0-6l-6 6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
@keyframes step-bud { from { transform: scale(.55); opacity: .7; } to { transform: scale(1); opacity: 1; } }
@keyframes step-set { from { transform: scale(.6); } 60% { transform: scale(1.12); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .import-step-mark, .import-step-mark::after { animation: none !important; } }
.import-dialog .import-errors { margin-block: 0 var(--s-2); }
.import-nothing { margin: 0; color: var(--ink-soft); font-size: var(--t-s); }
.import-warning { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--danger-wash); color: var(--ink); font-size: var(--t-s); }
.keys { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--t-s); }
.keys dt { font-weight: 600; }
.keys dd { margin: 0; color: var(--ink-soft); }
.keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.key-group + .key-group { margin-top: 14px; }
.key-group h4 { margin: 0 0 6px; font-size: var(--t-s); font-weight: 600; }
.key-or { font-weight: 400; font-size: var(--t-xs); color: var(--ink-soft); padding: 0 2px; }
kbd { font: inherit; padding: 0 5px; border: 1px solid var(--bark); border-radius: 4px; background: var(--paper); }

.toasts {
  position: fixed; left: 50%; bottom: max(20px, calc(var(--toast-lift, 0px) + 8px)); transform: translateX(-50%); z-index: 45;  
  display: grid; gap: 8px; width: min(440px, calc(100vw - 32px));
}

.toast {
  display: flex; align-items: center; gap: var(--s-2); padding-block: var(--s-2); padding-inline: var(--s-4) var(--s-2);
  background: var(--toast); color: var(--on-toast); border: 1px solid var(--toast-edge); border-radius: var(--r-m);
  box-shadow: var(--toast-shadow);
  animation: rise .2s var(--ease-out);
  
  touch-action: none;
  transition: translate var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.toast.dragging { transition: none; }
.toast.flung { transition-timing-function: var(--ease); } 
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.toast p { margin: 0; flex: 1; min-width: 0; font-size: var(--t-s); overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.toast button { border: 0; background: none; color: var(--toast-accent); font-weight: 600; padding: 6px 12px; min-height: 36px; border-radius: var(--r-m); font-size: var(--t-s); flex: none; }
.toast button:hover { background: color-mix(in srgb, var(--toast-accent) 14%, transparent); }
.toast button:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 1px; }
.toast .toast-x { color: color-mix(in srgb, var(--on-toast) 72%, var(--toast)); display: grid; place-items: center; width: 36px; padding: 0; }
.toast .toast-x svg { width: 18px; height: 18px; }
.toast .toast-x:hover { color: var(--on-toast); background: color-mix(in srgb, var(--on-toast) 10%, transparent); }

.toast button.primary { background: var(--toast-accent); color: var(--on-toast-accent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast button.primary:hover { background: color-mix(in srgb, var(--toast-accent) 86%, var(--on-toast)); }

.toast-key { padding: 1px 5px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--on-toast) 14%, transparent); color: inherit; font-size: var(--t-xs); white-space: nowrap; unicode-bidi: isolate; }
@media (forced-colors: active) { .toast { border: 1px solid CanvasText; } .toast button.primary { border: 2px solid ButtonText; } }

.toast:has(> .primary) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; row-gap: 6px; }
.toast:has(> .primary) > p { grid-area: 1 / 1 / 2 / 3; }
.toast:has(> .primary) > .toast-x { grid-area: 1 / 3; }
.toast > button.primary { grid-column: 1; justify-self: start; }
.toast:has(> .primary) > button:not(.primary, .toast-x) { grid-column: 2 / 4; justify-self: end; }
@media (max-width: 640px) { .toast > button.primary { min-height: 40px; } }

.toast.stacked { flex-wrap: wrap; row-gap: 2px; }
.toast.stacked > p { flex: 1 1 calc(100% - 36px - var(--s-2)); }
.toast.stacked > .toast-x { order: 1; }
.toast.stacked > button:not(.toast-x) { order: 2; }
.toast.stacked > button:not(.toast-x):first-of-type { margin-inline-start: auto; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

.pick-bar {
  position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 44; 
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1); width: max-content; max-width: calc(100vw - 32px);
  padding-block: var(--s-1); padding-inline: var(--s-4) var(--s-1);
  background: var(--toast); color: var(--on-toast); border: 1px solid var(--toast-edge); border-radius: var(--r-m); box-shadow: var(--toast-shadow);
  animation: rise .2s var(--ease-out);
}
.pick-count { margin: 0; margin-inline-end: var(--s-2); font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-bar button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--on-toast); padding: 6px 10px; min-height: 36px; border-radius: var(--r-m); font-size: var(--t-s); }
.pick-bar button svg { width: 16px; height: 16px; flex: none; color: var(--toast-accent); }
.pick-bar button:hover:not(:disabled) { background: color-mix(in srgb, var(--on-toast) 10%, transparent); }
.pick-bar button:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 1px; }
.pick-bar button:disabled { opacity: .5; }
.pick-bar .pick-x { width: 36px; padding: 0; justify-content: center; color: color-mix(in srgb, var(--on-toast) 72%, var(--toast)); }
.pick-bar .pick-x svg { width: 18px; height: 18px; color: inherit; }
.pick-short, .pick-more { display: none; }

@media (max-width: 640px) {
  .pick-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: calc(100vw - 32px); padding: 4px; gap: 0; }
  .pick-bar .pick-count { grid-column: 1 / 5; grid-row: 1; align-self: center; margin: 0; padding-inline: 12px; }
  .pick-bar .pick-x { grid-column: 5; grid-row: 1; justify-self: end; width: 44px; min-height: 40px; }
  .pick-bar .pick-wide, .pick-bar .pick-word:has(+ .pick-short) { display: none; }
  .pick-bar .pick-short, .pick-bar .pick-more { display: inline-flex; }
  .pick-bar .pick-btn { grid-row: 2; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 4px 2px; font-size: var(--t-xs); text-align: center; }
  .pick-bar .pick-btn svg { width: 20px; height: 20px; }
  .pick-bar .pick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
html.picking .toasts { bottom: max(calc(28px + var(--pick-h, 56px)), calc(var(--toast-lift, 0px) + 8px)); } 
@media (forced-colors: active) { .pick-bar { border: 1px solid CanvasText; } }
@media (prefers-reduced-motion: reduce) { .pick-bar { animation: none; } }

.recovery { max-width: 560px; margin: 48px 0; }
.recovery h1 { font-size: var(--t-xl); margin: 0 0 8px; }
.recovery p { color: var(--ink-soft); }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.recovery-detail { margin-top: 24px; font-size: var(--t-s); color: var(--ink-soft); }
.recovery-detail summary { cursor: pointer; width: fit-content; }
.recovery-detail p { margin: 6px 0 0; overflow-wrap: anywhere; }

.bottombar { display: none; }


@media (max-width: 400px) {
  html:not(.capture-low) .capture-field:has(input:placeholder-shown:not(:focus)) .capture-dest { display: none; }
}



@media (max-width: 899px) {
  :root { --indent: 22px; --stem-x: 12px; }
  .app, .app.with-panel { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .topbar { padding: 10px 16px; gap: 10px; }
  
  .capture:has(input:placeholder-shown) .capture-add { display: none; }
  .capture:has(input:not(:placeholder-shown)) .capture-mic:not(.is-listening) { display: none; }
  
  .capture { min-width: 0; }
  .save-status { width: 4em; text-align: end; }
  .save-status:has(.save-short) .save-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .save-short { display: inline; }
  .save-size { display: none; } 
  .phone-search {
    flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--bark); border-radius: 10px;
    background: var(--card); color: var(--ink-soft);
  }
  .phone-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .scratch-open { width: 44px; height: 44px; border: 1px solid var(--bark); border-radius: 10px; background: var(--card); }
  .save-status:not([data-state="saving"], [data-state="saved"]) { width: auto; flex-basis: 100%; white-space: normal; }
  .save-status[data-state="stopped"] { flex-basis: auto; } 
  
  .save-status[data-state="saved"] { visibility: hidden; }
  .scratch-open { display: none; }
  .capture-add, .capture-add:hover { min-height: 44px; background: var(--sap); border-color: var(--sap); color: var(--card); font-weight: 600; }
  
  .topbar:has(.capture input:not(:placeholder-shown)) :is(.phone-search, .scratch-open, .save-status[data-state="saved"], .save-status[data-state="saving"]) { display: none; }
  .view { padding: 4px 16px calc(120px + var(--toasts-h, 0px)); }
  .view-head > :first-child { flex-basis: 9rem; } 
  #banners, #guide { padding: 0 16px; }
  .panel {
    position: fixed; inset: 0; z-index: 30; height: auto; border-inline-start: 0;
    padding: 12px 16px calc(96px + var(--toasts-h, 0px));
    animation: rise .2s var(--ease-out);
  }
  
  @media (pointer: coarse) { 
    .panel { overscroll-behavior: contain; }
    .panel::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: calc(100% + 1px); pointer-events: none; }
  }
  .card { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .card .meta { grid-column: 3 / -1; grid-row: 2; padding: 0 4px 2px; }
  .status { width: 44px; height: 44px; }
  .chev { height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .empty { margin: 20px 0; } 
  
  .bottombar {
    position: fixed; inset-inline: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; 
    padding: 5px; border: 1px solid transparent; border-radius: 24px; box-shadow: var(--e3);
  }
  
  .bottombar::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    border: 1px solid var(--bark); border-radius: 24px;
    background: color-mix(in srgb, var(--surface-1) 92%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M17.67 0A10 10 0 0 1 27.29 7.27A34 34 0 0 0 92.71 7.27A10 10 0 0 1 102.33 0Z'/%3E%3C/svg%3E") 50% 0 / 120px 40px no-repeat; -webkit-mask-composite: source-out;
    mask: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M17.67 0A10 10 0 0 1 27.29 7.27A34 34 0 0 0 92.71 7.27A10 10 0 0 1 102.33 0Z'/%3E%3C/svg%3E") 50% 0 / 120px 40px no-repeat; mask-composite: subtract;
  }
  
  .bottombar::after {
    content: ""; position: absolute; top: -1px; left: 50%; width: 120px; height: 40px; margin-left: -60px; z-index: -1; pointer-events: none; 
    background: var(--bark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M17.67 0A10 10 0 0 1 27.29 7.27A34 34 0 0 0 92.71 7.27A10 10 0 0 1 102.33 0' transform='translate(0 .5)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M17.67 0A10 10 0 0 1 27.29 7.27A34 34 0 0 0 92.71 7.27A10 10 0 0 1 102.33 0' transform='translate(0 .5)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat;
  }
  .bottombar a, .bottombar button {
    position: relative; min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px;
    border: 0; background: none; color: var(--ink-soft);
    text-decoration: none; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .01em;  border-radius: 19px;
    transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  }
  .bottombar .nav-icon { width: 22px; height: 22px; color: inherit; }
  .bottombar .nav-icon svg { width: 21px; height: 21px; }
  .bottombar [aria-current="page"], .bottombar [data-here] { color: var(--sap); background: var(--sap-wash); }
  .bottombar a:active, .bottombar button:not(.bar-make):active { scale: .96; } 
  .bottombar .tend-dot { position: absolute; top: 7px; inset-inline-end: calc(50% - 16px); margin: 0; } 
  
  .bottombar .bar-count { position: absolute; top: 3px; inset-inline-start: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    display: grid; place-items: center; border-radius: var(--r-pill); background: var(--sap); color: var(--card); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface-1); }
  .bottombar .bar-count[hidden] { display: none; }
  .bottombar .bar-count:not([hidden]) ~ .tend-dot { inset-inline-end: auto; inset-inline-start: calc(50% - 16px); }
  
  html.keyboard-up .bottombar { display: none; }
  .toasts { bottom: max(112px, calc(var(--toast-lift, 0px) + 8px)); }
  .pick-bar { bottom: 112px; }
  html.picking .view { padding-block-end: calc(128px + var(--pick-h, 88px) + var(--toasts-h, 0px)); } 
  html.picking .toasts { bottom: max(calc(120px + var(--pick-h, 88px)), calc(var(--toast-lift, 0px) + 8px)); }
  
  html.keyboard-up .toasts { bottom: 8px; }
  
  html.capture-low .workspace { padding-top: var(--topbar-h, 0px); }
  html.capture-low .topbar {
    position: fixed; top: auto; inset-inline: 0; bottom: var(--vv-under, 0px); z-index: 25;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--card);
    border-top: 1px solid var(--bark); border-bottom: 0; box-shadow: var(--float);
  }
  html.capture-low .capture-chips { position: static; order: -1; flex-basis: 100%; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
  
  html.capture-low .capture-field { flex-wrap: wrap; row-gap: 0; }
  html.capture-low .capture-field { border-radius: 24px; } 
  html.capture-low .capture input { flex: 1 1 calc(var(--ph-w, 8em) + 18px); } 
  html.capture-low .capture-dest { flex: 0 1 auto; max-width: 100%; margin-block: 4px; margin-inline-start: auto; }
  @media (max-width: 360px) { 
    html.capture-low .capture { gap: 4px; }
    html.capture-low .capture-field { gap: 6px; padding-inline-end: 6px; }
    html.capture-low .capture input { padding-inline-start: 12px; flex-basis: calc(var(--ph-w, 8em) + 12px); }
    html.capture-low .capture-dest { padding-inline: 6px; }
  }
  
  html:not(.capture-low) .topbar :is(.capture, .capture-chips, .quick-row) { display: none; }
  html.capture-low .capture-hint { display: none; } 
  
  
  html.capture-low .quick-row {
    
    order: -2; flex-basis: 100%; display: grid; grid-template-columns: repeat(var(--qcols, auto-fit), minmax(min(100%, max(56px, var(--qw, 56px))), 1fr));
    gap: 4px 8px; margin: 0 -4px 8px; 
  }
  .quick-tile {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 8px;
    border: 0; border-radius: var(--r-m); background: none; color: var(--ink-soft);
    font-size: max(12px, calc(var(--t-xs) - 1px)); font-weight: 600; letter-spacing: .01em; 
  }
  .quick-word { min-width: 0; text-align: start; overflow-wrap: normal; }
  .quick-ic { display: grid; place-items: center; flex: none; color: var(--sap); }
  .quick-ic svg { width: 20px; height: 20px; stroke-width: 1.8; }
  .quick-tile:active { background: var(--hover); }
  .quick-tile:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
  :root[data-contrast="more"] .quick-tile { color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    html.capture-low:not([data-motion="reduce"]) .quick-tile {
      animation: quick-fan .46s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: calc(40ms + max(var(--i), -1 * var(--i)) * 45ms); 
    }
  }
  
  html.capture-low .quick-row.one-line { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-bottom: 4px; }
  html.capture-low .one-line > .quick-tile { flex-direction: column; gap: 2px; min-height: 48px; padding: 4px 0; }
  html.capture-low .one-line .quick-word { text-align: center; line-height: 1.15; }
  html.capture-low .quick-tile { animation: quick-fade .2s var(--ease-out) both; } 
  @keyframes quick-fan {
    from { opacity: 0; translate: calc(var(--i) * -38px) 26px; scale: .55; }
    60% { opacity: 1; }
  }
  @keyframes quick-fade { from { opacity: 0; } }
  html:not(.capture-low) .topbar { justify-content: flex-end; }
  html.capture-low .topbar :is(.phone-search, .scratch-open, .save-status) { display: none; }
  html.capture-low .bottombar { display: none; } 
  html.capture-low :is(.capture-suggest, .capture-hint) { top: auto; bottom: calc(100% + 4px); }
  html.capture-low #banners { top: 0; } 
  html.capture-low .toasts { bottom: calc(var(--vv-under, 0px) + var(--capture-h, 64px) + 8px); }
  @media (prefers-reduced-motion: no-preference) { html.capture-low .topbar { animation: rise .18s var(--ease-out); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}



.rail-search {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 10px;
  min-height: 32px; border: 0; border-radius: var(--r-m); background: none; color: var(--ink-soft);
  font-size: var(--t-s); text-align: start;
}
.rail-search:hover { background: var(--hover); color: var(--ink); }
.rail-search kbd { font: inherit; font-size: var(--t-xs); color: var(--ink-soft); margin-inline-start: auto; }
.rail-search { justify-content: flex-start; gap: 10px; }
dialog.palette {
  width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 12vh auto auto; padding: 0;
  flex-direction: column; overflow: hidden;
}
dialog.palette[open] { display: flex; }
.palette-input {
  margin: 12px; padding: 12px 14px; border: 1px solid var(--bark); border-radius: 10px; background: var(--paper);
  font-size: var(--t-m);
}
.palette-scope { display: flex; align-items: center; gap: var(--s-1); margin: -4px 12px 4px; padding-inline-start: 10px; font-size: var(--t-xs); color: var(--ink-soft); }
.palette-scope[hidden] { display: none; }
.palette-scope-name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; }
.palette-group { padding: 10px 8px 4px; font-size: var(--t-xs); color: var(--ink-soft); }
.palette-option { display: grid; gap: 2px; padding: 8px 10px; min-height: 44px; border-radius: 8px; cursor: var(--cursor-act); }
.palette-option[aria-selected="true"] { background: var(--hover); box-shadow: inset var(--lead-x) 0 0 var(--sap); }
.palette-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-path, .palette-snippet { font-size: var(--t-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-option.is-command { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.palette-icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink-soft); }
.palette-icon svg { width: 18px; height: 18px; }
.palette-icon .menu-emoji { font-size: 16px; line-height: 1; }
.palette-option[aria-selected="true"] .palette-icon { color: var(--sap); }
.palette-icon:has(.grove-tile) { width: 22px; height: 22px; }
.palette-icon .grove-tile { inline-size: 22px; block-size: 22px; }
.palette-text { display: grid; gap: 2px; min-width: 0; }
.palette-keys { display: flex; gap: 4px; font-size: var(--t-xs); color: var(--ink-soft); }
.palette-keys kbd { min-width: 22px; text-align: center; }
@media (hover: none) and (pointer: coarse) { .palette-keys { display: none; } } 
dialog.palette .palette-status { margin: 0; padding: 0 20px 14px; }
.palette-status:empty { display: none; }
.palette-top { display: flex; align-items: center; }
.palette-top > .palette-input { flex: 1; min-width: 0; }
.palette-cancel { display: none; }
@media (max-width: 899px) {
  dialog.palette { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .palette-top > .palette-input { margin-inline-end: 4px; }
  .palette-cancel {
    display: block; flex: none; min-height: 44px; margin-inline-end: 4px; padding-inline: 8px; border: 0; border-radius: var(--r-m);
    background: none; color: var(--sap); font: inherit; font-size: var(--t-s); font-weight: 600;
  }
  .palette-cancel:active { background: var(--hover); }
}



dialog.picker { width: min(520px, calc(100vw - 32px)); }
.picker-search {
  width: 100%; padding: 9px 12px; margin: 4px 0 10px;
  border: 1px solid var(--bark); border-radius: 8px; background: var(--paper);
}
.picker-search:focus-visible { outline: none; border-color: var(--sap); }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 420px); overflow: auto; }
.picker-option { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: var(--cursor-act); }
.picker-option[aria-selected="true"] { background: var(--sap-wash); }
.picker-option[aria-disabled="true"] { cursor: var(--cursor-no); opacity: .55; }
.picker-label { font-weight: 500; overflow-wrap: anywhere; }
.picker-path { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.picker-more { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-soft); }
.picker-more:empty { display: none; }
.file-btn { padding: 4px 10px; align-self: center; }
.file-btn > svg { display: none; } 

.row.thought { margin-top: 2px; }
.row.thought:first-child { margin-top: 0; }
.thought > .card { width: 100%; }
.thought > .card > .meta { justify-self: stretch; }
.came { font-weight: 400; }
.triage { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.triage .file-btn { margin-inline-end: 4px; }
.triage .triage-today[aria-pressed="true"] { color: var(--amber); }
.triage .triage-today[aria-pressed="true"] svg circle { fill: currentColor; }
.triage-task svg circle { stroke: currentColor; }



:root {
  --dot: #C9D0C6; --lift: var(--e2); 
  --float: var(--e3); 
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot: #2B332D; --lift: var(--e2);
    --float: var(--e3);
  }
}

  :root[data-theme="dark"] {
    --dot: #2B332D; --lift: var(--e2);
    --float: var(--e3);
  }

.app.canvas-mode { height: 100vh; min-height: 0; }
.app.canvas-mode .workspace { height: 100vh; }

.view.is-board .crumb-title { font-size: var(--t-l); }
.view.is-canvas { flex: 1; min-height: 0; max-width: none; padding: 0; display: flex; flex-direction: column; }
.view.is-canvas .view-top { padding: 0 28px; }

.view.has-shapes { max-width: none; padding-top: 0; }
.view.has-shapes:not(.is-canvas):not(.is-board):not(.is-grid):not(.is-timeline) > :not(.view-top) { max-width: 804px; }
.view.has-shapes .view-head { align-items: center; margin: 2px 0 10px; min-height: 44px; }
.view.has-shapes .view-tools { align-self: flex-start; min-height: 44px; } 
.view.has-shapes .view-head > :first-child { min-height: 44px; margin: 0; display: flex; align-items: center; } 
.view.is-canvas .view-head .crumbs { margin: 0; min-width: 0; }

@media (min-width: 900px) {
  .view.has-shapes .view-head { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; align-items: start; }
  
  .view.has-shapes .view-head > .view-tools { flex-wrap: wrap-reverse; justify-content: flex-end; align-content: flex-end; align-self: start; min-height: 0; padding-top: 3.5px; max-width: none; margin: 0; }
}
.view.is-canvas .view-top > .crumbs { margin: 6px 0 10px; }
.view.is-canvas .empty { margin: 24px 28px; }

.canvas {
  position: relative; flex: 1; min-height: 0; overflow: clip;
  border-top: 1px solid var(--bark);
  background-color: var(--paper);
  cursor: var(--cursor-grab); touch-action: none; user-select: none; 
}
.canvas-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, var(--dot) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
}
.canvas-shield { position: absolute; inset: 0; z-index: 4; cursor: var(--cursor-grabbing); }
.canvas.boxing .canvas-shield { cursor: var(--cursor); }

.canvas.space-pan, .canvas.space-pan .ccard { cursor: var(--cursor-grab); }

.sel-box {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; 
  border: 1px solid var(--sap); border-radius: 2px; background: color-mix(in srgb, var(--sap) 12%, transparent);
}
.sel-box.on-page { position: fixed; z-index: 30; } 
.is-boxing, .is-boxing * { user-select: none; -webkit-user-select: none; }
@media (forced-colors: active) { .sel-box { border-color: Highlight; } }
.canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; direction: ltr; } 
.canvas.gliding .canvas-world { transition: transform .3s var(--ease); }
.canvas.gliding .canvas-dots { transition: background-position .3s var(--ease), background-size .3s var(--ease); }

.canvas-edges { position: absolute; left: 0; top: 0;  width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.canvas-edges path {
  fill: none; stroke: var(--stem); stroke-width: 2; stroke-linecap: round;
  transition: d .26s var(--ease), opacity .2s var(--ease), stroke .15s;
}
.canvas-edges path.lit { stroke: var(--sap); stroke-width: 2.5; }

.ccard {
  position: absolute; left: 0; top: 0; width: 248px; height: 104px; 
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 10px; padding-inline: 8px 10px;
  background: var(--card); border: 1px solid transparent; border-radius: var(--r-m);
  box-shadow: var(--e1);
  cursor: var(--cursor-act);
  transition: transform .26s var(--ease), rotate .2s var(--ease), opacity .2s var(--ease), border-color .15s, box-shadow .15s;
}
.ccard:hover { border-color: color-mix(in srgb, var(--bark) 55%, var(--ink-soft)); }
.ccard.root { border-radius: 12px; border-color: color-mix(in srgb, var(--bark) 70%, var(--ink-soft)); }
.ccard.selected { border-color: var(--sap); box-shadow: 0 0 0 1px var(--sap), var(--lift); z-index: 2; }

.ccard.picked:not(.selected) { border-color: var(--sap); background-color: color-mix(in srgb, var(--sap-wash) 70%, var(--card)); }
@media (forced-colors: active) { .ccard.picked { outline: 2px solid Highlight; } }

.ccard.tile { justify-content: flex-start; gap: 4px; }

.cfar { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } 
.ccard:focus-visible { outline-offset: 3px; border-radius: 12px; }
.ccard.carried, .canvas-edges path.carried { transition: none; }

.ccard.carried.lifted { transition: box-shadow .2s; will-change: transform; }
.canvas-leaving { position: absolute; left: 0; top: 0; direction: ltr; } 
.ccard.leaving { pointer-events: none; }
.ccard.lifted { z-index: 5; box-shadow: 0 2px 4px rgba(28, 35, 30, .12), 0 14px 28px -8px rgba(28, 35, 30, .4); }

.ccard-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 2px; min-height: 0; }
.ccard .title {
  font-size: 15px; line-height: 22px; font-weight: 500; padding: 3px 2px 0;
  -webkit-line-clamp: 2; cursor: inherit;
}
.ccard.root .title { font-size: var(--t-m); font-weight: 600; }
.ccard.is-done .title { color: var(--ink-soft); }
.ccard .title-edit { font-size: 15px; line-height: 22px; max-height: 50px; overflow: auto; margin-top: 2px; }
.ccard .more { width: 28px; height: 28px; opacity: 0; transition: opacity .15s; }
.ccard:hover .more, .ccard.selected .more, .ccard:focus-within .more, .ccard .more[aria-expanded="true"] { opacity: 1; }
.ccard .meta { padding: 0; padding-inline-start: 32px; min-height: 26px; gap: 8px; }
.ccard .meta .bar { width: 56px; }

.ccard.is-cut, .card.is-cut { border-style: dashed; background: color-mix(in srgb, var(--card) 45%, transparent); box-shadow: none; }
:is(.ccard, .card):is(.is-cut, .dimmed:not(.selected)) :is(.title, .excerpt, .meta) { color: var(--ink-soft); }
.card .excerpt {
  grid-column: 3 / 4; grid-row: 2; margin: 0; padding: 0 4px; font-size: var(--t-s); line-height: 20px; color: var(--ink-soft);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 899px) {
  .card .excerpt { grid-column: 3 / -1; }
  .card:has(.excerpt) .meta { grid-row: 3; }
}
.ccard .excerpt {
  margin: 2px 0 0; margin-inline-start: 32px; font-size: var(--t-xs); line-height: 18px; color: var(--ink-soft);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.grow {
  position: absolute; right: -14px; top: 52px; transform: translateY(-50%);  
  display: inline-flex; align-items: center; gap: 1px;
  height: 26px; min-width: 28px; padding-block: 0; padding-inline: 7px 4px; border-radius: 13px;
  border: 1px solid var(--bark); background: var(--card); color: var(--ink-soft);
  font-size: var(--t-xs); font-weight: 600; box-shadow: var(--shadow);
}
.grow svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.grow:hover { border-color: var(--sap); color: var(--sap); }
.grow.is-open { background: var(--sap); border-color: var(--sap); color: var(--card); }
.grow.is-open svg { transform: rotate(180deg); }
.grow.is-empty { color: var(--ink-soft); border-style: dashed; box-shadow: none; }
.grow.is-empty:hover:not(:disabled) { border-style: solid; }
.grow:disabled { opacity: .5; cursor: var(--cursor); }

.canvas-tools {
  position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 6;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--bark); border-radius: 10px; box-shadow: var(--lift);
}
.canvas-btn {
  min-width: 32px; height: 30px; padding: 0 8px; border: 0; background: none; border-radius: 7px;
  font-size: var(--t-s); color: var(--ink);
}
.canvas-btn:hover { background: var(--hover); }
.canvas-btn.zoom-label { min-width: 52px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.canvas-btn.fit { border-inline-start: 1px solid var(--bark); border-radius: 0; border-start-end-radius: 7px; border-end-end-radius: 7px; padding: 0 12px; font-weight: 500; }


.ccard.drop-inside { border-color: var(--sap); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sap) 35%, transparent), var(--lift); background: var(--sap-wash); }
.ccard.drop-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent); }
.canvas .drop-note {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; max-width: 280px; 
  padding: 5px 10px; border-radius: 7px; font-size: var(--t-xs); font-weight: 600;
  background: var(--sap); color: var(--card); box-shadow: var(--lift);
}
.canvas .drop-note.refused { background: var(--danger); }



:root {
  --lab-sap: #2E7556; --lab-amber: #9A6414; --lab-clay: #A24E31; --lab-slate: #3F6487; --lab-plum: #7A4B7D; --lab-stone: #5E665F;
  --on-lab: #FFFFFF; 
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lab-sap: #6DBE95; --lab-amber: #E0A54A; --lab-clay: #E48A6B; --lab-slate: #8DB3DA; --lab-plum: #C99CCC; --lab-stone: #A6AFA7; --on-lab: #121814; }
}

  :root[data-theme="dark"] { --lab-sap: #6DBE95; --lab-amber: #E0A54A; --lab-clay: #E48A6B; --lab-slate: #8DB3DA; --lab-plum: #C99CCC; --lab-stone: #A6AFA7; --on-lab: #121814; }
.c-sap { --lab: var(--lab-sap); } .c-amber { --lab: var(--lab-amber); } .c-clay { --lab: var(--lab-clay); }
.c-slate { --lab: var(--lab-slate); } .c-plum { --lab: var(--lab-plum); } .c-stone { --lab: var(--lab-stone); }

.chips { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.chip {
  display: inline-block; max-width: 92px; padding: 1px 7px; border-radius: 999px;
  font-size: var(--t-2xs); line-height: 1.5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  
  color: color-mix(in srgb, var(--lab, var(--ink-soft)) 72%, var(--ink)); background: color-mix(in srgb, var(--lab, var(--ink-soft)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lab, var(--ink-soft)) 28%, transparent);
}

.chips .chip[class*="c-"] { max-width: 140px; padding: 1px 8px; border-radius: 5px; color: var(--on-lab); background: var(--lab); box-shadow: none; }
.chip.more-chips { --lab: var(--ink-soft); border-radius: 5px; }

.due-chip { font-size: calc(var(--t-xs) - 1px); line-height: 1.5; font-weight: 600; white-space: nowrap; color: var(--ink-soft); }
.due-chip.today { color: var(--sap); }

:is(.card.selected, .card.picked) .due-chip.today { color: color-mix(in srgb, var(--sap) 82%, var(--ink)); }
.due-chip.overdue { color: var(--danger); }
.due-chip.past { font-weight: 500; } 

.milestone-mark svg { width: 1em; height: 1em; vertical-align: -0.15em; margin-inline-end: var(--s-1); }
.due-chip.done { text-decoration: line-through; } 
.due-section { display: grid; gap: 8px; }
.panel .due-section > h3 { margin: 0; }
.due-section > .btn { justify-self: start; } 
.due-body { display: grid; gap: 8px; }
.due-summary { margin: 0; }

.due-more > summary.due-line { margin: -6px -8px; padding: 11px 8px; align-items: flex-start; font-size: var(--t-m); line-height: 22px; }
.due-line > svg { inline-size: 18px; block-size: 18px; flex: none; margin-block: 2px; color: var(--ink-soft); } 
.due-more > summary.due-line::after { margin-block-start: 6px; }
.due-more[open] > summary.due-line::after { margin-block-start: 10px; } 
.due-line > .due-summary { min-width: 0; }

.due-more > summary { cursor: var(--cursor-act); min-block-size: 44px; display: flex; align-items: center; gap: 8px; border-radius: var(--r-m); padding-inline: 4px; }
.due-more > summary::-webkit-details-marker { display: none; }
.due-more > summary::after { content: ""; inline-size: 7px; block-size: 7px; flex: none; margin-inline-start: auto; border-inline-end: 1.6px solid var(--ink-soft); border-block-end: 1.6px solid var(--ink-soft); rotate: 45deg; transition: rotate var(--d-fast) var(--ease); }
.due-more[open] > summary::after { rotate: 225deg; }
.due-more > summary:dir(rtl)::after { rotate: -45deg; }
.due-more[open] > summary:dir(rtl)::after { rotate: 135deg; }
.due-more > summary:hover { background: var(--hover); }
.due-controls { display: grid; gap: 10px; padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .due-more > summary::after { transition: none; } }
:root[data-motion="reduce"] .due-more > summary::after { transition: none; }
.due-summary.overdue { color: var(--danger); font-weight: 600; }
.routine-history { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-soft); }
.routine-days { display: flex; gap: 3px; }
.routine-day { inline-size: 7px; block-size: 7px; border-radius: 2px; background: color-mix(in srgb, var(--ink-soft) 28%, transparent); }
.routine-day.done { background: var(--sap); }
.routine-day.today { box-shadow: 0 0 0 1px var(--ink-soft); }
.routine-round { margin: 8px 0 0; font-size: var(--t-s); color: var(--ink); }
.routine-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.routine-coming-head { margin: 0 0 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.routine-coming { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.routine-coming-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-block: 4px; }
.routine-coming-when { display: flex; flex-direction: column; flex: 1 1 10em; min-inline-size: 0; font-size: var(--t-s); }
.routine-coming-note { font-size: var(--t-xs); color: var(--ink-soft); }
.routine-coming-row.skipped .routine-coming-when > :first-child { text-decoration: line-through; color: var(--ink-soft); }
.routine-coming-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.due-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.due-quick .btn[aria-pressed="true"] { border-color: var(--sap); background: var(--sap-wash); box-shadow: inset 0 0 0 1px var(--sap); } 
@media (forced-colors: active) { .due-quick .btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.due-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.due-pick input[type="text"] { width: 100%; box-sizing: border-box; }
.repeat-row { display: flex; align-items: center; gap: 8px; }
.repeat-row > span { min-inline-size: 5.75em; font-size: var(--t-s); color: var(--ink-soft); } 
.repeat-row[hidden] { display: none; }
.repeat-after { margin-inline-start: calc(5.75em + 8px); } 
.repeat-after[hidden] { display: none; }
.remind-row { display: grid; gap: 6px; justify-items: start; }
.remind-row [hidden] { display: none; }
.remind-row .hint { margin: 0; }
.remind-at { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.remind-at .remind-day { width: auto; max-width: 220px; }
.topbar { flex-wrap: wrap; }

.capture-chips {
  position: absolute; z-index: 6; top: calc(100% - 8px); inset-inline-start: 28px; max-width: min(420px, calc(100% - 56px));
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 6px;
  border-radius: var(--r-m); background: var(--card); box-shadow: 0 0 0 1px var(--bark), var(--e1);
  width: max-content; 
}
.capture-chips[hidden] { display: none; }

.capture-chips .chip {
  display: inline-flex; align-items: center; gap: 2px; padding-block: 2px; padding-inline: 10px 4px; min-height: 28px; max-width: none;
  border: 1px solid var(--bark); border-radius: 999px; background: var(--card); font-size: var(--t-xs); color: var(--ink-soft);
  box-shadow: none; font-weight: 400; line-height: 1.3;
}
.capture-chips .chip:not(:has(.chip-x)) { padding-inline-end: 10px; }
.chip-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 16px; line-height: 1; }
.chip-x:hover { background: var(--hover); color: var(--ink); }
.chip-offer { border-style: dashed; color: var(--sap); font-weight: 600; cursor: var(--cursor-act); }
.chip-offer:hover { background: var(--sap-wash); }
.capture { position: relative; }
.capture-mic {
  flex: none; width: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
}
.capture-mic[hidden] { display: none; }
.capture-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.capture-mic:hover { background: var(--hover); color: var(--ink); }
.capture-mic.is-listening { color: var(--sap); background: var(--sap-wash); }
@media (prefers-reduced-motion: no-preference) { .capture-mic.is-listening { animation: mic-pulse 1.2s ease-in-out infinite; } }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sap) 25%, transparent); } }
html:not(.capture-low) .quick-row { display: none; } 

.capture-chips .capture-choice { display: inline-grid; grid-template-columns: repeat(3, auto); }
.capture-choice button { min-height: 28px; font-size: var(--t-xs); }
.capture-choice button[aria-checked="true"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); font-weight: 600; color: var(--ink); }
@media (forced-colors: active) { .capture-choice button[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.capture-chips .chip-open { color: var(--ink); cursor: var(--cursor-act); }
.capture-chips .chip-open:hover { background: var(--hover); }
@media (max-width: 899px) {
  .capture-choice button, .capture-chips .chip-open { min-height: 44px; }
}
.capture-suggest {
  position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; width: min(420px, calc(100vw - 32px)); max-height: 280px;
  overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--bark); border-radius: 10px;
  background: var(--card); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.capture-suggest[hidden] { display: none; }

.capture-hint {
  position: absolute; z-index: 29; top: calc(100% + 4px); inset-inline-start: 0; max-width: min(420px, calc(100vw - 32px));
  margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--card); box-shadow: 0 0 0 1px var(--bark);
  font-size: var(--t-xs); color: var(--ink-soft); pointer-events: none;
}
.capture-hint[hidden] { display: none; }
.capture-option { display: grid; gap: 2px; padding: 8px 10px; min-height: 40px; border-radius: 8px; cursor: var(--cursor-act); }
.capture-option[aria-selected="true"] { background: var(--hover); }
.capture-option-path { font-size: var(--t-xs); color: var(--ink-soft); }
.linklike { all: unset; cursor: var(--cursor-act); color: var(--sap); text-decoration: underline; }
.linklike:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; }
.agenda-tabs { margin: 0 0 16px; }
.agenda-tabs a { padding: 5px 12px; border-radius: var(--r-m); font-size: var(--t-s); color: var(--ink-soft); text-decoration: none; }
.agenda-tabs a:hover { background: var(--hover); color: var(--ink); }
.agenda-tabs a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sap); font-weight: 600; }
.agenda-day h2 { font-size: var(--t-s); color: var(--ink-soft); margin: 18px 0 6px; }
.agenda-day.overdue h2 { color: var(--ink); } 

.agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 6px; }
.agenda-head h2 { margin: 0; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.agenda-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); }
.agenda-row .status, .plan-row .status { border: 0; background: none; padding: 4px; display: inline-flex; }

.agenda-row.is-repeat { background: transparent; box-shadow: inset 0 0 0 1px var(--bark); }
.agenda-row.is-repeat .repeat-mark { display: inline-grid; place-items: center; width: 26px; color: var(--ink-soft); }
.agenda-row.is-repeat .agenda-title { color: var(--ink-soft); }
.repeat-when { color: var(--ink-soft); font-size: var(--t-xs); white-space: nowrap; }
.agenda-what { display: grid; min-width: 0; }
.agenda-title { all: unset; cursor: var(--cursor-act); font-weight: 500; overflow-wrap: anywhere; }
.agenda-title:focus-visible { outline: 2px solid var(--sap); outline-offset: 0; border-radius: 4px; } 
.agenda-where { font-size: var(--t-2xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-row { grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }

.agenda-row { content-visibility: auto; contain-intrinsic-size: auto 58px; }

.agenda-row, .grid-tile { cursor: var(--cursor-act); }

@media (max-width: 640px) { .agenda-row { contain-intrinsic-size: auto 100px; } }
.btn.small { padding: 4px 10px; font-size: calc(var(--t-2xs) + 1px); }
.btn svg { width: 16px; height: 16px; }

.today-toggle {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding-block: 0; padding-inline: 6px 8px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.today-toggle svg { width: 18px; height: 18px; flex: none; }

.agenda-row :is(.today-toggle, .start-work) { position: relative; }
.agenda-row :is(.today-toggle, .start-work)::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.today-toggle:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.today-toggle.is-picked { color: var(--amber-text); }
.today-toggle.is-picked svg { color: var(--amber); }
.plan-btn[aria-pressed="true"] { color: var(--amber-text); }

.today-toggle.is-picked.is-quiet, .today-toggle.is-picked.is-quiet svg { color: var(--ink-soft); }
.today-toggle.is-quiet { padding-inline: 6px; }
.today-toggle.is-picked svg circle, .plan-btn[aria-pressed="true"] svg circle { fill: currentColor; }
@media (max-width: 899px) { .today-toggle { min-height: 40px; } }

@media (max-width: 640px) {
  .agenda-row { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
  .agenda-row .agenda-what { flex: 1 1 0; min-width: calc(100% - 58px); }
  .agenda-row > .agenda-what + * { margin-inline-start: auto; }
}
.plan-btn[aria-pressed="true"] { border-color: var(--amber); }
.panel-plan { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }

.when-row { display: flex; flex-wrap: wrap; gap: 6px; } 
.when-row > .panel-plan { margin: 0; }
.agenda-day.picked h2 { color: var(--amber-text); }
.plan-day { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--sap-wash); box-shadow: inset 0 0 0 1px var(--bark); }
.plan-day h2 { margin: 0 0 4px; font-size: var(--t-m, 16px); }
.plan-day h3 { margin: 12px 0 6px; font-size: var(--t-s); color: var(--ink-soft); }
.plan-day .hint { margin: 0 0 8px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } 
.plan-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 8px; border-radius: 8px; background: var(--card); }
.plan-row > :first-child { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
.plan-what { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 10rem; } 
.plan-acts, .plan-all { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-all { margin-top: 8px; }

.shape-switch { grid-auto-columns: 6.75rem; }
@media (max-width: 899px) { .shape-switch { grid-auto-columns: 5.75rem; } }

.shape-switch { padding: 0; border: 0; background: none; }
.shape-switch a { padding: 5px 8px; border-radius: var(--r-m); font-size: var(--t-s); color: var(--ink-soft); text-align: center; text-decoration: none; }
.shape-switch a:hover { background: var(--hover); color: var(--ink); }
.shape-switch a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sap); font-weight: 600; }

.shape-switch, .agenda-tabs { position: relative; }
:is(.shape-switch, .agenda-tabs) .seg-pill { position: absolute; left: 0; top: 0;  border-radius: 0; pointer-events: none;
  background: none; box-shadow: inset 0 -2px 0 var(--sap); }
:is(.shape-switch, .agenda-tabs).has-pill > a[aria-current="page"] { background: none; box-shadow: none; }
:is(.shape-switch, .agenda-tabs) > a { position: relative; z-index: 1; }
.board { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 12px; }
.board-col { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--radius-root); padding: 10px; min-height: 120px; display: grid; gap: 8px; align-content: start; }
.board-col.drop { border-color: var(--sap); box-shadow: inset 0 0 0 1px var(--sap); }



body > .drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; } 
.drag-ghost {
  pointer-events: none; cursor: var(--cursor-grabbing);
  background: var(--card); border-color: var(--bark);
  box-shadow: 0 2px 4px rgba(28, 35, 30, .12), 0 14px 28px -8px rgba(28, 35, 30, .4);
  transition: rotate .22s cubic-bezier(.34, 1.56, .64, 1), scale .22s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
  will-change: transform;
}
.drag-ghost.moving { rotate: 4deg; scale: 1.02; opacity: .9; }

.drag-ghost.carries-many { overflow: visible; box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 var(--bark), 8px 8px 0 -1px var(--card), 8px 8px 0 0 var(--bark), 0 14px 28px -8px rgba(28, 35, 30, .4); } 
.drag-count {
  position: absolute; inset-block-start: -10px; inset-inline-end: -10px; z-index: 1;
  min-width: 24px; height: 24px; padding-inline: 7px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sap); color: var(--card); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
@media (forced-colors: active) { .drag-count { border: 1px solid CanvasText; } }
.drag-ghost.settling {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), rotate .2s ease-out, scale .2s ease-out, opacity .2s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(28, 35, 30, .1);
}
.drag-source { background: color-mix(in srgb, var(--ink) 9%, transparent) !important; border-color: transparent !important; box-shadow: none !important; }
.drag-source > * { visibility: hidden; }
.drag-landing { visibility: hidden; }
.carrying, .carrying * { cursor: var(--cursor-grabbing) !important; user-select: none; -webkit-user-select: none; }

.drop-gap { list-style: none; pointer-events: auto; }
.gap-slot {
  max-width: 100%; border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: opacity .15s var(--ease);
}
.drop-gap.idle .gap-slot { opacity: 0; }
.board-col:has(> .drop-gap) > .board-empty { display: none; }
.has-bg .gap-slot { background: color-mix(in srgb, var(--card) 45%, transparent); }
@media (forced-colors: active) { .gap-slot { border: 2px dashed CanvasText; } }
.drop-line {
  position: fixed; left: 0; top: 0; z-index: 999;  height: 3px; border-radius: 2px;
  background: var(--sap); pointer-events: none;
}
.drop-line.refused { background: var(--danger); }
.tree .card.drop-inside { outline: 2px solid var(--sap); outline-offset: -2px; background: var(--sap-wash); }
.tree .card.drop-invalid { outline: 2px solid var(--danger); outline-offset: -2px; }
@media (pointer: coarse) {
  .tree .card, .board-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .tree .card textarea { -webkit-user-select: text; user-select: text; } 
}
@media (prefers-reduced-motion: reduce) { .drag-ghost, .drag-ghost.settling { transition: none; } .drag-ghost.moving { rotate: none; scale: none; } }

.drag-ghost.into-place { opacity: 0; }
html.carrying .places li[hidden]:has(> a[data-place="archive"], > a[data-place="trash"]), html.carrying #places-sep-end[hidden] { display: list-item !important; } 
.carrying .drop-place { background: var(--sap-wash) !important; box-shadow: inset 0 0 0 2px var(--sap); color: var(--ink); }
.carrying .drop-place .nav-icon { color: var(--sap); }
.carrying .drop-refused { box-shadow: inset 0 0 0 2px var(--danger); }
.place-note {
  position: fixed; left: 0; top: 0; z-index: 1001; pointer-events: none; max-width: 260px; 
  padding: 5px 10px; border-radius: 7px; font-size: var(--t-xs); font-weight: 600;
  background: var(--sap); color: var(--card); box-shadow: var(--lift);
}
.place-note.refused { background: var(--danger); }
@media (forced-colors: active) { .carrying .drop-place, .carrying .drop-refused { outline: 2px solid Highlight; } }
.board-col h2 { font-size: var(--t-s); margin: 0; display: flex; align-items: center; gap: 8px; }
.board-count { font-weight: 400; color: var(--ink-soft); font-size: var(--t-xs); }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-card { background: var(--card); border: 1px solid transparent; border-radius: var(--radius-card); padding: 8px 10px; display: grid; gap: 6px; box-shadow: var(--e1); transition: box-shadow var(--d-fast) var(--ease); }
.board-card:hover { box-shadow: var(--e2); }

.board-card { content-visibility: auto; contain-intrinsic-size: auto 96px; overflow-clip-margin: 12px; }
.board-more { justify-self: start; margin-top: 6px; }
.board-card[draggable="true"] { cursor: var(--cursor-grab); }
.board-card.selected { border-color: var(--sap); }

.board-card.age-1 { opacity: .9; }
.board-card.age-2 { opacity: .78; }
.board-card.age-3 { opacity: .66; }
.board-card:is(.age-1, .age-2, .age-3):is(:hover, :focus-within, .selected) { opacity: 1; }
.board-card:is(.age-1, .age-2, .age-3) { transition: box-shadow var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.board-age-note { font-style: italic; }
.board-age[aria-pressed="true"] { color: var(--sap); }
.board-head { display: flex; align-items: flex-start; gap: 4px; margin-inline-start: -6px; }
.board-head .status { flex: none; margin-top: -2px; }
.board-title { all: unset; cursor: var(--cursor-act); font-weight: 500; overflow-wrap: anywhere; padding-top: 2px; min-height: 24px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } 
.board-title:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; border-radius: 4px; }
.board-progress { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.board-progress .bar { width: 40px; }
.board-where { flex: 1 1 0; min-width: 4em; contain: inline-size; overflow: hidden; display: flex; white-space: nowrap; } 

.board-where > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board-where > .where-top { flex: 0 1 auto; }
.board-where > .where-sep { flex: none; white-space: pre; }
.board-where > .where-parent { flex: none; max-width: calc(100% - 5em); }
.board-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-soft); }
.board-move { margin-inline-start: auto; padding: 2px 8px; font-size: var(--t-xs); }
.board-empty { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); }
.board-add { justify-self: start; }
.board-add-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--bark); border-radius: 8px; background: var(--card); color: var(--ink); }
.board-add-input:focus-visible { outline: none; border-color: var(--sap); box-shadow: 0 0 0 1px var(--sap); }
select.repeat-select { padding: 4px 8px; border: 1px solid var(--bark); border-radius: 8px; background: var(--card); color: var(--ink); }

.board-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.board-opts { display: none; }

@media (max-width: 899px) {
  .board-opts { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; order: 1; }
  .board-opts svg { width: 16px; height: 16px; }
  .board-bar > .board-summary { order: 0; flex: 1 1 100%; }
  .view:not(.opts-open) :is(.board-bar > .board-mode, .board-bar > .board-age, .board-filters) { display: none; }
  .view.opts-open .board-bar > :is(.board-mode, .board-age) { order: 2; }
}

.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.board-filters .dropdown { max-width: 16rem; }
.board-filters .dropdown-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-no-match { display: grid; justify-items: start; gap: 10px; padding: 24px 0; color: var(--ink-soft); }
.board-summary { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--t-s); color: var(--ink-soft); }
.board-summary p { margin: 0; }
.board-summary strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.board-summary .bar.wide { width: 96px; flex: none; }
.board-summary.has-overdue p { color: var(--ink); }


.board-lists { grid-auto-columns: 272px; align-items: start; }
.board-lane { padding: 8px; gap: 6px; max-height: calc(100dvh - 210px); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--lane); border-color: transparent; }
.board-lane .board-list { overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.board-lane .board-empty { padding: 4px 6px; }
.lane-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lane-head h2 { flex: 1; min-width: 0; }

.over-limit .lane-head .board-count { color: var(--amber-text); font-weight: 600; }
.lane-name { all: unset; cursor: var(--cursor-act); padding: 4px 6px; border-radius: 6px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lane-name:hover { background: var(--hover); }
.lane-name:focus-visible { outline: 2px solid var(--sap); outline-offset: 0; }
.lane-menu { flex: none; }
.lane-new { background: none; border: 1px dashed var(--bark); min-height: 0; max-height: none; grid-template-rows: auto; }
.lane-new .board-add { justify-self: stretch; text-align: start; }
.lane-starter { justify-self: start; }
.board-add-box { display: grid; gap: 6px; }
.board-add-acts { display: flex; gap: 6px; }
.board-card.is-done .board-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.board-card .chips { flex-wrap: wrap; overflow: visible; }
.board-has-notes { display: inline-flex; }
.board-has-notes svg { width: 14px; height: 14px; }



.view.is-grid > :not(.view-top) { max-width: 1400px; }
.view.is-grid .crumb-title { font-size: var(--t-l); }

@media (min-width: 900px) { .view:is(.is-grid, .is-board) .crumb-title { font-size: var(--t-xl); } }
.grid-empty { margin: var(--s-2) 0; max-width: 60ch; }
.grid { --gap: 12px; position: relative; list-style: none; margin: 0; padding: 0; }
.grid-tile { position: absolute; top: 0; inset-inline-start: calc(var(--col, 0) * ((100% - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1) + var(--gap)));
  width: calc((100% - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1)); box-sizing: border-box;
  display: grid; gap: var(--s-2); padding: 10px 12px 4px; background: var(--card); border: 1px solid var(--bark); border-radius: var(--r-m);
  transition: box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.grid-tile:hover { box-shadow: var(--e2); border-color: transparent; } 
.grid:not(.laid) .grid-tile { visibility: hidden; } 
.grid-tile.selected { border-color: var(--sap); box-shadow: 0 0 0 1px var(--sap); }
.grid-tile.has-cover { --cover-band: 8px; padding-top: calc(10px + var(--cover-band)); }
.grid-tile.has-cover.cover-full { --cover-band: 0px; padding-top: 10px; }
.tile-head { display: flex; align-items: flex-start; gap: 2px; margin-inline-start: -6px; }
.tile-head .status { flex: none; margin-top: -2px; }

.grid-tile.has-cover > :is(.tile-head, .tile-foot) { --mark: color-mix(in srgb, var(--cv) 70%, var(--ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grid-tile.has-cover > :is(.tile-head, .tile-foot) { --mark: var(--cv); } }
:root[data-theme="dark"] .grid-tile.has-cover > :is(.tile-head, .tile-foot) { --mark: var(--cv); }
.grid-tile.has-cover > .tile-foot .leaf-mark { color: var(--mark); }
.tile-title { all: unset; flex: 1; min-width: 0; cursor: var(--cursor-act); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; padding: 2px 0 0; padding-inline-start: 4px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tile-title:focus-visible, .item-title:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; border-radius: 4px; }
.grid-tile.is-done > .tile-head .tile-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.tile-notes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--t-s); line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } 
.tile-items { list-style: none; margin: 0; margin-inline-start: -6px; padding: 0; display: grid; }

.tile-checks { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--t-s); }
.tile-checks label { display: flex; align-items: flex-start; gap: 8px; padding-block: 4px; cursor: var(--cursor-act); }
.tile-checks input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--sap); cursor: inherit; }
.tile-checks span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tile-checks .done span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.tile-checks-more { padding-block: 2px; font-size: var(--t-xs); color: var(--ink-soft); }
.tile-item { display: flex; align-items: center; gap: 2px; min-height: 32px; }
.tile-item .status { flex: none; }

.item-title { all: unset; flex: 1; min-width: 0; cursor: var(--cursor-act); font-size: var(--t-s); line-height: 1.35; border-block: 4px solid transparent; padding-inline: 2px 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tile-item.is-done .item-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.tile-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-soft); }
.tile-chips .chips { flex-wrap: wrap; overflow: visible; }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); min-height: 36px; margin: 0 -6px; font-size: var(--t-xs); color: var(--ink-soft); }
.tile-open { padding: 4px 8px; font-size: var(--t-xs); }
.tile-progress { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tile-progress .bar { width: 36px; }
.tile-menu { margin-inline-start: auto; }
.tile-head .tile-menu { flex: none; margin-top: -4px; margin-inline-end: -6px; } 
@media (pointer: coarse) { 
  .grid-tile .status { width: 40px; height: 40px; }
  .tile-head .status { margin-top: 0; }
  .tile-title { box-sizing: border-box; min-height: 40px; padding-block: 9px; }
  .tile-item { min-height: 40px; }
  .tile-checks label { box-sizing: border-box; min-height: 40px; align-items: center; padding-block: 6px; }
  .tile-checks input { margin: 0; }
  .item-title { box-sizing: border-box; min-height: 40px; border-block-width: 10px; }
  .tile-head { margin-inline-start: -10px; }
  .tile-items { margin-inline-start: -10px; }
  .tile-foot .icon-btn, .tile-open { min-width: 40px; min-height: 40px; }
}
@media (max-width: 640px) {
  .grid { --gap: 8px; }
  .grid-tile { padding: 8px 10px 2px; }
  .tile-progress .bar { display: none; } 
}
@media (forced-colors: active) { .grid-tile.selected { outline: 2px solid Highlight; } }


.view.is-timeline .crumb-title { font-size: var(--t-l); }
@media (min-width: 900px) { .view.is-timeline .crumb-title { font-size: var(--t-xl); } }
.wk-hint { margin: var(--s-2) 0; max-width: 60ch; }
.week { --hour: 48px; --gutter: 56px; display: grid; gap: var(--s-3); }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-steps { display: flex; gap: 2px; }
.wk-step svg { width: 18px; height: 18px; rotate: 90deg; }
.wk-step.is-on svg { rotate: -90deg; }
.wk-step:dir(rtl) svg { rotate: -90deg; }
.wk-step.is-on:dir(rtl) svg { rotate: 90deg; }

.wk-range { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: auto; padding: 4px 8px; border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--t-l); font-weight: 600; cursor: var(--cursor-act); }
.wk-range:hover { background: var(--hover); }
.wk-range:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; }
.wk-range svg { width: 16px; height: 16px; color: var(--ink-soft); }
.wk-span { grid-template-columns: repeat(4, auto); }
.wk-span button { justify-content: center; }
.wk-head, .wk-allday, .wk-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr)); }
.wk-zone { align-self: end; padding-block: 0 6px; padding-inline: 0 8px; font-size: var(--t-xs); color: var(--ink-soft); text-align: end; white-space: nowrap; }
.wk-day { display: grid; justify-items: center; gap: 2px; padding-block: 4px 6px; }
.wk-weekday { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.wk-date { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--t-l); font-variant-numeric: tabular-nums; }
button.wk-date { cursor: var(--cursor-act); }
button.wk-date:hover { background: var(--hover); }
button.wk-date:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; }
.wk-day.is-past .wk-date { color: var(--ink-soft); }
.wk-day.is-today .wk-weekday { color: var(--sap); }
.wk-day.is-today .wk-date, .wk-day.is-today button.wk-date:hover { background: var(--sap); color: var(--paper); font-weight: 600; }
.wk-allday { border-bottom: 1px solid var(--bark); }
.wk-allday .wk-zone { align-self: center; padding-block: 4px; }
.wk-allday.is-empty { min-height: 8px; }
.wk-chips { list-style: none; margin: 0; padding: 2px 2px 4px; display: grid; gap: 2px; align-content: start; min-width: 0; border-inline-start: 1px solid var(--bark); }
.wk-chip { --tint: var(--sap); display: flex; min-width: 0; border-radius: 5px; font-size: var(--t-xs); background: color-mix(in srgb, var(--tint) 22%, var(--paper)); }
.wk-chip.is-event { --tint: var(--ink-soft); padding: 3px 6px; }
.wk-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chip .wk-open, .mo-chip .wk-open { flex-direction: row; align-items: center; gap: 4px; padding: 3px 6px; }
.wk-chip .wk-open svg, .mo-chip .wk-open svg { flex: none; width: 13px; height: 13px; }
.wk-chip:has(.wk-open:hover) { background: color-mix(in srgb, var(--tint) 34%, var(--paper)); }

@media (pointer: coarse) {
  .wk-date { width: 2.5rem; height: 2.5rem; }
  .wk-chip .wk-open { min-height: 40px; padding-block: 0; }
}

.wk-allday.can-add .wk-chips { cursor: var(--cursor-act); }
.wk-chips.is-adding, .mo-day.is-adding { background: var(--sap-wash); }

.wk-more { all: unset; box-sizing: border-box; display: block; padding: 2px 6px; border-radius: 5px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); cursor: var(--cursor-act); }
.wk-more:hover { background: var(--hover); color: var(--ink); }
.wk-more:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
.wk-zone { display: grid; justify-items: end; gap: 2px; }
.wk-fold { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-m); background: transparent; color: var(--ink-soft); cursor: var(--cursor-act); }
.wk-fold:hover { background: var(--hover); }
.wk-fold:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.wk-fold svg { width: 16px; height: 16px; rotate: 180deg; }
.wk-scroll { max-height: max(320px, calc(100dvh - 300px)); overflow-y: auto; overscroll-behavior-y: contain; outline: none; }
.wk-scroll:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; }
.wk-body { position: relative; height: calc(var(--hour) * 24); }
.wk-hours { position: relative; }
.wk-hour { position: absolute; inset-inline-end: 8px; top: calc(var(--hour) * var(--at)); translate: 0 -50%; font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; }
.wk-col { position: relative; min-width: 0; border-inline-start: 1px solid var(--bark);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--bark) calc(var(--hour) - 1px) var(--hour)); }
.wk-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.wk-item { --tint: var(--sap); }
.wk-item.has-tint, .wk-chip.has-tint { --tint: var(--cv); }
.wk-item.has-label, .wk-chip.has-label { --tint: var(--lab); }
.wk-item { position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
  top: calc(var(--top) * var(--hour) / 60 + 1px); height: max(20px, calc(var(--len) * var(--hour) / 60 - 2px));
  
  inset-inline-start: calc((100% - 6px) * var(--lane) / var(--lanes) + 2px);
  width: calc((100% - 6px) / var(--lanes) - 2px);
  box-shadow: 0 0 0 1px var(--paper);
  border-radius: 6px; background: color-mix(in srgb, var(--tint) 28%, var(--paper));
  font-size: var(--t-xs); line-height: 1.3; }
.wk-item.is-event { --tint: var(--ink-soft); padding: 2px 6px; background: color-mix(in srgb, var(--ink-soft) 14%, var(--paper)); }

.wk-item.is-due .wk-title::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }

.wk-grip { position: absolute; inset-inline: 0; bottom: 0; height: 6px; cursor: ns-resize;  }
@media (pointer: coarse) { .wk-grip { display: none; } }
.week .is-dragging, .week .is-dragging * { user-select: none; cursor: var(--cursor-grabbing); }
.wk-item.is-lifted { z-index: 10; box-shadow: var(--e2); opacity: .92; }
.wk-open { all: unset; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; padding: 2px 6px; cursor: var(--cursor-act); }
.wk-open:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; border-radius: 5px; }
.wk-title { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; color: var(--ink); }
.wk-title > .wk-text, .wk-item.is-event .wk-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-title svg { flex: none; width: 14px; height: 14px; }
.wk-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-item.is-short .wk-open, .wk-item.is-short.is-event { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; }
.wk-item.is-short .wk-title { flex: 0 1 auto; }
.wk-item.is-past { opacity: .75; }
.wk-item.is-done, .wk-chip.is-done { opacity: .55; }
.wk-item.is-done .wk-text, .wk-chip.is-done .wk-chip-text { text-decoration: line-through; }
.wk-item.selected, .wk-chip.selected { box-shadow: 0 0 0 2px var(--sap); }
.wk-item:has(.wk-open:hover) { background: color-mix(in srgb, var(--tint) 30%, var(--paper)); }

.wk-col.can-add { cursor: var(--cursor-act); }
.wk-ghost { position: absolute; z-index: 8; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; pointer-events: none;
  top: calc(var(--top) * var(--hour) / 60 + 1px); height: max(20px, calc(var(--len) * var(--hour) / 60 - 2px)); inset-inline: 2px 4px;
  padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--sap) 35%, var(--paper)); box-shadow: var(--e2);
  font-size: var(--t-xs); line-height: 1.3; }
@media (forced-colors: active) { .wk-ghost { border: 1px solid Highlight; } }
.wk-add { position: absolute; z-index: 8; top: calc(var(--top) * var(--hour) / 60 + 1px); inset-inline: 2px 4px; height: calc(var(--hour) / 2 - 2px);
  border: 0; border-radius: 6px; background: var(--sap-wash); color: var(--ink); font: inherit; font-size: var(--t-xs); cursor: var(--cursor-act); opacity: 0; }
.wk-add:not(:focus-visible) { clip-path: inset(50%); }
.wk-add:focus-visible { opacity: 1; outline: 2px solid var(--sap); outline-offset: -2px; }
.wk-quick { width: min(360px, calc(100vw - 32px)); }
.wk-quick-title { font: inherit; font-size: var(--t-l); padding-block: 6px; padding-inline: 0; border: 0; border-block-end: 2px solid var(--bark); background: transparent; color: var(--ink); outline: none; }
.wk-quick-title:focus { border-block-end-color: var(--sap); }
.wk-quick-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--ink-soft); }
.wk-quick-time { font: inherit; color: var(--ink); background: var(--surface-1); border: 0; border-radius: var(--r-s); padding: 4px 6px; }
.wk-quick .cal-foot { justify-content: flex-end; gap: 8px; }
.wk-now { position: absolute; z-index: 9; inset-inline: -1px 0; top: calc(var(--top) * var(--hour) / 60); height: 2px; background: var(--lab-clay); pointer-events: none; }
.wk-now::before { content: ""; position: absolute; inset-inline-start: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--lab-clay); }

.wk-now-time { position: absolute; inset-inline-end: 4px; top: calc(var(--top) * var(--hour) / 60); translate: 0 -50%; padding: 0 3px; border-radius: 4px;
  background: var(--lab-clay); color: var(--paper); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-hour.is-near-now { visibility: hidden; }

.wk-peek { width: min(340px, calc(100vw - 32px)); }
.wk-peek p { margin: 0; }
.wk-peek-when { font-size: var(--t-s); color: var(--ink); }
.wk-peek-path, .wk-peek-from { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.wk-peek-do { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-peek-do.is-more { padding-block-start: var(--s-2); border-block-start: 1px solid var(--bark); }

.month { display: grid; grid-template-rows: auto 1fr; border-block-start: 1px solid var(--bark); }
.mo-head, .mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo-head span { padding-block: 6px; text-align: center; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mo-grid { grid-auto-rows: minmax(104px, calc((100dvh - 320px) / var(--rows))); }
.mo-day { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 2px; border-inline-start: 1px solid var(--bark); border-block-end: 1px solid var(--bark); }
.mo-day:nth-child(7n + 1) { border-inline-start: 0; }
.mo-day.can-add { cursor: var(--cursor-act); }
.mo-date { align-self: center; min-width: 1.75rem; height: 1.75rem; padding: 0 6px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; cursor: var(--cursor-act); }
.mo-date:hover { background: var(--hover); }
.mo-date:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.mo-day.is-other .mo-date, .mo-day.is-past .mo-date { color: var(--ink-soft); }
.mo-day.is-other { background: var(--surface-1); }
.mo-day.is-today .mo-date { background: var(--sap); color: var(--paper); }
.mo-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.mo-chip { --tint: var(--sap); display: flex; min-width: 0; border-radius: 5px; font-size: var(--t-xs); background: color-mix(in srgb, var(--tint) 22%, var(--paper)); }
.mo-chip.has-tint { --tint: var(--cv); }
.mo-chip.has-label { --tint: var(--lab); }

.mo-chip.is-timed { background: transparent; }
.mo-chip.is-timed .wk-open::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
.mo-chip:has(.wk-open:hover) { background: color-mix(in srgb, var(--tint) 34%, var(--paper)); }
.mo-chip.is-event { --tint: var(--ink-soft); }
.mo-chip.is-done { opacity: .55; }
.mo-chip.is-done .wk-chip-text { text-decoration: line-through; }
.mo-chip.selected { box-shadow: 0 0 0 2px var(--sap); }
.mo-time { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tl-undated summary { cursor: var(--cursor-act); color: var(--ink-soft); font-size: var(--t-s); padding-block: 6px; }
.tl-undated-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-title { all: unset; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: var(--cursor-act); padding-block: 6px; padding-inline-start: 4px;
  white-space: nowrap; overflow: hidden; }

.tl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-title:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; border-radius: var(--r-s); }
@media (max-width: 640px) {
  .week { --gutter: 44px; --hour: 44px; }
  .wk-range { font-size: var(--t-m); }
  .wk-span { order: 5; width: 100%; grid-template-columns: repeat(4, 1fr); }
  .wk-date { width: 2rem; height: 2rem; font-size: var(--t-m); }
  
  .mo-grid { grid-auto-rows: minmax(64px, auto); }
  .mo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .mo-chip, .mo-chip.is-timed { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
  .mo-chip .wk-open { position: relative; padding: 0; }
  .mo-chip .wk-open > *, .mo-chip.is-timed .wk-open::before { display: none; }
  .mo-chip .wk-open::after { content: ""; position: absolute; inset: -8px; }
  .mo-chips .wk-more { padding: 0 2px; font-size: 10px;  }
}
@media (pointer: coarse) { .tl-title { box-sizing: border-box; min-height: 44px; } .wk-step { min-width: 44px; min-height: 44px; } }
@media (forced-colors: active) { .wk-item, .wk-chip, .mo-chip { border: 1px solid CanvasText; } .wk-item.selected { outline: 2px solid Highlight; } .wk-now, .wk-now-time { background: Highlight; } }
.board-lane.drop { border-color: var(--sap); }
@media (max-width: 899px) {
  .board, .board-lists { grid-auto-columns: min(85%, 320px); scroll-snap-type: x mandatory;  margin: 0 -16px; padding: 0 16px 12px; scroll-padding: 0 16px; }
  .board-lane { max-height: calc(100dvh - 250px); }
  .board-bar { gap: 10px; }
  .board-col { scroll-snap-align: start; scroll-snap-stop: always; } 
  
  .board, .board-pager { touch-action: pan-y pinch-zoom; }
  
  .board-pager { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 2px 16px; }
  .board-pager::-webkit-scrollbar { display: none; }
  .pager-item { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 70%; padding: 0 12px; border: 1px solid var(--bark); border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: var(--t-s); cursor: var(--cursor-act); }
  .pager-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pager-item[aria-current="true"] { background: var(--sap-wash); border-color: color-mix(in srgb, var(--sap) 45%, transparent); color: var(--ink); font-weight: 600; }
  .pager-item:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; }
}
@media (min-width: 900px) { .board-pager { display: none; } }
@media (forced-colors: active) { .pager-item[aria-current="true"] { outline: 2px solid Highlight; } }
.ccard .meta { overflow: hidden; }
.ccard .meta .chips { flex: 0 0 auto; max-width: 62%; }
.ccard .meta .bar { width: auto; flex: 0 1 56px; min-width: 0; } 
.ccard .meta .chip { min-width: 0; flex-shrink: 1; }
.panel-labels .chips { flex-wrap: wrap; overflow: visible; }
.panel-labels .chip { max-width: 100%; }
.labels-section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.labels-section h3 { flex-basis: 100%; margin: 0; }

.ccard.dimmed, .card.dimmed { background: transparent; border-color: color-mix(in srgb, var(--bark) 60%, transparent); }
.ccard.dimmed:hover, .ccard.dimmed.selected, .card.dimmed.selected { background: var(--card); }
.ccard.dimmed.selected, .card.dimmed.selected { border-color: var(--sap); }


.view-top { container-type: inline-size; }
.tool-icon svg { width: 16px; height: 16px; flex: none; }
@container (max-width: 560px) {
  .view-head .tool-icon { padding-inline: 9px; }
  .view-head .tool-icon .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .view-head .tool-more { display: none; }
}

@container (max-width: 760px) {
  .view-head .shape-switch { grid-auto-columns: 44px; }
  .view-head .shape-switch a { padding: 0; min-height: 37px; }
  .view-head .shape-switch a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .view-head .shape-switch a > svg { width: 18px; height: 18px; }
}
.view-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; flex: none; max-width: 100%; margin-inline-start: auto; } 
.filter-btn.on { border-color: var(--sap); color: var(--sap); font-weight: 600; }

.label-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lab); }
.label-dot.big { width: 16px; height: 16px; }




dialog.popover { width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); padding: 0 14px 14px; border-radius: 12px; }
dialog.popover.anchored { position: fixed; inset: auto; margin: 0; }
dialog.popover::backdrop { background: transparent; backdrop-filter: none; }
dialog.popover.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 88vh;
  border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  animation: sheet-in .28s var(--ease-out);
}
dialog.popover.sheet::backdrop { background: var(--overlay); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
.popover-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  margin: 0 -14px 6px; padding-block: 10px 6px; padding-inline: 14px 8px; background: var(--card);
}
.popover-head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-head .dialog-x { margin-inline-end: 0; }
.popover-body { display: grid; gap: 10px; }
.chev-left { transform: rotate(90deg); }
.chev-right { transform: rotate(-90deg); }
.chev-left:dir(rtl) { transform: rotate(-90deg); } 
.chev-right:dir(rtl) { transform: rotate(90deg); }
.danger-text, .btn.quiet.danger-text { color: var(--danger); }


.label-view { display: grid; gap: 8px; }
.label-search { width: 100%; box-sizing: border-box; }
.label-list { list-style: none; margin: 0; padding: 2px; display: grid; gap: 4px; max-height: min(320px, 50vh); overflow: auto; }
.label-row { display: flex; align-items: center; gap: 4px; }
.label-row[style*="--depth"] { padding-inline-start: calc(var(--depth) * var(--s-4)); } 
.label-bar {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 6px; background: var(--lab); color: var(--on-lab); font-size: var(--t-s); font-weight: 600; text-align: start;
}
.label-bar:hover:not(:disabled) { filter: brightness(1.08); }
.label-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.label-bar .label-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-bar .label-count { flex: none; margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.label-tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 4px; }
.label-tick svg { width: 14px; height: 14px; }
.label-bar.on .label-tick { background: var(--on-lab); color: var(--lab); border-color: var(--on-lab); }
.label-bar.big { flex: none; width: 100%; min-height: 38px; box-sizing: border-box; pointer-events: none; }
.label-empty { margin: 0; }
.label-make, .label-new { justify-self: stretch; text-align: start; }
.label-make { display: flex; align-items: center; gap: 8px; }
.label-edit-head { display: flex; align-items: center; gap: 6px; }
.label-edit-head h3 { margin: 0; font-size: var(--t-m); }
.label-preview { padding: 10px; border-radius: 8px; background: var(--paper); }
.label-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 4px; }
.label-swatch { position: relative; cursor: var(--cursor-act); }
.label-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: var(--cursor-act); }
.label-swatch span { display: grid; place-items: center; height: 32px; border-radius: 6px; background: var(--lab); color: var(--on-lab); }
.label-swatch span svg { width: 16px; height: 16px; visibility: hidden; }
.label-swatch input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--lab); }
.label-swatch input:checked + span svg { visibility: visible; }
.label-swatch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 4px; }
.label-edit .dialog-actions { justify-content: space-between; margin-top: 4px; }
.label-edit .dialog-actions .btn.primary { margin-inline-start: auto; }


dialog.calendar-pop { width: min(320px, calc(100vw - 16px)); }
dialog.calendar-pop.sheet { width: 100%; }
.cal-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.cal-quick .btn { display: grid; justify-items: center; gap: 0; padding: 5px 4px; font-size: var(--t-s); line-height: 1.25; }
.cal-quick .btn.on { border-color: var(--sap); box-shadow: inset 0 0 0 1px var(--sap); }
.cal-quick-day { font-size: var(--t-2xs); color: var(--ink-soft); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-month { margin: 0; font-size: var(--t-m); font-weight: 600; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { padding: 2px 0 6px; font-size: var(--t-2xs); font-weight: 600; color: var(--ink-soft); text-align: center; }
.cal-grid td { padding: 1px; text-align: center; }
.cal-day {
  width: 100%; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  font-size: var(--t-s); font-variant-numeric: tabular-nums;
}
.cal-day:hover:not(:disabled) { background: var(--hover); }
.cal-day.marked { position: relative; }
.cal-day.marked::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 5px; margin-inline: auto; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.cal-day.out { color: var(--ink-soft); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--sap); font-weight: 600; }
.cal-day.selected, .cal-day.selected:hover { background: var(--sap); color: var(--card); font-weight: 600; box-shadow: none; }
.cal-day:disabled { opacity: .35; cursor: var(--cursor); }
.cal-day:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.cal-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-time label { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 600; }
.cal-time-label { font-size: var(--t-s); font-weight: 600; margin-inline-end: auto; }

.time-btn { font-variant-numeric: tabular-nums; font-weight: 600; }
.time-btn > svg { color: var(--sap); }
.time-btn.is-empty { font-weight: 400; color: var(--ink-soft); }
.time-pop { width: 300px; }
.time-pop .popover-body { display: grid; gap: 10px; }
.time-said { margin: -4px 2px 0; min-height: 1.2em; }
.time-said:empty { display: none; }
.time-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.time-quick .btn { flex-direction: column; justify-content: center; gap: 1px; padding: 6px 4px; font-size: var(--t-xs); font-weight: 600; }
.time-quick .btn.on { border-color: var(--sap); background: var(--sap-wash); }
.time-quick-at { font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.time-list {
  position: relative; list-style: none; margin: 0; padding: 4px; height: 248px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--bark); border-radius: 10px; background: var(--paper);
  display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 2px;
}
.time-list li {
  display: grid; place-items: center; min-height: 34px; border-radius: 7px;
  font-size: var(--t-s); font-variant-numeric: tabular-nums; color: var(--ink-soft); cursor: var(--cursor-act); user-select: none;
}
.time-list li.on-hour { color: var(--ink); font-weight: 600; }
.time-list li:hover { background: var(--hover); color: var(--ink); }
.time-list li:focus { outline: 2px solid var(--sap); outline-offset: -2px; background: var(--hover); }
.time-list li[aria-selected="true"] { background: var(--sap); color: var(--card); font-weight: 600; }
@media (pointer: coarse) { .time-list li { min-height: 44px; } .time-list { height: 300px; } }
.cal-typed { display: grid; gap: 4px; }
.cal-typed input { width: 100%; box-sizing: border-box; }
.cal-said { margin: 0; }
.cal-said:empty { display: none; }
.cal-foot { display: flex; }
.date-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (pointer: coarse) { .cal-day { height: 44px; } }
.hint { color: var(--ink-soft); font-size: var(--t-s); }

.prompt-input { width: 100%; padding: 8px 10px; border: 1px solid var(--bark); border-radius: 8px; background: var(--paper); }
.prompt-input:focus-visible { outline: none; border-color: var(--sap); }
.prompt-label { display: grid; gap: 6px; font-size: var(--t-s); font-weight: 600; }

.mi-check { display: grid; place-items: center; color: var(--sap); padding-inline-start: 12px; }
.mi-check svg { width: 16px; height: 16px; }
.menu .menu-chip .mi-label:empty { display: none; }



.grove-switch {
  display: grid; width: 100%; margin: 0 0 12px; padding: 7px 10px; text-align: start;
  border: 0; border-radius: var(--r-l); background: var(--card); box-shadow: var(--e1);
}
.grove-switch:hover { box-shadow: var(--e2); }
.grove-label { font-size: var(--t-xs); color: var(--ink-soft); }
.grove-name { font-weight: 600; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grove-name::after { content: " ▾"; color: var(--ink-soft); font-weight: 400; }

.grove-mark { display: inline-grid; place-items: center; inline-size: 1.15em; margin-inline-end: .35em; vertical-align: -.15em; line-height: 1; }
.grove-mark svg { inline-size: 1.05em; block-size: 1.05em; }
.grove-mark .menu-emoji { font-size: 1em; }
.grove-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.grove-list li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; }
.grove-list li.active { background: var(--sap-wash); }
.grove-row-look { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } 
.grove-row-name { flex: 1; min-width: 0; display: grid; }
.grove-row-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grove-row-name span { font-size: var(--t-xs); color: var(--ink-soft); }

.grove-menu { min-width: 264px; }
.grove-menu button { grid-template-columns: 26px minmax(0, 1fr) auto; } 
.grove-menu .grove-picks button { min-height: 38px; }
.grove-menu .mi-label { text-wrap: pretty; }
.grove-menu .mi-icon:has(.grove-tile) { width: 26px; height: 26px; }
.grove-tile {
  display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: var(--r-s);
  background: var(--surface-2); color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; line-height: 1;
}
.grove-tile svg { width: 16px; height: 16px; }
.grove-tile .card-icon { margin: 0; }
.grove-tile .menu-emoji { font-size: 15px; }
.menu button.current .grove-tile, .grove-list li.active .grove-tile { background: var(--card); color: var(--ink); }
.grove-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.grove-pick .btn { width: 100%; justify-content: flex-start; gap: 10px; }
.grove-pick .grove-tile { flex: none; }



dialog.automations-dialog { width: min(640px, calc(100vw - 32px)); }
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rule { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--bark); border-radius: 9px; background: var(--card); }
.rule p { flex: 1; margin: 0; color: var(--ink); }
.rule.off p { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--bark); }
.switch { position: relative; width: 34px; height: 20px; flex: none; cursor: var(--cursor-act); }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: var(--cursor-act); }
.switch span { position: absolute; inset: 0; border-radius: 10px; background: var(--bark); transition: background .15s; }
.switch span::after { content: ""; position: absolute; inset-inline-start: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); transition: transform .22s var(--ease-out), scale var(--d-fast) var(--ease); }
.switch input:active:not(:disabled) + span::after { scale: 1.25 1; } 
.switch input:checked + span { background: var(--sap); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:checked + span:dir(rtl)::after { transform: translateX(-14px); } 
.switch input:focus-visible + span { outline: 2px solid var(--sap); outline-offset: 2px; }
.rule-form { display: grid; gap: 8px; }
.rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule-word { width: 44px; font-weight: 600; color: var(--ink-soft); }

.dropdown {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px; padding-block: 5px; padding-inline: 10px 8px;
  border: 1px solid var(--bark); border-radius: 9px; background: var(--card); font-size: var(--t-s); font-weight: 500; text-align: start;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.dropdown:hover { background: var(--hover); border-color: color-mix(in srgb, var(--bark) 50%, var(--ink-soft)); }
.dropdown[aria-expanded="true"] { border-color: var(--sap); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sap) 22%, transparent); }
.dropdown .mi-icon, .dropdown .mi-icon svg { width: 16px; height: 16px; }
.dropdown-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-chev { width: 14px; height: 14px; flex: none; color: var(--ink-soft); }


.choices { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--bark); border-radius: 10px; cursor: var(--cursor-act); transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), scale var(--d-fast) var(--ease); }
.choice:active { scale: .99; }
.choice:has(input:checked) { border-color: var(--sap); background: var(--sap-wash); }
.choice input { margin: 4px 0 0; accent-color: var(--sap); }
.choice > span { display: grid; }
.choice strong { font-weight: 600; }
.choice > span > span { font-size: var(--t-s); color: var(--ink-soft); }
.rule-arg { display: inline-flex; align-items: center; gap: 6px; }
.rule-preview { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: var(--t-s); }
.rule-actions { display: flex; justify-content: flex-end; }
.rule-actions.start { justify-content: flex-start; }
.rules-panel { display: grid; gap: var(--s-3); }
.rule p { min-width: 0; overflow-wrap: anywhere; }
.rule-buttons { display: flex; flex: none; gap: 2px; }


.sel-tip {
  position: absolute; left: 0; top: 0; z-index: 9; 
  display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px;
  background: var(--ink); color: var(--paper); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}


.board-hint {
  flex: none; margin: 0; display: flex; align-items: center; gap: 6px;
  padding-block: 4px; padding-inline: 28px 16px; border-top: 1px solid var(--bark);
  background: var(--card); font-size: var(--t-xs); color: var(--ink-soft);
}
.board-hint .icon-btn { width: 28px; height: 28px; flex: none; font-size: var(--t-m); }


.pref { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 16px; }
.pref .switch { margin-top: 2px; }
.pref p { margin: 0; }
.pref-name { font-weight: 600; color: var(--ink); }
.pref:has(.switch) .pref-name { cursor: var(--cursor-act); } 
.pref-help { font-size: var(--t-s); color: var(--ink-soft); }

.news-day p { margin: var(--s-3) 0 var(--s-1); }
.news-day ul { margin: 0; padding-inline-start: var(--s-4); }
.news-day li + li { margin-block-start: var(--s-1); }

.storage-bar { width: 100%; max-width: 360px; height: 6px; border-radius: var(--r-pill); margin-block: var(--s-2); }
.storage-bar > span { border-radius: var(--r-pill); }
.storage-bar.low > span { background: var(--danger); }
.storage-warn { color: var(--danger); font-weight: 600; }

.lang-list { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; display: grid; gap: 4px; }
.lang-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-m); cursor: var(--cursor-act); }
.lang-row:hover { background: color-mix(in srgb, var(--hover) 55%, transparent); }
.lang-row:has(.lang-input:checked) { background: var(--sap-wash); }
.lang-input { margin: 0; accent-color: var(--sap); }
.lang-name { font-weight: 600; color: var(--ink); }
.lang-note { grid-column: 2; }

.lang-coming { margin: 0 0 16px; padding: 0 12px; }
.lang-coming-head { margin: 0 0 8px; font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); }
.lang-coming-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); }

.pref-choice { justify-content: space-between; flex-wrap: wrap; }
.pref-choice > div { flex: 1 1 260px; }
.pref-choice.off .pref-name { color: var(--ink-soft); } 



.ccard { justify-content: flex-start; padding-block: 10px 9px; padding-inline: 12px 10px; border-radius: 12px; }
.ccard.root { border-radius: 14px; }
.ccard:not(.selected, .lifted, .drop-inside, .drop-invalid):hover { box-shadow: 0 1px 2px rgba(28, 35, 30, .08), 0 10px 22px -10px rgba(28, 35, 30, .28); }
.ccard .strips { display: flex; gap: 4px; flex: none; margin: 1px 0 7px; }
.ccard .strip { width: 34px; height: 6px; border-radius: 3px; background: var(--lab); }
.ccard-head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.ccard .title { padding: 1px 2px 0; }
.ccard .title-edit { margin-top: 0; }
.ccard .excerpt { margin: 2px 0 0; margin-inline-start: 2px; padding-inline-end: 14px; } 
.ccard .excerpt.short { -webkit-line-clamp: 1; }

.ccard .foot { display: flex; align-items: center; gap: 8px; min-height: 26px; margin: auto -4px -4px; padding: 6px 4px 4px; overflow: hidden; }
.ccard .foot .file-btn { flex: none; }
.ccard .foot > .status { flex: none; margin-inline-start: -2px; } 
.ccard .foot .due-chip { overflow: hidden; text-overflow: ellipsis; }
.ccard .foot .due-chip, .ccard .foot .later-chip { flex: 0 1 auto; min-width: 0; }
.ccard .foot .later-chip { overflow: hidden; }
.ccard .foot .bar { flex: 0 1 40px; min-width: 16px; }
.badge { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: var(--t-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.badge svg { width: 14px; height: 14px; }
.badge.complete { color: var(--sap); font-weight: 600; }
.ccard .foot .file-btn { margin-inline-start: auto; }
.ccard.is-done .title { color: var(--ink-soft); }


.assist-status { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--paper); color: var(--ink) !important; font-size: var(--t-s); }
.connect-how h4, .assist-log h4 { margin: 12px 0 4px; }
.code-row { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 10px; }
.code {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--bark); border-radius: 8px; background: var(--paper);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  direction: ltr; text-align: left; 
}
.connect-how details summary { cursor: var(--cursor-act); color: var(--ink-soft); font-size: var(--t-s); }
.assist-log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.assist-grants ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.assist-grants li { overflow-wrap: anywhere; }
.assist-grant-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }

.assist-perms-more { margin: 0 0 6px; }
.assist-perms-more summary { display: flex; align-items: center; min-height: 32px; cursor: var(--cursor-act); color: var(--ink-soft); font-size: var(--t-s); }
.assist-perms-more[open] summary { margin-block-end: 6px; }
.assist-perms .consent-check { margin: 2px 0 8px; }

dialog.scratchpad { width: min(560px, calc(100vw - 32px)); }
.scratch-text {
  display: block; width: 100%; min-height: 40vh; max-height: 60vh; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--bark); border-radius: var(--r-m); background: var(--paper); color: var(--ink); font: inherit; line-height: 1.55;
}
.scratch-text:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.scratch-hint { margin: 0 0 8px; }
@media (max-width: 640px) { .scratch-text { min-height: 50vh; } }

.about-text { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--bark); border-radius: var(--r-s); background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.purpose-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.purpose { display: grid; gap: 2px; text-align: start; padding: 10px 12px; min-height: 44px; border: 1px solid var(--bark); border-radius: var(--r-m); background: var(--card); color: var(--ink); font: inherit; cursor: var(--cursor-act); }
.purpose span { font-size: var(--t-xs); color: var(--ink-soft); }
.purpose[aria-checked="true"] { border-color: var(--sap); background: var(--sap-wash); box-shadow: inset 0 0 0 1px var(--sap); }
.grove-about h4 { margin: 14px 0 2px; }

.prompt-label + .prompt-label { margin-top: 14px; }
.prompt-opt { font-weight: 400; color: var(--ink-soft); }
.prompt-label .prompt-input { font-weight: 400; } 
.purpose-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.purpose-chip { padding: 5px 8px; border-radius: 999px; font-weight: 400; } 
.purpose-chip[aria-checked="true"] { border-color: var(--sap); background: var(--sap-wash); box-shadow: inset 0 0 0 1px var(--sap); } 
.prompt-label .pref-help { margin: 0; font-weight: 400; }
.grove-look { display: flex; flex-wrap: wrap; gap: 8px; } 
.grove-look-btn { gap: 8px; padding-block: 4px; padding-inline: 4px 12px; font-weight: 400; }
.bg-dot { flex: none; inline-size: 26px; block-size: 26px; border-radius: var(--r-s); background: linear-gradient(135deg, var(--g1), var(--g2)); }
.bg-dot.bg-none { background: var(--paper); box-shadow: inset 0 0 0 1px var(--bark); }
@media (forced-colors: active) { .purpose-chip[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }

.consent-perms { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.consent-perms legend { padding: 0; margin: 0 0 8px; font-weight: 600; }
.consent-perms .hint { margin: 4px 0 0; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px; cursor: var(--cursor-act); }
.consent-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sap); }

.consent-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m); border-inline-start: 3px solid var(--amber); background: var(--surface-2); }


.card { border-radius: var(--r-m); }
.card.paper { border-radius: var(--r-l); }
.card.paper:not(.selected):hover { box-shadow: var(--lift); }





@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
}

@media (pointer: coarse) {
  
  :where(.chev, .status, .icon-btn, .count-pill, .btn, .toast button, .seg button, .shape-switch a, .dropdown) { position: relative; }
  :where(.chev, .status, .icon-btn, .grow, .count-pill, .btn, .toast button, .seg button, .shape-switch a, .dropdown)::after {
    content: ""; position: absolute; left: 50%; top: 50%; 
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .chev::after { inset-inline: auto 0; width: 44px; transform: translateY(-50%); }
  
  .ccard .more::after { top: auto; bottom: 0; transform: translateX(-50%); }
  .grow::after { top: 0; left: auto; right: -20px; transform: none;  } 
  .ccard .foot { overflow: visible; } 
  .crumbs a, .crumbs button { min-width: 44px; padding: 12px 6px; margin: -10px 0; text-align: center; } 
  .crumbs { row-gap: 20px; } 
  .menu button, .menu .menu-chip { min-height: 44px; }
  .check { min-height: 44px; } 
  .canvas-btn { min-width: 44px; height: 44px; }
  .places a, .rail-settings { min-height: 44px; }
}

@media (forced-colors: active) {
  .menu .menu-chip.checked { outline: 2px solid Highlight; }
  .ccard.selected { outline: 2px solid Highlight; }
  :is(.places, .agenda-tabs, .shape-switch) [aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; } 
}



.later-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2xs); color: var(--ink-soft); white-space: nowrap; }
.later-chip svg { width: 13px; height: 13px; }

.without-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2xs); color: var(--ink-soft); white-space: nowrap; }
.without-chip svg { width: 13px; height: 13px; }
.ccard .foot .without-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }

.card:has(> .meta > .later-chip) > .title, .card:has(> .meta > .later-chip) > .excerpt,
.ccard:has(.foot > .later-chip) .title, .board-card:has(.later-chip) .board-title { color: var(--ink-soft); }
.later-box:empty { display: none; }
.later-group { margin: 18px 0 8px; }
.later-group summary { cursor: var(--cursor-act); font-size: var(--t-s); color: var(--ink-soft); padding: 6px 0; width: fit-content; }
.later-group summary:focus-visible { outline: 2px solid var(--sap); outline-offset: 2px; border-radius: 4px; }
.later-group .agenda-list { margin-top: 6px; }
.later-row { grid-template-columns: minmax(0, 1fr) auto auto; }


.kind-list { margin-top: var(--s-3); }
.kind-grid {
  list-style: none; margin: 0; margin-block-start: var(--s-3); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3);
}
.kind-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: var(--r-l);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--bark); cursor: var(--cursor-act);
}
.kind-tile .agenda-title { font-size: var(--t-m); }
.kind-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-s); color: var(--ink-soft); }
.kind-branches li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kind-branches li::before { content: '– '; }
.kind-more { font-size: var(--t-xs); color: var(--ink-soft); }
.kind-tile .agenda-where { margin-top: auto; font-size: var(--t-xs); }



.flow { max-width: 40rem; margin-inline: auto; } 
.flow-kicker { margin: 0; font-size: var(--t-s); color: var(--ink-soft); }
.flow-timer { display: inline-flex; align-items: center; gap: 6px; }
.flow-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sap); }
.flow-break { font-size: var(--t-s); color: var(--ink-soft); }
.on-break .flow-clock { color: var(--ink-soft); }
.flow-card { margin-top: 8px; padding: 22px 22px 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--bark), var(--shadow); }
.flow-count { margin: 0 0 6px; font-size: var(--t-s); color: var(--ink-soft); }
.flow-path { margin: 0 0 4px; font-size: var(--t-s); color: var(--ink-soft); overflow-wrap: anywhere; }
.flow-focus { margin: 6px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.flow-title { margin: 0 0 10px; font-size: var(--t-xl); line-height: 1.3; overflow-wrap: anywhere; }
.flow-title:focus, .flow-end h2:focus { outline: none; }
.flow-title:focus-visible, .flow-end h2:focus-visible { outline: 2px solid var(--sap); outline-offset: 4px; border-radius: 4px; }
.flow-notes { margin: 14px 0 4px; }
.flow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.flow-finished { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.flow-finished li { display: flex; align-items: center; gap: 6px; }
.flow-finished svg { width: 16px; height: 16px; color: var(--sap); }
@media (max-width: 600px) {
  .flow-card { padding: 16px; }
  .flow-actions .btn.primary { flex: 1 1 100%; justify-content: center; }
}



.archived-link { gap: 6px; color: var(--ink-soft); margin-inline-start: auto; }
.archive-list .what strong { overflow-wrap: anywhere; }
.archive-filter { min-height: 44px; font-size: var(--t-m); margin-block-end: 8px; } 
.archive-filter-status:empty { display: none; }
.archive-filter-status { margin: 0 0 8px; }
.archive-filter-none p { margin: 8px 0; color: var(--ink-soft); overflow-wrap: anywhere; }



.card-link { display: inline; padding: 0 6px; margin: 0 1px; border: 1px solid var(--bark); border-radius: 6px; background: var(--sap-wash); color: var(--ink); font: inherit; cursor: var(--cursor-act); overflow-wrap: anywhere; }
.card-link:hover { border-color: var(--sap); }
.card-link:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; }
.card-link.trashed { background: none; color: var(--ink-soft); }

.link-preview {
  position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; 
  inline-size: max-content; max-inline-size: min(320px, calc(100vw - 16px)); padding: 10px 12px;
  border-radius: var(--r-l); background: var(--card); color: var(--ink); box-shadow: var(--e3);
  font-size: var(--t-s); line-height: 1.4; animation: tip-in .12s var(--ease-out);
}
.link-preview > p { margin: 0; overflow-wrap: anywhere; }
.link-preview-path, .link-preview-meta { font-size: var(--t-xs); color: var(--ink-soft); }
.link-preview-title { font-weight: 600; }
.link-preview-notes { margin-block-start: 6px !important; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media print { .link-preview { display: none !important; } }
.card-link-note { font-size: var(--t-2xs); }
.card-link-at { color: var(--ink-soft); } 
s.card-link.missing { border-style: dashed; background: none; color: var(--ink-soft); cursor: var(--cursor); }
.link-pick { position: static; margin: 4px 0 0; }
.emoji-pick .capture-option { display: flex; align-items: center; gap: 10px; }
.emoji-pick .emoji-mark { font-size: 1.15em; }
.date-pick .capture-option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.date-pick-word { font-size: var(--t-xs); color: var(--ink-soft); }
.slash-pick .capture-option { display: flex; align-items: center; gap: 10px; }
.slash-pick .capture-option > svg { flex: none; width: 18px; height: 18px; color: var(--ink-soft); }
.slash-pick-key { margin-inline-start: auto; font-size: var(--t-xs); color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mentioned-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.named-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.link-map-area { position: relative; aspect-ratio: 5 / 3; max-block-size: 300px; inline-size: 100%; margin-block: 4px; background: var(--surface-1); border-radius: var(--r-m); }
.link-map-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.link-map-lines line { stroke: color-mix(in srgb, var(--ink-soft) 45%, transparent); stroke-width: 1.25; }
.link-map-lines line.both { stroke: var(--sap); }
.link-map-lines line.between { stroke-dasharray: 3 4; stroke: color-mix(in srgb, var(--ink-soft) 30%, transparent); }
.link-map-nodes { list-style: none; margin: 0; padding: 0; }
.link-map-node, .link-map-me { position: absolute; inset-inline-start: var(--x, 50%); inset-block-start: var(--y, 50%); transform: translate(-50%, -50%); }
.link-map-me { max-inline-size: 9em; padding: 4px 10px; border-radius: var(--r-m); background: var(--sap-wash); color: var(--ink); font-size: var(--t-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-map-card { display: block; max-inline-size: 7em; padding: 3px 8px; border: 0; border-radius: var(--r-m); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.link-map-card:hover { background: var(--hover); }
.link-map-node.both .link-map-card { color: var(--sap); }



.sort-card { margin-top: 8px; padding: 22px 22px 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--bark), var(--shadow); }
.sort-notes { margin: 0 0 6px; color: var(--ink-soft); overflow-wrap: anywhere; }
.sort-due { margin: 0 0 6px; color: var(--ink-soft); font-size: var(--t-s); }
.sort-h { margin: 16px 0 8px; font-size: var(--t-s); color: var(--ink-soft); }
.sort-homes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sort-home { width: 100%; min-height: 48px; justify-content: flex-start; gap: 10px; white-space: normal; text-align: start; }
.sort-home kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--bark); font-size: 12px; color: var(--ink-soft); }
.sort-home-text { display: grid; min-width: 0; }
.sort-home-text strong { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) { .sort-card { padding: 16px; } }



.tend-dot { display: inline-block; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 50%; background: var(--sap); vertical-align: middle; }
.tend-dot[hidden] { display: none; }
.tend-section .hint { margin-top: 0; }
.tend-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tend-done li { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.tend-done svg { width: 16px; height: 16px; color: var(--sap); flex: none; }
.tend-when { margin-inline-start: auto; color: var(--ink-soft); font-size: var(--t-xs); white-space: nowrap; }
.tend-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }

.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-inline-size: 360px; margin: 12px 0 4px; padding: 0; list-style: none; }
.week-bars li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-bar { display: flex; align-items: flex-end; inline-size: 100%; block-size: 56px; border-block-end: 2px solid var(--bark); }
.week-bar::before { content: ''; inline-size: 100%; block-size: var(--h); border-radius: var(--r-s) var(--r-s) 0 0; background: color-mix(in srgb, var(--sap) 45%, var(--paper)); }
.week-bars .today .week-bar::before { background: var(--sap); }
.week-day { color: var(--ink-soft); font-size: var(--t-xs); }
.week-bars .today .week-day { color: var(--ink); font-weight: 600; }

.week-bars.picks { gap: 2px; }
.week-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; inline-size: 100%; padding: 4px 2px 6px; border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; cursor: var(--cursor-act); transition: background-color var(--d-fast) var(--ease); }
.week-n { min-block-size: 1.4em; color: var(--ink-soft); font-size: var(--t-xs); font-variant-numeric: tabular-nums; transition: color var(--d-fast) var(--ease), translate var(--d-base) var(--ease); }
.week-pick .week-bar::before { transform-origin: 50% 100%; transition: background-color var(--d-fast) var(--ease), scale var(--d-base) var(--ease); }
@media (hover: hover) {
  .week-pick:hover { background: color-mix(in srgb, var(--sap) 8%, transparent); }
  .week-pick:hover .week-bar::before { background: var(--sap); scale: 1 1.06; }
  .week-pick:hover .week-n { color: var(--ink); translate: 0 -2px; }
}
.week-pick[aria-pressed="true"] { background: color-mix(in srgb, var(--sap) 14%, transparent); }
.week-pick[aria-pressed="true"] .week-bar::before { background: var(--sap); }
.week-pick[aria-pressed="true"] :is(.week-n, .week-day) { color: var(--ink); font-weight: 600; }
.tend-day { max-inline-size: 560px; margin: 2px 0 10px; padding: 2px 12px 8px; border-radius: var(--r-m); background: color-mix(in srgb, var(--sap) 6%, var(--paper)); animation: rise var(--d-base) var(--ease-out); }
.tend-day .tend-sub { margin-block-start: 8px; }
@media (prefers-reduced-motion: reduce) {
  .week-pick, .week-n, .week-pick .week-bar::before { transition: none; }
  .week-pick:hover .week-bar::before, .week-pick:hover .week-n { scale: none; translate: none; }
  .tend-day { animation: none; }
}
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: start; cursor: var(--cursor-act); overflow-wrap: anywhere; }
.linkish:hover { text-decoration: underline; }

.more-page { max-width: 560px; }
.more-page .more-list { margin-bottom: var(--s-4); }
.more-list { display: grid; margin: 0 0 12px; border: 1px solid var(--bark); border-radius: 10px; background: var(--card); overflow: hidden; }
.more-row {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
  border: 0; border-top: 1px solid var(--bark); background: none; color: inherit;
  font-size: var(--t-m); text-align: start; text-decoration: none;
}
.more-row:first-child { border-top: 0; }
.more-row:hover, .more-row:active { background: var(--hover); }
.more-row > .nav-icon + span { flex: 1; }
.more-row .count { color: var(--ink-soft); font-size: var(--t-s); }
.more-row .more-value { color: var(--ink-soft); font-size: var(--t-s); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-row .tend-dot { margin: 0; }
.more-row .more-text { flex: 1; display: grid; gap: 1px; padding: 8px 0; min-width: 0; }
.more-row .more-sub { color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.35; }
.more-account .nav-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--sap-wash); color: var(--sap); } 
.more-account .more-text > span:first-child { font-weight: 600; overflow-wrap: anywhere; }


.place-intro { display: flex; align-items: center; gap: 4px; margin: -4px 0 12px; color: var(--ink-soft); font-size: var(--t-s); line-height: 1.4; max-width: 64ch; }
.place-intro > span { flex: 0 1 auto; }
.place-intro .icon-btn { flex: none; width: 32px; height: 32px; color: var(--ink-soft); }
.place-intro .icon-btn svg { width: 14px; height: 14px; }
.place-why { margin: -4px 0 12px; max-width: 64ch; } 
.place-why summary { margin-top: 0; }
.place-intro + .place-why { margin-top: -8px; }
.more-note { margin: 4px 2px 0; color: var(--ink-soft); font-size: var(--t-s); line-height: 1.5; }
@media (max-width: 899px) { .wide-only { display: none; } }
.tend .trash-item .what .linkish { display: block; font-weight: 500; }
.tend .trash-item .what span { display: block; }
.tend .trash-item .acts { flex-wrap: wrap; }




.card-icon { display: inline-flex; vertical-align: -0.16em; margin-right: .4em; color: var(--sap); } 
.card-icon.rtl { margin-right: 0; margin-left: .4em; }  
.card-icon svg { width: 1.08em; height: 1.08em; flex: none; }
.card-icon.tinted { color: color-mix(in srgb, var(--cv) 70%, var(--ink)); } 
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :where(.card-icon.tinted) { color: var(--cv); } } 
:root[data-theme="dark"] :where(.card-icon.tinted) { color: var(--cv); }
.is-done .card-icon { color: inherit; }
#panel .card-icon { margin: 0 0 0 2px; } 


dialog.icon-picker { width: min(440px, calc(100vw - 24px)); }
.icon-tabs { margin: 0 0 12px; }
.icon-tabs button { justify-content: center; }
.icon-search { width: 100%; }
.icon-said { margin: 4px 0 0; min-height: 0; font-size: var(--t-xs); }
.icon-said:empty { display: none; }
.icon-jumps { display: flex; gap: 2px; margin: 10px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--bark); overflow-x: auto; scrollbar-width: none; }
.icon-jumps[hidden] { display: none; }
.icon-jump { flex: 1 0 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font-size: 18px; cursor: var(--cursor-act); }
.icon-jump svg { width: 18px; height: 18px; }
.icon-jump:hover { background: var(--hover); color: var(--ink); }
.icon-jump.on { background: var(--sap-wash); color: var(--sap); box-shadow: inset 0 -2px 0 var(--sap); }
.icon-scroll { height: min(300px, 42vh); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; position: relative; }
.icon-group-name { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 2px 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); background: var(--card); }
.icon-recent { margin-bottom: 4px; }
.icon-recent .icon-group-name { position: static; padding-top: 0; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; margin-bottom: 6px; }
.icon-choice { aspect-ratio: 1; min-width: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; font-size: 22px; line-height: 1; color: var(--ink); cursor: var(--cursor-act); transition: background-color .12s var(--ease), transform .12s var(--ease); }
.icon-choice.drawn svg { width: 22px; height: 22px; }
.icon-choice:hover { background: var(--hover); transform: scale(1.08); }
.icon-choice.drawn:hover, .icon-choice.drawn:focus-visible { color: var(--sap); }
.icon-choice.current { box-shadow: inset 0 0 0 2px var(--sap); background: var(--sap-wash); color: var(--sap); }
.icon-peek { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--bark); color: var(--ink); font-weight: 600; }
.icon-peek-face { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--paper); font-size: 22px; color: var(--sap); }
.icon-peek-face svg { width: 22px; height: 22px; }
.icon-own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.icon-own input { width: 6em; margin-inline-start: 6px; font-size: 18px; }
.icon-own + .pref-help { margin: 6px 0 0; }
.icon-own + .pref-help.error-text { color: var(--danger); }
@media (pointer: coarse) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .icon-jump { flex-basis: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .icon-choice:hover { transform: none; } }


.cv-sage { --cv: #3F9C6D; } .cv-moss { --cv: #7A9A2C; } .cv-teal { --cv: #1E9A9F; } .cv-sky { --cv: #3B82D6; } .cv-slate { --cv: #64748B; }
.cv-plum { --cv: #9459B8; } .cv-rose { --cv: #D2577F; } .cv-clay { --cv: #D0683B; } .cv-amber { --cv: #DCA020; } .cv-sand { --cv: #BFA272; }
.cv-indigo { --cv: #5462C9; } .cv-berry { --cv: #B23E7E; } .cv-cocoa { --cv: #8B5E47; } 
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-sage { --cv: #6DBE95; } :root:not([data-theme="light"]) .cv-moss { --cv: #A8C25A; } :root:not([data-theme="light"]) .cv-teal { --cv: #4CC3C8; } :root:not([data-theme="light"]) .cv-sky { --cv: #7AAEEE; } :root:not([data-theme="light"]) .cv-slate { --cv: #94A3B8; }
  :root:not([data-theme="light"]) .cv-plum { --cv: #C08AE0; } :root:not([data-theme="light"]) .cv-rose { --cv: #EE8AAA; } :root:not([data-theme="light"]) .cv-clay { --cv: #EE946B; } :root:not([data-theme="light"]) .cv-amber { --cv: #F0C050; } :root:not([data-theme="light"]) .cv-sand { --cv: #D9C29A; }
  :root:not([data-theme="light"]) .cv-indigo { --cv: #98A2F0; } :root:not([data-theme="light"]) .cv-berry { --cv: #E07CB4; } :root:not([data-theme="light"]) .cv-cocoa { --cv: #C9997F; }
}

  :root[data-theme="dark"] .cv-sage { --cv: #6DBE95; } :root[data-theme="dark"] .cv-moss { --cv: #A8C25A; } :root[data-theme="dark"] .cv-teal { --cv: #4CC3C8; } :root[data-theme="dark"] .cv-sky { --cv: #7AAEEE; } :root[data-theme="dark"] .cv-slate { --cv: #94A3B8; }
  :root[data-theme="dark"] .cv-plum { --cv: #C08AE0; } :root[data-theme="dark"] .cv-rose { --cv: #EE8AAA; } :root[data-theme="dark"] .cv-clay { --cv: #EE946B; } :root[data-theme="dark"] .cv-amber { --cv: #F0C050; } :root[data-theme="dark"] .cv-sand { --cv: #D9C29A; }
  :root[data-theme="dark"] .cv-indigo { --cv: #98A2F0; } :root[data-theme="dark"] .cv-berry { --cv: #E07CB4; } :root[data-theme="dark"] .cv-cocoa { --cv: #C9997F; }

[class*="cv-x"] { --cv: var(--cvc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="cv-x"] { --cv: color-mix(in srgb, var(--cvc) 70%, #fff); } }
:root[data-theme="dark"] [class*="cv-x"] { --cv: color-mix(in srgb, var(--cvc) 70%, #fff); }
:root { --cover-mix: 24%; --cover-band: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cover-mix: 26%; }
}

:root[data-theme="dark"] { --cover-mix: 26%; }
.has-cover { background-image: linear-gradient(var(--cv), var(--cv)); background-repeat: no-repeat; background-size: 100% var(--cover-band); }
.has-cover.cover-full { background-color: color-mix(in srgb, var(--cv) var(--cover-mix), var(--card)); }
.card.has-cover { padding-top: calc(6px + var(--cover-band)); }
.card.paper.has-cover { padding-top: calc(12px + var(--cover-band)); }

.card:not(.paper).has-cover { padding-top: 6px; background-image: none; border-inline-start: 3px solid var(--cv); }
.card:not(.paper).has-cover.cover-full { background-color: transparent; }
.board-card.has-cover { --cover-band: 28px; padding-top: calc(8px + var(--cover-band)); }
.board-card.has-cover.cover-full { --cover-band: 0px; padding-top: 10px; }
.ccard.has-cover { --cover-band: 8px; }
.has-cover.is-done { background-image: linear-gradient(color-mix(in srgb, var(--cv) 45%, var(--card)), color-mix(in srgb, var(--cv) 45%, var(--card))); }

.has-cover.cover-full { --cover-band: 0px; background-image: none; }
@media (forced-colors: active) { .has-cover { background-image: none; border-top-width: 4px; } }


dialog.cover-pop { width: min(336px, calc(100vw - 16px)); }
.cover-head { margin: 12px 0 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.cover-head:first-child { margin-top: 4px; }
.cover-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cover-size { display: grid; gap: 6px; justify-items: center; padding: 8px; border: 1px solid var(--bark); border-radius: 10px; background: var(--card); font-size: var(--t-s); color: var(--ink); cursor: var(--cursor-act); }
.cover-size:hover { border-color: var(--ink-soft); }
.cover-size.on { border-color: var(--sap); box-shadow: inset 0 0 0 1px var(--sap); font-weight: 600; }
.cover-mini { position: relative; display: grid; gap: 5px; align-content: start; width: 100%; height: 54px; padding: 0 10px 8px; border-radius: 7px; border: 1px solid var(--bark); background: var(--card); overflow: hidden; }
.cover-mini.cv-none { --cv: var(--bark); }
.cover-mini-band { height: 16px; margin: 0 -10px 2px; background: var(--cv); }
.cover-mini.cover-full { background: color-mix(in srgb, var(--cv) var(--cover-mix), var(--card)); }
.cover-mini.cover-full .cover-mini-band { background: none; height: 6px; }
.cover-mini-line { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.cover-mini-line.short { width: 55%; }
.cover-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cover-swatch, .bg-tile { position: relative; display: grid; place-items: center; height: 36px; border: 0; border-radius: 8px; background: var(--cv); color: #fff; cursor: var(--cursor-act); transition: transform .12s var(--ease); }
.cover-swatch svg, .bg-tile svg { width: 18px; height: 18px; opacity: 0; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.cover-swatch.on svg, .bg-tile.on svg { opacity: 1; }
.cover-swatch.on, .bg-tile.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.cover-swatch:hover, .bg-tile:hover { transform: translateY(-1px); }
.cover-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.cover-foot .cover-remove[hidden] { display: none; }

.cover-pic { display: block; width: calc(100% + 20px); height: 112px; margin: -8px -10px 0; object-fit: cover; border-start-start-radius: inherit; border-start-end-radius: inherit; background: var(--surface-2); }
.grid-tile .cover-pic { width: calc(100% + 24px); height: 128px; margin: -10px -12px 0; }
.cover-pic[hidden] { display: none; }
.is-done > .cover-pic { opacity: .55; }
.panel-cover { display: block; width: 100%; height: 148px; margin: 4px 0 12px; border-radius: var(--r-m); padding: 0; border: 0; background: var(--surface-2); cursor: var(--cursor-act); overflow: hidden; }
.panel-cover[hidden] { display: none; }
.panel-cover:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
.panel-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cover-thumb { position: relative; display: grid; place-items: center; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2); color: #fff; cursor: var(--cursor-act); }
.cover-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-thumb svg { position: relative; width: 18px; height: 18px; opacity: 0; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)); }
.cover-thumb.on svg { opacity: 1; }
.cover-thumb.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.cover-upload { margin-top: 8px; }
.cover-thumbs + .cover-upload { margin-top: 10px; }
.cover-dot { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; border-radius: 3px; background: var(--cv); vertical-align: -1px; }
.bg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-tile { height: 44px; }
.bg-tile.bg-none { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--bark); }
.bg-tile.bg-none svg { filter: none; }
.bg-tile.bg-none.on { box-shadow: inset 0 0 0 1px var(--bark), 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }

.bg-add { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--bark); }
.bg-add svg { opacity: 1; filter: none; }
.bg-add:has(:focus-visible) { outline: 2px solid var(--sap); outline-offset: 2px; }
.bg-pick { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: inherit; }
.bg-pick:disabled { cursor: default; }
.bg-pop .hint { margin: 12px 0 0; font-size: var(--t-xs); }
@media (pointer: coarse) { .cover-swatch { height: 44px; } }


.bg-sage { --g1: #3F9C6D; --g2: #3F9C6D; } .bg-moss { --g1: #7A9A2C; --g2: #7A9A2C; } .bg-teal { --g1: #1E9A9F; --g2: #1E9A9F; }
.bg-sky { --g1: #3B82D6; --g2: #3B82D6; } .bg-slate { --g1: #64748B; --g2: #64748B; } .bg-plum { --g1: #9459B8; --g2: #9459B8; }
.bg-rose { --g1: #D2577F; --g2: #D2577F; } .bg-clay { --g1: #D0683B; --g2: #D0683B; } .bg-amber { --g1: #DCA020; --g2: #DCA020; }
.bg-sand { --g1: #BFA272; --g2: #BFA272; }
.bg-custom { --g1: var(--gc); --g2: var(--gc); } 
.bg-dawn { --g1: #F2A65A; --g2: #D2577F; } .bg-meadow { --g1: #9CCB5B; --g2: #3F9C6D; } .bg-sea { --g1: #4CC3C8; --g2: #3B82D6; }
.bg-forest { --g1: #2F6E4A; --g2: #7A9A2C; } .bg-dusk { --g1: #9459B8; --g2: #3B4A7A; } .bg-ember { --g1: #DCA020; --g2: #C04A2E; }

.bg-aurora { --g1: #3FB89A; --g2: #7A5BD6; } .bg-lagoon { --g1: #3CC3D4; --g2: #1F7FA8; }
.bg-orchard { --g1: #E49AB0; --g2: #7FB453; } .bg-nightfall { --g1: #4A5C96; --g2: #1E2B4A; }

.bg-tide { --g1: #2BB5A8; --g2: #2F5FA8; } .bg-heather { --g1: #B98AC9; --g2: #6E7FB8; }
.bg-saffron { --g1: #F0B23A; --g2: #D86A4A; } .bg-flint { --g1: #8A97A8; --g2: #3E4A5C; }
.bg-tile { background: linear-gradient(135deg, var(--g1), var(--g2)); }
:root { --bg-mix: 20%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-mix: 22%; }
}

:root[data-theme="dark"] { --bg-mix: 22%; }
.workspace.has-bg {
  background: linear-gradient(135deg, color-mix(in srgb, var(--g1) var(--bg-mix), var(--paper)), color-mix(in srgb, var(--g2) var(--bg-mix), var(--paper))) fixed;
}

.workspace.has-bg, .has-cover.cover-full { --ink-soft: color-mix(in srgb, #1C231E 40%, #5D675F); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .workspace.has-bg, :root:not([data-theme="light"]) .has-cover.cover-full { --ink-soft: color-mix(in srgb, #E3E8E1 40%, #9AA59C); }
}

:root[data-theme="dark"] .workspace.has-bg, :root[data-theme="dark"] .has-cover.cover-full { --ink-soft: color-mix(in srgb, #E3E8E1 40%, #9AA59C); }
.workspace.has-bg .topbar { background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (forced-colors: active) { .workspace.has-bg { background: Canvas; } }

.leaf-mark { display: inline-flex; align-items: center; color: var(--sap); }
.leaf-mark svg { width: 14px; height: 14px; }

.bloom .leaf-mark { border-radius: 50%; animation: leaf-unfurl 600ms var(--ease) both, mark-glow 900ms 250ms var(--ease) both; }
.bloom .ring { animation: mark-glow 900ms var(--ease) both; }
.bloom .bar > span { animation: bar-glow 700ms var(--ease); }
@keyframes leaf-unfurl { from { transform: scale(0.2) rotate(-60deg); opacity: 0; } 70% { transform: scale(1.35) rotate(8deg); opacity: 1; } to { transform: none; } }
@keyframes mark-glow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sap) 50%, transparent); } to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--sap) 0%, transparent); } }


.leaf-tree { display: block; width: 100%; height: auto; overflow: visible; }
.leaf-tree .tree-wood { fill: none; stroke: var(--tree-wood, var(--wood)); stroke-linecap: round; }
.leaf-tree .tree-ground { fill: var(--sap-wash); }
.leaf-tree .tree-bark { fill: var(--tree-wood, var(--wood)); }

.leaf-tree .tree-sway { transform-box: view-box; animation: tree-sway var(--dur) ease-in-out var(--delay) infinite alternate; }
@keyframes tree-sway { from { rotate: calc(var(--amp) * -1); } to { rotate: var(--amp); } }
.look-pic .leaf-tree .tree-sway { animation: none; }
@media (prefers-reduced-motion: reduce) { .leaf-tree .tree-sway { animation: none; } }
:root[data-motion="reduce"] .leaf-tree .tree-sway { animation: none; }
.leaf-tree .tree-leaf { fill: var(--tree-leaf, var(--sap)); }

.leaf-tree .tree-leaf.tone-1 { fill: color-mix(in srgb, var(--tree-leaf, var(--sap)), #000 16%); }
.leaf-tree .tree-leaf.tone-2 { fill: color-mix(in srgb, var(--tree-leaf, var(--sap)), #fff 18%); }
.leaf-tree .tree-leaf.fresh { fill: var(--tree-new, var(--leaf-new)); animation: leaf-fresh 1.6s var(--ease) 300ms both; transform-box: fill-box; }
.leaf-tree .tree-blossom { fill: var(--tree-blossom, var(--blossom)); }
.leaf-tree .tree-blossom.fresh { animation: blossom-fresh 1.4s var(--ease) 500ms both; transform-box: fill-box; transform-origin: center; }
@keyframes blossom-fresh { 0% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1.4); filter: drop-shadow(0 0 3px var(--tree-blossom, var(--blossom))); } 100% { transform: scale(1); filter: none; } }

.leaf-tree.look-autumn { --tree-leaf: #D2853A; --tree-new: #F0B45A; --tree-blossom: #B8452F; }
.leaf-tree.look-blossom { --tree-leaf: #E092A9; --tree-new: #F5BFD0; --tree-blossom: #B9466D; }
.leaf-tree.look-frost { --tree-leaf: #7FAEC2; --tree-new: #B8DCEA; --tree-blossom: #4F86A0; --tree-wood: #8A949A; }

.leaf-tree.look-moss { --tree-leaf: #5E8A3A; --tree-new: #A3C46A; --tree-blossom: #C9B458; --tree-wood: #6B5A43; }
.leaf-tree.look-moonlit { --tree-leaf: #7C86C9; --tree-new: #B9C0EE; --tree-blossom: #E3D9A6; --tree-wood: #6F6A86; }
@keyframes leaf-fresh { 0% { opacity: 0; } 40% { opacity: 1; filter: drop-shadow(0 0 3px var(--leaf-new)); } 100% { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .leaf-tree :is(.tree-leaf, .tree-blossom).fresh { animation: none; } }
:root[data-motion="reduce"] .leaf-tree :is(.tree-leaf, .tree-blossom).fresh { animation: none; }
.tree-place { display: grid; justify-items: center; gap: 12px; padding: 8px 16px 32px; }
.tree-place .leaf-tree { max-width: min(520px, 100%); }
.tree-place .leaf-tree.grove { max-width: min(720px, 100%); }

.leaf-tree .grove-back { opacity: .82; }

.looks { display: grid; gap: 12px; max-width: 720px; margin: 32px auto 0; }
.looks h2 { margin: 0; font-size: var(--t-l); }
.looks-balance { margin: 0; color: var(--ink-soft); }
.looks-group { display: grid; gap: 8px; margin-top: 8px; }
.looks-head { margin: 0; font-size: var(--t-s); color: var(--ink-soft); font-weight: 600; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.look-tile { display: grid; gap: 2px; align-content: start; padding: 10px; border: 0; border-radius: var(--r-l); background: var(--surface-2);
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.look-tile.is-using { background: var(--sap-wash); box-shadow: inset 0 0 0 2px var(--sap); }
.look-tile.is-using .look-state { color: var(--ink); } 
.look-tile[aria-disabled="true"] { cursor: default; }
.look-tile[aria-disabled="true"] .look-pic { opacity: .55; }
@media (hover: hover) { .look-tile:not([aria-disabled="true"]):not(:disabled):hover { background: color-mix(in srgb, var(--surface-2), var(--ink) 6%); } }
.look-pic { display: grid; place-items: center; height: 72px; margin-bottom: 6px; border-radius: var(--r-m); overflow: hidden; }
.look-pic .leaf-tree { height: 72px; width: auto; }
.look-pic.cover-tile { background: var(--cv); }
.look-pic.icons-tile { display: flex; gap: 8px; color: var(--sap); background: var(--sap-wash); }
.look-pic.icons-tile svg { width: 24px; height: 24px; }
.look-name { font-weight: 600; }
.look-state { color: var(--ink-soft); font-size: var(--t-s); }
.tree-count { margin: 0; color: var(--ink-soft); font-size: var(--t-m); text-align: center; }

dialog.morning { width: min(420px, calc(100vw - 32px)); display: grid; gap: 8px; text-align: center; padding-top: 16px; }
dialog.morning:not([open]) { display: none; }
.morning-title { margin: 0; font-size: var(--t-xl); font-weight: 650; text-wrap: balance; }
.morning-tree .leaf-tree { max-width: min(320px, 80vw); margin-inline: auto; }
.morning-line { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--t-m); }
.morning-due { margin: -8px 0 16px; color: var(--ink); font-size: var(--t-m); overflow-wrap: anywhere; } 
.morning-step { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0;
  border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.morning-step > svg { flex: none; width: 20px; height: 20px; color: var(--sap); }
.morning-step-words { display: grid; min-width: 0; }
.morning-step-title { font-weight: 600; overflow-wrap: anywhere; }
.morning-step-where { color: var(--ink-soft); font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .morning-step:hover { background: color-mix(in srgb, var(--surface-2), var(--ink) 6%); } }
.morning-go { justify-self: stretch; justify-content: center; min-height: 48px; font-size: var(--t-m); }
@media (max-width: 640px) {
  
  dialog.morning { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-inline: 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  dialog.morning[open] { animation: sheet-in .28s var(--ease-out); }
}
@keyframes bar-glow { 50% { box-shadow: 0 0 0 3px var(--sap-wash); } }
.bloom-anchor { position: relative; }
.bloom-sprig { position: absolute; top: -14px; inset-inline-start: 0; pointer-events: none; overflow: visible; z-index: 2; color: var(--sap);
  animation: sprig-out 260ms 850ms ease-out both; }
.bloom-sprig.inside { top: 0; }
.bloom-stem { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: stem-grow 520ms cubic-bezier(.2, 0, 0, 1) both; }
.bloom-leaf { fill: currentColor; transform-box: fill-box; transform-origin: 0 50%; animation: leaf-open 480ms calc(120ms + var(--i) * 110ms) cubic-bezier(.2, 0, 0, 1) both; }
.bloom-bud { fill: currentColor; animation: bud-pop 360ms var(--ease) both; }
@keyframes stem-grow { to { stroke-dashoffset: 0; } }
@keyframes leaf-open { from { transform: scale(0.15) rotate(-35deg); opacity: 0; } 65% { transform: scale(1.12); opacity: 1; } to { transform: none; opacity: .9; } }
@keyframes bud-pop { from { transform: scale(0); } 60% { transform: scale(1.4); } to { transform: none; } }
@keyframes sprig-out { to { opacity: 0; transform: translateY(-4px); } }
.bloom-bud { transform-box: fill-box; transform-origin: center; }

.bloom-sprig.still, .bloom-sprig.still * { animation: none; stroke-dashoffset: 0; }
.bloom-sprig.still .bloom-leaf { opacity: .9; }
.bloom-sprig.still { transition: opacity 300ms ease-out; }
.bloom-sprig.still.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bloom .leaf-mark, .bloom .ring, .bloom .bar > span { animation: none; } }
:root[data-motion="reduce"] :is(.bloom .leaf-mark, .bloom .ring, .bloom .bar > span) { animation: none; }
@media (forced-colors: active) { .bloom-sprig { color: CanvasText; } }


@media (pointer: coarse) {
  .agenda-tabs a, .shape-switch a, .seg button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .agenda-title, .lane-name { padding-block: 10px; margin-block: -10px; }
  
  .agenda-title:focus-visible { outline-offset: -10px; }
  .lane-name:focus-visible { outline-offset: -6px; }
  .board-title { min-height: 44px; } 
  select.repeat-select, .board-add-input, .prompt-input, .due-inputs input, .calendar-form input { min-height: 44px; }
  details > summary, .panel details > summary { padding-block: 10px; } 
  .board-move, .lane-menu { min-height: 44px; min-width: 44px; }
}


.sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sched-row { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); align-items: center; gap: 10px; }
.sched-time { justify-self: end; direction: ltr; unicode-bidi: isolate; font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } 
.sched-event { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--bark); background: color-mix(in srgb, var(--card) 40%, transparent); color: var(--ink-soft); }
.sched-event svg { flex: none; width: 18px; height: 18px; }
.sched-title { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.sched-row.is-past .sched-title { color: var(--ink-soft); }
.sched-total { margin: -4px 0 8px; font-size: var(--t-xs); color: var(--ink-soft); }
.sched-clash { grid-column: -2; margin: -6px 0 0; padding-inline-start: 12px; font-size: var(--t-xs); color: var(--danger); overflow-wrap: anywhere; }
.sched-row.is-clash .sched-time { color: var(--danger); }
.sched-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-soft); }

.week-focus { margin: 4px 0 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sap-wash); }
.week-focus h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--t-s); color: var(--ink-soft); }
.week-focus h2 svg { color: var(--sap); }
.week-focus-list { list-style: none; margin: 0; padding: 0; }
.week-focus-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 40px; }
.week-focus-list .agenda-title { min-height: 40px; text-align: start; }
.week-focus-list li.is-done .agenda-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--ink-soft); }
.week-focus-count { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.week-focus-again { margin: 4px 0 12px; }
.sched-note.problem, .pref-help.problem { color: var(--danger); }
.sched-note .btn { margin-inline-start: 4px; }

.sched-shape { display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.sched-shape button { min-height: 32px; justify-content: center; }
@media (pointer: coarse) { .sched-shape button { min-height: 44px; } }
.day-grid { --hour: 48px; --gutter: 4.5rem; position: relative; block-size: calc(var(--hours) * var(--hour)); margin-top: 8px; }
.dg-hour { position: relative; block-size: var(--hour); border-block-start: 1px solid var(--bark); }
.dg-label { position: absolute; inset-block-start: 2px; inset-inline-start: 0; inline-size: calc(var(--gutter) - 10px); text-align: end; font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dg-slot { position: absolute; inset-block: 0; inset-inline: var(--gutter) 0; inline-size: auto; padding: 0; border: 0; border-radius: var(--r-m); background: transparent; cursor: var(--cursor-act); transition: background-color var(--d-fast) var(--ease); }
.dg-slot:hover { background: var(--hover); }
.dg-slot:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }
.dg-items { position: absolute; inset-block: 0; inset-inline: var(--gutter) 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.dg-item { position: absolute; box-sizing: border-box; inset-block-start: calc(var(--top) * var(--hour) / 60); block-size: calc(var(--len) * var(--hour) / 60 - 2px);
  inset-inline-start: calc(var(--lane) * 100% / var(--lanes)); inline-size: calc(100% / var(--lanes) - 4px); min-block-size: 22px;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 8px; border-radius: var(--r-m); background: var(--sap-wash); color: var(--ink); pointer-events: auto; font-size: var(--t-xs); }
.dg-item.is-event { border: 1px dashed var(--bark); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink-soft); }
.dg-item.is-due { background: var(--surface-2); }
.dg-item.is-past, .dg-item.is-done { opacity: .6; }
.dg-item.is-done .dg-title { text-decoration: line-through; }
.dg-open { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border-radius: inherit; cursor: var(--cursor-act); }
.dg-open:hover { background: color-mix(in srgb, var(--sap) 10%, transparent); }
.dg-open:focus-visible { outline: 2px solid var(--sap); outline-offset: -2px; }

.dg-time { align-self: flex-start; max-inline-size: 100%; direction: ltr; unicode-bidi: isolate; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-item.is-clash .dg-time { color: var(--danger); }
.dg-title { display: flex; align-items: center; gap: 4px; min-width: 0; color: inherit; font-size: var(--t-s); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-title svg { flex: none; width: 14px; height: 14px; }
.dg-now { position: absolute; inset-block-start: calc(var(--top) * var(--hour) / 60); inset-inline: calc(var(--gutter) - 6px) 0; block-size: 2px; background: var(--sap); pointer-events: none; }
.dg-now::before { content: ""; position: absolute; inset-block-start: -3px; inset-inline-start: 0; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sap); }
.dg-allday { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dg-allday li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-m); border: 1px dashed var(--bark); color: var(--ink-soft); font-size: var(--t-s); }
.dg-allday svg { flex: none; width: 16px; height: 16px; }
.agenda-row.is-done .agenda-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--stem); }
.focus-today { margin: 18px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.done-today { margin-top: 18px; }
.done-today > summary { cursor: var(--cursor-act); width: fit-content; }
.done-today > summary h2 { display: inline; margin: 0; }
.done-today .agenda-list { margin-top: 8px; }
.pick-next { margin-top: 4px; }
.pick-next h2 { font-size: var(--t-s); color: var(--ink-soft); margin: 18px 0 6px; }

.pick-next .agenda-where { font-size: var(--t-xs); color: var(--ink-soft); flex: 0 1 auto; min-width: 0; }
@media (min-width: 641px) { .pick-next .agenda-where { max-width: 45%; } } 
.pick-next > summary { cursor: var(--cursor-act); width: fit-content; margin-top: 18px; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--ink-soft); }

.day-size { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); margin: 18px 0 14px; }
.day-size-label { font-size: var(--t-s); color: var(--ink-soft); }
.day-size-seg { display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.day-size-seg button { min-height: 36px; justify-content: center; }
@media (pointer: coarse) { .day-size-seg button { min-height: 44px; } }
.day-size .why { flex-basis: 100%; }
.room-line { margin: -2px 0 6px; font-size: var(--t-xs); color: var(--ink-soft); }
.enough-line { margin: 14px 0 0; font-size: var(--t-s); color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.calendar-offer { margin-top: 18px; }
.calendar-form { display: grid; gap: 6px; margin: 10px 0 4px; }
.calendar-form label { font-weight: 600; font-size: var(--t-s); }
.calendar-form input { width: 100%; }

.gcal-card { margin: 4px 0 24px; padding: 16px; border-radius: var(--r-l); background: var(--surface-1); }
.gcal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcal-head h4 { flex: 1 1 auto; margin: 0; font-size: var(--t-m); }
.gcal-head h4:focus { outline: none; }
.gcal-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-m); background: var(--sap-wash); color: var(--sap); }
.gcal-mark svg { width: 18px; height: 18px; }
.gcal-badge { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 8px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.gcal-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.gcal-badge[data-tone="good"] { background: var(--sap-wash); color: var(--sap); }
.gcal-badge[data-tone="good"]::before { opacity: 1; }
.gcal-badge[data-tone="warn"] { background: var(--danger-wash); color: var(--danger); }
.gcal-badge[data-tone="busy"] { color: var(--amber-text); }
@media (prefers-reduced-motion: no-preference) {
  .gcal-badge[data-tone="busy"]::before { animation: gcal-wait 1.4s var(--ease) infinite alternate; }
}
@keyframes gcal-wait { from { opacity: .25; } to { opacity: 1; } }
.gcal-about { margin: 12px 0 0; }
.gcal-line { margin: 12px 0 0; font-size: var(--t-s); }
.gcal-line.problem { color: var(--danger); }
.gcal-card .backup-actions:not(:empty) { margin-top: 14px; }
.gcal-card .backup-actions:empty { display: none; }
.calendar-help ul { margin: 6px 0 0; padding-inline-start: 1.2em; font-size: var(--t-s); }
.calendar-help li + li { margin-top: 4px; }
.calendar-help > summary { cursor: var(--cursor-act); font-size: var(--t-s); color: var(--sap); font-weight: 600; width: fit-content; }
.schedule-section .due-quick a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.schedule-section .due-inputs { margin: 0; }
.schedule-out { display: grid; gap: 8px; }
.schedule-out .hint, .remind-row .hint { margin: 0; font-size: var(--t-xs); }
@media (max-width: 640px) {
  .sched-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sched-time { justify-self: start; margin-inline: 4px; } 
  .day-grid { --gutter: 3.25rem; }
}


.flow-resume { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--paper, transparent); box-shadow: inset 0 0 0 1px var(--bark); }
.flow-resume-head { display: block; margin: 0 0 6px; font-size: var(--t-s); font-weight: 600; }
.flow-resume-when { font-weight: 400; color: var(--ink-soft); }
.flow-resume-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow-resume-input { width: 100%; min-height: 4.5em; resize: vertical; font: inherit; }
.flow-resume-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.flow-resume-foot .hint { flex: 1 1 14rem; margin: 0; font-size: var(--t-xs); }
.flow-resume-add { margin-top: 12px; }
.resume-section h3 .flow-resume-when { font-weight: 400; }
.resume-section .resume-text { min-height: 2.6em; }
.agenda-resume { display: block; font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agenda-resume-label { font-weight: 600; }

.agenda-why { font-size: var(--t-xs); color: var(--sap); font-weight: 600; }

.btn.start-work { display: inline-flex; align-items: center; gap: 6px; border-color: var(--sap); color: var(--sap); font-weight: 600; white-space: nowrap; }
.btn.start-work:hover { background: var(--sap-wash); }
.btn.start-work svg { width: 14px; height: 14px; }
:is(.next-list > li:first-child, .next-step-row) .btn.start-work { background: var(--sap); border-color: var(--sap); color: var(--card); } 
:is(.next-list > li:first-child, .next-step-row) .btn.start-work:hover { filter: brightness(1.08); background: var(--sap); }

.next-list > li:not(:first-child) .btn.start-work { background: var(--sap-wash); border-color: transparent; color: color-mix(in srgb, var(--sap) 82%, var(--ink)); } 
.next-list > li:not(:first-child) .btn.start-work:hover { background: color-mix(in srgb, var(--sap-wash) 80%, var(--sap)); }

.pick-next .plan-row.is-lead .agenda-where { color: var(--sap); font-weight: 600; }
.start-work .start-short { display: none; }
@media (max-width: 599px) { .start-work .start-long { display: none; } .start-work .start-short { display: inline; } } 

.next-list > li:not(:first-child) .start-work .start-long { display: none; }
.next-list > li:not(:first-child) .start-work .start-short { display: inline; }


.next-step { margin: 2px 0 22px; }
.next-step:focus { outline: none; }
.next-step:focus-visible { outline: 2px solid var(--sap); outline-offset: 4px; border-radius: var(--r-l); }
.next-step h2 { font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); margin: 0 0 8px; }
.next-step-row { padding-block: 14px; padding-inline: 10px 16px; gap: 12px; border-radius: var(--r-l); content-visibility: visible;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 30%, var(--bark)), var(--e1); }
.next-step-row .status { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.next-step-row .status svg { width: 28px; height: 28px; }
.next-step-row .agenda-title { font-size: var(--t-l); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.next-step-row .agenda-what { gap: 2px; }
.next-step-row .agenda-where { font-size: var(--t-xs); }
.next-step-none { margin: 0; padding: 12px 16px; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--bark); color: var(--ink-soft); font-size: var(--t-s); max-width: 60ch; }
@media (max-width: 640px) { .next-step-row { padding-block: 12px; padding-inline: 6px 12px; } .next-step-row .agenda-what { min-width: calc(100% - 56px); } }

.step-tag { font-size: var(--t-xs); font-weight: 600; color: var(--sap); line-height: 1.2; }
.agenda-row.is-step { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 30%, var(--bark)); }
.agenda-row.is-step .btn.start-work { background: var(--sap); border-color: var(--sap); color: var(--card); }
.agenda-row.is-step .btn.start-work:hover { filter: brightness(1.08); background: var(--sap); }
.plan-row.is-step { flex-wrap: wrap; }
.plan-row.is-step .step-tag { flex-basis: 100%; }

.all-done { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; padding: 18px 20px; max-width: 560px; border-radius: var(--r-l); background: var(--sap-wash); }
.all-done-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--sap); }
.all-done-mark svg { width: 28px; height: 28px; }
.all-done h2 { margin: 0 0 2px; font-size: var(--t-l); text-wrap: balance; }
.all-done p { margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.after-done { margin: 0 0 18px; color: var(--ink-soft); max-width: 60ch; }
.view-head .view-link { display: inline-flex; align-items: center; gap: 6px; align-self: center; }
.view-head .view-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); align-self: center; } 

@media (max-width: 640px) {
  .view-head:has(> .view-links) { flex-wrap: nowrap; align-items: center; margin-bottom: 8px; }
  .view-head .view-links { flex-wrap: nowrap; gap: 0; }
  .view-head .view-link { justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 0; }
  .view-head .view-link svg { width: 20px; height: 20px; }
  .view-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .agenda-tabs { margin-bottom: 12px; }
}
.view-title-sub { color: var(--ink-soft); font-weight: 500; } 


.promise-chip { font-size: var(--t-2xs); line-height: 1.5; font-weight: 600; white-space: nowrap; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.promise-chip.owe { color: var(--sap); }
.promise-chip.released { font-weight: 400; }
.promise-field { display: grid; gap: 2px; margin: 6px 0; font-size: var(--t-s); }
.promise-field input, .promise-note input { font: inherit; min-height: 36px; }
.promise-summary { margin: 6px 0; }
.promise-acts, .promise-note, .promise-foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.promise-note input { flex: 1 1 12rem; min-width: 0; }
.promise-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.promise-log li { display: flex; gap: 8px; overflow-wrap: anywhere; }
.promise-when { flex: none; color: var(--ink-soft); font-size: var(--t-xs); min-width: 5.5rem; padding-top: 1px; }


.tend-sub { margin: 14px 0 6px; font-size: var(--t-s); font-weight: 600; }
.tend-sub:first-of-type { margin-top: 4px; }
.tend-more { margin-top: 6px; }
.tend-copy { margin-top: 6px; } 
.tend-note { margin-top: 10px; font-size: var(--t-xs); }
.tend-overdue-line { margin: 18px 0 0; }
.tend-review { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--bark); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tend-review .hint { margin: 0; flex: 1 1 16rem; }



.panel-close-label { display: none; }
@media (max-width: 899px) {
  
  .panel-head {
    position: sticky; top: -12px; z-index: 3; margin: -12px -16px 4px; padding-block: 6px; padding-inline: 16px 8px; 
    background: var(--card); box-shadow: 0 1px 0 var(--bark);
  }
  .panel.has-cover .panel-head { box-shadow: inset 0 6px 0 var(--cv), 0 1px 0 var(--bark); } 
  .panel-close { width: auto; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 22px; color: var(--sap); font-weight: 600; }
  .panel-close svg { display: none; }
  .panel-close-label { display: inline; }
  .bottombar [data-here] { font-weight: 600; color: var(--sap); }
}
@media (max-width: 640px) {
  
  .menu-scrim { position: fixed; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: var(--overlay); z-index: 39; animation: fade-in .18s var(--ease-out); }
  .menu.sheet {
    inset: auto 0 0 0 !important; width: 100%; min-width: 0; max-width: none; max-height: 80vh; box-sizing: border-box;
    padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border-bottom: 0;
    animation: sheet-in .28s var(--ease-out);
  }
  .menu.sheet .menu-title { padding: 6px 10px 8px; font-size: var(--t-s); }
  .menu.sheet .menu-scroll { max-height: 34vh; } 
  .menu.sheet.grove-menu { max-height: 90vh; }
}
@keyframes fade-in { from { opacity: 0; } }
@media (pointer: coarse) {
  .mi-keys { display: none; } 
  .mi-keys.mi-note { display: inline; } 
  .menu button { min-height: 44px; }
  .grove-menu .grove-picks button { min-height: 44px; }
  .grove-rename, .link-btn, .btn.small, .file-btn { position: relative; }
  .grove-rename::after, .link-btn::after, .btn.small::after, .file-btn::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
  
  .chev:not(:disabled) { position: relative; }
  .chev:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline: -16px 0; }
  
  .place-intro > .icon-btn, :is(.shape-switch, .agenda-tabs) > a { position: relative; }
  .place-intro > .icon-btn::after, :is(.shape-switch, .agenda-tabs) > a::after {
    content: ""; position: absolute; inset-block: min(0px, calc((100% - 44px) / 2)); inset-inline: min(0px, calc((100% - 44px) / 2));
  }
}



@media (max-width: 899px) {
  :root { --indent: 18px; --stem-x: 11px; }
  .g > i:not(.lit) { opacity: .65; } 
  .row { padding-block: 0; }
  .row.top { margin-top: 12px; }
  .card:not(.paper) {
    width: 100%; min-width: 0; min-height: 44px; padding: 2px 0; gap: 0 2px; align-items: center;
    grid-template-columns: auto auto minmax(0, max-content) minmax(max-content, 1fr) auto; 
  }
  .card:not(.paper) .title { -webkit-line-clamp: 2; }
  .card:not(.paper) .excerpt { grid-column: 3 / 5; }
  .card:not(.paper) > .meta { grid-column: 4; grid-row: 1; padding: 0 4px; }
  .card:not(.paper) > .meta:empty { display: none; }
  .card:not(.paper) > .meta .bar { display: none; } 
  .card:not(.paper) > .meta:has(.chip, .chips, .due-chip, .later-chip, .promise-chip, .without-chip) { grid-column: 3 / 5; grid-row: 2; padding: 0 4px 6px; flex-wrap: wrap; white-space: normal; }
  .card:not(.paper):has(.excerpt) > .meta:has(.chip, .chips, .due-chip, .later-chip, .promise-chip, .without-chip) { grid-row: 3; }
  
  .card:not(.paper):has(> .meta .chip, > .meta .chips, > .meta .due-chip, > .meta .later-chip, > .meta .promise-chip, > .meta .without-chip) { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  .card:not(.paper) > .more { grid-column: 5; grid-row: 1; }
  
  .row.thought { margin-top: 0; }
  .row.thought > .card:not(.paper) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .row.thought > .card:not(.paper) .title { -webkit-line-clamp: 2; }
  .row.thought > .card:not(.paper) > .excerpt { display: none; }
  .row.thought > .card:not(.paper) > .meta { grid-column: 3 / -1; grid-row: 2; padding: 0 0 2px; padding-inline-start: 4px; flex-wrap: nowrap; white-space: nowrap; }
  .row.thought > .card:not(.paper) > .meta > :not(.triage) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .row.thought > .card:not(.paper) > .more { grid-column: 4; }
  .row.thought > .card:not(.paper) > .meta:has(.due-chip, .later-chip, .promise-chip) > .came { display: none; } 
  .triage .file-btn { width: 40px; height: 36px; padding: 0; margin: 0; display: grid; place-items: center; border-color: transparent; background: none; color: var(--ink-soft); }
  .triage .file-btn > svg { display: block; width: 20px; height: 20px; }
  .triage .file-btn > .file-word { display: none; }
  .triage .icon-btn { height: 36px; }
  .chev, .chev-space { width: 22px; }
  
  
  .view.has-shapes .view-head { flex-wrap: wrap; margin: 4px 0 10px; }
  .view.has-shapes .view-head > :first-child { flex: 1 1 8rem; min-height: 0; }
  .view.has-shapes .view-head .view-tools { flex: none; }
  
  .view.has-shapes .view-head .view-tools { display: contents; }
  .view.has-shapes .view-head .view-tools > .shape-switch { margin-inline-start: auto; }
  .view.has-shapes .view-head:has(.view-tools > .tool-icon:not([hidden]))::after { content: ''; flex-basis: 100%; order: 1; }
  .view.has-shapes .view-head .view-tools > .tool-icon { order: 2; gap: 6px; padding-inline: 12px; }
  .view.has-shapes .view-head .tool-icon .tool-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .view-head .tool-icon { min-width: 44px; min-height: 44px; justify-content: center; } 
  .shape-switch { grid-auto-columns: 44px; }
  .shape-switch a { padding: 0; min-height: 40px; }
  .shape-switch a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shape-switch a > svg { width: 18px; height: 18px; }
  
  .bottombar .bar-make { color: var(--sap); }
  .bottombar .bar-make .nav-label { display: none; }
  .bottombar .bar-make .nav-icon {
    --press: 3px;
    --face-hi: color-mix(in srgb, var(--sap) 70%, #fff);
    --base: color-mix(in srgb, var(--sap) 58%, #000);
    position: absolute; left: 50%; top: -38px; width: 56px; height: 56px; margin-left: -28px;  
    border-radius: 50%; color: var(--card);
    background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--sap) 84%, #fff), var(--sap) 62%);
    display: grid; place-items: center;
    box-shadow: inset 0 1px 0 var(--face-hi), inset 0 -2px 3px rgb(0 0 0 / .12), 0 var(--press) 0 var(--base), 0 calc(var(--press) + 5px) 12px -3px rgb(20 32 25 / .38);
  }
  .bottombar .bar-make .nav-icon svg { width: 28px; height: 28px; stroke-width: 2.4; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .14)); }
  .bottombar .bar-make:disabled { opacity: .5; }
  
  .bottombar .bar-make:focus-visible { outline: none; }
  .bottombar .bar-make:focus-visible .nav-icon { outline: 2px solid var(--sap); outline-offset: 3px; }
  
  .bottombar .bar-make .nav-icon { transition: translate .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s cubic-bezier(.23, 1, .32, 1); }
  .bottombar .bar-make .nav-icon svg { transition: rotate .32s cubic-bezier(.16, 1, .3, 1); }
  .bottombar .bar-make:active:not(:disabled):not([aria-expanded="true"]) .nav-icon {
    translate: 0 var(--press);
    box-shadow: inset 0 1px 0 var(--face-hi), inset 0 -1px 2px rgb(0 0 0 / .12), 0 0 0 var(--base), 0 2px 4px -1px rgb(20 32 25 / .3);
  }
  .bottombar .bar-make[aria-expanded="true"] .nav-icon svg { rotate: 45deg; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bottombar .bar-make .nav-icon { --face-hi: color-mix(in srgb, var(--sap) 66%, #fff); --base: color-mix(in srgb, var(--sap) 40%, #000); }
  }
  
  :root[data-theme="dark"] .bottombar .bar-make .nav-icon { --face-hi: color-mix(in srgb, var(--sap) 66%, #fff); --base: color-mix(in srgb, var(--sap) 40%, #000); }
  @media (prefers-reduced-motion: reduce) { .bottombar .bar-make .nav-icon { transition: none; } }
  :root[data-motion="reduce"] .bottombar .bar-make .nav-icon { transition: none; }
  
  .bottombar .bar-pill { position: absolute; left: 0; top: 0;  border-radius: 19px; background: var(--sap-wash); pointer-events: none; }
  .bottombar.has-pill :is([aria-current="page"], [data-here]) { background: none; }
  .bottombar > :not(.bar-pill) { z-index: 1; }
}




.sheet-grab { display: none; }
.menu.sheet .sheet-grab { display: grid; place-items: center; height: 16px; margin: -4px 0 2px; touch-action: none; }
:is(dialog.popover.sheet .popover-head, .panel-head) > .sheet-grab {
  position: absolute; top: 0; left: 50%; translate: -50% 0;  width: 72px; height: 14px; place-items: center;
}
dialog.popover.sheet .popover-head > .sheet-grab { display: grid; }
.sheet-grab::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--stem); }
.menu.sheet .menu-title, dialog.popover.sheet .popover-head { touch-action: none; }
dialog.popover.sheet .popover-head { padding-top: 16px; }
@media (max-width: 899px) {
  .panel-head > .sheet-grab { display: grid; }
  .panel-head { touch-action: none; padding-top: 12px; }
  
  .panel-head { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; }
  
  .panel-head .panel-minimize { display: none; }
  .panel-head .panel-close, .panel-head .panel-minimize + .panel-close { margin-inline-start: auto; }
  .panel-path { order: 1; flex-basis: 100%; margin-inline-start: -6px; }
  .crumb { min-height: 40px; }
}


@media (max-width: 899px) {
  .btn { flex-shrink: 0; max-width: 100%; white-space: normal; }
  .children .child-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; padding-block: 10px; line-height: 1.4;
  }
  :root:is([data-text="l"], [data-text="xl"]) .menu.sheet .menu-row:has(> :nth-child(5)) > .menu-chip { flex-basis: 30%; }
}

@media (pointer: coarse) {
  .capture-dest:not(:disabled) { position: relative; }
  .capture-dest:not(:disabled)::after { content: ""; position: absolute; inset-block: -10px; inset-inline: -4px; }
  .pref-help > a:only-child { display: inline-block; padding-block: 10px; margin-block: -10px; }
}


@media (pointer: coarse) and (max-width: 899px) {
  .triage .triage-today, .triage .triage-task, .triage .triage-trash { display: none; }
  .triage .file-btn { width: 44px; height: 44px; }
}


@media (max-width: 899px) {
  .workspace::after {
    content: ""; position: fixed; inset-inline: 0; bottom: 0; z-index: 19; pointer-events: none;
    height: calc(88px + env(safe-area-inset-bottom)); background: var(--paper);
    -webkit-mask: linear-gradient(transparent, #000 62%); mask: linear-gradient(transparent, #000 62%);
  }
  .workspace.has-bg::after { background: inherit; }
  html:is(.keyboard-up, .capture-low) .workspace::after { display: none; }
}


.topbar-title { display: none; }
@media (max-width: 899px) {
  .topbar-title {
    display: block; position: absolute; inset-inline: 72px; top: 50%; translate: 0 -50%; margin: 0; pointer-events: none;
    font-size: var(--t-m); font-weight: 600; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity var(--d-fast) var(--ease);
  }
  .topbar.titled .topbar-title { opacity: 1; }
  .topbar.titled { border-bottom-color: var(--bark); }
}


@media (max-width: 899px) {
  .bottombar { inset-inline: max(10px, calc(50% - 260px)); }
}
@media (max-width: 899px) and (max-height: 500px) {
  .bottombar { bottom: calc(4px + env(safe-area-inset-bottom)); padding-block: 3px; }
  .bottombar a, .bottombar button:not(.bar-make) { min-height: 40px; }
  .bottombar .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


@media (max-width: 899px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } 
  #panel { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } 
  .panel-head { margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); } 
  .panel-head { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } 
}


@media (max-width: 899px) {
  .panel-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  #panel .panel-head > .sheet-grab { top: env(safe-area-inset-top); } 
  dialog.palette { padding-top: env(safe-area-inset-top); }
}


@media (max-width: 899px) { html.capture-low #guide { display: none; } }


.phone-up { display: none; }
@media (max-width: 899px) {
  .topbar { padding-block: max(4px, env(safe-area-inset-top)) 4px; } 
  .topbar .save-status { order: 2; }
  .topbar .phone-search { order: 3; }
  .phone-up {
    display: inline-flex; align-items: center; gap: 2px; order: -1; min-width: 44px; min-height: 44px; max-width: 46vw; margin-inline-start: -8px; padding-inline: 4px 8px;
    border-radius: var(--r-m); color: var(--sap); font-size: var(--t-s); font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .phone-up span { overflow: hidden; text-overflow: ellipsis; }
  .phone-up svg { width: 22px; height: 22px; flex: none; }
  .phone-up:active { background: var(--hover); }
  .topbar.titled .phone-up span { display: none; } 
  html.capture-low .topbar :is(.phone-up, .topbar-title) { display: none; }
  
  #view.bar-back .crumbs .crumb-back { display: none; }
  #view.bar-back .crumbs { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #view.bar-back .view-head:has(> .crumbs:first-child) { justify-content: flex-end; }
}


@media (pointer: coarse) and (max-width: 899px) {
  .card.paper .title { -webkit-line-clamp: 2; line-clamp: 2; }
  .card.paper > .status.is-plain { visibility: hidden; width: 0; min-width: 0; padding: 0; margin-inline: -3px; overflow: hidden; }
}


@media (max-width: 899px) { .workspace { overflow-x: clip; } }
html.page-swiping .view { will-change: transform; }
.swipe-stage { position: fixed; inset: 0; z-index: 4; overflow: clip; pointer-events: none; } 
.swipe-ghost { position: absolute; margin: 0; }

html.page-swiping .bottombar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface-1) 92%, var(--paper)); }

@media (pointer: coarse) and (max-width: 899px) { html, body { touch-action: pan-y pinch-zoom; } }

.swipe-to {
  position: fixed; top: 46%; z-index: 25; display: inline-flex; align-items: center; gap: 8px; max-width: 46vw;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--bark); background: var(--card); color: var(--ink);
  font-size: var(--t-s); font-weight: 600; box-shadow: var(--float); pointer-events: none;
  transition: background-color .15s var(--ease), color .15s var(--ease), scale .18s var(--ease);
}
.swipe-to span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swipe-to svg { width: 18px; height: 18px; flex: none; }
.swipe-to[data-side="left"] {  right: 12px; translate: calc((1 - var(--pull, 0)) * 12px) 0; } 
.swipe-to[data-side="right"] {  left: 12px; translate: calc((var(--pull, 0) - 1) * 12px) 0; }
.swipe-to.is-back svg { rotate: -90deg; }
.swipe-to.armed { background: var(--sap); border-color: var(--sap); color: var(--card); scale: 1.06; }


.title, .stub-title, .excerpt, .title-edit, .panel-title, .notes, .notes-view > p, .notes-view > .notes-h, .flow-title, .flow-path, .sort-notes,
.board-title, .board-where > .where-top, .board-where > .where-parent, .lane-name, .agenda-title, .agenda-where, .sched-title, .children .child-title, .linkish,
.palette-title, .palette-snippet, .capture input, .crumb-title, .tile-title, .item-title, .tile-notes, .flow-resume-text, .sort-home-text strong {
  unicode-bidi: plaintext; text-align: start;
}

:is(.children .child-title, .agenda-title, .sched-title):dir(rtl) { text-align: right; } 
:is(.children .child-title, .agenda-title, .sched-title):dir(ltr) { text-align: left; } 

.crumbs a, .notes-view li, .palette-path, .capture-option strong, .capture-option-path { unicode-bidi: plaintext; }


.menu-swatch { display: block; width: 16px; height: 16px; border-radius: 5px; background: var(--cv); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }

@media print { .tip { display: none !important; } }


.print-sheet { display: none; }
@media print {
  html.print-cards, html.print-cards body { height: auto !important; overflow: visible !important; background: #fff !important; }
  html.print-cards body > :not(.print-sheet) { display: none !important; }
  html.print-cards .print-sheet { display: block; color: #000; font-size: 11pt; line-height: 1.45; }
  .print-path, .print-facts { margin: 0 0 2pt; font-size: 9pt; color: #555; }
  .print-h { margin: 0 0 4pt; font-size: 20pt; line-height: 1.2; }
  .print-facts { margin-block-end: 14pt; }
  .print-list { margin: 0; padding: 0; list-style: none; }
  .print-list .print-list { padding-inline-start: 16pt; }
  .print-row { display: flex; gap: 6pt; align-items: baseline; margin: 3pt 0; break-inside: avoid; break-after: avoid; }
  .print-mark { flex: none; width: 11pt; }
  .print-title { overflow-wrap: anywhere; }
  .print-due { margin-inline-start: auto; padding-inline-start: 8pt; font-size: 9pt; color: #555; white-space: nowrap; }
  .print-done > .print-row .print-title, .print-dropped > .print-row .print-title { color: #666; text-decoration: line-through; }
  .print-notes { margin: 0 0 6pt; padding-inline-start: 17pt; font-size: 10pt; color: #333; }
  .print-sheet > .print-notes { padding-inline-start: 0; margin-block-end: 12pt; }
  .print-notes :is(p, h4, h5, h6, ul) { margin: 2pt 0; }
  .print-notes input { margin: 0; }
}


.tip {
  position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; 
  display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 9px;
  border-radius: 7px; background: var(--ink); color: var(--card);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.3; box-shadow: var(--float);
  animation: tip-in .12s var(--ease-out);
}
.tip[hidden] { display: none; }
.tip kbd { padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--card) 18%, transparent); color: inherit; font: inherit; font-weight: 500; opacity: .85; }
@keyframes tip-in { from { opacity: 0; translate: 0 2px; } }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }


html { --scroll-room: 24px; scroll-padding-bottom: var(--scroll-room); } 
@media (max-width: 899px) { html { --scroll-room: 124px; } }


@media (hover: hover) and (pointer: fine) {
  .canvas-tools .canvas-btn:not(.zoom-label) {
    transition: max-width .22s var(--ease), opacity .16s var(--ease), padding .22s var(--ease), margin .22s var(--ease);
  }
  .canvas-tools .canvas-btn:not(.zoom-label) { max-width: 120px; overflow: hidden; white-space: nowrap; }
  .canvas-tools:not(:hover):not(:focus-within) .canvas-btn:not(.zoom-label) { max-width: 0; min-width: 0; padding: 0; opacity: 0; border-inline-start-width: 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .canvas-tools .canvas-btn { transition: none; }
}



dialog.money-pop { width: min(380px, calc(100vw - 16px)); }
dialog.money-pop.sheet { width: 100%; }
.money-pop .popover-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.money-kind button { justify-content: center; padding: 7px 10px; }
.money-kind button[aria-checked="true"] { background: var(--sap-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sap) 45%, transparent); font-weight: 600; }
.money-amount { display: flex; align-items: center; gap: 6px; padding: 2px 12px; border: 1px solid var(--bark); border-radius: var(--r-s); background: var(--paper); }
.money-amount:focus-within { border-color: var(--sap); box-shadow: 0 0 0 1px var(--sap); }
.money-sign { font-size: var(--t-xl); color: var(--ink-soft); }
.money-amount input { flex: 1; width: 0; min-width: 0; padding: 6px 0; border: 0; background: none; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.money-amount input:focus-visible { outline: none; } 
.money-field { display: grid; gap: 6px; }
.money-field[hidden], .money-hint[hidden], .money-check[hidden] { display: none; }
.money-day-pick { width: auto; min-width: 6em; justify-self: start; } 
.money-lab { font-size: var(--t-s); font-weight: 600; }
.money-hint { margin: 0; }
.money-chips { display: flex; flex-wrap: wrap; gap: 6px; }


dialog.add-dialog { width: min(560px, calc(100vw - 32px)); }
.add-card { display: grid; gap: var(--s-4); }

.add-title, .add-body, .add-item-text { width: 100%; box-sizing: border-box; border: 0; background: none; outline: none; }
.add-title, .add-body { padding: 4px 0 6px; border-bottom: 1px solid transparent; transition: border-color .15s; }
.add-title { font-size: var(--t-l); font-weight: 600; line-height: 1.3; }
.add-body { resize: none; overflow-y: auto; min-height: 3em; max-height: 45vh; font-size: var(--t-m); line-height: 1.55; }
.add-card.is-note .add-body { min-height: 7.5em; }

.add-card.is-idea .add-body { min-height: 6em; }
.idea-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-block: calc(-1 * var(--s-4) + 4px) 0; }
.idea-tools .btn { min-height: 36px; }
.idea-sum { margin-bottom: calc(-1 * var(--s-4) + 6px); }
.idea-preview { margin: 0; max-height: 200px; }
.add-card .idea-preview[hidden], .add-card .idea-sum[hidden] { display: none; }
@media (max-width: 640px) { .idea-tools .btn { min-height: 44px; } }
.add-title:focus-visible, .add-body:focus-visible { border-bottom-color: var(--sap); }
.add-title::placeholder { font-weight: 500; }
.add-field { display: grid; gap: 6px; }
.add-hint { margin: 0; color: var(--ink-soft); font-size: var(--t-xs); }
.add-lab { font-size: var(--t-s); font-weight: 600; }

.add-choice { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; border-radius: 0; }
.add-choice button { flex: none; justify-content: center; min-height: 36px; padding-inline: 16px; border: 1px solid var(--stem); }
.add-choice button[aria-checked="true"] { background: var(--sap-wash); border-color: var(--sap); font-weight: 600; }
@media (forced-colors: active) { .add-choice button[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.add-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.add-days[hidden] { display: none; }
.add-day { min-height: 40px; border: 1px solid var(--stem); border-radius: var(--r-m); background: var(--card); font-size: var(--t-s); }
.add-day[aria-pressed="true"] { background: var(--sap-wash); border-color: var(--sap); font-weight: 600; }
.add-field .time-btn { justify-self: start; align-self: start; }

.add-when-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-when-row .time-btn { align-self: auto; min-height: 42px; }
.add-when-row .add-date { width: auto; flex: 1 1 140px; max-width: 220px; }

.add-list { display: grid; }
.add-items { list-style: none; margin: 0; padding: 0; display: grid; }
.add-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) 32px; align-items: center; gap: 10px; min-height: 38px; border-block: 1px solid transparent; }
.add-item:focus-within { border-color: var(--bark); }
.add-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0 1px; accent-color: var(--sap); }
.add-item-text { padding: 7px 0; font-size: var(--t-m); line-height: 1.4; }
.add-item.done .add-item-text { text-decoration: line-through; color: var(--ink-soft); }
.add-item-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font-size: 18px; line-height: 1; opacity: 0; }
.add-item:hover .add-item-x, .add-item:focus-within .add-item-x { opacity: 1; }
.add-item-x:hover { background: var(--hover); color: var(--ink); }
.add-item.is-new { grid-template-columns: 20px minmax(0, 1fr); }
.add-item.is-new > svg { width: 16px; height: 16px; margin: 0 2px; color: var(--ink-soft); }
.add-where-row { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--bark); }
.add-where { flex: 1; max-width: 340px; }
.add-error { margin: 0; color: var(--danger); font-size: var(--t-s); }
.add-error:empty { display: none; }
.add-card .dialog-actions { margin-top: 0; }
@media (hover: none) { .add-item-x { opacity: .7; } }
@media (max-width: 640px) { .add-item { min-height: 44px; } .add-item-x { width: 40px; height: 40px; } .add-item { grid-template-columns: 22px minmax(0, 1fr) 40px; } }
.money-chip { padding: 5px 11px; border-radius: var(--r-m); }
.money-chip[aria-pressed="true"] { border-color: var(--sap); background: var(--sap-wash); font-weight: 600; }
.money-chip.quiet { color: var(--sap); font-weight: 600; }
@media (forced-colors: active) { .money-chip[aria-pressed="true"], .money-kind button[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.money-new-label { width: 190px; padding: 5px 11px; border-radius: var(--r-m); }

.pick-field {
  width: 100%; min-height: 42px; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--paper);
  font-size: var(--t-s); font-weight: 600; text-align: start;
}
.pick-field:hover:not(:disabled) { background: var(--paper); border-color: color-mix(in srgb, var(--sap) 55%, var(--bark)); }
.pick-field.no-project { font-weight: 400; color: var(--ink-soft); }
.pick-field > svg:last-child { flex: none; width: 16px; height: 16px; margin-inline-start: auto; color: var(--ink-soft); }
.pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.pick-field .card-icon, .pick-row .card-icon { margin: 0; flex: none; }

.pick-dot { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.pick-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sap); }
.pick-dot.none::before { width: 12px; height: 12px; box-sizing: border-box; background: none; border: 1.5px dashed var(--ink-soft); }
dialog.pick-pop { width: min(360px, calc(100vw - 16px)); }
dialog.pick-pop.sheet { width: 100%; }
.pick-search { width: 100%; box-sizing: border-box; }
.pick-list { list-style: none; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 2px; max-height: min(360px, 52vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.pick-head { padding: 10px 10px 2px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: start;
}
.pick-row:hover { background: var(--hover); }
.pick-row[aria-pressed="true"] { background: var(--sap-wash); box-shadow: inset var(--lead-x) 0 0 var(--sap); }
.pick-row > svg:last-child { flex: none; width: 16px; height: 16px; color: var(--sap); }
.pick-row > svg:first-child, .pick-field > svg:first-child { flex: none; width: 16px; height: 16px; color: var(--sap); } 
.pick-words { flex: 1; min-width: 0; display: grid; }
.pick-title, .pick-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pick-words:dir(ltr) > * { text-align: left; } 
.pick-words:dir(rtl) > * { text-align: right; } 
.pick-row > .grove-tile { flex: none; } 
.pick-title { font-size: var(--t-s); font-weight: 500; }
.pick-row[aria-pressed="true"] .pick-title { font-weight: 600; }
.pick-row.none .pick-title { color: var(--ink-soft); }
.pick-meta { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pick-note { margin: 0; }
.pick-note[hidden] { display: none; }
@media (forced-colors: active) { .pick-row[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.money-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.money-actions .btn.primary { margin-inline-start: auto; }
@media (max-width: 640px) {
  .money-kind button, .money-chip, .money-new-label, .pick-field, .money-actions .btn { min-height: 44px; }
  .pick-row { min-height: 52px; }
}


.money { max-width: 720px; }
.money-head { flex-wrap: wrap; row-gap: 8px; }
.money-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.money-tools .btn { gap: 6px; }
.money-tabs { margin: 0 0 20px; }

.money-month { display: flex; align-items: center; gap: 2px; margin: 0 0 16px; }
.money-month h2 { margin: 0; margin-inline-end: 6px; font-size: var(--t-l); font-weight: 600; }
.money-step { font-size: var(--t-l); color: var(--ink-soft); }
.money-step:disabled { opacity: .35; }
.money-now { margin-inline-start: auto; }

.money-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 20px; }
.money-stat { min-width: 0; }
.money-stat-k { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-soft); }
.money-dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.money-dot.in, .money-dot.left { background: var(--sap); }
.money-dot.aside { background: color-mix(in srgb, var(--sap) 45%, transparent); }
.money-dot.over { background: var(--amber); }
.money-stat-v { display: block; margin-top: 2px; font-size: calc(var(--t-l) * 1.5); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.money-flow { position: relative; display: flex; height: 8px; margin: 14px 0 0; border-radius: var(--r-pill); background: var(--hover); overflow: hidden; }
.money-flow > i { flex: none; display: block; height: 100%; }
.money-flow > .spent { background: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.money-flow > .aside { background: color-mix(in srgb, var(--sap) 45%, transparent); }
.money-flow > .left { background: var(--sap); }
.money-flow > .beyond { position: absolute; inset-block: 0; inset-inline-end: 0; background: var(--bark); }
.money-flow > .beyond.over { background: var(--amber); }

.money-change { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.money-change-mark { font-weight: 600; }
.money-change.less .money-change-mark { color: var(--sap); }

.statement-sum { font-weight: 600; margin: 0 0 4px; }
.statement-notes p { margin: 2px 0; font-size: var(--t-xs); }
.statement-rows { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(50vh, 420px); overflow-y: auto; }
.statement-rows li + li { border-top: 1px solid var(--bark); }
.statement-row { display: grid; grid-template-columns: auto 6.5em minmax(0, 1fr) auto auto; gap: 8px; width: 100%; padding: 6px 2px; }
.statement-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statement-label { color: var(--ink-soft); }
.statement-amount { font-variant-numeric: tabular-nums; text-align: end; }
.statement-maybe { margin: 0 0 6px; margin-inline-start: 28px; font-size: var(--t-xs); }
@media (max-width: 560px) {
  .statement-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .statement-date, .statement-label { grid-column: 2; font-size: var(--t-xs); }
  .statement-what { grid-column: 2; grid-row: 1; }
  .statement-amount { grid-column: 3; grid-row: 1; }
  .statement-date { grid-row: 2; } .statement-label { grid-row: 3; }
}
.money-section { margin-top: 28px; }
.money-section > h2 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--bark) 60%, transparent); font-size: var(--t-m); font-weight: 600; }
.money-empty { margin: 8px 0 12px; }
.money-empty-do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.money-what { margin: 4px 0 10px; }
.money-set { margin-top: 8px; } 

.money-rows { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.money-row {
  position: relative; display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 9px 10px;
  border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; text-align: start;
  transition: background-color var(--d-fast) var(--ease);
}
.money-section > .money-row { width: calc(100% + 20px); margin-inline: -10px; } 
.money-row:hover { background: var(--hover); }
.money-row[aria-pressed="true"] { background: var(--sap-wash); }
@media (forced-colors: active) { .money-row[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.money-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.money-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.money-sub { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-soft); }
.money-pct { flex: none; min-width: 4ch; text-align: end; font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.money-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-amt.in { color: var(--sap); }
.money-go { color: var(--ink-soft); }
.money-quiet .money-name { color: var(--ink-soft); } 
.money-bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--hover); overflow: hidden; }
.money-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--sap); }

.money-sub.money-over, .money-budget.over .money-left { color: var(--amber-text); }
.money-bar.over > i, .money-budget.over .money-bar > i { background: var(--amber); }
.money-list-head { scroll-margin-top: 12px; }
.money-list-head .link-btn { font-size: inherit; }
.money-day h3 { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.money-day-total { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-find .view-head .btn { min-height: 44px; gap: 6px; color: var(--sap); }
.money-find-input { min-height: 44px; font-size: var(--t-m); } 
.money-find-status { margin: 8px 0 12px; }
.money-foot { margin-top: 36px; font-size: var(--t-xs); }
.money-foot p { margin: 2px 0; }
.money-foot .link-btn { font-size: inherit; }

.money-card { display: grid; gap: 8px; }
.money-card[hidden] { display: none; }
.money-card h3, .money-card p { margin: 0; }
.money-plan { font-size: var(--t-s); }
.money-card .money-add { justify-self: start; }
.money-card .money-steps-head { margin: 6px 0 0; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.money-steps { margin: 0; }
.money-steps .child-title { cursor: default; }
.money-cost { flex: none; font-variant-numeric: tabular-nums; }
.meta:has(> .money-meta) { flex-wrap: wrap; row-gap: 2px; } 
.money-meta { min-width: 0; white-space: normal; font-variant-numeric: tabular-nums; }

.currency-pop .hint { margin: 0; }
dialog.currency-pop { width: min(360px, calc(100vw - 16px)); }
dialog.currency-pop.sheet { width: 100%; }
.currency-row > svg { flex: none; width: 16px; height: 16px; color: var(--sap); }

.money-currency {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 40px; min-height: 40px; padding: 2px 8px;
  border: 0; border-radius: 8px; background: var(--hover); color: var(--ink); font: inherit; font-size: var(--t-xl); cursor: pointer;
}
.money-currency::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid var(--ink-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.money-currency:hover { background: color-mix(in srgb, var(--sap) 14%, var(--hover)); }
@media (max-width: 640px) { .money-currency { min-height: 44px; min-width: 48px; } }
.currency-list { list-style: none; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 2px; max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.currency-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: start;
}
.currency-row:hover { background: var(--hover); }
.currency-row[aria-pressed="true"] { border-color: var(--sap); background: var(--sap-wash); font-weight: 600; }
.currency-row > :first-child { flex: 1; min-width: 0; }
.currency-sign { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .money-tool-word { display: none; } 
  .money-tools .btn, .money-tools .icon-btn, .money-step, .money-now, .money-set, .money-empty-do .btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .money-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-stat-v { font-size: var(--t-xl); }
  .currency-row { min-height: 44px; }
  .money-card .money-add { min-height: 44px; }
}



.rail { overflow-y: auto; }
.places { grid-template-columns: minmax(0, 1fr); } 
.rail-projects ul { list-style: none; margin: 0 0 var(--s-1); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.rail-projects li { position: relative; }
.rail-projects li::before {
  content: ""; position: absolute; inset-inline-start: 18px; top: 0; bottom: 0; width: var(--stem-w);
  background: var(--stem); opacity: .55;
}
.rail-projects li:first-child::before { top: -6px; }
.rail-projects li:last-child::before { bottom: 50%; }
.rail-project {
  position: relative; display: flex; align-items: center; gap: 13px; min-height: 32px;
  padding-block: 5px; padding-inline: 14px 10px; border-radius: var(--r-m);
  text-decoration: none; font-size: var(--t-s); color: var(--ink-soft);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.rail-project:hover { background: var(--hover); color: var(--ink); }
.rail-project[aria-current="true"] { color: var(--ink); font-weight: 600; }
.project-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-1); box-shadow: inset 0 0 0 2px var(--stem), 0 0 0 3px var(--surface-1);
}
.project-dot[class*="cv-"] { background: var(--cv); box-shadow: 0 0 0 3px var(--surface-1); }
.rail-project:hover .project-dot { box-shadow: inset 0 0 0 2px var(--stem), 0 0 0 3px var(--hover); }
.rail-project:hover .project-dot[class*="cv-"] { box-shadow: 0 0 0 3px var(--hover); }
.rail-project[aria-current="true"] .project-dot { box-shadow: inset 0 0 0 2px var(--sap), 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--sap); }
.rail-project[aria-current="true"] .project-dot[class*="cv-"] { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--sap); }
.project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-project .count { flex: none; font-variant-numeric: tabular-nums; }
.rail-project.more { padding-inline-start: 37px; font-size: var(--t-xs); }
.rail-slim .rail-projects { display: none; }

.rail-pins ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.rail-slim .rail-pins { display: none; }

.dayside, .day-show { display: none; }

:root { --day-band: transparent; --on-day-band: var(--sap); }
@media (min-width: 1280px) {
  :root { --day-w: 336px; }
  .app.with-day { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--day-w); }
  .day-show:not([hidden]) { display: inline-grid; flex: none; }
  .app.with-day .dayside:not([hidden]) {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-1);
  }
}

.day-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-2) var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--day-band); color: var(--on-day-band);
  border-block-end: 1px solid var(--bark);
}
.day-heading h2 { margin: 0; font-size: var(--t-l); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.day-heading h2 a { color: inherit; text-decoration: none; border-radius: var(--r-s); }
.day-heading h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.day-head a:focus-visible, .day-head button:focus-visible { outline: 2px solid var(--on-day-band); outline-offset: 2px; }
.day-date { margin: 2px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.day-hide { color: inherit; margin-block-start: -4px; margin-inline-end: -8px; }
.day-hide:hover:not(:disabled) { background: color-mix(in srgb, var(--on-day-band) 18%, transparent); color: inherit; }
.day-tally { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.day-bar { flex: 1; height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--on-day-band) 28%, transparent); overflow: hidden; }
.day-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--on-day-band); transform-origin: 0 50%; } 
.day-bar > span:dir(rtl) { transform-origin: 100% 50%; }
.day-full { flex: none; font-weight: 600; } 

.day-add {
  display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) var(--s-4) var(--s-1);
  padding-inline: var(--s-4) var(--s-2); border: 0; border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1);
  transition: box-shadow var(--d-fast) var(--ease);
}
.day-add:hover { box-shadow: var(--e2); }
.day-add:focus-within { box-shadow: var(--e2); outline: 2px solid var(--sap); outline-offset: 0; }
.day-add-icon { display: flex; color: var(--sap); }
.day-add-icon svg { width: 18px; height: 18px; }
.day-add input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; font-size: var(--t-s); }
.day-add input:focus-visible { outline: none; }
.day-add input::placeholder { color: color-mix(in srgb, var(--sap) 70%, var(--ink)); }

.day-body { padding: 0 var(--s-3) var(--s-6); }
.day-section h3 { margin: var(--s-4) var(--s-2) var(--s-1); font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.day-sched-total { margin: 0 var(--s-2) var(--s-1); font-size: var(--t-xs); color: var(--ink-soft); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.day-row {
  display: flex; align-items: flex-start; gap: var(--s-1); padding: 4px var(--s-1); border-radius: var(--r-m);
  transition: background-color var(--d-fast) var(--ease);
}
.day-row:hover { background: var(--hover); }
.day-row > .status, .day-row > .day-pick { flex: none; margin-top: 1px; }
.day-row > span.status { pointer-events: none; }
.day-what {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; align-items: stretch;
  padding: 5px var(--s-1); border: 0; border-radius: var(--r-s); background: none; text-align: start; color: var(--ink);
}
.day-title { font-size: var(--t-s); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.day-title .card-icon { margin-inline-end: 4px; }
.day-where { font-size: var(--t-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-row .due-chip { flex: none; margin-top: 7px; }
.day-time { flex: none; min-width: 4.6em; padding-top: 7px; padding-inline-start: var(--s-1); font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-event-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; color: var(--ink-soft); }
.day-event-icon svg { width: 16px; height: 16px; }
.day-row.is-event .day-title { color: var(--ink-soft); }
.day-row.is-past { opacity: .62; }
.day-row.is-done .day-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--stem); }
.day-pick { color: var(--sap); width: 28px; height: 28px; border-radius: 50%; }
.day-pick:hover:not(:disabled) { background: var(--sap-wash); color: var(--sap); }
.day-empty { margin: var(--s-4) var(--s-2) 0; font-size: var(--t-s); color: var(--ink-soft); line-height: 1.45; }
.day-empty p { margin: 0 0 var(--s-1); }

.day-empty.is-done { margin-inline: 0; padding: var(--s-3) var(--s-3); border-radius: var(--r-m); background: var(--sap-wash); }
.day-empty.is-done > p:first-child { color: var(--ink); font-weight: 600; }
.day-done > summary { display: flex; align-items: center; gap: var(--s-1); list-style: none; cursor: var(--cursor-act); border-radius: var(--r-s); }
.day-done > summary::-webkit-details-marker { display: none; }
.day-done > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-inline-start: var(--s-2); margin-top: var(--s-3);
  border-inline-end: 1.6px solid var(--ink-soft); border-block-end: 1.6px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform var(--d-base) var(--ease);
}
.day-done > summary:dir(rtl)::before { transform: rotate(45deg); }
.day-done[open] > summary::before { transform: rotate(45deg); }
.day-done[open] > summary:dir(rtl)::before { transform: rotate(-45deg); }
.day-done > summary h3 { margin-inline-start: var(--s-1); }



@property --rp { syntax: '<number>'; inherits: false; initial-value: 0; }

:where(.rippling) { position: relative; }
.rippling::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), currentColor calc(var(--rr, 0px) * var(--rp)), transparent calc(var(--rr, 0px) * var(--rp) + 1px));
  opacity: .16; animation: ripple .5s cubic-bezier(.2, 0, 0, 1) forwards;
}
@keyframes ripple { from { --rp: 0; } 55% { opacity: .16; } to { --rp: 1; opacity: 0; } }



.btn.primary, .capture-add, :is(.next-list > li:first-child, .next-step-row) .btn.start-work {
  --press: 4px;
  --face-hi: color-mix(in srgb, var(--sap) 76%, #fff);
  --base: color-mix(in srgb, var(--sap) 60%, #000);
  position: relative;
  box-shadow: inset 0 1px 0 var(--face-hi), 0 var(--press) 0 var(--base), 0 calc(var(--press) + 2px) 6px -1px rgb(20 32 25 / .28);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
    box-shadow .15s cubic-bezier(.23, 1, .32, 1), translate .15s cubic-bezier(.23, 1, .32, 1), scale .35s cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover:not(:disabled), .capture-add:hover:not(:disabled), :is(.next-list > li:first-child, .next-step-row) .btn.start-work:hover {
    translate: 0 1px;
    box-shadow: inset 0 1px 0 var(--face-hi), 0 calc(var(--press) - 1px) 0 var(--base), 0 calc(var(--press) + 1px) 5px -1px rgb(20 32 25 / .26);
  }
}
.btn.primary:active:not(:disabled), .capture-add:active:not(:disabled), :is(.next-list > li:first-child, .next-step-row) .btn.start-work:active {
  translate: 0 var(--press);
  box-shadow: inset 0 1px 0 var(--face-hi), 0 0 0 var(--base), 0 1px 2px rgb(20 32 25 / .2);
}
@media (pointer: fine) {
  .btn.primary:active::after, .capture-add:active::after, :is(.next-list > li:first-child, .next-step-row) .btn.start-work:active::after {
    content: ""; position: absolute; inset: calc(-1 * var(--press)) 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:not(.quiet):not(.primary) {
    transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
      border-color var(--d-fast) var(--ease), translate .15s cubic-bezier(.23, 1, .32, 1), scale .35s cubic-bezier(.34, 1.56, .64, 1);
  }
}
:is(.btn:not(.quiet), .capture-add):disabled {
  --hollow: inset 0 1px 2px rgb(0 0 0 / .14), inset 0 -1px 0 rgb(255 255 255 / .35);
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: transparent;
  color: var(--ink-soft);
  box-shadow: var(--hollow);
  translate: 0 calc(var(--press, 2px) / 2);
  scale: .97;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.btn:not(.quiet), .capture-add):disabled {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, translate .2s ease, scale .2s ease;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.btn.primary, .capture-add, :is(.next-list > li:first-child, .next-step-row) .btn.start-work) { --face-hi: color-mix(in srgb, var(--sap) 70%, #fff); --base: color-mix(in srgb, var(--sap) 42%, #000); }
  :root:not([data-theme="light"]) :is(.btn:not(.quiet), .capture-add):disabled { --hollow: inset 0 1px 3px rgb(0 0 0 / .45); }
}
:root[data-theme="dark"] :is(.btn.primary, .capture-add, :is(.next-list > li:first-child, .next-step-row) .btn.start-work) { --face-hi: color-mix(in srgb, var(--sap) 70%, #fff); --base: color-mix(in srgb, var(--sap) 42%, #000); }
:root[data-theme="dark"] :is(.btn:not(.quiet), .capture-add):disabled { --hollow: inset 0 1px 3px rgb(0 0 0 / .45); }

@keyframes twig-sway { 18% { rotate: -2deg; } 42% { rotate: 1.5deg; } 66% { rotate: -.8deg; } 86% { rotate: .3deg; } to { rotate: 0deg; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.btn:not(.quiet), .capture-add, .bar-make):disabled.swaying { transform-origin: 50% 100%; animation: twig-sway .75s var(--ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(.btn:not(.quiet), .capture-add, .bar-make):disabled:hover { transform-origin: 50% 100%; animation: twig-sway .75s var(--ease); }
}

.why-off { margin: var(--s-1) 0 0; }
@media (prefers-reduced-motion: reduce) {
  .btn.primary, .capture-add, :is(.next-list > li:first-child, .next-step-row) .btn.start-work { transition: background-color var(--d-fast) var(--ease); }
}
:root[data-motion="reduce"] :is(.btn.primary, .capture-add, :is(.next-list > li:first-child, .next-step-row) .btn.start-work) { transition: background-color var(--d-fast) var(--ease); }


.capture-add { white-space: nowrap; }


.hold-btn { position: relative; overflow: hidden; isolation: isolate; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; }
.hold-fill {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, currentColor 18%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s cubic-bezier(.23, 1, .32, 1);
}
[dir="rtl"] .hold-fill { transform-origin: right center; }
.hold-btn.holding .hold-fill, .hold-btn.held .hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 1200ms) linear; }
.hold-btn.held .hold-fill { transition: none; }


@property --fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  :is(.palette-list, .picker-list, .menu-scroll, .label-list, .pick-list, .currency-list, .icon-scroll, .why-list, .versions, .board-lane .board-list, .rail) {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
    animation: scroll-fade linear both; animation-timeline: scroll(self block);
  }
  @keyframes scroll-fade {
    0% { --fade-start: 0px; --fade-end: 24px; }
    6% { --fade-start: 24px; }
    94% { --fade-end: 24px; }
    100% { --fade-start: 24px; --fade-end: 0px; }
  }
}


.menu.sheet.from-make {
  inset-inline: 10px !important; width: auto; border-radius: var(--r-xl); border-bottom: 1px solid transparent; padding-bottom: 8px;
  transform-origin: 50% 100%; animation: make-menu-in .26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes make-menu-in { from { opacity: 0; scale: .96; translate: 0 12px; } }


.links-card { display: grid; gap: 8px; }
.links-card[hidden], .links-card [hidden] { display: none; }
.links-card h3 { margin: 0; }
.links-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.links-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.links-icon { display: inline-flex; color: var(--ink-soft); flex: none; }
.links-open { flex: 1; min-width: 0; display: grid; color: var(--ink); text-decoration: none; border-radius: var(--r-s); padding: 4px 0; }
.links-open:hover .links-title { text-decoration: underline; }
.links-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.links-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--ink-soft); text-align: start; }
.links-form { display: grid; gap: 8px; }
.links-form input { font: inherit; padding: 8px 10px; border: 1px solid var(--bark); border-radius: var(--r-s); background: var(--paper); color: var(--ink); min-height: 44px; }
.links-form-buttons { display: flex; gap: 8px; }
.links-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.attach-count { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-soft); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.attach-count svg { width: 14px; height: 14px; flex: none; }

.check-count { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-soft); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.check-count svg { width: 14px; height: 14px; flex: none; }
.check-count.all { color: var(--sap); }
.links-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.links-adds[hidden] { display: none; }
.links-thumb { width: 40px; height: 40px; border-radius: var(--r-s); background: color-mix(in srgb, var(--ink) 7%, transparent); align-items: center; justify-content: center; overflow: hidden; }
.links-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.links-thumb svg { width: 20px; height: 20px; }
button.links-open { font: inherit; text-align: start; background: none; border: 0; cursor: pointer; }
button.links-open:disabled { cursor: default; }
.links-row.missing .links-title { color: var(--ink-soft); }
.links-progress { appearance: none; width: 100%; height: 3px; margin-top: 4px; border: 0; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--sap); }
.links-progress::-webkit-progress-bar { background: transparent; }
.links-progress::-webkit-progress-value { background: var(--sap); border-radius: inherit; transition: width .2s var(--ease-out, ease-out); }
.links-progress::-moz-progress-bar { background: var(--sap); border-radius: inherit; }
.links-note { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); }
.file-viewer { max-width: min(92vw, 1100px); }
.file-view { display: grid; place-items: center; }
.file-view-img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--r-s); }


.save-bookmark { text-decoration: none; cursor: var(--cursor-grab); }
.save-bookmark:active { cursor: var(--cursor-grabbing); }
.save-more summary { cursor: var(--cursor-act); color: var(--ink-soft); font-size: var(--t-s); margin-block: var(--s-2) var(--s-1); }
.save-steps { margin: var(--s-2) 0 var(--s-3); padding-inline-start: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--t-s); color: var(--ink-soft); }


.dropbox-every { display: flex; align-items: center; gap: var(--s-2); margin-block: var(--s-2); font-size: var(--t-s); }
.dropbox-problem { color: var(--danger); }