:root {
  --bg: #fbfaf7;
  --fg: #1d1d1b;
  --muted: #8a877f;
  --line: #e4e1d8;
  --accent: #2f6f5e;
  --accent-bg: #e3efe9;
  --warn: #b0413e;
  --panel: #f2f0ea;
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141412;
    --fg: #e3e1db;
    --muted: #7d7a73;
    --line: #2a2926;
    --accent: #7cc4ad;
    --accent-bg: #1d2e28;
    --warn: #e0716d;
    --panel: #1c1c1a;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The app fills exactly the visible area. app.js keeps its height equal to
   the space above the on-screen keyboard, so the prompt is never covered. */
#app {
  position: fixed;
  top: 0;
  padding-top: env(safe-area-inset-top); /* opened from the Home Screen */
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Scrollback. Output hugs the bottom, next to the prompt, like a terminal. */
#scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
#out {
  width: 100%;
  max-width: 900px;
  margin: auto auto 0;
  padding: 16px 16px 0;
}

#dock { flex-shrink: 0; position: relative; }

/* Version and a link to the code: a small island just above the CLI | GUI
   switch, at the right end of the status bar. */
#about {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--status-h, 26px) + 6px); /* app.js measures the status bar */
  z-index: 3;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
#about a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
#about a:hover { color: var(--accent); }
/* Out of the way while typing on a phone. */
.kb #about { display: none; }
#dock .col {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 6px;
}

#out pre {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#out .echo { color: var(--muted); margin-top: 8px; }
#out .echo b { color: var(--fg); font-weight: 400; }
#out .ok { color: var(--accent); }
#out .err { color: var(--warn); }
#out .dim { color: var(--muted); }
#out .key { color: var(--fg); border-left: 3px solid var(--accent); padding-left: 1ch; margin: 6px 0; }
#out .report { margin: 4px 0; }
/* A report line; if it wraps, it continues under its last column. */
#out .report .ln {
  display: block;
  padding-left: var(--hang, 2ch);
  text-indent: calc(-1 * var(--hang, 2ch));
}

/* /edit: a plain-text editor inside the scrollback. */
#out .editor {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  font: inherit;
  color: var(--fg);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  outline: none;
  resize: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  caret-color: var(--accent);
}

#prompt {
  display: flex;
  gap: 1ch;
  margin-top: 8px;
}
.ps1 { color: var(--accent); }

/* The input and its "ghost" completion share metrics so the completion lines
   up exactly with the typed text. */
.field { position: relative; flex: 1; min-width: 0; }
#entry, #ghost {
  font: inherit;
  padding: 0;
  margin: 0;
  width: 100%;
  border: 0;
  white-space: pre;
  overflow: hidden;
}
#entry {
  position: relative;
  background: transparent;
  color: var(--fg);
  outline: none;
  caret-color: var(--accent);
}
#ghost {
  position: absolute;
  inset: 0;
  color: var(--muted);
  pointer-events: none;
}
#ghost .typed { color: transparent; }
#notes-box {
  display: block;
  width: 100%;
  max-height: calc(1.45em * 8);
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 1.45;
  color: var(--fg);
  background: transparent;
  resize: none;
  outline: none;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--accent);
}
#notes-box[hidden] { display: none; }

#matches {
  min-height: 1.45em;
  color: var(--muted);
  padding-left: 2ch;
}
#matches span { cursor: pointer; margin-right: 2ch; }
#matches span.sel { color: var(--accent); text-decoration: underline; }
#matches span.btn { border: 1px solid var(--line); border-radius: 4px; padding: 0 0.6ch; }

#status {
  display: flex;
  gap: 2ch;
  justify-content: space-between;
  background: var(--accent-bg);
  color: var(--fg);
  padding: 4px max(16px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  white-space: pre;
}
/* With the keyboard open, the home-indicator gap is not needed. */
.kb #status { padding-bottom: 4px; }
#status .now { display: flex; flex: 1; min-width: 0; }
#status .what { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#status .today { color: var(--muted); flex-shrink: 0; }
#status .sync { color: var(--muted); flex-shrink: 0; }
#status .sync-synced { color: var(--accent); }
#status .sync-error, #status .sync-offline, #status .sync-locked { color: var(--warn); }
#status .run { color: var(--accent); }
#status .money { color: var(--fg); flex-shrink: 0; font-variant-numeric: tabular-nums; }
#status .money.ot { color: var(--warn); }
#status .stopped { color: var(--muted); }
#status .dim { color: var(--muted); }

/* Touch screens: completions get larger tap targets. (iOS would zoom in on
   inputs under 16px; app.js turns that zoom off there instead.) */
@media (pointer: coarse) {
  #prompt, #out .editor { font-size: 14px; }
  #matches { font-size: 14px; }
  #matches span { display: inline-block; padding: 6px 0; margin-right: 3ch; }
}

@media (max-width: 600px) {
  body { font-size: 13px; }
  #out .editor { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
  #status { gap: 1.5ch; }
  #status .since { display: none; }
}

/* ---- /timeline ----------------------------------------------------------
   Category colors: the validated 8-slot categorical palette, stepped
   separately for light and dark. Slots follow the order categories were
   first used, so a category keeps its color. */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --s-other: #9a978f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --s-other: #6f6c66;
  }
}

#out .tl, #gui .tl {
  position: relative;
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.3;
}
.tl-muted { color: var(--muted); }
.tl-empty { color: var(--muted); }

.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
}
.tl-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tl-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.tl-grid {
  display: grid;
  column-gap: 6px;
  align-items: start;
}
.tl-head {
  padding: 0 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-axis { position: relative; }
.tl-hour {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
}

/* Recessive hour lines. */
.tl-day {
  position: relative;
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--hour) - 1px),
    var(--line) calc(var(--hour) - 1px) var(--hour)
  );
  background-position: 0 var(--offset);
}

.tl-block {
  position: absolute;
  left: 3px;
  right: 3px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px 6px 2px 8px;
  border-radius: 4px;
  border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 16%, var(--bg));
  color: var(--fg);
  cursor: pointer;
}
.tl-block:hover { background: color-mix(in srgb, var(--c) 26%, var(--bg)); }
.tl-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-line b { font-weight: 600; margin-right: 0.5ch; }
.tl-wo {
  margin-right: 0.6ch;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tl-notes { color: var(--muted); font-style: italic; }

/* Off time: a quiet hatched gap, not a category. */
.tl-offblock {
  cursor: default;
  border-left-color: transparent;
  background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--muted) 18%, transparent) 5px 6px);
}
.tl-offblock:hover { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--muted) 18%, transparent) 5px 6px); }

/* The running entry: its open end fades out. */
.tl-running {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 8px), rgba(0, 0, 0, 0.35));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 8px), rgba(0, 0, 0, 0.35));
}
.tl-clipped { border-bottom: 2px dashed var(--c); }

.tl-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--accent);
  pointer-events: none;
}
.tl-now span {
  position: absolute;
  right: 0;
  top: -8px;
  padding: 0 3px;
  font-size: 10px;
  color: var(--accent);
  background: var(--bg);
}

.tl-tip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  white-space: pre-wrap;
}

/* ---- views: CLI | GUI toggle, GUI panel, messages above the prompt ---------- */
.view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.view-toggle button,
.gui-bar button {
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.view-toggle button[aria-pressed="true"],
.gui-bar button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}

#gui {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 16px;
}
#gui .tl { font-size: 12px; line-height: 1.3; position: relative; margin-top: 0; }
.gui-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.gui-bar button {
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.gui-range { color: var(--muted); }

/* GUI view: the timeline scrolls above the console tray (the same
   scrollback as the CLI view, on its own surface), with the prompt at the
   bottom of the tray. app.js sets the tray's height. */
#app.gui-mode #scroll { overflow: hidden; }
#app.gui-mode #gui {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  padding-top: 0;
}
#divider { display: none; }
#app.gui-mode #divider {
  order: 2;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 max(16px, calc((100% - 1168px) / 2));
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, 0.25);
  cursor: row-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.divider-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.grip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 4px;
  margin: -2px 0 0 -18px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.45;
}
#divider:hover .grip { opacity: 0.8; }
#app.gui-mode #out {
  position: relative; /* for scrolling to a report's top */
  order: 3;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px max(16px, calc((100% - 1168px) / 2)) 4px;
  background: var(--panel);
}
#app.console-anim #out { transition: height 0.2s ease; }
/* Folded to one line: only the latest output shows. */
#app.gui-mode.console-folded #out { overflow: hidden; cursor: pointer; }
#app.gui-mode #dock { background: var(--panel); }
#app.gui-mode #dock .col { max-width: 1200px; }

/* The range buttons and legend stay in view while the timeline scrolls. */
.tl-top {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
  padding: 12px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.tl-top .tl-legend { margin-bottom: 0; }
.tl-top .tl-heads { margin-top: 8px; }
.tl-top .tl-heads .tl-head { padding-bottom: 0; }
.gui-presets { display: flex; gap: 6px; }
.gui-steps { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.gui-day { padding: 0 6px; white-space: nowrap; }
/* One day: the date is in the bar, so the column header is not needed. */
.tl-one-day .tl-head { display: none; }
button.gui-day {
  font: inherit;
  font-size: 12px;
  border: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  padding: 2px 6px;
}
.gui-bar button.gui-day:disabled { opacity: 1; }
.tl-short { display: none; }

/* Week: the days side by side. */
.tl-head-total:not(:empty)::before { content: '  '; white-space: pre; }
.tl-head.tl-today .tl-head-name { color: var(--accent); font-weight: 600; }
.tl-day.tl-future { background-color: color-mix(in srgb, var(--muted) 5%, transparent); }

/* Month: a calendar, a small timeline per day. */
.tl-cal-hours { font-size: 11px; margin: 6px 0; }
.tl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.tl-cal-wd { text-align: center; color: var(--muted); font-size: 11px; }
.tl-cell {
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.tl-cell.tl-out { visibility: hidden; }
.tl-cell.tl-future { opacity: 0.5; }
.tl-cell.tl-today { border-color: var(--accent); }
.tl-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 4px;
  width: 100%;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.tl-date:disabled { cursor: default; }
.tl-cell.tl-today .tl-date-n { color: var(--accent); font-weight: 600; }
.tl-date-total { font-size: 10px; }
.tl-mini {
  position: relative;
  height: 96px;
  margin-top: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}
.tl-mblock {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 2px;
  border-radius: 2px;
  background: var(--c);
  cursor: pointer;
}
.tl-mblock:hover { outline: 2px solid var(--fg); outline-offset: -1px; }
.tl-mnow { position: absolute; left: 0; right: 0; border-top: 2px solid var(--accent); pointer-events: none; }
.gui-bar .gui-step {
  font-size: 14px;
  line-height: 1;
  padding: 2px 9px 3px;
}
.gui-bar button:disabled { opacity: 0.35; cursor: default; }

/* Moving between days slides the timeline. */
.tl-slide-next .tl-scroll { animation: tl-from-right 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tl-slide-prev .tl-scroll { animation: tl-from-left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tl-from-right { from { transform: translateX(48px); opacity: 0; } }
@keyframes tl-from-left { from { transform: translateX(-48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tl-slide-next .tl-scroll, .tl-slide-prev .tl-scroll, .entry-card.sheet, .sheet-backdrop { animation: none !important; }
  #app.console-anim #out { transition: none; }
}

/* ---- phones: a timeline-first layout ------------------------------------------ */
@media (max-width: 600px) {
  /* Status bar: the entry gets the room. Sync is a colored dot (its label is
     still read out), and the GUI view shows the day's total itself. */
  #status .sync { font-size: 0; }
  #status .sync::before { content: '●'; font-size: 12px; }
  #app.gui-mode #status .today { display: none; }

  #app.gui-mode #gui { padding-left: 10px; padding-right: 10px; }
  .tl-top { padding-top: 10px; }
  .gui-bar { gap: 6px; flex-wrap: nowrap; }
  .tl-long { display: none; }
  .tl-short { display: inline; }
  .tl-top .tl-legend { display: none; } /* room for the timeline; tap a block for what it is */
  .gui-presets {
    flex: none;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
  }
  .gui-bar .gui-presets button {
    width: 34px;
    border: 0;
    border-radius: 7px;
    padding: 5px 0;
    font-size: 13px;
  }
  .gui-steps { flex: 1; min-width: 0; justify-content: space-between; margin: 0; }
  .gui-day, button.gui-day { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 2px; }
  .gui-bar .gui-step { width: 34px; height: 30px; padding: 0; font-size: 18px; border-radius: 9px; }
  /* Week: seven narrow columns, category names only. */
  .tl-mode-week { --axis: 1.6em; }
  .tl-mode-week .tl-grid { column-gap: 2px; }
  .tl-mode-week .tl-min { display: none; }
  .tl-mode-week .tl-hour { right: 2px; font-size: 10px; }
  .tl-mode-week .tl-head { text-align: center; padding: 0 0 4px; font-size: 11px; }
  .tl-mode-week .tl-head-name, .tl-mode-week .tl-head-total { display: block; overflow: hidden; text-overflow: clip; }
  .tl-mode-week .tl-head-total { font-size: 10px; }
  .tl-mode-week .tl-head-total::before { content: none; }
  .tl-mode-week .tl-block { left: 1px; right: 1px; padding: 1px 2px 1px 3px; border-left-width: 3px; border-radius: 4px; font-size: 10px; }
  .tl-mode-week .tl-wo, .tl-mode-week .tl-note, .tl-mode-week .tl-dur,
  .tl-mode-week .tl-times, .tl-mode-week .tl-notes { display: none; }
  .tl-mode-week .tl-line { text-overflow: clip; }
  .tl-mode-week .tl-line b { margin: 0; }
  .tl-mode-week .tl-now span { display: none; }
  /* Month: smaller days. */
  .tl-cal-grid { gap: 2px; }
  .tl-cell { padding: 2px 1px; border-radius: 4px; }
  .tl-mini { height: 60px; }
  .tl-mblock { left: 1px; right: 1px; }
  .tl-block { border-radius: 6px; }

  #app.gui-mode #divider { height: 22px; }
  #app.gui-mode #matches { min-height: 0; } /* completions push in only when there are some */
  #app.gui-mode #prompt { margin-top: 4px; }
  .divider-label { display: none; }
  .grip { width: 44px; height: 5px; margin: -2.5px 0 0 -22px; }
  #app.gui-mode #out { padding-top: 0; }
  #app.gui-mode.console-folded #out pre:not(:last-child) { visibility: hidden; }
}

/* Editing card for a clicked block. */
.entry-card {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 12px;
}
.ec-title { color: var(--muted); }
.ec-row { display: flex; gap: 10px; }
.ec-row .ec-field { flex: 1; min-width: 0; }
.ec-field { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.entry-card input,
.entry-card textarea {
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 6px;
  width: 100%;
  box-sizing: border-box;
}
.entry-card textarea { resize: vertical; min-height: 3.6em; }
.entry-card input:focus,
.entry-card textarea:focus { outline: none; border-color: var(--accent); }
.entry-card input:disabled,
.entry-card textarea:disabled { opacity: 0.6; }
.ec-error { color: var(--warn); min-height: 0; }
.ec-error:empty { display: none; }
.ec-buttons { display: flex; gap: 8px; }
.ec-buttons button {
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.ec-buttons button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.ec-buttons .ec-delete { margin-left: auto; color: var(--warn); }
@media (pointer: coarse) {
  .entry-card input,
  .entry-card textarea { font-size: 15px; }
}

/* Phones: editing happens in a bottom sheet. */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.38);
  animation: sheet-fade 0.2s ease;
}
.entry-card.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 88%;
  overflow-y: auto;
  gap: 12px;
  padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  transition: transform 0.15s ease;
  animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kb .entry-card.sheet { padding-bottom: 12px; }
.sheet-grip {
  width: 40px;
  height: 5px;
  margin: 4px auto 2px;
  border-radius: 3px;
  background: var(--muted);
  opacity: 0.5;
}
.entry-card.sheet .ec-title { font-size: 13px; }
.entry-card.sheet input,
.entry-card.sheet textarea { padding: 8px 10px; border-radius: 8px; }
.entry-card.sheet .ec-buttons { gap: 10px; }
.entry-card.sheet .ec-buttons button { font-size: 15px; padding: 9px 18px; }
.entry-card.sheet-out, .sheet-backdrop.sheet-out { animation: sheet-down 0.18s ease forwards; }
.sheet-backdrop.sheet-out { animation-name: sheet-unfade; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-unfade { to { opacity: 0; } }
#gui:has(.entry-card) .tl-tip { display: none; } /* no hover details while editing */