/* ============================================================
   GP Team Hub - meetings.css
   The standing team calls: two cards on the day they run, one
   collapsed list every other time, and the in-place editor any
   signed-in rep can use when a link, number or PIN dies.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */


/* ---- Standing team calls ----
   Cards on the day they run, until the last one has finished. Every
   other time they fold into one row, because a link you need twice a
   week should not own the top of the page five days out of seven. */
.mtg{margin-bottom:12px;}
.mtg:empty{display:none;}

/* Two cards abreast only while a card is wide enough for the join
   button, the number, the PIN and the pencil on one line. Below that
   one card at a time, because a squeezed card wraps its controls. */
.mtg-cards{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1060px){
  .mtg-cards{grid-template-columns:1fr;}
}
.mtg-card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
}
.mtg-live{border-color:var(--line-strong);background:var(--accent-wash);}

.mtg-top{display:flex;align-items:center;gap:10px;}
.mtg-name{font-size:1.06rem;font-weight:700;line-height:1.3;}
.mtg-badge{
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.66rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.mtg-when{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-soft);font-size:.85rem;margin-top:5px;
}
.mtg-when i{font-size:.8rem;color:var(--ink-faint);}
.mtg-note{color:var(--ink-faint);font-size:.79rem;line-height:1.45;margin-top:5px;}

/* One line while there is room and a second line when there is not,
   with every control keeping the width its own content needs. The
   columns used to be 104px, 152px and whatever was left, so on a card
   sitting two across the PIN box was handed 128px for content that
   needs 182: the digits ran out through the border and the copy button
   landed on top of them. Nothing here is in pixels, so a reader whose
   browser font is larger than the design assumed gets a second line
   rather than a broken one. */
.mtg-acts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:7px;
  margin-top:13px;
}
.mtg-view{display:contents;}
.mtg-view[hidden]{display:none;}
.mtg-acts .mtg-join{flex:0 0 auto;min-width:6.4em;justify-content:center;}
.mtg-acts .mtg-dial{flex:0 0 auto;justify-content:center;}
.mtg-acts .mtg-pinbox{flex:1 0 auto;justify-content:space-between;}
/* The pencil ends whichever line it lands on. */
.mtg-acts .mtg-edit{margin-left:auto;}
/* Narrow: the join link and the number take a full line each. */
@media (max-width:620px){
  .mtg-acts .mtg-join,
  .mtg-acts .mtg-dial{flex:1 0 100%;}
  .mtg-form{grid-template-columns:minmax(0,1fr);}
}
.mtg-join{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.9rem;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.mtg-join:hover{background:var(--accent-hover);text-decoration:none;}
.mtg-dial{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:.86rem;font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.mtg-dial:hover{background:var(--surface-high);text-decoration:none;}
.mtg-dial i{color:var(--ink-faint);font-size:.78rem;}

/* The PIN is read far more often than it is copied, because the dial
   link's embedded PIN is unreliable. So it is plain legible text, sized
   to be keyed in from across a desk, and the copy control sits beside
   it rather than on top of it. */
.mtg-pinbox{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:6px 6px 6px 11px;
  white-space:nowrap;
}
.mtg-pinlabel{
  font-size:.64rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);
}
.mtg-pinval{
  font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--ink);
  user-select:all;
}
.mtg-pincopy{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.8rem;
  flex-shrink:0;
}
.mtg-pincopy:hover{background:var(--surface-high);color:var(--ink);}
.mtg-pincopy.copied{color:var(--ink);}

/* ---- Folded state ---- */
.mtg-fold{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.mtg-fold-head{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:13px 16px;
  color:var(--ink);
}
.mtg-fold-head:hover{background:var(--surface-high);}
.mtg-fold-ic{color:var(--ink-faint);font-size:1rem;flex-shrink:0;}
.mtg-fold-title{font-size:.98rem;font-weight:700;flex-shrink:0;}
.mtg-fold-sub{
  color:var(--ink-faint);font-size:.82rem;
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mtg-fold-chev{color:var(--ink-faint);font-size:.78rem;transition:transform .18s ease;flex-shrink:0;}
.mtg-fold[data-open="true"] .mtg-fold-chev{transform:rotate(180deg);}

.mtg-fold-body{display:none;padding:0 16px 14px;}
.mtg-fold[data-open="true"] .mtg-fold-body{display:block;}

.mtg-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.mtg-row-main{flex:1;min-width:180px;}
.mtg-row-name{display:block;font-size:.92rem;font-weight:600;line-height:1.3;}
.mtg-row-when{display:block;color:var(--ink-faint);font-size:.79rem;margin-top:2px;}
/* The folded rows carry the same three controls and the same rule: each
   one is as wide as it needs to be, and the group drops to a second
   line rather than squeezing the PIN. Every row holds the same words in
   Join and the same shape of number, so the controls still line up down
   the list without a width in pixels making them. */
.mtg-row-acts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:7px;
  margin-left:auto;
}
/* Down a list the three controls line up, which means each one is at
   least as wide as the widest thing any row puts in it: a 12-digit
   number, a 10-digit PIN and its hash. Written in em so it holds at
   whatever size the reader's browser draws the text. */
.mtg-row-acts .mtg-join{flex:0 0 auto;min-width:6.4em;justify-content:center;}
.mtg-row-acts .mtg-dial{flex:0 0 auto;min-width:11.4em;justify-content:center;}
.mtg-row-acts .mtg-pinbox{flex:1 0 auto;min-width:14.2em;justify-content:space-between;}
.mtg-row-acts .mtg-edit{margin-left:auto;}

@media (max-width:700px){
  .mtg-fold-sub{display:none;}
  .mtg-row-acts{
    width:100%;margin-left:0;
  }
  .mtg-row-acts .mtg-join,
  .mtg-row-acts .mtg-dial{flex:1 0 100%;}
}

/* ---- Editing a team call ----
   Any signed-in rep can correct a link, number or PIN for everyone.
   The control is small and sits with the other actions, because it is a
   repair job rather than a feature to advertise. */
.mtg-edit{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.8rem;
}
.mtg-edit:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}

/* The editor takes the same columns the controls it replaced were in,
   so the join link, the number and the PIN become fields where they
   already were. */
.mtg-form{
  flex:1 0 100%;
  display:grid;
  /* The join link is the longest of the three values, so it takes the
     largest share instead of the 104px the old column gave it. */
  grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);
  align-items:end;
  gap:7px;
}
.mtg-form[hidden]{display:none;}
.mtg-f-lab{
  display:flex;flex-direction:column;gap:4px;
  font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);
  min-width:0;
}
.mtg-f-in{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:7px 9px;
  font-size:.88rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  outline:none;
  min-width:0;
}
.mtg-f-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* Save, cancel and reset sit on their own row under the fields, pushed
   to the right so the row ends where the fields end. */
.mtg-f-acts{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;
  margin-top:2px;
}
.mtg-f-msg{font-size:.8rem;color:var(--ink-soft);margin-right:auto;}
.mtg-f-who{
  grid-column:1 / -1;
  font-size:.76rem;color:var(--ink-faint);
  text-align:right;
}

@media (max-width:700px){
  .mtg-form{grid-template-columns:1fr;}
  .mtg-f-acts{justify-content:flex-start;}
  .mtg-f-who{text-align:left;}
}