/* Hebdo's styles. Kept small and plain until the week view gives them
   something to lay out; the system font and colours follow the platform. */

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  line-height: 1.4;
  /* A sideways swipe turns the day on a phone; without this, a browser takes
     one that reaches the edge as going back a page. */
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  overscroll-behavior-x: none;
}

button {
  font: inherit;
  padding: 0.4em 0.9em;
}

.status {
  margin: 4rem auto;
  max-width: 28rem;
  text-align: center;
}

.error {
  color: #c0392b;
}

.login {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 4rem auto;
  max-width: 20rem;
  padding: 0 1rem;
}

.login label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.login input {
  font: inherit;
  padding: 0.4em;
}

/* In the app: which server the login is for. */
.login .server {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

button.link {
  background: none;
  border: none;
  color: LinkText;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.bar {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  display: flex;
  gap: 0.8rem;
  padding: 0.5rem 1rem;
}

.bar .title {
  font-weight: bold;
}

.bar .tabs {
  display: flex;
  gap: 0.2rem;
  margin-right: auto;
}

.tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
}

.tab.chosen {
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  font-weight: 600;
}

.bar .person::before {
  background: var(--person-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.7em;
  margin-right: 0.4em;
  width: 0.7em;
}

.bar .role {
  opacity: 0.7;
}

.bar .app-link {
  font-size: 0.85rem;
  white-space: nowrap;
}

/* "Log out everywhere" is rare and drastic: small beside "Log out". */
.bar .everywhere {
  font-size: 0.8rem;
  margin-left: -0.5rem;
  opacity: 0.8;
}

.bar .confirm {
  align-items: center;
  display: flex;
  font-size: 0.85rem;
  gap: 0.4rem;
}

main {
  padding: 1rem;
}

/* The week view. One hour is --hour-height tall; the grid is --hours hours. */

.weeknav {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.weeknav h2 {
  font-size: 1.1rem;
  margin: 0 0 0 0.6rem;
}

.grid-scroll {
  overflow-x: auto;
}

.grid {
  --hour-height: 3rem;
  --head-height: 3.2rem;
  --line: color-mix(in srgb, currentColor 12%, transparent);
  display: grid;
  grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr));
  min-width: 56rem;
}

.day-head {
  box-sizing: border-box;
  height: var(--head-height);
}

.hours .hour {
  font-size: 0.75rem;
  height: var(--hour-height);
  opacity: 0.7;
  /* The label sits on the line where its hour begins. */
  transform: translateY(-0.5em);
}

.day {
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.day.today .day-head {
  background: color-mix(in srgb, Highlight 15%, transparent);
}

.day-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.2rem 0.3rem 0;
}

.day-name {
  font-size: 0.85rem;
  font-weight: bold;
}

.lane-heads {
  display: flex;
}

.lane-head {
  border-bottom: 3px solid var(--person-color);
  flex: 1;
  font-size: 0.75rem;
  text-align: center;
}

.lanes {
  background: repeating-linear-gradient(
    to bottom,
    var(--line) 0 1px,
    transparent 1px var(--hour-height)
  );
  display: flex;
  height: calc(var(--hours) * var(--hour-height));
}

.lane {
  border-left: 1px dotted var(--line);
  flex: 1;
  min-width: 0;
  position: relative;
}

.lane:first-child {
  border-left: none;
}

.block {
  background: color-mix(in srgb, var(--person-color) 25%, Canvas);
  border-left: 3px solid var(--person-color);
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0.7rem;
  line-height: 1.2;
  /* A short item stays tall enough to show the start of its title. */
  min-height: 1.1rem;
  overflow: hidden;
  padding: 1px 3px;
  position: absolute;
}

/* Hovering a block shows all of it, above its neighbours; not while it is
   dragged, when its size is the preview. */
@media (hover: hover) {
  .block:hover:not(.dragging) {
    height: auto !important;
    min-width: 8rem;
    z-index: 2;
  }
}

.block .what {
  display: block;
  font-weight: 600;
}

.block .time {
  opacity: 0.8;
}

.block.locked {
  background: color-mix(in srgb, var(--person-color) 45%, Canvas);
}

.block.soft {
  outline: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
}

.block.warning {
  outline: 2px solid #e6a100;
}

.block.hard {
  outline: 2px solid #d62828;
}

/* The week by days: a row for each day, a column for each person, a line
   for each item. */

.weeknav .layouts {
  display: flex;
  gap: 0.2rem;
  margin-left: 0.6rem;
}

.weeknav .layouts .tab {
  font-size: 0.85rem;
  padding: 0.25em 0.7em;
}

.table-scroll {
  overflow-x: auto;
}

.day-table {
  --line: color-mix(in srgb, currentColor 15%, transparent);
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.day-table th,
.day-table td {
  border: 1px solid var(--line);
  padding: 0.3rem;
  text-align: left;
  vertical-align: top;
}

.day-table .when {
  font-size: 0.85rem;
  font-weight: normal;
  white-space: nowrap;
  width: 6.5rem;
}

.day-table .who {
  border-bottom: 3px solid var(--person-color);
  font-size: 0.85rem;
}

.day-table tr.today > * {
  background: color-mix(in srgb, Highlight 10%, Canvas);
}

.day-table tr.today > .when {
  font-weight: 600;
}

/* A row with nothing in it still has the height of a line. */
.day-table td {
  height: 1.6rem;
}

.day-table td.editable {
  cursor: copy;
}

.item {
  background: color-mix(in srgb, var(--person-color) 25%, Canvas);
  border-left: 3px solid var(--person-color);
  border-radius: 3px;
  display: flex;
  font-size: 0.8rem;
  gap: 0.4rem;
  line-height: 1.25;
  padding: 2px 4px;
}

.item + .item {
  margin-top: 3px;
}

.day-table td.editable .item {
  cursor: pointer;
}

.item .time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  white-space: nowrap;
}

.item .what {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
}

.item.locked {
  background: color-mix(in srgb, var(--person-color) 45%, Canvas);
}

.item.soft {
  outline: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
}

.item.warning {
  outline: 2px solid #e6a100;
}

.item.hard {
  outline: 2px solid #d62828;
}

/* Editing: the item dialog over the week. */

.lane.editable {
  cursor: copy;
}

.lane.editable .block {
  cursor: pointer;
}

.weeknav .new {
  margin-left: auto;
}

/* Two such buttons side by side keep together at the end. */
.weeknav .new + .new {
  margin-left: 0;
}

button.primary {
  background: Highlight;
  border: 1px solid Highlight;
  color: HighlightText;
}

button.danger {
  background: transparent;
  border: 1px solid #d62828;
  color: #e05a5a;
}

.overlay {
  align-items: flex-start;
  background: color-mix(in srgb, Canvas 40%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 3rem 1rem;
  position: fixed;
  z-index: 10;
}

.dialog {
  background: Canvas;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 6px;
  box-shadow: 0 0.5rem 2rem color-mix(in srgb, black 40%, transparent);
  max-width: 34rem;
  padding: 1rem 1.2rem;
  width: 100%;
}

.dialog h2 {
  margin: 0 0 0.4rem;
}

.dialog .scope {
  font-size: 0.85rem;
  margin: 0 0 0.6rem;
  opacity: 0.8;
}

.dialog form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dialog label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.2rem;
}

.dialog label.check,
.dialog label.day-choice,
.dialog .repeat label {
  align-items: center;
  flex-direction: row;
}

.dialog input,
.dialog select,
.dialog textarea {
  font: inherit;
  padding: 0.3em;
}

.dialog .row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.dialog fieldset {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.dialog .people {
  border-collapse: collapse;
  font-size: 0.85rem;
}

.dialog .people th {
  font-weight: normal;
  opacity: 0.8;
  padding: 0 0.6rem;
}

.dialog .people td {
  padding: 0.1rem 0.6rem;
  text-align: center;
}

.dialog .people td:first-child {
  text-align: left;
}

.dialog .person::before {
  background: var(--person-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.7em;
  margin-right: 0.4em;
  width: 0.7em;
}

.dialog .clashes {
  border-left: 3px solid #d62828;
  padding-left: 0.6rem;
}

.dialog .clashes p,
.dialog .clashes ul {
  margin: 0.2rem 0;
}

/* What an import would write: long calendars scroll inside the dialog. */
.dialog .import-preview {
  border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size: 0.85rem;
  max-height: 40vh;
  overflow-y: auto;
  padding-left: 0.6rem;
}

.dialog .import-preview p,
.dialog .import-preview ul {
  margin: 0.2rem 0;
}

.dialog .import-preview ul {
  padding-left: 1.2rem;
}

.dialog .actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.dialog .actions .spacer {
  flex: 1;
}

.dialog .confirm {
  align-items: center;
  display: flex;
  font-size: 0.85rem;
  gap: 0.4rem;
}

/* The horizon: a row per series, with a twelve-month timeline. */

.horizon {
  --about-width: 22rem;
  min-width: 48rem;
}

.horizon-row {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: var(--about-width) 1fr;
}

.horizon-head {
  background: Canvas;
  position: sticky;
  top: 0;
  z-index: 1;
}

.timeline {
  position: relative;
}

.timeline.months {
  display: grid;
  font-size: 0.75rem;
  grid-template-columns: repeat(12, 1fr);
  opacity: 0.7;
}

.timeline.months .month {
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding-left: 0.2rem;
}

.horizon-group h3 {
  border-bottom: 3px solid var(--person-color);
  font-size: 1rem;
  margin: 1.2rem 0 0.3rem;
}

.horizon-group .empty {
  font-size: 0.85rem;
  margin: 0.2rem 0;
  opacity: 0.6;
}

.horizon-row.series {
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  padding: 0.3rem 0;
}

.horizon-row.series.editable {
  cursor: pointer;
}

.horizon-row.series.editable:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.horizon-row.series.ended {
  opacity: 0.55;
}

.horizon .about {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.horizon .about .title {
  font-weight: 600;
}

.horizon .about .when,
.horizon .about .validity {
  opacity: 0.85;
}

.status-tag {
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.7rem;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
}

.horizon .timeline .validity-bar {
  background: color-mix(in srgb, var(--person-color) 55%, Canvas);
  border-radius: 3px;
  height: 0.9rem;
  position: absolute;
  top: calc(50% - 0.45rem);
}

/* An end that goes on past the timeline fades out instead of stopping. */
.horizon .timeline .validity-bar.later {
  border-radius: 3px 0 0 3px;
  mask-image: linear-gradient(to right, black 85%, transparent);
}

.horizon .timeline .validity-bar.earlier {
  border-radius: 0 3px 3px 0;
}

.horizon .timeline .today {
  border-left: 2px solid Highlight;
  bottom: -0.3rem;
  position: absolute;
  top: -0.3rem;
}

/* Dragging on the week grid. */

.block {
  -webkit-touch-callout: none;
  user-select: none;
}

.lane.editable .block.movable {
  cursor: grab;
}

.block.dragging {
  box-shadow: 0 0.3rem 1rem color-mix(in srgb, black 50%, transparent);
  cursor: grabbing;
  opacity: 0.9;
  overflow: visible;
  z-index: 5;
}

/* The bottom edge, which stretches or shrinks the block. Taller than it
   looks, so a finger can find it. */
.block .resize {
  bottom: 0;
  cursor: ns-resize;
  height: 8px;
  left: 0;
  position: absolute;
  right: 0;
  touch-action: none;
}

.block .resize::after {
  border-bottom: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  bottom: 2px;
  content: "";
  left: 35%;
  position: absolute;
  right: 35%;
}

@media (pointer: coarse) {
  .block .resize {
    height: 14px;
  }
}

/* Shown in the bar while the live connection is down. */
.not-live {
  border: 1px solid #e6a100;
  border-radius: 3px;
  color: #e6a100;
  font-size: 0.75rem;
  padding: 0 0.4rem;
}

/* The notes strip above the week. */

.notes-strip {
  margin-bottom: 0.8rem;
}

.notes-strip header {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

.notes-strip h3 {
  font-size: 0.95rem;
  margin: 0;
}

.note-cards {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.4rem 0.1rem;
}

.note-cards .empty {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.6;
}

.note-card {
  background: color-mix(in srgb, var(--person-color) 12%, Canvas);
  border-left: 3px solid var(--person-color);
  border-radius: 4px;
  flex: 0 0 15rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

.note-card.editable {
  cursor: pointer;
}

.note-card.editable:hover {
  background: color-mix(in srgb, var(--person-color) 20%, Canvas);
}

.note-card header {
  display: flex;
  font-size: 0.75rem;
  justify-content: space-between;
  opacity: 0.8;
}

.note-card .author {
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.65rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  width: 1.1rem;
}

.note-card .body {
  margin: 0.3rem 0;
  white-space: pre-wrap;
}

.note-card .checklist {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}

.note-card .checklist li.done {
  opacity: 0.6;
  text-decoration: line-through;
}

.note-card .checklist label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.3rem;
}

/* A viewer sees the ticks but cannot change them. */
.note-card .checklist label:has(input:disabled) {
  cursor: default;
}

.note-card.editing {
  --person-color: Highlight;
  cursor: auto;
  display: flex;
  flex: 0 0 22rem;
  flex-direction: column;
  gap: 0.4rem;
}

.note-card.editing textarea,
.note-card.editing select {
  font: inherit;
  padding: 0.3em;
}

.note-card.editing .row {
  display: flex;
  gap: 0.6rem;
}

.note-card.editing label {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 0.75rem;
}

.note-card.editing .hint {
  font-size: 0.75rem;
  margin: 0;
  opacity: 0.8;
}

.note-card.editing .actions {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

.note-card.editing .actions .spacer {
  flex: 1;
}

.note-card.editing .confirm {
  align-items: center;
  display: flex;
  gap: 0.3rem;
}

/* The notes view. */

.notes-view .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.chip {
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  color: inherit;
  font-size: 0.85rem;
  padding: 0.2em 0.8em;
}

.chip::before {
  background: var(--person-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.6em;
  margin-right: 0.4em;
  width: 0.6em;
}

.chip.chosen {
  border-color: var(--person-color);
  box-shadow: inset 0 0 0 1px var(--person-color);
  font-weight: 600;
}

.notes-view .note-cards {
  flex-wrap: wrap;
  overflow: visible;
}

.notes-section h3 {
  font-size: 0.95rem;
  margin: 0.8rem 0 0.2rem;
}

.notes-view .empty {
  opacity: 0.6;
}

/* The checklist in the note editor. */

.checklist-edit ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist-edit li,
.checklist-edit .add-line {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}

.checklist-edit input[type="text"] {
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: 0.2em 0.3em;
}

.checklist-edit .remove-line {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  padding: 0 0.3em;
}

.checklist-edit .remove-line:hover {
  opacity: 1;
}

/* Reminders, in the item dialog and the note editor. */

fieldset.reminders {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.3rem;
  margin: 0;
  padding: 0.3rem 0.6rem 0.5rem;
}

.reminders .reminder-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reminders .reminder-list li {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.reminders .remove-line {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  padding: 0 0.3em;
}

.reminders .remove-line:hover {
  opacity: 1;
}

.reminders .empty,
.reminders .hint {
  margin: 0;
  opacity: 0.7;
}

.reminders .add-reminder {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.reminders .add-reminder select,
.reminders .add-reminder input {
  font: inherit;
  min-width: 0;
  padding: 0.2em 0.3em;
}

/* Reminders that came while the page was open. */

.allow-notifications {
  font-size: 0.8rem;
}

.reminder-toasts {
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: fixed;
  right: 1rem;
  z-index: 20;
}

.reminder-toast {
  align-items: baseline;
  background: Canvas;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-left: 4px solid Highlight;
  border-radius: 4px;
  box-shadow: 0 0.3rem 1rem color-mix(in srgb, black 30%, transparent);
  display: flex;
  gap: 0.6rem;
  max-width: 22rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
}

.reminder-toast span {
  opacity: 0.8;
}

.reminder-toast button {
  background: transparent;
  border: none;
  color: inherit;
  margin-left: auto;
  opacity: 0.6;
}

/* One day at a time, on a phone (week_view: below device::NARROW_PX). */

.grid.one-day {
  grid-template-columns: 2.8rem minmax(0, 1fr);
  min-width: 0;
}

.grid.one-day .lane-head {
  overflow: hidden;
  padding: 0 0.15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-strip {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 0.6rem;
}

.strip-day {
  align-items: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 6px;
  color: inherit;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 0.1rem;
  padding: 0.25rem 0;
}

.strip-day .weekday {
  font-size: 0.7rem;
  opacity: 0.75;
}

.strip-day .date {
  font-size: 1rem;
  font-weight: 600;
}

.strip-day.today .date {
  color: Highlight;
}

.strip-day.chosen {
  background: color-mix(in srgb, Highlight 18%, transparent);
  border-color: Highlight;
}

.strip-day .dots {
  display: flex;
  gap: 2px;
  min-height: 6px;
}

.strip-day .dot {
  background: var(--person-color);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

@media (max-width: 699.98px) {
  main {
    padding: 0.5rem;
  }

  .bar {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.4rem 0.6rem;
  }

  /* The tabs take a line of their own under the name and the buttons. */
  .bar .tabs {
    margin-right: 0;
    order: 10;
    width: 100%;
  }

  .bar .tabs .tab {
    flex: 1;
  }

  .bar .person {
    margin-left: auto;
  }

  .weeknav {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .weeknav h2 {
    font-size: 0.95rem;
    margin-left: 0.3rem;
  }

  /* Four people fit across a phone: the day's name gets short, and an
     item's times go above its title rather than beside it. With more, each
     lane keeps the width its times need and the table scrolls sideways,
     the days staying in place. */
  .day-table {
    min-width: calc(3.2rem + var(--lanes) * 5rem);
  }

  .day-table .when {
    background: Canvas;
    font-size: 0.75rem;
    left: 0;
    position: sticky;
    white-space: normal;
    width: 3.2rem;
    z-index: 1;
  }

  .day-table th,
  .day-table td {
    padding: 0.2rem;
  }

  .item {
    flex-direction: column;
    font-size: 0.72rem;
    gap: 0;
  }

  .overlay {
    padding: 0.5rem;
  }

  .dialog {
    padding: 0.8rem;
  }

  .note-card.editing {
    flex-basis: calc(100vw - 2rem);
  }

}