/* Control (control.meteoro.itszaen.com): the Planner look (DESIGN.md), built
   from styles.css's tokens and pieces (shell, sidebar, tiles, cards). */

.ct { height: 100vh; height: 100dvh; margin: 0; background: var(--plane); }
.ct .sidenav .tab { text-decoration: none; }
.ct .sidenav .tab[aria-current="page"] { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--soft); }
.ct .userchip .userbtn { cursor: default; }
/* the app pins its Planetarium link to the foot; here the links are the nav */
.ct .sidenav #planetarium-link { margin-top: 0; }
.ct .sidenav .userchip { margin-top: auto; }

.ct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ct-head h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.ct-head .pill { margin-left: auto; }

.ct-hint { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); max-width: 68ch; }
.ct-note, .ct-err { font-size: 13px; color: var(--critical); }

/* A card with its actions as icons on a bar at its left (AGENTS.md: never
   big labelled buttons). */
.ct-card { display: flex; align-items: stretch; }
.ct-bar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 14px 6px;
  background: var(--well); }
.ct-bar:empty { display: none; }
.ct-in { flex: 1 1 auto; min-width: 0; padding: 0 0 12px; }
.ct-in > h2 { margin: 0; padding: 16px var(--card-pad) 6px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 10px; }
.ct-in > h2 .count { color: var(--text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.ct-in > .ct-hint, .ct-in > .ct-links { margin-left: var(--card-pad); margin-right: var(--card-pad); }

.ct-rows { list-style: none; margin: 0; padding: 0 10px; }
.ct-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; }
.ct-row:hover { background: var(--ghost); }
.ct-main { flex: 1 1 auto; min-width: 0; }
.ct-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ct-line b { font-weight: 600; }
.ct-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ct-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; max-width: 62ch; }
.ct-dim { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ct-notes { margin-top: 4px; font-size: 13px; color: var(--text-secondary); white-space: pre-line; }
.ct-empty { padding: 10px; color: var(--text-secondary); font-size: 13px; }
.ct-acts { flex: 0 0 auto; display: flex; gap: 2px; opacity: 0.55; transition: opacity var(--t-quick, 120ms) ease-out; }
.ct-row:hover .ct-acts, .ct-row:focus-within .ct-acts { opacity: 1; }
@media (hover: none) { .ct-acts { opacity: 1; } }
a.ct-icon { color: var(--text-secondary); border-radius: 9px; }
a.ct-icon:hover { background: var(--well); color: var(--text-primary); }
a.ct-icon:focus-visible { outline: none; box-shadow: var(--focus); }

.ct-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 8px; border-radius: 6px;
  background: var(--well); color: var(--text-secondary); }
.ct-tag.on { background: var(--series-1-soft); color: var(--text-primary); }

.ct-seg { flex: 0 0 auto; display: inline-flex; background: var(--well); border-radius: 11px; padding: 3px; gap: 2px; }
.ct-seg button { background: transparent; padding: 4px 12px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); }
.ct-seg button.on { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--soft); }

.ct-links { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.ct-link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 9px; background: var(--well);
  color: var(--text-primary); text-decoration: none; font-weight: 500; }
.ct-link::after { content: "↗"; margin-left: 6px; color: var(--text-muted); }
.ct-link:hover { background: color-mix(in srgb, var(--text-primary) 7%, var(--well)); }

a.ct-btn { display: inline-block; padding: 8px 14px; border-radius: 9px; text-decoration: none; font-weight: 550; }
a.ct-btn.primary { background: var(--series-1); color: var(--on-series-1); }

.ct-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--plane) 70%, transparent); }
.ct-scrim[hidden] { display: none; }
.ct-dialog { width: min(360px, 100%); background: var(--surface-1); border-radius: 14px; box-shadow: var(--lift);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ct-dialog h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ct-dialog p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.ct-pw { display: flex; gap: 8px; }
.ct-pw input { flex: 1 1 auto; min-width: 0; font: inherit; border: 0; border-radius: 10px; padding: 8px 12px;
  background: var(--well); color: var(--text-primary); }
.ct-pw input:focus { outline: none; box-shadow: var(--focus); }

.ct-toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
  background: var(--surface-1); color: var(--text-primary); box-shadow: var(--lift); border-radius: 12px; padding: 12px 16px; }
.ct-toast.bad { background: color-mix(in srgb, var(--critical) 8%, var(--surface-1)); }
.ct-toast[hidden] { display: none; }

@media (max-width: 760px) {
  .ct-row { flex-wrap: wrap; }
  .ct-subject { white-space: normal; }
}