/* Hira's sheets in the shared dialog (#detail-dialog: « Quel diplôme ? », « Où continuer », « Tout voir », the career, the
   doctoral list, « Réglages de Hira », « Comment Hira te guide »), in the site's identity (docs/SITE-IDENTITY.md).
   Tokens, fonts and shared classes (.chip, .btn, .eyebrow, .station-possible, .trait-crayon, .visually-hidden) come from
   sillon.css and style.css; no colour and no font is named here. Static: no decorative motion. Solid encre = published
   and sourced; dashed graphite = loading or not documented (au crayon).
   The support card (.hira-support*, hira-safety.js) is styled once, site-wide, in hira.css (build plan 1.3): two
   site-wide definitions would mix in the cascade. tests/hira/hira-sheets.test.mjs checks that it stays out of this file
   and that its numbers stay large text in tel: links. */

/* ---------- Sheet base ---------- */
.hira-sheet{color:var(--sillon-encre);font-family:var(--f-texte)}
.hira-sheet .hs-i{width:18px;height:18px;flex:none}
.hira-sheet h2{margin:8px 0 10px}
.hira-sheet .hs-eyebrow{margin:0 48px 0 0}
.hira-sheet .hs-lead{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--sillon-encre);overflow-wrap:anywhere}
.hira-sheet .hs-note{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--sillon-graphite)}
.hira-sheet .hs-tag{display:flex;align-items:flex-start;gap:8px;margin:6px 0 14px;font-size:13px;line-height:1.45;color:var(--sillon-graphite)}
.hira-sheet .hs-tag .hs-i{width:16px;height:16px;margin-top:1px}

/* Hira beside the title: one figure, static; the parent's Hira at 90 % */
.hira-sheet .hs-hero{display:flex;align-items:center;gap:16px;margin:0 0 6px;padding-right:44px}
.hira-sheet .hs-hira{width:96px;height:96px;flex:none;object-fit:contain}
.hira-sheet[data-audience=parent] .hs-hira{width:86px;height:86px}
.hira-sheet .hs-hero-text{min-width:0}
.hira-sheet .hs-hero h2{padding-right:0}

/* About: the three check lines */
.hira-sheet .hs-checks{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.hira-sheet .hs-checks li{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--sillon-filet);border-radius:var(--radius-tile);background:var(--sillon-papier);font-size:15px;line-height:1.5}
.hira-sheet .hs-checks .hs-i{width:20px;height:20px;margin-top:1px;stroke-width:2;color:var(--sillon-encre)}

/* ---------- Rows: a diploma, a continuation's place, a result ---------- */
.hira-sheet .hs-rows{display:grid;gap:10px;margin:10px 0 0;padding:0;list-style:none}
.hira-sheet .hs-row{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;margin:0;padding:12px 14px 12px 16px;border:1px solid var(--sillon-filet);border-radius:var(--radius-tile);background:var(--sillon-feuille);box-shadow:none;color:var(--sillon-encre);font:inherit;text-align:left;text-decoration:none}
.hira-sheet button.hs-row,.hira-sheet a.hs-row{cursor:pointer}
.hira-sheet button.hs-row:hover,.hira-sheet a.hs-row:hover{border-color:var(--sillon-encre);box-shadow:inset 0 0 0 1px var(--sillon-encre)}
.hira-sheet .hs-row-body{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.hira-sheet .hs-row-title{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.hira-sheet .hs-row-kicker{font-family:var(--f-data);font-size:var(--data-size);font-weight:var(--data-weight);font-stretch:var(--data-stretch);letter-spacing:var(--data-tracking);text-transform:uppercase;line-height:1.4;color:var(--sillon-graphite)}
.hira-sheet .hs-row-meta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;line-height:1.4;color:var(--sillon-graphite)}
.hira-sheet .hs-row-meta .hs-i{width:15px;height:15px}
.hira-sheet .hs-row>.hs-i-chevron{color:var(--sillon-graphite)}
.hira-sheet .hs-row>.hs-i-building{width:22px;height:22px;align-self:flex-start;margin-top:2px;color:var(--sillon-encre)}
.hira-sheet a.hs-row>.hs-i-external{color:var(--sillon-bleu)}
/* A published diploma: a short solid encre stroke on the left of its row */
.hira-sheet .hs-row-line{flex:none;align-self:stretch;width:5px;min-height:28px;border-radius:3px;background:var(--sillon-encre)}
.hira-sheet .hs-near .hs-row-meta{color:var(--sillon-encre)}
.hira-sheet .hs-facts{display:flex;flex-wrap:wrap;gap:6px}
.hira-sheet .hs-fact{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid var(--sillon-filet-fort);border-radius:var(--radius-chip);background:var(--sillon-feuille);font-size:12px;font-weight:700;line-height:1.35;color:var(--sillon-encre)}
.hira-sheet .hs-fact .hs-i{width:14px;height:14px}

/* « Où continuer »: each continuation under a solid encre rule, its places below */
.hira-sheet .hs-group{margin:22px 0 0}
.hira-sheet .hs-group-title{margin:0;padding:0;font-size:inherit}
.hira-sheet .hs-group-head{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:6px 2px 8px;border:0;border-bottom:1.5px solid var(--sillon-encre);border-radius:0;background:none;color:var(--sillon-encre);font:inherit;text-align:left;cursor:pointer}
.hira-sheet .hs-group-head .hs-row-title{font-family:var(--f-titre);font-size:18px;font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);letter-spacing:var(--titre-tracking)}
.hira-sheet .hs-group-head:hover .hs-row-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hira-sheet .hs-scope{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.hira-sheet .hs-chip{min-height:44px;padding:8px 16px;font-size:14px;cursor:pointer}
.hira-sheet .hs-chip .hs-i{width:16px;height:16px}
.hira-sheet .hs-nothing{display:grid;justify-items:start;gap:4px;margin:6px 0 0}
.hira-sheet .hs-nothing .hs-tag{margin-bottom:6px;color:var(--sillon-encre)}

/* « Tout voir »: one section per kind, its published total in the data face */
.hira-sheet .hs-section{margin:22px 0 0}
.hira-sheet .hs-section h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 4px;font-size:19px}
.hira-sheet .hs-count{font-family:var(--f-data);font-size:var(--data-size);font-weight:var(--data-weight);font-stretch:var(--data-stretch);letter-spacing:var(--data-tracking);color:var(--sillon-graphite)}
.hira-sheet .hs-postbac{margin:18px 0 0}

/* ---------- Links, actions, gaps ---------- */
.hira-sheet .hs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 0}
.hira-sheet .hs-actions .btn .hs-i{width:18px;height:18px}
.hira-sheet .hs-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:700}
.hira-sheet .hs-link .hs-i{width:16px;height:16px}
.hira-sheet .hs-onisep{margin:0 0 6px}
.hira-sheet .hs-onisep:empty{display:none}
/* Not documented here: a pencil station, never an alarm */
.hira-sheet .hs-gap{display:flex;align-items:center;gap:10px;margin:16px 0 8px;font-size:15px;font-weight:700;line-height:1.4}
.hira-sheet .hs-missing{margin:6px 0 0}

/* Loading: dashed pencil rows, not animated */
.hira-sheet .hs-skeleton{display:grid;gap:10px;margin:12px 0 0}
.hira-sheet .hs-skeleton-row{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;border:1.5px dashed var(--sillon-filet-fort);border-radius:var(--radius-tile)}
.hira-sheet .hs-skeleton-row .trait-crayon{width:28px;min-width:0}
.hira-sheet .hs-skeleton-bar{flex:1;max-width:55%;height:3px;background-image:radial-gradient(circle,var(--sillon-graphite) 1.3px,transparent 1.5px);background-position:0 50%;background-repeat:repeat-x;background-size:8px 3px;opacity:.55}

/* Inline state: a sunken card (never the word « erreur », never red) */
.hira-sheet .hs-state{margin:14px 0 0;padding:18px;border:1px solid var(--sillon-filet);border-radius:var(--radius-tile);background:var(--sillon-papier);box-shadow:inset 0 2px 6px -4px var(--sillon-filet-fort)}
.hira-sheet .hs-state p{margin:0 0 6px}
.hira-sheet .hs-state-title{font-size:16px;font-weight:700}
.hira-sheet .hs-state-line{font-size:14px;color:var(--sillon-graphite)}
.hira-sheet .hs-state-detail summary{display:list-item;min-height:44px;padding:12px 0;box-sizing:border-box;font-size:14px;line-height:20px;color:var(--sillon-graphite);cursor:pointer}
.hira-sheet .hs-state-detail p{font-family:var(--f-data);font-size:12px;color:var(--sillon-graphite);overflow-wrap:anywhere}
.hira-sheet .hs-retry{margin-top:8px}

/* Career: the site's evidence block below the title and the Onisep link */
.hira-sheet .hs-evidence{margin-top:6px}

/* ---------- Réglages de Hira ---------- */
.hira-sheet .hs-fields{display:grid;gap:16px;margin:14px 0 4px}
.hira-sheet .hs-support{margin:14px 0 4px}
.hira-sheet .hs-field{display:grid;gap:6px;margin:0}
.hira-sheet .hs-field-label{font-size:14px;font-weight:700}
.hira-sheet select,.hira-sheet input[type=text]{width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid var(--sillon-filet-fort);border-radius:var(--radius-small);background:var(--sillon-feuille);color:var(--sillon-encre);font:inherit;font-size:16px}
.hira-sheet select:hover,.hira-sheet input[type=text]:hover{border-color:var(--sillon-encre)}
.hira-sheet input[type=text]::placeholder{color:var(--sillon-graphite);opacity:1}
.hira-sheet .hs-check{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;font-size:15px;font-weight:700;cursor:pointer}
/* style.css gives every dialog input the full width: the box keeps its own size */
.hira-sheet .hs-check input{flex:none;width:22px;height:22px;margin:0;padding:0;accent-color:var(--sillon-encre);cursor:pointer}
.hira-sheet .hs-envies{display:grid;justify-items:start;gap:10px;margin:14px 0 0}
.hira-sheet .hs-envie-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.hira-sheet .hs-envie{white-space:normal;line-height:1.35}
.hira-sheet .hs-status{min-height:1.5em;margin:12px 0 0;font-size:15px;font-weight:700}

@media(max-width:560px){
  .hira-sheet .hs-hero{align-items:flex-start;flex-direction:column;gap:8px}
  .hira-sheet .hs-hira{width:72px;height:72px}
  .hira-sheet[data-audience=parent] .hs-hira{width:65px;height:65px}
  .hira-sheet .hs-row{gap:10px;padding:12px}
  .hira-sheet .hs-actions .btn{flex:1 1 auto}
}