/* Tokens first: each design only overrides variables, so components are written once. */
:root,[data-design=bold]{
  color-scheme:dark;
  --font:Arial,'Segoe UI',sans-serif;
  --page:#120b20;--page-art:radial-gradient(ellipse at 95% 0%,#40205d 0%,#201030 35%,#120b20 75%);
  --text:#f7f3ff;--muted:#b8a9ce;--accent:#c0ff38;--accent-hover:#d3ff77;--on-accent:#160d23;--accent-edge:#688b26;
  --surface:#21142f;--surface-2:#30203f;--line:#473054;--field:#150d23;
  --axis:#c0ff38;--grid:#b995de;--tick:#b9a5ce;--tick-strong:#efe6fa;--now:#ff4d5e;
  --on-block:#1c1226;--block-depth:0 5px 0 var(--edge),0 9px 16px #00000038;--block-radius:9px;--chip:#1c122626;
  --c-lime:#c0ff38;--e-lime:#688b26;--c-violet:#b69aff;--e-violet:#68508f;--c-pink:#ff51c6;--e-pink:#99297d;--c-sky:#4cd5ff;--e-sky:#1f7fa0;
  --c-coral:#ff8a65;--e-coral:#a8452a;--c-mint:#6ee7b7;--e-mint:#2f8a6b;--c-gold:#ffd23f;--e-gold:#9a7a10;--c-slate:#94a3b8;--e-slate:#52627a;
}
[data-design=daybook]{
  color-scheme:light;
  --page:#faf6ed;--page-art:none;
  --text:#4b4132;--muted:#877a64;--accent:#926039;--accent-hover:#7c5030;--on-accent:#fffaf1;--accent-edge:#6d4728;
  --surface:#f2ecdf;--surface-2:#e6dbc6;--line:#d5c7af;--field:#fffaf1;
  --axis:#926039;--grid:#a8977a;--tick:#877a64;--tick-strong:#4b4132;--now:#c8452f;
  --on-block:#4b4132;--block-depth:0 2px 3px #493a2018,0 5px 12px #493a2014;--block-radius:7px;--chip:#ffffff80;
  --c-lime:#dce2c7;--c-violet:#e4cfd1;--c-pink:#eed9b5;--c-sky:#d3dde6;--c-coral:#f0cfc4;--c-mint:#cfe6dc;--c-gold:#efe3b8;--c-slate:#d5d9de;
}
[data-design=standard]{
  color-scheme:dark;
  --font:'Segoe UI',Arial,sans-serif;
  --page:#0f172a;--page-art:none;
  --text:#e2e8f0;--muted:#94a3b8;--accent:#60a5fa;--accent-hover:#93c5fd;--on-accent:#0f172a;--accent-edge:#2563eb;
  --surface:#182235;--surface-2:#26364d;--line:#2f3f57;--field:#0f172a;
  --axis:#60a5fa;--grid:#64748b;--tick:#94a3b8;--tick-strong:#e2e8f0;--now:#ff6b72;
  --on-block:#e8edf5;--block-depth:inset 3px 0 0 var(--edge),0 2px 6px #0006;--block-radius:7px;--chip:#0000003d;--handle:#ffffff40;
  --c-lime:#1e3a66;--e-lime:#60a5fa;--c-violet:#393053;--e-violet:#a78bda;--c-pink:#4a3a1c;--e-pink:#d7a85a;--c-sky:#1f3b36;--e-sky:#52c2a0;
  --c-coral:#432a28;--e-coral:#e8806a;--c-mint:#1b3a40;--e-mint:#4bbdce;--c-gold:#3d3718;--e-gold:#d9b93a;--c-slate:#2a3342;--e-slate:#8c9bb2;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:16px;color:var(--text);background:var(--page)}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.no-script{padding:24px}

.page{min-height:100svh;display:flex;flex-direction:column;background:var(--page-art) var(--page);overflow-x:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px clamp(16px,3vw,40px) 0}
.brand-group{display:flex;flex-direction:column;gap:2px}
.brand{font-size:1.6rem;font-weight:700;letter-spacing:-1px}.brand span{color:var(--accent)}
.brand-credit{font-size:.75rem;color:var(--muted)}
.account-button{display:flex;align-items:center;gap:10px;background:#fff;color:#3c4043;border-radius:999px;padding:9px 16px;font-size:.875rem;box-shadow:0 2px 6px #0003;max-width:220px}
.account-button #account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.google-letter{display:flex}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0 8px;min-width:0}
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;padding:0 clamp(16px,3vw,40px);margin-bottom:10px}
.view-range{margin:0 auto 0 0;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:650;letter-spacing:-1px;color:var(--accent);white-space:nowrap;min-width:0;font-variant-numeric:tabular-nums}
[data-design=daybook] .view-range{font-family:Georgia,serif;font-weight:400;color:var(--text)}
[data-design=standard] .view-range{color:var(--text)}
.now-button{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:.8125rem;transition:transform .16s cubic-bezier(.16,1,.3,1)}
.now-button:hover{background:var(--surface-2)}
.now-button svg{flex:none}
.now-dot{width:8px;height:8px;border-radius:50%;background:var(--now)}
.now-button[data-side=left]:before{content:'←';color:var(--now);font-weight:700}
.now-button[data-side=right]:after{content:'→';color:var(--now);font-weight:700}
.zoom-group{display:flex;align-items:center;gap:8px}
.zoom-presets,.zoom-steps{display:flex;gap:2px;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--surface)}
.zoom-presets button{padding:6px 10px;border-radius:7px;font-size:.8125rem;color:var(--muted);transition:background .15s ease,color .15s ease}
.zoom-presets button:hover{color:var(--text)}
.zoom-presets button[aria-pressed=true]{background:var(--surface-2);color:var(--accent)}
[data-design=daybook] .zoom-presets button[aria-pressed=true]{color:var(--text)}
.zoom-steps button{width:30px;height:30px;border-radius:7px;font-size:1.1rem;line-height:1;color:var(--muted)}
.zoom-steps button:hover{background:var(--surface-2);color:var(--text)}
.rows-control{display:flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--muted)}
.rows-control .zoom-steps{align-items:center}
.row-count{min-width:20px;text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.show-hidden{padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--accent);font-size:.75rem;white-space:nowrap}
.show-hidden:hover{background:var(--surface-2)}
.add-button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--on-accent);box-shadow:0 3px 0 var(--accent-edge);flex:none;transition:transform .12s ease}
.add-button:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* The timeline runs edge to edge: time carries on past the window. */
.stage{position:relative;width:100%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:cell}
.stage.space-pan,.stage.space-pan .m{cursor:grab}
.stage.panning,.stage.panning .m{cursor:grabbing}
.stage.dragging-mission,.stage.dragging-mission .m{cursor:grabbing}
.row-remove{position:absolute;left:6px;top:0;z-index:7;width:24px;height:24px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-size:1rem;line-height:1;box-shadow:0 2px 6px #0004;cursor:pointer}
.row-remove:hover{background:var(--surface-2);color:var(--text)}
.axis{position:absolute;inset:0;width:100%;pointer-events:none}
.axis-zone{position:absolute}
.blocks{position:absolute;inset:0;pointer-events:none}

.m{position:absolute;left:0;top:0;height:52px;border-radius:var(--block-radius);background:var(--bg,var(--c-lime));color:var(--on-block);box-shadow:var(--block-depth);pointer-events:auto;cursor:grab;will-change:transform}
.m.lime,.swatch.lime{--bg:var(--c-lime);--edge:var(--e-lime)}.m.violet,.swatch.violet{--bg:var(--c-violet);--edge:var(--e-violet)}.m.pink,.swatch.pink{--bg:var(--c-pink);--edge:var(--e-pink)}.m.sky,.swatch.sky{--bg:var(--c-sky);--edge:var(--e-sky)}
.m.coral,.swatch.coral{--bg:var(--c-coral);--edge:var(--e-coral)}.m.mint,.swatch.mint{--bg:var(--c-mint);--edge:var(--e-mint)}.m.gold,.swatch.gold{--bg:var(--c-gold);--edge:var(--e-gold)}.m.slate,.swatch.slate{--bg:var(--c-slate);--edge:var(--e-slate)}
.m.dragging{z-index:6;filter:brightness(1.04)}
.m.draft{opacity:.75;pointer-events:none;animation:draft-in .12s cubic-bezier(.16,1,.3,1)}
@keyframes draft-in{from{opacity:0}to{opacity:.75}}
.m.selected{outline:2px solid var(--text);outline-offset:2px}
.m:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.m-body{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 14px;overflow:hidden;pointer-events:none}
.m-title{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;line-height:1.2}
.m-dates{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;line-height:1.2;font-variant-numeric:tabular-nums}
.m-chip{position:absolute;top:3px;left:5px;padding:1px 4px;border-radius:4px;background:var(--chip);font-size:.5625rem;font-weight:700;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.m[data-size=full] .m-title{margin-top:6px}
.m[data-size=small] .m-dates{display:none}
.m[data-size=small] .m-chip{position:static;font-size:.625rem;padding:0 4px}
.m[data-size=small] .m-title{order:-1}
.m.no-chip .m-chip{display:none}
.m:not([data-label=inside]) .m-title,.m:not([data-label=inside]) .m-dates{display:none}
.m:not([data-label=inside]) .m-chip{position:static;font-size:.625rem;padding:0 4px}
.m:not([data-label=inside]) .m-body{padding:0 2px}
/* A title too long for its block sits beside it; it still acts as part of the mission. */
.m-label{position:absolute;top:50%;display:none;transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text);font-size:.875rem;font-weight:600;line-height:1.3;text-shadow:0 1px 3px var(--page),0 0 8px var(--page)}
.m[data-label=right] .m-label{display:block;left:calc(100% + 6px)}
.m[data-label=left] .m-label{display:block;right:calc(100% + 6px)}
.m[data-label=above] .m-label{display:block;top:auto;bottom:calc(100% + 2px);transform:none}
.m.slim .m-handle:after{display:none}
.m-handle{position:absolute;top:-6px;bottom:-6px;width:18px;cursor:ew-resize}
.m-handle.left{left:-6px}.m-handle.right{right:-6px}
.m-handle:after{content:'';position:absolute;top:24px;height:16px;width:2px;border-radius:2px;background:var(--handle,#1c122640)}
.m-handle.left:after{left:9px}.m-handle.right:after{right:9px}
.m.no-handles .m-handle{display:none}
@media(hover:none){.m-handle{display:none}}
.m-del{position:absolute;top:-13px;right:6px;width:25px;height:25px;border-radius:8px;background:#f3eaff;color:#8b1e52;box-shadow:0 2px 5px #0005;font-size:1rem;line-height:1;opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .1s ease,transform .1s ease;z-index:3}
.m:hover .m-del{opacity:1;pointer-events:auto;transform:none}
.m.dragging .m-del,.m.no-handles .m-del{display:none}
@media(hover:none){.m-del{display:none}}

.title-input{position:absolute;left:0;top:0;z-index:9;height:30px;padding:0 10px;border:2px solid var(--accent);border-radius:8px;background:var(--field);color:var(--text);font-size:.875rem;font-weight:600;box-shadow:0 8px 24px #0005;outline:none}

.now-line{position:absolute;left:0;top:0;width:2px;margin-left:-1px;z-index:4;pointer-events:none;background:var(--now);box-shadow:0 0 8px color-mix(in srgb,var(--now) 55%,transparent)}
.now-line span{position:absolute;top:4px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:6px;background:var(--now);color:#fff;font-size:.6875rem;font-weight:700;line-height:1.3}

.gap-hint{position:absolute;left:0;top:0;height:0;z-index:2;pointer-events:none;border-top:2px dashed color-mix(in srgb,var(--muted) 70%,transparent)}
.gap-hint:before,.gap-hint:after{content:'';position:absolute;top:-7px;width:2px;height:12px;border-radius:1px;background:color-mix(in srgb,var(--muted) 70%,transparent)}
.gap-hint:before{left:0}.gap-hint:after{left:calc(100% - 2px)}
.gap-hint span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:1px 8px;border-radius:7px;font-size:.6875rem;font-weight:700;line-height:1.4;white-space:nowrap;background:color-mix(in srgb,var(--muted) 26%,var(--page))}

.empty-hint{position:absolute;left:0;right:0;top:82px;margin:0;text-align:center;color:var(--muted);font-size:.9375rem;pointer-events:none}
.help{margin:6px 0 0;padding:0 clamp(16px,3vw,40px);text-align:center;font-size:.75rem;color:var(--muted);opacity:.6}
.help span{margin:0 4px}
@media(hover:none){.help{display:none}}

.tip{position:fixed;left:0;top:0;z-index:30;max-width:min(420px,calc(100vw - 16px));padding:6px 10px;border-radius:8px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 6px 20px #0005;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;font-variant-numeric:tabular-nums}

.update-banner{display:flex;align-items:center;gap:12px;width:fit-content;max-width:calc(100% - 32px);margin:14px clamp(16px,3vw,40px) 0;padding:9px 11px 9px 15px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.8125rem}
.update-banner button{background:var(--accent);color:var(--on-accent);border-radius:8px;padding:6px 12px;font-weight:600}
.status{position:fixed;right:16px;bottom:16px;z-index:45;margin:0;padding:9px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 28px #0005;font-size:.8125rem;max-width:min(360px,calc(100vw - 32px))}
.status:empty{display:none}

.design-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;padding:16px 16px 20px}
.footer-links{display:flex;gap:16px;font-size:.8125rem;color:var(--muted)}
.footer-links button,.footer-links a{padding:4px 0;color:inherit;font-size:inherit}
.footer-links button:hover,.footer-links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.design-switch{display:flex;gap:4px;border:1px solid var(--line);border-radius:13px;padding:4px;background:var(--surface)}
.design-switch button{padding:8px 20px;border-radius:9px;color:var(--muted);font-size:.8125rem}
.design-switch button[aria-pressed=true]{background:var(--surface-2);color:var(--accent)}
[data-design=daybook] .design-switch button[aria-pressed=true]{color:var(--text)}

.panel{position:fixed;top:0;right:0;bottom:0;z-index:20;width:340px;max-width:100vw;padding:24px 22px;overflow-y:auto;background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 32px #0003;animation:panel-in .2s cubic-bezier(.16,1,.3,1);scrollbar-width:thin}
@keyframes panel-in{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.panel-heading h2,dialog h2{margin:0;font-size:1.25rem;font-weight:600}
.panel label{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-size:.8125rem;color:var(--muted)}
.panel input:not([type=radio]),.panel select,.panel textarea{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--text);font-size:.9375rem}
.panel textarea{resize:vertical;line-height:1.45}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row label{margin-bottom:6px;min-width:0}
.form-row input{padding:10px 7px!important;font-size:.875rem!important}
.length{margin:0 0 16px;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
fieldset{border:0;padding:0;margin:0 0 16px}
legend{padding:0;margin-bottom:8px;font-size:.8125rem;color:var(--muted)}
.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.colors label{position:relative;display:block;margin:0;cursor:pointer}
.colors input{position:absolute;opacity:0;width:0;height:0}
.swatch{display:block;height:32px;border-radius:8px;background:var(--bg)}
.colors input:checked+.swatch,.colors input:focus-visible+.swatch{outline:2px solid var(--text);outline-offset:2px}
.error{margin:0 0 8px;min-height:18px;font-size:.8125rem;color:#ff8fa3;line-height:1.4}
[data-design=daybook] .error{color:#b64159}
.panel-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.primary{padding:10px 18px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:.875rem;font-weight:600}
.primary:hover{background:var(--accent-hover)}
.quiet{padding:9px 10px;border-radius:7px;color:var(--muted);font-size:.8125rem}
.quiet:hover{background:var(--surface-2);color:var(--text)}
.quiet.icon{font-size:1.5rem;line-height:1;padding:3px 9px}
.danger{color:#ff8fa3}
[data-design=daybook] .danger{color:#b64159}

dialog{width:min(420px,calc(100% - 32px));padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px #0008}
dialog::backdrop{background:#0c071bb0}
dialog p{font-size:.875rem;color:var(--muted);line-height:1.45}
#account-dialog .panel-actions{justify-content:flex-end}

.sync-line{margin:-4px 0 12px;font-size:.8125rem}.sync-line:empty{display:none}
.backup-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}
.secondary{padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:transparent;font-size:.875rem}
.secondary:hover{background:var(--surface-2)}
button:disabled{opacity:.45;cursor:not-allowed}
.danger-solid{background:#d8344f;color:#fff}.danger-solid:hover{background:#ea4a64}
.find-dialog{top:12vh;margin-top:0;padding:10px;width:min(560px,calc(100% - 24px))}
#find-input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--field);font-size:1rem}
.find-results{max-height:min(52vh,430px);overflow-y:auto;margin-top:6px;scrollbar-width:thin}
.find-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 11px;width:100%;padding:9px 10px;border-radius:9px;text-align:left}
.find-row:hover,.find-row:focus-visible{background:var(--surface-2)}
.swatch.dot{grid-row:span 2;width:14px;height:14px;margin-top:3px;border-radius:4px}
.find-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;font-weight:600}
.find-when{grid-column:2;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.find-empty{margin:12px 6px 6px}
.keys{width:100%;margin:6px 0 12px;border-collapse:collapse;font-size:.8125rem}
.keys td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.keys td:first-child{color:var(--text);white-space:nowrap}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--field);font:inherit;font-size:.6875rem}
#help-dialog a{color:var(--accent);font-size:.875rem}

/* The title takes its own line before the controls would wrap unevenly. */
@media(max-width:1380px){
  .view-range{flex-basis:100%;margin-right:0}
  .toolbar .add-button{margin-left:auto}
}
@media(max-width:820px){
  .zoom-presets button{padding:6px 7px;font-size:.75rem}
  .zoom-group{order:3;flex-basis:100%;justify-content:space-between}
  .panel{width:100%}
}
@media(max-width:520px){.zoom-presets button:nth-child(4){display:none}.design-switch button{padding:8px 14px}}