/* VialForge 2.2: protocol planner timeline. Uses the theme tokens from style.css
   only. Marks differ by SHAPE as well as colour (ring, disc, dashed ring,
   slashed ring, diamond, triangle; stripes for off weeks), so nothing relies
   on colour alone. */

.pl-note{margin:0;font-size:12.5px;line-height:1.5}
.pl-range button{min-height:44px}

.pl-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);-webkit-overflow-scrolling:touch}
.pl-grid{--lw:128px;--cw:30px;display:grid;
  grid-template-columns:var(--lw) repeat(var(--n),var(--cw));width:max-content}

/* sticky lane labels: the left column stays put while the days scroll */
.pl-corner,.pl-lab{position:sticky;left:0;z-index:2;background:var(--panel);
  border-right:1px solid var(--line)}
.pl-corner{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;padding:0 10px;min-height:40px}
.pl-lrow{min-height:30px}
.pl-lab{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  text-align:left;min-height:44px;padding:4px 8px 4px 11px;border:0;
  border-right:1px solid var(--line);border-top:1px solid var(--line-soft);color:var(--ink)}
.pl-lab::before{content:"";position:absolute;inset:6px auto 6px 3px;width:3px;border-radius:2px;
  background:var(--accent,var(--vial))}
.pl-lab:focus-visible{outline:2px solid var(--a);outline-offset:-2px}
.pl-name{font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pl-sub{font:11px/1.2 var(--mono);color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.pl-head,.pl-load,.pl-c{position:relative;display:flex;align-items:center;justify-content:center}
.pl-head{flex-direction:column;gap:1px;min-height:40px;font-size:11px;color:var(--dim)}
.pl-dn{font:600 12px/1 var(--mono);color:var(--muted);padding:2px 3px;border-radius:6px}
.pl-head.pl-today .pl-dn{background:var(--a);color:var(--on-a)}
.pl-load{min-height:30px;font:12px/1 var(--mono);color:var(--muted)}
.pl-load.busy{font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--warn) 18%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--warn)}
.pl-c{min-height:44px;border-top:1px solid var(--line-soft)}
.pl-wk{border-left:1px solid var(--line)}
.pl-today{box-shadow:inset 2px 0 0 var(--a),inset -2px 0 0 var(--a)}
.pl-load.busy.pl-today{box-shadow:inset 0 0 0 1.5px var(--warn),inset 2px 0 0 var(--a),inset -2px 0 0 var(--a)}
.pl-c.off{background:repeating-linear-gradient(135deg,var(--panel-2) 0 4px,transparent 4px 8px)}
.pl-c.pre{background:radial-gradient(var(--line) 1px,transparent 1.2px) 0 0/6px 6px}

/* marks */
.pl-m{display:inline-block;width:14px;height:14px;border-radius:99px;box-sizing:border-box;
  position:relative}
.pl-m.due{border:2px solid var(--a)}
.pl-m.done{background:var(--a);border:2px solid var(--a)}
.pl-m.proj{border:2px dashed var(--a)}
.pl-m.miss{border:2px solid var(--muted)}
.pl-m.miss::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;
  margin-left:-1px;background:var(--muted);transform:rotate(45deg)}
.pl-m.extra{width:10px;height:10px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.pl-step{position:absolute;top:2px;left:2px;width:0;height:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-bottom:7px solid var(--ink)}

/* legend, busy list, agenda */
.pl-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:12.5px;color:var(--muted)}
.pl-legend li{display:flex;align-items:center;gap:7px}
.pl-key{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px}
.pl-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--line)}
.pl-swatch.off{background:repeating-linear-gradient(135deg,var(--panel-2) 0 4px,transparent 4px 8px)}
.pl-swatch.pre{background:radial-gradient(var(--line) 1px,transparent 1.2px) 0 0/6px 6px}
.pl-swatch.busy{font:700 11px/14px var(--mono);text-align:center;color:var(--ink);
  background:color-mix(in srgb,var(--warn) 18%,transparent);border:1.5px solid var(--warn)}
.pl-list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.pl-list ul{padding-left:18px;margin:2px 0 8px;color:var(--muted)}
.pl-agenda summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  font-weight:600;font-size:14px}
.pl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pl-steps li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px}

@media (min-width:560px){
  .pl-grid{--lw:168px;--cw:32px}
}