/* Seat Map: only what is new beyond ../offer-summary/styles.css.
   Same Direction C rules: white sheet, graphite ink, one blue for what you can
   press, IBM Plex Sans, 18px body, nothing under 16px, 56px inputs. */

.sidehead{font-size:20px;font-weight:600;line-height:1.3;margin-top:32px}
.group>.sidehead:first-child,.dgroup>.dhint+.sidehead{margin-top:20px}
.sublabel+.hint{margin-top:4px}
.dhint{margin-top:6px}

/* one seat */
.seat{border:1px solid var(--line);padding:12px 16px 16px;margin-top:12px;min-width:0}
.shead{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;min-height:48px}
.sname{font-size:19px;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere;flex:1 1 12ch}
.stools{display:flex;gap:20px;flex:none}
.stools .link{font-size:16px}
.seat>.hint{margin-top:2px}
.seat .field{margin-top:12px}
.seat>.seg{margin-top:12px}
.seat .links{margin-top:4px}
.seg button{line-height:1.2;overflow-wrap:anywhere;min-width:0}
.seg.stack{grid-auto-flow:row;grid-auto-rows:minmax(48px,auto)}
.seg.stack button{text-align:left;padding:8px 14px}
.seg.stack button+button{border-left:0;border-top:1px solid var(--line)}
.addseat{margin-top:12px!important}
.emptylist{overflow-wrap:anywhere}

/* next hire picks */
.pickgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.chip.pick{width:100%;min-width:0}
.chip.pick .pl{flex:1;min-width:0;overflow-wrap:anywhere}
.chip .ord{flex:none;min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:2px solid currentColor;border-radius:var(--r);font-weight:600;font-size:18px}
.order{list-style:none;padding:0;margin:12px 0 0}
.order li{display:grid;grid-template-columns:36px minmax(0,1fr);padding:10px 0;border-top:1px solid var(--hair);overflow-wrap:anywhere}
.order li:last-child{border-bottom:1px solid var(--hair)}
.order .on{font-weight:600}
.order b{font-weight:600;display:block}
.order .q{display:block;font-size:16px;color:var(--muted);margin-top:2px}

/* the seat map on screen */
.resultblock{margin-top:16px}
#phoneslot .resultblock,#deskslot .resultblock{margin-top:0}
.sheet{margin-top:8px;overflow-wrap:anywhere}
.sm-title{font-size:22px;font-weight:600;line-height:1.25;margin-top:12px}
.sm-ctx{font-size:16px;color:var(--muted);margin-top:4px}
.sm-src{font-size:16px;color:var(--muted)}
.sm-grp{margin-top:24px}
.sm-grp h4,.sm-sched h4{font-size:19px;font-weight:600;line-height:1.3;padding-bottom:6px;border-bottom:1px solid var(--ink);margin:0}
.sm-list,.sm-order{list-style:none;padding:0;margin:0}
.sm-list li,.sm-order li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:8px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.sm-list .n,.sm-order .n,.sm-row .n,.sm-sec .n{font-size:16px;color:var(--muted)}
.sm-order .n{font-weight:600;color:var(--ink);font-size:18px}
.sm-list small,.sm-order small{display:block;font-size:16px;color:var(--muted);line-height:1.4;margin-top:2px}
.sm-order .ref{font-size:16px;color:var(--muted)}
.sm-none{font-size:16px;color:var(--muted);padding:8px 0}
.sm-sched{margin-top:32px}
.sm-cols{display:none}
.sm-sec{font-size:18px;font-weight:600;margin-top:16px;display:grid;grid-template-columns:40px 1fr}
.sm-sec .n{color:var(--ink);font-size:18px}
.sm-row{display:grid;grid-template-columns:40px minmax(0,1fr);padding:8px 0;border-bottom:1px solid var(--hair)}
.sm-row .s{display:contents}
.sm-row .h,.sm-row .t{grid-column:2;font-size:16px;line-height:1.4}
.sm-row .h{font-weight:500;margin-top:2px}
.sm-row .t{color:var(--muted)}
.sm-row .h.none{color:var(--muted);font-weight:400}
.sm-row .t:empty{display:none}
.sm-notes{white-space:pre-wrap;margin-top:8px}
#pdfactions,#doneactions{margin-top:24px}
.donemsg{font-size:20px;font-weight:600}
#doneactions .btn{margin-top:12px}
#pdferr{margin-top:16px}
.result>.hint{margin-top:8px}
.how .faq{margin-top:4px}

/* desktop workbench: the whole form, the live map beside it */
@media (min-width:1100px){
  /* minmax(0,..) on both tracks so the grid never forces sideways scroll */
  body.desk .wrap{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
  body.desk .wrap>*{min-width:0}
  body.desk .pickgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.desk .chip.pick{font-size:16px;min-height:52px}
  body.desk .seg button{font-size:16px}
  body.desk[data-on=step] .pcol{display:block;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;background:var(--sheet);border:1px solid var(--hair);padding:8px 32px 32px}
  body.desk .sheet{margin-top:0}
  body.desk .sm-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:16px;font-size:16px;font-weight:500;color:var(--muted);padding:12px 0 6px 40px;border-bottom:1px solid var(--ink)}
  body.desk .sm-sched h4{border-bottom:0}
  body.desk .sm-row{grid-template-columns:40px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:baseline}
  body.desk .sm-row .s{display:contents}
  body.desk .sm-row .s>span:last-child{font-size:17px}
  body.desk .sm-row .h,body.desk .sm-row .t{grid-column:auto;margin-top:0}
  body.desk .sm-row .t:empty{display:block}
  body.desk .maker{margin-bottom:0}
}
/* narrower laptops: two equal columns and a little less padding */
@media (min-width:1100px) and (max-width:1279px){
  body.desk .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px}
  body.desk main{padding:0 24px 32px}
  body.desk[data-on=step] .pcol{padding:8px 24px 24px}
  body.desk .pickgrid{grid-template-columns:minmax(0,1fr)}
}