/* The room, drawn to scale (js/occasi-desk-room.js): the couple's desktop Seating, 1024 px and wider only.
   The approved mock-up's room (couple-07-seating.html): a paper room with a dot every metre, tables as soft discs with a
   chair for each seat (navy = coming, gold = waiting for a reply, dashed = free), areas as soft labelled panels.
   Nothing under 12 px. Loaded with media="(min-width:1024px)". */
.dk-couple .dkr-col{display:grid;gap:14px;min-width:0;align-content:start}
.dk-couple .dkr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.dk-couple .dkr-size{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--dk-muted)}
.dk-couple .dkr-size input{width:64px;height:32px;padding:0 8px;border:1px solid var(--dk-line2);border-radius:9px;background:var(--dk-paper);font:500 13px/1 var(--dk-sans);color:var(--dk-ink);text-align:right}
.dk-couple .dkr-add select{height:32px;padding:0 30px 0 12px;border:1px solid var(--dk-line2);border-radius:8px;background-color:var(--dk-paper);font:600 13px/1 var(--dk-sans);color:var(--dk-ink);max-width:100%}
.dk-couple .dkr[hidden],.dk-couple .seat-tables[hidden]{display:none!important}
.dk-couple .dkr{min-width:0;overflow-x:auto}   /* a very large room keeps its scale and scrolls sideways (js MIN_PPM) */
.dk-couple .dkr-room{position:relative;width:100%;background-color:var(--dk-paper);border:1px solid var(--dk-line);border-radius:var(--dk-r);overflow:hidden;
  background-image:radial-gradient(var(--dk-line2) 1px,transparent 1.2px);background-size:var(--m) var(--m);background-position:calc(var(--m) / 2) calc(var(--m) / 2)}
.dk-couple .dkr-t{position:absolute;transform:translate(-50%,-50%);width:0;height:0;z-index:2}
.dk-couple .dkr-t.drop-over .dkr-disc{outline:3px solid var(--dk-gold);outline-offset:3px}
.dk-couple .dkr-disc{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-content:center;gap:2px;text-align:center;border-radius:50%;background:var(--dk-soft);border:1.5px solid var(--dk-line2);color:var(--dk-ink);cursor:grab;touch-action:none;padding:0}
.dk-couple .dkr-disc.is-long{border-radius:10px}
.dk-couple .dkr-disc b{font:500 17px/1 var(--dk-serif);font-variant-numeric:lining-nums}
.dk-couple .dkr-disc small{font-size:12px;line-height:1.1;color:var(--dk-muted);white-space:nowrap}
.dk-couple .dkr-disc[data-table]{border-color:var(--dk-gold);background:var(--dk-gold-soft);cursor:pointer}
.dk-couple .is-moving{z-index:5}.dk-couple .is-moving .dkr-disc,.dk-couple .dkr-area.is-moving{cursor:grabbing;box-shadow:0 6px 16px rgba(29,42,68,.16)}
.dk-couple .dkr-chair{position:absolute;width:var(--c,26px);height:var(--c,26px);margin:calc(var(--c,26px) / -2) 0 0 calc(var(--c,26px) / -2);border-radius:50%;display:grid;place-items:center;padding:0;box-sizing:border-box;
  font:600 12px/1 var(--dk-sans);letter-spacing:-.02em;background:var(--dk-paper);border:1.5px dashed var(--dk-line2);color:var(--dk-faint);cursor:pointer}
.dk-couple .dkr-chair.is-in{background:var(--dk-navy);border:1.5px solid var(--dk-navy);color:var(--dk-on-navy);cursor:grab}
.dk-couple .dkr-chair.is-wait{background:var(--dk-gold);border:1.5px solid var(--dk-gold);color:var(--dk-navy);cursor:grab}
/* chairs drawn small (a large room, a narrow window): no initials (they would go under 12 px); the name is in the label */
.dk-couple .dkr-room.is-tiny .dkr-chair{color:transparent}
.dk-couple .dkr-disc.is-small small{display:none}
/* what the table cards say (allergy, kept apart, too many), in the room: a marker, the words on hover and focus */
.dk-couple .dkr-flag{position:absolute;z-index:3;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--dk-sans);background:var(--dk-warn);color:#fff;pointer-events:none}
.dk-couple .dkr-flag.is-sev{background:var(--dk-navy);color:var(--dk-on-navy);box-shadow:0 0 0 2px var(--dk-warn)}
.dk-couple .dkr-tip{position:absolute;left:0;bottom:var(--o);transform:translateX(-50%);z-index:6;display:none;width:max-content;max-width:240px;padding:8px 10px;border-radius:9px;background:var(--dk-ink);color:#fff;font:500 12px/1.35 var(--dk-sans);text-align:left;pointer-events:none}
.dk-couple .dkr-tip.is-below{bottom:auto;top:var(--o)}
.dk-couple .dkr-tip.is-l{left:-24px;transform:none}           /* near a side wall the words open inwards, never cut off */
.dk-couple .dkr-tip.is-r{left:auto;right:-24px;transform:none}
.dk-couple .dkr-t:hover .dkr-tip,.dk-couple .dkr-t:focus-within .dkr-tip{display:block}
.dk-couple .dkr-t:hover,.dk-couple .dkr-t:focus-within{z-index:5}
.dk-couple .dkr-sev{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:13px;color:var(--dk-warn)}
.dk-couple .dkr-sev span{display:inline-flex;align-items:center;gap:6px}
.dk-couple .dkr-sev b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--dk-navy);color:var(--dk-on-navy);box-shadow:0 0 0 2px var(--dk-warn);font-size:12px}
/* the same strongest level on the app's table cards (Tables view), as on the phone */
.dk-couple .tcard .tsev{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:3px 10px;border-radius:6px;background:var(--dk-warn-bg);color:var(--dk-warn);font-size:13px;font-weight:600}
.dk-couple .dkr-chair.drop-over{outline:3px solid var(--dk-gold);outline-offset:1px}
.dk-couple .dkr-chair:focus-visible,.dk-couple .dkr-disc:focus-visible,.dk-couple .dkr-area:focus-visible{outline:2px solid var(--dk-gold);outline-offset:2px}
.dk-couple .dkr-area{position:absolute;transform:translate(-50%,-50%);z-index:1;display:grid;place-content:center;gap:2px;text-align:center;padding:2px 6px;border:1.5px solid var(--dk-line2);border-radius:10px;background:var(--dk-soft);color:var(--dk-muted);cursor:grab;touch-action:none;overflow:hidden}
.dk-couple .dkr-area span{font-size:13px;font-weight:500;line-height:1.15;color:var(--dk-ink2);overflow-wrap:anywhere}
.dk-couple .dkr-area small{font-size:12px;line-height:1.1}
.dk-couple .dkr-area.is-sel{border-color:var(--dk-gold);background:var(--dk-gold-soft)}
.dk-couple .dkr-guides{position:absolute;inset:0;pointer-events:none;z-index:4}
.dk-couple .dkr-guides i{position:absolute;background:transparent}
.dk-couple .dkr-guides i.v{top:0;bottom:0;border-left:1px dashed var(--dk-mari);opacity:.6}
.dk-couple .dkr-guides i.h{left:0;right:0;border-top:1px dashed var(--dk-mari);opacity:.6}
.dk-couple .dkr-scale{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12px;color:var(--dk-muted);pointer-events:none}
.dk-couple .dkr-scale i{display:block;height:6px;border:1.5px solid var(--dk-muted);border-top:0}
.dk-couple .dkr-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;color:var(--dk-muted);font-size:14px}
.dk-couple .dkr-empty p{margin:0;max-width:40ch}
.dk-couple .dkr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:13px;color:var(--dk-muted)}
.dk-couple .dkr-legend span{display:inline-flex;align-items:center;gap:7px}
.dk-couple .dkr-legend .dkr-hint{margin-left:auto}
.dk-couple .dkr-k{display:inline-block;width:14px;height:14px;border-radius:50%;box-sizing:border-box}
.dk-couple .dkr-k.in{background:var(--dk-navy)}.dk-couple .dkr-k.wait{background:var(--dk-gold)}.dk-couple .dkr-k.free{background:var(--dk-paper);border:1.5px dashed var(--dk-line2)}
.dk-couple .dkr-warn{margin:10px 0 0;padding:10px 14px;list-style:none;border-radius:var(--dk-r-sm);background:var(--dk-warn-bg);color:var(--dk-warn);font-size:13px;display:grid;gap:4px}
.dk-couple .dkr-ok{margin:10px 0 0;font-size:13px;color:var(--dk-ok)}
.dk-couple .dkr-edit{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-top:12px;padding:12px 14px;border:1px solid var(--dk-gold-line);border-radius:var(--dk-r-sm);background:var(--dk-paper)}
.dk-couple .dkr-edit label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--dk-muted)}
.dk-couple .dkr-edit input{height:32px;padding:0 10px;border:1px solid var(--dk-line2);border-radius:9px;font:500 13px/1 var(--dk-sans);color:var(--dk-ink);background:var(--dk-paper)}
.dk-couple .dkr-edit input[type=number]{width:84px}
.dk-couple .dkr-edit input[type=text]{width:180px}
/* Room layout keeps the room to scale: below 1440 px it takes the page's full width above the "Not seated" list; from 1440 px
   the list beside it is a little narrower (340 px, as in the Tables view, so its search and filters fit). (The app's Tables view keeps its own columns.) */
@media (max-width:1439.98px){
  .dk-couple #seat-root .seat-split:has(> .dkr-col > .dkr:not([hidden])){grid-template-columns:minmax(0,1fr)}
  .dk-couple #seat-root .seat-split > .dkr-col:has(> .dkr:not([hidden])){order:-1}
  .dk-couple #seat-root .seat-split:has(> .dkr-col > .dkr:not([hidden])) > .seat-pool{position:static;max-height:none}
}
@media (min-width:1440px){
  .dk-couple #seat-root .seat-split:has(> .dkr-col > .dkr:not([hidden])){grid-template-columns:340px minmax(0,1fr)}   /* as the Tables view; 260 spilled the list's heading and search by 34 px (P1 HOLD) */
}