/* admin/css/80-polish-and-wide.css: Layout polish, round two, and the wide-screen card, tile and grid system (the latest blocks win).
   The admin stylesheet is these files in numeric order, linked from admin.html; a later file overrides an earlier one, so keep the order. */
/* ---------- layout polish (2026-10-11) ---------- */
/* The details of every one-line row start at the same x down a list. The name
   column was a percentage of a row whose right-hand buttons differ in width,
   so each row's details began somewhere else. */
.kr-main>b{flex:0 0 clamp(170px,17vw,250px)}
@media(max-width:680px){.kr-main>b{flex:none}}
/* a figure that is a phrase, not a number */
.kstat b.long{font-size:20px;line-height:1.5;font-weight:600}
/* the pm's Jobs list was dealt into two grid columns of cards: one list of
   rows, full width */
@media(min-width:1180px){#jbList{display:block}}
/* beside a side column the list is narrower: a smaller name column, and the
   details may take a second line before they are cut */
@media(min-width:681px){
  .pg-two .kr-main>b{flex-basis:clamp(150px,13vw,200px)}
  .pg-two .kr-main>span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
}

/* ---------- round two (2026-10-11): one row height, quiet phone rows ---------- */
/* a one-line row and a two-line row differ by a line, not by 8px of padding */
.kr{padding:9px 6px;min-height:56px}
@container (min-width:700px){.lr{min-height:56px;padding:9px 18px}}
/* on a phone the lead row says status and service; the phone number and the
   Next line are on the job (they pushed the service out of the row) */
@container (max-width:699px){.lr .lj-extra{display:none}}
@container (max-width:699px){
  /* dots and status on one line, the service under them, nothing cut to "La…" */
  .lr-sub{flex-wrap:wrap;row-gap:1px}
  .lr-sub .lr-svc{order:3;flex:1 0 100%;white-space:normal}
  .lr-sub .lr-svc::before{content:none}
}

/* section titles stand out: they were 16px grey-white over 16px row names */
.sec-head h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.sec-quiet .sec-head h3{font-size:18px;font-weight:700;color:var(--ink);font-family:var(--display);letter-spacing:-.015em}
.cal2 .agenda .sec-head h3{font-size:20px}
.sec-head h3 .count,.sec-head h3 small{font-size:15px;font-weight:600;color:var(--mist)}
@media(max-width:680px){.sec-head h3{font-size:20px}.sec-quiet .sec-head h3{font-size:17px}}

/* Reports: under the charts, two even columns (the donut, then the lists of reports) */
.rp-lower{display:grid;gap:36px;align-items:start;margin-top:36px}
@media(min-width:1100px){.rp-lower{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
.rp-charts{display:grid;gap:36px;align-items:start;margin-top:36px}
@media(min-width:1100px){.rp-charts{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
.rb-page .rp-charts>.sec+.sec,.rb-page .rp-lower .sec+.sec{margin-top:0}

/* audit 10-11: badge white-on-orange was 3.6:1; phone row buttons 34px wide */
.navlink .badge,#tabbar .navlink .badge{background:#c2410c}
@media(max-width:700px){.kr-acts .btn,.kr-acts .btn-icon{min-height:40px;min-width:40px}}
/* ==========================================================================
   WIDE SCREENS (900px and up): LISTS AS CARDS, LINKS AS TILES.
   Owner, 2026-10-11: "bland and hard to read, the text on the left is so far
   from the right". A one-line row put the name at one edge and its button
   1,500px away, so rows are cards in a grid as wide as the screen allows, and
   the "go to" lines are tiles. Pages only (#view): panels and sheets keep
   their rows. This is the ONE place these rules live (it was five layered
   blocks until 2026-10-12): edit here, do not add a competing rule.

   The system: one padding (--tp), one gap (--tg), one radius (--tr) for every
   card and tile; a small label on top, the figure or phrase under it. Only
   short figures (32, $370, 63%) get big type; a phrase stops at two lines.
   ========================================================================== */
@media(min-width:900px){
  #view{--tp:20px;--tg:16px;--tr:14px}

  /* ---- cards: a .kr row in a .klist ---- */
  #view .klist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:var(--tg);background:none;border:0;border-radius:0;overflow:visible}
  #view .klist>.kr{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;padding:var(--tp);min-height:76px;background:var(--card);border:1px solid var(--line);border-radius:var(--tr);transition:border-color .15s,background .15s}
  #view .klist>.kr:first-child{border-top:1px solid var(--line)}
  #view .klist>.kr:only-child{grid-column:1/-1}
  #view .klist .kr-main{display:flex;flex-direction:column;align-items:stretch;gap:7px}
  #view .klist .kr-main>b{flex:none;max-width:none;font-size:16.5px;font-weight:650;white-space:normal;align-self:auto}
  #view .klist .kr-main>span{flex:none;display:-webkit-box;white-space:normal;-webkit-line-clamp:3;line-clamp:3;font-size:14.5px;line-height:1.5;color:var(--slate)}
  #view .klist .kr-main>span .late{color:var(--t-rose)}
  #view .klist .kr-main>span .warn{color:var(--wheat)}
  #view .klist .kr-right{font-size:16px}
  #view .klist .kr-acts .btn{min-height:38px;padding:7px 14px;font-size:14px}
  #view .klist .kr-acts .btn-icon{min-width:38px;padding:7px}
  #view .klist .klist-more{grid-column:1/-1;border:0;padding:6px 2px 0}
  #view .pg-side .klist{grid-template-columns:minmax(0,1fr)}
  /* the customer's portal keeps its senior scale on a desktop too: these card
     rules out-rank the portal's own (an id in the selector), and took a 20px
     title to 16.5 and a solid 16px line to 14.5 at 74% (2026-10-12 review) */
  .easy #view .klist>.kr{padding:20px 22px}
  .easy #view .klist .kr-main>b{font-size:20px}
  .easy #view .klist .kr-main>span{font-size:var(--fs-meta);-webkit-line-clamp:4;line-clamp:4}
  .easy #view .klist .kr-right{font-size:17px}
  /* a card with a figure AND buttons (Self-performed, Jobs): name and figure on top, the words across the full card, the buttons last under a line */
  #view .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main right" "acts acts";gap:10px 16px}
  #view .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)) .kr-main{grid-area:main}
  #view .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)) .kr-right{grid-area:right;align-self:start;font-size:18px;padding-top:1px}
  #view .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)) .kr-acts{grid-area:acts;justify-content:flex-start;padding-top:12px;margin-top:2px;border-top:1px solid var(--line)}

  /* ---- summary and fact rows: one boxed list of rows, as on the lead ----
     They were tiles (2026-10-10): a small label over a figure, which made a
     value that means nothing alone ("Consistency 1", "By contractor 4") the
     biggest thing in the box, and drew the same facts as rows in the lead
     sheet but as tiles on a customer. One pattern now: the label says what it
     is, the value sits beside it, the chevron says it opens (2026-10-12). */
  #view .klinks,#view .kfacts{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--tr);overflow:hidden}
  #view .klink{grid-template-columns:minmax(0,1fr) auto 16px;gap:16px;min-height:54px;padding:13px var(--tp);border:0;border-top:1px solid var(--line);font-size:15px;transition:background .15s}
  #view .klink:first-child{border-top:0}
  #view .klink-l{color:var(--ink);font-weight:500;line-height:1.35}
  #view .klink-v{font-size:15px;font-weight:600;color:var(--slate);white-space:nowrap}
  #view .klink-v.num{font:800 18px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
  #view .klink-v.bad{color:var(--t-rose)} #view .klink-v.good{color:var(--t-moss)} #view .klink-v.warn{color:var(--wheat)} #view .klink-v.hot{color:var(--blaze-hot)}
  #view .kfact,#view .kfact.static{grid-template-columns:minmax(150px,280px) minmax(0,1fr) 16px;gap:16px;min-height:54px;padding:13px var(--tp);border-top:1px solid var(--line);transition:background .15s}
  #view .kfact.static{grid-template-columns:minmax(150px,280px) minmax(0,1fr)}
  #view .kfact:first-child{border-top:0}
  #view .kfact-l{font-size:14.5px;color:var(--slate)}
  #view .kfact-v{font-size:15.5px;font-weight:600;color:var(--ink);white-space:normal;overflow:visible;line-height:1.4}
  #view .kfact-v.muted{color:var(--mist);font-weight:500}
  #view .kfact-v.bad{color:var(--t-rose)} #view .kfact-v.warn{color:var(--wheat)} #view .kfact-v.good{color:var(--t-moss)}

  /* ---- the side column: rows stacked the way a phone stacks them ----
     A card with a time AND a button took one layout and the same card without
     the button another, side by side down "Coming up". In the side column
     every row is the name and its line, the time under them, and the buttons
     on the right. */
  #view .pg-side .klist>.kr,#view .pg-side .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main acts" "right acts";gap:4px 14px;padding:14px 16px;min-height:0}
  #view .pg-side .klist .kr-main{grid-area:main;gap:3px}
  #view .pg-side .klist .kr-main>b{font-size:15.5px}
  #view .pg-side .klist .kr-main>span{font-size:14px;-webkit-line-clamp:2;line-clamp:2}
  #view .pg-side .klist .kr-right,#view .pg-side .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)) .kr-right{grid-area:right;justify-self:start;text-align:left;font-size:14px;font-weight:600;padding:0;white-space:normal}
  #view .pg-side .klist .kr-acts,#view .pg-side .klist>.kr:has(.kr-right):has(.kr-acts>:not(.more-btn,.more-menu)) .kr-acts{grid-area:acts;align-self:center;padding:0;margin:0;border:0}
  #view .pg-side .klist .kr-chev{grid-area:acts;align-self:center}
  #view .pg-side .klist{gap:10px}

  /* ---- the Leads table keeps its columns, inside one bordered panel ---- */
  #view .klist:has(>.lr){display:block}
  #view .lr-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  #view .lr{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 84px minmax(0,1.35fr) 92px 64px 16px;column-gap:20px;padding:14px 22px;min-height:68px;align-items:center}
  #view .lr-name{grid-row:1;display:block;line-height:1.25;align-self:end}
  #view .lr-svc,#view .lr-st,#view .lr-dots,#view .lr-val,#view .lr-age,#view .lr .kr-chev{grid-row:1/span 2;align-self:center}
  #view .lr-val{font-size:16px;font-weight:650}
  #view .lr .lj-extra{grid-column:1;grid-row:2;align-self:start;margin-top:-2px;min-width:0}

  /* ---- Settings and Account: every section down the left ---- */
  .settings .pg-two,.acct2 .pg-two{grid-template-columns:minmax(0,1fr)}
  .settings .pg-side,.acct2 .pg-side{gap:36px}
  /* the two connection figures line up with the first two tiles below them */
  .settings .kstats{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
}
@media(min-width:900px) and (hover:hover){
  #view .klist>.kr:hover{border-color:var(--line-2);background:color-mix(in srgb,var(--card) 88%,#fff)}
  #view .klink:hover,#view a.kfact:hover,#view button.kfact:hover{background:color-mix(in srgb,var(--card) 90%,#fff)}
  #view .lr-list .lr:hover{background:color-mix(in srgb,var(--card) 85%,#fff)}
}

/* customer, contractor and crew pages hold little: keep them to a readable column */
@media(min-width:1200px){
  body.role-customer #view>*,body.role-contractor #view>*,body.role-crew #view>*{max-width:1080px}
}

/* phones: small links and buttons get a 44px touch area without moving anything (the hit area grows outward) */
@media(max-width:700px){
  #view .sec-head>a,#view .sec-head>.btn-link,#view .link-btn,#view .rb-cv-back,#view .btn-link{position:relative}
  #view .sec-head>a::after,#view .sec-head>.btn-link::after,#view .link-btn::after,#view .rb-cv-back::after,#view .btn-link::after{content:"";position:absolute;inset:-12px -8px}
  #view .btn.btn-line:not(.btn-sm){min-height:40px}
  #view .kr-main>a,#view .lr-name a,#view a.kr-title{position:relative}
}
/* the smallest labels (chart ends, the "Self-perform" chip) are 12.5px, not 11.5px, so they read */
.band,.spam-flag,.repeat,.task-kind,.ph .ph-tag,.strip .lbl,.goal-tick span{font-size:12.5px}