/* css/extras.css
 *
 * Three surfaces that arrived together and share nothing with each other but
 * their vocabulary: the bin, the habit editor and mood.
 *
 * All three reuse the existing shells rather than growing their own — the bin
 * and the habit editor are `.daysheet`/`.taskedit` panels, so everything about
 * the backdrop, the panel, the header and the buttons is inherited and only what
 * is genuinely new to each lives here.
 */

/* ==========================================================================
 * Trash
 * ======================================================================== */

/* The bin sits above the day sheet, which it can be opened from. */
.trashsheet { z-index: 45; }
.trashsheet .panel { width: min(520px, 100%); }
.trashsheet #trashMsg:empty { display: none; }
.trashsheet #trashMsg { margin-top: 8px; flex: none; }

.trashlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* `min-height` rather than a fixed one: the meta line wraps to two rows when the
   day name, the binned date and the countdown are all long, and letting the row
   collapse back for the short ones made the list jump height between entries.
   The floor is what a one-line row measures, so nothing grows — only the rare
   wrapped row exceeds it, which is honest. */
.trashrow {
  display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 9px 4px 9px 10px; border-radius: 10px;
}
.trashrow:hover { background: var(--chrome-2); }
/* `min-width: 0` so a long title ellipses instead of pushing the actions off
   the panel — the flex default is `auto`, which refuses to shrink below the
   content and silently widens the row. */
.tr-main { flex: 1 1 auto; min-width: 0; }
.tr-title {
  font-size: 0.9286em; font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Three separate facts — which day it was on, when it was binned, when it goes.
   Rendered as one grey run they read as a sentence nobody wrote, so a middle dot
   separates them. On the pseudo-element rather than in the markup: the last item
   must not carry one, and `:not(:last-child)` is the only way to say that
   without the renderer having to know which item is last. */
.tr-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin-top: 2px; font-size: 0.7857em; color: var(--text-3);
}
.tr-meta > span:not(:last-child)::after {
  content: "·"; margin-left: 6px; color: var(--text-3); opacity: .55;
}
.tr-when { font-variant-numeric: tabular-nums; }
/* The countdown is the one fact that decides whether to act now. It stays quiet
   until the window is nearly out, then takes the danger colour — colour used to
   mean state, not to decorate every row. */
.tr-left { font-variant-numeric: tabular-nums; }
.tr-left.soon { color: var(--danger); }

.tr-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.tr-restore {
  font-size: 0.7857em; padding: 5px 10px; border-radius: 8px;
  background: var(--fill); color: var(--text); border: 0; cursor: pointer;
}
.tr-restore:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
/* Destructive and irreversible, so it is deliberately the smaller target of the
   two and reads as danger only on approach — a permanently red button beside
   every row would make the whole bin look like a warning. */
.tr-purge {
  width: 26px; height: 26px; line-height: 1; font-size: 1.15em;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-3);
  cursor: pointer; flex: none;
}
.tr-purge:hover { background: var(--danger); color: #fff; filter: none; }

/* ==========================================================================
 * Habit editor
 * ======================================================================== */

/* The weekday picker: seven equal targets, so the row reads as one control
   rather than seven buttons that happen to be adjacent. */
.hdays { display: flex; gap: 4px; }
.hday {
  flex: 1 1 0; min-width: 0; padding: 7px 0; border-radius: 8px;
  border: 1px solid var(--sep); background: transparent; color: var(--text-2);
  font-size: 0.7857em; font-weight: 560; cursor: pointer; text-align: center;
}
.hday:hover { background: var(--chrome-2); filter: none; }
.hday[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
/* "every day" — what an empty selection means, said in words rather than left
   to be inferred from seven unlit buttons. */
.hdays-hint { margin: 5px 2px 0; font-size: 0.7857em; color: var(--text-3); }

/* The times-a-day stepper. Numbers only go 1..12 here; a habit with a higher
   target is a counter, not a habit, and the phone's own picker stops there. */
.htarget { display: flex; align-items: center; gap: 8px; }
.htarget button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--sep);
  background: transparent; color: var(--text); font-size: 1.05em; line-height: 1;
  cursor: pointer; flex: none;
}
.htarget button:hover { background: var(--chrome-2); filter: none; }
.htarget button[disabled] { opacity: .35; cursor: default; }
.htarget .val {
  min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums;
  font-size: 0.9286em; font-weight: 590;
}

/* The ring and its pencil. The pencil CANNOT be nested inside the ring — that is
   a button in a button — so the two are siblings in a wrapper, and it is the
   WRAPPER that has to be the positioning context. Putting `position: relative`
   on `.hring` instead left the pencil resolving against the page: measured at
   x=882, y=-2, i.e. the top-right corner of the window rather than the corner of
   the ring, on every habit.

   The wrapper is an inline `<span>`, and `position` alone does not give an
   inline box a usable one — `inline-block` is what makes the absolute child
   resolve against the ring's actual box. */
/* The wrapper is now the GRID ITEM in `.habitstrip` (a 76px auto-fill grid), so
   it takes the track width and the ring fills it — `.hring` keeps its own 76px
   in day.css, and letting the wrapper shrink-to-fit instead would leave the
   labels wrapping at a different width than the untouched rings did. */
.hringwrap { position: relative; display: block; width: 76px; }
.hringwrap > .hring { width: 100%; }
/* Hidden until the ring is hovered or the button itself is focused, so the strip
   stays a row of rings rather than a row of controls — but `:focus-visible`
   keeps it reachable from the keyboard, which `display: none` would not. */
.hedit {
  position: absolute; top: -2px; right: -2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: var(--chrome); color: var(--text-2);
  font-size: 0.7143em; line-height: 20px; padding: 0; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .12s ease;
}
.hringwrap:hover .hedit, .hedit:focus-visible { opacity: 1; }
.hedit:hover { background: var(--accent); color: var(--accent-ink); filter: none; }

/* "New habit" — a peer of the rings, sized like one so the strip keeps its
   rhythm, but drawn as an outline so it does not read as a habit at 0%. Same
   76px track as `.hringwrap`, with the circle centred in it: a 54px button in a
   76px column would otherwise sit left of every ring above it. */
.haddwrap {
  width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hadd {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px dashed var(--sep); background: transparent;
  color: var(--text-3); font-size: 1.25em; line-height: 1; cursor: pointer;
}
.hadd:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* ==========================================================================
 * Mood
 * ======================================================================== */

/* The picker in the day sheet: five faces in a row, each its own target.
   The label sits ABOVE rather than beside them — pushed apart by `margin-right:
   auto` it left a hand's width of empty grey between the word and the faces,
   which read as two unrelated controls that happened to share a line. Stacked,
   the faces group as one scale and can centre under their own heading. */
.moodrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--sep);
}
.moodrow .mlbl {
  flex: 1 0 100%;
  font-size: 0.7857em; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;
}
.mface {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent;
  background: transparent; font-size: 1.15em; line-height: 1; padding: 0;
  cursor: pointer; flex: none;
  /* Unselected faces sit back so the chosen one reads at a glance; five equally
     bright emoji say nothing about which one was picked. */
  opacity: .45; transition: opacity .12s ease, transform .12s ease;
}
.mface:hover { opacity: .9; transform: scale(1.08); filter: none; }
/* The selected face takes its own level's colour as a ring rather than a fill:
   a filled disc behind an emoji muddies both, and the ring is what the month
   dot echoes. */
.mface[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--mc, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc, var(--accent)) 22%, transparent);
}
/* The note affordance. Separated from the faces by a gap and a hairline rather
   than by distance: pushed to the far end of the row with `margin-left: auto` it
   read as an unrelated control stranded in the corner, and sitting flush against
   😄 it read as a sixth face. The rule says "different kind of thing" in the
   space of one gap. */
.mnote {
  height: 28px; border-radius: 8px; border: 0; padding: 0 0 0 9px;
  min-width: 28px; background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 0.8571em; flex: none;
  margin-left: 7px; border-left: 1px solid var(--sep);
  /* `border-radius` on a box with a left border only would round the hairline
     into a comma; the rounding is for the hover fill, which is inset from it. */
  background-clip: padding-box;
}
.mnote:hover { background: var(--fill); color: var(--text); filter: none; }
.mnote.has { color: var(--accent); }
/* The note itself, under the faces. Wraps rather than ellipsing — it is the
   user's own sentence, and truncating it would hide the reason for the mood. */
.moodnote {
  margin: 6px 2px 0; font-size: 0.7857em; color: var(--text-3);
  overflow-wrap: anywhere;
}

/* The dot on a month cell. Positioned against the cell's own corner, opposite
   the day number, so it never collides with the task previews in the middle.

   `.cell` carries no `position` of its own, so without this the dot would
   resolve against the nearest positioned ancestor — the page — and every day's
   dot would stack in one corner of the window. Set here rather than in
   calendar.css so the rule sits with the thing that needs it. */
.mgrid .cell { position: relative; }
.mdot {
  position: absolute; right: 5px; top: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mc, var(--accent));
  /* A hairline of the cell's own background keeps the dot legible when it lands
     on a coloured task bar in `bars` density. */
  box-shadow: 0 0 0 1.5px var(--canvas);
}