/* offcam™ Board
 *
 * Visual world taken from offcam.ch: off-white canvas, black Inter set tight,
 * white cards with a detached header strip, traffic-light dots, uppercase
 * micro-labels and parenthesised counts. Monochrome throughout —
 * color appears only where it carries data.
 *
 * Deliberately conservative CSS. No custom properties (Chromium 49+), no grid
 * (57+), no flex gap (84+), no clamp (79+), no position:sticky (56+). The
 * Samsung Flip's Tizen browser can be as old as Chromium 47, so this is
 * flexbox, margins and literal colors.
 *
 * Palette      #f5f5f5 canvas · #ffffff surface · #000 ink · #525252 ink-2
 *              #b3b3b3 ink-3 · #e4e4e4 hairline
 * Dark palette #0e0e0e canvas · #171717 surface · #fff ink · #a3a3a3 ink-2
 *              #909090 ink-3 · #262626 hairline
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: #f5f5f5;
  color: #000000;
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body.dark { background: #0e0e0e; color: #ffffff; }

/* Browser surfaces are part of the design, not defaults to inherit. */
::-moz-selection { background: #000000; color: #f5f5f5; }
::selection { background: #000000; color: #f5f5f5; }
body.dark ::-moz-selection { background: #ffffff; color: #0e0e0e; }
body.dark ::selection { background: #ffffff; color: #0e0e0e; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b3b3b3; }
body.dark ::-webkit-scrollbar-thumb { background: #2e2e2e; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #454545; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  caret-color: #000000;
}
body.dark button, body.dark input, body.dark select, body.dark textarea { caret-color: #ffffff; }

a { color: inherit; }

:focus { outline: none; }
.focusable:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}
body.dark button:focus-visible,
body.dark input:focus-visible,
body.dark select:focus-visible,
body.dark textarea:focus-visible { outline-color: #ffffff; }

/* ---------------------------------------------------------------- shell */

#app {
  position: relative;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column; flex-direction: column;
  height: 100%;
}

.spacer { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }


/* ---------------------------------------------------------------- top bar */

#topbar {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 18px;
  height: 58px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  border-bottom: 1px solid #e4e4e4;
}
body.dark #topbar { border-bottom-color: #1f1f1f; }

#wordmark {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: #000000;
  white-space: nowrap;
}
body.dark #wordmark { color: #ffffff; }
#wordmark .tm {
  font-size: 0.52em;
  font-weight: 500;
  vertical-align: 0.65em;
  letter-spacing: 0;
  margin-left: 1px;
}

.rule {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: #dcdcdc;
  margin: 0 16px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
body.dark .rule { background: #2b2b2b; }

#board-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 3px 2px;
  min-width: 60px;
  max-width: 260px;
  border-radius: 0;
}
#board-title:hover { border-bottom-color: #d0d0d0; }
#board-title:focus { border-bottom-color: #000000; outline: none; }
body.dark #board-title:focus { border-bottom-color: #ffffff; }

#tools {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}

.search-wrap { position: relative; margin-right: 8px; }
.search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  opacity: 0.42;
  pointer-events: none;
}
#search {
  width: 168px;
  height: 32px;
  padding: 0 10px 0 29px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
}
#search::-webkit-input-placeholder { color: #6f6f6f; }
#search::-moz-placeholder { color: #6f6f6f; opacity: 1; }
#search:focus { border-color: #000000; }
body.dark #search { background: #171717; border-color: #262626; }
body.dark #search::-webkit-input-placeholder { color: #909090; }
body.dark #search:focus { border-color: #ffffff; }

#sort {
  height: 32px;
  padding: 0 8px;
  margin-right: 8px;
  background: transparent;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  cursor: pointer;
}
body.dark #sort { border-color: #262626; }

.btn {
  height: 32px;
  padding: 0 12px;
  margin-left: 6px;
  background: transparent;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  -webkit-transition: background 140ms ease, border-color 140ms ease;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: #ffffff; border-color: #c9c9c9; }
.btn.on { background: #000000; border-color: #000000; color: #f5f5f5; }
.btn.primary { background: #000000; border-color: #000000; color: #f5f5f5; }
.btn.primary:hover { background: #262626; border-color: #262626; }
.btn.quiet { border-color: transparent; color: #525252; }
.btn.quiet:hover { color: #000000; background: #ececec; }
.btn.danger { border-color: transparent; color: #a11212; }
.btn.danger:hover { background: #fbeaea; border-color: #f0cccc; }
body.dark .btn { border-color: #262626; }
body.dark .btn:hover { background: #171717; border-color: #3a3a3a; }
body.dark .btn.on, body.dark .btn.primary { background: #ffffff; border-color: #ffffff; color: #0e0e0e; }
body.dark .btn.primary:hover { background: #e0e0e0; border-color: #e0e0e0; }
body.dark .btn.quiet { color: #a3a3a3; }
body.dark .btn.quiet:hover { color: #ffffff; background: #1c1c1c; }
body.dark .btn.danger { color: #f08a8a; }
body.dark .btn.danger:hover { background: #241414; border-color: #3d1f1f; }

/* connection state, after offcam's REC pill */
#status {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-left: 14px;
  padding: 5px 11px 5px 9px;
  border: 1px solid #e4e4e4;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #525252;
  white-space: nowrap;
}
body.dark #status { border-color: #262626; color: #a3a3a3; }
#dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b3b3b3;
  margin-right: 7px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
#dot.online { background: #1f9d4d; -webkit-animation: pulse 2.6s ease-in-out infinite; animation: pulse 2.6s ease-in-out infinite; }
#dot.offline { background: #c0392b; }

@-webkit-keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ---------------------------------------------------------------- filter row */

#filterbar {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  padding: 11px 18px 6px 18px;
  border-bottom: 1px solid #e4e4e4;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
#filterbar.hidden { display: none; }
body.dark #filterbar { border-bottom-color: #1f1f1f; }

/* Tag as a data swatch plus a label, never a filled blob. */
.tagchip {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  height: 26px;
  padding: 0 10px 0 8px;
  margin: 0 6px 5px 0;
  border: 1px solid #e4e4e4;
  border-radius: 100px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #525252;
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: border-color 140ms ease, color 140ms ease;
  transition: border-color 140ms ease, color 140ms ease;
}
.tagchip:hover { border-color: #6f6f6f; color: #000000; }
.tagchip.active { border-color: #000000; color: #000000; }
body.dark .tagchip { border-color: #262626; color: #a3a3a3; }
body.dark .tagchip:hover { border-color: #4a4a4a; color: #ffffff; }
body.dark .tagchip.active { border-color: #ffffff; color: #ffffff; }

.tagchip .sw {
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  margin-right: 7px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.tagchip .sw.round { border-radius: 50%; }

.bar-sep {
  width: 1px;
  height: 16px;
  background: #dcdcdc;
  margin: 0 12px 5px 6px;
  -webkit-align-self: center; align-self: center;
}
body.dark .bar-sep { background: #2b2b2b; }

/* ---------------------------------------------------------------- board */

#board {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-flex; display: flex;
  -webkit-align-items: stretch; align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

#boot {
  margin: auto;
  color: #6f6f6f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#boot.boot-fail {
  display: block;
  max-width: 460px;
  margin: 64px auto;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  text-transform: none;
  letter-spacing: -0.006em;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  text-align: left;
}
#boot.boot-fail b { display: block; font-weight: 600; margin-bottom: 8px; }
#boot.boot-fail span { display: block; color: #525252; margin-bottom: 4px; }
#boot.boot-fail .where { font-size: 12px; color: #6f6f6f; }
#boot.boot-fail a { display: inline-block; margin-top: 14px; font-weight: 500; }

/* Lanes are columns of the page grid, not floating grey panels. */
.lane {
  position: relative;
  width: 328px;
  min-width: 328px;
  display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column; flex-direction: column;
  border-right: 1px solid #e4e4e4;
  min-height: 0;
}
.lane:last-child { border-right: 0; }
body.dark .lane { border-right-color: #1f1f1f; }

.lane.dragover { background: #efefef; }
body.dark .lane.dragover { background: #141414; }

.lane-head {
  display: -webkit-flex; display: flex;
  -webkit-align-items: baseline; align-items: baseline;
  padding: 20px 18px 12px 18px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

.lane-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .lane-name { color: #ffffff; }

.lane-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #6f6f6f;
  margin-left: 7px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.lane-count.over { color: #c0392b; }
body.dark .lane-count { color: #909090; }

.lane-head .spacer { min-width: 8px; }

.lane-rule {
  position: relative;
  height: 2px;
  margin: 0 18px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* sits behind everything in the column */
.lane-wash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 210px;
  pointer-events: none;
  z-index: 0;
}
.lane-head, .lane-rule, .lane-cards, .lane-foot { position: relative; z-index: 1; }

.lane-cards {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 8px 18px;
  min-height: 40px;
  -webkit-overflow-scrolling: touch;
}

.lane-foot { padding: 0 18px 20px 18px; -webkit-flex-shrink: 0; flex-shrink: 0; }

.add-card {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  color: #6f6f6f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  -webkit-transition: border-color 140ms ease, color 140ms ease;
  transition: border-color 140ms ease, color 140ms ease;
}
.add-card:hover { border-color: #000000; color: #000000; }
.add-card .ico { margin-right: 8px; opacity: 0.6; }
.add-card:hover .ico { opacity: 1; }
body.dark .add-card { border-color: #262626; color: #909090; }
body.dark .add-card:hover { border-color: #ffffff; color: #ffffff; }

.lane-empty {
  padding: 4px 2px 10px 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6f6f;
}
body.dark .lane-empty { color: #909090; }

/* ---------------------------------------------------------------- card */

.card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 6px 16px -10px rgba(0,0,0,0.16);
  -webkit-transition: box-shadow 160ms ease, -webkit-transform 160ms ease;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.card:hover {
  box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 12px 26px -12px rgba(0,0,0,0.26);
}
body.dark .card {
  background: #171717;
  box-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 6px 16px -10px rgba(0,0,0,0.8);
}

.card.dragging { opacity: 0.28; box-shadow: none; }

/* Header strip, quoting offcam's project cards: name, index, status dots. */
.card-head {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 11px 13px 0 13px;
}

.card-index {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6f6f6f;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
body.dark .card-index { color: #909090; }

.card-lights {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-left: auto;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.card-lights i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e6e6e6;
  margin-left: 4px;
}
body.dark .card-lights i { background: #2b2b2b; }
.card-lights i.lit-ok { background: #1f9d4d; }
.card-lights i.lit-soon { background: #d99a06; }
.card-lights i.lit-over { background: #c0392b; }

.card-title {
  padding: 3px 13px 0 13px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.32;
}

.card-desc {
  padding: 5px 13px 0 13px;
  font-size: 12.5px;
  line-height: 18px;
  color: #6f6f6f;
  max-height: 36px;
  overflow: hidden;
}
body.dark .card-desc { color: #8f8f8f; }

.card-foot {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  padding: 9px 13px 12px 13px;
  min-height: 21px;
}
.card-foot:empty { padding: 0 0 13px 0; }

.meta {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  height: 18px;
  margin: 3px 12px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6f6f6f;
  white-space: nowrap;
}
.meta .ico { margin-right: 5px; opacity: 0.55; }
.meta.warn { color: #b07a05; }
.meta.over { color: #c0392b; }
.meta.complete { color: #157a3a; }
body.dark .meta { color: #8f8f8f; }
body.dark .meta.warn { color: #e0ac2b; }
body.dark .meta.over { color: #e06c5c; }
body.dark .meta.complete { color: #5ecb88; }

.meta-tag { padding-left: 0; }
.meta-tag .sw {
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  margin-right: 6px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* Priority as weight of rule, not as a colored brow on the card edge. */
.prio {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  height: 18px;
  margin: 3px 12px 0 0;
}
.prio i {
  display: block;
  width: 3px;
  height: 9px;
  margin-right: 2px;
  background: #dcdcdc;
  border-radius: 1px;
}
.prio i.on { background: #000000; }
body.dark .prio i { background: #2e2e2e; }
body.dark .prio i.on { background: #ffffff; }

.avatar {
  min-width: 21px;
  height: 21px;
  margin: 3px 0 0 auto;
  padding: 0 5px;
  border-radius: 5px;
  background: #000000;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 21px;
  text-align: center;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
body.dark .avatar { background: #ffffff; color: #0e0e0e; }

/* person chip carries the same initials block as the card */
.tagchip.person { padding-left: 4px; }
.tagchip .ini {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-right: 8px;
  border-radius: 4px;
  background: #e2e2e2;
  color: #3d3d3d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 18px;
  text-align: center;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.tagchip.person.active .ini { background: #000000; color: #ffffff; }
body.dark .tagchip .ini { background: #2e2e2e; color: #d0d0d0; }
body.dark .tagchip.person.active .ini { background: #ffffff; color: #0e0e0e; }

/* Editing is an explicit control, so the card body is free to be a drag
   handle. On a touchscreen there is no hover, so it is always visible. */
.card-edit {
  width: 24px;
  height: 24px;
  margin: -4px -5px 0 8px;
  border-radius: 6px;
  color: #b0b0b0;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.card-edit:hover { background: #efefef; color: #000000; }
.card-edit:active { background: #e0e0e0; color: #000000; }
body.dark .card-edit { color: #6f6f6f; }
body.dark .card-edit:hover { background: #232323; color: #ffffff; }
body.dark .card-edit:active { background: #2a2a2a; color: #ffffff; }

/* drag */
#ghost {
  position: fixed;
  z-index: 900;
  width: 292px;
  pointer-events: none;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.4);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}
.drop-marker {
  height: 2px;
  background: #000000;
  border-radius: 1px;
  margin: 3px 0 7px 0;
}
body.dark .drop-marker { background: #ffffff; }

/* ---------------------------------------------------------------- modal */

#overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20,20,20,0.32);
  z-index: 1000;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#overlay.show { display: block; }

.modal {
  background: #ffffff;
  border-radius: 16px;
  width: 92%;
  max-width: 480px;
  margin: 44px auto;
  padding: 24px 26px 22px 26px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 40px 80px -30px rgba(0,0,0,0.5);
  -webkit-animation: rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.dark .modal { background: #161616; }

@-webkit-keyframes rise { from { opacity: 0; -webkit-transform: translateY(10px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.modal h3 {
  margin: 0 0 20px 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.modal label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #6f6f6f;
  margin: 16px 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
body.dark .modal label { color: #8f8f8f; }

.modal input, .modal select, .modal textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 9px;
  padding: 9px 11px;
  color: #000000;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #000000; outline: none; }
.modal input::-webkit-input-placeholder { color: #6f6f6f; }
.modal input::-moz-placeholder { color: #6f6f6f; opacity: 1; }
body.dark .modal input, body.dark .modal select, body.dark .modal textarea {
  border-color: #292929; color: #ffffff;
}
body.dark .modal input:focus, body.dark .modal select:focus, body.dark .modal textarea:focus { border-color: #ffffff; }

.modal textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.modal-actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #ededed;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.modal-actions .btn:first-child { margin-left: 0; }
body.dark .modal-actions { border-top-color: #232323; }

.row { display: -webkit-flex; display: flex; }
.row .col { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
.row .col + .col { margin-left: 12px; }

.hint {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #6f6f6f;
}
body.dark .hint { color: #909090; }

.picker { padding-top: 2px; }

/* checklist */

.check-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-bottom: 6px;
}
.check-row .check-box {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 0 10px 0 0;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.check-row .check-box:checked { background: #000000; border-color: #000000; }
.check-row .check-box:checked:after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid #ffffff;
  border-width: 0 1.6px 1.6px 0;
  -webkit-transform: rotate(43deg);
  transform: rotate(43deg);
}
body.dark .check-row .check-box { border-color: #3a3a3a; }
body.dark .check-row .check-box:checked { background: #ffffff; border-color: #ffffff; }
body.dark .check-row .check-box:checked:after { border-color: #0e0e0e; }

.check-row .check-text {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 6px 9px;
}
.check-row .check-text.struck { text-decoration: line-through; color: #6f6f6f; }
.check-row .icon-btn { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 4px; }

/* tag manager */

.taglist { padding-top: 2px; }
.tagrow { padding: 12px 0; border-bottom: 1px solid #ededed; }
.tagrow:first-child { padding-top: 4px; }
body.dark .tagrow { border-bottom-color: #232323; }

.tagrow-top {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.tagrow-top .tagname {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.tagrow-top .icon-btn { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 8px; }

/* Plain block, never a flex child - flex items get stretched into ovals. */
.swatchbar { padding-top: 9px; font-size: 0; }
.swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin: 0 7px 0 0;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  -webkit-transition: -webkit-transform 130ms ease;
  transition: transform 130ms ease;
}
.swatch:hover { -webkit-transform: scale(1.14); transform: scale(1.14); }
.swatch.sel:after {
  content: '';
  position: absolute;
  left: -3px; top: -3px; right: -3px; bottom: -3px;
  border: 1px solid #000000;
  border-radius: 8px;
}
body.dark .swatch.sel:after { border-color: #ffffff; }

/* icon button */

.icon-btn {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6f6f6f;
  cursor: pointer;
  -webkit-transition: background 130ms ease, color 130ms ease;
  transition: background 130ms ease, color 130ms ease;
}
.icon-btn:hover { background: #ececec; color: #000000; }
body.dark .icon-btn { color: #909090; }
body.dark .icon-btn:hover { background: #232323; color: #ffffff; }

.icon-btn.wide {
  width: auto;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ico { display: block; -webkit-flex-shrink: 0; flex-shrink: 0; }
.ico svg { display: block; }

/* toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  margin-left: -170px;
  width: 340px;
  text-align: center;
  background: #000000;
  color: #f5f5f5;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  z-index: 1200;
  display: none;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.55);
  -webkit-animation: rise 220ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: rise 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
#toast.show { display: block; }
body.dark #toast { background: #ffffff; color: #0e0e0e; }

/* ---------------------------------------------------------------- wall display
 * Not the compact layout scaled up. Lanes divide the screen instead of
 * scrolling, the working chrome steps back, and the card carries only what
 * survives being read from across a room.
 */

body.tv { font-size: 19px; }

body.tv #topbar { height: 88px; padding: 0 34px; }
body.tv #wordmark { font-size: 32px; }
body.tv .rule { height: 30px; margin: 0 24px; }
body.tv #board-title { font-size: 19px; max-width: 420px; }
body.tv .search-wrap, body.tv #sort, body.tv #btn-filters { display: none; }
body.tv #btn-settings { height: 44px; padding: 0 18px; font-size: 14px; }
body.tv #status { font-size: 13px; padding: 8px 16px 8px 13px; margin-left: 14px; }
body.tv #dot { width: 8px; height: 8px; margin-right: 10px; }

body.tv #filterbar { padding: 16px 34px; }
body.tv .tagchip { height: 34px; font-size: 13px; padding: 0 14px 0 11px; margin-right: 9px; }
body.tv .tagchip .sw { width: 9px; height: 9px; margin-right: 9px; }

body.tv #board { overflow-x: hidden; }
body.tv .lane {
  -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0;
  width: auto;
  min-width: 0;
}
body.tv .lane-head { padding: 26px 26px 14px 26px; }
body.tv .lane-name { font-size: 15px; letter-spacing: 0.14em; }
body.tv .lane-count { font-size: 15px; }
body.tv .lane-rule { margin: 0 26px; height: 3px; }
body.tv .lane-wash { height: 280px; }
body.tv .lane-cards { padding: 18px 26px 10px 26px; }
body.tv .lane-foot { padding: 0 26px 26px 26px; }
body.tv .lane-empty { font-size: 14px; }

body.tv .card { border-radius: 16px; margin-bottom: 12px; }
body.tv .card-head { padding: 15px 18px 0 18px; }
body.tv .card-index { font-size: 13px; }
body.tv .card-lights i { width: 9px; height: 9px; margin-left: 6px; }
body.tv .card-title { font-size: 22px; padding: 5px 18px 0 18px; line-height: 1.26; }
body.tv .card-desc { display: none; }
body.tv .card-foot { padding: 12px 18px 16px 18px; }
body.tv .meta { font-size: 13px; height: 22px; margin-right: 16px; }
body.tv .prio { height: 22px; margin-right: 16px; }
body.tv .prio i { width: 4px; height: 13px; margin-right: 3px; }
body.tv .avatar {
  min-width: 32px; height: 32px;
  line-height: 32px;
  font-size: 13px;
  border-radius: 7px;
  padding: 0 8px;
}
body.tv .tagchip .ini { min-width: 24px; height: 24px; line-height: 24px; font-size: 12px; margin-right: 10px; }
body.tv .card-edit { width: 38px; height: 38px; margin: -6px -8px 0 12px; border-radius: 9px; }
body.tv .add-card { height: 52px; font-size: 15px; border-radius: 12px; }
body.tv #ghost { width: 380px; }

/* wider touch targets on any touchscreen */
body.touch .icon-btn { width: 36px; height: 36px; }
body.touch .card-edit { width: 34px; height: 34px; margin: -7px -8px 0 8px; }
body.tv.touch .card-edit { width: 44px; height: 44px; margin: -8px -9px 0 12px; }
body.touch .check-row .check-box { width: 21px; height: 21px; min-width: 21px; }
body.touch .check-row .check-box:checked:after { left: 7px; top: 3px; }

/* trailing column that only offers one thing */
.lane-add {
  width: 62px;
  min-width: 62px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  -webkit-justify-content: center; justify-content: center;
  padding-top: 18px;
}
.lane-add-btn {
  width: 34px;
  height: 34px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 9px;
  color: #6f6f6f;
  cursor: pointer;
  -webkit-transition: border-color 140ms ease, color 140ms ease;
  transition: border-color 140ms ease, color 140ms ease;
}
.lane-add-btn:hover { border-color: #000000; color: #000000; }
body.dark .lane-add-btn { border-color: #262626; color: #909090; }
body.dark .lane-add-btn:hover { border-color: #ffffff; color: #ffffff; }
body.tv .lane-add { display: none; }


/* ---------------------------------------------------------------- narrow
 * On a phone the working chrome moves to its own row instead of being
 * squeezed off the edge of the bar.
 */

@media (max-width: 720px) {
  #topbar {
    height: auto;
    padding: 10px 14px;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
  }
  #board-title {
    -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
    max-width: none;
    min-width: 40px;
  }
  #status { margin-left: 10px; }
  #tools {
    width: 100%;
    margin-top: 10px;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    order: 1;
  }
  .search-wrap {
    -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
    min-width: 0;
  }
  #search { width: 100%; }
  #sort { margin-right: 0; margin-left: 6px; }
  #filterbar { padding: 11px 14px 6px 14px; }
  .lane { width: 296px; min-width: 296px; }
  .lane-head { padding: 18px 14px 11px 14px; }
  .lane-rule { margin: 0 14px; }
  .lane-cards { padding: 13px 14px 8px 14px; }
  .lane-foot { padding: 0 14px 18px 14px; }
  .lane-add { width: 54px; min-width: 54px; }
  .modal { margin: 20px auto; padding: 20px; }
  #toast { width: auto; left: 14px; right: 14px; margin-left: 0; }
}

/* ---------------------------------------------------------------- touch feel
 * A touchscreen has no hover, so without a pressed state nothing acknowledges
 * a finger until the dialog opens and the UI feels broken. touch-action also
 * drops the browser's double-tap-zoom wait before a tap is delivered.
 */

body,
.card,
.btn,
.icon-btn,
.add-card,
.lane-add-btn,
.tagchip,
.swatch,
button,
select {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

.card:active {
  box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 4px 12px -8px rgba(0,0,0,0.3);
  -webkit-transform: scale(0.994);
  transform: scale(0.994);
}
.btn:active { background: #e6e6e6; }
.btn.primary:active { background: #333333; }
.icon-btn:active { background: #e0e0e0; }
.add-card:active, .lane-add-btn:active { background: #ececec; border-color: #000000; color: #000000; }
.tagchip:active { border-color: #000000; }
body.dark .btn:active { background: #242424; }
body.dark .btn.primary:active { background: #d0d0d0; }
body.dark .icon-btn:active { background: #2a2a2a; }
body.dark .add-card:active, body.dark .lane-add-btn:active { background: #1d1d1d; }

/* A card being held long enough to drag says so before the ghost appears. */
.card.arming {
  -webkit-transform: scale(0.985);
  transform: scale(0.985);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 2px 8px -6px rgba(0,0,0,0.3);
}

/* filter-bar buttons carry an icon beside their label */
.bar-btn {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  margin: 0 0 5px 6px;
}
.bar-btn .ico { margin-right: 7px; }

/* the person's colour block, reused in the manager rows */
.row-ini {
  margin-right: 10px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* a checkbox that reads as a setting, not a form field */
.switch-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  cursor: pointer;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: -0.006em;
  color: #000000;
  margin: 0;
}
.switch-row .check-box { margin-right: 10px; }
body.dark .switch-row { color: #ffffff; }

/* Finished work steps back: the title stops shouting, the card sits quieter. */
.card.is-done .card-title { color: #4a4a4a; font-weight: 500; }
body.dark .card.is-done .card-title { color: #b8b8b8; }

/* ---------------------------------------------------------------- date field
 * Drawn rather than native: the Flip claims input[type=date] support but never
 * opens a picker. Same control everywhere, sized for a finger.
 */

.date-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.date-text {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.date-btn {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  border: 1px solid #e0e0e0;
}
.date-btn:hover { border-color: #000000; }
body.dark .date-btn { border-color: #292929; }
body.dark .date-btn:hover { border-color: #ffffff; }

.date-panel { display: none; }
.date-panel.open {
  display: block;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fbfbfb;
}
body.dark .date-panel.open { border-color: #292929; background: #101010; }

.date-head {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-bottom: 10px;
}
.date-month {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.date-nav { -webkit-flex-shrink: 0; flex-shrink: 0; }

.date-week, .date-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.date-dow {
  width: 14.285%;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6f6f6f;
  padding-bottom: 6px;
}
body.dark .date-dow { color: #909090; }

.date-cell {
  width: 14.285%;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  color: #000000;
  cursor: pointer;
  -webkit-transition: background 120ms ease;
  transition: background 120ms ease;
}
.date-cell:hover { background: #ececec; }
.date-cell.empty { visibility: hidden; cursor: default; }
.date-cell.today { font-weight: 700; -webkit-box-shadow: inset 0 0 0 1px #cfcfcf; box-shadow: inset 0 0 0 1px #cfcfcf; }
.date-cell.sel { background: #000000; color: #ffffff; font-weight: 600; }
.date-cell.sel:hover { background: #262626; }
body.dark .date-cell { color: #ffffff; }
body.dark .date-cell:hover { background: #232323; }
body.dark .date-cell.today { box-shadow: inset 0 0 0 1px #3a3a3a; }
body.dark .date-cell.sel { background: #ffffff; color: #0e0e0e; }
body.dark .date-cell.sel:hover { background: #e0e0e0; }

.date-foot {
  display: -webkit-flex; display: flex;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ededed;
}
body.dark .date-foot { border-top-color: #232323; }

body.touch .date-cell { height: 42px; font-size: 15px; }
body.touch .date-btn { width: 40px; height: 40px; }
body.tv .date-cell { height: 54px; font-size: 19px; }
body.tv .date-dow { font-size: 13px; }
body.tv .date-month { font-size: 18px; }
body.tv .date-btn { width: 46px; height: 46px; }

/* ---- Pocket AI panel */
.pocket-name {
  -webkit-flex: 1; flex: 1;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pocket-btn { -webkit-flex-shrink: 0; flex-shrink: 0; }
.pocket-key {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-top: 8px;
}
.pocket-key input { -webkit-flex: 1; flex: 1; }
.hint.bad { color: #ef4444; }
body.dark .hint.bad { color: #f87171; }

/* ---------------------------------------------------------------- backlogs */

.lane-kind {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6f6f;
  margin-left: 8px;
  white-space: nowrap;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.lane-kind.mine { color: #000000; }
body.dark .lane-kind { color: #909090; }
body.dark .lane-kind.mine { color: #ffffff; }
body.tv .lane-kind { font-size: 13px; }

/* ------------------------------------------------- sign-in and pairing page */

body.gate { overflow: auto; }
.gate-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 64px 16px 32px 16px;
}
.gate-wrap .wordmark {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000000;
  text-decoration: none;
}
.gate-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 26px;
  margin-top: 28px;
}
.gate-card h1 {
  margin: 0 0 8px 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.gate-card p {
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
}
.gate-card .btn { margin-left: 0; margin-right: 8px; text-decoration: none; display: inline-block; }
.gate-qr {
  width: 220px;
  height: 220px;
  margin: 4px 0 8px 0;
  background: #ffffff;
}
.gate-qr svg { width: 220px; height: 220px; display: block; }
.gate-code {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 8px 0 12px 0;
  color: #000000;
}
.gate-note { font-size: 12px; color: #6f6f6f; }
.gate-note.bad { color: #c0392b; }
.hidden-block { display: none; }
.gate-wrap .wordmark .tm { font-size: 0.45em; vertical-align: super; font-weight: 500; }

/* several assignees: overlapping initials */
.avatars { margin-left: auto; white-space: nowrap; }
.avatars .avatar { margin-left: -6px; border: 2px solid #ffffff; }
.avatars .avatar:first-child { margin-left: 0; }
.avatars .avatar.more { background: #e4e4e4; color: #000000; }
body.dark .avatars .avatar { border-color: #171717; }