/* Palette and box-sizing live in static/tokens.css, loaded ahead of this file -- the two
   stylesheets carried byte-identical :root blocks, and a colour changed in one of them was a
   colour the other page kept. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Every control on this screen was already a real <button> except the item cards, and none of
   them showed where the keyboard was: the browser's own focus ring is invisible against these
   surfaces. :focus-visible rather than :focus, so a tap does not leave a ring behind on a
   phone. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}

/* Mode switch */

#mode-switch {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
}

.mode-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.mode-btn.active {
  background: var(--accent);
  color: var(--accent-text);
}

/* Nav header (prev / label / next) -- shared by all three views */

#nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#nav-header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

#nav-header button:active {
  background: var(--surface-2);
}

#nav-label {
  font-weight: 600;
  font-size: 15px;
  text-transform: capitalize;
}

/* Dot indicator -- shared language for the day strip and month grid. A dot means the day has
   records, on every day that does; green on today, recoloured on the selected day for contrast
   against its filled background, grey everywhere else. Past days are told apart by .faded
   below, not by the absence of a dot -- see dayState in app.js. */

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}

.dot.dot-today {
  opacity: 1;
  background: var(--accent);
}

.dot.dot-plain {
  opacity: 1;
  background: var(--text-dim);
}

.dot.dot-selected {
  opacity: 1;
  background: var(--accent-text);
}

/* Day view */

#week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}

.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.day-cell .wd {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* The dates. Same reasoning as .item-time: a column of day numbers is read down, and
   proportional digits make "11" and "18" different widths in a grid whose cells are not. */
.day-cell .num,
.month-day .num {
  font-family: var(--font-mono);
}

.day-cell .num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.day-cell.today .num {
  color: var(--accent);
}

.day-cell.selected {
  background: var(--accent);
  border-color: var(--accent);
}

.day-cell.selected .wd,
.day-cell.selected .num {
  color: var(--accent-text);
}

.day-cell.faded {
  opacity: 0.5;
}

#selected-date-label {
  font-size: 20px;
  font-weight: 700;
  margin: 12px 0;
}

/* Day items -- task cards for the selected day */

#day-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-items-empty {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
  margin: 0;
}

/* A <button> out of select mode and a <label> in it -- see renderDayItems. The button needs
   its centred text and intrinsic width undone; the flex layout below is what both share. */
.item-card {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.item-card.done {
  opacity: 0.5;
}

.item-time {
  flex: 0 0 auto;
  min-width: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  padding-top: 1px;
}

.item-body {
  min-width: 0;
  flex: 1;
}

.item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-wrap: break-word;
}

.item-card.done .item-title {
  text-decoration: line-through;
  color: var(--text-dim);
}

.item-notes {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  word-wrap: break-word;
}

/* Type and recurrence. Deliberately the quietest line on the card: it is there to be found
   when asked for, not to compete with the title -- most days are all one type, and a loud
   "ДЕЛО" on every row would be noise carrying no information. */
.item-marks {
  margin: 6px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0.75;
}

/* Month view */

#month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.weekday-label {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0 8px;
}

.month-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.1s ease;
}

.month-day.today {
  color: var(--accent);
  border-color: var(--accent);
}

.month-day.faded {
  opacity: 0.5;
}

/* Year view */

#year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.month-tile {
  padding: 22px 0;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
  transition: transform 0.1s ease;
}

.month-tile.current {
  color: var(--accent);
  border-color: var(--accent);
}

.day-cell:active,
.month-day:active,
.month-tile:active {
  transform: scale(0.96);
}

.error-text {
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  /* The failure panel replaces a grid in the month view, so it has to stop being one. */
  display: block;
}

.error-message {
  margin: 0 0 14px;
}

.retry-btn {
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

/* The way records are actually made. Quiet rather than primary: it leaves the app, and the
   list above it is what the person came for. */
#add-via-chat {
  width: 100%;
  margin-top: 12px;
  padding: 12px 0;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}

#add-via-chat[hidden] {
  display: none;
}

#month-legend {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  text-align: center;
}

#month-legend[hidden] {
  display: none;
}

/* Day header -- the date and the way into multi-select */

#day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#select-toggle {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
}

.item-card.tappable {
  transition: transform 0.1s ease, background 0.15s ease;
}

.item-card.tappable:active {
  transform: scale(0.99);
  background: var(--surface-2);
}

.item-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

#select-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* `display` on a rule of our own beats the browser's [hidden] { display: none }, so setting
   the attribute from JS would have no effect without this -- the select bar shipped visible
   in the first draft for exactly that reason. Same for the sheet below. */
#select-bar[hidden] {
  display: none;
}

#select-bar button {
  flex: 1;
  padding: 12px 0;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

/* Edit sheet */

#sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#sheet[hidden] {
  display: none;
}

#sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

#edit-form {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

#edit-form h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

#sheet-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dim);
}

#edit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

#edit-form label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

#edit-form label.checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

#edit-form .row {
  display: flex;
  gap: 10px;
}

#edit-form .row label {
  flex: 1;
  min-width: 0;
}

#edit-form input,
#edit-form textarea,
#edit-form select {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

#edit-form input:disabled {
  opacity: 0.45;
}

#edit-form textarea {
  resize: vertical;
}

#sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

/* Horizontal padding, because the longest label here ("Отметить выполненным") otherwise sits
   edge to edge inside its half of the grid with about two pixels to spare. It fits, and a
   slightly wider font on some device would be all it takes for it not to; wrapping to two
   lines is the correct outcome and the grid keeps the row even when it happens. */
#sheet-actions button {
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

#sheet-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#sheet-actions button.danger,
#select-bar button.danger {
  color: #ff8f8f;
}

#sheet-actions button:active,
#select-bar button:active {
  transform: scale(0.98);
}

#select-bar button:disabled {
  opacity: 0.45;
}

/* Not .error-text's centred grey panel, which at this size and inside a stack of inputs
   reads as one more empty field with a placeholder in it rather than as something going
   wrong. */
#sheet-error {
  margin: 0;
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #ff8f8f;
  background: rgba(255, 143, 143, 0.1);
  border-color: rgba(255, 143, 143, 0.35);
  border-radius: 10px;
}

/* "This day or the whole series" -- only shown for a repeating record */

#scope-row {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#scope-row[hidden] {
  display: none;
}

#scope-row legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--text-dim);
}

#scope-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* accent-color tints a control that is 20px across and dark on dark; at a glance the two
   options looked the same. The row itself carries the answer now. */
#scope-row label {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}

#scope-row label.chosen {
  background: var(--surface-2);
  border-color: var(--accent);
}