/* meetboard styles: the Meetings board (#/meetings). Everything is scoped with mb-. */
.mb-page{min-width:0}
.mb-stats{margin:0 0 16px}

/* toolbar */
.mb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.mb-tools .input{width:auto;min-width:0;height:36px;padding-top:6px;padding-bottom:6px}
.mb-tools .mb-search{flex:1 1 220px;max-width:340px}
.mb-tools select.input{flex:0 1 170px}
.mb-date{display:inline-flex;align-items:center;gap:6px;margin:0}
.mb-date .input{width:150px}

/* board: columns side by side, scrolls sideways when they do not fit */
.mb-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mb-col{display:flex;flex-direction:column;min-width:0;background:var(--card-2,var(--card));border:1px solid var(--line);border-radius:var(--r-lg);scroll-snap-align:start}
.mb-col-head{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-size:14px}
.mb-col-head .n{margin-left:auto;font-size:12px;color:var(--ink-dim);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
.mb-col-live .mb-col-head b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px var(--green-wash)}
.mb-col-body{display:grid;gap:10px;align-content:start;padding:4px 10px 12px;min-height:120px}
.mb-empty{margin:4px 4px 0;line-height:1.5}

/* card */
.mb-card{position:relative;display:grid;gap:7px;min-width:0;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--mb-c,var(--line-strong));border-radius:var(--r);padding:11px 12px 12px;box-shadow:var(--shadow)}
.mb-card-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);min-width:0}
.mb-when{margin-left:auto;white-space:nowrap;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mb-type{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--mb-c,var(--ink-dim))}
.mb-title{all:unset;cursor:pointer;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.mb-title:hover{text-decoration:underline;text-underline-offset:3px}
.mb-title:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.mb-who{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0;color:var(--ink-soft)}
.mb-who a{color:var(--green);overflow-wrap:anywhere}
.mb-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mb-badges .pill,.mb-badges .tag{font-size:11.5px}
.mb-badge{background:var(--green-wash);color:var(--ink-soft)}
.mb-reason{background:var(--gold-wash);color:var(--ink-soft)}
.mb-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.mb-actions .btn-sm{white-space:nowrap}

/* list */
.mb-list .panel-body{padding:4px 0}
.mb-group{display:flex;align-items:center;gap:8px;padding:14px 16px 6px;font-size:13px;color:var(--ink-soft)}
.mb-group .n{font-size:12px;color:var(--ink-dim)}
.mb-row{display:grid;grid-template-columns:110px minmax(160px,1.6fr) 150px 58px minmax(120px,1fr) 290px;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);border-left:3px solid var(--mb-c,transparent)}
.mb-row-main{display:grid;gap:2px;min-width:0}
.mb-row-when{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mb-row .mb-actions{justify-content:flex-end;margin:0}

/* sheet */
.mb-scrim{z-index:70}
.mb-backdrop{all:unset;position:absolute;inset:0;cursor:default}
.mb-sheet{position:relative;width:min(620px,100%)}
.mb-sheet .modal-head h3{overflow-wrap:anywhere}
.mb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;color:var(--ink-soft);margin:0 0 10px}
.mb-meta a{color:var(--green)}
.mb-why{margin:0 0 10px;color:var(--ink-soft)}
.mb-sheet-acts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mb-danger{color:var(--red)}
.mb-inline{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px}
.mb-inline .input{width:auto}
.mb-sheet textarea.input{min-height:110px}
.mb-sheet #mb-summary-body{min-height:240px}
.mb-calls{display:grid;gap:6px;margin-bottom:8px}
.mb-call{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;background:var(--card)}
.mb-call:hover{border-color:var(--green)}
.mb-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mb-steps li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px}
.mb-steps li span{min-width:0;overflow-wrap:anywhere}
.mb-steps li button{flex:none}
.mb-types{display:grid;gap:6px;margin-bottom:14px}
.mb-type-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);flex-wrap:wrap}
.mb-swatch{width:14px;height:14px;border-radius:4px;flex:none}
.mb-type-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.mb-type-add .input{flex:1 1 200px;min-width:0}
.mb-color{width:44px;height:36px;padding:2px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);cursor:pointer}
.mb-first{display:grid;gap:8px;justify-items:start}

@media (max-width:1100px){
  .mb-row{grid-template-columns:100px minmax(0,1fr) minmax(0,auto);grid-template-areas:"when main act" "when type badges"}
  .mb-row>.mb-row-when{grid-area:when}
  .mb-row>.mb-row-main{grid-area:main}
  .mb-row>.mb-type{grid-area:type}
  .mb-row>.muted{display:none}
  .mb-row>.mb-badges{grid-area:badges}
  .mb-row>.mb-actions{grid-area:act}
}
@media (max-width:700px){
  .mb-tools .mb-search{flex-basis:100%;max-width:none}
  .mb-tools select.input{flex:1 1 45%}
  .mb-date{flex:1 1 45%}
  .mb-date .input{width:100%;min-width:0;flex:1}
  .mb-board{grid-auto-columns:minmax(84%,1fr);margin:0 -4px;padding:2px 4px 10px}
  .mb-row{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:6px}
  .mb-row>*{grid-area:auto!important}
  .mb-row .mb-actions{justify-content:flex-start}
  .mb-sheet .modal-body{padding:16px}
}
/* the board gets the wide page, like the inbox */
.view:has(> .mb-page){max-width:1680px}
.mb-sheet .field{margin-top:12px}