/* Interstice — passe 2. Référence directrice : notetime (app web), cinq gestes copiés :
   le champ est la dernière ligne, gouttière d'heures monospace alignée à droite, une entrée par
   ligne sans séparateur, tags en pastilles dans le texte avec filtres en haut, mobile identique
   mais nu. Couleur et typographie sont à nous : blanc franc, jamais crème.
   Passe 4b : tout texte tient 4,5:1 (mesuré dans evidence/contrastes.json), l'heure se lit sur la
   première ligne du texte, et le pied mobile tient en 112 px sans perdre ses 44 px tapables. */
:root {
  --paper: #fff;
  --ink: #14161b;
  --muted: #646975;          /* gouttière et libellés : 5,5:1 sur blanc, 5,1:1 sur --soft */
  --faint: #6b707b;          /* durées et texte d'appoint : 5,0:1 sur blanc, 4,6:1 sur --soft */
  --lh: 23px;                /* hauteur d'une ligne de texte : l'heure et la durée s'y posent */
  --line: #e8eaef;
  --soft: #f6f7f9;
  --accent: #2540d8;
  --danger: #b3271e;
  --gutter: 62px;
  --mark: 16px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); min-height: 100dvh; display: flex; flex-direction: column; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
button:disabled { cursor: default; color: var(--faint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
p, h1, h2, h3, ol, ul, li { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 20; background: #fff; padding: 12px 16px; border: 1px solid var(--line); }
.skip:focus { top: 10px; }
.wrap { width: 100%; max-width: 940px; margin-inline: auto; padding-inline: 32px; }

/* ---- Barre haute : filtres de tags, comme la référence, plus rien d'autre ---- */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 52px; flex-wrap: wrap; padding-block: 8px; }
.brand { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-right: 4px; }
.brand i { font-style: normal; color: var(--accent); }
.filters-label { font-size: 12.5px; color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hintkey { margin-left: auto; font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; min-height: 24px; }
.hintkey:hover { color: var(--ink); }
.hintkey .keys { display: flex; gap: 4px; }
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--muted); background: var(--soft); }

/* ---- Pastilles de tag : une couleur par tag, pâle, dans le fil du texte ---- */
.tag { font-size: 13.5px; line-height: 1.2; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.tag[aria-pressed="true"] { outline: 1.5px solid currentColor; outline-offset: 1px; }
.tag-0 { color: #8a5300; --tag-bg: #fdf0dc; }
.tag-1 { color: #2f6b3a; --tag-bg: #e6f4e9; }
.tag-2 { color: #1f5b9e; --tag-bg: #e5eefb; }
.tag-3 { color: #6b3fa0; --tag-bg: #f0e9fb; }
.tag-4 { color: #a1356a; --tag-bg: #fbe9f1; }
.tag-5 { color: #16646e; --tag-bg: #e2f2f4; }
.tag { background: var(--tag-bg); }

/* ---- Le jour ---- */
main { flex: 1 0 auto; padding-top: 26px; padding-bottom: 8px; }
.day-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.day-title h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.day-title .meta { font-size: 12.5px; color: var(--faint); }
.day-title .back { font-size: 12.5px; color: var(--accent); margin-left: auto; }

/* ---- Une entrée, une ligne, aucun séparateur ---- */
.row { display: grid; grid-template-columns: var(--gutter) var(--mark) minmax(0, 1fr) auto; align-items: start; }
.row:hover { background: #fbfcfd; }
/* L'heure, la marque et la durée partagent la hauteur de la première ligne du texte, décalées d'un
   pixel vers le bas pour que les lignes de base des petits corps tombent sur celle du texte. */
.row .time {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: var(--lh);
  padding: 6px 8px 4px 0; white-space: nowrap; align-self: start; justify-self: stretch;
  display: flex; justify-content: flex-end; align-items: flex-start;
}
.row .time:hover { color: var(--accent); }
.row .mark { font-family: var(--mono); font-size: 13px; color: var(--accent); line-height: var(--lh); padding: 6px 0 4px; text-align: left; }
.row .mark.mind { color: #8a5300; }
.row .text {
  font-size: 16px; line-height: var(--lh); padding: 5px 0; text-align: left; width: 100%;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.row .dur { font-family: var(--mono); font-size: 11.5px; color: var(--faint); line-height: var(--lh); padding: 6px 0 4px 18px; white-space: nowrap; text-align: right; }
.row .dur.gap { color: #8a5300; }
.row.is-current .text { font-weight: 600; }

/* ---- La ligne de saisie : même gabarit, déjà horodatée ---- */
#composer { border: 0; }
.composer-row { background: var(--paper); }
.composer-row .time { color: var(--muted); }
#entry {
  font-size: 16px; line-height: var(--lh); padding: 5px 0; border: 0; background: none; width: 100%;
  resize: none; overflow: hidden; min-height: 33px; display: block;
}
#entry::placeholder { color: var(--faint); }
#entry:focus, #entry:focus-visible { outline: none; }
.composer-row:focus-within { background: #fafbfc; }
.composer-row:focus-within .time { color: var(--accent); }
.composer-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; min-height: 26px; padding-left: calc(var(--gutter) + var(--mark)); }
.preview { font-size: 12px; color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.preview:empty { display: none; }
.preview b { color: var(--muted); font-weight: 600; font-family: var(--mono); }
.preview .choice { color: var(--accent); border: 1px solid var(--line); border-radius: 6px; background: var(--paper); padding: 0 8px; min-height: 24px; font-size: 12px; display: inline-flex; align-items: center; }
.preview .choice:hover { border-color: var(--accent); }
.preview .suggest { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.preview .suggest .tag { font-size: 12.5px; min-height: 24px; display: inline-flex; align-items: center; }
/* Sur grand écran, la saisie et le bloc « en cours » restent au bas de la fenêtre quand le jour déborde. */
#timeline > #composer { position: sticky; bottom: 0; z-index: 3; background: var(--paper); padding-bottom: 6px; }
#timeline > #composer.is-stuck { box-shadow: 0 -12px 14px -14px #10142a59; }

/* ---- Bloc « en cours » : collé sous la ligne de saisie, dans la colonne de lecture ---- */
.now { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; padding: 2px 0 4px calc(var(--gutter) + var(--mark)); }
.now .dot { width: 7px; height: 7px; border-radius: 50%; background: #2f8a4a; flex: none; align-self: center; }
.now .task .tag { font-size: 12px; font-weight: 500; padding: 1px 6px; }
.now .label { font-size: 13px; color: var(--muted); white-space: nowrap; flex: none; }
.now .task { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.now .elapsed { margin-left: auto; padding-left: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; flex: none; }
.now.late .dot { background: #c2761d; }
.now.late .elapsed { color: #8a5300; }

/* ---- Navigation écrite, quatre entrées ---- */
.nav { border-top: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 4px; padding-block: 12px; font-size: 13px; }
.nav button { color: var(--muted); padding: 6px 2px; }
.nav button:hover { color: var(--ink); }
.nav button[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -1.5px 0 var(--ink); }
.nav .sep { width: 3px; height: 3px; border-radius: 50%; background: #c5c9d1; margin: 0 8px; flex: none; }
.nav .state { margin-left: auto; font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.nav .state i { width: 6px; height: 6px; border-radius: 50%; background: #2f8a4a; display: inline-block; }

/* ---- Édition en place ---- */
.edit-contents { display: contents; }
.edit-row { display: grid; grid-template-columns: var(--gutter) var(--mark) minmax(0, 1fr); gap: 0 0; padding: 2px 0 8px; }
/* Le champ d'heure prend la gouttière et la marque : « 09:30 » et son icône se lisent en entier. */
.edit-row input[type=time] { grid-column: 1 / 3; justify-self: end; width: 7.4em; margin-right: 8px; font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; background: #fff; align-self: start; }
.edit-row .edit-contents > span:empty { display: none; }
.edit-row textarea { grid-column: 3; font-size: 16px; line-height: 1.45; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; resize: vertical; min-height: 54px; }
.edit-actions { grid-column: 3; display: flex; gap: 14px; align-items: center; padding-top: 8px; font-size: 12.5px; }
.edit-actions button { color: var(--accent); }
.edit-actions button.danger { color: var(--danger); }
.edit-actions .hint { color: var(--faint); margin-left: auto; }

/* ---- Listes secondaires : jours, revue, sauvegarde ---- */
.lines li { border-bottom: 1px solid var(--line); }
.lines li:last-child { border-bottom: 0; }
.line-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 16px; width: 100%; text-align: left; padding: 12px 0; font-size: 15px; }
.line-row:hover { background: #fbfcfd; }
.line-row small, .line-row .num { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.section-label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 26px 0 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 18px 22px; }
.stat b { display: block; font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -.02em; }
.stat span { font-size: 12.5px; color: var(--muted); }
.bars li { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; font-size: 14px; }
.bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; background: #c8cdd8; }
.bars .amount { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
/* Largeurs par pas de 5 % : la politique de sécurité de la page interdit tout style en ligne. */
.bar i.w-0 { width: 0%; }
.bar i.w-5 { width: 5%; }
.bar i.w-10 { width: 10%; }
.bar i.w-15 { width: 15%; }
.bar i.w-20 { width: 20%; }
.bar i.w-25 { width: 25%; }
.bar i.w-30 { width: 30%; }
.bar i.w-35 { width: 35%; }
.bar i.w-40 { width: 40%; }
.bar i.w-45 { width: 45%; }
.bar i.w-50 { width: 50%; }
.bar i.w-55 { width: 55%; }
.bar i.w-60 { width: 60%; }
.bar i.w-65 { width: 65%; }
.bar i.w-70 { width: 70%; }
.bar i.w-75 { width: 75%; }
.bar i.w-80 { width: 80%; }
.bar i.w-85 { width: 85%; }
.bar i.w-90 { width: 90%; }
.bar i.w-95 { width: 95%; }
.bar i.w-100 { width: 100%; }
.prose { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.prose + .prose { margin-top: 10px; }
.empty { font-size: 14px; color: var(--faint); padding: 26px 0; line-height: 1.6; }
.toggle { display: flex; gap: 14px; font-size: 13px; margin-bottom: 4px; }
.toggle button { color: var(--muted); padding: 5px 0; min-height: 26px; }
.toggle button[aria-pressed="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -1.5px 0 var(--ink); }

/* ---- Retour d'action ---- */
.feedback { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; min-height: 20px; padding-top: 2px; }
.feedback:empty { display: none; }
.feedback button { color: var(--accent); text-decoration: underline; }
.warning { background: #fdf1f0; color: #8b2a22; font-size: 13px; }
/* Hors de la journée, sur grand écran, la saisie descend au pied de la page : un retour d'action
   (import déposé, export, seuil) y serait hors de la fenêtre. Il se pose alors en bas de l'écran,
   avec son « Annuler », jusqu'au geste suivant. */
@media (min-width: 721px) {
  .sticky-foot #composer .feedback { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; width: max-content; max-width: calc(100vw - 32px); padding: 8px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px #10142a1f; }
}
.warning .wrap { padding-block: 10px; }

/* ---- Palette ⌘K ---- */
dialog#palette { border: 1px solid #d7dbe2; border-radius: 12px; padding: 0; width: min(580px, calc(100vw - 24px)); margin-top: 11vh; box-shadow: 0 18px 60px #10142a1f; background: #fff; color: var(--ink); }
dialog#palette::backdrop { background: #10142a26; }
#palette-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; font-size: 15px; outline: none; }
#palette-list { max-height: 46vh; overflow: auto; padding: 6px; }
#palette-list li button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 7px; font-size: 14px; }
#palette-list li button .kind { font-size: 11.5px; color: var(--faint); margin-left: auto; font-family: var(--mono); }
#palette-list li button[aria-selected="true"] { background: var(--soft); }
#palette-list li button[disabled] { color: var(--faint); }
#palette-empty { padding: 18px; font-size: 13.5px; color: var(--faint); }
.palette-foot { border-top: 1px solid var(--line); padding: 9px 14px; font-size: 11.5px; color: var(--faint); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Mobile : le même écran, en plus nu, champ sous le pouce ---- */
@media (max-width: 720px) {
  :root { --gutter: 52px; --mark: 14px; --lh: 22px; }
  .wrap { padding-inline: 16px; }
  .topbar .wrap { min-height: 46px; }
  .brand, .hintkey .keys { display: none; }
  /* Sous la dernière ligne, la place du retour qui flotte au-dessus du pied : la ligne écrite reste lisible. */
  main { padding-top: 16px; padding-bottom: 36px; }
  .row .text, #entry { font-size: 15.5px; }
  .row .time { font-size: 12px; padding-right: 6px; }
  .row .dur { padding-left: 10px; font-size: 11px; }
  /* Pied collant : ligne de saisie 44 px, bloc « en cours » 24 px, navigation 44 px. L'aperçu et le
     retour d'action flottent au-dessus du pied, sans l'épaissir. */
  .sticky-foot { position: sticky; bottom: 0; z-index: 4; background: var(--paper); box-shadow: 0 -8px 16px -12px #10142a40; }
  .composer-notes { position: absolute; left: 0; right: 0; bottom: 100%; min-height: 0; padding: 4px 16px; gap: 0 12px; background: var(--paper); box-shadow: 0 -8px 14px -12px #10142a40; }
  .composer-notes.is-empty { display: none; }
  .now { padding: 0; min-height: 24px; line-height: 16px; align-items: center; font-size: 12.5px; }
  .now .label, .now .task, .now .elapsed { font-size: 12.5px; }
  .nav { border-top: 0; box-shadow: inset 0 1px 0 var(--line); }
  .nav .wrap { padding-block: 0; }
  .nav .state { display: none; }
  .day-title .meta { display: none; }
  /* Édition : l'heure passe au-dessus du texte, en entier, à 16 px pour qu'iOS ne zoome pas. */
  .edit-row { grid-template-columns: minmax(0, 1fr); gap: 8px 0; padding: 8px 0 10px; }
  .edit-row input[type=time] { grid-column: 1; justify-self: start; width: 9.5em; margin: 0; font-size: 16px; padding: 8px 10px; min-height: 44px; }
  .preview .suggest .tag { font-size: 13px; }
  .edit-row textarea, .edit-actions { grid-column: 1; }
  .edit-actions { flex-wrap: wrap; gap: 4px 16px; padding-top: 0; }
  .edit-actions .hint { display: none; }
}
@media (pointer: coarse) { .edit-actions .hint { display: none; } }
@media (max-width: 360px) {
  :root { --gutter: 46px; }
  .wrap { padding-inline: 12px; }
  .composer-notes { padding-inline: 12px; }
  .nav .sep { margin: 0 6px; }
  .row .dur { padding-left: 8px; }
  .now .long { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Passe 3 : sauvegarde, bandeaux, installation ---- */
.banner { background: #fff8e8; border-bottom: 1px solid #f0e2c0; font-size: 13px; }
.banner .wrap { padding-block: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banner button { color: var(--accent); text-decoration: underline; min-height: 24px; }
.onboarding { border-bottom: 1px solid var(--line); background: var(--soft); }
.onboarding .wrap { padding-block: 16px; }
.onboarding .steps { margin: 8px 0 0; padding-left: 20px; list-style: decimal; }
.onboarding .steps li { list-style: decimal; margin: 4px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; align-items: center; }
.act { border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; font-size: 13px; min-height: 34px; background: #fff; display: inline-flex; align-items: center; cursor: pointer; }
.act:hover { background: var(--soft); }
.primary-act { background: var(--ink); color: #fff; border-color: var(--ink); }
.primary-act:hover { background: #000; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); margin: 10px 0; }
.field-row input[type=date], .field-row input[type=number] { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 34px; font-family: var(--mono); font-size: 12.5px; background: #fff; }
.field-row input[type=number] { width: 5.5em; }
#import-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; background: var(--soft); }
.panel .section-label { margin-top: 0; }
.prose code { font-family: var(--mono); font-size: 12.5px; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
/* Toute cible cliquable tient les 24 px du minimum AA, y compris les petits liens de texte. */
.filters .tag, .feedback button, .edit-actions button, .banner button, .day-title .back { min-height: 24px; display: inline-flex; align-items: center; }
.panel .prose code { background: #fff; }

/* ---- Cibles tactiles : 44 px de hauteur effective sur mobile, texte inchangé ---- */
@media (max-width: 480px) {
  .row { min-height: 44px; }
  /* La zone tapable prend toute la hauteur de la ligne ; l'heure reste posée sur la première ligne
     du texte, jamais centrée sur un bloc de deux lignes. */
  .row .time { align-self: stretch; padding-block: 12px 10px; }
  .row .text { padding-block: 11px; }
  .row .dur { padding-block: 12px 10px; }
  .row .mark { padding-block: 12px 10px; }
  #entry { padding-block: 11px; min-height: 44px; }
  .filters .tag, .nav button, .toggle button, .day-title .back, .feedback button, .banner button, .hintkey, .preview .choice, .preview .suggest .tag { min-height: 44px; display: inline-flex; align-items: center; }
  .field-row input[type=number] { min-height: 44px; }
  /* Barre haute sur une seule ligne : filtres défilants, pastille visible de 24 px dans 44 px tapables. */
  .topbar .wrap { flex-wrap: nowrap; padding-block: 0; gap: 8px; }
  #filters-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .filters { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 3px; }
  .filters { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .filters .tag, .preview .suggest .tag { background: none; position: relative; isolation: isolate; flex: none; }
  .filters .tag::before, .preview .suggest .tag::before { content: ''; position: absolute; inset: 10px 0; border-radius: 5px; background: var(--tag-bg); z-index: -1; }
  .filters .tag[aria-pressed="true"] { outline: none; }
  .filters .tag[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px currentColor; }
  .hintkey { flex: none; font-size: 13px; color: var(--muted); }
  #palette-list li button { min-height: 44px; }
  #palette-input { font-size: 16px; }
  .act, .field-row input[type=date] { min-height: 44px; padding-block: 10px; }
  .line-row { padding-block: 14px; min-height: 44px; }
  .edit-actions button { min-height: 44px; }
  /* Un tag dans la phrase garde sa taille : sa zone tapable déborde, sans bouger le texte. */
  .row .text .tag { position: relative; }
  .row .text .tag::after { content: ''; position: absolute; inset: -12px -6px; }
}