/* 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; }

/* v3.7.11 (F-200) · the slot grid.
   NAMED cw-hslot, NOT cw-slot: the manager's Bookings screen has owned .cw-slot for a room
   strip since v3.1, and reusing it would have restyled every row of that screen. Same family as
   gotcha 36, caught by reading the file that already used the name rather than by a guard:
   css-clash.mjs looks across stylesheets and at bare modifiers, not at one file reusing a name. */
.cw-hgrid{margin:8px 0 4px}
.cw-hgrid-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.cw-hgrid-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.cw-hslot{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;font:inherit;color:var(--ink);transition:.12s}
.cw-hslot b{font-size:12.5px}
.cw-hslot span{font-size:10px;color:var(--mut)}
.cw-hslot:hover:not(.cw-hslot-taken){border-color:var(--violet);background:rgba(91,33,232,.06)}
.cw-hslot-on{border-color:var(--violet);background:rgba(91,33,232,.13);box-shadow:0 0 0 1px var(--violet) inset}
.cw-hslot-taken{opacity:.55;cursor:not-allowed;background:var(--canvas);border-style:dashed}
.cw-hslot-taken b{text-decoration:line-through}