/* Day log sheet (views/log.js) and body map (ui/bodymap.js). DESIGN.md v2 «Riso de butxaca». */

/* ---------- header: ‹ day ›  …  Fet ---------- */
.log-header { gap: var(--s-2); }
.log-dayswitch { flex: 1; min-width: 0; display: flex; align-items: center; margin-left: calc(-1 * var(--s-3)); }
.log-daynav {
  flex: none; appearance: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: transparent; color: var(--ink);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.log-daynav:active { transform: scale(.9); }
.log-daynav:disabled { opacity: .25; cursor: default; }
.sheet-header h3.log-heading {
  min-width: 0; flex: 0 1 auto;
  display: grid; gap: 1px; padding: 0 var(--s-1);
  font-size: var(--fs-lg); line-height: 1.05;
}
.log-rel {
  font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
  color: var(--menstrual-ink);
}
.log-date { overflow-wrap: anywhere; }   /* wraps with large text instead of losing the day number */
/* like the iOS navigation bar, the header text stops growing at the largest accessibility sizes,
   so ‹ date › and «Fet» always fit side by side on an SE (the body below keeps scaling) */
.sheet-header h3.log-heading { font-size: min(var(--fs-lg), 34px); }
.log-rel { font-size: min(var(--fs-xs), 20px); }
.log-header .btn.ghost { font-size: min(var(--fs-md), 26px); flex: none; }
.log-dayswitch .log-daynav { align-self: center; }

/* ---------- body ---------- */
/* Dynamic Type: every grid track may shrink below its content, so large text wraps instead of
   pushing the sheet wider than the screen (the sheet body is a grid of sheet.js). */
.log-sheet .sheet-body { grid-template-columns: minmax(0, 1fr); }
.log { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-bottom: var(--s-4); }
.log > *, .log-bleed > *, .log-cat > * { min-width: 0; }
.log .chip { max-width: 100%; }
.log .chip-label { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

.log-cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.log-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.log-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 750; letter-spacing: -.01em;
  min-width: 0; overflow-wrap: break-word; hyphens: auto;
}
.log-title svg { flex: none; }
.log-hint {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.35;
}
.log-hint svg { flex: none; margin-top: 1px; color: var(--ovulation-ink); }
.log-empty { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- period band: the one loud block of the sheet ---------- */
.log-bleed {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-2);
  border-radius: var(--r-lg);
  background: var(--menstrual-soft);
  box-shadow: inset 4px 0 0 var(--menstrual);
}
.log-bleed .log-title { font-size: var(--fs-lg); color: var(--menstrual-ink); }
.log-bleed .chip:not(.selected) { background: var(--bg); }
.log-bleed .chip.selected { --fill: 48%; }
.log-sub { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; color: var(--menstrual-ink); margin-top: var(--s-1); }
.log-drops path { fill: var(--menstrual-ink); }
.log-smear circle { fill: var(--menstrual-ink); }
.log-smear.brown circle { fill: color-mix(in oklab, var(--follicular-ink) 55%, var(--menstrual-ink)); }

.log-multi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--menstrual) 30%, transparent); }
.log-disclose {
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 0; color: var(--menstrual-ink); font-weight: 650; font-size: var(--fs-md); text-align: left;
}
.log-disclose svg { flex: none; }
.log-disclose svg { transition: transform var(--t-fast) var(--ease-out); }
.log-disclose[aria-expanded="true"] svg { transform: rotate(90deg); }
.log-multi-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; padding-bottom: var(--s-3); }
.log-multi-range { font-size: var(--fs-sm); color: var(--text-2); }
.log-multi-note { font-size: var(--fs-sm); color: var(--menstrual-ink); font-weight: 500; margin-top: calc(-1 * var(--s-2)); }

/* ---------- stepper (several days, sleep hours) ---------- */
.log-stepper { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; }
.log-step {
  appearance: none; border: 0; cursor: pointer; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 22%, transparent);
  font-size: var(--fs-lg); font-weight: 600; line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.log-step:active { transform: scale(.9); }
.log-step:disabled { opacity: .3; cursor: default; }
.log-step-value {
  min-width: min(5.5em, 36vw); text-align: center;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.02em;
}

/* ---------- sleep hours ---------- */
.log-hours {
  /* label and stepper side by side; with large text the stepper drops under the label */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  border-radius: var(--r-lg); background: var(--surface-2);
}
.log-hours-label { flex: 1 1 7em; min-width: 0; padding: var(--s-2) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); line-height: 1.2; }
.log-hours .log-step { background: var(--bg); box-shadow: none; color: var(--ink); }
.log-hours .log-stepper { gap: var(--s-1); margin-left: auto; }
.log-hours-field { display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 4.2em; }
.log-hours-input {
  width: 2.7em; min-height: 44px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink); text-align: right;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.02em;
}
.log-hours-input::placeholder { color: var(--text-3); opacity: 1; }
/* no hours yet: a centred dash, so it can't be mistaken for a saved value */
.log-hours-input:placeholder-shown { text-align: center; }
.log-hours-unit { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.log-hours.empty .log-hours-unit { color: var(--text-3); }
.log-hours-clear {
  flex-basis: 100%; text-align: left;
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 0; margin-top: calc(-1 * var(--s-2));
  color: var(--menstrual-ink); font-size: var(--fs-sm); font-weight: 600;
}

/* ---------- body map ---------- */
.bodymap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.bodymap-side { margin: 0; display: grid; justify-items: center; gap: var(--s-1); }
.bodymap-figure { width: 100%; max-width: 200px; height: auto; display: block; overflow: visible; }
.bodymap-side figcaption { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.bodymap-marked {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
}
.bodymap-marked li {
  display: inline-flex; align-items: baseline; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--menstrual-soft); color: var(--menstrual-ink);
  font-size: var(--fs-sm); line-height: 1.2;
}
.bodymap-marked-name { font-weight: 650; }
.bodymap-marked-level { color: var(--text-2); }

.bm-shadow > * { fill: var(--luteal); fill-opacity: .28; }
.bm-shadow { mix-blend-mode: multiply; }
.bm-body > * {
  fill: color-mix(in oklab, var(--ink) 3%, var(--bg));
  stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 1.5; stroke-linejoin: round;
}
.bm-eye { fill: var(--ink); }
.bm-cheek { fill: var(--menstrual); opacity: .4; }
.bm-smile { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.bm-hair { fill: var(--luteal); }
.bm-seams path { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 2.5 3; fill: none; }

.bm-region { cursor: pointer; outline: none; -webkit-touch-callout: none; }
.bm-hit { fill: transparent; pointer-events: all; }
.bm-ink { mix-blend-mode: multiply; pointer-events: none; }
.bm-ink .bm-shape { fill: var(--menstrual); fill-opacity: 0; transition: fill-opacity var(--t-fast); }
.bm-region.on .bm-ink .bm-shape { fill-opacity: var(--bm-fill); }
.bm-key { pointer-events: none; }
.bm-key .bm-shape { fill: none; stroke: none; }
.bm-region:active .bm-ink .bm-shape { fill-opacity: max(.15, var(--bm-fill)); }
.bm-region:focus-visible .bm-hit { stroke: var(--ovulation); stroke-width: 2.5; rx: 6; }
.bm-bars { pointer-events: none; }
.bm-bars-bg { fill: var(--bg); fill-opacity: .9; }
.bm-bars rect:not(.bm-bars-bg) { fill: var(--ink); opacity: .25; }
.bm-bars rect.on { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .bm-ink, .bm-shadow { mix-blend-mode: screen; }
}

/* ---------- custom tags ---------- */
.chip.log-tag-add { box-shadow: none; background: transparent; border: 1.5px dashed color-mix(in oklab, var(--ink) 40%, transparent); }
.chip.log-tag-add[aria-expanded="true"] { border-style: solid; }
.log-tag-form {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2);
  padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2);
}
.log-field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.log-tag-form > * { min-width: 0; }
.log-tag-form input[type="text"] {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit; font-size: var(--fs-md);
}
.log-tag-form input[type="text"]:focus-visible { outline: 3px solid var(--ovulation); outline-offset: 0; }
.log-swatches { display: flex; flex-wrap: wrap; gap: 0; margin-left: calc(-1 * var(--s-1)); }
.log-swatch {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0;
}
.log-swatch::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sw); mix-blend-mode: multiply;
  transition: box-shadow var(--t-fast);
}
.log-swatch[aria-checked="true"]::before { box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5.5px var(--ink); mix-blend-mode: normal; }
.log-tag-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-1); }
.log-tag-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
/* the small buttons of the sheet keep their look but get the full 44 pt touch zone (IOS-REVIEW B5) */
.log .btn.small { min-height: 44px; }
.log-tag-form .btn:disabled { opacity: .35; cursor: default; }
@media (prefers-color-scheme: dark) { .log-swatch::before { mix-blend-mode: normal; } }

/* ---------- note ---------- */
.log-note textarea {
  width: 100%; min-height: 6.5em; resize: vertical;
  padding: var(--s-3) var(--s-4);
  border: 0; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: max(16px, var(--fs-md)); line-height: 1.4;
}
.log-note textarea::placeholder { color: var(--text-3); }
.log-note textarea:focus-visible { outline: 3px solid var(--ovulation); outline-offset: 0; }
.log-note label { cursor: text; }

.log-clear-slot { display: grid; justify-items: start; }
.log-clear-slot[hidden] { display: none; }
.btn.ghost.log-clear { color: var(--danger); margin-left: calc(-1 * var(--s-2)); }

/* ---------- mini menu (long press) ---------- */
.log-menu-scrim { position: fixed; inset: 0; z-index: 10; background: transparent; }
.log-menu {
  position: absolute; z-index: 11; min-width: 208px; max-width: calc(100% - 32px);
  display: grid; padding: var(--s-1);
  border-radius: var(--r-md); background: var(--bg);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
  animation: log-menu-in var(--t-fast) var(--ease-out);
}
@media (prefers-color-scheme: dark) { .log-menu { background: var(--surface-2); } }
.log-menu-item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 44px; display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3) 0 var(--s-2); border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--fs-md); text-align: left;
}
.log-menu-item:focus { outline: none; }
/* the item that gets the focus on open must not look picked: only hover / keyboard focus get the fill */
.log-menu-item:focus-visible { background: var(--surface-3); }
@media (hover: hover) { .log-menu-item:hover { background: var(--surface-3); } }
.log-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ovulation); }
.log-menu-item[aria-checked="true"] { font-weight: 650; }
.log-menu-item.danger { color: var(--danger); box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.log-menu-item.danger:focus-visible { box-shadow: inset 0 0 0 2px var(--ovulation); }
.log-menu-check { width: 20px; display: grid; place-items: center; color: var(--menstrual-ink); }
@keyframes log-menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }