/* APanel look — v1.0.0 (31 Oct 2026). Part of the APanel kit (standin/KIT.json); copy UNCHANGED into every agent and
   Better Outcomes. Spec: APANEL-SPEC §4v. The visual standard Sajid approved as "the tone" (Customer Care, Talk
   31 Oct 2026, 12:30–13:35): one font (BO), white page, near-black text, grey text, hairlines, 6px corners, 1px borders,
   no shadows, 32px controls, 24px titles on one line, 20px line icons (1.5px stroke, never filled, #555), colour only for
   meaning, airy spacing, night mode. Frame: white left panel with one thin line, no top bar, content from the top.
   Load after shell.css: it also gives the kit's existing ks-* screens the same tone and sizes. */

@font-face { font-family: "BO"; src: url("bo.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; }

:root {
  /* the tokens */
  --lk-font: "BO", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lk-page: #ffffff; --lk-text: #0a0a0a; --lk-grey: #8a8a8a; --lk-hair: #ececec; --lk-border: #e3e3e3; --lk-fill: #f1f1f1;
  --lk-icon: #555555; --lk-icon-on: #0a0a0a;
  --lk-radius: 6px; --lk-control: 32px; --lk-title: 24px; --lk-tile: 26px; --lk-icon-size: 20px; --lk-icon-gap: 13px;
  /* colour only for meaning */
  --lk-agent: #2f6fdb; --lk-good: #1f8a4c; --lk-attn: #b7791f; --lk-bad: #c53b30;
  --lk-new: #fde2e0; --lk-new-ink: #9b2c22; --lk-planned: #fdebd3; --lk-planned-ink: #8a4b0b;
  --lk-doing: #dde9fb; --lk-doing-ink: #1f4f9c; --lk-shipped: #dcf2e3; --lk-shipped-ink: #1d6b3d;
  /* the kit shell's own names, set to the same tone */
  --bg: var(--lk-page); --panel: var(--lk-page); --sunk: var(--lk-fill); --line: var(--lk-hair); --line2: var(--lk-border);
  --text: var(--lk-text); --text2: #333333; --muted: var(--lk-grey); --dim: #a3a3a3;
  --btn: var(--lk-text); --btn-ink: #ffffff; --btn-hover: #262626;
  --ok: var(--lk-good); --warn: var(--lk-attn); --bad: var(--lk-bad);
  --sans: var(--lk-font); --serif: var(--lk-font); --shadow: none;
}
:root[data-theme="dark"] {
  --lk-page: #111111; --lk-text: #f2f2f2; --lk-grey: #9a9a9a; --lk-hair: #232323; --lk-border: #2e2e2e; --lk-fill: #1d1d1d;
  --lk-icon: #a8a8a8; --lk-icon-on: #ffffff;
  --lk-agent: #6ea1f0; --lk-good: #5cc58a; --lk-attn: #e0b061; --lk-bad: #ef8a80;
  --lk-new: #3a1f1d; --lk-new-ink: #f3b3ad; --lk-planned: #3a2a17; --lk-planned-ink: #f2c891;
  --lk-doing: #1b2a43; --lk-doing-ink: #a9c6f5; --lk-shipped: #17301f; --lk-shipped-ink: #9fdcb5;
  --text2: #d0d0d0; --dim: #707070; --btn-ink: #111111; --btn-hover: #ffffff;
  color-scheme: dark;
}

body.lk, .lk { margin: 0; background: var(--lk-page); color: var(--lk-text); font: 400 15px/1.5 var(--lk-font); }
.lk * { box-sizing: border-box; }

/* ---- the frame: white left panel with one thin line, content from the top, no top bar ---- */
.lk-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lk-side { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px; border-right: 1px solid var(--lk-hair); background: var(--lk-page); }
.lk-agent { display: flex; align-items: center; gap: 10px; height: var(--lk-control); }
.lk-agent .lk-name { font: 400 var(--lk-title)/var(--lk-control) var(--lk-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-menu { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lk-menu a, .lk-menu button { display: flex; align-items: center; gap: var(--lk-icon-gap); height: 36px; padding: 0 10px; border: 0; border-radius: var(--lk-radius);
  background: none; color: var(--lk-text); font: 400 15px var(--lk-font); text-decoration: none; cursor: pointer; width: 100%; text-align: left; }
.lk-menu a:hover, .lk-menu button:hover { background: var(--lk-fill); }
.lk-menu [aria-current="page"] { background: var(--lk-fill); }
.lk-menu [aria-current="page"] .lk-ic { color: var(--lk-icon-on); }
.lk-menu .lk-count { margin-left: auto; color: var(--lk-grey); font-size: 14px; font-variant-numeric: tabular-nums; }
.lk-menu .lk-group { padding: 12px 10px 4px; color: var(--lk-grey); font-size: 14px; }
.lk-person { position: relative; margin-top: auto; }
.lk-person > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--lk-radius); background: none; color: var(--lk-text); font: 400 15px var(--lk-font); cursor: pointer; text-align: left; }
.lk-person > button:hover { background: var(--lk-fill); }
.lk-avatar { width: var(--lk-control); height: var(--lk-control); flex: none; display: grid; place-items: center; border-radius: var(--lk-radius); background: var(--lk-fill); font-size: 14px; }
.lk-person small { display: block; color: var(--lk-grey); font-size: 14px; }
.lk-pop { position: absolute; bottom: 52px; left: 0; right: 0; padding: 6px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius); background: var(--lk-page); }
.lk-pop[hidden] { display: none; }
.lk-main { min-width: 0; padding: 24px 40px 64px; }
.lk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: var(--lk-control); margin: 0 0 32px; }
.lk-title { margin: 0; font: 400 var(--lk-title)/var(--lk-control) var(--lk-font); }

/* ---- list and open item (the inbox pattern) ---- */
.lk-split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 40px; }
.lk-list { margin: 0; padding: 0; list-style: none; }
.lk-list > li > a, .lk-list > li > button { display: block; width: 100%; padding: 14px 12px; border: 0; border-radius: var(--lk-radius); background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.lk-list > li > [aria-current="true"], .lk-list > li > a:hover, .lk-list > li > button:hover { background: var(--lk-fill); }
.lk-list .lk-meta { color: var(--lk-grey); font-size: 14px; }
.lk-open { min-width: 0; }

/* ---- status tiles beside the list title: small, pastel, click to filter ---- */
.lk-tiles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lk-tiles button { display: inline-flex; align-items: center; gap: 8px; height: var(--lk-tile); padding: 0 8px; border: 0; border-radius: var(--lk-radius); font: 400 13px var(--lk-font); cursor: pointer; }
.lk-tiles [aria-pressed="true"] { outline: 1px solid currentColor; }
.lk-st-new { background: var(--lk-new); color: var(--lk-new-ink); } .lk-st-planned { background: var(--lk-planned); color: var(--lk-planned-ink); }
.lk-st-doing { background: var(--lk-doing); color: var(--lk-doing-ink); } .lk-st-shipped { background: var(--lk-shipped); color: var(--lk-shipped-ink); }
.lk-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--lk-radius); font-size: 13px; }

/* ---- controls: one height, 6px corners, 1px border, one black primary ---- */
.lk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--lk-control); padding: 0 12px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  background: var(--lk-page); color: var(--lk-text); font: 400 14px var(--lk-font); cursor: pointer; white-space: nowrap; }
.lk-btn:hover { background: var(--lk-fill); }
.lk-btn.lk-primary { background: var(--lk-text); color: var(--lk-page); border-color: var(--lk-text); }
.lk-input, .lk select, .lk input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .lk textarea {
  height: var(--lk-control); padding: 0 10px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius); background: var(--lk-page); color: var(--lk-text); font: 400 15px var(--lk-font); }
.lk textarea { height: auto; min-height: 96px; padding: 8px 10px; }
.lk :focus-visible { outline: 2px solid var(--lk-text); outline-offset: 2px; }
.lk-switch { position: relative; width: 36px; height: 20px; flex: none; border: 0; border-radius: var(--lk-radius); background: var(--lk-border); cursor: pointer; }
.lk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 4px; background: var(--lk-page); transition: left .12s; }
.lk-switch[aria-checked="true"] { background: var(--lk-good); }
.lk-switch[aria-checked="true"]::after { left: 18px; }
.lk-live { color: var(--lk-good); font-size: 13px; } .lk-off { color: var(--lk-grey); font-size: 13px; }

/* ---- cards: a box only around numbers, a chart or a form ---- */
.lk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin: 0 0 32px; }
.lk-card { padding: 20px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius); background: var(--lk-page); }
.lk-card .lk-k { color: var(--lk-grey); font-size: 14px; }
.lk-card .lk-v { display: block; margin-top: 4px; font: 400 28px var(--lk-font); font-variant-numeric: tabular-nums; }
button.lk-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.lk-card:hover { background: var(--lk-fill); }

/* ---- icons: 20px, 1.5px line, round, never filled ---- */
.lk-ic { width: var(--lk-icon-size); height: var(--lk-icon-size); flex: none; color: var(--lk-icon); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lk-ic-agent { color: var(--lk-icon-on); }

/* ---- the visitor widget (Sajid's drawing): one box, "+", send, three actions ---- */
.lk-widget { max-width: 640px; font: 400 15px var(--lk-font); color: var(--lk-text); }
.lk-wbox { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 7px 0 12px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius); background: var(--lk-page); }
.lk-wbox input { -webkit-appearance: none; appearance: none; flex: 1; height: 100%; border: 0 !important; padding: 0 !important; background: none; font: 400 15px var(--lk-font); color: var(--lk-text); outline: none; }
.lk-wbox input::placeholder { color: var(--lk-grey); }
.lk-wplus { width: 32px; height: 32px; border: 0; border-radius: var(--lk-radius); background: none; color: var(--lk-text); cursor: pointer; display: grid; place-items: center; }
.lk-wsend { width: 44px; height: 44px; border: 0; border-radius: var(--lk-radius); background: var(--lk-text); color: var(--lk-page); cursor: pointer; display: grid; place-items: center; }
.lk-wsend .lk-ic, .lk-wplus .lk-ic { color: inherit; }
.lk-wacts { display: flex; justify-content: space-between; margin-top: 12px; }
.lk-wacts button { display: inline-flex; align-items: center; gap: 8px; height: var(--lk-control); border: 0; background: none; color: var(--lk-grey); font: 400 14px var(--lk-font); cursor: pointer; }
.lk-wacts .lk-flag { color: var(--lk-bad); } .lk-wacts .lk-bulb { color: var(--lk-attn); } .lk-wacts .lk-star { color: var(--lk-good); }
.lk-wbrand { margin-top: 8px; color: var(--lk-grey); font-size: 13px; text-align: center; }

/* ---- the kit shell's screens in the same tone and sizes (asked by Customer Care, audit R2-6) ---- */
.ks-btn, .ks-me button { height: var(--lk-control); border-radius: var(--lk-radius); border-color: var(--lk-border); font-family: var(--lk-font); }
.ks-wide { height: var(--lk-control); }
.ks-card { border-radius: var(--lk-radius); border-color: var(--lk-border); box-shadow: none; }
.ks-signup input[type=email], .ks-signup input[type=url], .ks-list input, .ks-ask input { height: var(--lk-control); border-radius: var(--lk-radius); border-color: var(--lk-border); }
.ks-steps li, .ks-substeps li, .ks-tag { border-radius: var(--lk-radius); }
.ks-sub, .ks-fine, .ks-acct { font-size: 14px; }
.ks-signup h1, .ks-plans h1, .ks-launchpad h1 { font: 400 var(--lk-title) var(--lk-font); }

/* ---- touch: the look stays 32px, the finger gets 44px (screen standard 14) ---- */
@media (pointer: coarse) {
  .lk-btn, .lk-menu a, .lk-menu button, .lk-list > li > a, .lk-list > li > button, .lk-wacts button, .lk-wplus, .ks-btn, .ks-me button, .ks-wide,
  .lk input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .lk select { min-height: 44px; }
  .lk input[type=checkbox], .lk input[type=radio] { width: 22px; height: 22px; }
}
/* ---- narrow screens: the panel becomes a top strip, the list sits above the open item ---- */
@media (max-width: 760px) {
  .lk-app { grid-template-columns: 1fr; }
  .lk-side { border-right: 0; border-bottom: 1px solid var(--lk-hair); padding: 12px 16px; gap: 12px; }
  .lk-menu { flex-direction: row; flex-wrap: wrap; }
  .lk-menu a, .lk-menu button { width: auto; }
  .lk-person { margin-top: 0; }
  .lk-main { padding: 16px; }
  .lk-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lk-app > * { min-width: 0; }
  .lk-wacts { flex-wrap: wrap; gap: 8px; }
}