/* Member job feed. Built on the public site's system (site.css): black stages, full-bleed photographs,
   Candor titles over Schibsted Grotesk, ember only where something is lit. The job detail is the site's job traveler.
   Readers are shop owners, many in their fifties and sixties: labels stay 14px or larger, values 18-20px, one job per block. */
@font-face { font-family: "Candor"; font-weight: 700; src: url(/static/candor-700.woff) format("woff"); font-display: swap; }
:root { --label: rgba(255, 255, 255, 0.66); --line: rgba(255, 255, 255, 0.1); }

/* nav */
.nav { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 10px; }
.nav .logo img { height: 34px; }
.nav .links a { cursor: pointer; font-size: 16px; }
.nav .links .count { color: var(--faint); margin-left: 6px; font-variant-numeric: tabular-nums; }
.nav .acct { display: flex; align-items: center; gap: 14px; margin-left: 12px; }
.nav .logo + .acct { margin-left: auto; }          /* sign-in and setup pages: the globe sits at the right */
.nav .acct .who { text-align: right; line-height: 1.2; }
.nav .acct .who b { display: block; font: 500 15px var(--text); }
.nav .acct .who span { font-size: 13px; color: var(--faint); }
/* language: the ember globe. It turns on hover and once on a first visit; each language is named in its own words */
.lang { position: relative; flex: none; }
.lang-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 9px; border: 0; border-radius: 19px; background: transparent; color: var(--white); font: 600 13px/1 var(--text); letter-spacing: 0.1em; cursor: pointer; transition: background 0.3s ease, box-shadow 0.3s ease; }
.lang-btn:hover, .lang.open .lang-btn { background: rgba(238, 90, 36, 0.14); box-shadow: inset 0 0 0 1px rgba(238, 90, 36, 0.6); }
.lang-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.lang-btn::before { content: ""; position: absolute; left: 9px; top: 8px; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; }
.globe { width: 22px; height: 22px; flex: none; overflow: visible; fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-linecap: round; }
.globe .rim { stroke-width: 1.7; }
.globe .lat { stroke-opacity: 0.85; }
.globe .lat.t { stroke-opacity: 0.45; }
.globe .m { transform-box: fill-box; transform-origin: center; animation: lang-turn 2.4s linear infinite paused; }
.globe .m1 { animation-delay: -0.24s; }
.globe .m2 { animation-delay: -1.04s; }
.globe .m3 { animation-delay: -1.84s; stroke-opacity: 0.55; }
.lang-btn:hover .m, .lang.open .m, .lang.intro .m { animation-play-state: running; }
.lang.going .m { animation-duration: 0.7s; animation-play-state: running; }
@keyframes lang-turn {
  0% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  50% { transform: scaleX(0.03); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  100% { transform: scaleX(1); }
}
.lang .lang-code { display: inline-block; overflow: hidden; height: 14px; line-height: 14px; }
.lang .lang-code > span { display: block; transition: transform 0.35s var(--ease), opacity 0.35s ease; }
.lang.going .code > span { transform: translateY(-110%); opacity: 0; }
.lang.intro .lang-btn::before { animation: lang-ping 1.6s var(--ease) 0.2s 2; }
@keyframes lang-ping { from { box-shadow: 0 0 0 0 rgba(238, 90, 36, 0.55); } to { box-shadow: 0 0 0 12px rgba(238, 90, 36, 0); } }
.lang-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; width: 256px; padding: 8px; background: rgba(12, 12, 14, 0.97); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: top right; transition: opacity 0.2s ease, transform 0.3s var(--ease), visibility 0s linear 0.3s; }
.lang-pop::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px; background: var(--ember); }
.lang-pop::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.lang.open .lang-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-h { margin: 8px 12px 8px; font: 500 12px/1 var(--text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.lang-pop a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 11px 12px; border-radius: 8px; color: var(--white); text-decoration: none; }
.lang-pop .lname { font: 500 16px/1.2 var(--text); }
.lang-pop .lreg { grid-row: 2; font: 400 13px/1.2 var(--text); color: var(--faint); }
.lang-pop .tick { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.35s var(--ease); }
.lang-pop a[aria-checked="true"] .tick { opacity: 1; transform: none; }
.lang-pop a:hover, .lang-pop a:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .lang.open .lang-pop a { animation: lang-in 0.4s var(--ease) both; }
  .lang.open .lang-pop a + a { animation-delay: 0.05s; }
  @keyframes lang-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .globe .m { animation: none; }
  .globe .m1 { transform: scaleX(0.92); } .globe .m2 { transform: scaleX(0.38); } .globe .m3 { transform: scaleX(0.03); }
  .lang.intro .lang-btn::before { animation: none; }
}
@media (max-width: 640px) { .lang-btn { padding: 0 8px; } .lang .lang-code { display: none; } .lang-pop { right: -60px; width: min(256px, calc(100vw - 32px)); } }
.phero { padding-top: 104px; }          /* the copy never slides under the fixed nav on short windows */
@media (max-width: 1320px) {
  .nav { gap: 20px; }
  .nav .links a { padding: 8px 11px; }
  .nav .acct .who { max-width: 170px; }
  .nav .acct .who b, .nav .acct .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 1180px) { .nav .acct .who { display: none; } }
.plainbtn { height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--glass); color: var(--white); font: 500 15px var(--text); cursor: pointer; white-space: nowrap; }
.plainbtn:hover { background: rgba(255, 255, 255, 0.26); }
.textbtn { background: none; border: 0; padding: 6px 0; color: var(--soft); font: 500 16px var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.textbtn:hover { color: var(--white); }
.textbtn.warn:hover { color: var(--white); }

/* login */
.signin { min-height: 100svh; }
.signin .copy { max-width: 980px; }
.signin .form { max-width: 860px; margin-top: 8px; }
.signin .form .btn { min-height: 62px; }
.signin .fine { color: var(--faint); font-size: 16px; }
.signin .fine a { color: var(--white); }

/* ---------- board ---------- */
.board { padding-block: clamp(40px, 6vh, 64px) clamp(96px, 14vh, 150px); }
.tools { display: grid; gap: 20px; margin-bottom: 28px; }
.searchrow { display: grid; grid-template-columns: minmax(0, 1fr) 250px auto; gap: 10px; }
.find { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; background: var(--field); border-radius: 4px; }
.find:focus-within { background: rgba(255, 255, 255, 0.14); }
.find svg { width: 20px; height: 20px; opacity: 0.6; flex: none; }
.find input { background: transparent; border: 0; outline: none; color: var(--white); font: 400 18px var(--text); width: 100%; }
.find input::placeholder { color: var(--faint); }
.sortby { height: 56px; padding: 0 14px; background: var(--field); border: 0; border-radius: 4px; color: var(--white); font: 400 17px var(--text); }
.sortby option { color: #000; }
.searchrow .btn { height: 56px; min-width: 0; padding-inline: 26px; font-size: 16px; }
.proc { display: flex; flex-wrap: wrap; gap: 6px; }
.proc button { display: inline-flex; align-items: baseline; gap: 8px; padding: 11px 16px; border: 0; border-radius: 4px; background: var(--field); color: var(--soft); font: 500 17px/1 var(--text); cursor: pointer; }
.proc button:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.proc button[aria-pressed="true"] { background: var(--white); color: var(--black); }
.proc button span { font-size: 15px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.tick { display: inline-flex; align-items: center; gap: 12px; color: var(--soft); font-size: 17px; cursor: pointer; user-select: none; position: relative; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick .box { width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 3px; display: grid; place-items: center; flex: none; transition: background 0.2s ease, border-color 0.2s ease; }
.tick .box svg { width: 13px; height: 13px; opacity: 0; }
.tick input:checked + .box { background: var(--white); border-color: var(--white); }
.tick input[type="radio"] + .box { border-radius: 50%; }
.tick input:checked + .box svg { opacity: 1; }
.tick input:focus-visible + .box { outline: 2px solid var(--white); outline-offset: 3px; }
.opts .textbtn { margin-left: auto; }

.summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; padding: 18px 0 22px; border-top: 1px solid var(--line); font-size: 18px; color: var(--soft); }
.summary b { color: var(--white); }
.applied { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; background: var(--panel); border-radius: 4px; font-size: 17px; }
.applied .textbtn { margin-left: auto; }

.dueband { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 0 12px; padding: 12px 18px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
.dueband:first-child { margin-top: 0; }
.dueband b { font: 600 18px var(--text); }
.dueband b.soon { color: var(--ember); }
.dueband span { color: var(--soft); font-size: 16px; }

.jobs { display: grid; gap: 12px; }
.job { display: grid; gap: 20px; padding: 24px 26px; background: var(--panel); border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: border-color 0.25s ease; }
.job:hover, .job:focus-visible { border-color: rgba(255, 255, 255, 0.35); outline: none; }
.job .jt { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.job h3 { font-size: clamp(24px, 2.2vw, 32px); }
.job .meta { margin-top: 8px; font-size: 17px; color: var(--soft); }
.due { text-align: right; flex: none; display: grid; gap: 2px; }
.due small { font-size: 14px; color: var(--label); }
.due b { font: 600 21px/1.2 var(--text); }
.due span { font-size: 16px; color: var(--soft); }
.due span.soon { color: var(--ember); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.facts div { min-width: 0; }
.facts dt { font-size: 14px; color: var(--label); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 19px; font-weight: 500; }
.job .jb { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; color: var(--soft); }
.flags li { display: inline-flex; align-items: center; gap: 8px; }
.flags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.flags li.good { color: var(--white); }
.flags li.good::before { background: var(--white); }
.flags li.stop { color: var(--white); font-weight: 600; }
.flags li.stop::before { background: var(--white); }
.view { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 4px; background: var(--glass); font: 500 16px var(--text); }
.view svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.job:hover .view { background: var(--white); color: var(--black); }
.job:hover .view svg { transform: translateX(4px); }
.job.shut { opacity: 0.55; }
.nothing { padding: 56px 28px; background: var(--panel); border-radius: 4px; color: var(--soft); font-size: 18px; }
.nothing h3 { margin-bottom: 12px; color: var(--white); }
.nothing .btn { margin-top: 22px; }

/* ---------- sheet (job traveler, save search) ---------- */
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.veil.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(780px, 100vw); background: var(--black); transform: translateX(100%); transition: transform 0.6s var(--ease); display: flex; flex-direction: column; }
.sheet.on { transform: none; }
.sheet .bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.sheet .bar-top span { color: var(--soft); font-size: 15px; font-variant-numeric: tabular-nums; }
.sheet .scroll { overflow: auto; flex: 1; overscroll-behavior: contain; }
.sheet .photo { aspect-ratio: 16 / 7; overflow: hidden; position: relative; }
.sheet .photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 60%); }
.sheet .inner { padding: 0 var(--gutter) 64px; display: grid; gap: 44px; margin-top: -72px; position: relative; }
.sheet .inner.flat { margin-top: 0; padding-top: 36px; }
.sheet .title { display: grid; gap: 14px; }
.sheet .title .n { font: 500 16px var(--text); color: var(--soft); }
.sheet .title h2 { font-size: clamp(34px, 4vw, 56px); }
.sheet .title p { color: var(--soft); font-size: 18px; }

.traveler { background: var(--panel); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 20px; border-radius: 4px; }
.traveler .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.traveler .top h3 { font-size: clamp(20px, 1.8vw, 26px); }
.traveler .top span { color: var(--soft); font-size: 15px; font-variant-numeric: tabular-nums; }
.traveler .spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.08); }
.traveler .spec div { background: var(--panel); padding: 10px 12px 12px 0; display: grid; gap: 3px; }
.traveler .spec small { color: var(--label); font-size: 14px; }
.traveler .spec b { font-weight: 500; font-size: 18px; }
.traveler .line { height: 2px; background: rgba(255, 255, 255, 0.12); position: relative; }
.traveler .line span { position: absolute; inset: 0; background: var(--ember); transform-origin: left; }
.ops { list-style: none; margin: 0; padding: 0; display: grid; }
.ops li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 26px; align-items: center; gap: 12px; padding-block: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--faint); font-size: 17px; }
.ops li .i { font-size: 14px; font-variant-numeric: tabular-nums; }
.ops li .who { font-size: 15px; color: var(--faint); }
.ops li .box { width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 3px; display: grid; place-items: center; }
.ops li .box svg { width: 13px; height: 13px; opacity: 0; }
.ops li.done { color: var(--soft); }
.ops li.done .box { background: var(--white); border-color: var(--white); }
.ops li.done .box svg { opacity: 1; }
.ops li.now { color: var(--white); }
.ops li.now .name { font-weight: 600; }
.ops li.now .box { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(238, 90, 36, 0.18); }

.part h3 { font-size: clamp(22px, 2vw, 30px); margin-bottom: 16px; }
.part .rows .row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding-block: 20px; }
.part .rows .row::after { display: none; }
.part .rows .row h4 { margin: 0; font: 600 18px/1.3 var(--text); }
.part .rows .row p { font-size: 17px; }
.part .plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--soft); font-size: 17px; }
.part .plain li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--faint); margin-right: 12px; vertical-align: 0.35em; }
.sheet .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet .form label span { font-size: 14px; }
.sheet .form input, .sheet .form select, .sheet .form textarea { font-size: 18px; }
.sheet .form .btn { grid-column: 1 / -1; min-height: 58px; font-size: 17px; }
.sheet .form .tick { grid-column: 1 / -1; padding: 6px 0; background: none; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.said { color: var(--soft); font-size: 17px; padding: 16px 0; border-top: 1px solid var(--dim); }
.said b { color: var(--white); }
.inside { border-top: 2px solid var(--white); padding-top: 22px; }
.inside .spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.inside .spec div { display: grid; gap: 3px; }
.inside .spec small { color: var(--label); font-size: 14px; }
.inside .spec b { font-weight: 500; font-size: 17px; }
.inside a { color: var(--white); }

/* ---------- saved searches ---------- */
.saved { display: grid; gap: 12px; }
.saved .item { padding: 26px; background: var(--panel); border-radius: 4px; display: grid; gap: 18px; }
.saved .item.paused { opacity: 0.6; }
.saved .item h3 { font-size: clamp(24px, 2.2vw, 32px); }
.saved .item .what { font-size: 18px; color: var(--soft); margin-top: 8px; }
.saved .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saved .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.saved .acts .btn { min-width: 0; height: 48px; padding-inline: 22px; font-size: 16px; }
.saved .result { font-size: 17px; color: var(--white); padding: 14px 18px; background: var(--ink); border-radius: 4px; }
.saved .result a { color: var(--white); }
.adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid rgba(238, 90, 36, 0.45); border-radius: 4px; font-size: 17px; color: var(--soft); }
.adminbar .btn { min-width: 0; height: 46px; padding-inline: 20px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; background: var(--white); color: var(--black); padding: 16px 22px; border-radius: 4px; font: 500 17px var(--text); transition: opacity 0.3s ease, transform 0.45s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { pointer-events: auto; cursor: pointer; font-weight: 600; box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--white); }

/* ---------- working on it: the clicked control spins and is locked; a bar while anything is still going ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.busy { pointer-events: none; opacity: 0.75; cursor: progress; }
.busy::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin 0.7s linear infinite; }
select.busy, input.busy { opacity: 0.6; }
select.busy::after, input.busy::after { display: none; }
.workbar { position: fixed; top: 72px; right: 24px; z-index: 70; display: flex; align-items: center; gap: 12px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 16px; background: var(--panel); border: 1px solid var(--dim); border-radius: 4px; font: 500 15px/1.4 var(--text); color: var(--white); opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.3s var(--ease); pointer-events: none; }
.workbar.on { opacity: 1; transform: none; }
.workbar .spin { flex: none; width: 16px; height: 16px; border: 2px solid var(--white); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@media (max-width: 640px) { .workbar { top: auto; bottom: 90px; right: 16px; left: 16px; } }

@media (max-width: 1000px) {
  .nav .links { display: flex; margin-left: 8px; }
  .nav .acct .who { display: none; }
  .searchrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .searchrow .find { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .saved .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav .links a { padding: 8px 7px; font-size: 14px; }
  .nav .acct { margin-left: auto; }
  .nav .logo img { height: 26px; }
  .plainbtn { padding: 0 10px; font-size: 14px; }
  .searchrow { grid-template-columns: minmax(0, 1fr); }
  .job { padding: 20px 18px; }
  .job .jt { flex-direction: column; gap: 14px; }
  .due { text-align: left; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view { width: 100%; justify-content: center; }
  .traveler .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside .spec, .saved .facts { grid-template-columns: minmax(0, 1fr); }
  .sheet .form { grid-template-columns: minmax(0, 1fr); }
  .sheet .inner { margin-top: -40px; }
  .opts .textbtn { margin-left: 0; }
  .signin .form { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .veil, .view svg { transition: none; }
}

/* quiet button: the site's glass fill without its corner lines, for buttons inside panels */
.btn.quiet { background: var(--glass); color: var(--white); }
.btn.quiet:hover { background: rgba(255, 255, 255, 0.26); }
.saved .facts { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.8fr); }
.facts dd { overflow-wrap: anywhere; }
.phero.short.plain { min-height: clamp(300px, 38svh, 420px); }
.phero.short.plain .copy { padding-bottom: clamp(40px, 6vh, 64px); }
@media (max-width: 1000px) { .saved .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .saved .facts { grid-template-columns: minmax(0, 1fr); } }
.phero.short.plain { min-height: clamp(400px, 48svh, 500px); padding-top: 96px; }

/* ---------- view switcher ---------- */
.summary { align-items: center; }
.views { display: inline-flex; align-items: center; gap: 4px; }
.views span { color: var(--label); font-size: 15px; margin-right: 8px; }
.views button { height: 42px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--field); color: var(--soft); font: 500 16px var(--text); cursor: pointer; }
.views button:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.views button[aria-pressed="true"] { background: var(--white); color: var(--black); }

/* ---------- List view: plain classified-ads lines ---------- */
.cl { margin-bottom: 40px; }
.cl h4 { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--dim); font: 600 18px var(--text); color: var(--white); display: flex; justify-content: space-between; gap: 16px; }
.cl h4.soon { color: var(--ember); }
.cl h4 span { font-weight: 400; font-size: 16px; color: var(--soft); }
.cl ul { list-style: none; margin: 0; padding: 0; }
.cl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cl li:hover, .cl li:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }
.cl li:hover .t, .cl li:focus-visible .t { text-decoration: underline; text-underline-offset: 4px; }
.cl .t { font: 600 19px var(--text); color: var(--white); }
.cl .d { font-size: 17px; color: var(--soft); }
.cl .x { font-size: 15px; color: var(--faint); margin-left: 6px; }
.cl .x.good { color: var(--white); }
.cl .r { font-size: 16px; color: var(--soft); white-space: nowrap; text-align: right; }
.cl .r.soon { color: var(--ember); font-weight: 600; }

/* ---------- Table view: columns for reading at a glance ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.tbl th { position: sticky; top: 60px; z-index: 2; text-align: left; font: 600 14px var(--text); color: var(--label); background: var(--black); padding: 12px 14px; border-bottom: 1px solid var(--dim); white-space: nowrap; }
.tbl td { padding: 15px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr.row-job { cursor: pointer; }
.tbl tbody tr.row-job:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.tbl tbody tr.row-job:hover td, .tbl tbody tr.row-job:focus-visible td { background: rgba(255, 255, 255, 0.08); }
.tbl tbody tr.row-job:focus-visible { outline: none; }
.tbl .grp td { background: var(--ink); color: var(--white); font: 600 16px var(--text); padding: 11px 14px; border-top: 1px solid var(--dim); }
.tbl .grp td.soon { color: var(--ember); }
.tbl .part b { display: block; font-weight: 600; font-size: 18px; }
.tbl .part small { font-size: 15px; color: var(--soft); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl .qd { white-space: nowrap; }
.tbl .qd b { display: block; font-weight: 600; }
.tbl .qd span { font-size: 15px; color: var(--soft); }
.tbl .qd span.soon { color: var(--ember); font-weight: 600; }
.tbl .part { min-width: 260px; }
.nw { white-space: nowrap; }
.tbl .notes { font-size: 15px; color: var(--soft); }
.tbl .notes .good { color: var(--white); }
.tbl .go { text-align: right; color: var(--soft); width: 36px; }
.tbl .go svg { width: 18px; height: 18px; }
@media (max-width: 1000px) {
  .tbl .hide-md { display: none; }
  .views { width: 100%; }
}
@media (max-width: 640px) {
  .tbl { font-size: 16px; }
  .tbl .hide-sm { display: none; }
  .tbl th, .tbl td { padding: 12px 8px; }
  .cl li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cl .r { text-align: left; }
}

/* ---------- posted price on cards ---------- */
.wepay { text-align: right; flex: none; display: grid; gap: 2px; }
.wepay small { font-size: 14px; color: var(--label); }
.wepay b { font: 700 clamp(26px, 2.4vw, 34px)/1.05 var(--title); letter-spacing: 0.01em; }
.wepay span { font-size: 16px; color: var(--soft); }
.wepay.mine b { color: var(--white); }
.wepay.off b { font: 600 19px/1.2 var(--text); color: var(--soft); }
.endsin { display: block; font-size: 15px; font-weight: 400; color: var(--soft); }
.endsin.soon { color: var(--ember); font-weight: 600; }
.cl .p { font: 700 19px var(--text); color: var(--white); margin-right: 6px; }
.tbl .paycell { font-weight: 600; font-size: 18px; }

/* ---------- the deal panel: price, take it, drawings, name your price ---------- */
.deal { background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 22px; }
.deal.won { border-color: var(--white); }
.deal.shutdeal { border-color: var(--line); }
.dealtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: end; }
.dealprice { display: grid; gap: 6px; }
.dealprice small { font-size: 15px; color: var(--label); }
.dealprice b { font: 700 clamp(44px, 6vw, 68px)/0.95 var(--title); letter-spacing: 0.005em; }
.dealprice b em { font: 500 20px var(--text); font-style: normal; color: var(--soft); margin-left: 4px; letter-spacing: 0; }
.dealprice span { font-size: 19px; color: var(--white); }
.dealprice .raised { font-style: normal; justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 3px; background: var(--white); color: var(--black); font: 600 14px var(--text); }
.dealfacts { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--line); }
.dealfacts li { font-size: 16px; color: var(--soft); padding: 11px 0; border-top: 1px solid var(--line); }
.dealfacts li b { display: block; color: var(--white); font-weight: 600; font-size: 17px; }
.dealbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.dealbtns .btn { min-width: 0; height: 58px; padding-inline: 26px; font-size: 17px; }
.btn.big { height: 64px; padding-inline: 38px; font-size: 19px; font-weight: 600; }
.namer { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; align-items: end; padding-top: 20px; border-top: 1px solid var(--line); }
.sheet .namer .btn { grid-column: auto; min-height: 0; height: 56px; padding-inline: 22px; font-size: 16px; }
.namer label:has(input[name="lead"]) { grid-column: 1 / -1; }
.dealheld { font-size: 17px; color: var(--soft); padding: 14px 16px; background: var(--ink); border-radius: 4px; }
.dealheld b { color: var(--white); }
.dealheld .textbtn { margin-left: 8px; font-size: 16px; }
.dealfine { font-size: 16px; color: var(--soft); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.dealmsg { font-size: 17px; color: var(--black); background: var(--white); padding: 14px 16px; border-radius: 3px; }
.dealnote { font-size: 18px; color: var(--soft); }
.dealq { font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--title); text-transform: uppercase; }
.nextsteps { margin: 0; padding-left: 24px; display: grid; gap: 10px; font-size: 18px; color: var(--soft); }
.nextsteps li::marker { color: var(--white); font-weight: 600; }
.sheet .deal .form .btn { min-height: 62px; font-size: 18px; }
.reasons { display: grid; gap: 8px; }
.pick { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--field); border-radius: 4px; cursor: pointer; font-size: 18px; }
.pick input { width: 20px; height: 20px; accent-color: #fff; }
.pick:has(input:checked) { background: rgba(255, 255, 255, 0.16); outline: 1px solid rgba(255, 255, 255, 0.5); }
.partlede { color: var(--soft); font-size: 17px; margin: -6px 0 16px; }
.bund { width: 100%; border-collapse: collapse; font-size: 17px; margin-bottom: 18px; }
.bund td { padding: 12px 8px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.bund td b { display: block; font-weight: 600; }
.bund td small { font-size: 14px; color: var(--soft); }
.bund .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bund tr.sum td { font-weight: 600; border-top: 1px solid var(--dim); }

@media (max-width: 640px) {
  .wepay { text-align: left; }
  .dealtop { grid-template-columns: minmax(0, 1fr); }
  .dealbtns .btn { width: 100%; }
  .namer { grid-template-columns: minmax(0, 1fr); }
  .sheet .namer .btn { width: 100%; }
}

[hidden] { display: none !important; }
.dealtop { grid-template-columns: auto minmax(0, 1fr); }
.dealprice b { white-space: nowrap; }
@media (max-width: 640px) { .dealtop { grid-template-columns: minmax(0, 1fr); } .dealprice b { white-space: normal; } }

/* ---------- quick-look panel ---------- */
a.view { color: var(--white); text-decoration: none; }
a.view:hover { background: var(--white); color: var(--black); }
.tbl .go a { color: inherit; display: inline-flex; padding: 6px; }
.sheet .photo.short { aspect-ratio: 16 / 5; }
.sheet .inner.pv { gap: 26px; margin-top: -48px; }
.pvprice { display: grid; gap: 6px; padding: 22px 24px; background: var(--panel); border-radius: 4px; }
.pvprice small { font-size: 15px; color: var(--label); }
.pvprice b { font: 700 clamp(40px, 5vw, 56px)/1 var(--title); }
.pvprice b em { font: 500 19px var(--text); font-style: normal; color: var(--soft); margin-left: 4px; }
.pvprice span { font-size: 19px; }
.pvprice .raised { font-style: normal; justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 3px; background: var(--white); color: var(--black); font: 600 14px var(--text); }
.pvprice.off b { font: 600 22px/1.2 var(--text); color: var(--soft); }
.pvfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.pvfacts dt { font-size: 14px; color: var(--label); margin-bottom: 4px; }
.pvfacts dd { margin: 0; font-size: 19px; font-weight: 500; }
.pvgo { display: grid; gap: 10px; }
.pvgo .btn { width: 100%; justify-content: center; min-width: 0; }
.pvgo .btn.big svg { width: 22px; height: 22px; margin-left: 6px; }

/* ---------- the job page ---------- */
.backlink { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 16px 10px 12px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: var(--white); font: 500 17px var(--text); text-decoration: none; backdrop-filter: blur(8px); }
.backlink:hover { background: var(--white); color: var(--black); }
.backlink svg, .jback svg { width: 20px; height: 20px; }
.jn { font: 500 17px var(--text); color: var(--soft); }
.jboard { padding-top: clamp(28px, 4vh, 44px); }
.jgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 36px; align-items: start; }
.jside { order: 2; position: sticky; top: 84px; }
.jmain { order: 1; display: grid; gap: 44px; min-width: 0; }
.jside .dealtop { grid-template-columns: minmax(0, 1fr); }
.jside .dealprice b { font-size: clamp(42px, 3.6vw, 58px); white-space: normal; }
.jside .namer { grid-template-columns: minmax(0, 1fr); }
.jside .namer .btn { width: 100%; }
.jside .dealbtns .btn { flex: 1 1 100%; }
.jback { margin-top: -12px; }
.jback .textbtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* the job a shop came back from */
.seen { outline: 2px solid var(--white); outline-offset: 3px; transition: outline-color 0.6s ease; }
.cl li.seen, .tbl tr.seen td { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 1000px) {
  .jgrid { grid-template-columns: minmax(0, 1fr); }
  .jside { order: 0; position: static; }
}
@media (max-width: 640px) {
  .pvfacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.pvgo .btn.quiet { height: 58px; font-size: 17px; }
.jn b.soon { color: var(--ember); font-weight: 600; }

/* job page header: same width as the content below, clear of the nav at any screen size */
.jhero { position: relative; overflow: hidden; background: var(--black); padding: 104px 0 36px; min-height: clamp(300px, 38svh, 420px); display: flex; align-items: flex-end; }
.jbg { position: absolute; inset: 0; }
.jbg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.jbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.6) 100%); }
.jhero-in { position: relative; width: 100%; display: grid; gap: 14px; }
.jtitle { font: 700 clamp(38px, 4.6vw, 72px)/0.98 var(--title); text-transform: uppercase; margin: 0; max-width: 20ch; overflow-wrap: anywhere; }
.jside .deal { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
@media (max-width: 640px) {
  .jhero { padding-top: 88px; min-height: 0; }
  .jtitle { font-size: clamp(32px, 9vw, 46px); }
}

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; row-gap: 2px; padding-bottom: 6px; }
  .nav .links { order: 3; flex: 1 0 100%; margin-left: -7px; overflow-x: auto; scrollbar-width: none; }
  .nav .acct { margin-left: auto; }
  .jhero { padding-top: 128px; }
}

/* forms on the job page (the site's .form is three columns; these are one or two, with full-width buttons) */
#jobpage .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#jobpage .form label span { font-size: 14px; }
#jobpage .form input, #jobpage .form select, #jobpage .form textarea { font-size: 18px; }
#jobpage .form .btn { grid-column: 1 / -1; width: 100%; min-height: 62px; font-size: 18px; }
#jobpage .form .tick { grid-column: 1 / -1; padding: 6px 0; background: none; }
#jobpage .jside .form { grid-template-columns: minmax(0, 1fr); }
#jobpage .admform { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
#jobpage .admform:has(select) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
#jobpage .admform .btn { grid-column: auto; width: auto; height: auto; min-height: 52px; font-size: 16px; }    /* as tall as the field beside it */
@media (max-width: 640px) {
  #jobpage .form, #jobpage .admform, #jobpage .admform:has(select) { grid-template-columns: minmax(0, 1fr); }
  #jobpage .admform .btn { width: 100%; }
}

.jside { position: static; }   /* scrolls with the page, so a tall confirm step is always reachable */
.form .reasons { grid-column: 1 / -1; }
.form .pick { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.form .pick span { font: 500 18px/1.3 var(--text); color: var(--white); }
.form .pick input { width: 22px; height: 22px; flex: none; }

/* commitment: confirm box, back-out, admin checklist */
.okbox { align-items: flex-start; gap: 14px; padding: 12px 0 4px; background: none; }
.okbox .box { margin-top: 2px; }
.okbox .oktext { font: 400 16px/1.45 var(--text); color: var(--soft); }
.form .tick.okbox span.box + .oktext { font-size: 16px; }
.btn.warnbtn { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.btn.warnbtn:hover { background: var(--glass); }
.checklist { display: grid; gap: 10px; margin-top: 18px; padding: 18px; background: var(--ink); border-radius: 4px; }
.checklist .insh { margin: 0 0 4px; }
.checklist .tick { font-size: 16px; color: var(--white); }
.checklist .btn { justify-self: start; min-width: 0; height: 50px; padding-inline: 22px; margin-top: 6px; }
#jobpage .admform .tick { grid-column: auto; align-self: center; padding: 0 6px; color: var(--soft); font-size: 15px; }
.tbl small.nw { color: var(--faint); font-size: 14px; }
.form label.tick { display: flex; flex-direction: row; background: none; }
#jobpage .form .okbox .oktext, .sheet .form .okbox .oktext { font: 400 17px/1.45 var(--text); color: var(--white); }

/* spec grids: row lines only, real gutters between columns (text never touches a divider) */
.traveler .spec { background: none; gap: 0 24px; border-top: 1px solid var(--line); }
.traveler .spec div { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.traveler .spec { gap: 0; border: 0; }
.traveler .spec div { padding: 14px 24px 16px 0; border-bottom: 0; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .ops li { grid-template-columns: 28px minmax(0, 1fr) 26px; row-gap: 2px; }
  .ops li .i { grid-row: 1 / span 2; }
  .ops li .who { grid-column: 2; grid-row: 2; font-size: 14px; }
  .ops li .box { grid-column: 3; grid-row: 1 / span 2; }
}
.wepay.hid small { color: var(--faint); }
.wepay.hid b { color: var(--soft); }

/* ---------- inbox: threads on the left, the open thread on the right ---------- */
.inbox { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.threads { display: grid; gap: 8px; }
.threads > .btn { justify-self: start; min-width: 0; height: 48px; padding-inline: 18px; font-size: 15px; margin-bottom: 8px; }
.thread { display: grid; gap: 4px; width: 100%; text-align: left; padding: 16px 18px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; color: var(--white); font: inherit; cursor: pointer; min-width: 0; }
.thread:hover { border-color: rgba(255, 255, 255, 0.3); }
.thread[aria-current="true"] { background: var(--panel); border-color: var(--white); }
.thread b { display: flex; align-items: center; gap: 10px; font: 600 18px/1.25 var(--text); }
.thread b i { width: 9px; height: 9px; border-radius: 50%; background: var(--white); flex: none; }
.thread small { color: var(--label); font-size: 14px; }
.thread span { color: var(--soft); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo { background: var(--ink); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.convo header { display: grid; gap: 8px; justify-items: start; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.convo header h2 { font-size: clamp(22px, 2vw, 28px); }
.convo header p { color: var(--soft); font-size: 16px; }
.convo .items { display: grid; gap: 14px; align-content: start; padding: 22px 24px; max-height: 56vh; overflow-y: auto; }
.convo .items .empty { color: var(--faint); font-size: 16px; }
.msg { justify-self: start; max-width: 82%; padding: 12px 16px; border-radius: 4px; background: var(--panel); }
.msg.mine { justify-self: end; background: rgba(255, 255, 255, 0.14); }
.msg small, .upd small { display: block; color: var(--label); font-size: 14px; margin-bottom: 4px; }
.msg p { font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.upd { padding-top: 14px; border-top: 1px solid var(--line); }
.upd b { display: block; font: 600 17px/1.35 var(--text); }
.upd p { color: var(--soft); font-size: 16px; }
.ibxform { grid-template-columns: minmax(0, 1fr); padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.ibxform span { font-size: 14px; }
.ibxform textarea { min-height: 96px; }
.ibxform .btn { justify-self: start; min-height: 52px; padding-inline: 28px; }
@media (max-width: 820px) { .inbox { grid-template-columns: minmax(0, 1fr); } .msg { max-width: 94%; } }

/* ---------- hover help: one floating box (app.js tipBox), so scrolling tables never clip it ---------- */
.tip { border-bottom: 1px dotted currentColor; cursor: help; outline: none; }
.tip.q, h2 .tip, h3 .tip, h4 .tip { border-bottom: 0; }
h2 .tip::after, h3 .tip::after { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 10px; border: 1px solid var(--dim); border-radius: 50%;
  font: 600 11px/1 var(--text); color: var(--faint); letter-spacing: 0; text-transform: none; vertical-align: 0.35em; }
.tipbox { position: fixed; z-index: 300; max-width: 320px; padding: 10px 12px; background: #1d1d20; border: 1px solid #3a3a3f; border-radius: 4px; color: #fff; font: 400 14px/1.45 var(--text); pointer-events: none; text-transform: none; letter-spacing: 0; }
.tipbox[hidden] { display: none; }

/* ---------- ledger rows: the site's editorial rows for checklists and to-dos (hairline above and below, nothing boxed) ---------- */
.ledger { border-top: 1px solid var(--dim); }
.lrow { display: grid; gap: 10px 28px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.vrow { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 0.9fr) 330px; }
.vrow.mine { grid-template-columns: minmax(0, 1fr) 190px 120px; }
.lname { min-width: 0; font: 600 18px/1.35 var(--text); color: var(--white); }
.lname > small { margin-left: 10px; font: 400 14px var(--text); color: var(--faint); }
.lsub { margin-top: 4px; max-width: 46em; font: 400 16px/1.5 var(--text); color: var(--soft); }
.lmeta { margin-top: 4px; font: 400 14px/1.4 var(--text); color: var(--label); }
.lfile { display: grid; gap: 2px; min-width: 0; font: 400 15px/1.45 var(--text); color: var(--soft); overflow-wrap: anywhere; }
.lname .lfile { margin-top: 8px; }
.lfile b { color: var(--white); font-weight: 600; }
.lfile a { color: var(--white); }
.lfile span { color: var(--faint); font-size: 14px; }
.llinks { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 14px var(--text); }
.llinks a, .linkbtn { padding: 0; border: 0; background: none; color: var(--label); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.llinks a:hover, .linkbtn:hover { color: var(--white); }
.lacts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.lacts .textbtn { margin-left: 6px; font-size: 14px; }
.lacts .btn { flex: 0 0 auto; }
.btn.sm { min-width: 0; height: 36px; padding-inline: 14px; font-size: 14px; }
.lstat { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 500 15px var(--text); color: var(--white); }
.lstat.hot { font-weight: 600; }
.lstat.done { color: var(--soft); }
.lbox { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 3px; }
.lbox svg { width: 11px; height: 11px; opacity: 0; }
.lstat.done .lbox { background: var(--white); border-color: var(--white); }
.lstat.done .lbox svg { opacity: 1; }
.lrow > form { grid-column: 1 / -1; }
.lrow.seen { background: rgba(255, 255, 255, 0.05); }

/* verification state: a label, the state in the title face, one line of detail */
.part > .vstate { border-top: 0; margin-bottom: 0; padding-top: 0; }
.vstate { display: grid; gap: 8px; margin-bottom: 12px; padding: 20px 0 24px; border-top: 1px solid var(--dim); border-bottom: 1px solid var(--line); }
.vstate small { font-size: 14px; color: var(--label); }
.vstate b { font: 700 clamp(28px, 3vw, 40px)/1 var(--title); text-transform: uppercase; }
.vstate p { max-width: 60em; font-size: 17px; color: var(--soft); }

/* not verified yet: the bar on open jobs */
.vbanner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-bottom: 28px; padding: 20px 24px; background: var(--panel); border-radius: 4px; }
.vbanner p { max-width: 60em; font-size: 17px; color: var(--soft); }
.vbanner b { color: var(--white); }
.vbanner .btn { min-width: 0; height: 46px; padding-inline: 22px; font-size: 15px; }

/* ---------- my shop ---------- */
.shopgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
#shop-view .part, #shoppage .part { margin-top: 44px; }
#shop-view .part.first { margin-top: 0; }
#shop-view .part h3, #shoppage .part h3 { margin-bottom: 18px; }
.vform { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-top: 4px; }
.vform label span { font-size: 13px; }
.vform input[type="file"] { font-size: 15px; }
.vform .tick { grid-column: 1 / -1; padding: 6px 0; font-size: 16px; background: none; }
.vform .btn { justify-self: start; min-height: 46px; padding-inline: 22px; font-size: 15px; }
.vsub { margin: 22px 0 8px; font: 600 16px var(--text); color: var(--label); }
.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--dim); }
.statgrid div { display: grid; gap: 2px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.statgrid small { font-size: 14px; color: var(--label); }
.statgrid b { font: 700 clamp(22px, 2vw, 28px)/1.1 var(--title); }
.statgrid span { font-size: 14px; color: var(--soft); }
.tbl.team td { padding: 12px 10px 12px 0; vertical-align: top; }
.tbl.team th { position: static; padding-left: 0; }
.tbl.team small { display: block; font-size: 14px; color: var(--faint); overflow-wrap: anywhere; }
.tbl.team select { height: 40px; background: var(--field); color: var(--white); border: 0; border-radius: 4px; padding: 0 10px; font: 500 15px var(--text); }
.tbl.team select option { color: #000; }
.tbl .pacts { white-space: nowrap; text-align: right; }
.tbl .pacts .textbtn { margin-left: 14px; font-size: 15px; }
.inviteform { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) auto; margin-top: 18px; align-items: stretch; }
.inviteform .btn { min-height: 0; padding-inline: 20px; font-size: 15px; }
.shopform { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shopform input:disabled, .shopform textarea:disabled { color: var(--soft); }
.shopform .procs { display: flex; flex-wrap: wrap; gap: 10px 24px; border: 0; margin: 0; padding: 8px 0; grid-column: 1 / -1; }
.shopform .procs legend { font-size: 14px; color: var(--label); margin-bottom: 8px; }
.shopform .tick { font-size: 16px; background: none; padding: 0; }
.shopform .btn { grid-column: 1 / -1; justify-self: start; min-height: 52px; padding-inline: 26px; }
.msg b { display: block; margin-bottom: 2px; font: 600 16px/1.35 var(--text); }
@media (max-width: 1000px) { .shopgrid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 760px) {
  .vrow, .vrow.mine { grid-template-columns: minmax(0, 1fr) auto; }
  .vrow > .lfile { grid-column: 1 / -1; }
  .lacts { grid-column: 1 / -1; justify-content: flex-start; }
  .vform { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .inviteform .btn { min-height: 50px; }
  .tbl.team thead { display: none; }
  .tbl.team, .tbl.team tbody { display: block; }
  .tbl.team tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl.team td { border: 0; padding: 0; }
  .tbl.team td:nth-child(3) { grid-column: 1; font-size: 14px; color: var(--faint); }
  .tbl.team td.pacts { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  .shopform, .inviteform { grid-template-columns: minmax(0, 1fr); }
  .statgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tbl.team .pacts { white-space: normal; }
}

/* ---------- a shop's order: steps, paperwork, shipping ---------- */
.osteps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.osteps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--soft); }
.osteps li.done { color: var(--white); }
.osteps li.done .lbox { background: var(--white); border-color: var(--white); }
.osteps li.done .lbox svg { opacity: 1; }
.osteps small { font-size: 14px; color: var(--faint); }
.odocs h4 { margin: 0 0 6px; font: 600 16px var(--text); color: var(--label); }
.odocs p { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.odocs a { color: var(--white); overflow-wrap: anywhere; }
.odocs span { font-size: 14px; color: var(--faint); }
.oform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.oform .btn { grid-column: 1 / -1; min-height: 54px; }
.oform input[type="file"] { font-size: 15px; }

/* first sign-in: finish setting up (server-built page, /welcome) */
.setup { padding: 128px 0 96px; }
.setup .copy { max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 22px; }
.setup .sub { max-width: 40em; }
.setup .sub b { color: var(--white); font-weight: 600; }
.setform { display: grid; gap: 38px; margin-top: 10px; }
.setsec { display: grid; gap: 14px; }
.setsec h2 { font: 600 15px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.setsec .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setsec .form label span, .setfact > span { font: 500 15px/1.2 var(--text); color: var(--faint); }
.setsec .form label span i { font-style: normal; color: rgba(255, 255, 255, 0.4); }
.setsec .form input, .setsec .form select, .setsec .form textarea { font-size: 19px; }
.setsec .form textarea { min-height: 96px; }
.setsec .form label { padding: 13px 16px; align-content: start; }
.setsec .form label.bad, .setsec .procpick.bad { outline: 1.5px solid rgba(255, 255, 255, 0.75); }
.setsec .ferr { font: 600 15px/1.35 var(--text); color: var(--white); font-style: normal; }
.setsec .fhint { font: 400 14px/1.35 var(--text); color: var(--faint); font-style: normal; }
.setfact { display: grid; gap: 4px; padding: 13px 16px; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 4px; align-content: start; min-width: 0; }
.setfact b { font: 400 19px var(--text); color: var(--white); overflow-wrap: anywhere; }
.procpick { grid-column: 1 / -1; border: 0; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-radius: 4px; }
.procpick legend { font: 500 15px/1.2 var(--text); color: var(--faint); margin-bottom: 10px; }
.procpick .ferr { grid-column: 1 / -1; }
.setform > .btn { justify-self: start; min-height: 62px; padding-inline: 40px; font-size: 18px; }
.seterr { padding: 16px 20px; border: 1.5px solid rgba(255, 255, 255, 0.75); border-radius: 4px; font: 400 17px/1.45 var(--text); color: var(--white); }
.seterr b { font-weight: 600; }
.seterr ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.seterr a { color: var(--white); text-underline-offset: 3px; }
.seterr[hidden] { display: none; }
.setout { margin-top: -4px; }
.setout .textbtn { font-size: 16px; color: var(--faint); }
.setup .fine { color: var(--faint); font-size: 16px; max-width: 46em; }
.signin .form.one { grid-template-columns: minmax(0, 360px); }
.signin .form label.bad { outline: 1.5px solid rgba(255, 255, 255, 0.75); }
.signin [hidden] { display: none !important; }
@media (max-width: 640px) {
  .setup { padding-top: 104px; }
  .setsec .form, .procpick { grid-template-columns: minmax(0, 1fr); }
  .setform > .btn { justify-self: stretch; }
}
.signin .joinwhich { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0 0 6px; }
.signin .joinwhich legend { padding: 0; margin-bottom: 10px; font: 500 15px var(--text); color: var(--faint); }
.signin .form label span { font-size: 14px; }
.signin .form label { align-content: start; }
@media (max-width: 640px) { .signin .joinwhich { grid-template-columns: minmax(0, 1fr); } }

.tourcall { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 20px 24px; margin-bottom: 34px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; }
.tourcall p { font-size: 17px; line-height: 1.5; color: var(--soft); max-width: 44em; }
.tourcall p b { color: var(--white); font-weight: 600; }
.tourcall .btn { flex: none; min-height: 52px; padding-inline: 26px; }
@media (max-width: 640px) { .tourcall { flex-direction: column; align-items: stretch; } }

/* the guided tour: grey over the page, the part being explained lit up, a tooltip beside it */
.tt[hidden] { display: none; }
.tt-dim { position: fixed; z-index: 90; background: rgba(0, 0, 0, 0.66); transition: all 0.28s ease; }
.tt-ring { position: fixed; z-index: 91; cursor: default; border-radius: 8px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, 0.18); transition: all 0.28s ease; }
.tt-ring.tap { pointer-events: none; animation: ttpulse 1.6s ease-in-out infinite; }      /* only the "click this" step lets a click through */
@keyframes ttpulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 12px rgba(255, 255, 255, 0.08); } }
.tt-pop { position: fixed; z-index: 92; width: min(380px, calc(100vw - 24px)); padding: 22px 22px 18px; background: #fff; color: #111; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, left 0.28s ease, top 0.28s ease; }
.tt-pop.in { opacity: 1; transform: none; }
.tt-pop.mid { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px)); padding: 30px 30px 24px; }
.tt-pop.dock { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
.tt-pop .tt-n { display: block; font: 600 13px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b70; }
.tt-pop h3 { margin: 10px 34px 0 0; font: 700 22px/1.15 var(--title); text-transform: none; letter-spacing: 0; color: #000; }
.tt-pop.mid h3 { font-size: 28px; }
.tt-pop p { margin: 10px 0 0; font: 400 17px/1.5 var(--text); color: #333; }
.tt-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #555; font: 400 26px/36px var(--text); cursor: pointer; }
.tt-x:hover { background: #eee; color: #000; }
.tt-acts { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tt-acts > span { flex: 1; }
.tt-acts button { height: 44px; padding: 0 18px; border-radius: 6px; font: 600 16px var(--text); cursor: pointer; }
.tt-next { border: 0; background: #000; color: #fff; }
.tt-next:hover { background: #222; }
.tt-back { border: 1px solid #ccc; background: #fff; color: #111; }
.tt-skip { border: 0; background: transparent; color: #555; padding: 0 4px !important; text-decoration: underline; text-underline-offset: 3px; }
.tt-acts [hidden] { display: none; }
.tt-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.tt-pop.at-bottom .tt-arrow { top: -7px; margin-left: -7px; }
.tt-pop.at-top .tt-arrow { bottom: -7px; margin-left: -7px; }
.tt-pop.at-right .tt-arrow { left: -7px; margin-top: -7px; }
.tt-pop.at-left .tt-arrow { right: -7px; margin-top: -7px; }
.tt-pop.mid .tt-arrow, .tt-pop.dock .tt-arrow, .tt-pop.at-mid .tt-arrow { display: none; }
@media (prefers-reduced-motion: reduce) { .tt-dim, .tt-ring, .tt-pop { transition: none; } .tt-ring.tap { animation: none; } }