/* Calendank look, ported from calendank-design/v3-preview.html. Sharp corners everywhere.
   Readability pass 2026-09-10: larger text and tap targets on every screen.
   Themes: the four originals plus sixteen more (2026-09-10, "just for fun"). Each theme is one block of values.
   Every theme sets its own fixed-time gray, column shade, block ring, task-block edge, "now" line, and text-box color,
   so the contrast rule holds in all of them. Textures are drawn here in CSS; nothing is downloaded. */
:root, body[data-theme="light"] {
  --ink: #1A1A1F; --muted: #6B6B75; --faint: #A6A6AE; --paper: #FFFFFF; --line: #ECECE8; --line2: #F3F3F0;
  --accent: #4F5BD5; --accent-ink: #2F38A8; --tint: #EEF0FC; --onaccent: #FFFFFF;
  --paper-bg: #FFFFFF; --send-bg: var(--accent); --today-bg: var(--accent); --card: #FFFFFF;
  --fixed-bg: #CFCFC8; --fixed-line: #9A9A92; --fixed-ink: #1F1F26; --col-bg: #F7F7F4; --paper-solid: #FFFFFF; --over-fixed-bg: #B7B7AE; --over-bg: #D9DDF9;
  --task-edge: transparent; --now: var(--accent); --box-bg: var(--paper); --box-line: var(--line);
}
body[data-theme="dark"] {
  --ink: #F1F1EC; --muted: #A3A3AD; --faint: #62626B; --paper: #121214; --line: #26262B; --line2: #1C1C20;
  --accent: #8E97F5; --accent-ink: #C6CAFA; --tint: #22254A; --onaccent: #121214;
  --paper-bg: #121214; --send-bg: var(--accent); --today-bg: var(--accent); --card: #1C1C20;
  --fixed-bg: #3B3B47; --fixed-line: #6B6B78; --fixed-ink: #F2F2F7; --col-bg: #1B1B1F; --paper-solid: #121214; --over-fixed-bg: #50505F; --over-bg: #2F3468;
}
body[data-theme="iridescent"] {
  --ink: #241C3B; --muted: #5E5680; --faint: #9B94B8; --paper: transparent; --line: rgba(80,60,140,.16); --line2: rgba(80,60,140,.09);
  --accent: #6D4DE6; --accent-ink: #3B2A9A; --tint: rgba(255,255,255,.62); --onaccent: #FFFFFF;
  --paper-bg: linear-gradient(140deg, #F9E7FF 0%, #E3F3FF 28%, #E2FFF4 55%, #FFF1E8 80%, #F6E6FF 100%);
  --send-bg: linear-gradient(135deg, #7CC7FF, #B48CFF, #FFA5D8); --today-bg: linear-gradient(135deg, #7CC7FF, #B48CFF, #FFA5D8); --card: #FFFFFF;
  --fixed-bg: rgba(60,45,110,.38); --fixed-line: rgba(60,45,110,.75); --fixed-ink: #16102E; --col-bg: rgba(255,255,255,.38); --paper-solid: #F4EEFA; --over-fixed-bg: rgba(60,45,110,.55); --over-bg: rgba(109,77,230,.26);
  --task-edge: rgba(255,255,255,.55); --box-bg: rgba(255,255,255,.6);
}
body[data-theme="psychedelic"] {
  --ink: #FFF7FB; --muted: #F3C7FF; --faint: #C9A0E6; --paper: transparent; --line: rgba(255,255,255,.18); --line2: rgba(255,255,255,.11);
  --accent: #00E5FF; --accent-ink: #FFFFFF; --tint: rgba(255,45,149,.38); --onaccent: #14061F;
  --paper-bg: radial-gradient(circle at 15% 8%, rgba(255,45,149,.85) 0, rgba(255,45,149,0) 38%), radial-gradient(circle at 85% 25%, rgba(255,179,0,.8) 0, rgba(255,179,0,0) 40%), radial-gradient(circle at 50% 95%, rgba(0,229,255,.75) 0, rgba(0,229,255,0) 45%), #14061F;
  --send-bg: linear-gradient(135deg, #FF2D95, #FFB300); --today-bg: linear-gradient(135deg, #FF2D95, #FFB300); --card: #1E0C2E;
  --fixed-bg: rgba(0,0,0,.58); --fixed-line: rgba(255,255,255,.7); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.30); --paper-solid: #14061F; --over-fixed-bg: rgba(0,0,0,.75); --over-bg: rgba(0,229,255,.30);
  --task-edge: rgba(255,255,255,.55); --now: #FFB300; --box-bg: rgba(255,255,255,.08); --box-line: rgba(255,255,255,.25);
}

/* ---- the sixteen extra themes ---- */
body[data-theme="money"] {
  --ink: #F1F5EC; --muted: #BFD3C6; --faint: #7FA08D; --paper: transparent; --line: rgba(255,255,255,.16); --line2: rgba(255,255,255,.09);
  --accent: #E3B341; --accent-ink: #F7E2A0; --tint: rgba(227,179,65,.22); --onaccent: #0B2A1F;
  --paper-bg: radial-gradient(circle at 50% -10%, rgba(255,215,0,.16), transparent 50%), repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px), linear-gradient(160deg, #0B3D2E, #06281E);
  --send-bg: linear-gradient(135deg, #E3B341, #B8860B); --today-bg: linear-gradient(135deg, #E3B341, #B8860B); --card: #0F3B2D;
  --fixed-bg: rgba(0,0,0,.5); --fixed-line: rgba(227,179,65,.65); --fixed-ink: #F5F0E0; --col-bg: rgba(0,0,0,.28); --paper-solid: #08301F; --over-fixed-bg: rgba(0,0,0,.7); --over-bg: rgba(227,179,65,.32);
  --task-edge: rgba(255,255,255,.5); --box-bg: rgba(0,0,0,.3); --box-line: rgba(227,179,65,.45);
}
body[data-theme="contrast"] {
  --ink: #000000; --muted: #222222; --faint: #555555; --paper: #FFFFFF; --line: #9A9A9A; --line2: #C8C8C8;
  --accent: #0000CC; --accent-ink: #0000AA; --tint: #E5E5FF; --onaccent: #FFFFFF;
  --paper-bg: #FFFFFF; --send-bg: #0000CC; --today-bg: #0000CC; --card: #FFFFFF;
  --fixed-bg: #D9D9D9; --fixed-line: #000000; --fixed-ink: #000000; --col-bg: #EFEFEF; --paper-solid: #FFFFFF; --over-fixed-bg: #BFBFBF; --over-bg: #C7C7FF;
  --task-edge: #000000; --box-line: #000000;
}
body[data-theme="paper"] {
  --ink: #3B2F22; --muted: #7A6A55; --faint: #A8998A; --paper: rgba(255,255,255,.55); --line: rgba(90,70,40,.22); --line2: rgba(90,70,40,.12);
  --accent: #2F55A4; --accent-ink: #24427F; --tint: rgba(47,85,164,.14); --onaccent: #FFFFFF;
  --paper-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"), linear-gradient(180deg, #F7F0E1, #F1E8D5);
  --send-bg: #2F55A4; --today-bg: #2F55A4; --card: #FFFCF5;
  --fixed-bg: #D8CDB8; --fixed-line: #8A7758; --fixed-ink: #2B2116; --col-bg: rgba(90,70,40,.08); --paper-solid: #F5EEDF; --over-fixed-bg: #C4B79E; --over-bg: rgba(47,85,164,.28);
  --box-bg: rgba(255,255,255,.55); --box-line: rgba(90,70,40,.35);
}
body[data-theme="dmt"] {
  --ink: #FFFFFF; --muted: #F0D9FF; --faint: #C7A6E6; --paper: transparent; --line: rgba(255,255,255,.22); --line2: rgba(255,255,255,.12);
  --accent: #00FFA8; --accent-ink: #FFFFFF; --tint: rgba(255,0,200,.35); --onaccent: #14001F;
  --paper-bg: linear-gradient(rgba(12,2,28,.62), rgba(12,2,28,.62)), repeating-conic-gradient(from 15deg at 50% 45%, #FF00C8 0deg 9deg, #00FFA8 9deg 18deg, #FFD400 18deg 27deg, #00B4FF 27deg 36deg, #FF6A00 36deg 45deg);
  --send-bg: linear-gradient(135deg, #FF00C8, #FFD400); --today-bg: linear-gradient(135deg, #FF00C8, #FFD400); --card: #1A0630;
  --fixed-bg: rgba(0,0,0,.66); --fixed-line: rgba(255,255,255,.8); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.4); --paper-solid: #0B0218; --over-fixed-bg: rgba(0,0,0,.82); --over-bg: rgba(0,255,168,.3);
  --task-edge: rgba(255,255,255,.7); --box-bg: rgba(0,0,0,.4); --box-line: rgba(255,255,255,.35);
}
body[data-theme="nature"] {
  --ink: #F3F1E6; --muted: #CFD6BC; --faint: #94A282; --paper: transparent; --line: rgba(255,255,255,.16); --line2: rgba(255,255,255,.09);
  --accent: #9BD65A; --accent-ink: #E6F5CF; --tint: rgba(155,214,90,.22); --onaccent: #14231A;
  --paper-bg: radial-gradient(circle at 80% -5%, rgba(255,220,120,.4), transparent 42%), linear-gradient(180deg, #1F3A25 0%, #2E4B2E 50%, #45582C 100%);
  --send-bg: linear-gradient(135deg, #9BD65A, #E0B84A); --today-bg: linear-gradient(135deg, #9BD65A, #E0B84A); --card: #223D27;
  --fixed-bg: rgba(0,0,0,.45); --fixed-line: rgba(226,214,160,.7); --fixed-ink: #F7F3E3; --col-bg: rgba(0,0,0,.26); --paper-solid: #1F3A25; --over-fixed-bg: rgba(0,0,0,.65); --over-bg: rgba(155,214,90,.3);
  --task-edge: rgba(255,255,255,.5); --box-bg: rgba(0,0,0,.28); --box-line: rgba(255,255,255,.3);
}
body[data-theme="ocean"] {
  --ink: #F2FAFF; --muted: #BFE3EE; --faint: #7FB3C4; --paper: transparent; --line: rgba(255,255,255,.18); --line2: rgba(255,255,255,.1);
  --accent: #FF7F66; --accent-ink: #FFD9CF; --tint: rgba(255,127,102,.24); --onaccent: #08213A;
  --paper-bg: radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 45%), linear-gradient(180deg, #071B3A 0%, #0A3A5C 55%, #0E6B78 100%);
  --send-bg: linear-gradient(135deg, #FF7F66, #FFB27A); --today-bg: linear-gradient(135deg, #FF7F66, #FFB27A); --card: #0B2E4A;
  --fixed-bg: rgba(0,0,0,.45); --fixed-line: rgba(255,255,255,.7); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.26); --paper-solid: #071B3A; --over-fixed-bg: rgba(0,0,0,.65); --over-bg: rgba(255,127,102,.3);
  --task-edge: rgba(255,255,255,.5); --now: #7FE3C4; --box-bg: rgba(0,0,0,.28); --box-line: rgba(255,255,255,.3);
}
body[data-theme="terminal"] {
  --ink: #33FF66; --muted: #22C455; --faint: #157A36; --paper: #000000; --line: rgba(51,255,102,.25); --line2: rgba(51,255,102,.14);
  --accent: #FFB000; --accent-ink: #FFD37A; --tint: rgba(255,176,0,.18); --onaccent: #000000;
  --paper-bg: repeating-linear-gradient(0deg, rgba(51,255,102,.035) 0 1px, transparent 1px 3px), #000000;
  --send-bg: #FFB000; --today-bg: #FFB000; --card: #050A06;
  --fixed-bg: #0A1F0F; --fixed-line: #33FF66; --fixed-ink: #33FF66; --col-bg: #06120A; --paper-solid: #000000; --over-fixed-bg: #133A1C; --over-bg: rgba(255,176,0,.3);
  --task-edge: rgba(51,255,102,.6); --box-bg: #000000; --box-line: #33FF66;
}
body[data-theme="blueprint"] {
  --ink: #FFFFFF; --muted: #D6E4FF; --faint: #9DB7E6; --paper: transparent; --line: rgba(255,255,255,.35); --line2: rgba(255,255,255,.2);
  --accent: #FFD166; --accent-ink: #FFE7A6; --tint: rgba(255,255,255,.16); --onaccent: #123A73;
  --paper-bg: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 24px), #1F4E9A;
  --send-bg: #FFD166; --today-bg: #FFD166; --card: #1A4183;
  --fixed-bg: rgba(0,0,0,.38); --fixed-line: #FFFFFF; --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.2); --paper-solid: #1F4E9A; --over-fixed-bg: rgba(0,0,0,.58); --over-bg: rgba(255,209,102,.3);
  --task-edge: rgba(255,255,255,.65); --box-bg: rgba(0,0,0,.22); --box-line: rgba(255,255,255,.5);
}
body[data-theme="night"] {
  --ink: #EEF0FF; --muted: #B9BEE6; --faint: #6F74A8; --paper: transparent; --line: rgba(255,255,255,.16); --line2: rgba(255,255,255,.09);
  --accent: #8FD3FF; --accent-ink: #D6EEFF; --tint: rgba(143,211,255,.2); --onaccent: #061028;
  --paper-bg: radial-gradient(1.2px 1.2px at 18px 26px, #FFFFFF 50%, transparent 52%), radial-gradient(1px 1px at 120px 80px, #FFFFFF 50%, transparent 52%), radial-gradient(1.5px 1.5px at 200px 140px, #DDE6FF 50%, transparent 52%), radial-gradient(1px 1px at 60px 190px, #FFFFFF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 170px 30px, #FFFFFF 50%, transparent 52%), radial-gradient(0.8px 0.8px at 90px 130px, #FFFFFF 50%, transparent 52%), radial-gradient(circle at 50% 120%, #1B1D4F, #05061A 60%);
  --send-bg: linear-gradient(135deg, #8FD3FF, #A78BFA); --today-bg: linear-gradient(135deg, #8FD3FF, #A78BFA); --card: #0E1035;
  --fixed-bg: rgba(0,0,0,.5); --fixed-line: rgba(255,255,255,.65); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.3); --paper-solid: #05061A; --over-fixed-bg: rgba(0,0,0,.7); --over-bg: rgba(167,139,250,.32);
  --task-edge: rgba(255,255,255,.45); --box-bg: rgba(0,0,0,.3); --box-line: rgba(255,255,255,.3);
}
body[data-theme="night"] { background-size: 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, auto; }
body[data-theme="aurora"] {
  --ink: #F0FFF8; --muted: #BFE9D8; --faint: #6FA893; --paper: transparent; --line: rgba(255,255,255,.16); --line2: rgba(255,255,255,.09);
  --accent: #5EF2C0; --accent-ink: #CFFBEB; --tint: rgba(94,242,192,.2); --onaccent: #06201A;
  --paper-bg: radial-gradient(ellipse 80% 40% at 20% 0%, rgba(0,255,170,.45), transparent 60%), radial-gradient(ellipse 70% 35% at 75% 8%, rgba(160,80,255,.45), transparent 60%), radial-gradient(ellipse 60% 30% at 50% 20%, rgba(0,200,255,.3), transparent 60%), linear-gradient(180deg, #06101F, #0A1A2E 60%, #0B2238);
  --send-bg: linear-gradient(135deg, #5EF2C0, #A78BFA); --today-bg: linear-gradient(135deg, #5EF2C0, #A78BFA); --card: #0D1F33;
  --fixed-bg: rgba(0,0,0,.5); --fixed-line: rgba(255,255,255,.65); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.3); --paper-solid: #06101F; --over-fixed-bg: rgba(0,0,0,.7); --over-bg: rgba(94,242,192,.3);
  --task-edge: rgba(255,255,255,.45); --box-bg: rgba(0,0,0,.3); --box-line: rgba(255,255,255,.3);
}
body[data-theme="sunset"] {
  --ink: #3B1E4F; --muted: #6B4A7A; --faint: #9C7FA8; --paper: transparent; --line: rgba(59,30,79,.18); --line2: rgba(59,30,79,.1);
  --accent: #7A2E9E; --accent-ink: #5B1F78; --tint: rgba(255,255,255,.45); --onaccent: #FFFFFF;
  --paper-bg: linear-gradient(180deg, #FFE0B8 0%, #FFB88C 45%, #E39AC9 100%);
  --send-bg: linear-gradient(135deg, #FF7A59, #7A2E9E); --today-bg: linear-gradient(135deg, #FF7A59, #7A2E9E); --card: #FFF6EC;
  --fixed-bg: rgba(59,30,79,.32); --fixed-line: rgba(59,30,79,.7); --fixed-ink: #24102F; --col-bg: rgba(255,255,255,.32); --paper-solid: #FFD9B5; --over-fixed-bg: rgba(59,30,79,.5); --over-bg: rgba(122,46,158,.28);
  --task-edge: rgba(255,255,255,.55); --box-bg: rgba(255,255,255,.55); --box-line: rgba(59,30,79,.3);
}
body[data-theme="chalk"] {
  --ink: #F4F1E8; --muted: #D3D9CD; --faint: #93A093; --paper: transparent; --line: rgba(255,255,255,.22); --line2: rgba(255,255,255,.12);
  --accent: #F8E9A1; --accent-ink: #FFF5C8; --tint: rgba(255,255,255,.14); --onaccent: #24382F;
  --paper-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"), linear-gradient(160deg, #2F4A3E, #24382F);
  --send-bg: #F8E9A1; --today-bg: #F8E9A1; --card: #2A4237;
  --fixed-bg: rgba(255,255,255,.12); --fixed-line: rgba(255,255,255,.75); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.22); --paper-solid: #2A4237; --over-fixed-bg: rgba(255,255,255,.22); --over-bg: rgba(248,233,161,.3);
  --task-edge: rgba(255,255,255,.5); --box-bg: rgba(0,0,0,.22); --box-line: rgba(255,255,255,.35);
}
body[data-theme="vapor"] {
  --ink: #FFFFFF; --muted: #FFD6F1; --faint: #D69BC7; --paper: transparent; --line: rgba(255,255,255,.22); --line2: rgba(255,255,255,.12);
  --accent: #00F0FF; --accent-ink: #CFFDFF; --tint: rgba(0,240,255,.22); --onaccent: #2B0A4E;
  --paper-bg: repeating-linear-gradient(0deg, rgba(0,240,255,.16) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(0,240,255,.16) 0 1px, transparent 1px 28px), linear-gradient(180deg, #2B0A4E 0%, #5B1B7A 45%, #C2419A 100%);
  --send-bg: linear-gradient(135deg, #00F0FF, #FF6EC7); --today-bg: linear-gradient(135deg, #00F0FF, #FF6EC7); --card: #3A1160;
  --fixed-bg: rgba(0,0,0,.5); --fixed-line: rgba(255,255,255,.75); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.3); --paper-solid: #2B0A4E; --over-fixed-bg: rgba(0,0,0,.7); --over-bg: rgba(0,240,255,.3);
  --task-edge: rgba(255,255,255,.6); --box-bg: rgba(0,0,0,.3); --box-line: rgba(255,255,255,.35);
}
body[data-theme="candy"] {
  --ink: #3D1F4A; --muted: #6F5680; --faint: #A995B5; --paper: transparent; --line: rgba(61,31,74,.16); --line2: rgba(61,31,74,.09);
  --accent: #FF5FA2; --accent-ink: #B8286E; --tint: rgba(255,255,255,.6); --onaccent: #FFFFFF;
  --paper-bg: linear-gradient(135deg, #FFE1EC 0%, #E8FFF3 50%, #E9E1FF 100%);
  --send-bg: linear-gradient(135deg, #FF5FA2, #8B5CF6); --today-bg: linear-gradient(135deg, #FF5FA2, #8B5CF6); --card: #FFFFFF;
  --fixed-bg: rgba(61,31,74,.28); --fixed-line: rgba(61,31,74,.65); --fixed-ink: #2A1233; --col-bg: rgba(255,255,255,.45); --paper-solid: #F6E6F0; --over-fixed-bg: rgba(61,31,74,.45); --over-bg: rgba(255,95,162,.25);
  --task-edge: rgba(255,255,255,.5); --box-bg: rgba(255,255,255,.65); --box-line: rgba(61,31,74,.25);
}
body[data-theme="lava"] {
  --ink: #FFF3EA; --muted: #F5C9B0; --faint: #A87A66; --paper: transparent; --line: rgba(255,255,255,.16); --line2: rgba(255,255,255,.09);
  --accent: #FF7A1A; --accent-ink: #FFC79A; --tint: rgba(255,122,26,.22); --onaccent: #1A0800;
  --paper-bg: radial-gradient(ellipse 90% 50% at 50% 110%, rgba(255,90,0,.85), rgba(255,0,0,.35) 40%, transparent 70%), #0A0404;
  --send-bg: linear-gradient(135deg, #FF7A1A, #FF2D2D); --today-bg: linear-gradient(135deg, #FF7A1A, #FF2D2D); --card: #1A0A0A;
  --fixed-bg: rgba(0,0,0,.6); --fixed-line: rgba(255,255,255,.65); --fixed-ink: #FFFFFF; --col-bg: rgba(0,0,0,.35); --paper-solid: #0A0404; --over-fixed-bg: rgba(0,0,0,.8); --over-bg: rgba(255,122,26,.3);
  --task-edge: rgba(255,255,255,.45); --box-bg: rgba(0,0,0,.35); --box-line: rgba(255,255,255,.3);
}
body[data-theme="aero"] {
  --ink: #0B2A4A; --muted: #2F5F86; --faint: #6D96B8; --paper: rgba(255,255,255,.55); --line: rgba(11,42,74,.16); --line2: rgba(11,42,74,.09);
  --accent: #0A84FF; --accent-ink: #0554B3; --tint: rgba(255,255,255,.58); --onaccent: #FFFFFF;
  --paper-bg: linear-gradient(180deg, #D6F4FF 0%, #8ADBFF 28%, #4FC3F7 52%, #B9F0B2 80%, #79D07E 100%);
  --send-bg: linear-gradient(180deg, #9EE6FF 0%, #2E9BFF 50%, #0A6FD8 100%); --today-bg: linear-gradient(180deg, #9EE6FF 0%, #2E9BFF 50%, #0A6FD8 100%); --card: #F3FBFF;
  --fixed-bg: rgba(255,255,255,.6); --fixed-line: rgba(11,42,74,.55); --fixed-ink: #0B2A4A; --col-bg: rgba(255,255,255,.3); --paper-solid: #BDEBFF; --over-fixed-bg: rgba(255,255,255,.8); --over-bg: rgba(10,132,255,.25);
  --task-edge: rgba(255,255,255,.6); --box-bg: rgba(255,255,255,.72); --box-line: rgba(11,42,74,.25);
}
body[data-theme="dorfic"] {
  --ink: #111111; --muted: #4A4A4A; --faint: #8A8A8A; --paper: #FFFFFF; --line: rgba(0,0,0,.18); --line2: rgba(0,0,0,.1);
  --accent: #FF6A00; --accent-ink: #B84A00; --tint: rgba(255,106,0,.12); --onaccent: #FFFFFF;
  --paper-bg: #F5F5F5; --send-bg: #FF6A00; --today-bg: #FF6A00; --card: #FFFFFF;
  --fixed-bg: #E4E4E4; --fixed-line: #111111; --fixed-ink: #111111; --col-bg: rgba(0,0,0,.05); --paper-solid: #F5F5F5; --over-fixed-bg: #CFCFCF; --over-bg: rgba(255,106,0,.28);
  --task-edge: rgba(0,0,0,.35); --now: #E5322D; --box-bg: #FFFFFF; --box-line: #111111;
}
body[data-theme="doric"] {
  --ink: #2B2926; --muted: #6B6560; --faint: #A39C93; --paper: rgba(255,255,255,.6); --line: rgba(60,50,40,.18); --line2: rgba(60,50,40,.1);
  --accent: #B8962E; --accent-ink: #7A6218; --tint: rgba(184,150,46,.14); --onaccent: #FFFFFF;
  --paper-bg: linear-gradient(180deg, #F7F5F0, #EEEAE2);
  --send-bg: linear-gradient(180deg, #D4B44A, #A8862A); --today-bg: linear-gradient(180deg, #D4B44A, #A8862A); --card: #FFFDF8;
  --fixed-bg: #D9D3C7; --fixed-line: #7A7062; --fixed-ink: #2B2926; --col-bg: rgba(60,50,40,.06); --paper-solid: #F4F1EA; --over-fixed-bg: #C5BDAE; --over-bg: rgba(184,150,46,.3);
  --box-bg: rgba(255,255,255,.75); --box-line: rgba(60,50,40,.35);
}
body[data-theme="news"] {
  --ink: #111111; --muted: #444444; --faint: #8A8A8A; --paper: #F4F1EA; --line: #C9C4B8; --line2: #E1DDD2;
  --accent: #B3261E; --accent-ink: #8E1C16; --tint: #EDE7DA; --onaccent: #FFFFFF;
  --paper-bg: #F4F1EA; --send-bg: #B3261E; --today-bg: #B3261E; --card: #FFFFFF;
  --fixed-bg: #D8D3C6; --fixed-line: #6B665C; --fixed-ink: #111111; --col-bg: #ECE8DF; --paper-solid: #F4F1EA; --over-fixed-bg: #C4BFB0; --over-bg: #E4C7C4;
  --box-bg: #FFFFFF; --box-line: #9A958A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper-bg); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body[data-theme="terminal"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
body[data-theme="news"] { font-family: Georgia, "Times New Roman", Times, serif; }
body[data-theme="doric"] { font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
body[data-theme="contrast"] { font-size: 17px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }

.app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; max-width: 540px; margin: 0 auto; padding: 12px 18px 0; }

/* Drawn art behind some themes (web/scenes.js): a fixed layer under the app that never catches a tap. */
#scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#scene:empty { display: none; }
#scene svg { width: 100%; height: 100%; display: block; }
.sc-bob, .sc-spin, .sc-spin-r, .sc-pulse, .sc-drift, .sc-fly, .sc-swim, .sc-swim-r, .sc-rise, .sc-blink, .sc-sway, .sc-rayer { transform-box: fill-box; transform-origin: center; }
.sc-bob { animation: sc-bob var(--d, 7s) ease-in-out infinite alternate; }
.sc-rise { animation: sc-rise var(--d, 20s) linear infinite; }
.sc-spin { animation: sc-spin var(--d, 90s) linear infinite; }
.sc-spin-r { animation: sc-spin-r var(--d, 90s) linear infinite; }
.sc-pulse { animation: sc-pulse var(--d, 8s) ease-in-out infinite alternate; }
.sc-hue { animation: sc-hue 45s linear infinite; }
.sc-drift { animation: sc-drift var(--d, 90s) ease-in-out infinite alternate; }
.sc-fly { animation: sc-fly var(--d, 70s) linear infinite; }
.sc-swim { animation: sc-swim var(--d, 60s) linear infinite; }
.sc-swim-r { animation: sc-swim-r var(--d, 60s) linear infinite; }
.sc-blink { animation: sc-blink var(--d, 3s) ease-in-out infinite; }
.sc-sway { transform-origin: 50% 100%; animation: sc-sway var(--d, 5s) ease-in-out infinite alternate; }
.sc-rayer { transform-origin: 50% 0%; animation: sc-ray var(--d, 8s) ease-in-out infinite alternate, sc-sway var(--d2, 14s) ease-in-out infinite alternate; }
.sc-scan { animation: sc-scan 14s linear infinite; }
.sc-fade { animation: sc-ray var(--d, 4s) ease-in-out infinite alternate; }
.sc-sweep { animation: sc-sweep 26s linear infinite; }
@keyframes sc-scan { from { transform: translateY(0); } to { transform: translateY(800px); } }
@keyframes sc-sweep { from { transform: translateX(0); } to { transform: translateX(1700px); } }
@keyframes sc-bob { from { transform: translateY(-6px) rotate(-1deg); } to { transform: translateY(6px) rotate(1deg); } }
@keyframes sc-rise { from { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { transform: translateY(-1500px); opacity: 0; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-spin-r { to { transform: rotate(-360deg); } }
@keyframes sc-pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes sc-hue { to { filter: hue-rotate(360deg); } }
@keyframes sc-drift { from { transform: translateX(0); } to { transform: translateX(260px); } }
@keyframes sc-fly { from { transform: translateX(-120px); } to { transform: translateX(1400px); } }
@keyframes sc-swim { from { transform: translateX(-300px); } to { transform: translateX(1500px); } }
@keyframes sc-swim-r { from { transform: translateX(1500px); } to { transform: translateX(-300px); } }
@keyframes sc-blink { 0%, 100% { opacity: 0.05; } 50% { opacity: 1; } }
@keyframes sc-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes sc-ray { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #scene * { animation: none !important; } }
/* Text over busy art gets a soft shadow so it stays readable; buttons and chips keep their own colors. */
body[data-theme="dmt"] .app, body[data-theme="money"] .app, body[data-theme="nature"] .app, body[data-theme="ocean"] .app { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
body[data-theme="dmt"] .app .nudge, body[data-theme="money"] .app .nudge, body[data-theme="nature"] .app .nudge, body[data-theme="ocean"] .app .nudge,
body[data-theme="dmt"] .app .chip, body[data-theme="money"] .app .chip, body[data-theme="nature"] .app .chip, body[data-theme="ocean"] .app .chip,
body[data-theme="dmt"] .app .btn, body[data-theme="money"] .app .btn, body[data-theme="nature"] .app .btn, body[data-theme="ocean"] .app .btn { text-shadow: none; }
.loading { color: var(--faint); padding: 40px 0; text-align: center; }

.top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; margin-bottom: 6px; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.link { color: var(--accent); font-weight: 600; font-size: 14.5px; padding: 6px 0; }
.link.quiet { color: var(--muted); font-weight: 500; }
.tabs { display: flex; gap: 4px; }
.tabs .tab { font-size: 14.5px; padding: 6px 14px; color: var(--muted); }
.tabs .tab.on { background: var(--tint); color: var(--accent); font-weight: 600; }

.hdr { display: flex; justify-content: space-between; align-items: flex-end; margin: 4px 0 12px; }
.hdr .day { font-size: 32px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.hdr .date { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.pill { font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--tint); padding: 5px 12px; margin-bottom: 3px; }
.pill.action { cursor: pointer; }

.strip { display: grid; grid-template-columns: 26px repeat(7, 1fr) 26px; gap: 2px; align-items: end; margin-bottom: 10px; }
.strip .d { text-align: center; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.strip .d b { display: block; margin: 4px auto 0; width: 32px; height: 32px; line-height: 32px; font-size: 15px; font-weight: 600; color: var(--ink); }
.strip .d.past b { color: var(--faint); }
.strip .d.today b { color: var(--accent); }
.strip .d.selected b { background: var(--today-bg); color: var(--onaccent); }
.strip .arrow { color: var(--faint); font-size: 20px; text-align: center; padding-bottom: 4px; cursor: pointer; }

.main { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }

/* Whole-day things sit in a band above the hours. */
.allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px 34px; }
.allday .ad { font-size: 13px; font-weight: 600; padding: 5px 12px; background: var(--fixed-bg); color: var(--fixed-ink); border: 1px solid var(--fixed-line); }

.tl { position: relative; border-top: 1px solid var(--line2); }
.h { position: absolute; left: 34px; right: 0; border-top: 1px solid var(--line2); }
.h span { position: absolute; left: -34px; top: -8px; font-size: 11px; color: var(--faint); letter-spacing: .02em; }
.blk {
  position: absolute; left: 36px; right: 0; padding: 0 10px; font-size: 13px; font-weight: 500; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: default;
  box-shadow: 0 0 0 1px var(--paper-solid);
}
.blk.over { box-shadow: 0 0 0 2px var(--paper-solid); }
.blk.over.plan { background: var(--over-bg); }
.blk.over.fixed { background: var(--over-fixed-bg); }
.blk .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk .t { color: inherit; opacity: .8; font-weight: 400; flex: none; font-size: 12px; }
.blk.tall .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.blk.tall .txt .title { white-space: normal; }
/* A block longer than two and a half hours keeps its words at the top of whatever part of it is on screen. */
.blk.tall.long { justify-content: flex-start; padding-top: 8px; overflow: visible; }
.blk.tall.long .txt { position: sticky; top: 6px; overflow: hidden; }
.blk.plan { background: var(--tint); color: var(--accent-ink); border-left: 3px solid var(--accent); cursor: pointer; }
/* Every task gets its own strong color, the same one every time it appears. White text on all of them. */
.c0 { --task: #2F6FED; } .c1 { --task: #15803D; } .c2 { --task: #EA580C; } .c3 { --task: #7E22CE; } .c4 { --task: #0F766E; } .c5 { --task: #DB2777; } .c6 { --task: #B45309; } .c7 { --task: #DC2626; }
.blk.plan[class*=" c"], .blk.done[class*=" c"] { background: var(--task); color: #FFFFFF; border-left: 3px solid rgba(0, 0, 0, .3); }
.blk.unconfirmed[class*=" c"] { background: color-mix(in srgb, var(--paper-solid) 75%, transparent); color: var(--task); border: 2px dashed var(--task); border-left-width: 3px; }
.bar.plan[class*=" c"], .bar.done[class*=" c"] { background: var(--task); }
.bar.unconfirmed[class*=" c"] { background: color-mix(in srgb, var(--paper-solid) 75%, transparent); border: 1px dashed var(--task); }
/* The edge that keeps a task block apart from a colorful or dark background. Transparent on plain light themes. */
.blk[class*=" c"], .bar[class*=" c"] { outline: 1px solid var(--task-edge); outline-offset: -1px; }
.blk.fixed { background: var(--fixed-bg); color: var(--fixed-ink); border: 1px solid var(--fixed-line); }
.blk.done { opacity: .6; }
.blk.done .title { text-decoration: line-through; }
.blk.done::after { content: "\2713"; margin-left: auto; }
.blk.unconfirmed { background: transparent; border: 1.5px dashed var(--accent); border-left-width: 3px; }
.blk.tall { flex-direction: column; align-items: flex-start; justify-content: center; white-space: normal; line-height: 1.25; padding: 6px 10px; }
.blk.tall small { font-weight: 400; opacity: .85; font-size: 12px; }
.blk.glow { animation: glow 1s ease-out; }
@keyframes glow { 0% { outline: 2px solid var(--accent); outline-offset: 1.5px; } 100% { outline: 2px solid transparent; outline-offset: 1.5px; } }
.now { position: absolute; left: 32px; right: 0; border-top: 1.5px solid var(--now); z-index: 40; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--now); }

/* Chalkboard: the task colors become pastel chalks with dark slate text, still strong against the board. */
body[data-theme="chalk"] .c0 { --task: #9EC5FF; } body[data-theme="chalk"] .c1 { --task: #A8E6B0; } body[data-theme="chalk"] .c2 { --task: #FFC59E; } body[data-theme="chalk"] .c3 { --task: #D9B8FF; }
body[data-theme="chalk"] .c4 { --task: #9EE6DC; } body[data-theme="chalk"] .c5 { --task: #FFB3D1; } body[data-theme="chalk"] .c6 { --task: #F3D89A; } body[data-theme="chalk"] .c7 { --task: #FFA8A8; }
body[data-theme="chalk"] .blk.plan[class*=" c"], body[data-theme="chalk"] .blk.done[class*=" c"] { color: #1E2E27; border-left-color: rgba(0, 0, 0, .25); }
/* Blueprint: the blue task color would sit on the blue background, so it becomes a light blue with dark text there. */
body[data-theme="blueprint"] .c0 { --task: #BFDBFE; }
body[data-theme="blueprint"] .blk.c0.plan, body[data-theme="blueprint"] .blk.c0.done { color: #0B1F44; border-left-color: rgba(0, 0, 0, .25); }
body[data-theme="blueprint"] .wk .bar.c0 span { color: #0B1F44; }
/* High contrast: darker task colors so white text passes the strictest contrast level, black edges, thicker borders. */
body[data-theme="contrast"] .c0 { --task: #1D4ED8; } body[data-theme="contrast"] .c1 { --task: #166534; } body[data-theme="contrast"] .c2 { --task: #9A3412; } body[data-theme="contrast"] .c3 { --task: #6B21A8; }
body[data-theme="contrast"] .c4 { --task: #115E59; } body[data-theme="contrast"] .c5 { --task: #9D174D; } body[data-theme="contrast"] .c6 { --task: #92400E; } body[data-theme="contrast"] .c7 { --task: #991B1B; }
body[data-theme="contrast"] .blk[class*=" c"], body[data-theme="contrast"] .bar[class*=" c"] { outline-width: 2px; outline-offset: -2px; }
body[data-theme="contrast"] .blk.fixed, body[data-theme="contrast"] .bar.fixed, body[data-theme="contrast"] .allday .ad { border-width: 2px; }
body[data-theme="contrast"] .compose textarea, body[data-theme="contrast"] .field, body[data-theme="contrast"] .sec select { border-width: 2px; }
body[data-theme="contrast"] .prompts .chip { border: 1.5px solid #000000; }
body[data-theme="contrast"] .blk, body[data-theme="contrast"] .link, body[data-theme="contrast"] .answer { font-weight: 600; }

.answer { font-size: 14.5px; color: var(--ink); padding: 10px 2px 6px; line-height: 1.5; animation: fadein .35s ease-out; min-height: 22px; }
.answer .undo { color: var(--accent); font-weight: 600; margin-left: 8px; font-size: 14.5px; }
.answer.busy { color: var(--faint); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* One row, left to right, on every screen. It scrolls sideways; the fade on the right says there is more. */
.prompts { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
.prompts::-webkit-scrollbar { display: none; }
.prompts .chip { flex: none; font-size: 13.5px; padding: 8px 13px; background: var(--tint); color: var(--accent-ink); white-space: nowrap; }
.prompts .chip.choice { background: var(--send-bg); color: var(--onaccent); font-weight: 600; }
/* The one-time bar on first use: a nudge toward the theme picker. */
.nudge { display: flex; align-items: center; gap: 8px; background: var(--tint); color: var(--accent-ink); padding: 8px 12px; margin: 6px 0 2px; font-size: 13.5px; line-height: 1.4; animation: fadein .35s ease-out; }
.nudge .nudgetext { flex: 1; text-align: left; color: inherit; font-weight: 600; padding: 2px 0; }
.nudge .x { color: inherit; font-size: 20px; line-height: 1; padding: 0 4px; opacity: .8; }
.compose { display: flex; align-items: flex-end; gap: 8px; padding: 6px 0 14px; }
.compose textarea {
  flex: 1; resize: none; border: 1px solid var(--box-line); background: var(--box-bg); color: var(--ink); padding: 11px 16px; font-size: 16px; line-height: 1.35;
  min-height: 46px; max-height: 132px; outline: none;
}
.compose textarea::placeholder { color: var(--faint); }
.compose textarea:focus { border-color: var(--accent); }
.compose .send { width: 46px; height: 46px; background: var(--send-bg); display: flex; align-items: center; justify-content: center; flex: none; }
.compose .send svg { width: 18px; height: 18px; stroke: var(--onaccent); }
.compose .send:disabled { opacity: .5; cursor: default; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 8px 40px; }
.empty .big { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.empty p { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; max-width: 300px; }
.empty .eg { font-size: 14px; color: var(--accent-ink); background: var(--tint); padding: 9px 16px; margin: 4px 0; cursor: pointer; }

.signin { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0 4px 80px; max-width: 360px; margin: 0 auto; width: 100%; }
.signin .brand { font-size: 16px; margin-bottom: 24px; }
.signin .big { font-size: 28px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.signin p { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.field { display: block; width: 100%; border: 1px solid var(--box-line); background: var(--box-bg); padding: 13px 14px; font-size: 16px; margin-bottom: 10px; outline: none; }
.field:focus { border-color: var(--accent); }
.btn { display: block; width: 100%; text-align: center; padding: 14px 18px; font-size: 15.5px; font-weight: 600; background: var(--send-bg); color: var(--onaccent); }
.note { font-size: 13px; color: var(--faint); margin-top: 14px; line-height: 1.5; }

.wkhead { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.wkhead .d { text-align: center; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.wkhead .d b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.wkhead .d.today b { color: var(--accent); }
.wkall { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.wkall .ad { display: block; font-size: 10px; line-height: 1.2; padding: 3px 4px; margin-bottom: 2px; background: var(--fixed-bg); color: var(--fixed-ink); border: 1px solid var(--fixed-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.wk { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; height: 440px; }
.wk .hh { position: relative; font-size: 10.5px; color: var(--faint); }
.wk .hh span { position: absolute; left: 0; }
.wk .dc { position: relative; background: var(--col-bg); cursor: pointer; }
.wk .dc.today { background: var(--tint); }
.wk .bar { position: absolute; left: 3px; right: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--paper-solid); }
.wk .bar span { display: none; }
.bar.fixed { background: var(--fixed-bg); border: 1px solid var(--fixed-line); }
.bar.plan { background: var(--accent); }
.bar.done { background: var(--accent); opacity: .5; }
.bar.unconfirmed { background: transparent; border: 1px dashed var(--accent); }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin: 12px 0 0; flex-wrap: wrap; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.legend i { display: inline-block; width: 11px; height: 11px; flex: none; }

.sec { margin-bottom: 14px; }
.sec h3 { font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; display: flex; justify-content: space-between; }
.sec h3 span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.sec .it { font-size: 15.5px; padding: 11px 0; border-bottom: 1px solid var(--line2); display: flex; justify-content: space-between; gap: 10px; align-items: center; line-height: 1.35; }
.sec .it:last-child { border-bottom: 0; }
.sec .it span.meta { color: var(--muted); font-size: 13px; text-align: right; }
.sec .it .x { color: var(--faint); font-size: 20px; padding: 0 8px; line-height: 1; }
.sec .it.done { color: var(--muted); text-decoration: line-through; }
.sec .it.quiet { color: var(--faint); font-size: 14.5px; }
.sec select { border: 1px solid var(--box-line); background: var(--box-bg); padding: 7px 10px; font-size: 14.5px; color: var(--ink); }
.sec .danger { color: #C2410C; }
body[data-theme="lava"] .sec .danger, body[data-theme="terminal"] .sec .danger, body[data-theme="dmt"] .sec .danger { color: #FF8A65; }

/* Onboarding cards hover over the app. */
.tour { position: fixed; inset: 0; background: rgba(20, 20, 30, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.tour .card { background: var(--card); color: var(--ink); max-width: 380px; width: 100%; padding: 28px 26px 22px; }
.tour .dots { display: flex; gap: 6px; margin-bottom: 16px; }
.tour .dots i { width: 6px; height: 6px; background: var(--line); }
.tour .dots i.on { background: var(--accent); }
.tour .t1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; line-height: 1.25; }
.tour p { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin-bottom: 22px; }
.tour .row { display: flex; justify-content: space-between; align-items: center; }
.tour .btn { width: auto; padding: 11px 20px; }

/* Computer layout: week or goals on the left, the day on the right. */
@media (min-width: 900px) {
  .app { max-width: 1140px; padding: 16px 28px 0; }
  .desk { flex: 1; display: grid; grid-template-columns: 1fr 400px; gap: 28px; min-height: 0; }
  .desk .left { min-height: 0; overflow-y: auto; }
  .desk .right { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); padding-left: 24px; }
  .desk .right .main { flex: 1; }
  .wk { height: calc(100vh - 262px); min-height: 420px; }
  .strip { display: none; }
  .wk .bar span { display: block; font-size: 11px; line-height: 1.2; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
  .wk .bar.plan span, .wk .bar.done span { color: var(--onaccent); }
  .wk .bar.fixed span { color: var(--fixed-ink); }
  .wk .bar.unconfirmed span { color: var(--accent-ink); }
  body[data-theme="chalk"] .wk .bar.plan span, body[data-theme="chalk"] .wk .bar.done span { color: #1E2E27; }
}

/* Sign-in, subscription, and delete screens (deployed version) */
.signin .brand .logo { display: block; height: 34px; width: auto; margin: 0 auto; }
.signin .err { color: #C2410C; font-weight: 600; margin: -6px 0 12px; }
.signin .note.notice { color: var(--ink); background: var(--box-bg); border: 1px solid var(--box-line); padding: 10px 12px; }
.signin .note .link { font-size: 13px; padding: 0; }
.signin .note a { color: var(--accent); }
.btn.danger { background: #C2410C; }
.sec .it.quiet span { color: var(--muted); }