/* ══════════════════════════════════════════════════════════
   Dressing — feuille de styles
   Palette écru / chocolat / olive / camel / marine
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:#EDE7DC;
  --bg-deep:#E3DACB;
  --surface:#FBF7F0;
  --surface-2:#F3ECE0;
  --ink:#2A2118;
  --ink-2:#6E6053;
  --ink-3:#9A8B7B;
  --line:#DCD1BF;
  --line-soft:#E7DECE;
  --brand:#4E3626;
  --brand-ink:#FBF7F0;
  --olive:#6B7248;
  --camel:#B98B52;
  --navy:#2C3A4F;
  --danger:#9B3B2E;

  --wood-1:#8A6A4B;
  --wood-2:#6F5238;
  --wood-3:#543D28;
  --rod-1:#D9BE95;
  --rod-2:#A98453;
  --rod-3:#7A5B36;
  --cabinet-1:#E6DCCA;
  --cabinet-2:#D8CBB4;
  --cabinet-3:#CBBBA0;

  --shadow-sm:0 1px 2px rgba(52,36,22,.10);
  --shadow-md:0 6px 18px -6px rgba(52,36,22,.28);
  --shadow-lg:0 18px 40px -18px rgba(52,36,22,.45);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --tabbar-h:62px;
  --safe-b:env(safe-area-inset-b, 0px);

  /* Piles système uniquement : l'application doit fonctionner hors ligne,
     donc aucune police distante. Noto Serif est la serif d'Android. */
  --font:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16120E;
    --bg-deep:#100D0A;
    --surface:#211A14;
    --surface-2:#2A2219;
    --ink:#F1E9DC;
    --ink-2:#B6A794;
    --ink-3:#8A7B69;
    --line:#3A2F24;
    --line-soft:#2F261D;
    --brand:#D5B189;
    --brand-ink:#241B13;
    --olive:#96A06A;
    --camel:#D3A268;
    --navy:#8FA6C4;
    --danger:#D9705E;

    --wood-1:#6B4F35;
    --wood-2:#4E3826;
    --wood-3:#352518;
    --rod-1:#B9945F;
    --rod-2:#8A6B41;
    --rod-3:#5E4529;
    --cabinet-1:#241C15;
    --cabinet-2:#1C150F;
    --cabinet-3:#150F0A;

    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow-md:0 6px 18px -6px rgba(0,0,0,.6);
    --shadow-lg:0 18px 40px -18px rgba(0,0,0,.85);
  }
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16120E;
  --bg-deep:#100D0A;
  --surface:#211A14;
  --surface-2:#2A2219;
  --ink:#F1E9DC;
  --ink-2:#B6A794;
  --ink-3:#8A7B69;
  --line:#3A2F24;
  --line-soft:#2F261D;
  --brand:#D5B189;
  --brand-ink:#241B13;
  --olive:#96A06A;
  --camel:#D3A268;
  --navy:#8FA6C4;
  --danger:#D9705E;
  --wood-1:#6B4F35;
  --wood-2:#4E3826;
  --wood-3:#352518;
  --rod-1:#B9945F;
  --rod-2:#8A6B41;
  --rod-3:#5E4529;
  --cabinet-1:#241C15;
  --cabinet-2:#1C150F;
  --cabinet-3:#150F0A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 6px 18px -6px rgba(0,0,0,.6);
  --shadow-lg:0 18px 40px -18px rgba(0,0,0,.85);
}

[data-theme="light"]{ color-scheme:light; }

*,*::before,*::after{ box-sizing:border-box; }

/* `.btn{display:flex}` l'emporterait sinon sur la règle [hidden] du navigateur */
[hidden]{ display:none !important; }

/* Toute grille à une seule colonne doit pouvoir rétrécir sous la taille
   de son contenu, sinon elle déborde en largeur sur un écran étroit. */
.outfit,.slot__body,.outfit__footer,.monthlist,.sheet__body,.detail,
.detail__acts,.field,.setting__txt,.photopick,.tab,.history{
  grid-template-columns:minmax(0,1fr);
}

html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
button{ font:inherit; color:inherit; }
input{ font:inherit; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

.muted{ color:var(--ink-2); }
.small{ font-size:12.5px; }

/* ─────────── Shell ─────────── */

.app{
  height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

.screen{
  grid-row:1;
  grid-column:1;
  min-height:0;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.screen[hidden]{ display:none; }

.scrollarea{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ─────────── Topbar ─────────── */

.topbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:max(14px, env(safe-area-inset-top)) 16px 12px;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:5;
}
.topbar__titles{ flex:1; min-width:0; }
.topbar__title{
  margin:0;
  font-family:var(--font);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.1;
}
.topbar__sub{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar__actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ─────────── Boutons ─────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:var(--surface);
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn svg{ font-size:16px; stroke-width:2; }
.btn--sm{ padding:8px 13px; font-size:13.5px; }
.btn--primary{ background:var(--brand); color:var(--brand-ink); }
.btn--ghost{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn--danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); background:transparent; }
.btn--block{ display:flex; width:100%; }

.iconbtn{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .12s ease;
}
.iconbtn svg{ font-size:18px; }
.iconbtn:active{ transform:scale(.93); }

.addbtn{
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px dashed var(--line);
  background:transparent;
  color:var(--ink-2);
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
}
.addbtn svg{ font-size:15px; stroke-width:2.2; }
.addbtn:active{ transform:scale(.92); }

/* ─────────── Chips catégories ─────────── */

.chips{
  display:flex;
  gap:7px;
  padding:11px 16px;
  overflow-x:auto;
  scrollbar-width:none;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:4;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-2);
  border-radius:999px;
  padding:6px 13px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.chip .n{ opacity:.55; font-weight:500; margin-left:3px; }
.chip.is-active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.chip.is-active .n{ opacity:.65; }

/* ══════════════════════════════════════════════════════════
   LA GARDE-ROBE
   ══════════════════════════════════════════════════════════ */

.wardrobe{
  flex:1;
  min-height:0;
  min-width:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:
    linear-gradient(180deg, var(--cabinet-3) 0%, var(--cabinet-2) 12%, var(--cabinet-1) 45%, var(--cabinet-2) 100%);
  position:relative;
}
/* panneaux verticaux du meuble */
.wardrobe::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.022) 0 1px,
    transparent 1px 118px
  );
  pointer-events:none;
}

.rail{
  position:relative;
  padding:24px 0 10px;
}
.rail + .rail{ border-top:1px solid rgba(0,0,0,.07); }

.rail__label{
  position:absolute;
  top:9px; left:16px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--wood-3);
  opacity:.62;
  z-index:3;
  pointer-events:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rail__label{ color:var(--rod-1); opacity:.5; }
}
[data-theme="dark"] .rail__label{ color:var(--rod-1); opacity:.5; }

/* ── la tringle ── */
.rail__rod{
  position:absolute;
  left:0; right:0;
  top:var(--rod-top, 71px);
  height:9px;
  z-index:1;
  background:linear-gradient(180deg,
    var(--rod-1) 0%,
    var(--rod-2) 42%,
    var(--rod-3) 78%,
    var(--rod-2) 100%);
  box-shadow:0 3px 7px -2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  pointer-events:none;
}
/* embouts */
.rail__rod::before,
.rail__rod::after{
  content:"";
  position:absolute;
  top:-5px; width:11px; height:19px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--rod-1), var(--rod-3));
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.rail__rod::before{ left:0; }
.rail__rod::after{ right:0; }

/* ── piste de défilement ── */
.rail__track{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:26px 16px 4px;
}
.rail__track::-webkit-scrollbar{ display:none; }

/* ══ UN CINTRE ══ */

.hanger{
  --tilt:0deg;
  position:relative;
  flex:0 0 156px;
  min-width:0;
  width:156px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  scroll-snap-align:center;
  transform-origin:50% 24px;
  transform:rotate(var(--tilt));
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  /* Aucun filtre de profondeur ici. Assombrir et désaturer les pièces qui
     ne sont pas au centre les faisait toutes paraître fades, sur des photos
     d'intérieur déjà plates. L'échelle, l'inclinaison et l'ombre portée
     suffisent à détacher la pièce centrale. */
  text-align:center;
}
.hanger + .hanger{ margin-left:-30px; }
.hanger.is-front{
  transform:rotate(0deg) translateY(-7px) scale(1.045);
  z-index:60 !important;
}
.hanger:active{ transform:rotate(0deg) translateY(-2px) scale(1.01); }

.hanger__hw{
  position:absolute;
  top:0; left:0;
  width:156px; height:82px;
  z-index:1;
  pointer-events:none;
  overflow:visible;
  color:var(--wood-2);
}
.hanger__hw path{
  fill:none;
  stroke:currentColor;
  stroke-width:4.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
.hanger__hw .hook{ stroke-width:4.2; color:#9AA0A6; stroke:#9AA0A6; }

.hanger__garment{
  position:relative;
  z-index:2;
  margin:54px auto 0;
  width:97px;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--surface-2);
  /* épaules taillées : le cintre réapparaît dans les angles */
  clip-path:polygon(0 10%, 17% 0, 83% 0, 100% 10%, 100% 97%, 96% 100%, 4% 100%, 0 97%);
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.42));
}
.hanger__garment img{
  width:100%; height:100%;
  object-fit:cover;
}
/* pli de tissu : un léger dégradé latéral */
.hanger__garment::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(0,0,0,.16) 0%,
    rgba(255,255,255,.06) 34%,
    rgba(0,0,0,.03) 62%,
    rgba(0,0,0,.15) 100%);
  pointer-events:none;
}
.hanger__ph{
  width:100%; height:100%;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink-3) 12%, transparent) 0 6px,
      transparent 6px 12px),
    var(--surface-2);
  color:var(--ink-3);
  font-size:22px;
}

.hanger__meta{
  margin-top:9px;
  padding:0 6px;
}
.hanger__brand{
  font-size:12px;
  font-weight:700;
  color:var(--wood-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.hanger__type{
  font-size:10.5px;
  color:var(--wood-2);
  opacity:.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hanger__brand{ color:#E9DCC8; }
  :root:not([data-theme="light"]) .hanger__type{ color:#B9A98F; }
}
[data-theme="dark"] .hanger__brand{ color:#E9DCC8; }
[data-theme="dark"] .hanger__type{ color:#B9A98F; }

.hanger__worn{
  display:inline-block;
  margin-top:3px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.04em;
  padding:1px 6px;
  border-radius:999px;
  background:color-mix(in srgb, var(--olive) 26%, transparent);
  color:var(--wood-3);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hanger__worn{ color:#E3D9C6; }
}
[data-theme="dark"] .hanger__worn{ color:#E3D9C6; }

/* ── étagère (chaussures / accessoires) ── */

.shelf{ position:relative; padding:24px 0 22px; }
.shelf__plank{
  position:absolute;
  left:0; right:0;
  top:var(--plank-top, 138px);
  height:15px;
  z-index:1;
  background:linear-gradient(180deg,
    var(--wood-1) 0%, var(--wood-1) 34%, var(--wood-2) 46%, var(--wood-3) 100%);
  box-shadow:0 8px 14px -5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  pointer-events:none;
}
.shelf__track{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:30px 16px 0;
}
.shelf__track::-webkit-scrollbar{ display:none; }

.shoe{
  flex:0 0 auto;
  width:118px;
  border:0; padding:0; background:none;
  cursor:pointer;
  scroll-snap-align:center;
  text-align:center;
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.shoe.is-front{ z-index:60; }
/* on agrandit depuis la ligne de contact : la chaussure reste posée sur l'étagère */
.shoe__frame{ transition:transform .25s cubic-bezier(.2,.8,.3,1); transform-origin:50% 100%; }
.shoe.is-front .shoe__frame{ transform:scale(1.05); }
.shoe:active .shoe__frame{ transform:scale(1.02); }
.shoe__frame{
  width:118px;
  aspect-ratio:4/3;
  border-radius:9px 9px 3px 3px;
  overflow:hidden;
  background:var(--surface-2);
  box-shadow:
    0 14px 12px -10px rgba(0,0,0,.75),
    0 3px 4px rgba(0,0,0,.22);
}
.shoe__frame img{ width:100%; height:100%; object-fit:cover; }
.shoe__meta{ margin-top:18px; }

/* ── vide ── */
.empty{
  padding:46px 26px;
  text-align:center;
  color:var(--ink-2);
}
.empty__ico{ font-size:40px; opacity:.45; margin-bottom:10px; display:block; }
.empty h3{ margin:0 0 5px; font-family:var(--font); font-size:19px; color:var(--ink); font-weight:600; }
.empty p{ margin:0 auto; max-width:31ch; font-size:13.5px; }
.empty__acts{
  display:grid;
  gap:8px;
  max-width:250px;
  margin:18px auto 0;
}

/* ══════════════════════════════════════════════════════════
   TENUE DU JOUR
   ══════════════════════════════════════════════════════════ */

.outfit{ padding:16px 16px calc(28px + var(--safe-b)); display:grid; gap:16px; }

.outfit__hero{
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.hero__photo{
  aspect-ratio:4/5;
  max-height:46dvh;
  background:var(--surface-2);
  position:relative;
  overflow:hidden;
}
.hero__photo img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:11px;
  border-top:1px solid var(--line-soft);
}
/* Trois boutons tiennent sur une ligne large, passent à deux lignes sinon. */
.hero__actions .btn{ flex:1 1 120px; min-width:0; }

/* Silhouette détourée : plus de cadrage forcé, la personne se
   tient debout sur le bord bas, avec son ombre. */
.hero__photo.is-cut{
  aspect-ratio:auto;
  max-height:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px 12px 0;
}
.hero__photo.is-cut img{
  position:static;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:44dvh;
  object-fit:contain;
  filter:drop-shadow(0 11px 10px rgba(0,0,0,.42));
}
.day.is-cut img, .mrow__th.is-cut img, .day__mini.is-cut img{ object-fit:contain; }

/* Sans photo, l'encart se réduit à une simple invitation. */
.outfit__hero.is-empty{
  border-style:dashed;
  background:transparent;
  box-shadow:none;
}
.outfit__hero.is-empty .hero__photo{ display:none; }
.outfit__hero.is-empty .hero__actions{ border-top:0; padding:7px; }

.slot{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:13px 14px 14px;
  box-shadow:var(--shadow-sm);
}
.slot__head{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.slot__title{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  font-weight:600;
}
.slot__hint{ flex:1; font-size:11px; color:var(--ink-3); }
.slot__head .addbtn{ margin-left:auto; }
.slot__hint + .addbtn{ margin-left:0; }
.slot__body{ display:grid; gap:9px; }
.slot__empty{
  font-size:13px;
  color:var(--ink-3);
  padding:10px 2px;
  font-style:italic;
}

.pick{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
}
.pick__idx{
  width:20px; height:20px;
  flex-shrink:0;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--brand);
  color:var(--brand-ink);
  font-size:11px;
  font-weight:800;
}
.pick__thumb{
  width:46px; height:58px;
  flex-shrink:0;
  border-radius:7px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-soft);
}
.pick__thumb img{ width:100%; height:100%; object-fit:cover; }
.pick__txt{ flex:1; min-width:0; }
.pick__brand{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick__type{ font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick__tools{ display:flex; gap:3px; flex-shrink:0; }
.pick__tool{
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:8px;
  cursor:pointer;
  color:var(--ink-2);
}
.pick__tool svg{ font-size:14px; }
.pick__tool:disabled{ opacity:.3; }
.pick__tool--del{ color:var(--danger); }

.field{ display:grid; gap:5px; border:0; padding:0; margin:0; min-width:0; }
.field__label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:0;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="number"],
.field input:not([type]){
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--ink);
}
.field input:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.field--note input{ background:var(--surface); }

.inputwrap{ position:relative; }
.inputwrap input{ padding-right:32px !important; }
.inputwrap__suffix{
  position:absolute; right:13px; top:50%;
  transform:translateY(-50%);
  color:var(--ink-2);
  font-size:14px;
  pointer-events:none;
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }

.outfit__footer{ display:grid; gap:9px; margin-top:2px; }

/* ══════════════════════════════════════════════════════════
   HISTORIQUE
   ══════════════════════════════════════════════════════════ */

.history{ padding:16px 16px calc(28px + var(--safe-b)); }
.history__month{
  margin:0 0 13px;
  font-family:var(--font);
  font-size:20px;
  font-weight:600;
  text-transform:capitalize;
}
.cal{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:11px;
  box-shadow:var(--shadow-sm);
}
.cal__dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  margin-bottom:6px;
}
.cal__dow span{
  text-align:center;
  font-size:10.5px;
  font-weight:700;
  color:var(--ink-3);
  letter-spacing:.05em;
}
.cal__grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
}
.day{
  position:relative;
  aspect-ratio:3/4;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:var(--surface-2);
  overflow:hidden;
  padding:0;
  cursor:default;
  color:var(--ink-3);
}
.day--void{ border:0; background:none; }
.day--has{ cursor:pointer; border-color:transparent; }
.day img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.day__n{
  position:absolute;
  top:2px; left:3px;
  font-size:10px;
  font-weight:700;
  z-index:2;
  line-height:1.3;
}
.day--has .day__n{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.day--today{ box-shadow:inset 0 0 0 2px var(--brand); }
.day--future{ opacity:.4; }
.day__mini{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  z-index:1;
}
.day__mini img{ position:static; width:100%; height:100%; }
.day__mini--1{ grid-template-columns:1fr; }

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:9px;
  margin:14px 0 4px;
}
.stat{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:11px 12px;
}
.stat__v{ font-family:var(--font); font-size:23px; font-weight:600; line-height:1.05; }
.stat__k{ font-size:11px; color:var(--ink-2); margin-top:2px; }

.monthlist{ display:grid; gap:9px; margin-top:16px; }
.mrow{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  width:100%;
}
.mrow__th{
  width:48px; height:60px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--surface-2);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.mrow__th img{ width:100%; height:100%; object-fit:cover; }
.mrow__th--1{ grid-template-columns:1fr; }
.mrow__d{ font-size:13.5px; font-weight:700; text-transform:capitalize; }
.mrow__s{ font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow__txt{ min-width:0; flex:1; }

/* ══════════════════════════════════════════════════════════
   TABBAR
   ══════════════════════════════════════════════════════════ */

.tabbar{
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
  z-index:20;
}
.tab{
  border:0; background:none;
  display:grid;
  justify-items:center;
  gap:2px;
  padding:9px 4px 8px;
  cursor:pointer;
  color:var(--ink-3);
  font-size:10.5px;
  font-weight:600;
}
.tab svg{ font-size:21px; stroke-width:1.6; }
.tab.is-active{ color:var(--brand); }
.tab.is-active svg{ stroke-width:2; }

/* ══════════════════════════════════════════════════════════
   FEUILLES / DIALOGUES
   ══════════════════════════════════════════════════════════ */

.sheet{
  border:0;
  padding:0;
  background:transparent;
  max-width:100vw;
  max-height:100dvh;
  width:100%;
  margin:auto auto 0;
  color:var(--ink);
}
.sheet::backdrop{ background:rgba(20,13,8,.55); backdrop-filter:blur(2px); }

.sheet__inner{
  background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:sheetUp .26s cubic-bezier(.2,.8,.3,1);
}
.sheet--full .sheet__inner{ height:94dvh; max-height:94dvh; }
@keyframes sheetUp{ from{ transform:translateY(18px); opacity:.4; } }

.sheet__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  flex-shrink:0;
}
.sheet__title{
  flex:1;
  margin:0;
  text-align:center;
  font-family:var(--font);
  font-size:17px;
  font-weight:600;
}
.sheet__spacer{ width:38px; flex-shrink:0; }
.sheet__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 16px calc(24px + var(--safe-b));
  display:grid;
  gap:15px;
  align-content:start;
}

/* photo picker */
.photopick{ display:grid; gap:10px; justify-items:center; }
.photopick__frame{
  width:150px;
  aspect-ratio:3/4;
  border-radius:var(--r-md);
  overflow:hidden;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink-3) 10%, transparent) 0 7px,
      transparent 7px 14px),
    var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  position:relative;
}
.photopick__frame img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.photopick__empty{ font-size:12px; color:var(--ink-3); }
.photopick__btns{ display:flex; gap:8px; }

/* segmented */
.seg{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.seg button{
  flex:1 1 auto;
  min-width:78px;
  padding:9px 10px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--r-md);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink-2);
}
.seg button.is-active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.seg button:disabled{ opacity:.4; cursor:not-allowed; }
.seg--two button, .seg--three button{ min-width:0; }
.seg--four{ display:grid; grid-template-columns:1fr 1fr; }
.seg--four button{ min-width:0; }

.search{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink);
}

.pickgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:11px;
}
.pcard{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  cursor:pointer;
  padding:0;
  text-align:left;
}
.pcard.is-picked{ outline:2px solid var(--brand); outline-offset:-2px; }
.pcard__img{
  aspect-ratio:3/4;
  background:var(--surface-2);
  position:relative;
}
.pcard__img img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.pcard__ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--ink-3); font-size:20px; }
.pcard__txt{ padding:6px 8px 8px; }
.pcard__b{ font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard__t{ font-size:10.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* fiche item */
.detail{ display:grid; gap:14px; }
.detail__photo{
  width:100%;
  max-height:40dvh;
  aspect-ratio:3/4;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-2);
  position:relative;
}
.detail__photo img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.detail__h{ text-align:center; }
.detail__brand{ font-family:var(--font); font-size:21px; font-weight:600; }
.detail__model{ color:var(--ink-2); font-size:13.5px; }
.kv{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
.kv__i{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:10px 12px;
}
.kv__k{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.kv__v{ font-size:14.5px; font-weight:600; margin-top:2px; }
.kv__i--wide{ grid-column:1 / -1; }
.badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  background:color-mix(in srgb, var(--olive) 24%, transparent);
  color:var(--ink);
}
.badge--occ{ background:color-mix(in srgb, var(--camel) 30%, transparent); }
.detail__acts{ display:grid; gap:8px; }

/* réglages */
.setting{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:12px 13px;
}
.setting--stack{ flex-direction:column; align-items:stretch; gap:10px; }
.setting__txt{ display:grid; gap:2px; flex:1; min-width:0; }
.setting__txt strong{ font-size:14px; }
.setting__txt span{ font-size:12px; color:var(--ink-2); }
.setting__btns{ display:flex; gap:8px; }
.setting__btns .btn{ flex:1; }
.setting .seg{ flex:0 0 auto; }
.setting .seg button{ min-width:56px; padding:7px 9px; font-size:12px; }

/* ══════════════════════════════════════════════════════════
   MOODBOARD
   ══════════════════════════════════════════════════════════ */

/* Mosaïque : les colonnes CSS laissent chaque photo à sa hauteur,
   ce qui donne au défilement le rythme d'une vraie planche. */
.board{
  column-count:2;
  column-gap:11px;
  padding:14px 16px calc(24px + var(--safe-b));
}
@media (min-width:620px){ .board{ column-count:3; max-width:820px; margin:0 auto; } }

.insp{
  break-inside:avoid;
  display:block;
  width:100%;
  margin:0 0 11px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease;
}
.insp:active{ transform:scale(.985); }
/* La mosaïque garde des hauteurs libres : c'est ce qui lui donne son
   rythme. On réserve la place via le ratio réel de chaque photo. */
.insp__img{ position:relative; background:var(--surface-2); }
.insp__img img{ width:100%; height:auto; display:block; }
.insp__count{
  position:absolute; top:7px; right:7px;
  font-family:var(--mono, inherit);
  font-size:10.5px; font-weight:700;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(20,14,9,.72);
  color:#fff;
  backdrop-filter:blur(4px);
}
.insp__body{ padding:9px 11px 11px; }
.insp__title{
  font-family:var(--font);
  font-size:14.5px;
  font-weight:600;
  line-height:1.25;
}
.insp__tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.tag{
  font-size:10.5px;
  font-weight:600;
  padding:2px 7px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  color:var(--ink-2);
  white-space:nowrap;
}
.tag--pending{ font-style:italic; opacity:.75; }

/* photos dans le formulaire */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.shot{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot__del{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px;
  display:grid; place-items:center;
  border:0; border-radius:999px;
  background:rgba(20,14,9,.72);
  color:#fff;
  cursor:pointer;
}
.shot__del svg{ font-size:13px; stroke-width:2.4; }
.shots__empty{
  grid-column:1/-1;
  text-align:center;
  font-size:13px;
  color:var(--ink-3);
  padding:26px 0;
  font-style:italic;
}

/* fiche d'une inspiration */
.ipics{
  display:flex;
  gap:9px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  margin:0 -16px;
  padding:0 16px;
}
.ipics::-webkit-scrollbar{ display:none; }
/* Ratio figé : sans lui, la fiche saute au moment où les images
   se décodent, et la première capture peut tomber sur du vide. */
.ipic{
  flex:0 0 auto;
  width:78%;
  max-width:300px;
  aspect-ratio:3/4;
  scroll-snap-align:center;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.ipic img{ width:100%; height:100%; object-fit:cover; display:block; }

.sect{ display:grid; gap:9px; }
.sect__h{
  font-family:var(--font);
  font-size:16px;
  font-weight:600;
  margin:0;
}
.sect__n{ font-size:12.5px; color:var(--ink-2); margin:0; }

.palette{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.teinte{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--ink-2);
}
.teinte i{
  width:13px; height:13px;
  border-radius:3px;
  border:1px solid var(--line);
  flex:0 0 auto;
}
.teinte b{ color:var(--ink); font-weight:600; }

.labels{ display:flex; flex-wrap:wrap; gap:6px; }
.label{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
}
.label i{ font-style:normal; font-size:10.5px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.mgroup{ display:grid; gap:7px; }
.mgroup__h{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.mrow2{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  width:100%;
  text-align:left;
  cursor:pointer;
}
.mrow2__t{
  width:40px; height:50px;
  flex-shrink:0;
  border-radius:6px;
  overflow:hidden;
  background:var(--surface-2);
}
.mrow2__t img{ width:100%; height:100%; object-fit:cover; }
.mrow2__t.is-cut img{ object-fit:contain; }
.mrow2__x{ flex:1; min-width:0; }
.mrow2__b{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow2__s{ font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meter{
  flex:0 0 46px;
  height:5px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.meter i{ display:block; height:100%; background:var(--olive); }

/* ══════════════════════════════════════════════════════════
   DÉTOURAGE
   ══════════════════════════════════════════════════════════ */

.cutcompare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.cutpane{ margin:0; display:grid; gap:6px; }
.cutpane figcaption{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
}
.cutpane__img{
  aspect-ratio:3/4;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  overflow:hidden;
  position:relative;
}
.cutpane__img img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:contain;
}
/* damier : c'est lui qui rend la transparence lisible */
.cutpane__img--alpha{
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg, var(--line-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line-soft) 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0;
}

.cutstatus{ display:grid; gap:8px; }
.cutstatus__msg{
  margin:0;
  font-size:13.5px;
  color:var(--ink-2);
  text-align:center;
}
.bar{
  height:5px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:999px;
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--brand);
  transition:width .25s ease;
}

.warnline{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
  background:color-mix(in srgb, var(--camel) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--camel) 40%, transparent);
  border-radius:var(--r-md);
  padding:10px 13px;
}

.cutacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.cutacts .btn:disabled{ opacity:.45; }

/* ── Pièces détourées : plus de cadre, l'ombre suit la silhouette ── */

.hanger__garment.is-cut{
  background:none;
  clip-path:none;
  /* Plus large que la photo encadrée : la transparence laisse
     de toute façon le cintre apparaître autour de la silhouette. */
  width:132px;
  margin-top:44px;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
.hanger__garment.is-cut::after{ content:none; }
.hanger__garment.is-cut img{ object-fit:contain; }

.shoe__frame.is-cut{
  background:none;
  box-shadow:none;
  border-radius:0;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.55));
}
.shoe__frame.is-cut img{ object-fit:contain; }

.pcard__img.is-cut{ background:var(--surface); }
.pcard__img.is-cut img{ object-fit:contain; }
.pick__thumb.is-cut{ background:var(--surface); }
.pick__thumb.is-cut img{ object-fit:contain; }
.detail__photo.is-cut{ background:var(--surface-2); }
.detail__photo.is-cut img{ object-fit:contain; }
.photopick__frame.is-cut{ background:var(--surface-2); }
.photopick__frame.is-cut img{ object-fit:contain; }

/* toast */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabbar-h) + 18px + var(--safe-b));
  transform:translate(-50%,14px);
  background:var(--ink);
  color:var(--bg);
  padding:10px 17px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:999;
  max-width:calc(100vw - 32px);
  text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (min-width:560px){
  .outfit, .history{ max-width:620px; margin:0 auto; }
  .hero__photo{ max-height:50dvh; }
}

/* ══════════════════════════════════════════════════════════
   TEINTES
   ══════════════════════════════════════════════════════════ */

/* Pastille de couleur : un repère, pas une décoration. Le liseré lui donne
   un bord même quand la teinte se confond avec le fond — un blanc cassé sur
   fond écru disparaîtrait sans lui. */
.teinte__pt{
  display:inline-block;
  width:9px; height:9px;
  border-radius:999px;
  margin-right:5px;
  vertical-align:baseline;
  border:1px solid rgba(0,0,0,.22);
  flex:0 0 auto;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .teinte__pt{ border-color:rgba(255,255,255,.28); }
}
[data-theme="dark"] .teinte__pt{ border-color:rgba(255,255,255,.28); }

.teinte__pt--gros{ width:13px; height:13px; margin-right:7px; }
.kv__v--teinte{ display:flex; align-items:center; }
.kv__v--teinte::first-letter{ text-transform:uppercase; }

/* Seconde rangée de filtres : plus basse que celle des catégories, pour
   qu'on lise tout de suite laquelle commande quoi. */
.chips--teintes{
  padding-top:7px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line-soft);
}
.chips--teintes .chip{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  font-size:12.5px;
}
/* Capitale sur la première lettre seulement. `capitalize` la met à chaque
   mot et donne « Bleu Denim », « Vert Forêt » : deux majuscules là où le
   français n'en veut qu'une. */
.chip__nom::first-letter{ text-transform:uppercase; }
.chips--teintes .chip.is-active .teinte__pt{ border-color:rgba(255,255,255,.55); }

/* Ligne de teinte : centrée comme le reste de l'étiquette, et tronquée —
   un cintre fait 156 px et deux voisins se recouvrent de 30. */
.hanger__teinte{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-top:2px;
  font-size:10.5px;
  font-weight:600;
  color:var(--wood-2);
  white-space:nowrap;
  overflow:hidden;
}
.hanger__teinte .teinte__pt{ width:8px; height:8px; margin-right:0; }
.hanger__teinte .chip__nom{ overflow:hidden; text-overflow:ellipsis; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hanger__teinte{ color:#C6B79C; }
}
[data-theme="dark"] .hanger__teinte{ color:#C6B79C; }

/* Récapitulatif des teintes dans les réglages : c'est là qu'on voit d'un
   coup d'œil si l'indexation a tourné, et sur quoi elle est tombée. */
.teintes-vue{ display:flex; flex-wrap:wrap; gap:6px 13px; }
.teintes-vue:empty{ display:none; }
.teintes-vue .teinte{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-2); }
.teintes-vue .teinte i{ width:12px; height:12px; border-radius:3px; border:1px solid var(--line); flex:0 0 auto; }
.teintes-vue .teinte b{ color:var(--ink); font-weight:600; text-transform:capitalize; }

/* ── Nuancier de correction ── */

.nuancier{
  display:grid;
  /* 132 px au minimum : à 108, « anthracite » et « bleu denim » se
     faisaient couper. Deux colonnes lisibles valent mieux que trois
     tronquées. */
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:7px;
}
.nuance{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  min-width:0;
}
.nuance.is-active{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.nuance__pt{
  width:18px; height:18px;
  border-radius:999px;
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nuance__pt{ border-color:rgba(255,255,255,.28); }
}
[data-theme="dark"] .nuance__pt{ border-color:rgba(255,255,255,.28); }
.nuance__nom{
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nuance__nom::first-letter{ text-transform:uppercase; }

/* La ligne Teinte de la fiche est cliquable : elle doit le montrer sans
   ressembler à un bouton de plus au milieu des valeurs. */
.kv__i--btn{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  grid-column:1 / -1;
}
.kv__crayon{
  margin-left:auto;
  font-size:11.5px;
  font-weight:600;
  color:var(--brand);
  flex:0 0 auto;
}