:root {
  --background-color-01: #F5F7FA;
  --background-color-02: #ECEEF2;
  --background-color-03: #FFFFFF;
  --background-color-04: #F8F9FB;
  --border: #E2E5EA;
  --text: #111827;
  --text-muted: #6B7280;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-text: #FFFFFF;
  --danger: #DC2626;
  --danger-hover: #B91C1C;
  --shadow: rgba(0, 0, 0, 0.06);
  --shadow-md: rgba(0, 0, 0, 0.10);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 1em;
  --orange: #F59E0B;
  --background-color-warning-card: color-mix(in srgb, var(--orange), transparent 90%);
  --border-color-warning-card: color-mix(in srgb, var(--orange), transparent 65%);
  --border-color-warning-card: color-mix(in srgb, var(--orange), transparent 65%);
  --text-color-warning: color-mix(in srgb, #92400E, var(--text) 30%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color-01: #0F172A;
    --background-color-02: #1E293B;
    --background-color-03: #1A2540;
    --background-color-04: #1E2B47;
    --border: #2D3A52;
    --text: #E2E8F0;
    --text-muted: #94A3B8;
    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --primary-text: #FFFFFF;
    --danger: #EF4444;
    --danger-hover: #DC2626;
    --shadow: rgba(0, 0, 0, 0.25);
    --shadow-md: rgba(0, 0, 0, 0.40);
    --text-color-warning: color-mix(in srgb, #FCD34D, var(--text) 20%);
  }
}

.margin-top-m {
  margin-top: 2em;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background-color-01);
  color: var(--text);
  height: 100%;
}

body {
  font-family: 'Noto Sans', system-ui, Helvetica, Arial, sans-serif;
  margin: 0;
  height: 100%;
  line-height: 1.6;
  font-size: 15px;
  background: var(--background-color-01);
  display: grid;
  grid-template-rows: auto 1fr;
}

a {
  color: var(--text);
  text-decoration: none;
}

header {
  background: var(--background-color-03);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  padding: .8em 2em;
  min-height: 60px;

  a.logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
  }

  nav {
    display: flex;
    align-items: center;
    gap: .5em;
    flex-wrap: wrap;

    a {
      display: flex;
      align-items: center;
      gap: .4em;
      text-decoration: none;
      padding: .5em 1em;
      border-radius: var(--radius-sm);
      font-weight: 500;
      color: var(--text-muted);

      &:hover {
        background: var(--background-color-02);
        color: var(--text);
        opacity: 1;
      }

      &.active {
        background: color-mix(in srgb, var(--primary), transparent 88%);
        color: var(--primary);
      }

      svg.icon {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
      }
    }
  }
}

.content-pane {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  padding: 1em .3em 1em;
  display: grid;
  grid-template-columns: 1fr min(100%, 1000px) 1fr;
  grid-auto-rows: min-content;

  > * {
    grid-column: 2;
  }
}

button, .button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--background-color-03);
  padding: .5em 1em;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9em;
  font-weight: 500;
  white-space: nowrap;

  &:hover {
    background: var(--background-color-02);
    border-color: color-mix(in srgb, var(--border), var(--text) 15%);
  }

  &.delete, &.cancel {
    background: color-mix(in srgb, var(--danger), transparent 90%);
    border-color: color-mix(in srgb, var(--danger), transparent 60%);
    color: var(--danger);

    &:hover {
      background: var(--danger);
      border-color: var(--danger);
      color: #fff;
    }
  }
}

/* A borderless danger action, for the inline delete forms of the tasks and
   contacts lists. */
.link-danger {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: var(--danger);
  font-size: .9em;
  font-weight: 500;

  &:hover {
    text-decoration: underline;
  }
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="file"],
select {
  background: var(--background-color-04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  height: 38px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  outline: none;

  &:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 80%);
  }
}

input[type="color"] {
  appearance: none;
  background: var(--background-color-04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  height: 2.5em;
  cursor: pointer;
  outline: none;

  &:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 80%);
  }
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--text);
}

.shrink-cell {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table#app-tokens {
  td {
    width: min-content;
  }
  td:first-child {
    width: 100%;
    max-width: 0;
    text-overflow: ellipsis;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--background-color-03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  white-space: nowrap;

  tr:has(td) {
    background: var(--background-color-03);
  }

  tr:hover:has(td) {
    background: var(--background-color-02);
  }

  th, td {
    padding: .8em 1em;
    text-align: left;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--background-color-04);

    &:last-child {
      width: 0;
    }
  }

  tr:last-child td {
    border-bottom: none;
  }
}

ul.collection-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8em;

  li.collection-list-item {
    position: relative;
    background: var(--background-color-03);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px var(--shadow);
    overflow: hidden;

    &:hover {
      box-shadow: 0 4px 12px var(--shadow-md);
      border-color: color-mix(in srgb, var(--border), var(--primary) 30%);
    }

    /* Whole-tile navigation applies only to tiles that opt in with a
       direct <a> child (the group tiles): the anchor spans the tile and
       the content lets clicks fall through to it. The collection tiles
       (calendars, addressbooks, linked platforms) carry forms and inputs
       of their own, so they must keep their pointer events — clicks on an
       email field must not navigate away from the tile. */
    &:has(> a) {
      > a {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .inner {
        pointer-events: none;

        button, a {
          pointer-events: all;
          position: relative;
        }
      }
    }

    .inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1em;
      grid-template-areas:
        ".           color-chip"
        "title       color-chip"
        "description color-chip"
        /*"sub-url     color-chip"*/
        "metadata    color-chip"
        "actions     color-chip"
        ".           color-chip";
      row-gap: .7em;
      column-gap: 1em;
      grid-template-rows: 1em auto auto auto auto auto 1em;
      padding-left: 1em;
      padding-top: 1em;

      .title {
        grid-area: title;
        font-weight: 600;
        grid-row: inherit;
        line-height: 1em;
      }

      .description {
        grid-area: description;
        color: var(--text-muted);
        font-size: .9em;
        grid-row: inherit;
        padding-bottom: 2.3em;
      }

      .subscription-url {
        grid-area: sub-url;
        font-size: .9em;
        color: var(--text-muted);
        word-break: break-all;
        grid-row: inherit;
      }

      .metadata {
        grid-area: metadata;
        font-size: .8em;
        color: var(--text-muted);
        grid-row: inherit;
        display: grid;
        grid-auto-flow: column;
        column-gap: 3rem;
        grid-template-columns: 1fr;
      }

      .actions {
        grid-area: actions;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4.5em;
        margin-top: 3.3em;
        grid-row: inherit;
        display: grid;
        grid-auto-flow: column;
        column-gap: 2rem;
        .invite-form {
          display: grid;
          grid-auto-flow: column;
          column-gap: .3rem;
          grid-template-columns: 1fr;
        }
        .invite-email {
          font-size: 15px;
          line-height: inherit;
        }
      }

      .color-chip {
        grid-area: color-chip;
        background: var(--color, transparent);
      }
    }

    /* A calendar tile folds one by one (2026-10-13): the section heading
       above folds all tiles at once, the tile's own <details> folds a
       single calendar — a plain wrapper around the .inner grid div (a
       display:grid details would make the browser's internal
       ::details-content slot — which holds every non-summary child —
       the single grid item, auto-placed into the grid's first 1em
       spacer row, so the opened tile rendered empty; found live). The
       summary is the tile's title row. */
    details.collection-tile {
      summary {
        cursor: pointer;
        font-weight: 600;
        line-height: 1em;
        padding: 1em 1em .4em;
      }

      &[open] summary {
        padding-bottom: 0;
      }

      &[open] > .inner {
        padding-top: 0;
      }
    }
  }
}

span.chip {
  vertical-align: center;
  background: color-mix(in srgb, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: .7em;
  font-weight: 600;
  padding: .3em .8em;
  border-radius: 1em;
  margin: 0 .3em;
}

.invite-actions {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-left: .5em;

  form {
    display: inline-flex;
  }

  button {
    padding: .2em .6em;
    font-size: .8em;
  }
}

/* Share blocks on the calendar/addressbook tiles (Omnical §17.15). They
   flow like the other tile rows: column 1 of the tile grid, auto rows. */
.block-label {
  font-size: .72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.subscribe-block,
.access-block,
.client-help,
.client-help-link {
  grid-area: metadata;
  grid-row: inherit;
}

.subscribe-block,
.access-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6em;
  padding: .8em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background-color-04);
  margin-right: 2em;

  .metadata {
    width: 100%;
  }
}

.share-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  width: 100%;
}

.share-url {
  font-size: .85em;
  word-break: break-all;
  color: var(--text);
}

.muted {
  color: var(--text-muted);
  font-size: .85em;
}

/* Inline forms — replaces the layout inline styles that used to sit on the
   share/group/linked-platforms forms. */
form.inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;

  select,
  input[type="email"] {
    height: 2.35em;
    padding: .2em .6em;
    width: auto;
  }
}

/* Per-client setup instructions (Omnical §17.15 §6) */
.client-help {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background-color-04);
  padding: .6em 1em;
  margin-right: 2em;

  summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
  }

  &[open] summary {
    margin-bottom: .8em;
  }

  h4 {
    margin: .8em 0 .2em;
    font-size: 1em;
  }

  ul {
    margin: .4em 0;
    padding-left: 1.4em;
  }

  li {
    margin: .35em 0;
  }

  code {
    word-break: break-all;
  }
}

.client-help.profile-intro {
  margin-bottom: 2em;
}

/* The calendar tile's single help link: the full per-client setup
   instructions live on the calendar page — the tile links there instead
   of carrying them inline. */
.client-help-link {
  font-size: .85em;
  font-weight: 600;
  color: var(--text-muted);
}

/* The Profile page's collapsible sections — the former top-level tabs
   (App tokens, Calendars, Addressbooks, Groups, Linked platforms), each
   one <details> with its pre-rendered section inside. */
.profile-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-color-04);
  padding: .8em 1.2em;
  margin-bottom: 1.6em;

  summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.25;
    color: var(--text);
  }

  &[open] summary {
    margin-bottom: 1em;
  }

  /* The embedded section's own error banner should span the section. */
  > .error {
    margin-bottom: 1em;
  }
}

/* One-time banners and page-level messages */
.error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--danger), transparent 70%);
  border-radius: var(--radius);
  padding: .8em 1em;
}

.success {
  width: 100%;
  background: color-mix(in srgb, #16A34A, transparent 92%);
  border: 1px solid color-mix(in srgb, #16A34A, transparent 70%);
  border-radius: var(--radius);
  padding: .8em 1em;

  p {
    margin: .4em 0;
  }
}

.tab-radio {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--background-color-02);
  border: 1px solid var(--border);
  border-radius: .5em;
  padding: .1em;
  gap: .2em;
  margin-bottom: 1em;

  label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: .5em .7em;
    border-radius: .5em;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    margin-top: 0;

    input {
      appearance: none;
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    svg { width: 1.2em; height: 1.2em; }
  }

  label:hover {
    background: var(--background-color-03);
    color: var(--text);
  }

  label:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
  }

  label:has(input:checked) {
    border: 1px solid var(--border);
    background: var(--background-color-03);
    color: var(--text);
    box-shadow: 0 1px 3px var(--shadow);
  }
}

/* The create-calendar modal's "add holidays" dropdown: a <details> of
   grouped checkboxes (create-calendar-form), so it stays dependency-free
   and keyboard-native inside the <dialog>. */
.holidays-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-color-03);
  margin-top: .5em;

  summary {
    cursor: pointer;
    padding: .5em .75em;
    font-size: .9em;
    color: var(--text-muted);
  }

  .holidays-groups {
    max-height: 220px;
    overflow-y: auto;
    padding: 0 .75em .75em;
    display: grid;
    gap: 1em;
  }

  .holidays-group {
    display: grid;
    gap: .3em;
  }

  .holidays-group-label {
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
  }

  .holidays-option {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0;
    font-size: .9em;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
  }
}

dialog {
  background: var(--background-color-03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2em;
  box-shadow: 0 20px 60px var(--shadow-md);
  color: var(--text);
  max-width: 480px;
  width: 100%;
  margin: auto;
  max-height: 100dvh;
  overflow-y: auto;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

form {
  label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1em;

    input[type="text"],
    input[type="url"],
    select {
      color: var(--text);
      font-size: 0.9rem;
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="file"],
  input[type="color"],
  select {
    display: block;
    width: 100%;
  }

  label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    color: var(--text);
    font-weight: 400;
    margin-top: .1em;

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      order: -1;
      accent-color: var(--primary);
    }
  }
}

.login_window {
  max-width: 380px;
  margin: 5em auto 3em;
  background: var(--background-color-03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2em;
  box-shadow: 0 4px 24px var(--shadow);

  button[type="submit"] {
    width: 100%;
    text-align: center;
    margin-top: .5em;
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
    font-weight: 600;

    &:hover {
      background: var(--primary-hover);
      border-color: var(--primary-hover);
    }
  }
}

button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
  font-weight: 600;

  &:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}

generate-app-token-form {
  form {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 1em;
    flex-wrap: wrap;

    input[type="text"] {
      flex: 1;
      min-width: 160px;
    }
  }

  .token-result {
    margin-top: 1em;
    padding: 1em;
    background: var(--background-color-warning-card);
    border: 1px solid var(--border-color-warning-card);
    border-radius: var(--radius);

    .token-result-warning {
      margin: 0 0 1em;
      font-size: 0.9em;
      font-weight: 600;
      color: var(--text-color-warning)
    }

    .token-result-row {
      display: flex;
      align-items: center;
      gap: .8em;
      flex-wrap: wrap;
      margin-bottom: 1em;
    }

    .token-label {
      flex: 0 0 100%;
      font-size: 0.85em;
      font-weight: 600;
      color: var(--text-color-warning);
    }

    .token-value {
      flex: 1;
      min-width: 0;
      font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
      font-size: 0.9em;
      word-break: break-all;
      background: var(--background-color-03);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: .7em 1em;
      display: block;
      line-height: 1.5;
    }

    .token-hint {
      margin: 0 0 1em;
      font-size: 0.9em;

      a {
        color: var(--primary);
        text-decoration: underline;
      }
    }
  }
}

pre {
  background: var(--background-color-04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  padding: 1em;
}

svg.icon {
  stroke-width: 2px;
  color: currentColor;
  stroke: currentColor;
}

footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
  padding: 0 2em 2em;
  max-width: 1000px;
  margin: 1em auto 0;
  color: var(--text-muted);
  font-size: 0.9em;

  a {
    color: var(--text-muted);
    &:hover {
      color: var(--text);
    }
  }
}

/* ------------------------------------------------------------------ */
/* Calendar month view                                                */
/* ------------------------------------------------------------------ */

.calendar-view {
  margin-top: 1em;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: .5em;

  h2 {
    margin: 0;
    font-size: 1.4em;
  }
}

.month-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: .7em;
  margin-left: .5em;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: .4em;

  a {
    padding: .35em .7em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background-color-03);
    font-size: .9em;

    &:hover {
      background: var(--background-color-02);
    }
  }

  .nav-arrow {
    font-size: 1.1em;
    line-height: 1;
    padding: .2em .55em;
  }
}

.button-primary-link {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--primary);
  background: var(--primary);
  padding: .5em 1em;
  border-radius: var(--radius-sm);
  color: var(--primary-text);
  font-size: .9em;
  font-weight: 600;
  white-space: nowrap;

  &:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}

.calendar-month {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--background-color-03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;

  th {
    padding: .5em;
    font-size: .8em;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  td {
    vertical-align: top;
    height: 92px;
    border: 1px solid var(--border);
    padding: 4px;
    font-size: .85em;
  }

  td.other-month {
    background: var(--background-color-04);
  }

  td.today {
    background: color-mix(in srgb, var(--primary), transparent 94%);
  }

  .day-number {
    font-size: .85em;
    color: var(--text-muted);
    font-weight: 600;
  }

  td.today .day-number {
    color: var(--primary);
  }
}

.event {
  display: block;
  /* 1.5x the original .72em (owner request 2026-10-11): month-grid event
     labels were unreadable at a glance; the time and summary spans inherit
     this size and scale together. */
  font-size: 1.08em;
  line-height: 1.3;
  margin: 2px 0;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--event-color);
  background: color-mix(in srgb, var(--event-color), transparent 84%);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    background: color-mix(in srgb, var(--event-color), transparent 70%);
  }

  .event-time {
    font-weight: 600;
    margin-right: .3em;
  }
}

.calendar-legend {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: .75em;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .85em;
  color: var(--text-muted);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--event-color);
  display: inline-block;
  border: 1px solid var(--border);
}

/* §18.47: the linked-external-subscription badge (the handshake) on grid
   event chips and legend chips. A pill filled with the calendar's own
   color; the ink is chosen server-side against that color's WCAG
   luminance — black on light colors, white on dark ones (`--badge-ink`,
   emitted inline per badge). No color / unparseable color: transparent
   pill, ink inherits the page's text colour. */
.badge-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 999px;
  background: var(--event-color, transparent);
  color: var(--badge-ink, currentColor);
}

.badge-external svg {
  width: 0.7em;
  height: 0.7em;
  fill: currentColor;
  stroke: none;
}

.times-note {
  color: var(--text-muted);
  font-size: .8em;
  margin-top: .5em;
}

/* ------------------------------------------------------------------ */
/* Event form                                                          */
/* ------------------------------------------------------------------ */

.event-form-page {
  max-width: 640px;
  margin: 2em auto;
}

.event-form {
  textarea {
    display: block;
    width: 100%;
    color: var(--text);
    font-size: .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5em .7em;
    background: var(--background-color-03);
  }

  input[type="date"],
  input[type="time"] {
    display: block;
    width: 100%;
  }
}

.event-datetime {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;

  label {
    flex: 1;
    min-width: 220px;
  }
}

.form-actions {
  margin-top: 1.5em;
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Tasks view                                                          */
/* ------------------------------------------------------------------ */

.tasks-view {
  margin-top: 1em;
}

.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: .75em;

  h2 {
    margin: 0;
  }
}

.tasks-filters {
  display: flex;
  gap: .4em;
}

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

.task-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: .6em .8em;
  border: 1px solid var(--border);
  border-left: 3px solid var(--event-color);
  border-radius: var(--radius-sm);
  background: var(--background-color-03);
  margin-bottom: .5em;

  &.completed .task-summary {
    text-decoration: line-through;
    color: var(--text-muted);
  }
}

.task-summary {
  font-weight: 500;
}

.task-meta {
  display: flex;
  gap: .6em;
  align-items: center;
  font-size: .85em;
  white-space: nowrap;
}

.task-due {
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Contacts view                                                       */
/* ------------------------------------------------------------------ */

.contacts-page {
  max-width: 720px;
  margin: 2em auto;
}

.contact-list {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
}

.contact-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: .6em .8em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-color-03);
  margin-bottom: .5em;
}

.contact-name {
  font-weight: 500;
}

.contact-meta {
  display: flex;
  gap: .8em;
  font-size: .9em;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Print pages (PLAN_NEXT_AGENT_PRINTING.md §4.3)                      */
/* ------------------------------------------------------------------ */

/* 8.5×11 paper: the browser's print dialog does the printing (plan D1); */
@page {
  size: letter;
  margin: .5in;
}

.print-root {
  max-width: 7.5in;
  margin: 1em auto;
}

.print-toolbar {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-color-03);
  padding: .75em 1em;
  margin-bottom: 1em;

  h1 {
    margin: 0 0 .2em;
  }
}

.print-toolbar-actions {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  align-items: center;
  margin: .75em 0;
}

/* Sticker geometry is fixed (plan D3): 4×5 cells of 1.75×1.9 in inside */
/* the 7.5×10 in printable area of a letter page with .5 in margins.     */
.sticker-sheet {
  display: flex;
  flex-wrap: wrap;
  width: 7.5in;
  min-height: 9.5in;
  page-break-after: always;
  break-after: page;
}

.sticker {
  width: 1.75in;
  height: 1.9in;
  outline: 1px dashed var(--text-muted);
  outline-offset: -5px;
  padding: .12in;
  box-sizing: border-box;
  border-left: 4px solid var(--event-color);
  display: flex;
  flex-direction: column;
  gap: .08in;
  overflow: hidden;
  break-inside: avoid;
}

.sticker-title {
  font-weight: 600;
  font-size: 1.05em;
}

.sticker-line {
  font-size: .85em;
  line-height: 1.25;
}

.paper-list {
  display: flex;
  flex-direction: column;
  gap: .45em;
}

.paper-row {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-left: 4px solid var(--event-color);
  border-radius: var(--radius-sm);
  background: var(--background-color-03);
  padding: .5em .8em;
  break-inside: avoid;
}

.paper-label {
  font-weight: 600;
}

.paper-line {
  font-size: .9em;
}

/* The toolbar is screen-only chrome; the page itself is what prints.    */
@media print {
  .print-toolbar {
    display: none;
  }

  footer {
    display: none;
  }

  header {
    display: none;
  }

  body {
    background: none;
  }
}

/* The help page (/help): the connection guide's diagrams are pre-rendered
   SVGs (assets/diagrams, generated from the planning repo's mermaid
   sources) — mermaid's neutral theme draws dark text on transparency, so
   the card gets a pinned light background and stays readable in dark
   mode. Scale to the content pane, never wider. */
img.diagram {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5rem 0;
  padding: 1rem;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* The login window's guide link sits under whichever login forms are
   available — it must show in every configuration (password, OIDC,
   neither). */
.login-help-link {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* The guide's inline code (URLs, filenames) breaks anywhere rather than
   widening the pane on a phone. */
.help-page code {
  word-break: break-all;
}