/* The kanban app's own layout, on top of the vendored htw-style tokens (static/htw/htw.css,
   never edited here).

   ⚠️ THIS FILE IS SRI-PINNED IN base.html. Editing it changes its sha384, and a stale
   integrity attribute means the browser refuses the whole stylesheet. Recompute it in the
   same commit (tests/test_vendored_assets.py says the value to use).

   ⚠️ No inline style="" anywhere and no <style> blocks: style-src is the nonce only. */

/* htmx's indicator rules. htmx would inject these as an un-nonced <style>, which the CSP
   blocks, so base.html turns that off (includeIndicatorStyles:false) and they live here.
   Both halves must stay, or the indicator breaks (tests/test_htmx_no_inline_style.py). */
.htmx-indicator {
  opacity: 0;
}
.htmx-request .htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--htw-blue, #0070C0);
  color: #fff;
}
.top .brand {
  font-weight: bold;
  font-size: 1.125rem;
}
.top .who {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}
/* A long address is cut short, never the Sign out button after it. */
.top .who-email {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
  margin-left: 0.25rem;
}
/* Sign out: a form (it's a POST), looking like the header's links. */
.top .sign-out {
  flex-shrink: 0;
  margin-left: 0.75rem;
}
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* The sign-in pages (web/login.py). */
.signin {
  max-width: 26rem;
  margin: 3rem auto;
}
.signin .code-input {
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
  max-width: 12rem;
}

/* The bell and Settings (K7), after K8's .top-nav. The header is on the brand blue. */
.top-you {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
}
.top-you a {
  color: #fff;
}
.bell-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 0.625rem;
  background: #FFFFFF;
  color: #0070C0;
  font-weight: bold;
  text-align: center;
}
.bell-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bell-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #E0E0E0;
}
.bell-item p {
  margin: 0 0 0.25rem;
}
.bell-item.unread {
  border-left: 4px solid #0070C0;
  padding-left: 0.75rem;
}
.bell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.settings select {
  max-width: 100%;
}

main {
  padding: 1.5rem 1.25rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* --- K2: home, board pages, sharing ------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.muted {
  color: var(--htw-slate, #546E7A);
}
.crumbs {
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.page-head h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.inline {
  display: inline;
}
.notice {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--htw-info-tint, #E6F1FA);
  color: var(--htw-info-text, #004A80);
}
.board-section {
  margin: 1.5rem 0;
}
.tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}
.tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--htw-neutral-300, #D0D5DA);
  border-radius: var(--radius-md, 6px);
  background: #fff;
}
.tile-body {
  flex: 1;
  min-width: 0;
}
.tile-name {
  font-weight: bold;
  overflow-wrap: anywhere;
}
.tile-meta {
  font-size: 0.8125rem;
  color: var(--htw-slate, #546E7A);
  margin-top: 0.25rem;
}
.tile-swatch {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm, 4px);
}
/* The board palette (core/boards.py PALETTE): a class per colour, never an inline style. */
.swatch-0070c0 { background: #0070C0; }
.swatch-00a3e0 { background: #00A3E0; }
.swatch-2e7d32 { background: #2E7D32; }
.swatch-f2a900 { background: #F2A900; }
.swatch-d9531e { background: #D9531E; }
.swatch-c62828 { background: #C62828; }
.swatch-6a1b9a { background: #6A1B9A; }
.swatch-546e7a { background: #546E7A; }
.star {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  color: var(--htw-neutral-300, #B0B8C0);
}
.star.on {
  color: var(--htw-warning, #F2A900);
}
.star:focus-visible {
  outline: 2px solid var(--htw-blue, #0070C0);
}
.empty {
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--htw-neutral-300, #D0D5DA);
  border-radius: var(--radius-lg, 8px);
}
.footer-links {
  margin-top: 2rem;
  font-size: 0.875rem;
}
.form {
  display: grid;
  gap: 0.5rem;
  max-width: 36rem;
}
.form input[type="text"], .form input:not([type]), .form textarea,
.form-row input[type="email"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--htw-input-border, #8A949E);
  border-radius: var(--radius-sm, 4px);
}
.form fieldset, .colours {
  border: 0;
  padding: 0;
  margin: 0.5rem 0;
}
.colours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.colour, .choice {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.lists {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
}
.list {
  flex: 0 0 16rem;
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 6px);
  background: var(--htw-neutral-50, #F4F6F8);
}
.list-name {
  font-size: 1rem;
  margin: 0;
}
.members {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.members th, .members td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
  vertical-align: middle;
}
.kind {
  font-size: 0.75rem;
  padding: 0 0.375rem;
  margin-right: 0.25rem;
  border-radius: var(--radius-full, 999px);
  background: var(--htw-blue-100, #E6F1FA);
}
.share-add {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
  margin-bottom: 1.5rem;
}
.share-add input[type="search"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--htw-input-border, #8A949E);
  border-radius: var(--radius-sm, 4px);
}
.results .result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.danger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (max-width: 40rem) {
  .members thead {
    display: none;
  }
  .members tr {
    display: grid;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
  }
  .members td {
    border: 0;
    padding: 0.25rem 0;
  }
}

/* --- K3a: the board ------------------------------------------------------------------------ */

main.wide {
  max-width: none;
}
.board-tools {
  margin: 0.25rem 0;
  font-size: 0.875rem;
}
.board-status:empty {
  display: none;
}
.board-status {
  font-size: 0.875rem;
  margin: 0.25rem 0;
}
.lists {
  align-items: flex-start;
}
.list {
  /* Relative: the .sr-only labels inside are absolutely positioned, and without a positioned
     ancestor they escape the horizontal scroller and widen the whole page on a phone. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--htw-neutral-200, #E3E7EB);
}
.list-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.list-head .list-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.list-handle {
  cursor: grab;
  color: var(--htw-slate, #546E7A);
  user-select: none;
}
.wip {
  font-size: 0.8125rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-full, 999px);
  background: #fff;
  white-space: nowrap;
}
.wip.wip-over {
  background: var(--htw-danger, #C62828);
  color: #fff;
}
.list.over-wip {
  box-shadow: inset 0 3px 0 var(--htw-danger, #C62828);
}
.wip-warning {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--htw-danger, #C62828);
}
.lane-name {
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
  color: var(--htw-slate, #546E7A);
}
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2.5rem;
}
.card {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--htw-neutral-300, #D0D5DA);
  border-radius: var(--radius-md, 6px);
  background: #fff;
  cursor: grab;
}
.card.sortable-ghost {
  opacity: 0.4;
}
.card-title {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.card-title:hover, .card-title:focus-visible {
  text-decoration: underline;
}
/* K5: the cover image, across the top of the card. */
.card-cover {
  display: block;
  width: calc(100% + 1.25rem);
  max-height: 10rem;
  margin: -0.5rem -0.625rem 0.5rem;
  object-fit: cover;
  border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0;
  background: var(--htw-neutral-100, #EEF1F4);
}
.labels {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.label {
  font-size: 0.75rem;
  min-width: 2rem;
  min-height: 0.5rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-sm, 4px);
  color: #fff;
}
.label.swatch-f2a900, .label.swatch-00a3e0 {
  color: #1A1A1A;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}
.badge {
  padding: 0 0.375rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--htw-neutral-100, #EEF1F4);
  white-space: nowrap;
}
.badge-done, .due.due-done {
  background: #E3F1E4;
  color: #1B5E20;
}
.due.due-soon {
  background: #FFF4D6;
  color: #6B4A00;
}
.due.due-overdue {
  background: var(--htw-danger, #C62828);
  color: #fff;
}
.avatars {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  gap: 0.125rem;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: bold;
  background: var(--htw-blue, #0070C0);
  color: #fff;
}
.menu > summary {
  cursor: pointer;
  list-style: none;
  padding: 0 0.375rem;
  border-radius: var(--radius-sm, 4px);
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary:focus-visible {
  outline: 2px solid var(--htw-blue, #0070C0);
}
.menu-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.card-menu > summary {
  font-size: 0.8125rem;
  color: var(--htw-slate, #546E7A);
  margin-top: 0.25rem;
}
.stack {
  display: grid;
  gap: 0.25rem;
}
.stack input, .stack select, .quick-add input {
  font: inherit;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--htw-input-border, #8A949E);
  border-radius: var(--radius-sm, 4px);
}
.quick-add {
  display: flex;
  gap: 0.375rem;
}
.quick-add input {
  flex: 1;
}
.list-new {
  background: transparent;
  border: 1px dashed var(--htw-neutral-300, #D0D5DA);
}
.cards-single {
  max-width: 20rem;
  margin: 1rem 0;
}
.card-actions {
  max-width: 28rem;
  display: grid;
  gap: 0.75rem;
}
.archived {
  list-style: none;
  padding: 0;
  margin: 0;
}
.archived-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
/* Phones: one list fills most of the screen and snaps into place as you swipe. */
@media (max-width: 40rem) {
  main.wide {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .lists {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .list {
    flex-basis: 85vw;
    scroll-snap-align: start;
  }
}

/* --- K9b: swimlanes ------------------------------------------------------------------------- */
/* A board with two or more lanes (_lists.html .lanes-grid). On a desktop the columns are a
   grid: the lane rail, then every list, each a subgrid spanning the same rows (head, one per
   lane, quick add), so a lane's cells line up across the lists however tall they grow. The
   row count is a class per lane count (style-src is the nonce only: no inline sizes), up to
   core/lanes.py LANES_MAX. On a phone the lists stay a swipe of columns, each stacking its
   lanes under their names, and the rail (lane menus, collapse) comes after the lists. */
.lane-add {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  max-width: 20rem;
}
.lane-add > summary {
  padding: 0;
  color: var(--htw-blue, #0070C0);
  text-decoration: underline;
}
.lane-rail {
  position: relative;
  flex: 0 0 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
}
.lane-head {
  /* Relative: the menu's ⋯ sits at the top right, beside the name; its body opens below. */
  position: relative;
  padding: 0.375rem 2rem 0.375rem 0.5rem;
  border-left: 4px solid var(--htw-blue, #0070C0);
  border-radius: var(--radius-sm, 4px);
  background: var(--htw-neutral-50, #F4F6F8);
}
.lane-title-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.lane-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.lane-menu > summary {
  position: absolute;
  top: 0.375rem;
  right: 0.25rem;
}
.lane-menu[open] > .menu-body {
  margin-right: -1.5rem;
}
.lane-toggle {
  font: inherit;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--htw-slate, #546E7A);
}
.lane-toggle:focus-visible {
  outline: 2px solid var(--htw-blue, #0070C0);
}
.lane-head.lane-collapsed .lane-toggle span {
  display: inline-block;
  transform: rotate(-90deg);
}
.lanes-grid .cell {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--htw-neutral-300, #D0D5DA);
}
.cell-collapsed {
  display: none;
  margin: 0;
  font-size: 0.8125rem;
}
.cell.lane-collapsed .cards {
  display: none;
}
.cell.lane-collapsed .cell-collapsed {
  display: block;
}
.list-top {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Quick add with a lane picker: the title on its own line, then the lane and Add. */
.lanes-grid .quick-add {
  flex-wrap: wrap;
}
.lanes-grid .quick-add input {
  flex: 1 1 100%;
}
.quick-add select {
  font: inherit;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--htw-input-border, #8A949E);
  border-radius: var(--radius-sm, 4px);
}
@media (min-width: 40.0625rem) {
  .lists.lanes-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 16rem;
    grid-template-columns: 11rem;
    align-items: stretch;
  }
  .lanes-grid > .list, .lanes-grid > .lane-rail {
    display: grid;
    grid-template-rows: subgrid;
    /* One column the width of the list: without minmax(0, ...) it grows to the quick add's
       min-content (box, lane picker, button) and spills over the next list. */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .lanes-grid > .list.list-new {
    /* Not a subgrid: its form would make the head row as tall as itself. */
    display: block;
    align-self: start;
  }
  .lanes-grid .lane-name {
    /* The rail names the row; the cell's own name is for a phone (and its list's label). */
    display: none;
  }
  .lanes-grid .lane-rail {
    padding-left: 0;
  }
  .lanes-2 > .list, .lanes-2 > .lane-rail, .lanes-2 > .list-new { grid-row: span 4; }
  .lanes-3 > .list, .lanes-3 > .lane-rail, .lanes-3 > .list-new { grid-row: span 5; }
  .lanes-4 > .list, .lanes-4 > .lane-rail, .lanes-4 > .list-new { grid-row: span 6; }
  .lanes-5 > .list, .lanes-5 > .lane-rail, .lanes-5 > .list-new { grid-row: span 7; }
  .lanes-6 > .list, .lanes-6 > .lane-rail, .lanes-6 > .list-new { grid-row: span 8; }
  .lanes-7 > .list, .lanes-7 > .lane-rail, .lanes-7 > .list-new { grid-row: span 9; }
  .lanes-8 > .list, .lanes-8 > .lane-rail, .lanes-8 > .list-new { grid-row: span 10; }
  .lanes-9 > .list, .lanes-9 > .lane-rail, .lanes-9 > .list-new { grid-row: span 11; }
  .lanes-10 > .list, .lanes-10 > .lane-rail, .lanes-10 > .list-new { grid-row: span 12; }
  .lanes-11 > .list, .lanes-11 > .lane-rail, .lanes-11 > .list-new { grid-row: span 13; }
  .lanes-12 > .list, .lanes-12 > .lane-rail, .lanes-12 > .list-new { grid-row: span 14; }
}
@media (max-width: 40rem) {
  .lane-rail {
    /* After the lists: a phone opens on the first list's cards, its lanes stacked. */
    order: 1;
    flex-basis: 85vw;
    scroll-snap-align: start;
    border-radius: var(--radius-md, 6px);
    background: var(--htw-neutral-50, #F4F6F8);
  }
  .lane-rail-end {
    display: none;
  }
}

/* --- K3b: the card detail panel ------------------------------------------------------------ */

/* Over the board on the right on a desktop; the whole screen on a phone (below). */
.card-panel-slot:empty {
  display: none;
}
.card-panel-slot {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(34rem, 100%);
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid var(--htw-neutral-300, #D0D5DA);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}
.card-panel {
  position: relative;
  padding: 1rem 1.25rem 2rem;
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.panel-head h2 {
  margin: 0;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}
.panel-head h2:focus {
  outline: none;
}
.panel-close {
  flex: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--htw-neutral-300, #D0D5DA);
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
}
.panel-where {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
}
.panel-section {
  margin: 1rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.panel-section h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.panel-badges:empty {
  display: none;
}
.small {
  font-size: 0.875rem;
}
.grow {
  flex: 1;
  min-width: 0;
}
.form-row input.grow, .card-panel textarea, .card-panel input[type="date"],
.card-panel input[type="time"], .card-panel input[type="email"], .card-panel select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--htw-input-border, #8A949E);
  border-radius: var(--radius-sm, 4px);
}
.card-panel textarea {
  width: 100%;
  box-sizing: border-box;
}
.card-panel .htw-error p {
  margin: 0.25rem 0;
}
.markdown {
  overflow-wrap: anywhere;
}
.markdown pre {
  overflow-x: auto;
  padding: 0.5rem;
  background: var(--htw-neutral-50, #F4F6F8);
}
.markdown table {
  border-collapse: collapse;
}
.markdown th, .markdown td {
  border: 1px solid var(--htw-neutral-300, #D0D5DA);
  padding: 0.25rem 0.5rem;
}
/* Edit / preview: the preview replaces the text box until "Edit" (static/app.js). */
.description-form .preview, .description-form .preview-off {
  display: none;
}
.description-form.previewing .preview {
  display: block;
  min-height: 6rem;
  padding: 0.5rem;
  border: 1px dashed var(--htw-neutral-300, #D0D5DA);
}
.description-form.previewing .preview-off {
  display: inline-block;
}
.description-form.previewing textarea, .description-form.previewing .preview-on {
  display: none;
}
.label-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}
.people {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.person-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* K5: the panel's attachments. */
.files {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.file {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.375rem 0;
}
.file-thumb img, .file-icon {
  display: block;
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  background: var(--htw-neutral-100, #EEF1F4);
}
.file-icon {
  font-size: 1.5rem;
  line-height: 3rem;
  text-align: center;
}
.file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.file-name {
  overflow-wrap: anywhere;
}
.dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0;
}
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}
.facts dd {
  margin: 0;
}
.prio-low {
  background: var(--htw-neutral-100, #EEF1F4);
}
.prio-medium {
  background: #E6F1FA;
  color: #004A80;
}
.prio-high {
  background: #FFE7D6;
  color: #7A2E00;
}
.prio-urgent {
  background: var(--htw-danger, #C62828);
  color: #fff;
}
.label-defs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.label-def {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.label-def > .label {
  min-height: 1.25rem;
}

/* --- K4: checklists, comments, activity ---------------------------------------------------- */

.checklist {
  margin: 0 0 1rem;
}
.checklist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.checklist-head h4 {
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.hide-done-switch {
  margin-left: auto;
}
.checklist-items {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
}
.checklist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.2rem 0;
}
.checklist-item.done .item-body {
  text-decoration: line-through;
  color: var(--htw-slate, #546E7A);
}
.checklist.hide-done .checklist-item.done {
  display: none;
}
.item-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tick {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 0.125rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tick:focus-visible {
  outline: 2px solid var(--htw-blue, #0070C0);
}
.item-menu, .checklist-menu {
  flex-basis: 100%;
}
.item-menu > summary {
  display: inline-block;
}
.item-menu:not([open]) {
  flex-basis: auto;
}
.feed {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.feed > li {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
  overflow-wrap: anywhere;
}
.feed-head {
  margin: 0 0 0.25rem;
}
.feed-activity {
  font-size: 0.875rem;
}
.comment-actions {
  align-items: flex-start;
}
.mention-results .picker {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
  border: 1px solid var(--htw-neutral-300, #D0D5DA);
  border-radius: var(--radius-sm, 4px);
}
.mention-results .pick {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: #fff;
  cursor: pointer;
}
.mention-results .pick:hover, .mention-results .pick:focus-visible {
  background: var(--htw-neutral-50, #F4F6F8);
}
.activity-filters {
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

@media (max-width: 40rem) {
  .card-panel-slot {
    width: 100%;
    border-left: 0;
    box-shadow: none;
  }
  .card-panel {
    padding: 0.75rem 0.75rem 2rem;
  }
}

.standalone {
  font-family: Arial, Helvetica, sans-serif;
  padding: 2rem;
}

/* --- K8: My cards, calendars, the table, search ------------------------------------------- */

.top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-right: auto;
  font-size: 0.9375rem;
}
.top-nav a {
  color: #fff;
}
.top-search input {
  font: inherit;
  width: 12rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid #fff;
  border-radius: var(--radius-sm, 4px);
}
@media (max-width: 40rem) {
  .top {
    flex-wrap: wrap;
  }
  .top-search input {
    width: 9rem;
  }
}

.view-group h2 {
  font-size: 1.125rem;
  margin: 1.25rem 0 0.5rem;
}
.view-list, .search-hits {
  margin: 0;
  padding: 0;
  list-style: none;
}
.view-row, .search-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.view-card {
  font-weight: bold;
  overflow-wrap: anywhere;
}
.view-where {
  font-size: 0.875rem;
}
.search-snippet {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
mark {
  background: #FFF4D6;
  color: inherit;
  padding: 0 0.0625rem;
}

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.cal-head h2 {
  margin: 0.5rem 0;
}
.cal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0;
}
/* position: relative keeps the cells' .sr-only text (position: absolute) inside the scroller;
   without it a phone's page grows to the table's width (as K3a's lists). */
.cal-scroll, .table-scroll {
  position: relative;
  overflow-x: auto;
}
.cal-month {
  width: 100%;
  min-width: 42rem;
  table-layout: fixed;
  border-collapse: collapse;
}
.cal-month th {
  padding: 0.25rem;
  font-size: 0.875rem;
  text-align: left;
}
.cal-day {
  height: 6.5rem;
  padding: 0.25rem;
  vertical-align: top;
  border: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.cal-other {
  background: var(--htw-neutral-50, #F4F6F8);
  color: var(--htw-slate, #546E7A);
}
.cal-today .cal-date, .cal-week-day.cal-today h3 {
  color: var(--htw-blue, #0070C0);
  font-weight: bold;
}
.cal-date {
  font-size: 0.8125rem;
}
.cal-entries {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.125rem;
}
.cal-entry {
  padding: 0.125rem 0.375rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm, 4px);
  background: #E6F1FA;
  overflow-wrap: anywhere;
}
.cal-entry .view-card {
  font-weight: normal;
}
/* A start-to-due span: square where it carries on into the next day or from the last. */
.cal-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cal-mid {
  border-radius: 0;
}
.cal-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cal-mid, .cal-end {
  background: #F0F6FC;
}
.cal-done {
  background: #E3F1E4;
  text-decoration: line-through;
}
.cal-time {
  font-weight: bold;
}
.cal-board {
  display: block;
  font-size: 0.75rem;
}
.cal-week {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-week-day {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.cal-week-day h3 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 1rem;
}
.table-filters .stack {
  font-size: 0.875rem;
}
.table-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.view-table th, .view-table td {
  padding: 0.375rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.view-table thead th {
  white-space: nowrap;
}
.view-table tbody th {
  font-weight: normal;
  min-width: 12rem;
}

/* --- K9c: custom fields ---------------------------------------------------------------------- */

.card-fields {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.card-field {
  overflow-wrap: anywhere;
}
.field-defs, .option-defs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.field-def {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--htw-neutral-200, #E3E7EB);
}
.option-def {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.option-def > .label {
  min-height: 1.25rem;
}
.field-value {
  margin-bottom: 0.5rem;
}
/* --- K10: the IT admin pages (web/admin.py) ---------------------------------------------- */

.it-admin-banner {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  border-left: 4px solid var(--htw-destructive, #E7000B);
  background: var(--htw-destructive-tint, #FDECEC);
  color: var(--htw-destructive-text, #C10007);
}
.it-admin-banner-strong {
  background: var(--htw-destructive-text, #C10007);
  color: #fff;
  font-size: 1.05rem;
}
.admin-nav {
  margin: 0.75rem 0;
}
.admin-nav a[aria-current="page"] {
  font-weight: 700;
}