/* Boards: board bar, lists, cards, and the card window. Theme colours only. */

.board-loading{color:var(--text-dim);}
.board-loading.is-error{color:var(--red-fail);}
.board-loading a{color:inherit;}

.board-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;}
.board-title{
  margin:0 6px 0 0; padding:0 4px;
  font-family:var(--font-display); font-weight:var(--type-weight); font-size:26px; line-height:1.1;
  color:var(--green-bright); text-shadow:0 0 6px var(--glow);
  outline:none; cursor:text;
}
.board-title:hover{background:var(--hover-soft);}
.board-title:focus{outline:1px dashed var(--green); background:var(--hover-focus);}
.board-pick,
.board-chip,
.board-danger,
.board-primary{
  font-family:var(--font); font-size:13px;
  padding:5px 10px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-fill); color:var(--green-dim);
}
.board-chip:hover,.board-pick:hover{border-color:var(--green-dim); color:var(--green-bright);}
.board-chip[aria-pressed="true"]{color:var(--green-bright); background:var(--hover-focus);}
.board-danger{color:var(--text-dim); border-style:dashed;}
.board-danger:hover,.board-danger.is-armed{color:var(--red-fail); border-color:var(--red-fail);}
.board-primary{border-color:var(--green); background:var(--green); color:var(--ink);}

.board-scroll{overflow-x:auto; padding-bottom:8px;}
.board-lists{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 1fr);
  gap:14px;
  align-items:start;
  min-width:min-content;
}
.board-list{
  display:flex; flex-direction:column; gap:9px;
  padding:12px; min-width:0;
  border:1px solid var(--line); background:var(--panel-fill);
  transition:border-color .15s;
}
.board-list.is-over{border-color:var(--green-dim);}
.list-head{display:flex; align-items:center; gap:8px;}
.list-name{
  flex:1; min-width:0; outline:none; cursor:text; overflow-wrap:anywhere;
  font-family:var(--font-display); font-weight:var(--type-weight); font-size:22px; line-height:1.1;
  color:var(--green);
}
.list-name:focus{outline:1px dashed var(--green); background:var(--hover-focus);}
.list-count{font-size:12px; color:var(--text-dim);}
.list-tools{display:flex; gap:2px; opacity:.6;}
.board-list:hover .list-tools,.list-tools:focus-within{opacity:1;}
.list-tools button{background:none; border:1px solid transparent; color:var(--text-dim); font-family:var(--font); font-size:12px; padding:0 5px; cursor:pointer;}
.list-tools button:hover{color:var(--green-bright); border-color:var(--line);}
.list-tools button:disabled{opacity:.3; cursor:default;}
.list-tools .list-delete.is-armed{color:var(--red-fail); border-color:var(--red-fail);}
.list-cards{display:flex; flex-direction:column; gap:9px; min-height:28px;}
.list-empty{font-size:12px; color:var(--text-dim); border:1px dashed var(--border-soft); padding:8px; text-align:center;}

.board-card{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 11px;
  border:1px solid var(--border-soft); background:var(--card-fill);
  cursor:grab; user-select:none;
}
.board-card:hover{border-color:var(--green-dim);}
.board-card:focus-visible{outline:1px solid var(--green); outline-offset:2px;}
.board-card.is-dragging{opacity:.35; border-style:dashed;}
.card-title{color:var(--text-body); font-size:14.5px; overflow-wrap:anywhere;}
.card-desc{display:none; font-size:12.5px; line-height:1.45; color:var(--text-dim); white-space:pre-wrap; overflow-wrap:anywhere;}
.board-lists.show-desc .card-desc{display:block;}
.card-labels{display:flex; gap:4px; flex-wrap:wrap;}
.card-label{display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:0 6px; border:1px solid currentColor; letter-spacing:.04em;}
.card-label button{background:none; border:0; color:inherit; cursor:pointer; padding:0; font-size:12px;}
.lb-cyan{color:var(--cyan);} .lb-pink{color:var(--pink);} .lb-amber{color:#FFC24D;} .lb-green{color:var(--green);} .lb-violet{color:#b197fc;} .lb-red{color:var(--red-fail);}
html.light:not([data-theme-name]) .lb-amber, html.light[data-theme-name="matrix"] .lb-amber{color:#8a5a00;}
.card-meta{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:12px; color:var(--text-dim);}
.card-due.is-soon{color:#FFC24D;}
.card-due.is-late{color:var(--red-fail);}
.card-placed{color:var(--text-me);}
.card-moves{margin-left:auto; display:flex; gap:2px;}
.card-moves button{background:none; border:1px solid var(--line); color:var(--green-dim); font-family:var(--font); padding:0 6px; line-height:1.4; cursor:pointer;}
.card-moves button:hover{color:var(--green-bright);}
.card-moves button:disabled{opacity:.3; cursor:default;}

.board-add,.board-add-list{
  background:none; border:0; color:var(--text-dim);
  font-family:var(--font); font-size:13px; text-align:left; padding:4px 2px; cursor:pointer;
}
.board-add:hover,.board-add-list:hover{color:var(--green-bright);}
.board-add-list{border:1px dashed var(--line); padding:12px;}
.card-composer{display:flex; flex-direction:column; gap:6px;}
.card-composer-input{
  width:100%; resize:vertical;
  font-family:var(--font); font-size:14px; color:var(--text-body);
  background:var(--panel-input); border:1px solid var(--line); padding:8px;
}
.card-composer-row{display:flex; gap:8px;}

/* ---------- the card window ---------- */
.card-modal-scrim{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:flex-start; justify-content:center;
  padding:6vh 16px 16px; overflow:auto;
  background:var(--overlay);
}
.card-modal-scrim[hidden]{display:none;}
.card-modal{
  width:100%; max-width:580px;
  display:flex; flex-direction:column; gap:14px;
  padding:18px;
  background:var(--panel-menu);
  border:1px solid var(--green-dim);
}
.card-modal-top{display:flex; gap:10px; align-items:flex-start;}
.card-modal-title{
  flex:1; min-width:0; resize:none;
  font-family:var(--font-display); font-weight:var(--type-weight); font-size:26px; line-height:1.1;
  color:var(--green-bright); background:none; border:1px solid transparent; padding:2px 4px;
}
.card-modal-title:focus{border-color:var(--line); outline:none; background:var(--hover-focus);}
.card-modal-close{background:none; border:0; color:var(--text-dim); font-family:var(--font); font-size:13px; cursor:pointer; white-space:nowrap;}
.card-modal-grid{display:flex; gap:10px; flex-wrap:wrap;}
.card-modal-grid > *{flex:1 1 180px;}
.card-field{display:flex; flex-direction:column; gap:6px;}
.card-field label,.card-field-label{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);}
.card-field input,.card-field textarea,.card-field select{
  font-family:var(--font); font-size:14px; color:var(--text-body);
  background:var(--panel-input); border:1px solid var(--line); padding:7px 8px;
}
.card-field textarea{resize:vertical;}
.card-modal-labels{display:flex; gap:6px; flex-wrap:wrap; min-height:4px;}
.card-label-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.card-label-add input{flex:1 1 140px;}
.card-label-colors{display:flex; gap:4px;}
.card-label-swatch{width:22px; height:22px; border:1px solid currentColor; background:color-mix(in srgb, currentColor 25%, transparent); cursor:pointer;}
.card-checklist{display:flex; flex-direction:column; gap:4px;}
.card-check{display:flex; gap:8px; align-items:center;}
.card-check input{flex:1; min-width:0; background:none !important; border:1px solid transparent !important; padding:3px 4px !important;}
.card-check input:focus{border-color:var(--line) !important; outline:none;}
.card-check.is-done input{color:var(--text-dim); text-decoration:line-through;}
.card-check-box{width:18px; height:18px; flex:none; display:grid; place-items:center; background:none; border:1px solid var(--green-dim); color:var(--green); font-size:12px; cursor:pointer;}
.card-check-x{background:none; border:0; color:var(--text-dim); cursor:pointer; font-size:15px;}
.card-check-x:hover{color:var(--red-fail);}
.card-modal-placed{margin:0; color:var(--text-me); font-size:13px;}
.card-modal-actions{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;}
html.has-modal{overflow:hidden;}

@media (max-width:760px){
  /* phones: lists stack top to bottom at full width instead of running off the side */
  .board-scroll{overflow-x:visible;}
  .board-lists{grid-auto-flow:row; grid-template-columns:1fr; grid-auto-columns:auto; min-width:0;}
  .board-bar{gap:6px;}
  .board-title{flex:1 1 100%; font-size:22px;}
  .board-pick{flex:1 1 auto; min-width:0;}
}