/* EDITED IN PLACE. UK Work & commute page (app/modules/jobs-commute/uk.php), ujc- only; core tokens. From the approved mock mocks/uk-work-exeter.html.
   In = accent green, out = #2f74d0, home = warm sand. */
:root{--ujc-in:var(--accent);--ujc-out:#2f74d0;--ujc-home:#f2c98a;--ujc-both:#0f6b3f;--ujc-chg:#d08a1e}
.ujc-say{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:72ch}
.ujc-sq{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;background:var(--bar)}
.ujc-sq.in{background:var(--ujc-in)}.ujc-sq.out{background:var(--ujc-out)}.ujc-sq.both{background:var(--ujc-both)}.ujc-sq.home{background:var(--ujc-home)}
.ujc-sq.me{background:var(--accent)}.ujc-sq.dv{background:#9fb4cf}.ujc-sq.en{background:#c9ced6}
.ujc-k2{font-weight:500;color:var(--muted);font-size:12px;margin-left:8px;text-transform:none;letter-spacing:0}
.ujc-tk{display:inline-block;width:2px;height:12px;background:var(--ink);vertical-align:-2px;margin-right:4px}

/* grade cards */
.ujc-gcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.ujc-gc{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--bg)}
.ujc-gch{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;color:var(--ink-2);font-size:14px}
.ujc-gcv{font:800 30px/1.1 var(--sans);letter-spacing:-.02em;margin:8px 0 10px;color:var(--ink)}
.ujc-gcv small{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}
.ujc-meter{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#f6d2c4,#f4e7b9 50%,#c8ecd6)}
.ujc-meter em{position:absolute;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ujc-gcn{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.ujc-gcn b{color:var(--ink)}

/* the daily tide */
.ujc-tide{display:grid;gap:14px;margin-top:6px}
.ujc-trow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}
.ujc-tl b{display:block;font-size:15px}.ujc-tl span{font-size:13px;color:var(--muted)}
.ujc-tbar{display:flex;height:46px;gap:3px}
.ujc-tbar i{display:flex;align-items:center;justify-content:center;border-radius:8px;font-style:normal;min-width:0;overflow:hidden}
.ujc-tbar i span{font:700 13px var(--sans);color:#fff;white-space:nowrap}
.ujc-tbar i.pad{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hair) 6px 8px);border-radius:8px}
.ujc-tbar i.in{background:var(--ujc-in)}.ujc-tbar i.out{background:var(--ujc-out)}.ujc-tbar i.both{background:var(--ujc-both)}
.ujc-tbar i.home{background:var(--ujc-home)}.ujc-tbar i.home span{color:#5c3d08}
.ujc-tleg{margin-top:12px}

/* map */
.ujc-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:12px}
.ujc-seg button{border:0;background:none;font:600 13px var(--sans);padding:7px 14px;border-radius:999px;color:var(--muted);cursor:pointer}
.ujc-seg button.on{background:var(--ink);color:#fff}
.ujc-mapgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.ujc-mapgrid.nomap{grid-template-columns:minmax(0,1fr);max-width:640px}
.ujc-mapbox{margin:0;background:#eef4f8;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.ujc-mapbox figcaption{font-size:12px;color:var(--muted);padding:8px 12px;background:var(--bg);border-top:1px solid var(--line)}
.ujc-map{display:block;width:100%;height:auto;font-family:var(--sans)}
.ujc-map .dots circle{fill:#c3ccd6}
.ujc-map .fl{fill:none;stroke-linecap:round;opacity:.85}
.ujc-map .in .fl{stroke:var(--ujc-in)}.ujc-map .out .fl{stroke:var(--ujc-out)}
.ujc-map .end{fill:#fff;stroke-width:calc(var(--fs) * .2)}.ujc-map .in .end{stroke:var(--ujc-in)}.ujc-map .out .end{stroke:var(--ujc-out)}
.ujc-map text{font-family:var(--sans);font-weight:600;font-size:var(--fs);fill:var(--ink);paint-order:stroke;stroke:#eef4f8;stroke-width:calc(var(--fs) * .28)}
.ujc-map .me{fill:var(--ink);stroke:#fff;stroke-width:calc(var(--fs) * .25)}
.ujc-map .mel{font-size:calc(var(--fs) * 1.4);font-weight:800}
.ujc-map .scale path{stroke:var(--ink-2)}.ujc-map .scale text{font-size:calc(var(--fs) * .9);text-anchor:middle}
.ujc-mapwrap[data-dir="in"] .ujc-fg.out,.ujc-mapwrap[data-dir="out"] .ujc-fg.in{display:none}
.ujc-mapwrap[data-dir="in"] .ujc-fl.out,.ujc-mapwrap[data-dir="out"] .ujc-fl.in{display:none}
.ujc-fl ol{list-style:none;margin:6px 0 0;padding:0;counter-reset:f}
.ujc-fl li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 54px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--hair);font-size:14px}
.ujc-fl .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ujc-fl .bar{height:8px;background:var(--hair);border-radius:4px;overflow:hidden}
.ujc-fl .bar i{display:block;height:100%;border-radius:4px}
.ujc-fl .bar i.in{background:var(--ujc-in)}.ujc-fl .bar i.out{background:var(--ujc-out)}
.ujc-fl b{text-align:right}

/* jobs */
.ujc-jcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.ujc-jc{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg);position:relative}
.ujc-jn{font:800 28px/1 var(--sans);letter-spacing:-.02em;color:var(--accent-ink)}
.ujc-jc b{font-size:14px;line-height:1.35}
.ujc-jx{font-size:12.5px;color:var(--muted)}
.ujc-jc em{position:absolute;top:12px;right:12px;font:700 11px var(--sans);font-style:normal;background:var(--accent-tint);color:var(--accent-ink);padding:2px 7px;border-radius:999px}
.ujc-ibs .brow{grid-template-columns:260px minmax(0,1fr) 48px;min-height:30px}
.ujc-ibs .brow .l{color:var(--ink-2);white-space:normal}
.ujc-ibs .brow .fill{background:#a9d9be;border-radius:0 5px 5px 0}
.ujc-ibs .brow.hi .fill{background:var(--accent)}
.ujc-ibs .brow .trk{height:14px}

/* residents */
.ujc-srow{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center;margin-top:8px;font-weight:600;font-size:14px}
.ujc-srow.st{color:var(--muted);font-weight:500}
.ujc-stack{display:flex;height:32px;border-radius:8px;overflow:hidden;gap:2px}
.ujc-srow.st .ujc-stack{height:20px;opacity:.85}
.ujc-stack i{display:flex;align-items:center;justify-content:center;font:700 12px var(--sans);font-style:normal;color:#fff;min-width:0;overflow:hidden}
.ujc-stack .wk,.ujc-sq.wk{background:var(--accent)}.ujc-stack .sw,.ujc-sq.sw{background:#6cc79a}.ujc-stack .un,.ujc-sq.un{background:#e0763a}
.ujc-stack .st,.ujc-sq.st{background:#7a63c9}.ujc-stack .re,.ujc-sq.re{background:#9fb4cf}.ujc-stack .si,.ujc-sq.si{background:#c58b6b}
.ujc-stack .hf,.ujc-sq.hf{background:#e6c27a}.ujc-stack .ot,.ujc-sq.ot{background:#c9ced6}
.ujc-dvs{margin-top:6px}
.ujc-dv{display:grid;grid-template-columns:minmax(0,1.3fr) 44px minmax(0,1fr) 48px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--hair);font-size:14px}
.ujc-dv .v{font-weight:700;text-align:right}
.ujc-dv .dtrk{position:relative;height:12px;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--line) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.ujc-dv .dtrk i{position:absolute;top:0;bottom:0;border-radius:3px}
.ujc-dv .dtrk i.pos{background:var(--accent)}.ujc-dv .dtrk i.neg{background:#c3cad3}
.ujc-dv .d{font-size:12.5px;color:var(--muted);text-align:right}

/* income strip */
.ujc-istrip{padding:46px 8px 34px}
.ujc-istrip .trk{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,#eef1f5,#dfe6ee)}
.ujc-id{position:absolute;top:1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#7fbf9c;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,22,35,.12)}
.ujc-istrip em{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px;font-style:normal}
.ujc-istrip em span{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font:700 12px var(--sans);color:var(--ink);background:var(--bg);padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
.ujc-istrip em.l span{left:-8px;transform:none}.ujc-istrip em.r span{left:auto;right:-8px;transform:none}
.ujc-istrip em.typ{background:var(--faint)}
.ujc-istrip em.typ span{bottom:auto;top:calc(100% + 26px);color:var(--muted);font-weight:600}
.ujc-istrip .ax{position:relative;height:20px;margin-top:8px;font-size:11.5px;color:var(--faint)}
.ujc-istrip .ax span{position:absolute;transform:translateX(-50%)}
.ujc-ihl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:0}
.ujc-ihl>div{background:var(--surface);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ujc-ihl span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.ujc-ihl b{font-size:15px}.ujc-ihl em{font-style:normal;font-size:13px;color:var(--muted)}

/* claimant chart */
.ujc-chbox{margin:4px 0 0}
.ujc-ch{display:block;width:100%;height:auto;font-family:var(--sans)}
.ujc-ch .gr line{stroke:var(--hair)}.ujc-ch .gr text,.ujc-ch .yr text{font-size:11px;fill:var(--faint)}
.ujc-ch path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ujc-ch path.ew{stroke:var(--muted);stroke-width:2}.ujc-ch path.reg{stroke:#9fb4cf;stroke-width:2;stroke-dasharray:4 3}.ujc-ch path.me{stroke:var(--accent);stroke-width:3.2}
.ujc-ch text.ew{fill:var(--muted);font-size:11.5px;font-weight:600}.ujc-ch text.reg{fill:#6f86a3;font-size:11.5px;font-weight:600}.ujc-ch text.me{fill:var(--accent-ink);font-size:12px;font-weight:800}
.ujc-ch circle{stroke:#fff;stroke-width:1.5}.ujc-ch circle.me{fill:var(--accent)}.ujc-ch circle.reg{fill:#9fb4cf}.ujc-ch circle.ew{fill:var(--muted)}
.ujc-ch .ev{stroke:var(--line);stroke-dasharray:3 3}.ujc-ch .evl{font-size:10.5px;fill:var(--muted)}
.ujc-chbox figcaption{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:6px}
.ujc-ln{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:3px;margin-right:6px}
.ujc-ln.me{background:var(--accent)}.ujc-ln.reg{background:#9fb4cf}.ujc-ln.ew{background:var(--muted)}

/* getting to work */
.ujc-mr{display:grid;grid-template-columns:28px 90px 48px minmax(0,1fr) 170px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-size:14px}
.ujc-mr .ic{font-size:18px;line-height:1}
.ujc-mr .l{font-weight:600}.ujc-mr .v{font:800 17px var(--sans);text-align:right}
.ujc-mr .bars{display:flex;flex-direction:column;gap:2px;min-width:0}
.ujc-mr .bars i{display:block;height:8px;border-radius:0 4px 4px 0;min-width:2px}
.ujc-mr .bars i.me{height:12px;background:var(--accent)}.ujc-mr .bars i.dv{background:#9fb4cf}.ujc-mr .bars i.en{background:#c9ced6}
.ujc-mr .cmp{font-size:12.5px;color:var(--muted);text-align:right}
.ujc-hist{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;height:210px;align-items:end;margin-top:10px;padding-top:24px}
.ujc-hb{display:flex;flex-direction:column;height:100%;gap:6px}
.ujc-hb .cols{flex:1;display:flex;align-items:flex-end;gap:3px}
.ujc-hb .cols i{font-style:normal;flex:1;border-radius:6px 6px 2px 2px;position:relative;min-height:3px}
.ujc-hb .cols i.me{background:var(--accent)}.ujc-hb .cols i.en{background:#c9ced6}.ujc-hb .cols i.dv{background:#9fb4cf}
.ujc-hb .cols i b{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);font-size:12px;color:var(--ink)}
.ujc-hb>span{font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}

.ujc-pt td,.ujc-pt th{padding-left:12px}.ujc-pt td:first-child,.ujc-pt th:first-child{padding-left:0}

@media (max-width:900px){
  .ujc-mapgrid{grid-template-columns:1fr}
  .ujc-jcs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ujc-gcs,.ujc-ihl{grid-template-columns:1fr}
  .ujc-trow{grid-template-columns:1fr;gap:6px}
  .ujc-tbar i span{font-size:11px}
  .ujc-ibs .brow{grid-template-columns:130px minmax(0,1fr) 40px}
  .ujc-srow{grid-template-columns:1fr;gap:4px}
  .ujc-dv{grid-template-columns:minmax(0,1.4fr) 40px minmax(0,1fr) 40px;font-size:13px}
  .ujc-mr{grid-template-columns:24px 76px 42px minmax(0,1fr)}
  .ujc-mr .cmp{display:none}
  .ujc-hist{gap:4px;height:160px}
  .ujc-hb>span{font-size:10px;white-space:normal;line-height:1.2}
  .ujc-hb .cols i b{font-size:10px}
  .ujc-pt th:nth-child(5),.ujc-pt td:nth-child(5),.ujc-pt th:nth-child(7),.ujc-pt td:nth-child(7){display:none}
}
.ujc-gap td{text-align:center;color:var(--faint);padding:2px 0}
.ujc-fl a{color:inherit}