/* Daily Life Doc, round 32 (zone H2): the knowledge base's For: All clients · Me (js/kb/kb-for.js, .kfor-*; the
   choice drawn as Starts over is, .kb-seg and .seg2), the list's "Me" tag and its two filters, the page of an app for
   the expert (js/me/me-page.js, .mepg-*) and its Clients table and per-client charts (js/me/me-blocks.js, .mec-*,
   .mep-*). Tokens only, so both themes; tinted, never bordered. */
.kb-forw:empty { display: none; }
.klk-body .kb-forw, .kc-body .kb-forw { align-self: center; width: min(100%, 440px); padding: 6px 0 0; }
.kc-body .kb-forw { padding: 0 0 12px; }
.kb-ebody .kb-forw { padding: 6px 0 4px; }
.kfor { display: flex; flex-direction: column; gap: 10px; }
.kfor-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 32px; }
.kfor-row .kb-seg + .pill { margin-left: auto; }
.seg2 > button[disabled] { opacity: .45; cursor: not-allowed; }
.kfor-t, .kfor-d { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink2); }
.kfor-t input { height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink); font: inherit;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.kfor-t input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sage); }
.kfor-d .seg2 { flex-wrap: wrap; }
.kfor-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--ink2); font-size: var(--t-xs); font-weight: 600; }
.kbr .kfor-nm { display: flex; align-items: center; gap: 0; }
.kbr .kfor-nm > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kbr .kfor-nm .kfor-tag { flex: none; margin-left: 6px; }
.kfor-f { display: inline-flex; gap: 6px; flex: none; }
.kb-bar .kfor-f .filter { height: 32px; padding: 0 12px; font-size: var(--t-xs); font-weight: 600; background: var(--field); }
.kb-bar .kfor-f .filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 480px) {
  .kb-bar .kfor-f { order: 9; flex: 1 0 100%; }
  /* Days on its own line under Time, the eight buttons narrower so they keep one row down to 340 px. */
  .kfor-d { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kfor-d .seg2 > button { padding: 4px 7px; }
}
@media (max-width: 360px) { .kfor-d .seg2 > button { padding: 4px 5px; letter-spacing: -0.01em; } }

/* The page of an app for the expert. */
.mepg { flex: 1; min-height: 0; }
.mepg .xbar .xt { margin-right: auto; }
.mepg-t { font-weight: 600; overflow-wrap: anywhere; }
.mepg-st { font-size: var(--t-xs); color: var(--ink3); }
.mepg-st:empty { display: none; }
.kbm .mepg-b { padding: 14px 16px 24px; gap: 22px; background: var(--app); }
.mepg-blk { min-width: 0; }
.mepg-blk:not(.wide) { width: min(100%, 720px); }
.mec-t { margin: 0 0 8px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.mec-none { font-size: var(--t-sm); color: var(--ink3); }
.klk .mec-none { margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink3); }
.mec-wrap { overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: var(--lift); }
.mec { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.mec thead th { padding: 10px 12px 8px; text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); white-space: nowrap; }
.mec tbody tr { cursor: pointer; transition: background-color var(--m-step, .18s) ease; }
.mec tbody tr + tr > * { border-top: 1px solid var(--cardline); }
.mec tbody tr:hover, .mec tbody tr:focus-visible { background: var(--soft); outline: none; }
.mec tbody th, .mec td { padding: 11px 12px; text-align: left; vertical-align: top; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mec tbody th { font-weight: 400; }
.mec tbody th b { font-weight: 600; }
.mec tbody th small { display: block; font-size: var(--t-xs); color: var(--ink3); }
.mec .n { text-align: right; }
.mec-no { color: var(--ink3); }
.mec-rv { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: var(--on-ink);
  font-size: var(--t-xs); font-weight: 600; }
.mep { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
/* Each chart is its own tinted box (C1's .prg): the row adds no second card, only the tap. */
.mep-r { min-width: 0; border-radius: 16px; cursor: pointer; transition: transform var(--m-step, .18s) ease; }
.mep-r .prg { height: 100%; box-sizing: border-box; }
.mep-r:active { transform: scale(.99); }
.mep-r:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.mepg-frame { display: flex; justify-content: center; }
.mepg-frame iframe { width: min(100%, 440px); height: min(72vh, 680px); border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--lift); }
/* A phone's width: the rows stack, the name over its values, each value with its column's head on the left (the
   cells' data-h; fixer FX14, walk W2 H2-2: a table cut at 340 px with no sign that it scrolls). The Preview's head
   row with no rows stays one row that scrolls inside its box. */
@media (max-width: 480px) {
  .kbm .mepg-b { padding: 12px 10px 20px; }
  .mec:has(tbody) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mec tbody, .mec tbody tr { display: block; }
  .mec tbody tr { padding: 10px 14px 8px; }
  .mec tbody tr + tr > * { border-top: 0; }
  .mec tbody tr + tr { border-top: 1px solid var(--cardline); }
  .mec tbody th { display: block; padding: 0 0 4px; white-space: normal; }
  .mec tbody th small { display: inline; margin-left: 6px; }
  .mec td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; white-space: normal; text-align: right; }
  .mec td::before { content: attr(data-h); flex: none; color: var(--ink3); font-size: var(--t-xs); text-align: left; }
  .mec td.n { text-align: right; }
}