/* windows.css — window chrome. The highlighted window frosts harder; the others stay see-through. */

.desk { position: fixed; inset: 32px 0 0; z-index: 1; }
.win { position: absolute; left: var(--x); top: var(--y); width: var(--w); max-height: calc(100vh - 180px); display: flex; flex-direction: column;
  border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(6, 3, 16, .45);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); overflow: hidden;
  transition: background .3s, box-shadow .3s, opacity .2s, transform .2s; animation: pop .22s ease-out; }
.win[hidden] { display: none; }
.win.on { background: var(--glass-on); box-shadow: 0 24px 70px rgba(6, 3, 16, .6), 0 0 0 1px rgba(183, 156, 240, .18);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); }
/* the CV window is tall enough to show several panels at once */
.win[data-app="monitor"] { height: calc(100vh - 32px - 28px - 100px); max-height: 860px; }
.win[data-app="monitor"] .body { flex: 1; }
@keyframes pop { from { transform: scale(.97); } }

.tb { flex: none; height: 36px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 0 10px; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: none; }
.dragging .tb { cursor: grabbing; }
.tb h2 { font-size: 13px; font-weight: 600; text-align: center; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win.on .tb h2 { color: var(--ink); }
.menu { width: 12px; height: 12px; border-radius: 50%; background: #e7a8c6; }
.ctl { display: flex; gap: 8px; }
.ctl button { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; position: relative; }
.ctl .min { background: var(--yellow); }
.ctl .cls { background: var(--pink); }
.ctl button::before { content: ""; position: absolute; inset: -5px; }   /* bigger hit area */
.ctl button:hover { filter: brightness(1.15); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.win:not(.on) .ctl button { opacity: .55; }
.body { overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(183, 156, 240, .4) transparent; }

/* small screens: plain stacked cards, no dragging */
@media (max-width: 900px) {
  .desk { position: static; padding: 44px 10px 90px; display: flex; flex-direction: column; gap: 14px; }
  .win { position: relative; left: auto !important; top: auto !important; width: auto !important; max-height: none; translate: none !important; }
  .win[data-app="monitor"] { height: auto; max-height: none; }
  .tb { cursor: default; }
}

/* edit mode (unlocked with sudo in the terminal) */
.editing [contenteditable="true"] { outline: 1px dashed rgba(183, 156, 240, .55); outline-offset: 2px; border-radius: 2px; cursor: text; }
.editing [contenteditable="true"]:hover { outline-color: rgba(229, 143, 168, .9); }
.editing [contenteditable="true"]:focus { outline: 2px solid var(--accent); background: rgba(183, 156, 240, .08); }
.editing [contenteditable="true"]::after { content: " ✎"; color: var(--accent); font-size: .85em; font-weight: 400; opacity: .75; pointer-events: none; user-select: none; }
.editing [contenteditable="true"]:focus::after { content: none; }
.edit-pct { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.edit-pct input { flex: 1; min-width: 60px; accent-color: var(--accent); }
.edit-note { position: fixed; top: 44px; right: 14px; z-index: 2000; display: flex; gap: 12px; width: min(340px, calc(100vw - 28px));
  padding: 14px 14px 12px; border-radius: 12px; background: rgba(24, 20, 38, .94); border: 1px solid rgba(183, 156, 240, .35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px;
  animation: note-in .25s ease-out; }
@keyframes note-in { from { transform: translateX(30px); } }
.edit-note .en-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #1b1530; font-size: 17px; }
.edit-note h4 { margin: 0 0 3px; font-size: 14px; }
.edit-note p { margin: 0; color: var(--muted); line-height: 1.4; }
.edit-note .edit-st:not(:empty) { margin-top: 6px; color: var(--ink); }
.edit-note .en-btns { display: flex; gap: 8px; margin-top: 10px; }
.edit-note button { padding: 6px 14px; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; background: rgba(255, 255, 255, .1); color: inherit; }
.edit-note [data-save] { background: var(--accent); color: #1b1530; }