.jhead-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}
.jhead-tools .search {
  flex: 0 1 280px;
  min-width: 220px;
}
.jbar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.jbar-phone {
  display: flex;
  gap: 8px;
  width: 100%;
}
.jbar-phone .search {
  max-width: none;
  flex: 1 1 auto;
}
.jfilters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jfilters::-webkit-scrollbar {
  display: none;
}
@media (max-width: 899px) {
  .jfilters {
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px;
  }
}
.jpick {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--field);
  border-radius: 10px;
  background: var(--hd-surface, #fff);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.jpick select {
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-height: 38px;
  padding: 0 22px 0 0;
  margin-right: -18px;
  max-width: 180px;
  cursor: pointer;
  outline-offset: 2px;
}
.jpick > svg {
  pointer-events: none;
  color: var(--muted);
}
.jcap {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--muted);
}
.card-head h2.jcap {
  font-size: 11px;
  line-height: 16px;
  flex: 1;
}
.jcap.amber {
  color: var(--amber);
}
.jpill {
  align-self: flex-start;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.jpill.amber {
  background: var(--amber-soft);
  color: var(--hd-orange-ink, #92400E);
}
.jpill.violet {
  background: var(--hd-violet-tint, #EDE9FE);
  color: var(--hd-violet-ink, #5B21B6);
}
#cab-journal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.sheet textarea {
  font: inherit;
}
.jreq {
  border-color: var(--hd-amber-line, #FCD9A0);
}
.jrtabs {
  display: flex;
  gap: 6px;
}
.jrtab[aria-pressed=true] {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}
.jreq-list {
  display: grid;
  gap: 12px;
}
@media (min-width: 900px) {
  .jreq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jrcard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.jrcard.new {
  border-color: #F7C873;
  background: var(--hd-amber-tint, #FFFCF5);
}
.jrcard-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jrcard-top small {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted2);
}
.jtag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--ink);
  white-space: nowrap;
}
.jtag.amber {
  background: var(--amber-soft);
  color: var(--hd-orange-ink, #92400E);
}
.jtag.green {
  background: var(--hd-green-tint, #E7F6EC);
  color: var(--hd-green-ink, #15803D);
  font-size: 13px;
  font-weight: 600;
}
.jtag.blue {
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 13px;
  font-weight: 600;
}
.jtag.gray {
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.jtag.ab {
  background: var(--hd-red-tint, #FFE4E8);
  color: var(--hd-red-ink, #BE123C);
  font-size: 13px;
  font-weight: 600;
}
.jtag.bk {
  background: var(--hd-blue-tint, #E0EAFF);
  color: var(--hd-blue-ink, #1E40AF);
  font-size: 13px;
  font-weight: 600;
}
.jrname {
  font-size: 15px;
  line-height: 20px;
}
.jmsg {
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
}
.jmsg b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--blue-ink);
}
.jrlines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink);
}
.jrlines span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jrlines svg {
  color: var(--muted2);
  flex: 0 0 auto;
}
.jbusy {
  background: var(--hd-amber-tint, #FFF7E6);
  border: 1px solid var(--hd-amber-line, #FCD9A0);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--hd-orange-ink, #92400E);
}
.jrcard-acts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.jrcard-acts > :only-child {
  grid-column: 1 / -1;
}
.btn[aria-disabled=true] {
  color: var(--muted2);
  background: var(--hd-subtle, #F5F6F8);
  border-color: var(--line);
  cursor: default;
}
.jnav {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jnav:hover {
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--ink);
}
.jmonths {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .jmonths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jmonth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.jmonth-head b {
  font-size: 17px;
  line-height: 24px;
}
.jmonth-head span {
  width: 40px;
}
.jdow,
.jdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.jdow span {
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted2);
}
.jday {
  min-height: 40px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
}
.jday b {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}
.jday small {
  font-size: 10px;
  line-height: 12px;
  color: var(--muted2);
}
.jday.jout b {
  color: #C3C8D0;
  font-weight: 500;
}
.jday.jout {
  font-size: 13px;
  color: #C3C8D0;
}
.jday.part {
  background: var(--hd-green-tint2, #DCFCE7);
  border: 1.5px solid #86DCA5;
}
.jday.part b {
  color: var(--hd-green-ink, #166534);
}
.jday.part small {
  color: var(--hd-green-ink, #15803D);
}
.jday.full {
  background: #22C55E;
  border-color: #22C55E;
}
.jday.full b,
.jday.full small {
  color: #fff;
}
.jday.today {
  border: 2px solid var(--blue);
}
.jlegend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.jlegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jlegend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--hd-line2, #C3C8D0);
}
.jlegend i.full {
  background: #22C55E;
  border-color: #22C55E;
}
.jlegend i.part {
  background: var(--hd-green-tint2, #DCFCE7);
  border: 1.5px solid #86DCA5;
}
.jtable .otable td {
  vertical-align: top;
}
.jtable tr.jgroup th,
.jtable tr.jgroup td {
  text-align: left;
  padding: 14px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted2);
  background: var(--hd-subtle, #FAFBFC);
  border-top: 1px solid var(--line2);
}
.jtable tr.jrow {
  cursor: pointer;
}
.jtable tr.jrow.has-note td {
  border-bottom: 0;
}
.jtable tr.jnote td {
  border-top: 0;
  padding: 0 16px 12px 56px;
  cursor: pointer;
}
.jtable tr.jnote span {
  display: block;
  border-left: 3px solid var(--hd-blue-line, #93B9E8);
  background: var(--hd-blue-tint, #F1F6FD);
  border-radius: 0 8px 8px 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}
.jtable tr.jnote.closed span {
  border-left-color: #F87171;
  background: var(--hd-red-tint, #FEF2F2);
}
.jtable tr.jrow.closed,
.jtable tr.jnote.closed {
  cursor: default;
}
.jguest {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.jsrc {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.jsrc.tg {
  background: var(--hd-sky-tint, #E0F2FE);
  color: var(--hd-sky-ink, #0284C7);
}
.jsrc.wa {
  background: var(--hd-green-tint2, #DCFCE7);
  color: var(--hd-green-ink, #16A34A);
}
.jsrc.ab {
  background: var(--hd-red-tint, #FFE4E8);
  color: var(--hd-red-ink, #E11D48);
}
.jsrc.bk {
  background: var(--hd-blue-tint, #E0EAFF);
  color: var(--hd-blue-ink, #1E3A8A);
}
.jsrc.lock {
  background: var(--hd-red-tint, #FEE2E2);
  color: var(--hd-red-ink, #DC2626);
}
.jname {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
}
button.jname {
  cursor: pointer;
}
button.jname:hover b {
  color: var(--link);
}
.jname b {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.jname small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--muted2);
}
.jbadges {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.jbadge {
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 14px;
}
.jdate b {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.jdate small {
  font-size: 11px;
  color: var(--muted2);
}
.jobj {
  display: flex;
  flex-direction: column;
}
.jobj b {
  font-size: 14px;
  font-weight: 600;
}
.jobj small {
  font-size: 11px;
  color: var(--muted2);
}
.jmore {
  margin: 8px 0;
}
.jcards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jcards > .jcap {
  margin-top: 4px;
}
.jpcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--surf);
  box-shadow: var(--surf-edge), var(--surf-sh);
  text-align: left;
  color: var(--ink);
}
button.jpcard {
  cursor: pointer;
}
.jpcard.closed {
  border-color: var(--hd-red-line, #FECACA);
}
.jpc-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.jpc-top .jsrc {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.jpc-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.jpc-name b {
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}
.jpc-name small {
  font-size: 13px;
  color: var(--muted);
}
.jpc-top .jbadges {
  align-items: flex-end;
}
.jpc-top .jbadge {
  font-size: 11px;
  padding: 3px 8px;
}
.jpc-dates {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jpc-n {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  min-width: 44px;
}
.jpc-n b {
  font-size: 20px;
  line-height: 24px;
}
.jpc-n small {
  font-size: 11px;
  color: var(--muted2);
}
.jpc-d {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 3px;
  align-items: baseline;
}
.jpc-d b {
  font-size: 24px;
  line-height: 28px;
  font-weight: 800;
}
.jpc-d small {
  font-size: 11px;
  color: var(--muted2);
}
.jpc-d em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.jpc-obj {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jpc-obj b {
  font-size: 14px;
  font-weight: 600;
}
.jpc-ico {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--muted2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jpc-note {
  border-left: 3px solid var(--hd-blue-line, #93B9E8);
  background: var(--hd-blue-tint, #F1F6FD);
  border-radius: 0 8px 8px 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 18px;
}
.jpcard.closed .jpc-note {
  border-left-color: #F87171;
  background: var(--hd-red-tint, #FEF2F2);
}
.jkboard {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.jkboard .board-cols {
  gap: 12px;
}
.jcol {
  background: var(--hd-subtle2, #F0F1F3);
  border: 0;
  border-radius: 12px;
  padding: 8px;
  gap: 8px;
  min-width: 200px;
}
@media (max-width: 899px) {
  .jkboard .board-cols {
    width: max-content;
  }
  .jkboard .jcol {
    flex: 0 0 236px;
  }
}
.jcol-head {
  padding: 4px 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jcol-head > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jcol-head i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.jcol-head b {
  font-size: 15px;
}
.jcol-head small {
  font-size: 12px;
  color: var(--muted2);
  padding-left: 14px;
}
.jcol-head .n {
  font-size: 12px;
  font-weight: 700;
  background: var(--hd-surface, #fff);
  border-radius: 999px;
  padding: 0 7px;
  line-height: 18px;
  color: var(--muted);
}
.jkcard {
  background: var(--hd-surface, #fff);
  border: 1px solid var(--hd-blue-line, #DDE1E7);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jkcard.ext {
  border-style: dashed;
  background: var(--hd-subtle, #FAFBFC);
}
.jkcard.dragging {
  opacity: .5;
}
.jkcard[draggable=true] {
  cursor: grab;
}
.jk-open {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  min-width: 0;
}
button.jk-open {
  cursor: pointer;
}
.jk-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.jk-top b {
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
}
.jk-dates {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.jk-dates svg {
  color: var(--muted2);
}
.jk-sum {
  font-size: 14px;
}
.jk-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted2);
}
.jk-btn {
  align-self: flex-start;
  min-height: 40px;
  font-size: 13px;
  padding: 0 12px;
  background: var(--hd-subtle, #F5F6F8);
}
.jk-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}
.jk-two > :first-child {
  grid-column: 1 / -1;
}
.jk-two .btn {
  min-height: 40px;
  font-size: 13px;
  padding: 0 8px;
}
.jchip {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--hd-subtle2, #F0F1F3);
  color: var(--muted);
}
.jchip.ab {
  background: var(--hd-red-tint, #FFE4E8);
  color: var(--hd-red-ink, #BE123C);
}
.jchip.bk {
  background: var(--hd-blue-tint, #E0EAFF);
  color: var(--hd-blue-ink, #1E40AF);
}
.jchip.tg {
  background: var(--hd-sky-tint, #E0F2FE);
  color: var(--hd-sky-ink, #0369A1);
}
.jchip.wa {
  background: var(--hd-green-tint2, #DCFCE7);
  color: var(--hd-green-ink, #15803D);
}
.jchip.amber {
  background: var(--amber-soft);
  color: var(--hd-orange-ink, #92400E);
}
.jfoot {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted2);
}
.jsched {
  gap: 10px;
  padding: 0 0 12px;
  overflow: hidden;
}
.jsched > :not(.jsscroll) {
  margin: 0 14px;
}
.jstop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  flex-wrap: wrap;
}
.jsperiod {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.jsperiod b {
  font-size: 15px;
  white-space: nowrap;
}
.jsperiod .jnav {
  background: var(--hd-subtle2, #F0F1F3);
  border-radius: 999px;
}
.jtoday {
  min-height: 40px;
}
.jsdays button {
  min-width: 40px;
  padding: 0 10px;
}
.jsbanner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #F7C873;
  border-radius: 10px;
  background: var(--hd-amber-tint, #FFF9EB);
  color: var(--hd-orange-ink, #78350F);
  font-size: 13px;
}
.jsbanner b {
  font-size: 13px;
  color: var(--amber);
  white-space: nowrap;
}
.jsbanner span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jsbanner em {
  font-style: normal;
  font-weight: 600;
  color: var(--link);
  white-space: nowrap;
}
.jslegend {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.jslegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.jslegend i {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid;
}
.jsscroll {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.jsgrid {
  --name: 190px;
  min-width: 100%;
}
@media (max-width: 899px) {
  .jsgrid {
    width: calc(var(--days) * 19px);
  }
}
.jsrow {
  display: grid;
  grid-template-columns: var(--name) minmax(0, 1fr);
  border-bottom: 1px solid var(--line2);
}
@media (max-width: 899px) {
  .jsrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .jsrow .jsname {
    position: sticky;
    left: 0;
    width: calc(100vw - 32px);
    max-width: 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 2px;
  }
  .jsrow .jsname small {
    flex: 0 0 auto;
  }
  .jshead .jsname {
    display: none;
  }
  .jstop {
    flex-wrap: nowrap;
  }
  .jsperiod {
    gap: 0;
  }
  .jsperiod b {
    font-size: 14px;
  }
  .jsdays button {
    min-width: 36px;
    padding: 0 6px;
  }
}
.jsname {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  min-width: 0;
  color: var(--ink);
  background: var(--hd-surface, #fff);
}
@media (min-width: 900px) {
  .jsname {
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 1px solid var(--line2);
  }
}
.jsname b {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jsname small {
  font-size: 11px;
  color: var(--muted2);
}
.jsname small.green {
  color: var(--hd-green-ink, #15803D);
}
.jsrow.draft .jsname b {
  color: var(--muted2);
}
.jshead .jsname {
  font-size: 13px;
  font-weight: 700;
}
.jslane {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  min-height: 56px;
}
@media (max-width: 899px) {
  .jslane {
    min-height: 40px;
  }
}
.jsd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border-left: 1px solid var(--line2);
}
.jsd small {
  font-size: 12px;
  line-height: 14px;
  color: var(--muted2);
}
.jsd b {
  font-size: 15px;
  line-height: 20px;
}
@media (max-width: 899px) {
  .jsd b {
    font-size: 13px;
  }
  .jsd small {
    font-size: 9px;
  }
}
.jsd.we small,
.jsd.we b {
  color: var(--hd-red-ink, #DC2626);
}
.jsd.today b {
  color: var(--link);
}
.jsd.today small {
  color: var(--link);
}
.jsc {
  border: 0;
  border-left: 1px solid var(--line2);
  background: transparent;
  padding: 0;
  min-height: 100%;
}
button.jsc {
  cursor: cell;
}
button.jsc:hover {
  background: var(--blue-soft);
}
.jsc.we {
  background: var(--hd-red-tint, #FEF2F2);
}
.jsc.today {
  background: var(--hd-blue-tint, #EEF4FF);
}
.jsbar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  border-radius: 6px;
  border: 1px solid;
  border-left-width: 3px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  z-index: 1;
  text-align: left;
}
@media (max-width: 899px) {
  .jsbar {
    height: 22px;
    font-size: 11px;
    padding: 0 4px;
  }
}
.jsbar span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
button.jsbar {
  cursor: pointer;
  overflow: visible;
}
button.jsbar::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}
button.jsbar:hover {
  filter: brightness(.97);
  box-shadow: 0 0 0 2px var(--blue-line);
}
.jsbar.own,
.jslegend i.own {
  background: var(--hd-green-tint2, #DCF5E6);
  border-color: #22A05A;
  color: var(--hd-green-ink, #14532D);
}
.jsbar.airbnb,
.jsbar.ab,
.jslegend i.ab {
  background: var(--hd-red-tint, #FFE4E8);
  border-color: #E11D48;
  color: var(--hd-rose-ink, #9F1239);
}
.jsbar.booking,
.jsbar.bk,
.jslegend i.bk {
  background: var(--hd-blue-tint2, #DCE7FB);
  border-color: #2563EB;
  color: var(--hd-blue-ink, #1E3A8A);
}
.jsbar.ical {
  background: var(--hd-subtle2, #EEF0F3);
  border-color: #9AA1AE;
  color: var(--muted);
}
.jsbar.hold,
.jslegend i.hold {
  background:
    repeating-linear-gradient(
      135deg,
      var(--hd-amber-tint2, #FEF3C7) 0 6px,
      var(--hd-amber-tint2, #FDE68A) 6px 12px);
  border-color: #D97706;
  border-style: dashed;
  color: var(--hd-orange-ink, #78350F);
}
.jsbar.closed,
.jslegend i.closed {
  background:
    repeating-linear-gradient(
      135deg,
      var(--hd-subtle, #F3F4F6) 0 6px,
      var(--hd-subtle2, #E5E7EB) 6px 12px);
  border-color: #9CA3AF;
  border-style: dashed;
  color: var(--muted);
}
.jsbar.clash,
.jslegend i.clash {
  background:
    repeating-linear-gradient(
      135deg,
      var(--hd-red-tint, #FEE2E2) 0 6px,
      var(--hd-red-tint2, #FECACA) 6px 12px);
  border-color: #DC2626;
  color: var(--hd-red-ink, #991B1B);
}
.jsbar.cutl {
  border-left-width: 1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jsbar.cutr {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.jsdraft {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted2);
  pointer-events: none;
}
.sheet-back.sub {
  z-index: 110;
}
.sheet.sheet-booking {
  gap: 14px;
  padding-bottom: 0;
}
@media (min-width: 900px) {
  .sheet-back.as-drawer {
    justify-content: flex-end;
    align-items: stretch;
  }
  .sheet-back.as-drawer > .sheet {
    max-width: 440px;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding: 20px 24px 0;
  }
}
.bk-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 48px;
}
.bk-tags small {
  align-self: center;
  font-size: 13px;
  color: var(--muted2);
}
@media (min-width: 900px) {
  .as-drawer .bk-head {
    margin: 0 -24px;
    padding: 0 72px 16px 24px;
    border-bottom: 1px solid var(--line2);
  }
  .as-drawer .bk-x {
    right: 24px;
  }
}
.bk-x {
  position: absolute;
  top: 0;
  right: 0;
}
.bk-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bk-head h2 {
  font-size: 22px;
  line-height: 28px;
}
.sheet .bk-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.bk-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bk-contact .btn {
  min-height: 44px;
  padding: 0 8px;
}
.bk-tg {
  background: var(--hd-blue-tint, #E8F3FD);
  border-color: var(--hd-blue-line, #B8D8F5);
  color: var(--hd-blue-ink, #1677C9);
}
.bk-tg:hover {
  color: var(--hd-blue-ink, #1677C9);
  background: var(--hd-blue-tint2, #DCEDFC);
}
.bk-wa {
  background: var(--hd-green-tint, #E7F8EE);
  border-color: var(--hd-green-line, #A7E3BF);
  color: var(--hd-green-ink, #15803D);
}
.bk-wa:hover {
  color: var(--hd-green-ink, #15803D);
  background: var(--hd-green-tint2, #DBF4E5);
}
.bk-tg.solid {
  background: #1F8FE0;
  border-color: #1F8FE0;
  color: #fff;
}
.bk-wa.solid {
  background: #22A55A;
  border-color: #22A55A;
  color: #fff;
}
.bk-cap {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.bk-table {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
}
.bk-table > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line2);
}
.bk-table > div:first-child {
  border-top: 0;
}
.bk-table dt {
  font-size: 14px;
  color: var(--muted);
}
.bk-table dd {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bk-table dd small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.bk-table dd small.inl {
  display: inline;
}
.bk-table dd a {
  font-weight: 600;
}
.bk-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bk-src i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22A05A;
}
.bk-src i.ab {
  background: #E11D48;
}
.bk-src i.bk {
  background: #2563EB;
}
.bk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.bk-steps li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
}
.bk-steps li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.bk-steps li:first-child::before {
  display: none;
}
.bk-steps li.done::before,
.bk-steps li.cur::before {
  background: #15803D;
}
.bk-steps i {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--hd-line2, #C9CED6);
  background: var(--hd-surface, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-steps li.done i {
  background: #15803D;
  border-color: #15803D;
  color: #fff;
}
.bk-steps li.done {
  color: var(--ink);
}
.bk-steps li.cur i {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px var(--blue);
}
.bk-steps li.cur {
  color: var(--link);
  font-weight: 600;
}
.bk-steps li.cur.red i {
  border-color: #DC2626;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #DC2626;
}
.bk-steps li.cur.red {
  color: var(--hd-red-ink, #DC2626);
}
.sheet .bk-note {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  background: var(--hd-subtle, #F5F6F8);
  border-radius: 10px;
  padding: 10px 12px;
}
.bk-foot {
  position: sticky;
  bottom: 0;
  margin: auto -16px 0;
  padding: 12px 16px calc(16px + var(--cab-bottom));
  background: var(--hd-surface, #fff);
  border-top: 1px solid var(--line2);
  display: flex;
  gap: 8px;
}
@media (min-width: 900px) {
  .bk-foot {
    margin: auto -24px 0;
    padding: 16px 24px 24px;
  }
}
.bk-foot > .btn {
  flex: 1 1 0;
  min-height: 44px;
}
.bk-foot > .bk-more {
  flex: 0 0 44px;
  width: 44px;
}
.bk-cancel,
.bk-danger {
  color: var(--hd-red-ink, #DC2626);
  border-color: var(--hd-red-line, #F3B4B4);
}
.bk-cancel:hover {
  color: var(--hd-red-ink, #B91C1C);
  background: var(--hd-red-tint, #FEF2F2);
}
.bk-danger {
  background: var(--hd-red-tint, #FEF2F2);
}
.bk-danger:hover {
  background: var(--hd-red-tint, #FEE2E2);
  color: var(--hd-red-ink, #B91C1C);
}
@media (max-width: 899px) {
  .bk-acts .bk-danger {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
  }
  .bk-acts .bk-danger svg {
    display: none;
  }
  .bk-acts .btn-light {
    background: var(--hd-surface, #fff);
    border-color: var(--field);
    color: var(--ink);
  }
}
.pop-two-ico {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.pop .pop-item > span.pop-two {
  align-items: flex-start;
  gap: 0;
}
.pop .pop-item > span.pop-two small {
  color: var(--muted2);
}
.pop-two-ico > svg {
  margin-top: 8px;
  flex: 0 0 auto;
}
.pop-item.red,
.bk-item.red {
  color: var(--hd-red-ink, #DC2626);
}
.bk-pcap {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
}
.sheet.sheet-menu {
  gap: 4px;
  padding-top: 8px;
}
.bk-grip {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: var(--hd-subtle3, #D3D7DE);
  margin-bottom: 8px;
}
.sheet .bk-who {
  font-size: 13px;
  color: var(--muted);
}
.sheet .bk-who b {
  color: var(--ink);
}
.bk-item {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid var(--line2);
  background: transparent;
  text-align: left;
  color: var(--ink);
}
.bk-item .pop-two b {
  font-size: 15px;
}
.bk-item .pop-two small {
  font-size: 12px;
  color: var(--muted2);
}
.bk-close {
  margin: 8px 0 calc(16px + var(--cab-bottom));
  background: var(--hd-subtle, #F3F4F6);
  border-color: var(--hd-line, #F3F4F6);
}
@media (min-width: 900px) {
  .sheet.sheet-dialog {
    max-width: 480px;
  }
}
.bk-dlg-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bk-dlg-head > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bk-dlg-ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--hd-red-tint, #FEE2E2);
  color: var(--hd-red-ink, #DC2626);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-list {
  list-style: none;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bk-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--line2);
  font-size: 14px;
  line-height: 20px;
}
.bk-list li:first-child {
  border-top: 0;
}
.bk-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--muted);
}
.bk-sum {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 14px;
}
.bk-sum > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}
.bk-sum > div span {
  color: var(--muted);
}
.bk-sum > div b {
  font-weight: 500;
  text-align: right;
}
.bk-call {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  width: 340px;
  max-width: 100%;
}
.bk-call small {
  font-size: 12px;
  color: var(--muted2);
}
.bk-call-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bk-call-num b {
  font-size: 20px;
  line-height: 26px;
  white-space: nowrap;
}
.bk-call-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.bk-call-two .btn {
  padding: 0 8px;
  font-size: 13px;
}
.pop:has(.bk-call) {
  max-width: min(360px, calc(100vw - 16px));
}
.bk-call .pop-note {
  margin: 0;
  min-width: 0;
  width: auto;
}
.field-hint.ok {
  color: var(--hd-green-ink, #15803D);
}
.field-hint.warn {
  color: var(--amber);
}
.field-hint.bad {
  color: var(--hd-red-ink, #DC2626);
}
.nb-price {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.nb-price > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.nb-price label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nb-price input {
  width: 140px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--field);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}
.jempty img {
  height: 240px;
}
@media (min-width: 900px) {
  .jempty {
    min-height: calc(100vh - 120px);
  }
}
@media (max-width: 899px) {
  .jempty img {
    height: 200px;
  }
}
.jobj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.jwarn-box:empty {
  display: none;
}
.jwarn b {
  display: block;
  font-weight: 600;
}
.jwarn ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.jwarn p {
  margin: 6px 0 0;
}