/* Even Simpler Mode — the stylesheet.
 *
 * Everything here hangs off `html[data-even-simpler='on']`, which
 * `js/even-simpler-mode/even_simpler_state.js` stamps. On `<html>` rather than
 * `<body>` because two of these rules have to outrank selectors that are
 * themselves written against `<html>`: the drawer toggle's `display: none` and
 * the shell's left padding both come from rules at that level.
 *
 * 🔴 Load order: AFTER `nav-drawer.css` and `panel-rail.css`. The specificity
 * wins on its own (an attribute plus a type selector on top of the same two
 * classes), but a file that only wins by specificity is one refactor away from
 * losing, and the order costs nothing.
 *
 * What is NOT here: hiding the left rail. That is `nav_rail.js`, in
 * `applyDeviceState`, because the shell's padding follows the same attribute the
 * rail's visibility does — a rail hidden in CSS would leave a 56px margin down
 * the side of every view with nothing in it.
 */

/* ── The hamburger becomes a desktop control ────────────────────────────── */

/* `styles/nav-drawer.css` doubles the class to beat `.nav-icon-button`; this
   adds the mode's attribute on top of that, so it wins wherever it is loaded. */
html[data-even-simpler='on'] .nav-icon-button.mobile-nav-drawer-toggle {
  display: inline-flex;
}

/* The Views dropdown, on loan from the topbar. In the strip it is an inline
   disclosure sized to its summary; in the drawer it is a section, so it gives up
   its margins and fills the sheet. `js/app-shell/nav_drawer.js` moves the
   element — these are the only rules that know it can be in two places. */
html[data-even-simpler='on'] .nav-drawer-sheet .topbar-views-wrap {
  display: block;
  width: auto;
  margin: 0 8px 8px;
}

html[data-even-simpler='on'] .nav-drawer-sheet .topbar-views-panel {
  position: static;
  width: auto;
  min-width: 0;
  box-shadow: none;
}

/* ── The right-hand rail names itself on hover ──────────────────────────── */

/* One pill on `<body>`, placed from the hovered row's rectangle — see
   `even_simpler_rail_flyout.js` for why it cannot live inside the rail. `right`
   and `top` are set by that module; everything else is here.

   Above the side panels (z-index 50) and the rail itself, because it is drawn
   OVER whatever is beside the row rather than pushing the strip around. */
.es-rail-flyout {
  position: fixed;
  z-index: 70;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--panel-bg, #1f2020);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.es-rail-flyout[hidden] {
  display: none;
}

/* ── The day column's ⋮, and the one button that is NOT in it ──────────── */

/* 🔴 THE DAY'S JOB STAYS ON THE DAY. `.dlg-day-actions` held two buttons; the
   chain moved into the ⋮ and `.dlg-schedule` did not, so this row is now that
   one button and it takes the whole width of the column. It was hidden here for
   one day (2026-08-30) while time blocking sat in the menu, and Seth sent it
   straight back: at the top of each day, obvious, standing out, the way the rest
   of the app puts its primary action.

   The full app draws this button as a quiet CHIP for a reason its own stylesheet
   states at length — there it shares a line with the chain, and every pixel it
   takes comes out of the day's name. Neither is true here: the chain is in the
   menu and the name is on the line above, so the button gets the row, the
   padding and the weight that a primary action is supposed to have.

   ⚠️ These rules outrank `.dlg-view .dlg-schedule[aria-pressed='true']` in
   `views/daily-long-term-goals/daily-long-term-goals.css` (one attribute more),
   so the pressed state is re-stated below rather than inherited. Dropping that
   block does not soften the highlight — it DELETES it, and this button's whole
   toggle affordance is that highlight. */
/* 🔴 THE HEADER MUST NOT SHRINK, AND THE FLOOR MOVES WITH THE BUTTON.
   `.dlg-day-card` is a flex COLUMN, and on a day with more goals than fit, its
   children shrink. `.dlg-view .dlg-day-card .card-header` carries
   `min-height: 45px` and the default `flex-shrink: 1`, so the header shrinks to
   exactly that floor — and 45px is the height of a header whose second line is
   the full app's 20px CHIP row. This mode draws a 30px bordered button there
   instead, which makes the header's natural height 61px, so it was being
   squeezed 16px below its own content. `overflow` is visible, so the button did
   not clip: it was drawn OUTSIDE the header box, on top of the first goal cards,
   and because this button's background is transparent the cards scrolled
   straight through it. Reported as "the goals overlap with the scheduling
   button".

   Two properties, and both are load-bearing:

   • `flex-shrink: 0` is the fix. The list beneath is the element that should
     absorb the shrink — it scrolls, and the header does not.
   • the floor keeps the DAY and the mounted WEEK column level. Both wear
     `.dlg-day-head` (the week column is dressed with it, see
     `js/week-sidebar/`), but only the day has an action row, so without a floor
     the week's goals start 61px up and it stops reading as one more column of
     the strip. `checks/daily_tab_week_column_check.mjs` asserts the two lists
     begin within 2px of each other.

   The floor is a variable rather than a number repeated twice: it is the day
   header's natural height in this mode, so anything that changes the button's
   padding, border or font size has to change this with it. */
html[data-even-simpler='on'] .dlg-view {
  --es-day-head-floor: 61px;
}

html[data-even-simpler='on'] .dlg-view .dlg-day-head {
  flex-shrink: 0;
  min-height: var(--es-day-head-floor);
}

html[data-even-simpler='on'] .dlg-view .dlg-day-actions {
  display: flex;
  flex-basis: 100%;
  margin-top: 3px;
  /* 🔴 LAST, AND `order` IS THE ONLY WAY TO SAY SO. The ⋮ is appended to the
     header AFTER this row (`even_simpler_day_menu.js` puts its wrap at the end),
     and this row takes a full flex line — so in DOM order the ⋮ wraps onto a
     THIRD line, underneath the button, instead of sitting up beside the day's
     name where `margin-left: auto` means it to be. It did not show while this
     row was `display: none`, which is exactly how long that was true.
     Re-parenting the wrap would be the other fix and it is the wrong one: this
     folder moves buttons it does not own and hands them back, and the day board
     draws the row. Ordering is a statement about layout, which is this
     stylesheet's job. */
  order: 1;
}

html[data-even-simpler='on'] .dlg-view .dlg-schedule {
  flex: 1;
  justify-content: center;
  min-width: 0;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--accent, #4a9eff);
  border-radius: 7px;
  background: transparent;
  color: var(--accent, #4a9eff);
  font-size: 12px;
  overflow: hidden;
}

/* The label is the point of the button here, and "Time block these goals" is a
   long thing to promise a column this narrow. Ellipsised is fine — clipped
   mid-word is not.

   ⚠️ Measured, not assumed: at 430px the Daily board SCROLLS HORIZONTALLY rather
   than squeezing its columns, so the button is still ~446px there and the label
   fits with room to spare. This is the floor under a column narrower than any
   layout currently makes, not something a phone reaches today.

   🔴 ON THE SPAN, NOT ON THE BUTTON. `text-overflow` only ever ellipsises a
   box's own inline content, and this button's content is two ELEMENTS (the icon
   and this label), so the same two lines on `.dlg-schedule` hid the overflow and
   drew no ellipsis at all — a clip that looks like a shorter label rather than
   like a truncated one. `min-width: 0` because a flex item's floor is its
   content width by default, which is the whole string: without it the span never
   becomes narrow enough to overflow itself and the ellipsis never triggers. */
html[data-even-simpler='on'] .dlg-view .dlg-schedule > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-even-simpler='on'] .dlg-view .dlg-schedule-icon {
  height: 14px;
  width: 14px;
}

html[data-even-simpler='on'] .dlg-view .dlg-schedule:hover,
html[data-even-simpler='on'] .dlg-view .dlg-schedule[aria-pressed='true'],
html[data-even-simpler='on'] .dlg-view .dlg-schedule[aria-pressed='true']:hover {
  background: var(--accent, #4a9eff);
  color: #fff;
}

.es-day-menu-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.es-day-menu-wrap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.es-day-menu-wrap-btn:hover,
.es-day-menu-wrap-btn[aria-expanded='true'] {
  color: var(--text-primary);
  background: var(--utility-surface-strong);
}

/* Fixed and script-placed: the day column scrolls its own list and the weekly
   frame clips to a rounded corner, so an absolutely-placed menu is cut off on
   the first day long enough to scroll. Still a DOM child of the header — see the
   module header for why that matters. */
.es-day-menu {
  position: fixed;
  z-index: 70;
  min-width: 232px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--panel-bg, #1f2020);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.es-day-menu[hidden] {
  display: none;
}

/* A flat list: one row per action, its own icon on the left, its own name
   beside it. No grouping and no separators — five rows do not need structure,
   and the header they replaced had two rows of grouping that said nothing. */
.es-day-menu-row {
  display: block;
}

/* 🔴 These rules dress buttons this folder does not own, and every one of them
   is a RESET: `.dlg-copy` and `.dlg-carry` were 20px glyph squares, the chain
   and the schedule button were pill-shaped and wrapped. Written as
   `.es-day-menu-row > button` rather than by naming the five classes, so a sixth
   control added to the header lands in the menu already dressed. The `.dlg-view`
   rules they override are single-class, so this two-class descendant wins. */
.es-day-menu-row > button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.es-day-menu-row > button:hover:not(:disabled) {
  background: var(--utility-surface-strong);
}

.es-day-menu-row > button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The icon column. A fixed width so the five names start on one line however
   different the glyphs are — "⧉" is a character and the chain is a 16px `<svg>`,
   and left to themselves they set the text off at two different indents. */
.es-day-menu-row > button > svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.es-day-menu-row > button > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chain's pressed state still reads in here: it is the one control in the
   menu that is a TOGGLE rather than an action, and losing that would make
   "Connect to Week Goals" look like it had done nothing. */
.es-day-menu-row > .dlg-connect-week.is-active,
.es-day-menu-row > button[aria-pressed='true'] {
  color: var(--tab-active-border, var(--text-primary));
}

/* The "Copied" / "Nothing to copy" flash the copy and carry buttons write to
   `data-note`. Their own rule draws it as a floating bubble over a 20px square
   in the header; in a menu row there is space for it inline, at the end. */
.es-day-menu-row > button[data-note]::after {
  content: attr(data-note);
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-secondary);
  font-size: 11px;
}