/* ============================================================
   Pipezoom - meetings.css
   The standing team calls: 2 cards on the day they run, 1 collapsed
   list on every other day, and the in-place editor any signed-in rep
   can use when a link, number or PIN stops working.

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


/* Standing team calls
   Cards on the day they run, until the last one has finished. Because
   a rep needs the link twice a week, on every other day they fold into
   1 row. */
.mtg{margin-bottom:12px;}
.mtg:empty{display:none;}

/* 2 cards abreast only while a card holds the join button, the number,
   the PIN and the pencil on 1 line. Because a squeezed card wraps its
   controls, narrower screens show 1 card at a time. */
.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;}

/* 1 line while there is room and a second line when there is not, with
   every control at the width its own content needs. Nothing here is in
   pixels, and a reader with a larger browser font gets the second line. */
.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;}

/* Because the dial link's embedded PIN is unreliable, a rep keys the PIN
   in by hand. It is plain legible text, sized to be read from across a
   desk, with the copy control beside 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 3 controls and the same rule: each
   is as wide as it needs to be, and the group drops to a second line.
   Because every row holds the same words in Join and the same number
   layout, the controls line up down the list with no width in pixels. */
.mtg-row-acts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:7px;
  margin-left:auto;
}
/* Down a list the 3 controls line up, each at least as wide as the
   widest value any row puts in it: a 12-digit number, a 10-digit PIN
   and its hash. The widths are in em and hold at any browser text size. */
.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 a small repair press
   beside the other actions. */
.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 uses the columns of the controls it covers, and the join
   link, the number and the PIN become fields at their own positions. */
.mtg-form{
  flex:1 0 100%;
  display:grid;
  /* The join link, the longest of the 3 values, takes the largest share. */
  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 are on their own row under the fields, pushed
   right to end 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;}
/* The 2 clock times read as 1 field, side by side on their own row
   under the 3 fields edited most. */
.mtg-f-when{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;max-width:340px;
}
.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-when{max-width:none;}
  .mtg-f-acts{justify-content:flex-start;}
  .mtg-f-who{text-align:left;}
}