@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600&family=Bitter:wght@400;600&display=swap');

:root{ --paper:#f7f6f3; --card:#fff; --ink:#14130f; --muted:#7a766e; --rule:#e6e3dd; --tint:#f4f2ee; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Lexend Deca',system-ui,sans-serif; }
[x-cloak]{ display:none !important; }

.top{ height:64px; background:var(--card); border-bottom:1px solid var(--rule);
      display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.wordmark{ font-size:19px; font-weight:600; }
.wordmark i{ font-style:normal; font-weight:300; color:var(--muted); margin-left:10px; }
.chip{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);
       border:1px solid var(--rule); border-radius:999px; padding:6px 13px 6px 10px; }
.chip b{ width:7px; height:7px; border-radius:50%; background:var(--ink); display:block; }

.body{ display:flex; height:calc(100vh - 64px); }
.pane-list{ width:452px; flex:0 0 452px; border-right:1px solid var(--rule); background:var(--card);
            display:flex; flex-direction:column; min-height:0; }
.pane-detail{ flex:1; display:flex; flex-direction:column; min-height:0; background:var(--card); }

.addrow{ padding:20px 26px 16px; border-bottom:1px solid #f0eee9; }
.addfield{ display:flex; align-items:center; gap:13px; }
.addfield input{ border:0; outline:0; font:inherit; font-size:15.5px; width:100%; background:transparent; }
.prio{ display:flex; gap:7px; margin:13px 0 0 32px; }
.prio button{ font:inherit; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
              color:var(--muted); background:var(--card); border:1px solid var(--rule);
              border-radius:999px; padding:4px 11px; cursor:pointer; }
.prio button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.tasks{ flex:1; overflow-y:auto; padding:8px 0; }
.t{ display:flex; gap:13px; padding:12px 26px; position:relative; align-items:flex-start; cursor:pointer; }
.t .ring{ width:19px; height:19px; border:1.5px solid var(--ink); border-radius:50%;
          flex:0 0 19px; margin-top:3px; cursor:pointer; }
.t .ring.full{ background:var(--ink); }
/* Poignée de réordonnancement : discrète, pleine opacité au survol. Sur
   tactile elle reste visible, c'est la seule prise pour glisser. */
.t .grip{ flex:0 0 12px; margin:2px -6px 0 -14px; color:#b8b2a7; cursor:grab; user-select:none;
          font-size:15px; line-height:23px; touch-action:none; }
.t .grip:hover{ color:var(--ink); }
.t.sortable-ghost{ opacity:.35; }
/* Colonne titre+extrait : sans min-width:0, un item flex refuse de rétrécir
   sous la largeur de son contenu (min-width:auto par défaut) — le titre et
   l'ellipse de .exc ne peuvent jamais s'appliquer et débordent du viewport. */
.t > div{ flex:1; min-width:0; }
/* La priorité est portée par la graisse, jamais par une pastille de couleur. */
.t .ttl{ font-size:15.5px; line-height:23px; }
.t.p0 .ttl{ font-weight:600; } .t.p1 .ttl{ font-weight:400; }
.t.p2 .ttl{ font-weight:300; color:#4d4a44; }
.t .exc{ font-family:'Bitter',Georgia,serif; font-size:13px; line-height:20px; color:#8a857c;
         margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Édition refusée par le serveur sur une tâche qu'on ne regarde plus (voir
   flushSave/select) : un point plein, monochrome, jamais une couleur ni un
   badge — même langage que .ring/.chip b ailleurs sur la page. */
.t .unsaved{ display:inline-block; width:6px; height:6px; border-radius:50%;
             background:var(--ink); margin-left:7px; vertical-align:middle; }
.t.on{ background:var(--tint); }
.t.on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink); }
.t.done .ttl{ text-decoration:line-through; color:var(--muted); }

.donebar{ border-top:1px solid var(--rule); padding:15px 26px; display:flex; align-items:center;
          justify-content:space-between; font-size:13.5px; color:var(--muted); background:#fcfbf9; cursor:pointer; }
.donebar em{ font-style:normal; width:19px; height:19px; border-radius:50%; background:var(--ink); color:#fff;
             font-size:11px; display:inline-flex; align-items:center; justify-content:center; margin-right:10px; }

/* Barre d'outils de la liste : pilules comme les priorités, jamais de couleur.
   Le mode sélection garde la même hauteur pour que la liste ne saute pas. */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; white-space:nowrap;
          padding:10px 26px; min-height:50px; border-bottom:1px solid #f0eee9; }
.toolbar.picking{ justify-content:flex-end; }
.tb{ font:inherit; font-size:12.5px; color:var(--ink); background:var(--card); border:1px solid var(--rule);
     border-radius:999px; padding:5px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
     transition:border-color .12s; }
.tb:hover:not(:disabled){ border-color:var(--ink); }
.tb:disabled{ color:#b8b2a7; cursor:default; }
.tb em{ font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--ink);
        color:#fff; font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; }
.tb:disabled em{ background:#d6d2ca; }
.tb.solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tb.solid:disabled{ background:#d6d2ca; border-color:#d6d2ca; color:#fff; }
.tb.ghost{ border-color:transparent; color:var(--muted); }
.tb.ghost:hover{ border-color:var(--rule); color:var(--ink); }
.tb-count{ margin-right:auto; font-size:13px; color:var(--muted); }
.tb-count b{ color:var(--ink); font-weight:600; margin-right:4px; }

/* Case du mode sélection : carrée là où l'anneau est rond, pour que le mode se
   lise d'un coup d'œil (même langage que la liseuse). */
.t .box{ width:19px; height:19px; border:1.5px solid var(--ink); border-radius:5px; flex:0 0 19px;
         margin-top:3px; position:relative; }
.t .box.on{ background:var(--ink); }
.t .box.on::after{ content:""; position:absolute; left:5.5px; top:2px; width:4.5px; height:9px;
                   border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.t.picked{ background:var(--tint); }
.t.done.picked .ttl{ color:var(--ink); }

.pane-hint{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--card);
            color:var(--muted); font-size:14px; }

dialog.confirm{ border:1px solid var(--rule); border-radius:14px; padding:26px 28px 20px; width:calc(100% - 32px);
                max-width:390px; color:var(--ink); background:var(--card); font-family:inherit;
                box-shadow:0 18px 50px rgba(20,19,15,.18); }
dialog.confirm::backdrop{ background:rgba(20,19,15,.28); }
dialog.confirm h3{ margin:0 0 8px; font-size:17px; font-weight:600; }
dialog.confirm p{ margin:0 0 22px; font-family:'Bitter',Georgia,serif; font-size:14px; line-height:21px;
                  color:#5f5b53; overflow-wrap:anywhere; }
.dlg-actions{ display:flex; justify-content:flex-end; gap:8px; }
.dlg-actions .tb{ font-size:13px; padding:7px 16px; }

.d-head{ padding:34px 40px 0; }
/* Bouton retour mobile uniquement : le volet de détail desktop est permanent,
   ce contrôle n'a de sens que sur le calque plein écran sous 860px. */
.only-narrow{ display:none; }
.d-head .back{ font-size:13.5px; color:var(--muted); text-decoration:none; }
.d-title{ font-size:29px; line-height:38px; font-weight:600; border:0; outline:0; width:100%;
          font-family:inherit; background:transparent; color:inherit; }
.d-prio{ display:flex; gap:8px; margin-top:20px; }
.d-hair{ height:1px; background:var(--rule); margin:26px 40px 0; }
.d-note{ flex:1; padding:24px 40px; font-family:'Bitter',Georgia,serif; font-size:16.5px; line-height:28px;
         border:0; outline:0; resize:none; background:transparent; color:#23211c; }
.d-foot{ border-top:1px solid var(--rule); padding:14px 40px; display:flex; align-items:center;
         justify-content:space-between; font-size:12.5px; color:#8a857c; background:#fcfbf9; }

@media (max-width: 860px){
  .body{ display:block; height:auto; }
  .pane-list{ width:100%; flex:none; border-right:0; height:calc(100vh - 64px); }
  /* Le détail devient un calque plein écran, pas un volet. */
  .pane-detail{ position:fixed; inset:0; z-index:10; }
  .addrow{ order:99; position:fixed; left:0; right:0; bottom:0; background:var(--card);
           border-top:1px solid var(--rule); border-bottom:0; padding-bottom:26px; }
  .tasks{ padding-bottom:132px; }
  .d-head{ padding:20px 22px 0; } .d-note{ padding:22px 22px; } .d-foot{ padding:13px 22px 26px; }
  .only-narrow{ display:inline-block; margin-bottom:16px; }
  .pane-hint{ display:none !important; }
  .toolbar{ padding:10px 18px; flex-wrap:wrap; }
}

/* Téléphone : le nombre seul suffit à côté des cases, et la barre de
   sélection tient alors sur une ligne. */
@media (max-width: 480px){
  .tb-word{ display:none; }
  .toolbar.picking{ flex-wrap:nowrap; gap:6px; }
}