/* Daily Life Doc, round 13 (zone F3): the Knowledge base place (js/kb/), drawn as the page "Expert Plans" draws the
   demo "Making and changing": one card in the middle (.kbm: the list or an editor, .xbar on top, .xbody scrolling)
   and Ask AI on the right (.kbask, css/ask.css), which a Preview covers (.kprev: the client's phone, .mph3). The
   list: .seg2 Shared · For a client, .kgrp groups with .kbg heads and .kbr rows; New: .kpop with .nk rows. The
   block editor: .kblk cards with the AI tag (.aitag), the small drawings of an answer (.msc, .myn, .mbox), + Block
   (.bmenu). One column at 880 px and narrower: Ask AI and the Preview cover the page. */

/* ---------- The place ---------- */
.page:has(> .tabview[data-tab="kb"]) { overflow: hidden; display: flex; flex-direction: column; }
.tabview[data-tab="kb"] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kbp { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
.kbm { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: var(--card); overflow: hidden; }
.kbv { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kbv.vin { animation: dd-rise .3s var(--ease-out) both; }
.kbask { position: relative; min-width: 0; min-height: 0; border-radius: 18px; background: var(--card); overflow: hidden; }
.kbask-in { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.top .kb-askb { display: none; }

/* ---------- The bar and the body of the card ---------- */
.kbm .xbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cardline); flex-wrap: wrap; min-height: 54px; }
.kbm .xbar .xt { font-size: var(--t-sm); font-weight: 600; margin-right: auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.kbm .xbody { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.seg2 { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.seg2 > span, .seg2 > button { font-size: var(--t-xs); font-weight: 500; color: var(--ink2); padding: 4px 11px; border-radius: 999px; transition: background-color var(--m-step) ease, color var(--m-step) ease, box-shadow var(--m-step) ease; }
.seg2 .on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pickc { font-size: var(--t-xs); font-weight: 500; background: var(--field); color: var(--ink); border-radius: 999px; padding: 0 11px; height: 32px; display: inline-flex; gap: 5px;
  align-items: center; white-space: nowrap; max-width: 220px; }
.pickc span { overflow: hidden; text-overflow: ellipsis; }
.pickc svg { width: 10px; height: 10px; flex: none; }
.kb-srch { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 12px; height: 32px; border-radius: 999px; background: var(--field); color: var(--ink3); width: 200px; max-width: 100%; }
.kb-srch svg { width: 14px; height: 14px; flex: none; }
.kb-srch input { flex: 1; min-width: 0; border: 0; background: none; font-size: var(--t-sm); color: var(--ink); outline: none; }

/* ---------- The list ---------- */
.kbm .kb-body.kcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-content: start; }
.kcol { display: flex; flex-direction: column; min-width: 0; }
.kgrp { break-inside: avoid; display: flex; flex-direction: column; padding-bottom: 8px; }
.kbg { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); padding: 10px 0 4px; }
.kbg span { font-weight: 500; margin-left: 4px; color: var(--ink3); opacity: .8; }
.kbr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; font-size: var(--t-s); padding: 7px 0; border-top: 1px solid var(--cardline); }
button.kbr:hover .nm { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.kbr .ic, .nk .ic { width: 24px; height: 24px; border-radius: 7px; background: var(--note); color: var(--note-d); display: grid; place-items: center; }
.kbr .ic svg, .nk .ic svg { width: 12px; height: 12px; }
.kbr .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbr .ub { font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; }
.kbr .nm2 { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; text-align: left; font-size: var(--t-s); }
.kbr .nm2 small, .kb-clr small { font-size: var(--t-xs); color: var(--ink3); }
.kbnone { font-size: var(--t-xs); color: var(--ink3); padding: 6px 0; }
.kb-cl { display: flex; flex-direction: column; }
.kb-clr { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); font-size: var(--t-s); text-align: left; }
.kb-clr .av2 { width: 32px; height: 32px; font-size: var(--t-xs); }
.kb-clr .nm2 { display: flex; flex-direction: column; }

/* ---------- New (and the "Used by N clients" question) ---------- */
.kpop { position: absolute; right: 12px; top: 56px; width: 320px; max-width: calc(100% - 24px); background: var(--surface); border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 22px 44px -18px rgba(20, 20, 20, .5); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 4;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .15s, transform .2s, visibility 0s .2s; }
.kpop.up { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .3s var(--ease-out); }
.kpop .pq, .bmenu .pq { font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); padding: 6px 10px 4px; }
.nk { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; font-size: var(--t-sm); line-height: 1.3; text-align: left;
  transition: background-color .2s, transform var(--m-press) var(--ease-out); animation: dd-rise .3s var(--ease-out) both; }
.nk:hover, .nk:focus-visible { background: var(--soft); }
.nk:active { transform: scale(.98); }
.nk .ic { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; font-size: var(--t-2xs); font-weight: 600; }
.nk .ic.ai { background: var(--care); color: var(--care-d); }
.nk b { font-weight: 500; }
.nk small { font-size: var(--t-2xs); color: var(--ink3); line-height: 1.35; }
.dlg2 { display: flex; flex-direction: column; gap: 10px; padding: 8px 10px 10px; font-size: var(--t-sm); line-height: 1.45; }
.dlg2 b { font-weight: 500; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- The editor ---------- */
.kb-ebar .bk2 { width: 32px; height: 32px; background: var(--soft); }
.kb-ebar .bk2 svg { width: 15px; height: 15px; }
.kbm .xbar .kb-title { max-width: min(100%, 460px); text-overflow: ellipsis; }
.kb-title { font: inherit; font-weight: 600; color: var(--ink); border: 0; background: none; padding: 2px 4px; margin-left: -4px; border-radius: 6px; min-width: 60px; field-sizing: content; max-width: 100%; }
.kb-title:focus { outline: none; background: var(--field); }
.kb-sub { font-weight: 400; color: var(--ink3); font-size: var(--t-xs); }
.ptop { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 2px; flex-wrap: wrap; }
.ptop:empty { display: none; }
.ptop .pv { font-size: var(--t-xs); color: var(--ink3); }
.ptop .pv b { color: var(--ink2); font-weight: 600; }
.who { font-size: var(--t-2xs); font-weight: 600; border-radius: 6px; padding: 1px 7px; background: var(--soft); color: var(--ink2); }
.who.ai { background: var(--care); color: var(--care-d); }
.pvers { margin-left: auto; font-size: var(--t-xs); font-weight: 500; border-radius: 999px; padding: 4px 12px; background: var(--soft); color: var(--ink); }
.kb-making { font-size: var(--t-xs); color: var(--ink3); animation: dd-live 1.4s ease-in-out infinite; }
.kb-set { display: flex; gap: 14px; flex-wrap: wrap; padding: 2px 2px 6px; }
.kb-set:empty { display: none; }
.kb-seg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink2); }
.kb-mod { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--try-bg); color: var(--try-d); font-size: var(--t-sm); }
.kb-mod b { font-size: var(--t-xs); font-weight: 600; }
.kb-mod[hidden] { display: none; }
.kb-url { padding-top: 6px; }
.kb-url .qb-in { font-size: var(--t-sm); min-height: 40px; }

/* ---------- The block editor ---------- */
.kb-blocks { display: flex; flex-direction: column; gap: 6px; }
.kblk { display: flex; flex-direction: column; gap: 8px; background: var(--field); border-radius: 12px; padding: 8px 12px 10px; font-size: var(--t-sm); line-height: 1.5;
  transition: box-shadow .25s, background-color .4s; }
.kblk.in { animation: dd-rise .35s var(--ease-out) both; }
.kblk.isai.in { animation: dd-rise .35s var(--ease-out) both, kb-aiflash 2.4s ease both; }
@keyframes kb-aiflash { 0%, 40% { background: color-mix(in srgb, var(--care) 60%, var(--field)); } }
.kblk.ed { box-shadow: 0 0 0 2px var(--sage); background: var(--surface); }
.kb-bhead { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; width: 100%; font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.kblk .bk { display: flex; align-items: center; font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.aitag { display: inline-block; font-size: var(--t-2xs); font-weight: 600; line-height: 18px; border-radius: 6px; background: var(--care); color: var(--care-d); max-width: 0; opacity: 0; padding: 0; margin-right: 0;
  overflow: hidden; transition: max-width .35s var(--ease-out), opacity .25s, padding .35s var(--ease-out), margin .35s var(--ease-out); }
.kblk.isai .aitag { max-width: 30px; opacity: 1; padding: 0 6px; margin-right: 7px; }
.kblk .bq { min-width: 0; display: block; }
.kblk .bq.h { font-size: var(--t-m); font-weight: 600; line-height: 1.3; }
.msc { display: flex; gap: 2px; }
.msc i { width: 12px; height: 14px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cardline); }
.myn { display: flex; gap: 4px; flex-wrap: wrap; }
.myn span, .mbox { font-size: var(--t-2xs); color: var(--ink3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cardline); border-radius: 7px; padding: 1px 10px; }
.mbox { display: block; width: 150px; padding: 3px 10px; }
.kb-fu { font-size: var(--t-xs); color: var(--ink3); }
.kb-it { display: flex; align-items: baseline; gap: 7px; }
.kb-it b { font-size: var(--t-xs); color: var(--ink3); }
.cbx { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink3); vertical-align: -2px; }
.vrow { display: flex; align-items: center; gap: 10px; }
.vt { width: 52px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--sage-d), var(--ink2)); color: #fff; display: grid; place-items: center; flex: none; }
.kb-img { max-width: 160px; max-height: 110px; border-radius: 8px; display: block; }
.kb-blank { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--note); color: var(--note-d); font-size: var(--t-xs); font-weight: 500; line-height: 20px; }
.kb-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kadd { display: flex; gap: 6px; padding-top: 4px; }
.plk { background: var(--soft); color: var(--ink); }
.bmenu { background: var(--surface); border-radius: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 36px -18px rgba(20, 20, 20, .45); padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 4px;
  max-width: 440px; animation: dd-rise .25s var(--ease-out) both; }
.bmenu[hidden] { display: none; }
.bmenu .pq { padding: 4px 0 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ch { font-size: var(--t-xs); font-weight: 500; background: var(--soft); color: var(--ink); border-radius: 999px; padding: 4px 11px; white-space: nowrap; transition: background-color .2s, transform var(--m-press) var(--ease-out); }
.ch:active { transform: scale(.95); }
.kb-srcs:empty { display: none; }
.kblk .srcs { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); color: var(--ink2); }
.kblk .srcs a { color: inherit; text-decoration: none; }
.kblk .srcs a:hover { text-decoration: underline; }

/* ---------- Plan and Atlas templates ---------- */
.kb-plan { display: flex; flex-direction: column; padding: 4px 0; }
.kb-pl textarea { width: 100%; border: 0; background: none; resize: none; overflow: hidden; font: inherit; font-size: var(--t-s); line-height: 1.55; color: var(--ink); padding: 5px 8px; border-radius: 8px; }
.kb-pl textarea:focus { outline: none; background: var(--field); }
.kb-pl.sub { padding-left: 22px; position: relative; }
.kb-pl.sub::before { content: '·'; position: absolute; left: 12px; top: 5px; color: var(--ink3); }
/* The Atlas template: the fixed four as chips, then a compact table (Field · Type · Ask) with tinted fields and pill
   selects, as the spec and the client's own Atlas Edit draw it (FX-S2; design review 42). */
.kb-atlas { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; --kb-cols: minmax(0, 1fr) 96px 132px 28px; }
.kb-th { font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.kb-fixed { display: flex; flex-direction: column; gap: 6px; }
.kb-chips, .kb-cols { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-chip { padding: 2px 10px; border-radius: 999px; background: var(--field); font-size: var(--t-xs); color: var(--ink2); }
.kb-thr { display: grid; grid-template-columns: var(--kb-cols); gap: 6px; padding: 0 2px; }
.kb-as { display: flex; flex-direction: column; }
.kb-ash { display: flex; align-items: center; gap: 6px; padding: 6px 0 4px; }
.kb-ti { box-sizing: border-box; min-width: 0; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit;
  font-size: var(--t-sm); color: var(--ink); outline: none; }
.kb-ti:hover { background: var(--field); }
.kb-ti:focus { background: var(--field); box-shadow: 0 0 0 2px var(--sage); }
.kb-ash .kb-ti { max-width: 260px; background: var(--field); font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
.kb-af { display: flex; flex-direction: column; gap: 4px; padding: 3px 0; border-bottom: 1px solid var(--cardline); }
.kb-afr { display: grid; grid-template-columns: var(--kb-cols); gap: 6px; align-items: center; }
.kb-ps { min-height: 28px; padding: 3px 8px; border: 0; border-radius: 999px; background: var(--soft); font: 500 var(--t-2xs) var(--font); color: var(--ink2); }
.kb-atlas .qe-x { width: 28px; height: 28px; }
.kb-fus { display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px 14px; }
.kb-fur { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 6px; align-items: center; }
.kb-ify { align-self: flex-start; padding: 0 8px; border-radius: 6px; background: var(--good-bg); color: var(--good-d); font-size: var(--t-2xs); font-weight: 600; line-height: 18px; }
.kb-cols { padding: 0 0 6px 14px; }
.kb-col { display: inline-flex; align-items: center; border-radius: 999px; background: var(--field); padding-left: 2px; }
.kb-col .kb-ti { width: auto; min-height: 26px; padding: 2px 6px; font-size: var(--t-xs); background: transparent; }
.kb-col .qe-x { width: 24px; height: 24px; }
.kb-as > .pill, .kb-atlas > .pill, .kb-fus > .pill { align-self: flex-start; margin-top: 6px; }
/* One size for every add button of the editors (+ Block beside @ Blank, + Field beside + Column; review 45). */
.kbm .pill.sm.plk, .kbm .kadd .pill { font-size: var(--pill-sm-t); padding: var(--pill-sm-pad); font-weight: 500; }
.kb-vers { display: flex; flex-direction: column; }
.kb-ver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: var(--t-s); }
.kb-ver small { color: var(--ink3); font-size: var(--t-xs); }
.kb-paste { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--field); padding: 10px 12px; font: inherit; font-size: var(--t-s); color: var(--ink); resize: vertical; }
.kb-blanks { padding: 4px 0 8px; }

/* ---------- Preview: the client's phone over Ask AI ---------- */
.kprev { position: absolute; inset: 0; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 12px 16px; z-index: 3; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateX(30px); transition: transform .45s var(--ease-drawer), opacity .3s, visibility 0s .45s; }
.kprev.up { opacity: 1; visibility: visible; transform: none; transition: transform .45s var(--ease-drawer), opacity .3s; }
.kph { align-self: stretch; display: flex; align-items: center; gap: 8px; }
.kph b { font-size: var(--t-s); margin-right: auto; }
.kph .rb { width: 32px; height: 32px; background: var(--soft); }
.mph3 { width: 260px; height: 500px; border-radius: 36px; padding: 8px; background: var(--frame); flex: none; }
.mph3 .in3 { height: 100%; border-radius: 29px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; padding: 16px 13px 13px; overflow-y: auto; }
.in3 .url { align-self: center; font-size: var(--t-2xs); color: var(--ink3); background: var(--field); border-radius: 999px; padding: 2px 10px; }
.in3 .apt { font-size: var(--t-l); line-height: 1.25; }
.kb-pbody { display: flex; flex-direction: column; gap: 14px; font-size: var(--t-sm); }
.in3 .go { margin-top: auto; font-weight: 600; font-size: var(--t-sm); border-radius: 12px; background: var(--ink); color: var(--surface); padding: 10px; flex: none; }

/* ---------- One column at phone width ---------- */
@media (max-width: 1100px) {
  .kbm .kb-body.kcols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .kbp { grid-template-columns: minmax(0, 1fr); }
  .kbask { display: none; }
  .top .kb-askb { display: grid; }
  .kbp.askon .kbask, .kbp.prev .kbask { display: block; position: fixed; inset: 0; z-index: 40; border-radius: 0; background: var(--card); animation: dd-rise .3s var(--ease-out) both; }
  .kb-srch { order: 9; flex: 1 0 100%; width: auto; margin-left: 0; }
  .kb-bar .kb-new { margin-left: auto; }
  .kbm .xbar { padding: 10px 12px; }
  .kbm .xbody { padding: 6px 12px 18px; }
  /* A phone: the field's name and its ✕ on one line, Type and Ask as two pills under the name. */
  .kb-thr { display: none; }
  .kb-afr, .kb-fur { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-bottom: 4px; }
  .kb-afr .kb-afn, .kb-fur .kb-ti { flex: 1 0 calc(100% - 40px); }
  .kb-afr .qe-x, .kb-fur .qe-x { order: 1; }
  .kb-afr select[data-w], .kb-fur select[data-w] { order: 2; margin-left: 4px; }
  .kbm select.kb-ps { padding: 2px 8px; }
  .mph3 { width: 100%; max-width: 300px; height: auto; min-height: 480px; }
  /* A phone zooms into a text box under 16 px: every box of the editor is 16 px here. */
  .kbm input, .kbm textarea, .kbm select, .kb-paste { font-size: var(--t-m); }
}

/* The open block: the fields stand in place of the block's words (the kind's label stays). */
.kblk.ed .kb-bhead > :not(.bk) { display: none; }
.kblk .qe .qb-in { min-height: 38px; padding: 8px 12px; font-size: var(--t-sm); }
.kblk .qe-row { grid-template-columns: 84px minmax(0, 1fr); font-size: var(--t-sm); color: var(--ink2); }

/* An empty knowledge base (and "Pick a client") sits near the top, as every other empty screen (design review 47). */
.kb-body > .emp { flex: none; justify-content: flex-start; min-height: 0; padding-top: 64px; }