/* Daily Life Doc, round 32 (zone C2): the knowledge base's Connections (js/kb/kb-conn.js, .kn-*), About (.kn-about;
   When to use is gone since fixer FX10) and who uses an item (js/kb/kb-used.js, .kud-*: rows like the
   list's, the client's initial in a small round, Changed in amber).
   Round 30 (zone C): the Calendar card (js/kb/kb-conn-cal.js; Settings → Connections until round 32): one row, with its
   ⓘ; not connected: a tinted field (no border) and Save on one line (the button under the field at 340 px); connected:
   "Connected" in green (or "Not read" in amber) with the read time and the week's busy times, the masked address in
   grey, and Remove on the row of the name. */
.cn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.cn-head .nt-t b { font-size: var(--t-s); }
.cn-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cn-in { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--field);
  color: var(--ink); font: inherit; font-size: var(--t-s); }
.cn-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sage); }
.cn-in[disabled] { color: var(--ink3); }
.cn-add .pill { flex: none; min-height: 42px; }
.cn-err { margin: 6px 2px 0; }
.cn-state { margin: 6px 0 0; font-size: var(--t-xs); color: var(--ink2); line-height: 1.4; }
.cn-state b { font-weight: 600; }
.cn-ok { color: var(--good-d); }
.cn-bad { color: var(--try-d); }
.cn-addr { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink3); overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .cn-add { flex-wrap: wrap; }
  .cn-add .pill { flex: 1 1 100%; }
}

/* Round 32 (fixer FX10). A connection's About: the label small and grey over its one line (no When to use any more). */
.kb-usedw:empty { display: none; }
.kn-about { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 4px; }
.kus-l { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.kn-ab { margin: 0; font-size: var(--t-s); color: var(--ink); line-height: 1.4; }

/* Who uses an item: under the client's page (an app), under the editor (a template, instructions). */
.kb-usedw { align-self: center; width: min(100%, 440px); padding: 18px 0 8px; }
.kb-ebody .kb-usedw { width: 100%; max-width: 720px; }
.kud-g + .kud-g { margin-top: 8px; }
.kud-r .av2 { width: 24px; height: 24px; border-width: 1.2px; font-size: var(--t-2xs); }
.kud-r .ub { text-align: right; }
.kud-r .ub.kud-ch { color: var(--try-d); }
.kud-r .nm2 small { white-space: normal; }

/* A connection's page: the bar, When to use, then the connection's own part. */
.kn-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.kn-body .kb-usew, .kn-use { width: 100%; max-width: 560px; align-self: flex-start; padding: 0; }
.kn-part { max-width: 560px; }
.kn-t { display: inline-flex; align-items: center; gap: 6px; }
.kn-t .klk-t { font-weight: 600; }
.kn-part .cn-head .nt-t { display: none; }          /* the bar names the Calendar already */
.kn-part .cn-head { justify-content: flex-end; min-height: 0; }
.kn-part .cn-head:not(:has(button)) { display: none; }
.kn-state { margin: 0; font-size: var(--t-s); }
.kn-act { display: flex; gap: 8px; }
.kn-who { margin-top: 10px; }
.kn-who .kud-r { grid-template-columns: 24px minmax(0, 1fr) 0; }
.kbr .ub.kn-on { color: var(--good-d); }
.kbr .ub.kn-bad { color: var(--try-d); }
.kb-nf { padding: 16px 0; }

/* Round 32 (fixer FX10). A Changed copy's differences from the shared app (js/kb/kb-copy-diff.js): the marks as the
   block editor draws Ask AI's changes (.kblk.add / .chg / .del, ins and del in css/kb.css). */
.kcd-head { margin: 0 0 10px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.kcd-list { display: flex; flex-direction: column; gap: 6px; }
.kcd-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--field); font-size: var(--t-sm); line-height: 1.4; overflow-wrap: anywhere; }
.kcd-t { margin: 0 0 8px; font-weight: 600; }
.kcd-ty { font-size: var(--t-xs); color: var(--ink3); text-transform: capitalize; }
.kcd-row ins { text-decoration: none; border-radius: 4px; padding: 0 2px; background: color-mix(in srgb, var(--sage) 34%, transparent); }
.kcd-row del { color: var(--ink3); text-decoration: line-through; }
.kcd-act { display: flex; justify-content: flex-end; padding-top: 12px; }