/* Bū tools · widget Deadlines (voir app/deadlines.js) : préfixe dl-
   Dans la ligne du haut, dans le même style que l'heure (mono, gris) ; la fenêtre reprend celle du Pomodoro (app/pomodoro.css). */

/* Le widget : un drapeau, le nom (coupé s'il est long), le temps qui reste en papier ; dépassée : en pêche */
.dl { pointer-events: auto; position: relative; top: 1px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 2px 0; border: 0; background: none;
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color .3s var(--courbe); }
html.sans-dl .dl { display: none; }
.dl svg { width: 13px; height: 13px; flex: none; position: relative; top: -1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.dl-nom { min-width: 0; max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.dl .dl-reste { font-weight: 500; color: var(--papier); opacity: .85; white-space: nowrap; }
.dl.passee .dl-reste { color: var(--peche); opacity: 1; }
.dl.vide { opacity: .7; }
.dl:hover { color: var(--papier); }
.dl:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 560px) { .dl-nom { max-width: 22ch; } }   /* téléphone : sur sa propre ligne */

/* La fenêtre : la liste (la ligne affichée en haut a son point orange), puis le formulaire */
.dl-fenetre { max-height: calc(100dvh - 40px); overflow-y: auto; }
.dl-compte { font: var(--repere); letter-spacing: .1em; color: var(--texte2); margin-left: 6px; vertical-align: middle; }
.dl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dl-ligne { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--filet-doux); }
.dl-ligne:last-child { border-bottom: 0; }                          /* le filet du formulaire suit juste dessous */
/* Une ligne : le point, le nom et la date l'un sous l'autre, le décompte à droite ; écran étroit : le décompte passe sous la date */
.dl-choisir { flex: 1; min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "point titre reste" "point quand reste";
  align-items: center; gap: 2px 12px; padding: 12px 6px 12px 0; border: 0; background: none; color: var(--papier); text-align: left; cursor: pointer; }
.dl-choisir .dl-texte { display: contents; }
.dl-point { grid-area: point; }
.dl-titre { grid-area: titre; }
.dl-quand { grid-area: quand; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-choisir .dl-reste { grid-area: reste; }
@media (max-width: 420px) {
  .dl-quand-champs { grid-template-columns: 1fr; }
  .dl-choisir { grid-template-columns: 10px minmax(0, 1fr); grid-template-areas: "point titre" "point quand" "point reste"; }
}
.dl-point { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--filet); transition: background .2s var(--courbe), box-shadow .2s var(--courbe); }
.dl-ligne.choisie .dl-point { background: var(--orange); box-shadow: none; }
.dl-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-titre { font: 500 14px/1.3 var(--corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-quand { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.dl-choisir .dl-reste { flex: none; font: var(--valeur); letter-spacing: .06em; color: var(--papier); font-variant-numeric: tabular-nums; }
.dl-ligne.passee .dl-reste { color: var(--peche); }
.dl-choisir:hover .dl-titre { color: var(--peche); }
.dl-vide, .dl-plein { margin: 0; padding: 4px 0 2px; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); line-height: 1.6; }
.dl-formulaire { display: flex; flex-direction: column; gap: var(--dans-groupe); padding-top: 16px; border-top: 1px solid var(--filet); }
.dl-formulaire[hidden] { display: none; }
.dl-formulaire .groupe { padding-bottom: 0; }
.dl-saisie { background: var(--noir); box-shadow: inset 0 0 0 1px var(--filet); }
.dl-quand-champs { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.dl-formulaire .pomo-saisie input { font-size: 16px; color-scheme: dark; }
.dl-formulaire .pastille:disabled { opacity: .4; pointer-events: none; }
.dl-formulaire .pastille[hidden] { display: none; }