/* Requests: document states, the participants sheet, the review step, sending and status. */
.seg2 button, .chips button, .shi, .shsum, .sumrow, .nextact, .pxbtn, .armhint button, .dfilter button, .ghead button, .bigup, .xfile .icon-btn, .addf, .codebox .lnk { border: 0; background: none; font: inherit; color: inherit; }

/* ---------- document list ---------- */
.bigup { width: 100%; display: flex; align-items: center; gap: 18px; margin: 0 0 28px; padding: 22px 24px; border: 2px dashed #c7cedb; border-radius: 18px; background: #f7f9fc; text-align: left; transition: border-color .15s, background .15s; }
.bigup:hover, body.dropping .bigup { border-color: var(--navy); background: var(--navy-50); }
.bu-i { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--navy); color: #fff; }
.bu-i svg.i { width: 28px; height: 28px; }
.bu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bu-t b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.bu-t span { font-size: 14.5px; color: var(--text-2); }
.bu-b { flex: none; height: 44px; padding: 0 18px; font-size: 15px; pointer-events: none; }
.dtool { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.dfilter { display: flex; gap: 2px; flex-wrap: wrap; }
.dfilter button { height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.dfilter button:hover { color: var(--text); background: #f7f8fa; }
.dfilter button.on { background: var(--gray); color: var(--text); }
.dfilter button span { margin-left: 4px; color: var(--text-3); }
.gsec + .gsec { margin-top: 40px; }
.ghead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.ghead button[data-fold-group] { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 4px; margin-left: -4px; border-radius: 8px; font-size: 18px; font-weight: 700; color: var(--text); }
.ghead button[data-fold-group]:hover { background: var(--gray); }
.ghead .n { color: var(--text-3); }
.ghead { font-size: 13px; }
.ghead .right .lnk { font-size: 13px; }
.ghead .chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .15s; }
.gsec.closed .chev { transform: rotate(-90deg); }
.gsec.closed .gbody { display: none; }
.gsec.closed .ghead { margin-bottom: 0; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
.chip.draft { background: var(--gray); color: var(--text-2); }
.chip.wait { background: var(--navy-50); color: var(--navy); }
.chip.soon { background: #fff4e5; color: #b45309; }
.chip.act { background: #fff1e6; color: #c2410c; }
.chip.warn { background: #fdecea; color: #c8361f; }
.chip.done { background: #e5f4ec; color: #12805c; }
.dbody .m { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 6px; }
.dbody .m .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-2); }
.dbody .m .when { margin-left: auto; flex: none; font-size: 13px; color: var(--text-3); }
.pdots { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.pdots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.pdots i.on { background: var(--c); }
.pdots i.bad { box-shadow: inset 0 0 0 1.5px #c8361f; background: #fdecea; }
.pdots span { margin-left: 6px; }
.nextact { position: relative; z-index: 2; flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.nextact:hover { background: var(--gray); }
.nextact.hot { border-color: var(--navy); background: var(--navy); color: #fff; }
.nextact.hot:hover { background: var(--navy-h); }
.dbody .nextact { width: 100%; height: 40px; margin-top: 12px; font-size: 14px; }
.crow .c .chip { vertical-align: middle; }

/* ---------- editor: step 1 and the placing hint ---------- */
.ucard { width: min(520px, calc(100vw - 32px)); }
.frow { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.ficon { width: 40px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--text-3); }
.fmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fmeta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmeta span { font-size: 13px; color: var(--text-3); }
.tinput { height: 44px; margin-top: 6px; }
.armhint { position: fixed; top: 76px; left: 50%; z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 6px 0 8px; border-radius: 21px; background: var(--navy); color: #fff; box-shadow: var(--shadow-float); font-size: 14px; white-space: nowrap; }
.armhint .who { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border-radius: 15px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 700; }
.armhint .av { width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 1.5px #fff; }
.armhint b { font-weight: 700; }
.armhint button { height: 30px; padding: 0 12px; border-radius: 15px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 700; }
.pr .ct .need { font-style: normal; font-weight: 700; color: #b45309; }
.tmore { margin-top: 8px; border: 1px dashed var(--line-2); color: var(--navy); }
.tmore:hover { color: var(--navy); }
.moretools > .grp:first-child { margin-top: 14px; }
.mine3 .addm { border-style: dashed; color: var(--navy); cursor: pointer; }
.mine3 .addm.wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.mine3 .addm.wide svg.i { width: 17px; height: 17px; }
.fp-art button.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-50); }
.form-field.me-field { --party-color: #6b7684; }
.form-field.view-field { cursor: default; }
.fillhead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fillhead b { font-size: 15px; }
.props .psec { padding: 4px 0; }
.props .psec + .psec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.props .opt { margin: 8px 0 10px; }
.props textarea { height: 64px; padding: 10px 12px; resize: vertical; }

/* ---------- step 2: participants ---------- */
#psheet .pcard { width: min(820px, calc(100vw - 48px)); }
.phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.phead h2 { margin: 0; }
.phdr, #psheet .prow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 170px 110px 56px 64px 36px; align-items: center; gap: 10px; }
.phdr { height: 30px; font-size: 12px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--line); }
#psheet .prow select, #psheet .prow input { margin: 0; height: 40px; font-size: 14px; }
#psheet .prow .prole { padding: 0 10px; font-weight: 600; }
.tinput.bad { border-color: #d92d20; color: #b42318; }
.pext { display: flex; }
.pxbtn { height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pxbtn:hover { background: var(--gray); color: var(--text); }
.pxbtn.on { border-color: var(--navy-50); background: var(--navy-50); color: var(--navy); }
.pxbtn svg.i { width: 14px; height: 14px; }
.ord { display: flex; gap: 2px; }
.ord .icon-btn { width: 30px; height: 30px; }
#extra-dialog { width: min(560px, calc(100vw - 32px)); }
#extra-dialog textarea { height: 96px; padding: 10px 12px; resize: vertical; }
.xfiles .ol { display: block; margin: 4px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.xfile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.xfile input:not([type=checkbox]) { margin: 0; height: 40px; font-size: 14px; }
.xreq { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap; }
.addf { height: 36px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.addf:hover { background: var(--navy-50); }
.addf:disabled { color: var(--text-3); background: none; }
.addf svg.i { width: 16px; height: 16px; }

/* ---------- step 4: review and status ---------- */
.opt { margin: 0 4px 16px; }
.opt:last-child { margin-bottom: 4px; }
.opt .ol { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.opt.row { display: flex; align-items: center; justify-content: space-between; }
.opt .hint, .sd-sec .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.opt textarea { width: 100%; min-height: 72px; height: auto; padding: 10px 12px; font-size: 14px; resize: vertical; }
.opt .tinput { margin-top: 0; height: 40px; font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); background: #fff; }
.chips button.on { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.seg2 { display: flex; padding: 3px; background: var(--gray); border-radius: 10px; }
.seg2 button { flex: 1; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.seg2 button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(25, 31, 40, .12); }
.seg2.sm { width: 240px; }
.seg2.sm button { height: 28px; font-size: 12.5px; }
.chk { list-style: none; margin: 0; padding: 0; }
.chk li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 4px; font-size: 13.5px; line-height: 1.45; }
.chk li svg.i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.chk li.ok svg.i { color: #12805c; }
.chk li.warn { color: #b42318; }
.chk li.warn svg.i { color: #d92d20; }
.chk li .lnk { margin-left: auto; flex: none; }
.chk li:has(.acts) { flex-wrap: wrap; }
.chk li .acts { flex-basis: 100%; display: flex; gap: 16px; padding-left: 26px; }
.chk li .acts .lnk { margin-left: 0; }
.sendbox { display: flex; flex-direction: column; gap: 8px; }
.sendbox .btn, .sendbox .primary { width: 100%; height: 48px; font-size: 15px; }
.sendbox .btn.soft { height: 40px; font-size: 14px; }
.sendbox .ready { margin: 0 4px 4px; font-size: 14px; font-weight: 600; color: #12805c; }
.tpanel .info dl { margin: 0; display: grid; gap: 10px; }
.tpanel .info dt { font-size: 12.5px; color: var(--text-3); }
.tpanel .info dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.tpanel .info dd small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.smeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.smeta b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smeta .why { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.stl .via { font-weight: 500; }
.stl.st-submitted { color: #12805c; }
.stl.st-rejected, .stl.st-expired, .stl.st-revoked { color: #c8361f; }
.stl.st-pending { color: #c2410c; }
.srow.me .stl.st-requested { color: var(--navy); font-weight: 700; }
.sact { display: flex; gap: 2px; flex: none; }
.sact .icon-btn { width: 30px; height: 30px; }
.rej h3 { color: #c8361f; }
.rej .why { margin: 0 4px 6px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.rej .when { display: block; margin: 0 4px 12px; font-size: 12.5px; color: var(--text-3); }
.rej-act { display: grid; gap: 6px; }
.rej-act .btn, .rej-act .primary { height: 40px; }
.rej.off h3 { color: var(--text); }
.rej.off .why { margin-bottom: 0; color: var(--text-2); }
.mecall h3 { margin-bottom: 12px; }
.mecall .primary { width: 100%; height: 44px; font-size: 15px; }

/* ---------- sending and sharing ---------- */
#share { width: min(1080px, calc(100vw - 32px)); height: min(700px, calc(100vh - 32px)); max-height: none; padding: 0; overflow: hidden; }
.shw { display: flex; flex-direction: column; height: 100%; outline: 0; }
.sh-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--line); }
.sh-ti { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sh-ti h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.sh-ti span { font-size: 15px; font-weight: 600; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; }
.sh-l { overflow: auto; padding: 12px 10px; border-right: 1px solid var(--line); }
.sh-m { overflow: auto; padding: 22px 26px 26px; }
.sh-pv { overflow: auto; padding: 20px; background: #f7f8fa; border-left: 1px solid var(--line); }
.sh-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.sh-f .pend { color: #c2410c; }
.sh-fa { display: flex; gap: 8px; }
.sh-fa .btn, .sh-fa .primary { height: 44px; padding: 0 18px; font-size: 15px; }
.shg { display: flex; justify-content: space-between; margin: 16px 8px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.shg:first-child { margin-top: 4px; }
.shi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; text-align: left; }
.shi:hover { background: #f7f8fa; }
.shi.on { background: var(--navy-50); }
.shi .m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shi .m b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shi .m small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shi .stl { flex: none; }
.shi .lk, .sd-h .lk { width: 24px; height: 24px; border-radius: 50%; background: var(--gray); color: var(--text-2); display: grid; place-items: center; flex: none; }
.shi.add .lk { background: none; border: 1px dashed var(--line-2); }
.shi.add b { color: var(--navy); }
.shsum { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 10px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--navy); text-align: left; }
.shsum:hover { background: #f7f8fa; }
.shsum.on { background: var(--navy-50); }
.sumlist { display: flex; flex-direction: column; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sumrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.sumrow:last-child { border-bottom: 0; }
.sumrow:hover { background: #f9fafb; }
.sumrow .sn, .sumrow .sv { display: flex; flex-direction: column; min-width: 0; }
.sumrow b { font-size: 14px; font-weight: 700; }
.sumrow small { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sumrow .sa { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.sumrow .chg { font-size: 13px; font-weight: 700; color: var(--navy); }
.sd-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.sd-h .av, .sd-h .lk { width: 38px; height: 38px; font-size: 15px; }
.sd-ti { flex: 1; min-width: 0; }
.sd-ti h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.sd-ti h3 .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ti > span { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* actions get their own line under the name, so a long name or three buttons never squeeze each other */
.sd-act { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; padding-left: 50px; }
.sd-act:empty { display: none; }
.sd-act .btn, .sd-act .primary { height: 38px; padding: 0 14px; }
.sd-sec { margin-bottom: 22px; }
.sd-sec > .ol { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sd-sec.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sd-sec.row > .ol { margin: 0; }
.sd-sec .field { margin: 0; font-size: 13px; }
.sd-sec .tinput { height: 42px; font-size: 14.5px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.olrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.olrow .ol { font-size: 13px; font-weight: 600; color: var(--text-2); }
.olr { font-size: 13px; font-weight: 600; color: var(--navy); }
.codeset { display: grid; gap: 8px; margin-top: 10px; }
.codeset .tinput { margin: 0; }
.codebox { margin-top: 10px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--gray); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.codebox b { font: 700 18px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--text); }
.codebox .lnk { margin-left: auto; }
.codebox .lnk ~ .lnk { margin-left: 14px; }
.linkbox { display: flex; gap: 6px; }
.linkbox input { flex: 1; min-width: 0; height: 42px; margin: 0; background: var(--gray); font: 500 13px ui-monospace, Menlo, monospace; color: var(--text-2); }
.linkbox .btn, .linkbox .primary { height: 42px; flex: none; }
.sd-note { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 12px 14px; border-radius: 10px; background: var(--gray); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.sd-note.warn { background: #fff6f5; color: #c8361f; }
.sd-stat { font-size: 14px; font-weight: 600; }
.filelink { display: block; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.pv-av { width: 30px; height: 30px; border-radius: 10px; background: var(--navy); display: grid; place-items: center; flex: none; }
.pv-av.sm { width: 22px; height: 22px; border-radius: 6px; }
.pv-h { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.pv-from { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.pv-me { width: 30px; height: 30px; border-radius: 11px; background: #dce2ea; color: var(--text-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.pv-bubble { max-width: 252px; margin-left: 38px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px 2px rgba(25, 31, 40, .08); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.pv-og { width: 220px; margin: 6px 0 0 38px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25, 31, 40, .08); overflow: hidden; }
.pv-og-i { height: 92px; background: var(--navy); display: grid; place-items: center; }
.pv-og-t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.pv-og-t b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-og-t span { font-size: 12px; color: var(--text-3); }
.pv-sms .pv-bub { max-width: 270px; padding: 11px 14px; border-radius: 18px 18px 18px 6px; background: #e5e8eb; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.pv-txt u, .pv-bub u, .pv-bubble u, .pv-mb u { color: #2f6fb0; }
.pv-mail { border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25, 31, 40, .08); overflow: hidden; font-size: 13px; }
.pv-mh { display: grid; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pv-mh div { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-mh span { width: 52px; flex: none; color: var(--text-3); }
.pv-mb { padding: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.pv-txt { margin: 0 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--text); }
.pv-page { border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25, 31, 40, .08); overflow: hidden; }
.pv-top { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 800; }
.pv-pb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 18px 22px; text-align: center; }
.pv-pb b { font-size: 15px; }
.pv-pb > span:not(.pv-mbtn):not(.pv-in) { font-size: 13px; color: var(--text-3); }
.pv-in { width: 100%; height: 40px; margin-top: 14px; border: 1px solid var(--line-2); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text-3); }
.pv-hint { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--navy) !important; }
.pv-mbtn { display: block; width: 100%; height: 40px; line-height: 40px; margin-top: 10px; border-radius: 8px; background: var(--navy); color: #fff; text-align: center; font-size: 13.5px; font-weight: 700; }

@media (max-width: 1100px) {
  .sh-b { grid-template-columns: 220px minmax(0, 1fr); }
  .sh-pv { display: none; }
}

/* completed and cancelled rows carry a state chip */
.crow { grid-template-columns: 30px minmax(0, 1fr) 84px 160px 64px auto; }
@media (max-width: 1240px) {
  .crow { grid-template-columns: 30px minmax(0, 1fr) 84px 140px auto; }
}

/* first-visit guide: a hole over the real control and a note beside it (tour.ts keeps both on the control) */
.coach { position: fixed; inset: 0; z-index: 300; }
.coach[hidden] { display: none; }
.coach.lost .coach-hole, .coach.lost .coach-tip { visibility: hidden; }
.coach-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(25, 31, 40, .55); outline: 2px solid #fff; pointer-events: none; }
.coach-tip { position: fixed; width: min(320px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(25, 31, 40, .28); }
.coach-tip::before { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.coach-tip[data-side="below"]::before { top: 0; left: var(--ax); }
.coach-tip[data-side="above"]::before { top: 100%; left: var(--ax); }
.coach-tip[data-side="right"]::before { top: var(--ay); left: 0; }
.coach-tip[data-side="left"]::before { top: var(--ay); left: 100%; }
.coach-tip[data-side="mid"]::before { display: none; }
.coach-n { font-size: 13px; font-weight: 700; color: var(--navy); }
.coach-tip h4 { margin: 4px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.coach-tip p { margin: 0 0 16px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--text); }
.coach-b { display: flex; justify-content: flex-end; gap: 8px; }
.coach-b .btn, .coach-b .primary { height: 40px; padding: 0 16px; font-size: 14.5px; }
.top-r .help { width: 40px; height: 40px; color: var(--text-2); }