/* ============================================================
   Life Base — v2 styles: / panel, basics, block chrome, blocks
   ============================================================ */

/* ---------------- / insert panel (Apple Freeform panel, measured
   from workshop/reference-images/v2+v3: 440x362 logical, 17px radius, frosted
   #fafaf9, centered 200x26 search pill, 160px category column with
   20px blue selection capsule — content: a written vertical list,
   30px rows, small crafted icon left, name beside it) ---------------- */
#insert-panel{
  position:fixed;width:440px;height:362px;max-height:calc(100vh - 24px);z-index:1200;
  background:rgba(250,250,249,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,.09);border-radius:17px;
  box-shadow:0 18px 55px rgba(0,0,0,.19),0 3px 12px rgba(0,0,0,.08);
  display:flex;flex-direction:column;
  /* --- the two numbers that keep the columns honest ---
     The right column opens with a group caption ("BASIC BLOCKS") and the
     left column doesn't, so equal padding puts a 20px capsule level with a
     10px caption — which is exactly what read as misaligned. The category
     column is pushed down by that caption's height, plus half the
     difference between a 30px row and a 20px capsule, so the first
     category and the first block sit on the same centre line. */
  --ip-top:14px;      /* breathing room above both columns */
  --ip-lead:21px;     /* the caption block (16px) + (30-20)/2 */
}
.ip-caret{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:7px;overflow:hidden;
}
.ip-caret::before{
  content:"";position:absolute;left:1px;top:1px;width:10px;height:10px;background:#fafaf9;
  border:1px solid rgba(0,0,0,.09);border-radius:2px 0 0 0;transform:rotate(45deg);transform-origin:center;
}
/* the search lives IN THE PAGE now (the .lb-slash chip below), so the
   panel is nothing but categories and rows — ip-body fills it and takes
   the panel's own rounding so the category column's corners stay soft */
.ip-body{display:flex;flex:1;min-height:0;border-radius:17px;overflow:hidden}
.ip-cats{
  width:160px;flex:none;border-right:1px solid rgba(0,0,0,.06);
  padding:calc(var(--ip-top) + var(--ip-lead)) 8px 10px;overflow-y:auto;
}
.ip-cat{
  height:20px;display:flex;align-items:center;padding:0 18px;border-radius:10px;
  font-size:13px;color:#3f3d3b;white-space:nowrap;margin-bottom:2px;cursor:default;
}
.ip-cat:hover{background:rgba(0,0,0,.045)}
.ip-cat.sel{background:#00bde5;color:#fff;font-weight:600}
.ip-offline{padding:8px 12px;font-size:11px;color:#a19f9d;line-height:1.4}
.ip-content{flex:1;overflow-y:auto;padding:var(--ip-top) 10px 10px;min-width:0}

/* the written vertical list — shared by the / panel and the board's
   node picker (inside .np-content) */
.ip-list{display:flex;flex-direction:column;gap:1px}
.ip-group{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#a19f9d;
  padding:10px 10px 3px;text-transform:uppercase;user-select:none;
}
.ip-group:first-child{padding-top:0}   /* --ip-top already spaced it */
.ip-row{
  display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;
  border-radius:8px;cursor:default;transition:background-color .12s ease-out;
}
.ip-row:hover,.ip-row.active{background:#f1f0ee}
.ip-row.active{box-shadow:inset 0 0 0 1.5px rgba(0,189,229,.55)}
.ip-ric{
  width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#45423d;
}
.ip-ric svg{width:20px;height:20px;display:block}
.ip-ric .ip-glyph{font-family:Georgia,serif;font-size:13px;font-weight:600}
.ip-rname{
  flex:1;min-width:0;font-size:13px;color:#3f3d3b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ip-rsc{flex:none;font-size:11px;color:#a19f9d}
.ip-bgsw{width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.12);display:block}
.ip-empty{padding:26px 10px;text-align:center;font-size:12.5px;color:#a19f9d}

/* ---------------- the inline slash command ----------------
   Typing "/" leaves this chip at the caret and you keep typing into the
   page; the panel below only filters. It is ordinary text wearing a
   quiet highlight — which is why dismissing the menu can just unwrap it
   and lose nothing. The placeholder is a ::after on the empty state, so
   it is never content, never saved, never searched. */
.lb-slash{
  /* Notion's is lighter than it looks and roomier than it looks. The old
     tight, darker pill was why the text read as SMALLER than the line it
     sits in — the type never changed size (it inherits the container's
     14.67px), the box around it was just squeezing it. */
  background:#f4f3f1;border-radius:4px;padding:2px 5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.lb-slash[data-empty]::after{
  content:"Type to search";color:#a5a29e;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}

/* mini chooser (link to page) */
.mini-chooser{
  position:fixed;width:264px;max-height:300px;overflow-y:auto;background:#fff;z-index:1300;
  border:1px solid #e8e6e3;border-radius:8px;padding:4px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.mc-title{font-size:11px;color:#a19f9d;padding:6px 10px 4px}
.mc-row{
  height:30px;display:flex;align-items:center;gap:8px;padding:0 10px;
  font-size:13px;color:#242424;border-radius:4px;
}
.mc-row:hover{background:#f4f3f2}
.mc-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-hint{font-size:11px;color:#a19f9d;flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-empty{padding:12px;font-size:12px;color:#a19f9d;text-align:center}

/* ---------------- basics rendered in the page ---------------- */
/* A quote was pinned at 16px, which was LARGER than the 14.67px body it
   sat in. Now that the body is 16px, an absolute number here would make
   it identical instead — so it is stated as a ratio and stays a quote at
   any body size. Same rhythm as every other line-level block. */
.c-body blockquote{
  margin:var(--lb-blockgap) 0;padding:var(--lb-blockpad) 0 var(--lb-blockpad) 14px;
  border-left:3px solid #d8d5d2;
  font-size:1.05em;color:#44413f;
}
.c-body h4{font-size:1.05em;margin-top:1em}
.callout{
  display:flex;gap:8px;align-items:flex-start;background:#f7f6f3;
  border-radius:6px;padding:10px 14px;margin:6px 0;
}
.co-ic{flex:none;font-size:1em;line-height:1.5}
.co-tx{flex:1;min-width:40px}
.tg{position:relative;margin:1px 0}
.tg-arrow{
  position:absolute;left:0;top:1px;width:16px;height:20px;display:inline-flex;
  align-items:flex-start;justify-content:center;font-size:11px;color:#605e5c;
  cursor:pointer;user-select:none;transition:transform .1s;
}
.tg.open .tg-arrow{transform:rotate(90deg)}
/* The head is a LINE, not a chip sitting on one. As an inline-block with a
   120px minimum it ended where its text ended, so clicking anywhere past
   the words was a click on the .tg wrapper — and the browser put the caret
   at whatever child index it landed nearest, sometimes inside the closed
   children area, which is invisible. Aiming at a line and being answered
   somewhere else came mostly from here. */
.tg-head{display:block;padding-left:18px;min-height:20px;outline:none}
/* No display:none anywhere. A closed toggle's lines are not hidden, they
   are not in the page at all — they wait in an inert <template>. Hiding
   them was the whole bug: content you cannot see but the editor can still
   reach takes your keystrokes, joins your selections, and gets deleted
   along with the lines you did select. */
.tg-kids{padding-left:18px}
.nb-table{border-collapse:collapse;margin:4px 0;min-width:280px}
.nb-table td{
  border:1px solid #e5e3e1;padding:4px 8px;min-width:60px;font-size:14px;
}
.nb-hr{border:0;border-top:1px solid #e3e1de;margin:10px 0}
.nb-img{max-width:520px;border-radius:3px;display:block;margin:2px 0}
.nb-media{display:block;margin:2px 0;max-width:420px}
video.nb-media{border-radius:4px;background:#000}
.file-chip{
  display:inline-flex;align-items:center;gap:4px;background:#f7f6f3;
  border:1px solid #eceae6;border-radius:5px;padding:2px 8px;font-size:13px;color:#44413f;
}
.file-size{color:#a19f9d;font-size:11px}
.file-cap{font-size:12px;color:#8a8886;margin:1px 0 4px}
.nb-code{
  background:#f7f6f3;border-radius:6px;padding:10px 12px;margin:2px 0;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;
}
.pg-link{
  color:#242424;text-decoration:none;border-bottom:1px solid #c9c6c3;
  cursor:pointer;white-space:nowrap;
}
.pg-link:hover{background:#f4f3f2}
.bookmark{
  display:inline-flex;align-items:center;gap:6px;border:1px solid #e8e6e3;
  border-radius:6px;padding:4px 10px;background:#fff;cursor:pointer;max-width:420px;
}
.bookmark:hover{background:#faf9f8}
.bm-ic{font-size:13px}
.bm-tx{color:#2b88d8;font-size:13px;outline:none;text-decoration:none}

/* ---------------- block contract chrome ---------------- */
.nb-block{margin:6px 0;position:relative;max-width:100%;display:inline-block;vertical-align:top}
.nb-block:focus{outline:none} /* selection shows via .sel, not a focus ring */
.nb-block-wrap{position:relative;width:fit-content;max-width:100%;display:flex;flex-direction:column}
.nb-block-body{flex:1;min-height:0;min-width:0;width:100%}
/* The bar is now the RAIL above the block, and styles-v6 owns all of it —
   position, size, look and reveal. Nothing is left here on purpose: two
   files describing one element is how it ended up with a `display:none`
   that an opacity fade could not undo. */
.nb-block-del{ user-select:none; }
.nb-block-missing{
  padding:14px;font-size:12px;color:#a19f9d;background:#faf9f8;
  border:1px dashed #e3e1de;border-radius:6px;
}
.nb-block.nb-dragging{opacity:.45}
.nb-block.drop-before{box-shadow:inset 0 2px 0 0 #7719aa}
.nb-block.drop-after{box-shadow:inset 0 -2px 0 0 #7719aa}
.c-body.drop-end{box-shadow:inset 0 -2px 0 0 #7719aa}

/* universal block resize — active only once the block is selected;
   cursor-only affordance, no visible handles */
.nb-rs{position:absolute;z-index:8;opacity:0;pointer-events:none}
.nb-block.sel .nb-rs{opacity:1;pointer-events:auto}
.nb-block.sel .nb-block-wrap{outline:1px solid rgba(0,0,0,.10);outline-offset:2px;border-radius:4px}
.nb-rs-n{top:-3px;left:12px;right:12px;height:7px;cursor:ns-resize}
.nb-rs-s{bottom:-3px;left:12px;right:12px;height:7px;cursor:ns-resize}
.nb-rs-e{right:-3px;top:12px;bottom:12px;width:7px;cursor:ew-resize}
.nb-rs-w{left:-3px;top:12px;bottom:12px;width:7px;cursor:ew-resize}
.nb-rs-ne{top:-4px;right:-4px;width:10px;height:10px;cursor:nesw-resize}
.nb-rs-nw{top:-4px;left:-4px;width:10px;height:10px;cursor:nwse-resize}
.nb-rs-se{bottom:-4px;right:-4px;width:10px;height:10px;cursor:nwse-resize}
.nb-rs-sw{bottom:-4px;left:-4px;width:10px;height:10px;cursor:nesw-resize}

/* ---------------- Habit Tracker (light — sibling of the vision board) ---------------- */
.htx{
  position:relative;width:100%;min-width:480px;max-width:100%;
  background:#fbfaf8;border:1px solid #ece9e6;border-radius:20px;padding:18px 16px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  user-select:none;color:#3a3836;
}
/* ...but what the user WROTE is text, and text is selectable. The blanket
   rule above is for the chrome — grips, glyphs, buttons, the date strip —
   never for a name someone typed. Copying a habit name into a note is an
   ordinary thing to want. */
.htx-name,.htx-time,.htx-perfname,.htx-note,.htx-gtitle{
  user-select:text;-webkit-user-select:text;cursor:text;
}
/* a link inside a name is a link: it reads and clicks like one */
.htx-name a.lb-link{cursor:pointer}
.htx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px}
.htx-gtitle{
  font-size:22px;font-weight:600;letter-spacing:-.5px;color:#242424;
}
.htx-tabs{display:inline-flex;background:#f1efec;border-radius:9px;padding:2px;gap:1px}
.htx-tab{font-size:11.5px;color:#6e6c6a;padding:4px 11px;border-radius:7px;cursor:pointer}
.htx-tab:hover{color:#242424}
.htx-tab.sel{background:#fff;color:#242424;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* date navigation */
.htx-datenav{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0 16px}
.htx-chev{
  width:36px;height:36px;border-radius:10px;border:1px solid #ece9e6;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;
}
.htx-chev svg{width:15px;height:15px}
.htx-chev:hover{background:#f1efec}
.htx-datebtn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:transparent}
.htx-datebtn:hover{background:#f1efec}
.htx-datetext{font-size:16px;font-weight:500;color:#242424}
.htx-todaypill{
  font-size:10px;font-weight:600;letter-spacing:.5px;padding:2px 6px;border-radius:4px;
  background:rgba(100,95,240,.15);color:rgb(130,125,250);
}

/* cards */
.htx-list{display:flex;flex-direction:column;gap:14px;padding:2px 2px 6px}
.htx-card{
  position:relative;background:#fff;border:1px solid #ece9e6;border-radius:20px;padding:15px 16px;
}
.htx-cardmain{display:flex;align-items:center;gap:12px}
.htx-check{
  width:26px;height:26px;flex:none;background:none;border:0;padding:0;cursor:pointer;
  transition:transform .08s;
}
.htx-check:active{transform:scale(.85)}
.htx-check svg{width:24px;height:24px;display:block}
.htx-check.done svg{animation:htx-pop .18s ease-out}
@keyframes htx-pop{0%{transform:scale(.55)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.htx-mid{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.htx-name{font-size:16px;color:#242424;line-height:1.3}
.htx-name.done{color:#a19f9d;text-decoration:line-through;text-decoration-color:#a19f9d}
.htx-time{font-size:12px;color:#a19f9d}
.htx-icons{display:flex;gap:8px;align-items:center}
.htx-icon{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;border-radius:8px;
}
.htx-icon svg{width:15px;height:15px}
.htx-icon:hover{background:#f1efec}
/* Content wins over chrome, always. Edit/delete keep a lane of their own
   in the row's flow — always laid out, only ever made visible — so
   revealing them shifts nothing and covers nothing. They used to be
   absolutely positioned with an opaque white backing sitting exactly on
   top of the row's link icon, so moving the mouse to reach the link is
   what buried it. A backing that hides what's underneath is an admission
   the layout is wrong. */
.htx-actions{
  display:flex;gap:4px;flex:none;margin-left:6px;
  visibility:hidden;
}
.htx-card:hover .htx-actions{visibility:visible}
.htx-act{
  width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:#f1efec;border:0;cursor:pointer;
}
.htx-act svg{width:14px;height:14px}
.htx-act:hover{background:#e9e6e2}
.htx-kids{display:flex;flex-direction:column;gap:14px;padding:16px 0 2px 32px}
.htx-kidrow{display:flex;align-items:center;gap:12px}
.htx-card.drop-before{box-shadow:inset 0 2px 0 0 rgb(130,125,250)}
.htx-card.drop-after{box-shadow:inset 0 -2px 0 0 rgb(130,125,250)}

/* empty states */
.htx-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 20px;text-align:center}
.htx-empty-ic{width:44px;height:44px;opacity:.9;margin-bottom:4px}
.htx-empty-t1{font-size:15px;font-weight:600;color:#6e6c6a}
.htx-empty-t2{font-size:13px;color:#a19f9d}

/* performance */
.htx-perf{padding:2px}
.htx-perfcard{background:#fff;border:1px solid #ece9e6;border-radius:20px;padding:4px 16px}
.htx-perfrow{display:flex;align-items:center;gap:12px;padding:11px 0}
.htx-perfrow.sep{border-top:1px solid #ece9e6}
.htx-perfrow.dim{opacity:.5}
.htx-perfname{font-size:15px;color:#242424;flex:1;min-width:0}
.htx-perfcount{font-size:12px;width:44px;text-align:center;font-variant-numeric:tabular-nums;flex:none}
.htx-perfbar{width:60px;height:5px;border-radius:999px;background:#eceae6;overflow:hidden;flex:none}
.htx-perffill{display:block;height:100%;border-radius:999px}
.htx-perfrate{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;width:44px;text-align:right;flex:none}
.htx-perfdash{flex:none;color:#a19f9d}
.htx-perfsec{
  font-size:10.5px;letter-spacing:.14em;color:#a19f9d;padding:16px 6px 6px;
  text-transform:uppercase;
}

/* next */
.htx-nextwrap{padding:2px}
.htx-nextrow{display:flex;align-items:center;gap:12px;padding:13px 16px}
.htx-daycaps{display:flex;gap:4px;flex-wrap:wrap}
.htx-daycap{
  font-size:10px;padding:2px 6px;border-radius:999px;
  background:rgba(130,125,250,.15);color:rgb(130,125,250);
}
.htx-activate{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:6px 10px;border-radius:999px;background:rgba(52,199,89,.15);color:rgb(52,199,89);
  border:0;cursor:pointer;flex:none;
}
.htx-activate svg{width:9px;height:9px}
.htx-activate:hover{background:rgba(52,199,89,.25)}
.htx-nextrow .htx-act{display:none}
.htx-nextrow:hover .htx-act{display:inline-flex}

/* fab */
.htx-fab{
  position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;
  background:rgb(99,95,236);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(99,95,236,.35);
}
.htx-fab.purple{background:rgb(168,85,247);box-shadow:0 4px 14px rgba(168,85,247,.35)}
.htx-fab svg{width:20px;height:20px}
.htx-fab:hover{filter:brightness(1.1)}
.htx-fabmenu{
  position:absolute;right:16px;bottom:76px;z-index:8;
  background:#fff;border:1px solid #ece9e6;border-radius:12px;
  padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.htx-fabitem{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;border-radius:8px;
  font-size:13px;color:#3a3836;background:transparent;border:0;cursor:pointer;
  white-space:nowrap;
}
.htx-fabitem svg{width:14px;height:14px}
.htx-fabitem:hover{background:#f1efec}

/* form sheet */
.htx-overlay{
  position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.18);
  backdrop-filter:blur(2px);border-radius:20px;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.htx-sheet{
  width:100%;max-width:380px;max-height:100%;overflow-y:auto;
  background:#fff;border:1px solid #ece9e6;border-radius:20px;
  padding:18px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 16px 48px rgba(0,0,0,.14);
}
.htx-sheet-title{font-size:17px;font-weight:600;color:#242424;text-align:center;padding-bottom:2px}
.htx-seclabel{font-size:10px;letter-spacing:.14em;color:#a19f9d;padding-top:4px}
.htx-input{
  background:#fbfaf8;border:1px solid #ece9e6;border-radius:10px;
  padding:9px 12px;font-size:14px;color:#242424;outline:none;width:100%;
}
.htx-input::placeholder{color:#a19f9d}
.htx-input:focus{border-color:rgb(130,125,250)}
.htx-input.ta{resize:vertical;min-height:64px;font-family:inherit;line-height:1.4}
.htx-daysel{display:flex;gap:8px;justify-content:center;padding:2px 0}
.htx-daypill{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#6e6c6a;
  border:1px solid #e2ded9;background:transparent;cursor:pointer;
}
.htx-daypill:hover{border-color:#a19f9d}
.htx-daypill.sel{background:rgb(130,125,250);border-color:rgb(130,125,250);color:#fff}
.htx-trackrow{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13.5px;color:#3a3836;padding:4px 2px;
}
.htx-switch{
  width:44px;height:26px;border-radius:999px;background:#e2ded9;position:relative;cursor:pointer;
  transition:background .12s;flex:none;
}
.htx-switch.on{background:rgb(52,199,89)}
.htx-knob{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .12s;
}
.htx-switch.on .htx-knob{left:20px}
.htx-sheet-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:6px}
.htx-btn{
  padding:8px 16px;border-radius:10px;font-size:13.5px;font-weight:600;border:0;cursor:pointer;
}
.htx-btn.ghost{background:transparent;color:#6e6c6a}
.htx-btn.ghost:hover{color:#242424}
.htx-btn.solid{background:rgb(130,125,250);color:#fff}
.htx-btn.solid:hover{filter:brightness(1.1)}
.htx-btn.solid:disabled{opacity:.4;cursor:default;filter:none}
.htx-btn.danger{background:rgb(255,69,58);color:#fff}
.htx-kiditem{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 10px;background:#fbfaf8;border:1px solid #ece9e6;border-radius:8px;font-size:13px;color:#3a3836;
  margin-bottom:5px;
}
.htx-kiddel{background:none;border:0;color:#a19f9d;cursor:pointer;font-size:11px}
.htx-kiddel:hover{color:#242424}

/* Project model (v4) — non-checkable container + per-habit rows */
.htx-projicon{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center}
.htx-projicon svg{width:22px;height:22px}
.htx-kidrow{cursor:grab}
.htx-kidrow:active{cursor:grabbing}
.htx-kidrow .htx-name{font-size:15px}
.htx-kidrow .htx-icons{margin-left:auto}
.htx-kidrow.drop-before{box-shadow:inset 0 2px 0 0 rgb(130,125,250)}
.htx-kidrow.drop-after{box-shadow:inset 0 -2px 0 0 rgb(130,125,250)}
.htx-linkbtn{
  width:100%;text-align:left;background:#fbfaf8;border:1px solid #ece9e6;border-radius:10px;
  padding:9px 12px;font-size:14px;color:#242424;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.htx-linkbtn.empty{color:#a19f9d}
.htx-linkbtn:hover{border-color:rgb(130,125,250)}
.htx-childlist{display:flex;flex-direction:column;gap:8px}
.htx-childedit{border:1px solid #ece9e6;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:9px;background:#fff}
.htx-childtop{display:flex;align-items:center;gap:8px}
.htx-childtop .cname{flex:1}
.htx-childcfg{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.htx-childcfg .htx-daysel{gap:5px;padding:0;justify-content:flex-start;flex-wrap:wrap}
.htx-childcfg .htx-daypill{width:27px;height:27px;font-size:10.5px}
.htx-childcfg .ctime{width:96px;flex:none}
.htx-childcfg .clink{flex:1;min-width:130px;display:flex}
.htx-childcfg .clink .htx-linkbtn{padding:6px 10px;font-size:12.5px}
.htx-cardgrip,.htx-rowgrip{
  flex:none;width:14px;display:flex;align-items:center;justify-content:center;
  cursor:grab;opacity:0;transition:opacity .12s;
}
.htx-cardgrip svg,.htx-rowgrip svg{width:9px;height:15px;fill:#c4c1bd}
.htx-card:hover .htx-cardgrip,.htx-kidrow:hover .htx-rowgrip{opacity:1}
.htx-cardgrip:active,.htx-rowgrip:active{cursor:grabbing}
.htx-projnote{color:#a19f9d;font-size:13px;font-style:italic;padding-top:8px}
.htx-addhabit{
  width:100%;padding:10px;border:1px dashed #d6d2cd;border-radius:10px;background:#fbfaf8;
  color:rgb(130,125,250);font-size:13px;font-weight:600;cursor:pointer;
}
.htx-addhabit:hover{border-color:rgb(130,125,250);background:#fff}

/* confirm */
.htx-confirm{
  width:100%;max-width:320px;background:#fff;border:1px solid #ece9e6;
  border-radius:18px;padding:18px;box-shadow:0 16px 48px rgba(0,0,0,.14);
}
.htx-confirm-t{font-size:16px;font-weight:600;color:#242424;padding-bottom:6px}
.htx-confirm-m{font-size:13px;color:#6e6c6a;line-height:1.45}

/* details popover */
.htx-pop{
  position:fixed;z-index:1300;max-width:300px;min-width:200px;
  background:#fff;border:1px solid #ece9e6;border-radius:12px;
  padding:12px 14px;font-size:13px;color:#3a3836;line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.12);white-space:pre-wrap;
}

/* preview thumbnail (light, matching the live block) */
.htx-prev{background:#fbfaf8;border-radius:8px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;height:100%}
.htx-prev-nav{display:flex;justify-content:space-between;align-items:center;font-size:7px;color:#a19f9d;padding:0 2px 2px}
.htx-prev-date{color:#242424;font-weight:600}
.htx-prev-date i{font-style:normal;background:rgba(130,125,250,.15);color:rgb(130,125,250);border-radius:2px;padding:0 2px;font-size:5px;margin-left:2px}
.htx-prev-card{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #ece9e6;border-radius:6px;padding:4px 6px}
.htx-prev-c{width:8px;height:8px;border-radius:50%;border:1.2px solid rgba(52,199,89,.5);flex:none}
.htx-prev-c.on{background:rgb(52,199,89);border-color:rgb(52,199,89)}
.htx-prev-n{font-size:6.5px;color:#3a3836}
.htx-prev-n.done{color:#a19f9d;text-decoration:line-through}
.htx-prev-t{font-size:5.5px;color:#a19f9d;margin-left:auto}


/* habit rows: one line, ellipsis, the row's alignment is what makes it readable (spec 03 §3.3) */
.htx-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.htx-card.drop-into{outline:2px solid rgba(130,125,250,.65);outline-offset:-2px;background:rgba(130,125,250,.08)}
.htx-card.drop-out{outline:1.5px dashed rgba(130,125,250,.5);outline-offset:-2px}