/* Incubate360 v3.1: THE COWORKING DESK.

   Every class in this file starts with `cw-`. That is not a style preference, it is the fix
   for the bug of 2026-08-21: a bare `.lg` in the sign-in stylesheet landed on every wide
   dialog in the product, because a short generic class name is a name somebody else has
   already taken. A prefix makes that impossible, and `scripts/css-clash.mjs` keeps it honest.

   Colours come from the v2 palette variables only. Nothing here hard-codes #fff, because a
   hard-coded white is a dark-mode bug waiting to happen. */

/* ─────────── the floor plan ─────────── */
.cw-floors { display: grid; gap: 14px; }
.cw-floor { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.cw-floor-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--mut-bg); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.cw-floor-t { font-weight: 700; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cw-floor-s { font-size: 12.3px; color: var(--mut); }
.cw-floor-b { padding: 14px 16px; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.cw-cell {
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px;
  background: var(--card); cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s; min-width: 0;
}
.cw-cell:hover { border-color: var(--violet); box-shadow: 0 2px 10px rgba(91, 33, 232, .11); }
.cw-cell-n { font-weight: 650; font-size: 13.2px; color: var(--ink); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-cell-w { font-size: 11.8px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-cell-r { font-size: 11.8px; font-weight: 650; color: var(--ink); margin-top: 5px; }
.cw-cell-free { border-style: dashed; }
.cw-cell-taken { box-shadow: inset 3px 0 0 var(--cyan); }
.cw-cell-fix { box-shadow: inset 3px 0 0 #E0A800; opacity: .78; }
.cw-cell-room { box-shadow: inset 3px 0 0 var(--blue); }

/* ─────────── the waiting list on the manager's home ─────────── */
.cw-wait { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cw-wait-b {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; text-align: left; width: 100%;
}
.cw-wait-b:hover { border-color: var(--violet); }
.cw-wait-n { font-size: 21px; font-weight: 750; line-height: 1; letter-spacing: -.5px; }
.cw-wait-l { font-size: 12.6px; color: var(--mut); line-height: 1.35; min-width: 0; }
.cw-clear {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--mut-bg);
}
.cw-clear-t { font-weight: 700; font-size: 15px; color: var(--ink); }
.cw-clear-s { font-size: 13px; color: var(--mut); margin-top: 2px; }

/* ─────────── the customer's to-do list ─────────── */
.cw-todo { display: grid; gap: 10px; }
.cw-todo-i {
  display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card); min-width: 0;
}
.cw-todo-danger { box-shadow: inset 4px 0 0 #D64545; }
.cw-todo-warn { box-shadow: inset 4px 0 0 #E0A800; }
.cw-todo-ok { box-shadow: inset 4px 0 0 var(--cyan); }
.cw-todo-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; background: var(--mut-bg); color: var(--violet); }
.cw-todo-b { flex: 1; min-width: 0; }
.cw-todo-t { font-weight: 650; font-size: 14px; color: var(--ink); }
.cw-todo-s { font-size: 12.8px; color: var(--mut); margin-top: 3px; line-height: 1.5; }

/* ─────────── the day calendar ─────────── */
.cw-day { display: grid; gap: 9px; }
.cw-slot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.cw-slot-n { font-weight: 650; font-size: 13.6px; color: var(--ink); }
.cw-slot-s { font-size: 12.2px; color: var(--mut); margin-top: 2px; }
.cw-bars { display: flex; gap: 3px; margin-top: 8px; height: 22px; }
.cw-bar { flex: 1; border-radius: 3px; background: var(--mut-bg); position: relative; min-width: 0; }
.cw-bar-busy { background: var(--violet); opacity: .82; }
.cw-bar-l { font-size: 9.5px; color: var(--mut); text-align: center; margin-top: 3px; }
.cw-hours { display: flex; gap: 3px; }
.cw-hour { flex: 1; text-align: center; font-size: 9.5px; color: var(--mut); min-width: 0; }

/* ─────────── the form used by every dialog in this module ─────────── */
.cw-form { display: grid; gap: 13px; }
.cw-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.cw-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cw-fld { display: grid; gap: 5px; min-width: 0; }
.cw-fld > label { font-size: 12.4px; font-weight: 600; color: var(--ink); display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; }
.cw-hint { font-size: 11.8px; color: var(--mut); line-height: 1.5; }
.cw-err { font-size: 11.9px; color: #D64545; font-weight: 550; }
.cw-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 10.6px;
  font-weight: 600; color: var(--mut); background: var(--mut-bg); border-radius: 20px;
  padding: 2px 8px; }
.cw-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 11px;
  background: var(--mut-bg); font-size: 13px; color: var(--ink); line-height: 1.55;
}
.cw-banner-bad { background: rgba(214, 69, 69, .1); color: #B03030; }
.cw-banner-ok { background: rgba(0, 191, 179, .12); color: var(--ink); }

/* ─────────── money ─────────── */
.cw-amt { font-variant-numeric: tabular-nums; font-weight: 650; }
.cw-amt-due { color: #D64545; }
.cw-amt-ok { color: #12876F; }
.cw-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--mut-bg); flex-wrap: wrap;
}
.cw-total-l { font-size: 13px; color: var(--mut); font-weight: 600; }
.cw-total-v { font-size: 19px; font-weight: 750; color: var(--ink); letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; }
.cw-lines { display: grid; gap: 7px; }
.cw-line { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink); }
.cw-line-m { color: var(--mut); }

/* ─────────── the agreement, read on screen ─────────── */
.cw-doc {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--card);
  max-height: 400px; overflow: auto; font-size: 13.3px; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap; font-family: inherit;
}
.cw-sign {
  display: grid; gap: 11px; padding: 14px; border-radius: 12px; background: var(--mut-bg);
  border: 1px dashed var(--line);
}

/* ─────────── the open booking link, which has no app shell around it ─────────── */
.cw-pub { min-height: 100vh; background: var(--canvas); padding: 0 0 60px; }
.cw-pub-top { background: var(--navy); color: #F3F6FF; padding: 26px 20px 30px; }
.cw-pub-wrap { max-width: 940px; margin: 0 auto; padding: 0 18px; }
.cw-pub-h1 { font-size: 25px; font-weight: 750; letter-spacing: -.5px; margin: 0 0 6px; }
.cw-pub-sub { font-size: 14px; opacity: .82; line-height: 1.6; margin: 0; }
.cw-pub-body { max-width: 940px; margin: -18px auto 0; padding: 0 18px; }
.cw-pub-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  padding: 20px; margin-bottom: 16px;
}
.cw-pub-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.cw-pub-day {
  flex: none; min-width: 66px; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 8px; text-align: center; cursor: pointer; background: var(--card);
}
.cw-pub-day.cw-on { border-color: var(--violet); background: rgba(91, 33, 232, .08); }
.cw-pub-day-d { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cw-pub-day-m { font-size: 10.6px; color: var(--mut); margin-top: 2px; }
.cw-pub-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cw-pub-room {
  border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--card);
  cursor: pointer; min-width: 0;
}
.cw-pub-room.cw-on { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(91, 33, 232, .15); }
.cw-pub-room.cw-off { opacity: .5; cursor: not-allowed; }
.cw-pub-room-n { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.cw-pub-room-s { font-size: 12.3px; color: var(--mut); line-height: 1.5; }
.cw-pub-room-r { font-size: 13.4px; font-weight: 700; color: var(--violet); margin-top: 8px; }
.cw-pub-foot { text-align: center; font-size: 12.3px; color: var(--mut); padding: 22px 18px 0; line-height: 1.6; }
.cw-pub-ok { text-align: center; padding: 30px 18px; }
.cw-pub-ok-t { font-size: 21px; font-weight: 750; color: var(--ink); margin-bottom: 8px; }
.cw-pub-ref {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px; background: var(--mut-bg);
  border-radius: 10px; padding: 10px 18px; margin: 12px 0; color: var(--ink);
}

/* ─────────── small shared pieces ─────────── */
.cw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cw-chip {
  font-size: 11.7px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: var(--mut-bg); color: var(--mut); border: 1px solid transparent; cursor: pointer;
}
.cw-chip.cw-on { background: rgba(91, 33, 232, .11); color: var(--violet); border-color: rgba(91, 33, 232, .25); }
.cw-note { font-size: 12.6px; color: var(--mut); line-height: 1.6; }
.cw-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.cw-kv-k { font-size: 11.7px; color: var(--mut); font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 3px; }
.cw-kv-v { font-size: 13.6px; color: var(--ink); font-weight: 600; word-break: break-word; }
.cw-pic { width: 54px; height: 54px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--line); background: var(--mut-bg); }
.cw-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cw-head-b { min-width: 0; flex: 1; }
.cw-head-n { font-size: 19px; font-weight: 750; color: var(--ink); letter-spacing: -.4px; }
.cw-head-s { font-size: 13px; color: var(--mut); margin-top: 3px; }
.cw-scroll { overflow-x: auto; }
.cw-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cw-mini-b { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px;
  background: var(--card); min-width: 0; }
.cw-mini-l { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.cw-mini-v { font-size: 17px; font-weight: 750; color: var(--ink); margin-top: 3px;
  letter-spacing: -.3px; font-variant-numeric: tabular-nums; }