/* Field pages inside the app frame (shell.js, A · CRM). When the frame is on (body.sh-on), the field look's own
   variables follow the frame's theme variables, and each page's own header gives way to the frame's top bar.
   Without the frame (it failed to load) the pages keep their own header and the field look. Owner: A · Field tools. */
body.sh-on{
  --panel:var(--surface); --sunk:var(--surface-2); --ink:var(--fg); --line:var(--border);
  --accent-ink:var(--accent-fg); --good-soft:var(--good-bg);
  --f-display:var(--font); --f-body:var(--font);
  background:var(--bg); color:var(--fg); font-family:var(--font);
}
/* The frame shows the company, the views and tabs, the person and sign-out. */
body.sh-on .wrap > .top h1,
body.sh-on .who > span, body.sh-on .who > a.btn, body.sh-on #companyWrap, body.sh-on #signOut,
body.sh-on .top .ver{display:none!important}
body.sh-on .wrap > .top{justify-content:flex-end;min-height:0}
body.sh-on .who{justify-content:flex-end}
/* The frame runs edge to edge; the page column keeps its own gutter. */
body.sh-on{padding:0;margin:0}
body.sh-on .wrap{padding:14px 16px 96px}
/* Accent words inside the page use the frame's contrast-fitted accent text (the frame styles its own links). */
body.sh-on .wrap .note a{color:var(--accent-text)}
/* Visual tools: the frame shows the company and the tabs; the job bar keeps the job, photos and saving. */
body.sh-on #jlBrand, body.sh-on #jlCo, body.sh-on .th-head{display:none!important}
body.sh-on main.th{padding:14px 16px 96px}
/* Tool pages (body.jl-tool): keep the tool's own side gutter; the frame's bars and the job bar run edge to edge. */
body.sh-on.jl-tool{padding:0 16px 96px}
body.sh-on.jl-tool > .sh-top, body.sh-on.jl-tool > #shellTop{margin:0 -16px}
body.sh-on .jl{position:sticky;top:var(--sh-h,0px);z-index:14;margin:0 0 12px}
body.sh-on.jl-tool .jl{margin:0 -16px 12px}
/* Status tags (UI_GUIDE §10): squarer, 12 px bold, 3 px colored left edge, tinted, always a word; Manrope (§14). */
body.sh-on .pill{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:0;border-radius:6px;padding:3px 8px;
  border:1px solid var(--border);border-left:3px solid var(--muted);background:var(--surface-2);color:var(--fg)}
body.sh-on .pill.ok{background:var(--good-bg);border-color:var(--good-bd);border-left-color:var(--good);color:var(--good)}
body.sh-on .pill.warn{background:var(--warn-bg);border-color:var(--warn-bd);border-left-color:var(--warn);color:var(--warn)}
body.sh-on .pill.over, body.sh-on .pill.bad{background:var(--bad-bg);border-color:var(--bad-bd);border-left-color:var(--bad);color:var(--bad)}
/* Camera: the sync tag sits on the page's header line (not alone in an empty card), and the cards keep the 14 px gap. */
body.sh-on #appView{display:flex;flex-direction:column;gap:14px}
body.sh-on #appView > section.card:first-child{background:none;border:0;padding:0;box-shadow:none}
/* Job bar on a phone (UI review #310): one row with the job, Save to job and More; More opens the other three. */
body.sh-on #jlMore{display:none}
@media (max-width:640px){
  body.sh-on .jl-in{flex-wrap:wrap}
  body.sh-on .jl-job{flex:1 1 0;min-width:0}
  body.sh-on .jl-job select{max-width:100%;width:100%}
  body.sh-on .jl-acts{flex-wrap:nowrap;margin-left:0}
  body.sh-on .jl-open{display:none}
  body.sh-on #jlMore{display:inline-flex}
  body.sh-on .jl:not(.jl-more-open) #jlPhotos, body.sh-on .jl:not(.jl-more-open) #jlSaved, body.sh-on .jl:not(.jl-more-open) #jlHome{display:none}
  body.sh-on .jl.jl-more-open .jl-acts{flex-wrap:wrap}
  body.sh-on .jl button, body.sh-on .jl .jl-link{min-height:44px}
}