/* Vision Graphics & Printing — visionspot.com
   One stylesheet for the public pages, the client portal and the back office. */
:root {
  --ink: #2a2f2d; --soft: #5c6561; --mute: #8d9591;
  --line: #e1e6e3; --line2: #cfd8d3; --bg: #f3f5f4; --bg-pub: #f6f7f6; --card: #ffffff; --tint: #fbfcfb;
  --green: #1f9a7e; --green-d: #13624f; --green-bg: #e3f3ee; --green-tint: #f1f8f5; --link: #167a63;
  --amber: #d9a441; --warn: #7a4f00; --warn-bg: #fdf1d6; --warn-line: #d9bd8a; --warn-tint: #fdf7ea;
  --late: #8c2f27; --late-bg: #fdeae8; --info: #1f4f8a; --info-bg: #e4eefb; --gray-bg: #eef1ef; --gray: #3c4441;
  --dark: #1c2320; --dark-soft: #9aa6a0; --dark-ink: #cfd8d3;
  --danger: #a4423a;
  --r: 14px; --r-lg: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.pub { background: var(--bg-pub); }
a { color: var(--link); text-decoration: none; }
a:hover { color: #0f5a49; text-decoration: underline; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 600; margin: 0; }
h3 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); margin: 0; }
p { margin: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- headers ---------- */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); }
.hdr.dark { background: var(--dark); border-bottom: 0; }
.hdr-in { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.badge-admin { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #0e1512; background: var(--amber); border-radius: 6px; padding: 4px 8px; }
.badge-co { font-size: 12.5px; font-weight: 600; color: var(--green-d); background: var(--green-bg); border-radius: 999px; padding: 5px 11px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex-grow: 1; }
.nav a { padding: 9px 13px; border-radius: 9px; color: var(--gray); font-size: 14.5px; text-decoration: none; }
.nav a:hover { background: var(--gray-bg); }
.nav a.on { background: var(--green-bg); color: var(--green-d); font-weight: 600; }
.hdr.dark .nav a { color: var(--dark-ink); font-size: 14px; }
.hdr.dark .nav a:hover { background: #2a332f; }
.hdr.dark .nav a.on { background: var(--green); color: #fff; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green-bg); color: var(--green-d); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.hdr.dark .avatar { background: var(--amber); color: var(--dark); }
.who-t { font-size: 13px; line-height: 1.25; }
.who-t span { color: var(--soft); }
.hdr.dark .who-t { color: #fff; }
.hdr.dark .who-t span { color: var(--dark-soft); }
.who form { margin: 0; }
.linkbtn { font: inherit; font-size: 13px; background: none; border: 0; color: var(--link); cursor: pointer; padding: 4px 2px; }
.hdr.dark .linkbtn { color: var(--dark-soft); }

/* ---------- page ---------- */
.main { max-width: 1320px; margin: 0 auto; padding: 26px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.main.narrow { max-width: 920px; }
.main.mid { max-width: 1120px; }
.main.wide { max-width: 1480px; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.phead p { margin-top: 4px; color: var(--soft); font-size: 14.5px; max-width: 70ch; }
.crumb { font-size: 13.5px; color: var(--soft); }
.crumb b { color: var(--ink); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cols > * { flex: 1 1 380px; min-width: 0; }
.cols > .wide { flex: 2 1 560px; }
.soft { color: var(--soft); }
.small { font-size: 13.5px; }
.tiny { font-size: 12.5px; }
.mt0 { margin-top: 0; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.tight { padding: 16px 18px; gap: 8px; }
.card.flat { background: var(--tint); }
.card.dash { border: 1.5px dashed var(--warn-line); background: var(--warn-tint); }
.card.dash h2 { color: var(--warn); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid #eef1ef; }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--soft); flex: none; }
.kv > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv.grow > span:first-child { flex: 1 1 auto; min-width: 0; }
.kv.grow > :last-child { flex: none; }
.pre { white-space: pre-line; }

/* ---------- chips ---------- */
.chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--gray-bg); color: var(--gray); }
.chip.ok { background: var(--green-bg); color: var(--green-d); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.late { background: var(--late-bg); color: var(--late); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.src { background: #f1f3f2; color: var(--soft); font-weight: 500; }
.chip.vendor { background: #f4eee3; color: #6b4e1a; font-weight: 500; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; background: #f7f9f8; color: var(--ink); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: #1a8a70; color: #fff; }
.btn.dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn.bill { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.sm { font-size: 13px; padding: 7px 12px; border-radius: 9px; }
.btn.pill { border-radius: 999px; }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .lbl { font-size: 13.5px; font-weight: 600; color: var(--gray); }
.field .opt { font-weight: 400; color: var(--mute); }
.field .req { color: var(--danger); }
.field-note { font-size: 12.5px; color: var(--soft); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=search], input[type=url], input:not([type]), select, textarea {
  font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--tint); color: var(--ink); width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); background: #fff; }
textarea { resize: vertical; }
.fgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fgrid.c2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fg-title { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); margin: 6px 0 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.field.invalid input { border-color: var(--danger); }
.field-err { display: none; font-size: 12.5px; color: var(--danger); }
.field.invalid .field-err { display: block; }

/* ---------- flash ---------- */
.flash { border-radius: 12px; padding: 12px 16px; font-size: 14.5px; background: var(--green-bg); color: var(--green-d); border: 1px solid #c3e5da; }
.flash.err { background: var(--late-bg); color: var(--late); border-color: #f1c8c3; }
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
/* "a similar order was placed recently" (Oct 2026) */
.simwarn { border-radius: 12px; padding: 12px 16px; font-size: 14.5px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.simwarn .check { color: var(--ink); }
.note { background: #f1f6f3; border-radius: 11px; padding: 11px 14px; font-size: 13.5px; color: var(--gray); line-height: 1.5; }

/* ---------- tables ---------- */
.tblwrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--soft); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid #eef1ef; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .r { text-align: right; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--green-tint); }
.tbl tr.total td { border-top: 2px solid var(--dark); font-weight: 700; }
.tbl input, .tbl select { padding: 7px 9px; font-size: 14px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); text-decoration: none; }
.tabs a.on { border-color: var(--dark); background: var(--dark); color: #fff; font-weight: 600; }
.tabs a .n { opacity: .65; margin-left: 4px; }

/* ---------- stats & lanes ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.stat:hover { text-decoration: none; border-color: var(--line2); }
.stat b { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--soft); }
.stat.alert b { color: var(--late); }
.lanes { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.lane { background: #e9eeeb; border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.lane-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); padding: 2px 2px 4px; }
.jc { background: var(--card); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.jc:hover { text-decoration: none; border-color: var(--line2); color: var(--ink); }
.jc .t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.jc .m { font-size: 12.5px; color: var(--soft); display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.lane .empty { font-size: 13px; color: var(--mute); padding: 6px 2px; }

/* ---------- lifecycle ---------- */
.life { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.life .st { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mute); }
.life .st .d { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line2); background: #fff; flex: none; }
.life .st.done { color: var(--ink); font-weight: 600; }
.life .st.done .d { background: var(--green); border-color: var(--green); }
.life .st.now { color: var(--warn); font-weight: 700; }
.life .st.now .d { border: 3px solid var(--amber); }
.life .st em { font-style: normal; font-weight: 400; color: var(--mute); }
.life .bar { flex: 1 1 18px; min-width: 14px; height: 2px; background: var(--line); margin: 0 8px; }
.life .bar.done { background: var(--green); }

/* ---------- timeline ---------- */
.tl { display: flex; flex-direction: column; }
.tl .ev { display: flex; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid #eef1ef; }
.tl .ev:last-child { border-bottom: 0; }
.tl .ev .w { color: var(--soft); font-size: 12.5px; flex: none; width: 118px; }
.tl .ev .i { color: var(--warn); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- catalog tiles (portal) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.tile:hover { text-decoration: none; border-color: var(--green); color: var(--ink); }
.tile-art { background: #eef2f0; padding: 22px; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; max-width: 100%; }
.tile-art svg { width: 100%; height: auto; box-shadow: 0 10px 22px -12px rgba(20,40,32,.55); background: #fff; }
.tile-art .ph { font-size: 40px; color: var(--mute); }
.tile-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.tile-b b { font-size: 16px; font-weight: 600; }
.tile-b span { font-size: 13.5px; color: var(--soft); }
.tile-b .cta { color: var(--link); font-weight: 600; margin-top: 4px; font-size: 14px; }

/* ---------- card order ---------- */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.mock { background: #e9eeeb; border-radius: var(--r-lg); padding: 26px; }
.mock svg { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 14px 28px -14px rgba(20,40,32,.55); }
.mock.loading svg { opacity: .55; transition: opacity .15s; }
.plabel { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.fitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fitlist li { font-size: 13.5px; padding: 8px 12px; border-radius: 9px; background: var(--warn-bg); color: var(--warn); }
.fitlist li.info { background: var(--info-bg); color: var(--info); }
.steps { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--soft); }
.steps .s { display: flex; align-items: center; gap: 6px; }
.steps .s .n { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.steps .s.on { color: var(--ink); font-weight: 600; }
.steps .s.on .n { background: var(--green); border-color: var(--green); color: #fff; }
.steps .s.done .n { background: var(--green-bg); border-color: var(--green-bg); color: var(--green-d); }
.steps .sep { width: 22px; height: 1.5px; background: var(--line2); }

/* ---------- public ---------- */
.pub-hdr { width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pub-main { width: 100%; max-width: 720px; margin: 0 auto; padding: 9vh 20px 64px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; flex-grow: 1; }
.pub-main.results { padding-top: 28px; text-align: left; align-items: stretch; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-d); }
.hero { margin: 0; font-size: clamp(34px, 6vw, 56px); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; }
.lede { font-size: 17px; line-height: 1.55; color: #4d5653; max-width: 520px; }
.askbox { width: 100%; background: #fff; border: 1.5px solid var(--line2); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; box-shadow: 0 18px 40px -26px rgba(20,40,32,.45); }
.askbox textarea { font-size: 17px; line-height: 1.5; padding: 8px 10px; border: 0; background: transparent; resize: none; }
.askbox textarea:focus { outline: none; background: transparent; }
.askbox:focus-within { border-color: var(--green); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chips button { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--gray); cursor: pointer; }
.chips button:hover { border-color: var(--green); }
.bubble { align-self: flex-end; max-width: 86%; background: var(--ink); color: #fff; border-radius: 20px 20px 6px 20px; padding: 14px 18px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.matches { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.match { font: inherit; padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 16px; border: 1px solid var(--line); text-align: left; }
.match[aria-pressed=true] { border: 2px solid var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.match .th { height: 96px; display: flex; align-items: center; justify-content: center; }
.match .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.match .bd b { font-size: 16px; font-weight: 600; }
.match .bd span { font-size: 13px; color: var(--soft); line-height: 1.4; }
.pub-ftr { max-width: 1180px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; color: var(--soft); border-top: 1px solid var(--line); }
.pub-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.login-card { width: 100%; max-width: 440px; margin: 8vh auto 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 860px) {
  .order-grid { grid-template-columns: 1fr; }
  .preview { position: static; }
  .hdr-in, .main { padding-left: 16px; padding-right: 16px; }
  .lanes { grid-template-columns: repeat(5, minmax(230px, 82vw)); }
  .tl .ev { flex-direction: column; gap: 2px; }
  .tl .ev .w { width: auto; }
}
@media (max-width: 520px) {
  .mock { padding: 14px; }
  .card { padding: 16px; }
  .who-t { display: none; }
}
.tbl td a b { white-space: nowrap; }

/* ---------- setup: roadmap, steps, catalog items, quotes ---------- */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg a, .seg button { font: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--gray); text-decoration: none; cursor: pointer; }
.seg a:hover { text-decoration: none; border-color: var(--green); }
.seg a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.phase { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13.5px; color: var(--soft); }
.phase b { color: var(--ink); font-size: 15px; }
.phase .chip, .phase .btn { align-self: flex-start; margin-top: 4px; }
.phase .pn { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.phase.done { background: var(--green-bg); border-color: #bfe2d6; }
.phase.now { border: 2px solid var(--amber); background: #fffaf0; }
.tbl tr.sel td { background: var(--green-bg); }
.tbl tr.dim td { color: var(--mute); }
.tbl td.old { padding-left: 28px; }
.steplist { display: flex; flex-direction: column; }
.st { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1ef; }
.st:last-child { border: 0; }
.sn { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; background: var(--gray-bg); color: var(--gray); }
.st.ok .sn { background: var(--green); color: #fff; }
.st.cur .sn { background: var(--amber); color: var(--dark); }
.st .sx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.st .sx span { color: var(--soft); font-size: 13px; }
.st.lock { opacity: .55; }
.mini { width: 54px; height: 42px; border-radius: 6px; background: #e9edeb; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.mini img { max-width: 100%; max-height: 100%; }
.mini.doc, .big.doc { font-size: 11px; font-weight: 700; color: var(--soft); letter-spacing: .05em; }
.big { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: #e9edeb; display: flex; align-items: center; justify-content: center; }
.art { display: flex; gap: 10px; align-items: center; }
.artgrid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.artnow { display: flex; flex-direction: column; gap: 8px; }
.artnow img { width: 100%; height: auto; border-radius: 12px; background: #e9edeb; box-shadow: 0 8px 20px -12px rgba(0,0,0,.4); }
.noart { aspect-ratio: 4 / 3; max-width: 100%; border: 1.5px dashed var(--line2); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--soft); font-size: 14px; background: var(--tint); }
.tile-art img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.wsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wsteps li { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; color: var(--soft); display: flex; gap: 8px; align-items: center; min-width: 0; }
.wsteps li b { width: 22px; height: 22px; border-radius: 50%; background: var(--gray-bg); color: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.wsteps li.on { border-color: var(--green); color: var(--ink); font-weight: 600; }
.wsteps li.on b, .wsteps li.ok b { background: var(--green); color: #fff; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.optcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.optcard > span > span { display: block; color: var(--soft); font-size: 13px; margin-top: 2px; }
.optcard input { margin-top: 3px; accent-color: var(--green); }
.optcard:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.radio { display: flex; flex-direction: column; gap: 8px; }
.radio .check { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.wnav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.hint { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; background: var(--tint); color: var(--gray); }
.qproof { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qproof > img { width: 220px; max-width: 100%; border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.qproof > .noart { width: 220px; }
.mailprev { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.mailprev .mh { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--soft); display: flex; flex-direction: column; gap: 2px; }
.mailprev .mb { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.guide h2 { margin-top: 10px; }
.guide ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; max-width: 72ch; }
@media (max-width: 860px) { .road, .wsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .artgrid, .opts { grid-template-columns: 1fr; } }
.tbl.wrap td a b { white-space: normal; }
.tbl td.acts { white-space: nowrap; width: 1%; }
.tbl td.num.r, .tbl th.r { white-space: nowrap; }

/* ---------- artwork viewer ---------- */
.vw { display: flex; flex-direction: column; background: #2b302e; border-radius: 12px; overflow: hidden; height: 100%; min-height: 360px; color: #fff; }
.vw-full { position: fixed; inset: 0; border-radius: 0; z-index: 60; }
.vw-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20,24,22,.6); }
body.vw-lock { overflow: hidden; }
.vw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #1f2321; font-size: 13.5px; }
.vw-g { display: flex; align-items: center; gap: 4px; }
.vw-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c5cdc9; }
.vw-b { font: inherit; background: #3a403d; color: #fff; border: 0; border-radius: 7px; min-width: 32px; height: 32px; padding: 0 9px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.vw-b.txt { font-size: 13px; }
.vw-b:hover { background: #4b524e; text-decoration: none; }
.vw-b:disabled { opacity: .35; cursor: default; }
.vw-pg, .vw-zoom { min-width: 54px; text-align: center; color: #dfe5e2; font-variant-numeric: tabular-nums; }
.vw-pg { min-width: 92px; }
.vw-stage { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; }
.vw-stage.can-drag { cursor: grab; }
.vw-stage.dragging { cursor: grabbing; user-select: none; }
.vw-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; width: max-content; min-width: 100%; box-sizing: border-box; }
.vw-page { position: relative; background: #fff; box-shadow: 0 6px 22px -8px rgba(0,0,0,.6); flex: none; }
.vw-page canvas, .vw-page .vw-img { display: block; width: 100%; height: 100%; }
.vw-pn { position: absolute; right: -2px; bottom: -22px; font-size: 11.5px; color: #9aa6a0; }
.vw-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c5cdc9; padding: 20px; text-align: center; }
.vw-msg.err { color: #ffd7a3; }
.vw-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; background: #1f2321; flex: none; }
.vw-t { background: none; border: 2px solid transparent; border-radius: 6px; padding: 2px; cursor: pointer; color: #c5cdc9; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; flex: none; }
.vw-t canvas { display: block; background: #fff; }
.vw-t.on { border-color: var(--green); }
.viewer-inline { height: min(78vh, 900px); }
.mini img, .tile-art img { object-fit: contain; }
.mini { width: 64px; height: 50px; }
.mini.big { width: 120px; height: 92px; }
.preview-btn { white-space: nowrap; }
.err-t { color: #b4232c; }
/* review screen */
.rv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.rv-side { display: flex; flex-direction: column; gap: 14px; }
.rv-acts { display: grid; gap: 8px; }
.rv-acts .btn { justify-content: center; }
.rv-files { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.rv-file { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.rv-file.on { border-color: var(--green); background: var(--green-tint); }
.rv-file .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rv-file .hit { color: var(--green); font-weight: 600; }
.progress { height: 8px; border-radius: 99px; background: var(--gray-bg); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--green); }
.noart.tall { aspect-ratio: auto; height: min(60vh, 600px); }
@media (max-width: 960px) { .rv { grid-template-columns: 1fr; } .viewer-inline { height: 70vh; } }
/* ticking several catalog items at once */
.bulkbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
form.has-sel .bulkbar { background: var(--green-bg); }
form.has-sel [data-bulk-count] { font-weight: 600; }
.tbl th.sel, .tbl td.sel { width: 34px; }
.tbl td.sel input, .tbl th.sel input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; margin: 0; }
form[data-bulk] tbody tr:has(input[name="ids"]:checked) td { background: var(--green-tint); }
form[data-bulk] tbody td { cursor: default; }
.filt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px; }
.filt label { margin: 0; display: inline; font-weight: 400; }
.filt select { width: auto; min-width: 0; padding: 5px 30px 5px 10px; font-size: 13.5px; }
/* cards whose table runs edge to edge still keep a gutter, so nothing touches the border */
.card.flush { padding: 0; }
.card.flush .tblwrap { margin: 0; padding: 0 16px 6px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* a table that has to scroll sideways shows a soft shadow on the side with more to see */
.tblwrap {
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28,35,32,.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28,35,32,.16), transparent) right / 12px 100% no-repeat scroll;
}
/* phones: each table row becomes a small block, every value labelled with its column name (labels added by common.js) */
@media (max-width: 640px) {
  .tblwrap { overflow: visible; background: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { padding: 10px 0; border-bottom: 1px solid var(--line); position: relative; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td, .tbl td:first-child, .tbl td:last-child { border: 0; padding: 2px 0; text-align: left; white-space: normal; width: auto; }
  .tbl td[data-label]:not(:first-child)::before { content: attr(data-label) " · "; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .tbl td:empty { display: none; }
  .tbl td.sel + td::before { content: none !important; }
  .tbl td.acts .row, .tbl td.r .row { justify-content: flex-start !important; flex-wrap: wrap !important; margin-top: 4px; }
  .tbl td.sel { position: absolute; right: 0; top: 10px; width: auto; }
  .tbl tr.total td { border-top: 0; }
  .tbl tr.total { border-top: 2px solid var(--dark); }
}
/* ---------- receiving book: signature pad (signed on a phone or tablet) ---------- */
.signhead h1 { margin: 6px 0 2px; font-size: 24px; text-wrap: balance; }
.signhead p { margin: 0; }
.sigpad { position: relative; width: 100%; aspect-ratio: 3 / 1; min-height: 150px; border: 2px dashed var(--line2); border-radius: 14px; background: #fff; touch-action: none; overflow: hidden; }
.sigpad.on { border-style: solid; border-color: var(--green); }
.sigpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.sigpad .sig-hint { position: absolute; left: 18px; bottom: 26%; right: 18px; border-bottom: 1.5px solid var(--line2); color: var(--mute); font-size: 13px; padding-bottom: 4px; pointer-events: none; }
.sigpad.on .sig-hint { color: transparent; }
.sigimg { max-width: 100%; width: 300px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.btn.xl { font-size: 17px; padding: 15px 22px; border-radius: 12px; }
form[data-sign] .btn.xl { width: 100%; }
details.card > summary { cursor: pointer; color: var(--soft); }
/* vendor PO items: tops of the cells line up; the description box can grow */
.tbl.poitems td { vertical-align: top; }
.tbl.poitems textarea { resize: vertical; min-height: 40px; font-size: 14px; padding: 7px 9px; }
@media (max-width: 640px) { .tbl tr.sum td::before { content: none !important; } .tbl tr.sum td:empty { display: none; } }

/* ---------- vendor POs: steps, "+" rows, supporting rows, preview, vendor's phone page ---------- */
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nowrap { white-space: nowrap; }
.steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--soft); }
.steps span { display: inline-flex; align-items: center; gap: 6px; }
.steps span b { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--line2); font-size: 12px; font-weight: 600; }
.steps span.on { color: var(--green-d); font-weight: 700; }
.steps span.on b { border-color: var(--green); background: var(--green); color: #fff; }
.steps span.done b { border-color: var(--green); color: var(--green-d); }
.steps .ar { color: var(--mute); }
.plus { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--green); color: #fff; font-size: 21px; line-height: 1; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.plus:hover { filter: brightness(.95); }
.tbl.poitems td { vertical-align: top; }
.tbl.poitems tr.editing td, .tbl.poitems tr.newline td { background: #f6faf8; }
.sup { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px 18px; align-items: start; border-top: 1px solid var(--line); padding-top: 14px; }
.sup > b, .sup > label { font-size: 13.5px; font-weight: 600; color: var(--gray); padding-top: 6px; }
.shp { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.45; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.shp > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.shp .dt { width: 58px; flex: none; font-weight: 600; }
.shp form { flex: none; }
.shipadd .pick { display: none; }
.shipadd:has(select[name=method] option[value=willcall]:checked) .pick { display: block; }
.shipadd:has(select[name=method] option[value=willcall]:checked) .trk { display: none; }
.autosaved { font-size: 12px; color: var(--green-d); margin-left: 6px; white-space: nowrap; }
.autosaved.bad { color: var(--late); }
.pv { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.pv .card { gap: 10px; }
.pv iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pv .viewer-inline { height: 600px; }
.opt2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.opt3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.opt3 .ch { min-width: 0; }
.ch { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.ch .h { font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.ch .h input { width: 17px; height: 17px; accent-color: var(--green); }
.ch:has(input:checked) { border-color: var(--green); background: #f3f8f5; }
.placeform:has(input[name=via][value=website]:checked) .via-email, .placeform:has(input[name=via][value=website]:checked) .go-email { display: none; }
.placeform:has(input[name=via][value=email]:checked) .via-web, .placeform:has(input[name=via][value=email]:checked) .go-web { display: none; }
.pay { border-top: 1px solid var(--line); padding-top: 14px; }
.pay:has(.paidck:not(:checked)) .payf { display: none; }
.vpage { max-width: 480px; margin: 0 auto; padding: 16px; }
.vit { border-top: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.vit > b { font-weight: 600; font-size: 15.5px; }
.vit select, .vit input, .vit textarea { font-size: 16px; }
@media (max-width: 700px) {
  .sup { grid-template-columns: 1fr; gap: 6px; }
  .sup > b, .sup > label { padding-top: 10px; }
  .pv iframe, .pv .viewer-inline { height: 460px; }
}
/* job ticket / production file / intake */
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.spec > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spec span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.spec b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.pfile { display: flex; gap: 14px; align-items: center; border: 1.5px solid var(--green); border-radius: 12px; padding: 12px 14px; background: #f3f8f5; flex-wrap: wrap; }
.pfile .ic { width: 44px; height: 52px; flex: none; border-radius: 6px; background: var(--green); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.pfile .nm { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.dropzone { position: relative; border: 2px dashed var(--line); border-radius: 12px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--soft); cursor: pointer; }
.dropzone b { color: var(--ink, inherit); font-weight: 600; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--green); background: #f3f8f5; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone.big { padding: 48px 16px; }
iframe.docview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
input.check, select.check, textarea.check { background: #fff8d6; }

.intake-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .intake-grid { grid-template-columns: 1fr; } .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } iframe.docview { height: 420px; } }
.iitem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.iitem .wide { grid-column: span 2; }
.iitem:has(select[name^=make_] option[value=skip]:checked) { opacity: .55; }
.iitem:not(:has(select[name^=make_] option[value=vendor]:checked)) .vsel { display: none; }
@media (max-width: 700px) { .iitem { grid-template-columns: 1fr 1fr; } .iitem .wide { grid-column: 1 / -1; } }
/* every order starts with Linda: new quote / new order / online orders to check */
.big2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.bigbtn { border: 2px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; background: #fff; color: var(--ink); text-decoration: none; }
.bigbtn b { font-size: 19px; font-weight: 700; }
.bigbtn.q { border-color: #d9a441; } .bigbtn.o { border-color: var(--green); }
.bigbtn:hover { background: #f3f8f5; }
.checkq { border: 2px solid #d9a441; }
.lbl { font-size: 13px; font-weight: 600; }
.pick { display: flex; gap: 8px; flex-wrap: wrap; }
.pick label { border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pick label:has(input:checked) { border-color: var(--green); background: #f3f8f5; font-weight: 600; }
.pick label:has(input:disabled) { opacity: .5; cursor: default; }
.newco { display: none; border: 1.5px solid var(--green); border-radius: 12px; padding: 12px; background: #f3f8f5; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
form:has(select[name=company_id] option[value=new]:checked) .newco { display: grid; }
.qitem { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.qitem[hidden] { display: none; }
.qp { width: 100%; border-collapse: collapse; font-size: 14px; }
.qp td, .qp th { padding: 3px 4px; text-align: left; }
.qp th { font-size: 11px; color: var(--soft); letter-spacing: .05em; font-weight: 600; }
.qp th.r, .qp td.r { text-align: right; }
.qp td.r { white-space: nowrap; width: 1%; min-width: 90px; padding-left: 8px; font-variant-numeric: tabular-nums; }
.qp input { width: 100%; min-width: 0; }
.start { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.start > * { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; min-width: 0; }
.start > .on { border-color: var(--green); background: #f3f8f5; }
.start b { font-size: 15px; font-weight: 600; }
.start .dropzone { border: 0; padding: 0; align-items: flex-start; text-align: left; }
.tabs a .n { font-size: 12px; color: var(--soft); font-weight: 600; margin-left: 2px; }
.tabs a.hot .n { color: #fff; background: var(--late); border-radius: 999px; padding: 0 7px; }
.sendform .via-email, .sendform .via-portal, .sendform .via-phone { display: none; }
.sendform:has(input[name=via][value=email]:checked) .via-email { display: flex; }
.sendform:has(input[name=via][value=portal]:checked) .via-portal, .sendform:has(input[name=via][value=phone]:checked) .via-phone { display: block; }
@media (max-width: 800px) { .start { grid-template-columns: 1fr 1fr; } .qitem { grid-template-columns: 1fr; } .newco { grid-template-columns: 1fr 1fr; } }
.tabs a.on .n { color: #cfd8d3; }

/* the viewer's magnifier */
.vw-lens { position: absolute; z-index: 5; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 10px 30px -6px rgba(0,0,0,.6); pointer-events: none; }
.vw-stage.lensing { cursor: crosshair; touch-action: none; }
.vw-b.on { background: var(--green, #2f8f6b); }
.docvw { height: min(78vh, 760px); }

/* ---------- New order: one wide page, the client's document sticky on the left ---------- */
.main.full { max-width: none; }
.g4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.g2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 18px; align-items: start; }
.split > .docstrip { display: none; }
.split.hidedoc { grid-template-columns: 44px minmax(0, 1fr); }
.split.hidedoc > .docside { display: none; }
.split.hidedoc > .docstrip { display: flex; }
.split.nodoc { grid-template-columns: minmax(0, 1fr); }
.docside { position: sticky; top: 10px; }
.docside .docvw { height: calc(100vh - 150px); min-height: 420px; }
.docstrip { position: sticky; top: 10px; height: 520px; background: #2b302e; color: #fff; border: 0; border-radius: 12px; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; font: inherit; font-size: 13px; }
.docstrip .vert { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .05em; color: #c5cdc9; }
.oitem { border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.oitem:has(input[value=vendor]:checked) { border-left-color: var(--amber); }
.oitem:has(input[value=skip]:checked) { border-left-color: var(--line2); opacity: .6; }
.oi-top { display: grid; gap: 12px; grid-template-columns: minmax(0, .9fr) minmax(0, 2.2fr) minmax(0, .7fr) minmax(0, .8fr); }
.oi-spec { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; }
.route .pick label:has(input[value=vendor]:checked) { border-color: var(--amber); background: var(--warn-tint); }
.route .vsel { width: 200px; }
.oitem:not(:has(input[value=vendor]:checked)) .route .vsel, .oitem:not(:has(input[value=vendor]:checked)) .route .vnote { display: none; }
.colorpick, .postpick { display: flex; flex-direction: column; gap: 6px; }
.colorpick:not(:has(option[value=other]:checked)) .otherv { display: none; }
.postpick:not(:has(option[value=Vendor]:checked)) .postv { display: none; }
.sumbar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.sumbar .pill { border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; }
.pill.h { background: var(--green-bg); color: var(--green-d); }
.pill.v { background: var(--warn-bg); color: var(--warn); }
.pill.zero { display: none; }
.ordform .field label { white-space: nowrap; }
@media (max-width: 1100px) { .split, .split.hidedoc { grid-template-columns: minmax(0, 1fr); } .docside, .docstrip { position: static; } .split > .docstrip { display: none !important; } .docside .docvw { height: 70vh; } }
@media (max-width: 760px) { .g4, .oi-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3, .g2, .oi-top { grid-template-columns: minmax(0, 1fr); } }

/* after Release: job tickets (in-house) and vendor POs (outsourced) side by side */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lane { border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lane.h { background: var(--green-tint); border: 1.5px solid var(--green); }
.lane.v { background: var(--warn-tint); border: 1.5px solid var(--amber); }
.lane h2 { margin: 0; }
.tk2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; align-items: start; }
.tk2.one { grid-template-columns: minmax(0, 1fr); }
.tkthumb { height: 290px; min-height: 0; }
.tkthumb .vw-bar { display: none; }
.ro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; }
.ro > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ro span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ro b { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .lanes { grid-template-columns: minmax(0, 1fr); } .tk2 { grid-template-columns: minmax(0, 1fr); } .ro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bigbtn.p { border-color: #2b302e; }
.spec.prodband { background: var(--green-tint); border: 1.2px solid var(--green); border-radius: 10px; padding: 10px 12px; }
.spec.prodband span { color: var(--green-d); }
.delbox { border: 1.5px dashed #e3b4b0; align-items: center; }
.btn.danger-o { color: var(--late); border-color: #e3b4b0; }
.btn.danger { background: var(--late); border-color: var(--late); color: #fff; }

/* ---------- Production page ---------- */
.psec.h { border: 2px solid var(--green); }
.psec.v { border: 2px solid var(--amber); margin-top: 18px; }
.btn.sec-h { border-color: var(--green); background: var(--green-tint); }
.btn.sec-v { border-color: var(--amber); background: var(--warn-tint); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.tabs2 { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs2 a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; color: var(--ink); text-decoration: none; background: #fff; }
.tabs2 a.on { background: #1f2321; color: #fff; border-color: transparent; }
.pb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pb th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pb td { padding: 9px 6px; border-bottom: 1px solid #eef1ef; vertical-align: middle; }
.pb td.nw { white-space: nowrap; }
.pb .r { text-align: right; }
.pb tr.grp td { background: #f3f5f4; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; padding: 7px 8px; }
.pb tr.grp.late td { background: #fdecea; color: #b4261a; }
.pb tr.grp.today td { background: #fff6e0; color: #8a5a00; }
.pb tr.held td { background: #fff8f7; }
.pb select { padding: 5px 8px; font-size: 13px; border-radius: 8px; width: auto; }
.pb td.sel, .pb th.sel { width: 28px; }
.pb td.sel input { width: 17px; height: 17px; accent-color: var(--green); }
.ib { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer; }
.fileok { display: flex; gap: 6px; align-items: center; }
.fileok .fname { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropmini { position: relative; display: inline-block; border: 1.5px dashed #d08a85; border-radius: 8px; padding: 5px 9px; color: #b4261a; font-size: 12.5px; background: #fff8f7; white-space: nowrap; cursor: pointer; }
.dropmini input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropmini:hover { background: #fdecea; }
.pb tr.pedit { display: none; }
.pb tr.pedit:target { display: table-row; }
.pb tr.pedit td { background: #f6fbf9; }
.editbox { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 8px 10px; align-items: start; }
.editbox input, .editbox select { padding: 6px 8px; font-size: 13px; }
.rowmenu { display: inline-block; position: relative; }
.rowmenu > summary { list-style: none; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu .menu { position: absolute; right: 0; top: 34px; z-index: 5; width: 260px; background: #fff; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.35); padding: 10px; gap: 8px; }
.meeting .pnoprint, .meeting .sel { display: none; }
.meeting .pb { font-size: 16px; }
.meeting .pb td { padding: 12px 8px; }
@media print { .hdr, .pnoprint, .pb .sel, .crumb, .phead .row, .toolbar { display: none !important; } .psec { border: 0 !important; } }
@media (max-width: 1100px) { .editbox { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tkthumb .vw { min-height: 0; }
.tkthumb .vw-thumbs { display: none; }
.card.delbox { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.qrbox { width: min(320px, 80vw); background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.qrbox svg { display: block; width: 100%; height: auto; }
.chip.gray { background: #f1f3f2; color: var(--soft); }
.opt { color: var(--soft); font-weight: 400; }
.osteps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: st; }
.osteps li { counter-increment: st; padding: 7px 12px 7px 9px; border-radius: 999px; background: #f1f3f2; color: var(--soft); display: flex; gap: 7px; align-items: center; }
.osteps li::before { content: counter(st); width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.osteps li.on { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.osteps li.done { background: var(--green-bg); color: var(--green-d); }
.osteps li.done::before { content: "✓"; }
.recv { font-size: 12px; color: var(--soft); }
.recv b { color: var(--ink); }
.recv.short { color: var(--warn); }
.recv.over { color: var(--info); }

/* price list under each online design (client catalog page) */
.pricelist { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pricelist.soon, .pricelist.expired { border-color: var(--warn-line); background: var(--warn-tint); }
.warnc { color: var(--warn); font-weight: 600; }
/* card order: the price of the chosen quantity, and where it goes */
.pricebox { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pricebox b.amt { font-size: 20px; }
.shipopt { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.shipopt legend { padding: 0; margin-bottom: 4px; }
.shipopt .other { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 4px 0 0 28px; }
.shipopt .other[hidden] { display: none; }
.proofshare { border: 1.5px dashed var(--line2); border-radius: 12px; padding: 12px 14px; }
.proofshare summary { cursor: pointer; font-weight: 600; }

/* a quote's conversation (admin, portal, the visitor's private page) */
.talk { gap: 14px; }
.talk-new { display: flex; flex-direction: column; gap: 8px; background: #f7f9f8; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.talk-new textarea { width: 100%; }
.talk-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; }
.talk-row input[type=file] { max-width: 100%; }
.talk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { border-radius: 12px; padding: 10px 12px; max-width: 760px; min-width: 0; }
.msg.them { background: var(--info-bg); align-self: flex-start; }
.msg.me { background: var(--green-bg); align-self: flex-end; }
.msg.sys { background: none; padding: 2px 4px; font-size: 13px; color: var(--soft); align-self: center; text-align: center; }
.msg-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.msg-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tfile { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 6px 6px; color: inherit; text-decoration: none; max-width: 280px; min-width: 0; }
.tfile:hover { border-color: var(--green); }
.tf-pic { width: 44px; height: 44px; flex: none; border-radius: 6px; background: #f1f3f2; display: grid; place-items: center; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--soft); }
.tf-pic img { width: 100%; height: 100%; object-fit: cover; }
.tf-b { display: flex; flex-direction: column; min-width: 0; }
.tf-n { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Deliver to" without script: the address shows when "Another address" is picked */
.shipopt.css .other { display: none; }
.shipopt.css:has(input[value=other]:checked) .other, .shipopt.css .other.always { display: grid; }
/* a small menu under a button (e.g. Close — no deal) */
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menu-b { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, 86vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 10px 30px rgba(20,40,32,.15); }
.qboard .card { flex: 1 1 340px; }
/* the conversation as an email thread (oldest first, reply at the bottom) */
.mail { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ml { display: flex; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.ml-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: #3b6fb6; }
.ml.v .ml-av, .ml-fold.v .ml-av { background: var(--green2, #1f9a7e); }
.ml-av.sm { width: 24px; height: 24px; font-size: 10px; }
.ml-b { flex: 1; min-width: 0; }
.ml-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ml-who { min-width: 0; overflow-wrap: anywhere; }
.ml-who .soft { font-size: 13px; }
.ml-d { color: var(--soft); font-size: 13px; white-space: nowrap; }
.ml-to { color: var(--soft); font-size: 13px; margin: 1px 0 8px; overflow-wrap: anywhere; }
.ml-price { background: var(--green-bg); border-radius: 10px; padding: 9px 12px; margin-top: 8px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ml-att { margin-top: 10px; }
.ml-att p { margin: 0 0 6px; font-size: 12.5px; color: var(--soft); font-weight: 600; }
.ml-att .msg-f { margin-top: 0; }
.ml-fold { border-bottom: 1px solid var(--line); }
.ml-fold > summary { list-style: none; display: flex; gap: 10px; align-items: center; padding: 10px 2px; cursor: pointer; color: var(--soft); font-size: 14px; }
.ml-fold > summary::-webkit-details-marker { display: none; }
.ml-fold > summary b { color: var(--ink); flex: none; min-width: 110px; }
.ml-fold > summary .ml-snip { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-fold[open] > summary { display: none; }
.ml-fold > .ml { border-bottom: 0; }
#reply { margin-bottom: 4px; }
.talk-new .ml-to { margin: 0 0 4px; }
/* small attachment chips */
.tfile { padding: 4px 10px 4px 4px; gap: 7px; max-width: 260px; border-radius: 8px; }
.tf-pic { width: 30px; height: 30px; border-radius: 5px; font-size: 9.5px; }
.tf-n { font-size: 12.5px; }

/* ---------- part numbers, TEST jobs, the client's catalog ---------- */
.pn { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; font-weight: 600; color: var(--green-d); white-space: nowrap; letter-spacing: -.01em; }
.tst { display: inline-block; vertical-align: 1px; margin-left: 6px; background: #7a2bd1; color: #fff; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.5; }
tr.test > td { background: #faf5ff; }
.partrow { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
td.nw, .nw { white-space: nowrap; }
.homecols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.qline { color: var(--ink); gap: 4px 10px; flex-wrap: wrap; }
.qline > span:first-child { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.qline .chip { flex: none; }
.qline:hover { text-decoration: none; background: var(--tint); }
.searchf { display: flex; gap: 6px; align-items: center; flex: 0 1 380px; min-width: 0; }
.searchf .catsearch { flex: 1 1 auto; min-width: 0; width: auto; }
.cats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.catcard { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); background: var(--card); }
.catcard:hover { text-decoration: none; border-color: var(--green); color: var(--ink); }
.catcard .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--green-bg); display: grid; place-items: center; font-size: 19px; color: var(--green-d); font-weight: 700; margin-bottom: 4px; }
.catcard b { font-size: 15px; font-weight: 600; }
.catcard span:last-child { font-size: 13px; color: var(--soft); }
.catcard.new { border-style: dashed; }
.catl { display: grid; gap: 16px; grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
.catside { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.catside a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; color: var(--gray); }
.catside a:hover { background: var(--gray-bg); text-decoration: none; }
.catside a.on { background: var(--green-bg); color: var(--green-d); font-weight: 600; }
.catside .n { font-variant-numeric: tabular-nums; color: var(--soft); }
.catside a.on .n { color: var(--green-d); }
.catside a.else { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 6px; padding-top: 10px; color: var(--link); }
.catmain { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.clist { display: flex; flex-direction: column; }
.crow { display: grid; gap: 12px; grid-template-columns: 54px 128px minmax(0, 1fr) 160px 132px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.crow.chead { border-top: 0; padding-block: 2px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.cthumb { width: 54px; height: 42px; border-radius: 7px; background: var(--gray-bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--mute); font-size: 17px; }
.cthumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cdesc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdesc a { color: var(--ink); }
.cdesc b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.cbtn { text-align: right; }
.cbtn .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 900px) {
  .homecols, .catl { grid-template-columns: minmax(0, 1fr); }
  .catside { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .catside a { border: 1px solid var(--line); padding: 6px 10px; }
  .catside a.else { border-top: 1px solid var(--line); border-radius: 9px; margin-top: 0; padding-top: 6px; }
}
@media (max-width: 640px) {
  .crow { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t d b" "t p b" "t l b"; row-gap: 2px; align-items: start; }
  .crow .cbtn { align-self: center; }
  .crow.chead { display: none; }
  .crow .cthumb { grid-area: t; width: 48px; } .crow .pn { grid-area: p; } .crow .cdesc { grid-area: d; } .crow .clast { grid-area: l; } .crow .cbtn { grid-area: b; }
  .partrow { grid-template-columns: minmax(0, 1fr); }
  .searchf { flex-basis: 100%; }
}
.rv-side .partrow { grid-template-columns: minmax(0, 1fr); }

/* client page (Oct 2026): rarely-changed sections are one line; the ✎ opens them */
details.fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold .foldline { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
details.fold .foldline h3 { margin: 0 0 2px; }
details.fold .pen { flex: none; width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 9px; background: var(--card); display: grid; place-items: center; font-size: 15px; color: var(--ink); }
details.fold > summary:hover .pen { border-color: var(--green); color: var(--green-d); }
details.fold[open] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
details.fold[open] .pen { background: var(--green-bg); border-color: var(--green); }
details.fold .foldbody { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: start; }
.fgrid2 > .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .fgrid2 { grid-template-columns: 1fr; } }

/* ---------- portal proofs (Oct 2026): versions, who approved, emails for approval ---------- */
.vtag { display: inline-block; background: var(--ink); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 13px; font-weight: 700; vertical-align: 4px; letter-spacing: 0; }
.ansbox { background: var(--green-tint); border-color: #cfe7de; }
.ansbox h3 { margin-bottom: 4px; }
.arow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid #d6e8e1; }
.arow:last-of-type { border-bottom: 0; }
.ast { white-space: nowrap; font-weight: 600; }
.ast.approved { color: var(--green-d); } .ast.changes { color: var(--late); } .ast.none { color: var(--mute); font-weight: 500; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled input, fieldset.plain:disabled select { opacity: .6; }
.sendbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sendbox .fg-title { margin: 0; }
#emails { display: flex; flex-direction: column; gap: 8px; }
.erow { display: flex; gap: 8px; align-items: center; }
.erow input { flex: 1; min-width: 0; }
.xbtn { border: 0; background: none; color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; width: 28px; height: 28px; }
.xbtn:hover { color: var(--danger); }
.plusbtn { align-self: flex-start; width: 38px; height: 34px; border-radius: 10px; border: 1px dashed var(--green); background: #fff; color: var(--green-d); font-size: 20px; font-weight: 700; cursor: pointer; }
.warn-text { color: var(--late); font-weight: 600; }
details.verbal { margin-top: 12px; font-size: 13px; }
details.verbal summary { cursor: pointer; color: var(--link); }
label.choice { text-align: left; display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--line2); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; }
label.choice:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
tr.bold td { font-weight: 700; }
.thf { white-space: nowrap; }
.thf select { margin-left: 6px; height: 30px; padding: 0 6px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: 8px; width: auto; }
.pager { display: inline-flex; gap: 4px; }
.pager .pg { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.pager .pg.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* admin menu (Oct 2026): small numbers, More */
.nav .nb { display: inline-block; min-width: 18px; text-align: center; border-radius: 999px; font-size: 11px; padding: 1px 6px; margin-left: 5px; font-weight: 700; background: #e2574c; color: #fff; vertical-align: 1px; }
details.navmore > summary { padding: 9px 13px; border-radius: 9px; font-size: 14px; cursor: pointer; color: var(--dark-ink); }
details.navmore > summary.on { background: var(--green); color: #fff; }
details.navmore > summary:hover { background: #2a332f; }
details.navmore .menu-b { left: 0; right: auto; width: 220px; padding: 6px; display: flex; flex-direction: column; }
.hdr.dark details.navmore .menu-b a { color: var(--ink); font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.hdr.dark details.navmore .menu-b a:hover { background: var(--gray-bg); }
.hdr.dark details.navmore .menu-b a.on { background: var(--green-bg); color: var(--green-d); }
table.alljobs td, table.msgs td { vertical-align: middle; }
.stsel { width: auto; min-width: 140px; height: 32px; padding: 0 8px; font-size: 13px; }
.late-t { color: var(--late); font-weight: 700; }
td.snip { color: var(--soft); max-width: 460px; }
tr.bold td.snip { color: var(--ink); }
/* order lists (All Jobs, a client's Orders), Oct 2026: part # first, one font, one size, a little heavier */
table.jobl td, table.jobl td a, table.jobl td select { font-size: 14px; font-weight: 500; }
table.jobl tr.bold td, table.jobl tr.bold td a, table.jobl tr.bold td select { font-weight: 700; }
table.jobl .pnx { margin-right: 12px; white-space: nowrap; }
table.jobl th.stc, table.jobl td.stc { width: 150px; white-space: nowrap; }
table.jobl .stsel { width: 140px; min-width: 0; height: 34px; padding: 0 6px; }
table.jobl .thf { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
table.jobl .thf select { margin-left: 0; width: 140px; }
/* the job page: Part # · Product · Quantity · Client PO · Due on one line */
.spec.five { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .spec.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Oct 2026: a vendor's order confirmation → the PO */
.confsplit { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
.confraw { white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; margin: 0; max-height: 78vh; overflow: auto; color: var(--ink, #22302b); }
.conftbl td { vertical-align: top; }
.jobname { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jobname code { font: 600 14px ui-monospace, Menlo, Consolas, monospace; background: #f3f5f4; border: 1px solid #d7dfdb; border-radius: 6px; padding: 2px 8px; user-select: all; }
@media (max-width: 900px) { .confsplit { grid-template-columns: minmax(0, 1fr); } }

/* Oct 2026: invoices — To post to QuickBooks / Review */
.ro1 { border: 1px solid var(--line, #d7dfdb); border-radius: 8px; padding: 7px 10px; background: #f7f9f8; min-height: 36px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.ivchecks { list-style: none; padding: 0; margin: 0; }
.ivchecks li { margin: 4px 0; }
.ivchecks li.ok::before { content: "✓ "; color: var(--ok, #1f9a7e); font-weight: 700; }
.ivchecks li.warn::before { content: "! "; color: var(--warn, #a86a00); font-weight: 700; }
.ivchecks li.bad { color: var(--danger, #b0392c); }
.ivchecks li.bad::before { content: "✗ "; font-weight: 700; }

/* Vendor PO → Received: tracking # for UPS / FedEx / USPS, a note for Other */
.recvform .rv-trk, .recvform .rv-note { display: none; }
.recvform:has(select[name=method] option:is([value=ups], [value=fedex], [value=usps]):checked) .rv-trk { display: inline-block; }
.recvform:has(select[name=method] option[value=other]:checked) .rv-note { display: inline-block; }

/* Invoice Review: Return in a field = Save (an off-screen first button, so it isn't a line's Split) */
.enter-save { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Oct 2026: the reply box — "To" (the person who wrote last first) and quick replies */
.to-pick { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.to-pick select { width: auto; max-width: 100%; height: auto; padding: 6px 10px; font-size: 14px; font-weight: 500; }
@media (max-width: 600px) { .to-pick { flex-wrap: wrap; } .to-pick select { width: 100%; } }
.qrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.qchip { border: 1px dashed #a9cbbf; background: #fff; color: var(--green-d); border-radius: 16px; padding: 3px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.qchip:hover { background: var(--green-tint); border-style: solid; }

/* Oct 2026: chips shared by All Jobs, the client page and Invoices */
.ajchips { display: flex; gap: 8px; flex-wrap: wrap; }
.ajchip { border: 1px solid var(--line2); background: #fff; border-radius: 20px; padding: 5px 13px; font-size: 13.5px; color: var(--ink); }
.ajchip:hover { text-decoration: none; border-color: var(--green); color: var(--ink); }
.ajchip b { font-weight: 700; margin-left: 2px; }
.ajchip.on { background: var(--green); border-color: var(--green); color: #fff; }
.ajchip.on b, .ajchip.on .late-t { color: #fff; }
.ok-t { color: var(--green-d); font-weight: 700; }
.done-t { color: var(--mute); white-space: nowrap; }
.ajedit { font-weight: 700; white-space: nowrap; }
/* a client's page = a small website: the same tabs on every part of it */
.ctabs { display: flex; gap: 2px; align-items: flex-end; border-bottom: 2px solid var(--line); margin: 14px 0 4px; flex-wrap: wrap; }
.ctabs > a { padding: 9px 16px; font-weight: 600; color: var(--soft); border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 14.5px; }
.ctabs > a:hover { color: var(--green-d); text-decoration: none; }
.ctabs > a.on { color: var(--green-d); border-bottom-color: var(--green); }
.ctabs .ctab-ext { margin-left: auto; padding: 0 4px 9px; }
.ctabs .ctab-ext .linkbtn { font-weight: 600; font-size: 14px; }
table.cjobs td { vertical-align: top; font-size: 14px; line-height: 1.38; }
table.cjobs .ajno { font-weight: 700; }
table.cjobs td.stc { width: 170px; }
/* Invoices */
table.invl td, table.owe td { vertical-align: top; font-size: 14px; line-height: 1.38; }
table.invl tr.open > td { background: var(--green-tint); }
table.invl tr.openrow > td { background: var(--green-tint); padding: 4px 16px 16px; cursor: default; }
table.owe tr.tot td { background: #fafbfb; }
.clip1 { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.sb-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; align-items: center; max-width: 900px; }
.sb-grid > label, .sb-grid > .lbl { font-size: 13px; color: var(--soft); }
.sb-grid .check { align-items: flex-start; }
.lbl { font-size: 13px; color: var(--soft); display: block; margin-bottom: 4px; }
@media (max-width: 700px) { .sb-grid { grid-template-columns: 1fr; } }
/* the job page: ① specification ② file first; Messages / History as two tabs; the rest one line each */
.jhead .jacts { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
section.editing { border: 2px solid #e8a33d; }
.jtabs { padding-top: 0; }
.jtabs .ttabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 0 -2px 14px; }
.jtabs .ttabs button { border: 0; background: none; padding: 13px 14px 10px; font: inherit; font-weight: 600; color: var(--soft); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.jtabs .ttabs button.on { color: var(--green-d); border-bottom-color: var(--green); }
.jtabs .talk { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.jtabs .talk > .row.between h2 { display: none; }
.jlines .jline { border-top: 1px solid var(--line); }
.jlines .jline:first-child { border-top: 0; }
.jlines .jline > summary { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.jlines .jline > summary::-webkit-details-marker { display: none; }
.jlines .jline > summary > b::before { content: "▸ "; color: var(--soft); font-weight: 400; }
.jlines .jline[open] > summary > b::before { content: "▾ "; }
.jlines .jbody { padding: 0 16px 14px 138px; }
@media (max-width: 700px) { .jlines .jline > summary { grid-template-columns: 1fr; } .jlines .jbody { padding-left: 16px; } }
/* PDF viewer: a page that didn't draw */
.vw-page { background-size: 100% 100%; background-repeat: no-repeat; }
.vw-retry { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.85); }
.vw-retry button { border: 1px solid var(--line2); background: #fff; border-radius: 9px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; }

/* Nov 2026 (Simon): every box shows all of its text — the job's edit form gets wider columns (Made by, Color, Tracking),
   a dropdown sized to its chosen text where it sits in a table row, and the whole chosen text under a dropdown that is
   still too narrow (a phone) */
.editing .fgrid:not(.c2) { grid-template-columns: repeat(auto-fit, minmax(max(230px, calc((100% - 24px) / 3)), 1fr)); }
select.fit { width: auto; max-width: 100%; field-sizing: content; padding-right: 30px; }
.selfull { font-size: 12px; line-height: 1.35; color: var(--soft); margin-top: 3px; flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
textarea { overflow-y: auto; }
textarea.oneline { resize: none; overflow: hidden; min-height: 0; line-height: 1.35; }
/* Nov 2026: a pick-up slip the AI read, on the PO's Received */
.slipread { display: flex; gap: 12px; align-items: flex-start; border: 2px dashed var(--green); border-radius: 12px; padding: 10px 12px; background: #f6fbf9; max-width: 860px; }
.slipread img { width: 70px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: block; }
.slipread > div { min-width: 0; flex: 1; }
.slipwarn { padding: 8px 12px; border-radius: 10px; background: #fff6e5; border: 1.5px solid #f0c36b; font-size: 14px; }
input.fromslip { border-color: var(--green); background: #f1f8f5; }