/* Post card, timeline, grid, pipeline, calendar, overlay, draft workspace, login. */

/* ---------- shared post card ---------- */
.post{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)}
.post:hover{border-color:var(--hair-strong); background:oklch(0.22 0.015 255)}
.post .head{display:flex; gap:11px; padding:14px 18px 8px}
.post .av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:white;background:oklch(0.5 0.03 255)}
.post .id{flex:1; min-width:0}
.post .id .row1{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.post .id b{font-size:var(--fs-body); letter-spacing:var(--ls-tight); font-weight:600}
.post .id .you{font-size:var(--fs-xs); color:var(--ink-3); font-weight:600}
.post .id .sub{font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56ch}
.post .id .when{font-size:var(--fs-sm); color:var(--ink-3); margin-top:3px; display:flex; align-items:center; gap:5px;
  font-variant-numeric:tabular-nums}
.badges{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none}
.pill{font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px;
  border:1px solid var(--hair); color:var(--ink); white-space:nowrap;
  display:inline-flex; gap:5px; align-items:center; line-height:1.4}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.ver{font-variant-numeric:tabular-nums}
.tag-repost{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.post .body{padding:4px 18px 14px; white-space:pre-wrap; word-break:break-word; color:var(--ink);
  font-size:var(--fs-body); line-height:var(--lh-read); letter-spacing:.002em}
.post .body.clamp{display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden}
.more{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;
  font-size:var(--fs-base); cursor:pointer;padding:0 18px 12px;
  transition:color .14s var(--ease)}
.more:hover{color:oklch(0.78 0.13 245)}
.media{display:flex; gap:6px; padding:0 18px 14px; flex-wrap:wrap}
.media img{height:150px; max-width:100%; border-radius:9px; border:1px solid var(--hair); object-fit:cover; cursor:zoom-in;
  transition:border-color .16s var(--ease), transform .18s var(--ease)}
.media img:hover{border-color:var(--hair-strong)}
.media .ph{height:70px; flex:1; min-width:150px; border:1px dashed var(--hair-strong); border-radius:9px;
  display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ink-3);
  font-size:var(--fs-sm); font-weight:600}
.foot{display:flex; align-items:center; gap:18px; padding:10px 18px; border-top:1px solid var(--hair);
  color:var(--ink-3); font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, transparent, oklch(0 0 0 / .08))}
.foot .m{display:inline-flex; align-items:center; gap:6px}
.foot .m svg{width:15px;height:15px; opacity:.85}
.foot .imp{color:var(--accent); font-weight:600}
.foot .lk{margin-left:auto}

/* ---------- timeline ---------- */
.month{display:flex; align-items:baseline; gap:10px; margin:var(--sp-7) 2px var(--sp-3); position:relative}
.month:first-child{margin-top:var(--sp-1)}
.month h2{margin:0; font-size:var(--fs-md); font-weight:700; letter-spacing:var(--ls-tight)}
.month .cnt{font-size:var(--fs-sm); color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums}
.month .line{flex:1; height:1px; background:var(--hair)}
.tl{position:relative; padding-left:26px}
.tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--hair-strong), var(--hair) 70%, transparent)}
.tl .node{position:relative; margin:0 0 var(--sp-4)}
.tl .node::before{content:""; position:absolute; left:-26px; top:20px; width:12px; height:12px; border-radius:50%;
  background:var(--nodecol, var(--c-repost)); border:2.5px solid var(--bg); box-shadow:0 0 0 1px var(--hair-strong)}

/* month rail + two-col timeline */
.tl-layout{display:grid; grid-template-columns:158px minmax(0,1fr); gap:26px; align-items:start}
.monthrail{position:sticky; top:174px; display:flex; flex-direction:column; gap:2px;
  max-height:calc(100vh - 194px); overflow:auto; padding-right:4px}
.monthrail .rl-h{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-3);
  font-weight:700; padding:2px 10px 8px}
.rl{appearance:none; border:0; background:transparent; color:var(--ink-2); font:inherit;
  font-size:var(--fs-base); font-weight:600;
  text-align:left; padding:7px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:8px; border-left:2px solid transparent;
  transition:background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease)}
.rl:hover{background:var(--surface); color:var(--ink)}
.rl[aria-current="true"]{background:var(--accent-soft); color:var(--ink); border-left-color:var(--accent)}
.rl .rn{font-size:var(--fs-xs); color:var(--ink-3); font-variant-numeric:tabular-nums}
.month{scroll-margin-top:174px}
@media (max-width:820px){
  .tl-layout{grid-template-columns:1fr}
  .monthrail{position:static; flex-direction:row; overflow-x:auto; max-height:none; gap:6px;
    margin-bottom:4px; padding-bottom:8px; border-bottom:1px solid var(--hair)}
  .monthrail .rl-h{display:none}
  .rl{border-left:0; border-bottom:2px solid transparent; white-space:nowrap; flex:none}
  .rl[aria-current="true"]{border-left:0; border-bottom-color:var(--accent)}
}

/* ---------- grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:var(--sp-3)}

/* ---------- pipeline ---------- */
.pipe-wrap{margin-bottom:var(--sp-2)}
.pipe-head{display:flex; align-items:center; gap:10px; margin:var(--sp-2) 2px var(--sp-4)}
.pipe-head h2{margin:0; font-size:var(--fs-lg); letter-spacing:var(--ls-tight); font-weight:700}
.pipe-head p{margin:0; color:var(--ink-3); font-size:var(--fs-sm)}
.pip-sum{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; padding:12px 16px; margin-bottom:var(--sp-4);
  background:var(--surface); border:1px solid var(--hair); border-radius:10px;
  font-size:var(--fs-sm); color:var(--ink-2)}
.pip-sum-item{display:inline-flex; align-items:center; gap:7px; font-weight:600}
.pip-sum-item .dot{width:8px;height:8px;border-radius:50%}
.pip-sum-item b{color:var(--ink); font-variant-numeric:tabular-nums; margin-left:2px; font-weight:700}
.plan{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:var(--sp-3)}
.card-plan{background:linear-gradient(180deg, var(--surface), var(--bg-2)); border:1px dashed var(--hair-strong);
  border-radius:var(--radius); padding:15px 16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.card-plan:hover{border-color:oklch(0.72 0.12 245 / .45); background:linear-gradient(180deg, var(--surface-2), var(--bg-2))}
.card-plan .r1{display:flex; align-items:center; gap:8px}
.card-plan h3{margin:0; font-size:var(--fs-body); line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight); flex:1; cursor:pointer; font-weight:600;
  transition:color .14s var(--ease)}
.card-plan h3:hover{color:var(--accent)}
.card-plan .thread{color:var(--ink-3); font-size:var(--fs-sm)}
.card-plan .ctrls{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.card-plan select, .card-plan input[type=date], .card-plan textarea{
  background:var(--bg); border:1px solid var(--hair); color:var(--ink); font:inherit;
  font-size:var(--fs-sm); border-radius:7px; padding:6px 8px;
  transition:border-color .14s var(--ease)}
.card-plan textarea{width:100%; resize:vertical; min-height:34px; line-height:var(--lh-base)}
.card-plan select:hover, .card-plan input:hover, .card-plan textarea:hover{border-color:var(--hair-strong)}
.card-plan select:focus, .card-plan input:focus, .card-plan textarea:focus{outline:none; border-color:var(--accent)}
.status-pill{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:999px;
  border:1px solid var(--hair);letter-spacing:.02em; line-height:1.4}
.gate-pill{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:999px;
  border:1px solid currentColor; line-height:1.4}
.gate-pill.pass{color:var(--ok)} .gate-pill.fail{color:var(--danger)}

/* ---------- calendar ---------- */
.cal-top{display:flex; align-items:center; gap:12px; margin:2px 2px var(--sp-4); flex-wrap:wrap}
.cal-top h2{margin:0; font-size:var(--fs-xl); letter-spacing:var(--ls-tight); min-width:210px; font-weight:700}
.cal-nav{display:inline-flex; gap:6px}
.cal-nav button, .cal-today{appearance:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink);
  width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:16px; display:grid; place-items:center;
  transition:border-color .14s var(--ease), background .14s var(--ease)}
.cal-today{width:auto; padding:0 12px; font:inherit; font-weight:600; font-size:var(--fs-base)}
.cal-nav button:hover, .cal-today:hover{border-color:var(--hair-strong); background:var(--surface-2)}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.cal .dow{text-align:center; font-size:var(--fs-xxs); color:var(--ink-3); text-transform:uppercase;
  letter-spacing:var(--ls-wide); padding-bottom:2px; font-weight:700}
.cal .cell{background:var(--surface); border:1px solid var(--hair); border-radius:10px; min-height:104px;
  padding:8px; display:flex; flex-direction:column; gap:5px;
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.cal .cell:hover{border-color:var(--hair-strong)}
.cal .cell.empty{background:transparent; border-color:transparent}
.cal .cell.empty:hover{border-color:transparent}
.cal .cell.today{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.cal .cell.drop{border-color:var(--accent); background:var(--accent-soft); border-style:dashed}
.cal .dn{font-size:var(--fs-sm); color:var(--ink-3); font-weight:700; font-variant-numeric:tabular-nums}
.cal .ev{font-size:var(--fs-xs); line-height:1.3; padding:4px 6px; border-radius:6px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--hair); display:flex; gap:5px; align-items:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .14s var(--ease), background .14s var(--ease)}
.cal .ev:hover{border-color:var(--hair-strong); background:oklch(0.28 0.017 255)}
.cal .ev .dot{width:7px;height:7px;border-radius:50%;flex:none}
.cal .ev.plan{border-style:dashed; background:transparent}
.cal .ev.drag{opacity:.5}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; margin:var(--sp-4) 2px 0; color:var(--ink-3); font-size:var(--fs-sm)}
.cal-legend span{display:inline-flex; align-items:center; gap:6px}
.cal-hint{color:var(--ink-3); font-size:var(--fs-sm); margin:var(--sp-3) 2px 0}
.unscheduled{display:flex; gap:8px; flex-wrap:wrap; margin:var(--sp-3) 2px 0}
.chip-draft{font-size:var(--fs-sm); font-weight:600; padding:6px 11px; border-radius:999px; cursor:grab;
  background:var(--surface); border:1px dashed var(--hair-strong); display:inline-flex; align-items:center; gap:7px;
  transition:border-color .14s var(--ease), background .14s var(--ease)}
.chip-draft:hover{border-color:oklch(0.72 0.12 245 / .5); background:var(--surface-2)}
.chip-draft:active{cursor:grabbing}
.chip-draft .dot{width:8px;height:8px;border-radius:50%}

/* ---------- overlay ---------- */
.ov{position:fixed; inset:0; z-index:60; background:oklch(0 0 0 / .66); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px}
.ov.on{display:flex; animation:fade .18s var(--ease)}
.ov .panel{background:var(--bg-2); border:1px solid var(--hair-strong); border-radius:14px;
  max-width:640px; width:100%; max-height:86vh; overflow:auto; box-shadow:var(--shadow-lift);
  animation:fadeUp .22s var(--ease)}
.ov .panel.wide{max-width:880px}
.ov .ph{display:flex; align-items:center; justify-content:space-between; padding:15px 18px;
  border-bottom:1px solid var(--hair); position:sticky; top:0; background:var(--bg-2); z-index:2}
.ov .ph b{font-size:var(--fs-md); letter-spacing:var(--ls-tight); font-weight:600}
.ov .x{appearance:none;border:0;background:var(--surface);color:var(--ink);width:30px;height:30px;
  border-radius:7px;cursor:pointer;font-size:16px;
  transition:background .14s var(--ease), color .14s var(--ease)}
.ov .x:hover{background:var(--surface-2)}
.ov .pb{padding:14px 18px 20px; display:flex; flex-direction:column; gap:12px}
.ov img{width:100%; border-radius:10px}

/* ---------- login ---------- */
.login-box{max-width:380px; margin:8vh auto; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-lift);
  animation:fadeUp .28s var(--ease)}
.login-box h2{margin:0 0 6px; font-size:var(--fs-lg); letter-spacing:var(--ls-tight); font-weight:700}
.login-box p{margin:0 0 18px; color:var(--ink-3); font-size:var(--fs-base); line-height:var(--lh-base)}
.login-box input{width:100%; background:var(--bg); border:1px solid var(--hair); color:var(--ink);
  font:inherit; font-size:var(--fs-body); border-radius:8px; padding:10px 12px;
  transition:border-color .14s var(--ease)}
.login-box input:hover{border-color:var(--hair-strong)}
.login-box input:focus{outline:none; border-color:var(--accent)}
.login-box button{width:100%; margin-top:10px; appearance:none; border:0; background:var(--accent);
  color:var(--accent-ink); font:inherit; font-weight:700; font-size:var(--fs-body); padding:10px;
  border-radius:8px; cursor:pointer; transition:filter .14s var(--ease)}
.login-box button:hover{filter:brightness(1.06)}
.login-box .err{color:var(--danger); font-size:var(--fs-sm); margin-top:10px; min-height:16px}

/* ---------- draft workspace ---------- */
.dw{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--sp-4); align-items:start}
.dw .panel-c{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:18px}
.dw h3{margin:0 0 12px; font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; color:var(--ink-2); letter-spacing:var(--ls-wide)}
/* draft.js puts an inline hint inside these headings ("Notes — what to change
   next"); the eyebrow treatment is for the label only, not the sentence. */
.dw h3 span{text-transform:none; letter-spacing:normal; font-size:var(--fs-sm)}

/* .post clips its corners, which would clip a box-shadow focus ring on the
   "see more" button inside it — use an inset outline there instead. */
.post .more:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; box-shadow:none}
.dw textarea{width:100%; min-height:420px; background:var(--bg); border:1px solid var(--hair); color:var(--ink);
  font:inherit; font-size:var(--fs-body); line-height:var(--lh-read); border-radius:9px; padding:14px;
  resize:vertical; letter-spacing:.002em;
  transition:border-color .14s var(--ease), background .14s var(--ease)}
.dw textarea:hover{border-color:var(--hair-strong)}
.dw textarea:focus{outline:none; border-color:var(--accent); background:oklch(0.18 0.012 255)}
.dw .meter{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:var(--fs-sm); color:var(--ink-3);
  font-variant-numeric:tabular-nums; flex-wrap:wrap}
.dw .bar{flex:1; min-width:120px; height:6px; border-radius:999px; background:var(--bg-2); overflow:hidden; position:relative}
.dw .bar i{position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:999px;
  transition:width .28s var(--ease), background .18s var(--ease)}
.dw .bar.under i{background:var(--ink-3)} .dw .bar.over i{background:var(--danger)}
.dw .gatebox{margin-top:14px; font-size:var(--fs-sm); display:flex; flex-direction:column; gap:6px}
.dw .gatebox .g{display:flex; gap:7px; align-items:flex-start; line-height:var(--lh-base)}
.dw .gatebox .g.fail{color:var(--danger)} .dw .gatebox .g.warn{color:var(--ink-2)}
.rev{border-left:2px solid var(--hair); padding:0 0 0 14px; margin:0; display:flex; flex-direction:column;
  gap:12px; max-height:420px; overflow:auto}
.rev .r{position:relative}
.rev .r::before{content:""; position:absolute; left:-19px; top:5px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--bg)}
.rev .r.happy::before{background:var(--c-excitement)}
.rev .rh{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink-3); font-weight:600}
.rev .rn{color:var(--ink); font-variant-numeric:tabular-nums}
.rev .note{font-size:var(--fs-sm); color:var(--ink-2); margin-top:3px; line-height:var(--lh-base)}
.rev .rt{font-size:var(--fs-sm); color:var(--ink-3); margin-top:4px; cursor:pointer;
  transition:color .14s var(--ease)}
.rev .rt:hover{color:var(--accent)}
.notes{display:flex; flex-direction:column; gap:9px}
.note-item{background:var(--bg-2); border:1px solid var(--hair); border-radius:9px; padding:10px 12px;
  font-size:var(--fs-base); display:flex; gap:10px; align-items:flex-start; line-height:var(--lh-base);
  transition:border-color .14s var(--ease)}
.note-item:hover{border-color:var(--hair-strong)}
.note-item.done{opacity:.5; text-decoration:line-through}
.note-item button{appearance:none;border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:14px;padding:0;
  transition:color .14s var(--ease)}
.note-item button:hover{color:var(--danger)}
.note-add{display:flex; gap:8px; margin-top:10px}
.note-add input{flex:1; background:var(--bg); border:1px solid var(--hair); color:var(--ink); font:inherit;
  font-size:var(--fs-base); border-radius:8px; padding:8px 10px;
  transition:border-color .14s var(--ease)}
.note-add input:hover{border-color:var(--hair-strong)}
.note-add input:focus{outline:none;border-color:var(--accent)}
.btn{appearance:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink); font:inherit;
  font-size:var(--fs-base); font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer;
  transition:border-color .14s var(--ease), background .14s var(--ease), filter .14s var(--ease)}
.btn:hover{border-color:var(--hair-strong); background:var(--surface-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.primary:hover{background:var(--accent); filter:brightness(1.06)}
.btn:disabled{opacity:.5; cursor:default}
.btn:disabled:hover{background:var(--surface); border-color:var(--hair); filter:none}
.dw-top{display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); flex-wrap:wrap}
.dw-top h2{margin:0; font-size:var(--fs-lg); letter-spacing:var(--ls-tight); flex:1; min-width:200px; font-weight:700}
@media (max-width:900px){ .dw{grid-template-columns:1fr} .dw textarea{min-height:300px} }