/* Desk 17: who you are, your target, one chat, one next step. */
.desk { position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; gap:10px; width:min(780px,100%); margin:0 auto; padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 12px); pointer-events:auto; color:var(--paper); font-family:var(--font); }
.desk button { font-family:inherit; cursor:pointer; }
.desk button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.desk-bar { min-height:44px; display:flex; align-items:center; font:500 12px var(--mono); letter-spacing:.14em; color:var(--gold); flex-shrink:0; }
.desk-bar small { margin-left:10px; color:var(--muted); font-size:11px; }
.desk-label { display:block; margin-bottom:3px; font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.desk-status { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; flex-shrink:0; }
.desk-persona,.desk-target { padding:10px 12px; background:#172322f2; border:1px solid var(--line); border-radius:6px; }
.desk-persona strong,.desk-target strong { font-size:15px; }
.desk-persona p { margin:3px 0 0; font-size:12px; line-height:1.45; color:#b9c3bb; }
.desk-target strong small { font-weight:400; font-size:12px; color:var(--muted); }
.lead-chips { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 0; padding:0; list-style:none; }
.lead-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:1px solid var(--line); border-radius:12px; font-size:12px; color:#c9d2cb; white-space:nowrap; }
.lead-chip small { font-size:10px; color:var(--muted); }
.lead-chip.now { border-color:var(--gold); color:var(--gold); }
.lead-chip.passed { border-color:#a7c7b388; color:#a7c7b3; }
.lead-chip.warned { border-color:#e6c07a88; color:#e6c07a; }
.lead-chip.lost { border-color:#d39a8588; color:var(--danger); }
.desk-chat { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#f4f6f1; color:#1d2a27; border-radius:8px; }
.lead-card { padding:10px 14px; background:#e3e9e0; border-bottom:1px solid #cfd8cc; flex-shrink:0; }
.lead-name { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lead-card h2 { margin:0; font-size:17px; font-weight:600; }
.lead-card h2:focus { outline:none; }
.lead-card p { margin:3px 0 0; font-size:13px; line-height:1.4; color:#3f4f49; }
.lead-card .lead-note { font-size:12px; color:#6b5820; }
.trust { display:inline-flex; align-items:center; gap:4px; font:500 11px var(--mono); color:#51625b; white-space:nowrap; }
.trust i { width:9px; height:9px; border:1.5px solid #51625b; border-radius:50%; }
.trust i.on { background:#16745e; border-color:#16745e; }
.desk-log { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:7px; padding:12px 14px; }
.desk-day { align-self:center; margin:3px 0; padding:3px 10px; background:#e3e9e0; border-radius:10px; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#62736c; flex-shrink:0; }
.desk-message { max-width:86%; align-self:flex-start; padding:9px 12px; background:#fff; border-radius:0 10px 10px; box-shadow:0 1px 1px #0001; flex-shrink:0; }
.desk-message.out { align-self:flex-end; background:#d1efc6; border-radius:10px 0 10px 10px; }
.desk-message p { margin:0; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.desk-note { align-self:center; margin:2px 0; font-size:12px; text-align:center; color:#51625b; flex-shrink:0; }
.desk-tan { margin:4px 0 0; padding:9px 12px; background:#f7e9e4; border-left:3px solid #b4493a; color:#4d2a22; font-size:14px; line-height:1.45; flex-shrink:0; }
.desk-typing { display:flex; align-items:center; gap:5px; padding:12px 13px; }
.desk-typing i { width:7px; height:7px; border-radius:50%; background:#8b9c92; animation:typing-dot 1.1s ease-in-out infinite; }
.desk-typing i:nth-child(2) { animation-delay:.18s; }
.desk-typing i:nth-child(3) { animation-delay:.36s; }
.desk-task { flex-shrink:0; max-height:54%; overflow:auto; padding:2px; }
.task-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:8px; }
.task-head strong { font-size:16px; }
.desk-samples { min-height:44px; padding:0 14px; background:none; border:1px solid var(--gold); border-radius:6px; color:var(--gold); font-size:13px; font-weight:500; flex-shrink:0; }
/* Plain blocks, not a grid: on a real iPhone the grid rows kept their old height and the text spilled out of the boxes. */
.desk-option { display:block; width:100%; min-height:48px; padding:10px 12px; background:#1c2a28f2; border:1px solid #ffffff2b; border-radius:6px; color:var(--paper); font-size:15px; line-height:1.4; text-align:left; }
.desk-option + .desk-option { margin-top:7px; }
.desk-option:hover { border-color:var(--gold); }
.desk-option.warn { border-style:dashed; border-color:#e6c07a99; }
.desk-option small { display:block; margin-bottom:3px; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#e6c07a; }
.desk-primary { width:100%; min-height:50px; padding:12px 16px; background:var(--gold); border-radius:6px; color:#17201f; font-size:15px; font-weight:600; }
.desk-wait { margin:0; padding:16px 0; text-align:center; font-size:13px; color:var(--muted); }
.samples-intro { margin:0 0 12px; }
.samples { margin:0; display:grid; gap:12px; }
.samples dt { font-weight:600; color:var(--gold); }
.samples dd { margin:3px 0 0; line-height:1.55; }
.samples-never { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--danger); }
@media(min-width:700px) and (min-height:521px) { .desk-options{display:grid;grid-template-columns:1fr 1fr;gap:7px} .desk-option + .desk-option{margin-top:0} }
@media(max-width:600px) {
  .desk { gap:7px; padding:calc(env(safe-area-inset-top) + 4px) 8px calc(env(safe-area-inset-bottom) + 8px); }
  .desk-bar { display:none; }
  .desk-status { display:block; }
  .desk-persona { min-height:44px; padding:6px 100px 6px 10px; }
  .desk-target { margin-top:6px; padding:6px 10px; }
  .desk-persona .desk-label,.desk-target .desk-label { display:inline; margin:0 8px 0 0; }
  .desk-persona p { margin:2px 0 0; font-size:12px; }
  .lead-chips { margin-top:5px; }
  .lead-card { padding:8px 12px; }
  .desk-option { padding:8px 11px; font-size:14px; }
  .desk .game-pause { top:calc(env(safe-area-inset-top) + 5px); }
}
/* A phone held sideways: who you are and the chat on the left, the task and its options down the whole right side. */
@media(max-height:520px) and (min-width:601px) {
  .desk { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:6px 12px; width:100%; padding:8px max(14px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(14px,env(safe-area-inset-left)); }
  .desk-bar { display:none; }
  .desk-status { grid-column:1; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:6px 10px; background:#172322f2; border:1px solid var(--line); border-radius:6px; }
  .desk-persona,.desk-target { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; padding:0; background:none; border:0; }
  .desk-label { margin:0; }
  .desk-persona p { display:none; }
  .lead-chips { margin:0; }
  .lead-card { padding:7px 12px; }
  .desk-chat { grid-column:1; grid-row:2; }
  .desk-task { grid-column:2; grid-row:1 / 3; max-height:none; }
  .task-head { min-height:44px; padding-right:54px; align-items:center; }
  .desk-option { min-height:44px; padding:7px 11px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .desk-typing i{animation:none} }

/* The review after ten nights. */
.night-ending .panel-body>p { font-size:16px; line-height:1.65; margin:0 0 12px; }
.debt-slip { margin:20px 0 6px; padding:14px 16px; border:1px solid var(--line); font:13px/1.5 var(--mono); }
.debt-slip>div { display:flex; justify-content:space-between; gap:14px; padding:3px 0; }
.debt-slip dd { margin:0; }
.debt-slip .total { margin-top:8px; padding-top:9px; border-top:1px solid var(--line); color:var(--gold); font-weight:600; }
.night-ending .panel-body>.slip-note,.night-ending .panel-body>.safety-note { font-size:13px; line-height:1.6; color:var(--muted); }
.ending-people.three { grid-template-columns:1fr; }
.ending-people.three .person-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ending-people.three h3 { margin:0; font-size:16px; }
.ending-people.three p { margin:8px 0 0; font-size:14px; line-height:1.6; }
.night-ending .checkmate-cta { margin-top:10px; }
.redbull-line { margin-top:14px !important; color:var(--muted); }
.redbull-line a { color:var(--gold); }