/* =========================================================================
   EMPIRIUM OS — MOBILE: COMMAND EXTRA
   Companion stylesheet to mobile-command-extra.js: "Things to look forward
   to" (photo/title/note cards, add/delete, min 1) + the 12-week task-closed
   heatmap. Reuses
   .card / .cmd-kicker from mobile-command.css and the CSS custom properties
   defined globally in app.css — no new tokens introduced here.
   ========================================================================= */

/* ---------------- Things to look forward to ---------------- */
.ltfm-section{ padding-bottom:14px; }
.ltfm-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ltfm-add-btn{
  height:24px; padding:0 10px; white-space:nowrap; cursor:pointer;
  border:1px solid var(--accent); border-radius:var(--r-sm, 6px);
  background:transparent; color:var(--accent);
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.4px;
}
.ltfm-add-btn:active{ opacity:.7; }
.ltfm-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:10px;
}
.ltfm-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--card-2); border:1px solid var(--line-soft);
  border-radius:var(--r-md); overflow:hidden;
}
.ltfm-card-del{
  position:absolute; top:4px; left:4px; z-index:2;
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line-soft); background:rgba(0,0,0,.55);
  color:#fff; font-size:12px; line-height:1; display:flex;
  align-items:center; justify-content:center; padding:0; cursor:pointer;
}
.ltfm-card-del:active{ background:rgba(0,0,0,.75); }
.ltfm-card-del:disabled{ opacity:.35; }

/* Photo slot — tappable to add/replace. Empty state is a dashed-feel button;
   filled state shows the image plus a small remove affordance. */
.ltfm-photo{
  position:relative; width:100%; height:84px;
  background:var(--card-subtle); border:0; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
}
.ltfm-photo-img{ display:block; width:100%; height:100%; object-fit:cover; }
.ltfm-photo-ph{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--faint); padding:0 8px; text-align:center;
}
.ltfm-photo-remove{
  position:absolute; top:4px; right:4px; z-index:1;
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line-soft); background:rgba(0,0,0,.55);
  color:#fff; font-size:12px; line-height:1; display:flex;
  align-items:center; justify-content:center; padding:0; cursor:pointer;
}
.ltfm-photo-remove:active{ background:rgba(0,0,0,.75); }

/* Opens the Component Library picker for this card's photo slot — sits under
   the photo, above the title/note fields, so it reads as part of the photo
   control rather than the text body. */
.ltfm-lib-btn{
  width:100%; padding:5px 0; margin:0; border:0; border-top:1px solid var(--line-soft);
  background:var(--card-subtle); color:var(--muted);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.6px; text-transform:uppercase;
  cursor:pointer;
}
.ltfm-lib-btn:active{ color:var(--accent); }

.ltfm-body{ display:flex; flex-direction:column; gap:4px; padding:8px 9px 9px; }
.ltfm-title{
  width:100%; padding:0; border:0; background:transparent;
  font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis;
}
.ltfm-title::placeholder{ color:var(--faint); font-weight:500; }
.ltfm-title:focus{ outline:none; }
.ltfm-text{
  width:100%; padding:0; border:0; background:transparent; resize:none;
  font-family:var(--font); font-size:11.5px; line-height:1.4; color:var(--muted);
}
.ltfm-text::placeholder{ color:var(--faint); }
.ltfm-text:focus{ outline:none; }
.ltfm-file-input{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------------- Heatmap ---------------- */
.hm-section{ overflow-x:auto; }
.hm-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-flow:column;
  grid-template-rows:repeat(6, 1fr);
  gap:3px;
  margin-top:10px;
  max-width:300px;
}
.hm-cell{
  width:100%; aspect-ratio:1; border-radius:2px;
  background:var(--card-subtle); display:block;
}
.hm-cell[data-shade="1"]{ background:rgba(var(--good-rgb),.22); }
.hm-cell[data-shade="2"]{ background:rgba(var(--good-rgb),.36); }
.hm-cell[data-shade="3"]{ background:rgba(var(--good-rgb),.5); }
.hm-cell[data-shade="4"]{ background:rgba(var(--good-rgb),.66); }
.hm-cell[data-shade="5"]{ background:rgba(var(--good-rgb),.82); }
.hm-cell[data-shade="6"]{ background:var(--good); }
.hm-cell.is-today{ box-shadow:0 0 0 1px var(--accent); }
.hm-cell.is-future{ opacity:.3; }
.hm-foot{
  margin-top:10px; display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
}
.hm-foot-note{ margin-left:auto; color:var(--faint); font-size:9.5px; letter-spacing:.4px; }