/* =========================================================
   Revisly — page « Mes notes »
   (se charge par-dessus dashboard.css, qui fournit l'ossature)
   ========================================================= */

/* en-tête, puces de filtre et état vide viennent de dashboard.css */

/* ---------- barre d'outils ---------- */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar .chips{flex:1;min-width:0}

.tools-right{display:flex;align-items:center;gap:10px}
.select{
  display:flex;align-items:center;gap:7px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:10px;padding:0 10px;height:36px;
}
.select svg{width:15px;height:15px;color:var(--ink-tertiary);flex:none}
.select select{
  appearance:none;background:none;border:0;outline:0;color:var(--ink-primary);
  font:inherit;font-size:.8125rem;padding-right:2px;cursor:pointer;
}
.select select option{background:var(--surface-card);color:var(--ink-primary)}

.viewtog{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--surface-soft);border:.8px solid var(--surface-border)}
.viewtog button{
  width:32px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-tertiary);transition:background .15s,color .15s;
}
.viewtog button:hover{color:var(--ink-primary)}
.viewtog button.on{background:var(--surface-card);color:var(--ink-primary)}
.viewtog svg{width:15px;height:15px}

/* ---------- grille de notes ---------- */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.note{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:14px;padding:16px;text-align:left;min-width:0;
  transition:border-color .15s,background .15s,transform .12s;
}
.note:hover{border-color:var(--border-fort);background:var(--surface-hover)}
.note.gone{animation:noteOut .25s ease forwards}
@keyframes noteOut{to{opacity:0;transform:scale(.97)}}
.note.in{animation:noteIn .3s ease}
@keyframes noteIn{from{opacity:0;transform:translateY(-6px)}}

.note-top{display:flex;align-items:center;gap:10px}
.note .ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--surface-icon);display:flex;align-items:center;justify-content:center}
.note .ic svg{width:18px;height:18px}
.note .kind{font-size:.6875rem;color:var(--ink-tertiary);text-transform:uppercase;letter-spacing:.08em}

.star{
  margin-left:auto;flex:none;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-tertiary);
  transition:color .15s,background .15s;
}
.star:hover{background:var(--surface-soft-hover);color:var(--ink-primary)}
.star svg{width:16px;height:16px}
.star.on{color:var(--daisy)}
.star.on svg{fill:currentColor}

.note h3{margin-top:12px;font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.note .excerpt{
  margin-top:6px;font-size:.8125rem;line-height:1.55;color:var(--ink-tertiary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.note .meta{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-tertiary)}
.note .tag{border:.8px solid var(--surface-border);border-radius:999px;padding:1px 8px;font-size:.6875rem;color:var(--ink-secondary)}
.note .prog{margin-top:12px;height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.note .prog i{display:block;height:100%;background:var(--sky);border-radius:999px;transition:width .5s ease}
.note .foot{margin-top:10px;display:flex;align-items:center;gap:14px;font-size:.75rem;color:var(--ink-tertiary)}
.note .foot span{display:flex;align-items:center;gap:5px}
.note .foot svg{width:13px;height:13px}
.note .del{
  margin-left:auto;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-tertiary);transition:color .15s,background .15s;
}
.note .del:hover{background:rgba(207,86,71,.16);color:var(--blush)}
.note .del svg{width:14px;height:14px}

/* ---------- mode liste ---------- */
.notes.list{grid-template-columns:1fr;gap:8px}
.notes.list .note{
  display:grid;grid-template-columns:auto minmax(0,1fr) 140px auto auto;
  align-items:center;gap:16px;padding:12px 16px;border-radius:12px;
}
.notes.list .note-top{display:contents}
.notes.list .note .kind{display:none}
.notes.list .note .ic{order:1}
.notes.list .note .body{order:2;min-width:0}
.notes.list .note .prog{order:3;margin-top:0;width:100%}
.notes.list .note .foot{order:4;margin-top:0;gap:12px}
.notes.list .star{order:5;margin-left:0}
.notes.list .note h3{margin-top:0;font-size:.9375rem}
.notes.list .note .excerpt{display:none}
.notes.list .note .meta{margin-top:4px}

.toast .undo{
  margin-left:12px;color:var(--sky-soft);font-weight:600;text-decoration:underline;
  pointer-events:auto;cursor:pointer;
}
.toast.on{pointer-events:auto}

@media (prefers-reduced-motion: reduce){
  .note,.note .prog i{transition:none}
  .note.in,.note.gone{animation:none}
}

@media (max-width:1180px){
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .notes{grid-template-columns:1fr}
  .notes.list .note{grid-template-columns:auto minmax(0,1fr) auto auto}
  .notes.list .note .prog{display:none}
}
@media (max-width:640px){
  .tools-right{width:100%}
  .select{flex:1}
}