:root{
  --paper:#EFF3F1;
  --card:#FFFFFF;
  --ink:#0F2E2C;
  --granite:#5E6F6D;
  --hairline:#C7D3CE;
  --deep:#0C4257;
  --shallow:#BEDCD6;
  --land:#E7DCC0;
  --marker:#B21E63;
  --submerged:#DDE7E4;
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --body:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px);
  background-size:100% 32px;
  background-position:0 -1px;
  background-attachment:fixed;
  opacity:.999;
}
body::before{
  content:"";position:fixed;inset:0;background:var(--paper);opacity:.86;pointer-events:none;z-index:0;
}
.wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 18px 80px}
.loading{font-family:var(--mono);font-size:12px;color:var(--granite);padding:30px 0}

/* ---------- app bar ---------- */
.appbar{
  position:relative;z-index:2;display:flex;align-items:center;gap:16px;
  max-width:900px;margin:0 auto;padding:12px 18px;
  border-bottom:1px solid var(--hairline);
}
.appbar-brand{
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
.appbar-nav{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.appbar-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--granite);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent;
}
.appbar-nav a:hover{color:var(--ink)}
.appbar-nav a.active{color:var(--marker);border-bottom-color:var(--marker)}
.appbar-user{font-family:var(--mono);font-size:11px;color:var(--granite);letter-spacing:.05em}
.appbar form{margin:0}

/* ---------- masthead ---------- */
.masthead{padding:38px 0 20px;border-bottom:2px solid var(--ink)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--granite)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,54px);line-height:.98;letter-spacing:-.02em;margin:10px 0 6px}
h1 .arrow{color:var(--marker)}
.subline{font-family:var(--mono);font-size:12.5px;color:var(--granite);letter-spacing:.02em}

/* ---------- live status ---------- */
.status{
  position:sticky;top:0;z-index:20;margin:0 -18px;padding:12px 18px;
  background:var(--deep);color:#EAF4F2;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.status-row{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.status-now{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2}
.status-next{font-family:var(--mono);font-size:12px;color:#9FC6C4}
.status-next b{color:#FFF;font-weight:500}
.scrub{display:flex;align-items:center;gap:10px;margin-top:9px}
.scrub input[type=range]{flex:1;accent-color:var(--marker);height:18px}
.scrub label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8FB6B4}
button.ghost,a.ghost{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:inherit;border:1px solid rgba(94,111,109,.45);
  border-radius:2px;padding:4px 9px;cursor:pointer;text-decoration:none;display:inline-block;
}
.status button.ghost{border-color:rgba(255,255,255,.4);color:#EAF4F2}
.status button.ghost:hover{background:rgba(255,255,255,.12)}
button.ghost:hover,a.ghost:hover{background:rgba(15,46,44,.07)}
button.solid{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--marker);color:#FFF;border:1px solid var(--marker);
  border-radius:2px;padding:5px 11px;cursor:pointer;
}
button.solid:hover{filter:brightness(1.1)}
button.ghost:focus-visible,button.solid:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--marker);outline-offset:2px}

/* edit bar inside the sticky status block */
.editbar{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16);padding-top:9px}
.editbar-info{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8FB6B4}
.editbar-warn{font-family:var(--mono);font-size:11px;color:#FFD9E6}
.editbar a.ghost{border-color:rgba(255,255,255,.4);color:#EAF4F2}
.editbar a.ghost:hover{background:rgba(255,255,255,.12)}
.editbar .note-input{flex:1;min-width:180px}

/* ---------- sections ---------- */
section{margin-top:44px}
.sec-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:7px;margin-bottom:18px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;margin:0}
.sec-head .note{font-family:var(--mono);font-size:11px;color:var(--granite);margin-left:auto;text-align:right}
.sec-head .note .own{display:block;margin-bottom:4px}

/* ---------- hard deadlines ---------- */
.deadlines{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.dl{background:var(--card);border:1px solid var(--hairline);border-top:3px solid var(--marker);padding:12px 13px}
.dl .t{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em;display:block}
.dl .d{font-family:var(--mono);font-size:10.5px;color:var(--marker);letter-spacing:.1em;text-transform:uppercase}
.dl .w{font-family:var(--display);font-weight:700;font-size:15px;margin-top:5px;line-height:1.25}
.dl .s{font-size:12.5px;color:var(--granite);margin-top:4px;line-height:1.4}

/* ---------- gantt ---------- */
.gantt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--hairline);padding:14px 14px 8px}
.gantt{min-width:600px}
.g-axis{display:flex;font-family:var(--mono);font-size:10px;color:var(--granite);padding-left:74px;margin-bottom:4px}
.g-axis span{flex:1;text-align:left;letter-spacing:.04em}
.g-row{display:flex;align-items:center;margin-bottom:7px}
.g-label{width:74px;flex:none;font-family:var(--mono);font-size:10.5px;color:var(--granite);line-height:1.2}
.g-label b{display:block;color:var(--ink);font-weight:600;font-size:12px}
.g-track{position:relative;flex:1;height:26px;background:
  repeating-linear-gradient(to right,var(--hairline) 0 1px,transparent 1px calc(100%/4));
  background-size:calc(100%/4) 100%;
  border-left:1px solid var(--hairline);border-right:1px solid var(--hairline);
}
.bar{position:absolute;top:3px;height:20px;border-radius:1px;display:flex;align-items:center;overflow:hidden}
.bar span{font-family:var(--mono);font-size:9.5px;padding:0 5px;white-space:nowrap;letter-spacing:.03em}
.b-sail{background:var(--deep)}.b-sail span{color:#CFE6E4}
.b-bus{background:var(--granite)}.b-bus span{color:#F1F4F2}
.b-hike{background:var(--marker)}.b-hike span{color:#FFF}
.b-city{background:var(--land)}.b-city span{color:#5C4F2E}
.b-term{background:var(--shallow)}.b-term span{color:#134B47}
.needle{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--marker);z-index:3}
.needle::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;background:var(--marker);border-radius:50%}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding-left:74px;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--granite)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.legend i.b-sail{background:var(--deep)}
.legend i.b-term{background:var(--shallow)}
.legend i.b-bus{background:var(--granite)}
.legend i.b-hike{background:var(--marker)}
.legend i.b-city{background:var(--land)}

/* ---------- timeline ---------- */
.day{margin-bottom:8px}
.day-head{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px;flex-wrap:wrap}
.day-num{font-family:var(--mono);font-size:11px;color:#FFF;background:var(--ink);padding:2px 7px;letter-spacing:.1em}
.day-head h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0}
.day-head .leg{font-family:var(--mono);font-size:11px;color:var(--granite);margin-left:auto}
.tl{position:relative;border-left:2px solid var(--hairline);margin-left:52px;padding-left:0}
.ev{position:relative;display:flex;gap:14px;padding:10px 0 10px 18px;border-bottom:1px solid var(--hairline)}
.ev:last-child{border-bottom:none}
.ev::before{content:"";position:absolute;left:-7px;top:17px;width:12px;height:12px;background:var(--paper);border:2px solid var(--granite);border-radius:50%}
.ev .time{position:absolute;left:-70px;top:11px;width:52px;text-align:right;font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.ev .body{flex:1;min-width:0}
.ev .ttl{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.3}
.ev .det{font-size:13px;color:var(--granite);margin-top:3px;line-height:1.45}
.ev .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:1px 5px;margin-left:7px;vertical-align:2px;border:1px solid var(--hairline);color:var(--granite)}
.ev.hard::before{background:var(--marker);border-color:var(--marker)}
.ev.hard .tag{border-color:var(--marker);color:var(--marker)}
.ev.hard .time{color:var(--marker)}
.ev.past{opacity:.42}
.ev.past .ttl{text-decoration:line-through;text-decoration-thickness:1px}
.ev.now{background:linear-gradient(90deg,rgba(178,30,99,.09),transparent 70%)}
.ev.now::before{background:var(--marker);border-color:var(--marker);box-shadow:0 0 0 5px rgba(178,30,99,.16)}
.ev.now .ttl::after{content:"NU";font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;background:var(--marker);color:#FFF;padding:2px 5px;margin-left:8px;vertical-align:2px}
.ev.next::before{border-color:var(--marker)}
.ev-flags{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.ev-flags .flag{font-family:var(--mono);font-size:10.5px;color:var(--granite);display:flex;align-items:center;gap:5px}

/* waterline */
.waterline{position:relative;height:0;margin-left:-2px}
.waterline::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:repeating-linear-gradient(to right,var(--marker) 0 6px,transparent 6px 11px);
}
.waterline::after{
  content:attr(data-label);position:absolute;left:-70px;top:-7px;width:60px;text-align:right;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--marker);
}

/* checkbox rows */
.ck{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--hairline);cursor:pointer}
.ck:last-child{border-bottom:none}
.ck input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--marker);flex:none;cursor:pointer}
.ck span{font-size:13.5px;line-height:1.45}
.ck input:checked + span{opacity:.4;text-decoration:line-through}
.ck-edit{cursor:default;align-items:center}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.pack{background:var(--card);border:1px solid var(--hairline);padding:14px 15px}
.pack h4{font-family:var(--display);font-weight:700;font-size:14px;margin:0 0 6px;letter-spacing:.01em}
.pack h4 em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--granite);letter-spacing:.1em;display:block;margin-bottom:2px}
.pack-body{font-size:13.5px;line-height:1.5;color:var(--granite)}

/* info */
.info{background:var(--card);border:1px solid var(--hairline);padding:15px 16px}
.info + .info{margin-top:12px}
.info h4{font-family:var(--display);font-weight:700;font-size:14px;margin:0 0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px;margin:0}
.kv dt{font-family:var(--mono);font-size:11.5px;color:var(--granite);white-space:nowrap;padding-top:2px}
.kv dd{margin:0}
.info h4 .src{float:right;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.05em;color:var(--marker);text-decoration:none;border-bottom:1px solid rgba(178,30,99,.35);white-space:nowrap}
.info h4 .src:hover{background:rgba(178,30,99,.08)}
.links{display:grid;gap:0}
.links a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink)}
.links a:last-child{border-bottom:none}
.links a:hover .lt{color:var(--marker)}
.links .lt{font-family:var(--display);font-weight:700;font-size:14.5px;flex:none}
.links .ld{font-size:12.5px;color:var(--granite);flex:1}
.links .lu{font-family:var(--mono);font-size:10px;color:var(--marker);letter-spacing:.05em;flex:none}
.callout{border-left:3px solid var(--marker);background:var(--card);padding:12px 14px;font-size:13.5px;line-height:1.5}
.callout b{font-family:var(--display)}
/* scoped to .wrap so the site colophon below doesn't inherit it */
.wrap footer{margin-top:50px;padding-top:14px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:10.5px;color:var(--granite);line-height:1.7}
.footer-line{display:flex;gap:8px;align-items:flex-start}
a{color:var(--deep)}

/* ---------- ownership ---------- */
.colophon{
  position:relative;z-index:1;max-width:900px;margin:0 auto;
  padding:16px 18px 28px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--granite);text-align:center;
}
.colophon strong{color:var(--ink);font-weight:600}
.login-copy{
  margin:20px 0 0;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--granite);text-align:center;
}
.login-copy strong{color:var(--ink);font-weight:600}

/* ---------- inline editors ---------- */
.ed{
  font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;
  width:100%;padding:3px 6px;border:1px solid var(--hairline);border-radius:2px;
  background:rgba(255,255,255,.75);
}
.ed:focus{border-color:var(--marker);background:#fff}
.ed-area{resize:vertical;min-height:2.4em}
.ed-title{font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,40px)}
.w-narrow{max-width:200px}
.w-tiny{max-width:82px}
.status .ed{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#EAF4F2}
.status .ed::placeholder{color:#8FB6B4}

.list-tools{display:inline-flex;gap:3px;margin-top:4px}
.tool{
  font-family:var(--mono);font-size:11px;line-height:1;
  background:transparent;border:1px solid var(--hairline);border-radius:2px;
  padding:3px 6px;cursor:pointer;color:var(--granite);
}
.tool:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.tool:disabled{opacity:.3;cursor:default}
.tool.danger:hover{border-color:var(--marker);color:var(--marker)}
button.add{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px dashed var(--hairline);border-radius:2px;
  padding:6px 12px;margin-top:10px;cursor:pointer;color:var(--granite);
}
button.add:hover{border-color:var(--marker);color:var(--marker)}
button.add.sm{padding:4px 9px;font-size:9.5px;margin-top:6px}

.editor-panel{margin-top:14px;background:var(--card);border:1px solid var(--hairline);padding:14px 15px}
.editor-panel-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--granite);margin-bottom:10px}
.editor-row{border-top:1px solid var(--hairline);padding:10px 0}
.editor-row:first-of-type{border-top:none;padding-top:0}
.editor-row-head{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.editor-bar{display:flex;gap:8px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.editor-bar .ed{flex:1;min-width:110px}

/* ---------- versions ---------- */
.versions{padding:0}
.version{border-bottom:1px solid var(--hairline);padding:12px 16px}
.version:last-child{border-bottom:none}
.version.is-current{background:rgba(178,30,99,.04)}
.version-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.version-no{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--marker);flex:none}
.version-note{font-family:var(--display);font-weight:700;font-size:14.5px;flex:1;min-width:140px}
.version-meta{font-family:var(--mono);font-size:10.5px;color:var(--granite)}
.version-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--marker);color:#fff;padding:2px 6px}
.version-preview{margin-top:10px;padding-top:10px;border-top:1px dashed var(--hairline)}
.version-title{font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:2px}
.version-sub{font-family:var(--mono);font-size:11px;color:var(--granite);margin-bottom:8px}

/* ---------- diff ---------- */
.diff-summary{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--granite);margin-bottom:10px}
.diff-none{font-family:var(--mono);font-size:11.5px;color:var(--granite)}
.diff-group{margin-bottom:12px}
.diff-group:last-child{margin-bottom:0}
.diff-where{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--marker);margin-bottom:4px}
.diff-row{display:flex;gap:8px;align-items:baseline;padding:3px 0 3px 8px;border-left:2px solid var(--hairline)}
.diff-row.added{border-left-color:#2e7d5b}
.diff-row.removed{border-left-color:var(--marker)}
.diff-mark{font-family:var(--mono);font-size:12px;font-weight:600;flex:none;width:.9em;color:var(--granite)}
.diff-row.added .diff-mark{color:#2e7d5b}
.diff-row.removed .diff-mark{color:var(--marker)}
.diff-body{min-width:0;flex:1}
.diff-what{font-size:13px;overflow-wrap:anywhere}
.diff-row.removed .diff-what{text-decoration:line-through;color:var(--granite)}
.diff-values{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:2px;font-family:var(--mono);font-size:11px;line-height:1.45}
.diff-values .was{color:var(--granite);text-decoration:line-through;overflow-wrap:anywhere}
.diff-values .now{color:var(--ink);overflow-wrap:anywhere}
.diff-values .arrow{color:var(--marker);flex:none}

/* ---------- login ---------- */
.login-page{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
/* padding lives on .login-body so the artwork can run full width of the card */
.login-card{background:var(--card);border:1px solid var(--hairline);border-top:3px solid var(--marker);padding:0;width:100%;max-width:560px;overflow:hidden}
.login-art{display:block;width:100%;height:auto;border-bottom:1px solid var(--hairline)}
.login-body{padding:24px 30px 28px}
.login-card h1{font-size:34px;margin:8px 0 4px}
.login-sub{font-family:var(--mono);font-size:11.5px;color:var(--granite);margin:0 0 22px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--granite);margin-bottom:4px}
.field .ed{padding:8px 10px;font-size:15px}
.login-error{font-family:var(--mono);font-size:11.5px;color:var(--marker);margin-bottom:12px}
.login-card button.solid{width:100%;padding:10px;font-size:12px}

#blazor-error-ui{
  color-scheme:light only;background:lightyellow;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);
  box-sizing:border-box;display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;
}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}

@media (max-width:620px){
  .tl{margin-left:48px}
  .ev .time{left:-58px;width:44px;font-size:12.5px}
  .waterline::after{left:-58px;width:44px}
  .status{padding:10px 14px;margin:0 -14px}
  .wrap{padding:0 14px 60px}
  .appbar{padding:10px 14px;gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .status,.scrub,.gantt-scroll,.appbar{position:static}
  body{background:#fff}
  body::before{display:none}
  .ev.past{opacity:1}
  .scrub,.reset,.editbar,.appbar,.list-tools,button.add{display:none}
}

/* ================= checklists, info, links ================= */

.chk-bar{
  position:sticky;top:0;z-index:20;margin:0 -18px 8px;padding:12px 18px;
  background:var(--deep);color:#EAF4F2;box-shadow:0 1px 0 rgba(0,0,0,.15);
  display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
}
.chk-progress{flex:1 1 240px;min-width:0}
.chk-count{font-family:var(--mono);font-size:12px;color:#9FC6C4;margin-bottom:6px}
.chk-count strong{color:#FFF;font-weight:600;font-size:14px}
.chk-all-done{color:#9FE6C4;font-weight:500}
.bar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.bar-fill{height:100%;background:var(--marker);border-radius:3px;transition:width .2s ease}
.bar-fill.full{background:#4FBF8B}
.chk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chk-actions .ghost{border-color:rgba(255,255,255,.4);color:#EAF4F2}
.chk-actions .ghost:hover{background:rgba(255,255,255,.12)}
.chk-actions .note-input{min-width:170px}
.chk-actions .editbar-info{color:#8FB6B4}
.chk-toggle{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:#9FC6C4;cursor:pointer}
.chk-toggle input{width:15px;height:15px;accent-color:var(--marker);cursor:pointer}

.chk-group{margin-top:30px}
.chk-group-eyebrow{display:block;font-size:11px}
.chk-group-count{font-family:var(--mono);font-size:13px;color:var(--marker);font-weight:600}
.chk-list{background:var(--card);border:1px solid var(--hairline)}
.chk-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--hairline);cursor:pointer}
.chk-row:last-child{border-bottom:none}
.chk-row:hover{background:rgba(12,66,87,.03)}
.chk-row input[type=checkbox]{margin:1px 0 0;width:19px;height:19px;accent-color:var(--marker);flex:none;cursor:pointer}
.chk-text{font-size:14.5px;line-height:1.45}
.chk-row.done .chk-text{opacity:.42;text-decoration:line-through}
.chk-row-edit{cursor:default;align-items:center}
.chk-group-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chk-empty{margin:0;padding:14px;background:var(--card);border:1px dashed var(--hairline);
  font-family:var(--mono);font-size:11.5px;color:var(--granite)}

/* ================= timeline editor ================= */

.tl-bar{
  position:sticky;top:0;z-index:20;margin:0 -18px 8px;padding:12px 18px;
  background:var(--deep);color:#EAF4F2;box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.tl-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:9px}
.tl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-actions .note-input{flex:1;min-width:180px}
.tl-actions .ghost{border-color:rgba(255,255,255,.4);color:#EAF4F2}
.tl-actions .ghost:hover{background:rgba(255,255,255,.12)}
.tl-bar .editbar-info{color:#8FB6B4}
.tl-bar .solid:disabled{opacity:.45;cursor:not-allowed;filter:none}
.tl-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;font-weight:600}
.tl-pill.ok{background:rgba(79,191,139,.2);color:#9FE6C4}
.tl-pill.warn{background:rgba(240,180,60,.2);color:#F6D387}
.tl-pill.error{background:var(--marker);color:#fff}

.tl-conflicts{margin-top:26px}
.tl-conflict-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--hairline)}
.tl-conflict{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  padding:10px 14px;border-bottom:1px solid var(--hairline);font-size:13px}
.tl-conflict:last-child{border-bottom:none}
.tl-conflict.error{border-left:3px solid var(--marker)}
.tl-conflict.warn{border-left:3px solid #D9A441}
.tl-conflict-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;padding:1px 5px;flex:none}
.tl-conflict.error .tl-conflict-tag{background:var(--marker);color:#fff}
.tl-conflict.warn .tl-conflict-tag{background:#F0E0BC;color:#7A5A12}
.tl-conflict-where{font-family:var(--display);font-weight:700;font-size:13.5px}
.tl-conflict-msg{color:var(--granite);flex:1 1 260px}

.tl-day{margin-top:30px}
.tl-day-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:var(--card);border:1px solid var(--hairline);padding:12px 14px}
.tl-field{display:flex;flex-direction:column;gap:3px}
.tl-field.grow{flex:1 1 180px;min-width:0}
.tl-field span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--granite)}
.tl-day-tools{display:flex;gap:6px;align-items:center;margin-left:auto}

.tl-events{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.tl-event{background:var(--card);border:1px solid var(--hairline);border-left:3px solid var(--hairline);padding:10px 12px}
.tl-event.hard{border-left-color:var(--marker)}
.tl-event.bad{border-left-color:var(--marker);background:rgba(178,30,99,.045)}
.tl-event-main{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.tl-time{flex:0 0 108px;font-family:var(--mono);font-weight:600}
.tl-title{flex:3 1 220px;min-width:0;font-family:var(--display);font-weight:700}
.tl-tag{flex:1 1 110px;min-width:0;font-family:var(--mono);font-size:11px}
.tl-hard{display:flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:10.5px;color:var(--granite)}
.tl-hard input{width:15px;height:15px;accent-color:var(--marker);cursor:pointer}
.tl-event-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.tl-gap{font-family:var(--mono);font-size:10.5px;color:var(--granite);flex:1 1 auto}
.tl-move{flex:0 0 auto;max-width:190px;font-family:var(--mono);font-size:11px}

@media (max-width:620px){
  .chk-bar,.tl-bar{margin:0 -14px 8px;padding:10px 14px}
  .tl-time{flex:1 1 100%}
  .tl-title{flex:1 1 100%}
}

/* ---------- tidsplan: choosing what goes on the plan ---------- */

/* One flex container serves both modes: the picker sits beside the content when
   reading, and the edit-mode rows simply take a full line each. */
.tl-event{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.tl-event > .tl-event-main,
.tl-event > .ed-area,
.tl-event > .tl-event-foot{flex:1 1 100%}
.tl-pick{flex:none;display:flex;align-items:center;padding-top:1px;cursor:pointer}
.tl-pick input{width:19px;height:19px;accent-color:var(--marker);cursor:pointer}
.tl-read{flex:1;min-width:0}
.tl-read-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.tl-when{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:-.02em;flex:none}
.tl-what{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.3}
.tl-detail{font-size:13px;color:var(--granite);margin-top:3px;line-height:1.45}
.tag.hard-tag{border-color:var(--marker);color:var(--marker)}

/* Chosen points read as solid; the rest are visibly parked. */
.tl-event.on{border-left-color:var(--deep)}
.tl-event.on.hard{border-left-color:var(--marker)}
.tl-event.off{background:transparent;border-style:dashed}
.tl-event.off .tl-when,
.tl-event.off .tl-what,
.tl-event.off .tl-detail{opacity:.55}
.tl-event.flagged{border-left-color:#D9A441}
.tl-event.bad{border-left-color:var(--marker)}

/* The conflict repeated at the point itself, not only in the list at the top. */
.tl-flag{margin-top:6px;padding:5px 8px;font-family:var(--mono);font-size:10.5px;line-height:1.45;border-radius:2px}
.tl-flag.error{background:rgba(178,30,99,.09);color:#8E1A4F}
.tl-flag.warn{background:rgba(217,164,65,.14);color:#7A5A12}

.tl-day-leg{font-family:var(--mono);font-size:11px;color:var(--granite);margin:-8px 0 12px}
.tl-pill.count{background:rgba(255,255,255,.12);color:#CFE6E4}
.tl-pill.count strong{color:#fff}
.tl-bar .chk-toggle{color:#9FC6C4}

/* help page */
.kv dt.help-error{color:var(--marker);font-weight:600}
.kv dt.help-warn{color:#8A6410;font-weight:600}