/* ================= TASK LINKS — the inline editor, `.tl-*` =================

   Its own file, not CSS/alt/alt-team.css or CSS/alt/alt-tasks.css: this component
   (JS/features/task-links.js) is mounted by three hosts that each dress a bare
   `<input>`/`<button>` differently, so it cannot lean on any one of them —
   `CSS/checklist.css` met this for `.tcl-*` first; same reasoning, not restated.

   The row is two lines, not four columns: the address sits on its own `url` track
   below "label edit open remove", shown only while `.tl-url` is not `[hidden]`.
   `row-gap:0` because a grid gap applies between tracks whether occupied or not —
   the address field's own margin pays the space instead, so a collapsed row has none.

   Tokens are the base names (`--border`, `--panel-2`, `--text`, …) because
   CSS/tokens.css declares them on bare `:root`, resolving on every host without
   depending on the `--a-*` alias layer scoped to `.alt-app`.

   Some properties carry `!important` because `#taskModal`'s own input rule in
   CSS/alt/alt-team.css outranks any class-only selector this file can write —
   `.tcl-move` in checklist.css already met this and settled it the same way, on
   exactly the properties that rule sets and nowhere else. The buttons need none:
   that host re-skins `input` and `button.btn`, and none of these carry `.btn`.

   Loads after CSS/base.css (so `[hidden]` is in force) and after CSS/alt/alt-team.css
   on the board, before CSS/alt/alt-focus.css — `:focus-visible` is unscoped
   (sys_design-system.md §18) and reaches every control here unaided. */

.tl-section{
  display:flex; flex-direction:column; gap:6px;
  /* A container query, not a page breakpoint: this mounts at three different
     widths that don't line up with any one viewport — the technique CSS/okr.css
     already uses for a card narrow in one host and wide in another. */
  container-type:inline-size; container-name:tasklinks;
}

/* ---------- one row ---------- */
.tl-slot{ display:flex; flex-direction:column; gap:2px; }
.tl-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  grid-template-areas:"label edit open remove" "url url url url";
  align-items:center; column-gap:8px; row-gap:0;
}
.tl-row .tl-label{ grid-area:label; }
.tl-row .tl-edit{ grid-area:edit; }
.tl-row .tl-open{ grid-area:open; }
.tl-row .tl-remove{ grid-area:remove; }
/* The address, on its own line at full width — a long URL needs the row, not half of one. */
.tl-row .tl-url{ grid-area:url; margin-top:6px; }

/* Own declarations, not `.a-input`'s — see the header. 32px matches `--a-ctl`'s own
   value without depending on a token that only resolves inside `.alt-app`. */
.tl-label, .tl-url{
  height:32px !important; min-width:0; padding:0 10px !important; font-size:13px !important;
  font-family:inherit; line-height:1.4;
  background:var(--panel-2) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important;
}
.tl-label:focus, .tl-url:focus{ border-color:var(--accent) !important; }
.tl-label::placeholder, .tl-url::placeholder{ color:var(--text-faint); opacity:1; }
/* The secondary field, and it says so: dim ink keeps the URL from competing with
   the label. Not a different size — 13px is the floor here and §18's besides. */
.tl-url{ color:var(--text-dim) !important; letter-spacing:.1px; }

/* 24px square, the same §18 pointer-target floor `.tcl-del` in checklist.css uses. */
.tl-edit, .tl-open, .tl-remove{
  width:24px; height:24px; min-width:24px; min-height:24px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:0; border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent; color:var(--text-dim);
  cursor:pointer;
}
.tl-edit svg, .tl-open svg, .tl-remove svg{ width:16px; height:16px; display:block; }
.tl-edit:hover:not(:disabled), .tl-open:hover:not(:disabled), .tl-remove:hover:not(:disabled){
  background:var(--panel-2); border-color:var(--border-soft); color:var(--text);
}
/* Not opacity alone — sys_design-system.md §18 asks for a second signal on a
   disabled control: the border and background both change, not just the alpha. */
.tl-edit:disabled, .tl-open:disabled, .tl-remove:disabled{
  opacity:.55; color:var(--text-faint); background:var(--gray-soft); border-color:transparent;
  cursor:not-allowed;
}
.tl-remove:hover:not(:disabled){ color:var(--red-text); border-color:var(--red-soft); background:var(--red-soft); }

/* Held down like a toggle, styled from `aria-expanded` — the state the button
   already publishes — rather than a second class. Not colour alone (§18). */
.tl-edit[aria-expanded="true"]{
  background:var(--panel-2); border-color:var(--border-strong); color:var(--accent-text);
}

/* Read live from the DOM, never from what was saved. Collapses while empty, the
   same choice `.tcl-status:empty` makes in checklist.css (Definition of Done 4f).
   Shown whether or not the address is: a dead link must read as broken either way. */
.tl-note{ font-size:11px; color:var(--text-faint); line-height:1.4; min-height:0; }
.tl-note:empty{ display:none; }
.tl-note.err{ color:var(--red-text); }

/* ---------- read-only presentation ----------
   Two lines; the second names the host, since a reader has no edit control to press
   to see the full address. Absent, not empty, when nothing is openable. */
.tl-ro{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label open" "host open";
}
.tl-ro .tl-ro-host{ grid-area:host; }
.tl-ro-text{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; color:var(--text);
}
.tl-ro-host{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px; color:var(--text-dim); line-height:1.4;
}
.tl-ro-empty{ font-size:12px; }

/* ---------- the add control ---------- */
.tl-add{ margin-top:2px; }
.tl-add-btn{
  height:28px; padding:0 12px; border-radius:var(--radius-sm);
  background:var(--panel-2); color:var(--text); border:1px solid var(--border);
  font-size:12px; font-weight:600; cursor:pointer;
}
.tl-add-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-text); }
.tl-add-btn:disabled{
  opacity:.55; background:var(--gray-soft); border-color:var(--border-soft); cursor:not-allowed;
}

/* ---------- NARROW: the gaps give way, not the layout ----------
   The resting row (one flexible field plus 88px of controls) fits any width this
   mounts in, so only the gap between controls tightens below 320px. `.tl-compact`
   gives a host (the framed `?embed=task` editor) the same density unconditionally. */
@container tasklinks (max-width:320px){
  .tl-row{ column-gap:4px; }
}
.tl-compact .tl-row{ column-gap:4px; }