/* phone.css - Daybook on a phone (5 Nov 2026, Jordan walked the phone concepts: "sharper, cleaner, condense it up a bit",
   no washed-out text, no rounded bubbles, Daybook's own light theme). Loaded only below 600px wide (server/views.js head,
   media="(max-width: 600px)"); public/phone.js builds the screens these rules style. html:root and html.k-ph out-rank the
   design's own :root rules, so nothing here reaches a wider screen. */

/* ---- 1. the app bar: one row ---- */
html:root header.k-top.k-strip{flex-wrap:nowrap!important;height:52px!important;min-height:52px;padding:0 4px 0 10px!important;gap:2px!important;row-gap:0!important;align-items:center}
html:root header.k-top .brand b,html:root header.k-top .k-desk-lbl,html:root header.k-top a.k-desk-home,html:root header.k-top a.bell,html:root header.k-top form.chrome-search{display:none!important}
html:root header.k-top .brand{flex:none;min-height:44px;padding:0 4px 0 0}
html:root header.k-top details.k-desk>summary{border:0!important;background:transparent!important;padding:0 6px!important;min-height:44px;font-size:16px!important;font-weight:700!important;color:var(--h-ink,var(--ink))!important;max-width:220px;overflow:hidden;text-overflow:ellipsis}
html:root header.k-top .k-desk-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:root header.k-top .k-mid{display:none!important}
html:root header.k-top.k-ph-sopen{flex-wrap:wrap!important;height:auto!important;padding-bottom:8px!important}
html:root header.k-top.k-ph-sopen .k-mid{display:flex!important;order:9;flex:1 1 100%!important}
html:root header.k-top.k-ph-sopen .k-mid .k-views{display:none!important}
html:root header.k-top.k-ph-sopen .k-mid form.lg-search{flex:1 1 100%!important;margin:0!important;max-width:none!important}
html:root header.k-top .k-right{margin-left:auto;gap:0!important;flex:none}
html:root header.k-top .k-ph-search{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--h-ink,var(--ink));box-shadow:none}
html:root header.k-top .k-ph-search[aria-expanded="true"]{color:var(--h-on,#fff);background:var(--h-selected,#0A1628);border-radius:6px}
html:root header.k-top a.k-acct-btn{width:44px;height:44px;min-height:44px;max-width:none!important;padding:0!important;border:0!important;background:transparent!important;font-size:0!important;display:flex!important;align-items:center;justify-content:center}
html:root header.k-top a.k-acct-btn::before{content:attr(data-ini);width:32px;height:32px;border-radius:16px;background:var(--h-hover,#DDE4EB);color:var(--h-ink,var(--ink));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em}
/* every other screen: Back on the left, the account on the right */
/* (9 Nov, audit #3: only a bar that has a Back gives up the logo and the desk menu; Quotes has neither search nor Back) */
html:root header.k-top:has(a.k-back):not(:has(form.lg-search)) .brand,html:root header.k-top:has(a.k-back):not(:has(form.lg-search)) details.k-desk{display:none!important}
html:root header.k-top a.k-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 2px!important;border:0!important;background:transparent!important;font-size:16px!important;font-weight:600!important;color:var(--h-ink,var(--ink))!important;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
html:root header.k-top a.k-back>span:first-child{font-size:0}
html:root header.k-top a.k-back>span:first-child::before{content:"";width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);display:inline-block;margin:0 4px 0 8px}
/* the desk menu holds the views too */
html:root header.k-top .k-desk-body .k-ph-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 0 6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
html:root header.k-top .k-desk-body .k-ph-views .k-menu-lbl{grid-column:1/-1}
html:root header.k-top .k-desk-body .k-ph-views a{padding:10px 8px!important;font-weight:600;font-size:14px!important;border:1px solid var(--line-strong)!important;border-radius:4px!important;text-align:center}
html:root header.k-top .k-desk-body .k-ph-views a.on{background:var(--h-selected,#0A1628)!important;color:var(--h-on,#fff)!important;border-color:var(--h-selected,#0A1628)!important}
html:root header.k-top .k-desk-body .k-desk-words{display:none}
html:root header.k-top .k-desk-body .k-desk-note{display:none}

/* the bottom bar: an icon over each word, the unread count on Alerts */
html:root header.k-top nav.k-phone-nav{padding:5px 8px calc(8px + env(safe-area-inset-bottom))!important;gap:4px;border-top:1px solid var(--line-strong)!important}
html:root header.k-top nav.k-phone-nav a{flex-direction:column;gap:2px;min-height:50px!important;font-size:11.5px!important;font-weight:700!important;border-radius:6px;position:relative;margin:0!important;color:var(--ink-2)!important}
/* (9 Nov, audit #8: the current page is marked, a stronger fill and a bar along its top edge; nothing moves) */
html:root header.k-top nav.k-phone-nav a.on{color:var(--ink)!important;background:var(--h-hover,#DDE4EB);box-shadow:inset 0 2px 0 var(--ink)}
html:root header.k-top nav.k-phone-nav a.k-phone-capture{background:var(--h-selected,#0A1628)!important;color:var(--h-on,#fff)!important}
html:root header.k-top nav.k-phone-nav a.k-phone-capture.on{box-shadow:inset 0 2px 0 var(--h-on,#fff)}
html:root header.k-top nav.k-phone-nav a.k-pn-alerts[data-n]::after{content:attr(data-n);position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--warn,#9E4E0D);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

/* ---- 2. lists: sharper, denser, nothing washed out ---- */
html:root .lg{--ink-3:var(--ink-2)}
html:root .lg-daybook,html:root .lg{padding-left:12px!important;padding-right:12px!important}
/* the tool line: Filter and the period, New deal on the right; the rest opens under Filter */
html:root .lg .lg-bar.lg-strip{flex-wrap:wrap!important;overflow:visible!important;gap:6px!important;padding:8px 0 4px!important;scroll-snap-type:none!important}
html:root .lg .lg-bar.lg-strip>*{display:none!important}
html:root .lg .lg-bar.lg-strip>.k-ph-fbtn,html:root .lg .lg-bar.lg-strip>.k-ph-per{display:inline-flex!important}
html:root .lg .lg-bar.lg-strip>.lg-right{display:flex!important;order:2;margin-left:auto!important;border:0!important;padding:0!important}
html:root .lg .lg-bar.lg-strip>.lg-right>*{display:none!important}
html:root .lg .lg-bar.lg-strip>.lg-right>:is([data-new-deal],.new-deal-wrap,form:has([data-new-deal])){display:inline-flex!important}
html:root .lg .lg-bar.lg-strip.k-ph-open>:not(script):not(style){display:flex!important}
html:root .lg .lg-bar.lg-strip.k-ph-open>:not(.k-ph-fbtn):not(.k-ph-per):not(.lg-right){order:5;flex:1 1 100%!important;flex-wrap:wrap!important;margin:0!important;padding:8px 0 0!important;border:0!important;border-top:1px solid var(--line)!important}
html:root .lg .lg-bar.lg-strip.k-ph-open .lg-pseg{border:1px solid var(--line-strong)!important;padding:0!important}
html:root .lg .k-ph-fbtn,html:root .lg .k-ph-per{height:38px;min-height:38px;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--card);color:var(--ink);font:600 13.5px inherit;font-family:inherit;box-shadow:none}
html:root .lg .k-ph-fbtn[aria-expanded="true"]{background:var(--h-selected,#0A1628);color:var(--h-on,#fff);border-color:var(--h-selected,#0A1628)}
html:root .lg .lg-strip :is(.lg-primary,[data-new-deal]){min-height:38px!important;height:38px;border-radius:4px!important;padding:0 14px!important;font-size:13.5px!important}
/* the figures: three in one strip, All figures shows the rest */
html:root .lg .lg-footbar.lg-topstrip{display:block!important;padding:0!important;margin:6px 0 8px!important;border:0!important;background:transparent!important}
html:root .lg .lg-topstrip .lg-strip-h{display:block;font-size:13px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--ink-2)!important;margin:0 0 6px!important}
html:root .lg .lg-topstrip .lg-foot-lbl,html:root .lg .lg-topstrip .net,html:root .lg .lg-topstrip .lg-desk-note{display:none!important}
html:root .lg .lg-footbar.lg-topstrip .lg-ftiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;padding:0!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;background:var(--card);border:1px solid var(--line-strong);border-radius:4px}
html:root .lg .lg-footbar.lg-topstrip .lg-ftiles .lg-tile{display:block!important;padding:7px 10px!important;border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;min-width:0}
html:root .lg .lg-footbar.lg-topstrip .lg-ftiles .lg-tile .v{display:block;font-size:16px!important;font-weight:700!important;line-height:1.2!important;color:var(--ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root .lg .lg-footbar.lg-topstrip .lg-ftiles .lg-tile .t{display:block;font-size:11.5px!important;font-weight:600!important;color:var(--ink-2)!important;white-space:normal!important;line-height:1.25}
html:root .lg .lg-footbar.lg-topstrip .lg-ftiles .lg-tile .n,html:root .lg .lg-footbar.lg-topstrip .lg-ftiles .lg-tile .tgt{display:none!important}
html:root .lg .lg-footbar.lg-topstrip:not(.k-ph-all) .lg-ftiles:has([data-k="delivered"]) .lg-tile:not([data-k="delivered"]):not([data-k="going_out"]):not([data-k="pipeline"]){display:none!important}
html:root .lg .lg-footbar.lg-topstrip:not(.k-ph-all) .lg-ftiles:not(:has([data-k="delivered"])) .lg-tile:nth-child(n+4){display:none!important}
html:root .lg .k-ph-figmore{display:block;margin:4px 0 0 auto;min-height:32px;padding:0 4px;border:0;background:transparent;color:var(--ink);font:600 12.5px inherit;font-family:inherit;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
/* All deals or My contracts */
html:root .k-ph-seg{display:grid;grid-template-columns:1fr 1fr;margin:0 0 8px;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--card)}
html:root .k-ph-seg>*{display:flex;align-items:center;justify-content:center;min-height:40px;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none}
html:root .k-ph-seg>*+*{border-left:1px solid var(--line-strong)}
html:root .k-ph-seg>.on{background:var(--h-selected,#0A1628);color:var(--h-on,#fff)}
/* a deal is one tight line: the customer and the price, then the deal number, the car and the stage */
html:root .sheet{padding:0 0 16px!important}
html:root .sheet .cardlist{gap:0!important;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--card)}
html:root .sheet .cardlist .rowcard{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:8px;align-items:center;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:9px 12px!important;background:var(--card)!important;min-height:52px}
html:root .sheet .cardlist .rowcard:last-child{border-bottom:0!important}
html:root .sheet .cardlist .rowcard .top{display:contents}
html:root .sheet .cardlist .rowcard .who{grid-row:1;grid-column:1/4;margin:0!important;font-size:14.5px!important;font-weight:700!important;color:var(--ink)!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
html:root .sheet .cardlist .rowcard .money{grid-row:1;grid-column:4;font-family:inherit!important;font-size:14.5px!important;font-weight:700!important;font-variant-numeric:tabular-nums}
html:root .sheet .cardlist .rowcard .ref{grid-row:2;grid-column:1;font-family:inherit!important;font-size:12.5px!important;font-weight:600!important;color:var(--ink-2)!important}
html:root .sheet .cardlist .rowcard .what{grid-row:2;grid-column:2;margin:0!important;font-size:12.5px!important;color:var(--ink-2)!important;white-space:nowrap!important}
html:root .sheet .cardlist .rowcard .statuspill{grid-row:2;grid-column:3;justify-self:start}
/* a stage is a small square tag, not a bubble */
html.k-ph .statuspill,html:root .sheet .cardlist .statuspill{display:inline-flex!important;align-items:center;padding:1px 5px!important;border-radius:2px!important;background:transparent!important;border:1px solid currentColor!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.05em;text-transform:uppercase;line-height:1.3!important;box-shadow:none!important}
html.k-ph .statuspill .g,html:root .sheet .cardlist .statuspill .g{display:none!important}

/* ---- 3. a deal ---- */
html.k-ph-deal .k-pack-page{padding:0 12px 16px!important}
html.k-ph-deal:not(.k-ph-full) [data-ph]:not(.k-ph-show){display:none!important}
html.k-ph-deal.k-ph-screen .k-ph-ov{display:none!important}
html.k-ph-deal.k-ph-full .k-ph-ov:not(.k-ph-keep){display:none!important}
html.k-ph-deal .k-ph-scr{display:none}
html.k-ph-deal.k-ph-screen .k-ph-scr{display:block;padding:12px 0 4px}
html.k-ph-deal .k-ph-st{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
html.k-ph-deal .k-ph-fullbar{display:none}
html.k-ph-deal.k-ph-full .k-ph-fullbar{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:20;margin:0 -12px 8px;padding:6px 12px;background:var(--h-bg,var(--card-head));border-bottom:1px solid var(--line-strong)}
html.k-ph-deal .k-pack-split{display:block!important;gap:0!important}
html.k-ph-deal:not(.k-ph-full):not(.k-ph-screen) .k-pack-split{margin:0!important;padding:0!important;border:0!important}
html.k-ph-deal .k-pack-flow,html.k-ph-deal .k-pack-rail{border:0!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;position:static!important;max-height:none!important;overflow:visible!important}
/* the title block, condensed: the car, the stage, then who and the stock number on two lines */
html.k-ph-deal .k-ph-hide{display:none!important}
/* (9 Nov, audit #44: a deal stays hidden until phone.js has arranged it, so it never opens in the desktop layout and jumps; the head script lifts this after 3 seconds whatever happens) */
html.k-ph-wait .k-pack-page{visibility:hidden}
/* (9 Nov, audit #6: "body" and [style] so these out-rank the look's later :root body h1[style], and its rule that takes the border off anything inline in the deal page) */
html.k-ph-deal body .k-ph-top[style]{padding:10px 12px!important;border:1px solid var(--line-strong)!important;border-radius:4px!important;box-shadow:none!important}
html.k-ph-deal .k-ph-top>*{padding:0!important;margin:0!important;border:0!important;min-height:0!important}
html.k-ph-deal .k-meta-sum{display:flex!important;flex-wrap:wrap;gap:2px 14px;min-height:0!important;padding:4px 0 0!important;font-size:13px!important}
html.k-ph-deal .k-meta-sum>span{padding:0!important;min-height:0!important}
html.k-ph-deal .k-ph-acts{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--card)}
html.k-ph-deal .k-ph-acts>span{display:flex;flex-wrap:wrap;gap:8px}
html.k-ph-deal .k-ph-top{margin-top:8px!important}
html.k-ph-deal .k-pack-page h1{font-size:20px!important;line-height:1.25!important;margin:2px 0 4px!important;letter-spacing:-.01em}
html.k-ph-deal .k-ph-ov .k-owner-change,html.k-ph-deal .k-ph-ov .k-evidence{font-size:12.5px}
/* the next step: 1 of N, Open it, Skip for now */
/* the next step keeps its own colours: navy with white words in light, a raised dark card with light words in dark (5 Nov:
   Jordan, dark mode on his Samsung: the box came out white with white words, because dark mode turns the header's selected colour light) */
html.k-ph-deal .k-next{--nx-bg:#0A1628;--nx-edge:#0A1628;--nx-ink:#FFFFFF;--nx-muted:#C9D3DD;--nx-line:#7D8C9B;--nx-go-bg:#FFFFFF;--nx-go-ink:#0A1628}
:root[data-theme="dark"] .k-next{--nx-bg:#202E3D;--nx-edge:#61758A;--nx-ink:#F1F4F6;--nx-muted:#C0CDD9;--nx-line:#61758A;--nx-go-bg:#E8EDF2;--nx-go-ink:#0A1628}
html.k-ph-deal .k-next{display:block!important;margin:10px 0 0!important;padding:10px 12px!important;border:1px solid var(--nx-edge)!important;border-radius:6px!important;background:var(--nx-bg)!important;color:var(--nx-ink)!important;box-shadow:none!important}
html.k-ph-deal .k-next .k-ph-nk{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-muted)}
html.k-ph-deal .k-next .k-ph-nw{display:block;margin-top:4px;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--nx-ink)}
html.k-ph-deal .k-next .k-ph-nm{font-size:12.5px;color:var(--nx-muted);margin-top:2px}
html.k-ph-deal .k-next .k-ph-nb{display:flex;gap:6px;margin-top:10px}
html.k-ph-deal .k-next .k-ph-nb>*{flex:1;display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:4px;font:600 14px inherit;font-family:inherit;text-decoration:none;box-shadow:none}
html.k-ph-deal .k-next a.k-next-go{background:var(--nx-go-bg)!important;color:var(--nx-go-ink)!important;border:1px solid var(--nx-go-bg)!important}
html.k-ph-deal .k-next .k-ph-skip{background:transparent!important;color:var(--nx-ink)!important;border:1px solid var(--nx-line)!important}
/* View full deal pack, and the section lines */
html.k-ph-deal .k-ph-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:4px;background:var(--card);color:var(--ink);font:600 14px inherit;font-family:inherit;text-decoration:none;box-shadow:none}
html.k-ph-deal .k-ph-full{display:flex;width:100%;margin:8px 0 0}
html.k-ph-deal .k-ph-list{margin:8px 0 0;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--card)}
html.k-ph-deal .k-ph-line{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--card);color:var(--ink);font-family:inherit;text-align:left;box-shadow:none}
html.k-ph-deal .k-ph-line:last-child{border-bottom:0}
html.k-ph-deal .k-ph-lt{flex:1;min-width:0;display:flex;flex-direction:column}
html.k-ph-deal .k-ph-lt b{font-size:14.5px;font-weight:700}
html.k-ph-deal .k-ph-lt span{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.k-ph-deal .k-ph-ln{font-size:13.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
html.k-ph-deal .k-ph-chev{flex:none;color:var(--ink-2)}
/* a section on its own screen: one card, full width */
html.k-ph-deal.k-ph-screen [data-ph].k-ph-show{margin-top:8px!important}
html.k-ph-deal.k-ph-screen details.k-hold>summary{display:none!important}

/* ---- 4. read from the contract ---- */
html.k-ph-deal #review h2{display:none}
html.k-ph-deal #review .k-ph-rule{display:flex;flex-direction:column;gap:4px;margin:4px 0 10px;padding:10px 12px;border:1px solid var(--ink);border-radius:4px;background:var(--card);font-size:13px;line-height:1.4;color:var(--ink)}
html.k-ph-deal #review .k-ph-rule .k-ph-btn{align-self:flex-start;margin-top:6px;background:var(--h-selected,#0A1628);color:var(--h-on,#fff);border-color:var(--h-selected,#0A1628)}
html.k-ph-deal #review .k-ph-grp{margin:0 0 6px;border:1px solid var(--line-strong);border-radius:4px;background:var(--card);overflow:hidden}
html.k-ph-deal #review .k-ph-grp>summary{display:flex!important;align-items:center;gap:8px;min-height:48px;padding:0 12px;list-style:none;cursor:pointer}
html.k-ph-deal #review .k-ph-grp>summary::-webkit-details-marker{display:none}
html.k-ph-deal #review .k-ph-grp[open]>summary{border-bottom:1px solid var(--line);background:var(--card-head)}
html.k-ph-deal #review .k-ph-grp[open]>summary .k-ph-chev{transform:rotate(90deg)}
html.k-ph-deal #review .k-ph-gt{flex:1;font-size:14.5px;font-weight:700}
html.k-ph-deal #review .k-ph-gl{font-size:11.5px;font-weight:700;color:#fff;background:var(--warn,#9E4E0D);padding:2px 6px;border-radius:2px}
html.k-ph-deal #review .k-ph-gn{font-size:13.5px;font-weight:700;color:var(--ink-2)}
html.k-ph-deal #review .k-ph-grp .sec-title{display:flex;justify-content:flex-end;margin:0!important;padding:6px 12px 0;font-size:0!important}
html.k-ph-deal #review .k-ph-grp .sec-title form button{font-size:12.5px!important}
html.k-ph-deal #review .k-ph-grp .card{border:0!important;margin:0!important;box-shadow:none!important}
html.k-ph-deal #review table,html.k-ph-deal #review tbody,html.k-ph-deal #review tr,html.k-ph-deal #review td{display:block;width:auto!important}
html.k-ph-deal #review tr{padding:8px 12px;border-bottom:1px solid var(--line)}
html.k-ph-deal #review tr:last-child{border-bottom:0}
html.k-ph-deal #review td{padding:2px 0!important;border:0!important}
html.k-ph-deal #review td .muted{display:none}
html.k-ph-deal #review tr[data-low]{background:#FBF5EC}
:root[data-theme="dark"] #review tr[data-low]{background:rgba(255,202,145,.12)}
html.k-ph-deal #review tr[data-contract] td>b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
html.k-ph-deal #review .conflict{border:1px solid var(--ink)!important;border-radius:4px!important}
html.k-ph-deal #review .sec-title[style*="warn"]{font-size:13px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---- 5. finishing (5 Nov walk of the build) ---- */
html.k-ph-deal body .k-ph-top h1[style],html.k-ph-deal body .k-ph-top h1,html.k-ph-deal body .k-ph-top h1 *{font-size:19px!important;line-height:1.25!important;letter-spacing:-.01em!important}
html:root header.k-top a.k-back{font-size:0!important}
html:root header.k-top a.k-back [data-k-back-label]{font-size:16px}
/* Deal pack: one line per deal (it was about 490px a deal): who and when, then the deal number, the car and the stage, then
   what it waits on; the head row and the desk columns (stock, rep, the P M F R D marks, gross) stay on the wide screen */
html:root .lg #lg-head{display:none!important}
html:root .lg #lg-list{border:1px solid var(--line-strong)!important;border-radius:4px!important;margin-top:0!important}
html:root .lg #lg-list,html:root .lg #lg-rows{min-width:0!important;width:auto!important;overflow:hidden!important}
html:root .lg #lg-rows .lg-line{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto;width:auto!important;min-width:0!important;column-gap:8px;row-gap:3px;align-items:center;padding:9px 12px!important;min-height:52px;border-bottom:1px solid var(--line)!important;background:var(--card)!important}
html:root .lg #lg-rows .lg-line>.c{padding:0!important;margin:0!important;border:0!important;height:auto!important;min-height:0!important;line-height:1.3!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root .lg #lg-rows .lg-line>.c:is(.rnum,.stock,.rep,.marks,.gross){display:none!important}
html:root .lg #lg-rows .lg-line>.c.who{grid-row:1;grid-column:1/4;font-size:14.5px!important}
html:root .lg #lg-rows .lg-line>.c.who b{font-weight:700}
html:root .lg #lg-rows .lg-line>.c.when{grid-row:1;grid-column:4;justify-self:end;font-family:inherit!important;font-size:12.5px!important;font-weight:600;color:var(--ink-2)}
html:root .lg #lg-rows .lg-line>.c.no{grid-row:2;grid-column:1;font-family:inherit!important;font-size:12.5px!important;font-weight:600;color:var(--ink-2);letter-spacing:0!important}
html:root .lg #lg-rows .lg-line>.c.no .k{display:none}
html:root .lg #lg-rows .lg-line>.c.car{grid-row:2;grid-column:2;font-size:12.5px!important;color:var(--ink-2)}
html:root .lg #lg-rows .lg-line>.c.stc{grid-row:2;grid-column:3/5;justify-self:end;overflow:visible}
html:root .lg #lg-rows .lg-line>.c.stc .statuspill,html:root .lg #lg-rows .lg-line>.c.stc .w{white-space:nowrap;overflow:visible;max-width:none}
html:root .lg #lg-rows .lg-line>.c{min-width:0}
html:root .lg #lg-rows .lg-line>.c.hold{grid-row:3;grid-column:1/5}
html:root .lg #lg-rows .lg-line>.c.hold .chip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--warn,#9E4E0D)!important;font-weight:600}
html:root .lg .lg-strip :is(.lg-primary,[data-new-deal]){display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important}
html:root .lg .k-ph-figmore{margin-top:2px;margin-bottom:-4px}
html:root .lg .lg-footbar.lg-topstrip:not(:has(.lg-tile:nth-of-type(4))) .k-ph-figmore{display:none}
html.k-ph-deal details.k-hold>div>div{padding:9px 0!important;gap:4px 8px!important}
html.k-ph-deal a.k-hold-row{text-decoration:none!important;font-size:14px!important;font-weight:600;flex:1 1 100%!important;min-width:0!important;order:2}
html.k-ph-deal details.k-hold>div>div>span:last-child{order:3}
/* Paperwork: the row filters are one row you swipe, not 400px of chips before the first row */
html.k-ph-deal .k-filter-bar{flex-wrap:wrap!important;gap:4px 8px!important;padding:4px 0!important}
html.k-ph-deal .k-filter-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px!important;flex:1 1 100%!important;scrollbar-width:none;padding-bottom:2px}
html.k-ph-deal .k-filter-chips::-webkit-scrollbar{display:none}
html.k-ph-deal .k-filter-chips>form{flex:none}
html.k-ph-deal .k-filter-chips button{white-space:nowrap;border:1px solid var(--line-strong)!important;border-radius:4px!important;padding:0 10px!important;min-height:36px!important;font-size:13px!important}
/* a row: the question, then its state, its answer and Change on one line */
html.k-ph-deal .k-row{padding:8px 10px!important;row-gap:2px!important;column-gap:8px!important;align-items:center!important;min-height:0!important}
html.k-ph-deal .k-row>*{min-height:0!important}
html.k-ph-deal .k-row>.k-row-cells{order:3;flex:0 1 auto!important;width:auto!important;margin-left:30px!important}
html.k-ph-deal .k-row>.k-row-answer{order:4;flex:0 1 auto!important;margin-left:30px!important;font-weight:600;color:var(--ink)}
html.k-ph-deal .k-row>.k-row-cells:not(:has(span:not(:empty))){display:none!important}
html.k-ph-deal .k-row>.k-row-acts{order:5;margin-left:auto!important}
html.k-ph-deal .k-row>.k-row-acts :is(a,button){min-height:36px!important;padding-top:0!important;padding-bottom:0!important}
/* 11 Nov 2026 (the desk's new look, server/pack2.js): what a phone keeps as it had it. The filters are still the one row
   you swipe (on a desk they are behind a Show button); a question keeps its answer beside it when there is room; the
   pop-up buttons that have a screen here go to it, and Notes stay with their row. */
html.k-ph-deal .k-filter-bar{min-width:0;max-width:100%;margin:0!important}
html.k-ph-deal details.k-show{flex:1 1 100%;min-width:0;max-width:100%}
html.k-ph-deal details.k-show>summary{display:none!important}
html.k-ph-deal .k-filter-chips{position:static!important;padding:0 0 2px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
html.k-ph-deal .k-filter-chips .k-show-item{display:inline-flex;align-items:center;gap:6px;background:var(--card)!important;color:var(--ink)!important;font-weight:600}
html.k-ph-deal .k-filter-chips .k-show-item.on{background:var(--inverse)!important;color:var(--on-inverse)!important;border-color:var(--inverse)!important}
html.k-ph-deal .k-filter-chips .k-show-tick:empty{display:none}
html.k-ph-deal .k-filter-chips .k-show-count{font-size:12px;opacity:.8}
html.k-ph-deal .k-row.k-row-q>.k-row-main{flex:1 1 150px!important}
html.k-ph-deal .k-row.k-row-q>.k-row-acts{order:0}
html.k-ph-deal .k-row-via,html.k-ph-deal .k-row-note{display:block;margin-left:0}
html.k-ph-deal .k-hbtn[data-dlg="notes"]{display:none!important}
html.k-ph-deal details.k-hold>.k-pop{position:static!important;width:auto!important}
html.k-ph-deal .k-head-2{padding:4px 0 0!important}
html.k-ph-deal .k-head-2 .k-meta-more{flex:1 1 100%;margin:4px 0 0!important}
html.k-ph-deal .k-head-2 .k-meta-more>.k-meta-grid{position:static!important;width:auto!important;box-shadow:none!important}
html.k-ph-deal .k-secc{padding:6px 8px}
/* a row reached by its address (#item-N) lands a little below the top edge, never cut by a fraction of a pixel */
html.k-ph-deal .k-row{scroll-margin-top:8px}
/* the header's small line wraps on a phone, so the dot between two items would start a line: a gap does the job here */
html.k-ph-deal .k-head-2{gap:2px 14px!important}
html.k-ph-deal .k-h2i+.k-h2i::before{content:none!important}

/* ---- 6. go-live B13 (13 Nov 2026 phone audit, C:/Users/markh/s100/dbk-audit/3-phone.md) ---- */
/* P1-1: the LMS edit box opens as a line of its own under the deal's small line, never hanging off the right edge */
html.k-ph-deal .k-head-lms:has(.k-lms-edit[open]){flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
html.k-ph-deal .k-lms-edit[open]{display:block;flex:1 1 100%;margin-left:0}
html.k-ph-deal .k-lms-edit>.k-pop{position:static!important;min-width:0!important;width:auto!important;margin-top:6px;box-shadow:none!important}
html.k-ph-deal .k-lms-edit>.k-pop input:not([type=hidden]){min-width:0;max-width:100%;flex:1 1 120px}
/* P1-2: the Eclipse check and the Money table stack, one line a value, the way Read from the contract does */
html.k-ph-deal .k-ecl-all .card{overflow:visible!important;max-width:100%;box-sizing:border-box}
html.k-ph-deal .k-ecl-all :is(table,thead,tbody,tr,th,td){display:block;width:auto!important;min-width:0!important;max-width:100%;box-sizing:border-box}
html.k-ph-deal .k-ecl-all thead{display:none}
html.k-ph-deal .k-ecl-all tr{padding:8px 12px;border-bottom:1px solid var(--line)}
html.k-ph-deal .k-ecl-all tr:last-child{border-bottom:0}
html.k-ph-deal .k-ecl-all :is(th,td){padding:2px 0!important;border:0!important;overflow-wrap:anywhere;text-align:left!important}
html.k-ph-deal .k-ecl-all #eclipse-checks td:nth-of-type(1)::before{content:"Daybook: ";color:var(--ink-2);font-weight:600}
html.k-ph-deal .k-ecl-all #eclipse-checks td:nth-of-type(2)::before{content:"Eclipse: ";color:var(--ink-2);font-weight:600}
html.k-ph-deal .k-ecl-all :is(input,select,textarea){max-width:100%;min-width:0;box-sizing:border-box}
html.k-ph-deal .k-ecl-all form.inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
html.k-ph-deal .k-ecl-all .cmp2{grid-template-columns:minmax(0,1fr)!important}
/* P1-3: Paperwork is a card a section: no heading row, the name on its own line, the count and what it waits on under it,
   no coloured side stripe (the selected row keeps its selected fill, server/pack2.js) */
html.k-ph-deal .k-secs{display:flex;flex-direction:column;gap:8px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
html.k-ph-deal .k-secs>.k-secs-head{display:none!important}
html.k-ph-deal .k-secs>.k-sec,html.k-ph-deal .k-secs>.k-sec-na{border:1px solid var(--line-strong)!important;border-radius:6px;background:var(--card);overflow:hidden}
html.k-ph-deal .k-secs>.k-sec.k-z>.k-secrow{background:transparent}
html.k-ph-deal .k-secrow{grid-template-columns:minmax(0,1fr) auto 26px;grid-template-areas:"name done chev" "wait wait chev";align-items:center;row-gap:0}
html.k-ph-deal .k-secrow>.k-secc-name{grid-area:name;padding:9px 4px 2px 12px}
html.k-ph-deal .k-secrow>.k-secc-done{grid-area:done;padding:9px 4px 2px}
html.k-ph-deal .k-secrow>.k-secc-wait{grid-area:wait;padding:0 4px 9px 12px}
html.k-ph-deal .k-secrow>.k-secc-wait:empty{display:none}
html.k-ph-deal .k-secrow>.k-secc-chev{grid-area:chev}
html.k-ph-deal .k-sec-open>.k-sec-head{border-bottom:1px solid var(--line)}
/* P1-4: a row's own screen is its details; the breadcrumb repeats the screen's title, so it goes */
html.k-ph-deal .k-panel-crumb{display:none}
html.k-ph-deal.k-ph-screen .k-panel-top>.k-panel-name{display:none}
html.k-ph-deal .k-panel-top{align-items:center!important}
html.k-ph-deal .k-panel-top>.k-next-row{flex:1 1 auto!important;min-width:0;max-width:none!important}
html.k-ph-deal .k-panel-top>.k-drawer-close{margin-left:auto}