/* ---------- Generic layout ---------- */
main.view{padding:0 20px 36px;}
main.view.enter{animation:rise .32s ease both;}
@keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
/* Switching to another day inside the calendar: the list eases over instead
   of cutting, while the grid above it stays put. */
.cat-body.swap,
.tagblatt.swap{animation:swapIn .2s ease both;}
@keyframes swapIn{from{opacity:.5;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}
/* A section being unfolded settles in rather than snapping open. */
.cat-body.unfold{animation:unfold .24s cubic-bezier(.22,.9,.3,1) both;}
@keyframes unfold{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:translateY(0);}}
.view h1{
  font-family:var(--font-display);font-weight:600;font-size:32px;
  font-variation-settings:'opsz' 72,'SOFT' 40;
  letter-spacing:-.02em;text-wrap:balance;
  margin:8px 0 4px;color:var(--ink);
}
.view .lede{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0 0 24px;max-width:60ch;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  border-radius:999px;padding:12px 20px;cursor:pointer;border:1.5px solid transparent;
  background:var(--accent-soft);color:var(--accent-deep);
  border-color:var(--accent);
  box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s,filter .12s;
}
.btn svg{width:16px;height:16px;flex:none;}
.btn:active{transform:scale(.97);}
.btn.ghost{background:transparent;color:var(--accent-deep);border-color:var(--line);box-shadow:none;}
.btn.subtle{background:var(--surface-2);color:var(--accent-deep);box-shadow:none;}
.btn.small{padding:9px 15px;font-size:12.5px;}
.btn.danger{background:transparent;border-color:var(--warn);color:var(--warn);box-shadow:none;}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none;}
.btn[disabled]:active{transform:none;}






/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.field input, .field select, .field textarea, .search-wrap input{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;
  /* Date and time inputs carry an intrinsic width from the locale format that
     width:100% does not beat. Without this they push out of their column and
     the two boxes in a row run into each other. */
  min-width:0;max-width:100%;
}
/* iOS lays its native date and time controls out from their own content and
   then ignores the width it was given, so the box grew past its column and
   ran into the field beside it. Turning the native look off hands the sizing
   back to the rule above; tapping still opens the usual picker. The floor on
   the height keeps them level with the other fields. */
.field input[type=date], .field input[type=time]{
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;min-height:46px;
}
.field input:focus, .field select:focus, .field textarea:focus, .search-wrap input:focus{
  outline:2px solid var(--accent);outline-offset:-2px;border-color:transparent;
}
.field textarea{resize:vertical;min-height:76px;font-family:var(--font-body);}
.field-row{display:flex;gap:12px;flex-wrap:wrap;}
/* The basis decides the wrap, the zero minimum keeps a wide control from
   forcing the column open: too narrow for both and they stack instead.
   The clip is the backstop -- should a date or time control still insist on
   more room than its column, it is cut off rather than laid over its
   neighbour. */
.field-row .field{flex:1 1 140px;min-width:0;}
/* Fuer kurze Eingaben wie die Postleitzahl - sonst steht das Feld halb leer. */
.field-row .field.schmal{flex:0 1 104px;}
.field-row .field:has(input[type=date]),
.field-row .field:has(input[type=time]){overflow:hidden;}
/* Der Satz unter den Uhrzeiten: sagt, ob der Platz frei ist. */
.zeit-hinweis{
  font-size:12px;line-height:1.5;color:var(--ink-soft);
  margin:-10px 0 16px;padding-left:2px;
}
.zeit-hinweis.stoss{color:var(--warn);font-weight:600;}
/* Das Zeitraster: jede Viertelstunde ein Knopf. Vergebene Zeiten stehen
   durchgestrichen da und nehmen den Tipp nicht an - man sieht beim
   Vereinbaren sofort, was noch geht. Der Kasten rollt fuer sich, damit das
   Formular darunter nicht weglaeuft. */
.zt-raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;
  max-height:186px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px;
}
.zt-zeit{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;
  padding:9px 3px;border-radius:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  transition:background .12s,border-color .12s,transform .1s;
}
.zt-zeit.dran{
  background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep);font-weight:700;
}
/* Was zwischen Anfang und Ende liegt, bleibt zart hinterlegt - so sieht man
   die gewaehlte Spanne, ohne sie nachrechnen zu muessen. */
.zt-zeit.spanne{
  background:var(--accent-soft);border-color:var(--accent-soft);
  color:var(--accent-deep);
}
.zt-zeit.weg{
  text-decoration:line-through;text-decoration-thickness:1.5px;
  color:var(--ink-soft);opacity:.55;background:var(--surface-2);cursor:default;
}
/* Nur gerade nicht dran - etwa eine Zeit vor dem Anfang. Die ist nicht
   vergeben, also wird sie auch nicht durchgestrichen, bloss blass. */
.zt-zeit.aus{
  color:var(--ink-soft);opacity:.38;background:var(--surface-2);cursor:default;
}
.zt-zeit:not(.weg):active{transform:scale(.94);}

/* Anfang und Ende stehen als zwei Knoepfe ueber dem Raster: die gewaehlte
   Spanne ist immer zu sehen, und ein Tipp sagt, welches von beiden das
   Raster gerade setzt. */
.zt-wahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.zt-teil{
  flex:1 1 104px;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);
  font-family:var(--font-body);text-align:left;
  transition:background .14s,border-color .14s;
}
.zt-teil.dran{background:var(--accent-soft);border-color:var(--accent);}
.zt-teil .zt-lbl{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.zt-teil.dran .zt-lbl{color:var(--accent-deep);}
.zt-teil .zt-uhr{
  font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.zt-teil.dran .zt-uhr{color:var(--accent-deep);}
.zt-strich{flex:none;color:var(--ink-soft);font-size:15px;}
.zt-dauer{
  flex:none;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.zt-sagt{margin:0 2px 8px;font-size:11.5px;line-height:1.5;color:var(--ink-soft);}
/* Der Weg zu den zusaetzlichen Angaben der neuen Kundin. */
.nk-auf{width:100%;justify-content:flex-start;margin-bottom:14px;}
.nk-mehr[hidden]{display:none;}

/* Der Hinweis auf einen geschlossenen Tag - und der Weg daran vorbei. */
.zt-zu{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--wait-soft);border:1px solid var(--wait);
  font-size:12px;line-height:1.45;color:var(--wait);font-weight:600;
}
.zt-zu span{flex:1 1 140px;min-width:0;}
.zt-zu .zz{margin-right:4px;}

/* Ein geschlossener Tag traegt seine Farbe als ruhige Flaeche: Rot fuer
   einen festen Schliesstag, Gelb fuer Urlaub. Gefaerbt wird die Zelle, nicht
   die Zahl - so behaelt der heutige Tag seinen gefuellten Kreis und bleibt
   auch dann zu finden, wenn er selbst geschlossen ist. */
.cal-tag.zu-fest{background:var(--off-soft);}
.cal-tag.zu-urlaub{background:var(--ok-soft);}
.cal-tag.zu-fest .ct-zahl{color:var(--off);}
.cal-tag.zu-urlaub .ct-zahl{color:var(--wait);}
.cal-tag.zu.vorbei .ct-zahl,
.cal-tag.zu.vorbei .ct-zu{opacity:.6;}
/* Das Wort unter der Zahl. Es steht in jeder Zelle des Monats - leer, wo
   offen ist - damit alle Wochen gleich hoch bleiben. */
.ct-zu{
  max-width:100%;height:10px;line-height:10px;
  font-size:8.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Das Zeichen vor dem Wort. Es traegt seine eigene Farbe, nicht die des
   Designs - deshalb steht es in einem eigenen Kaestchen mit eigener
   Groessenangabe, sonst richtet es sich nach der winzigen Schrift daneben. */
.ct-zu .zz{font-size:9px;line-height:1;margin-right:2px;}
.cal-tag.zu-fest .ct-zu{color:var(--off);}
.cal-tag.zu-urlaub .ct-zu{color:var(--ok);}
.cal-legende .lg-zu{width:13px;height:13px;border-radius:4px;}
.cal-legende .lg-zu.fest{background:var(--off-soft);border:1px solid var(--off);}
.cal-legende .lg-zu.urlaub{background:var(--ok-soft);border:1px solid var(--ok);}
.tb-marke-zu{
  flex:none;align-self:center;
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;
}.tb-marke-zu .zz,.tz-knopf .zz{margin-right:3px;}
/* Eine schmale Reihe unter dem Kopf: hier macht man genau diesen einen Tag
   zu, ohne dass jeder Montag mit dranhaengt. */
.tb-zu-reihe{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.tb-zu-reihe .tz-wort{
  flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);
}
.tz-knopf{
  flex:none;display:inline-flex;align-items:center;cursor:pointer;
  padding:6px 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  transition:background .14s,border-color .14s,color .14s,transform .1s;
}
.tz-knopf:active{transform:scale(.95);}
.tz-knopf.fest{background:var(--off-soft);border-color:var(--off);color:var(--off);}
.tz-knopf.urlaub{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);}
.tz-knopf.auf{background:var(--surface);border-color:var(--accent);color:var(--accent-deep);}
.tb-marke-zu.fest{background:var(--off-soft);color:var(--off);}
.tb-marke-zu.urlaub{background:var(--ok-soft);color:var(--ok);}

/* Die Erinnerung an die Sicherung im Wochenplan. */
.bak-mahnung{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px;
  box-shadow:var(--shadow);
}
.bak-mahnung .bm-zeichen{display:flex;flex:none;color:var(--accent-deep);}
.bak-mahnung .bm-zeichen svg{width:19px;height:19px;}
.bak-mahnung .bm-txt{
  flex:1 1 160px;min-width:0;font-size:12.5px;line-height:1.45;color:var(--ink);
}
.bak-mahnung .bm-txt small{
  display:block;margin-top:2px;font-size:11px;color:var(--ink-soft);
}
.bak-mahnung .btn{flex:none;}
/* Ein Zeitraum, der schon vorbei ist, steht blasser in der Liste. */
.bu-zeile.vorbei .bz-n{opacity:.6;}
.bz-n .zz{margin-right:5px;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;
}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep);font-weight:600;}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:12px;box-shadow:var(--shadow);
}
/* An empty area sits on the page as often as inside a card, so it keeps the
   second surface tone and gets a hairline to stay legible on both. */
.empty{
  text-align:center;padding:38px 20px;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);font-size:13.5px;line-height:1.55;
}
.empty .empty-title{
  font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--accent-deep);
  display:block;margin-bottom:6px;
}



/* ---------- A section that looks like a category and folds away ---------- */
.cat{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  margin:16px 0 12px;
  box-shadow:var(--shadow);
}
/* Each section of the customer file is ringed in its own colour - yellow for
   what is still ahead, green for what took place, red for what was called
   off - while the card itself stays light. */
.cat.tone-wait{border-color:var(--wait);}
.cat.tone-ok{border-color:var(--ok);}
.cat.tone-off{border-color:var(--off);}
.cat-head{display:flex;align-items:center;gap:8px 6px;padding:0 6px 0 14px;flex-wrap:wrap;}
.cat-toggle{
  flex:0 1 auto;min-width:0;
  display:flex;align-items:center;gap:9px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:13px 4px;border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);
}
.cat-toggle .t{min-width:0;overflow-wrap:anywhere;}
.cat-toggle .n{
  flex:none;font-size:11px;font-weight:700;letter-spacing:0;
  background:var(--surface-2);color:var(--accent-deep);
  padding:2px 9px;border-radius:999px;
}
/* The arrow sits in the corner on its own, so an action can follow the
   title directly instead of being pushed past it. */
.cat-chev{
  margin-left:auto;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  padding:12px 8px;border-radius:var(--radius-sm);
  color:var(--accent-deep);
}
.cat-chev .chev{display:flex;transition:transform .18s;}
.cat-chev .chev svg{width:17px;height:17px;}
.cat-chev.open .chev{transform:rotate(180deg);}
/* Zugeklappt zeigt jeder Abschnitt rechts, was gerade eingestellt ist -
   so sieht man alle Einstellungen auf einen Blick, ohne etwas zu oeffnen.
   Aufgeklappt steht es ohnehin im Abschnitt selbst und verschwindet hier. */
.cat-wert{
  display:none;margin-left:auto;flex:0 1 auto;min-width:0;
  align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat.is-shut .cat-wert{display:flex;}
/* Nur wo ein Wert steht, rueckt der Pfeil direkt daneben - sonst bleibt er
   wie ueberall sonst allein in der Ecke. */
.cat.is-shut .cat-wert ~ .cat-chev{margin-left:0;}
/* Zugeklappt bleibt jeder Kopf auf einer Zeile: Titel und Wert werden
   gekuerzt statt umzubrechen. Dadurch stehen alle Abschnitte gleich hoch
   da, egal wie lang der Name eines Designs oder einer Zone ist. */
.cat.hat-wert.is-shut .cat-head{flex-wrap:nowrap;min-height:44px;}
/* Der Titel steht immer ganz da, der Wert gibt zuerst nach - lieber ein
   gekuerzter Designname als ein unlesbarer Abschnittstitel. */
.cat.hat-wert.is-shut .cat-toggle{align-self:stretch;flex:0 0 auto;padding-left:2px;padding-right:2px;}
.cat.hat-wert.is-shut .cat-wert{flex:0 1 auto;font-size:11px;gap:4px;padding-left:7px;}
/* Die Abstaende zugeklappt eine Spur enger: damit passt auch der laengste
   Designname neben den Titel, ohne dass etwas abgeschnitten wird. */
.cat.hat-wert.is-shut .cat-head{padding-left:12px;padding-right:5px;gap:3px;}
.cat.hat-wert.is-shut .cat-chev{padding-left:5px;padding-right:5px;}
.cat.hat-wert.is-shut .cat-wert .sw{width:22px;height:16px;border-radius:5px;}
/* Zugeklappt steht der Titel eine Spur kleiner und enger - das schafft die
   Handbreit, die der Name des Designs daneben braucht. */
.cat.hat-wert.is-shut .cat-toggle{font-size:10px;letter-spacing:.02em;}
.cat.hat-wert.is-shut .cat-toggle .t{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Wie viele Designs es gibt, hilft nur beim Aussuchen - zugeklappt macht
   die Zahl dem gewaehlten Design nur Platz weg. */
.cat.hat-wert.is-shut .cat-toggle .n{display:none;}
/* Derselbe Streifen wie auf der Kachel, nur klein - so erkennt man das
   gewaehlte Design auch dann, wenn der Abschnitt zugeklappt ist. */
.cat-wert .sw{
  width:34px;height:19px;border-radius:6px;flex:none;
  border:1px solid var(--line);
  background:linear-gradient(112deg,var(--g1) 0 44%,var(--g2) 44% 72%,var(--g3) 72% 100%);
}
/* Gekuerzt wird der Text selbst - der Kasten drumherum ist ein Flex-Kasten,
   dort greifen drei Puenktchen nicht. */
.cat-wert b,.cat-wert .leer{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-wert b{color:var(--ink);font-weight:700;}
.cat-wert .leer{opacity:.8;font-style:italic;}
.cat-head .btn{flex:none;}
/* A little air under the head - especially where an action button sits on
   its own line, it was almost touching the first row. */
.cat-body{padding:8px 12px 12px;}
.cat-body > *:last-child{margin-bottom:0;}















/* Der Rueckstand: was noch auf Haken oder Kreuz wartet. */
.offen-block{
  background:var(--wait-soft);border:1px solid var(--wait);
  border-radius:var(--radius);padding:11px 12px 6px;margin-bottom:16px;
}
.ob-kopf{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--wait);}
.ob-kopf svg{width:17px;height:17px;flex:none;margin-top:1px;}
.ob-kopf strong{font-weight:700;}
.ob-zeile{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:7px 0;border-top:1px solid rgba(0,0,0,.07);margin-top:8px;
}
.ob-zeile + .ob-zeile{margin-top:0;}
.ob-wann{
  flex:none;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--wait);white-space:nowrap;
}
.ob-wer{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;cursor:pointer;
  background:none;border:none;padding:0;text-align:left;font-family:var(--font-body);
}
.ob-name{font-size:13px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
.ob-was{font-size:11px;color:var(--ink-soft);overflow-wrap:anywhere;}
.ob-tasten{display:flex;align-items:center;gap:2px;flex:none;}
.ob-mehr{padding:6px 0 4px;font-size:11.5px;color:var(--wait);}
/* Eine Zeile pro Termin: Bild, Name, darunter Zeit und Leistung. Rechts nur
   Haken und Kreuz - Bearbeiten und Loeschen stehen im Dialog, den ein Tipp
   auf die Zeile oeffnet. */
.wk-appt{
  min-width:0;display:flex;align-items:center;gap:6px;padding:5px 0;
}
.wk-appt + .wk-appt{border-top:1px solid var(--line);}
.wk-zeile{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  background:none;border:none;padding:3px 4px;margin:0 -4px;border-radius:10px;
  cursor:pointer;text-align:left;font-family:var(--font-body);color:var(--ink);
  transition:background .15s;
}
.wk-appt .uhr{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-deep);}
.wk-appt.is-open .uhr{color:var(--wait);}
.wk-appt.is-cancelled .uhr{color:var(--off);}
.wk-appt.is-done .uhr{color:var(--ok);}

.wk-appt .t{
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  color:var(--wait);background:var(--wait-soft);
  padding:4px 9px;border-radius:9px;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.wk-acts{display:flex;align-items:center;gap:1px;flex:none;}
.wk-acts.spread{
  justify-content:space-between;gap:0;flex:1 1 auto;
  margin-top:5px;
}
.wk-acts.spread .st-btn{flex:1;position:relative;justify-content:center;}
.wk-appt .wk-acts.spread{max-width:340px;}
.wk-acts.spread .st-btn + .st-btn::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:var(--line);
}
/* A marked button is a filled field, so the lines touching its rounded
   edge are dropped instead of cutting across it. */
.wk-acts.spread .st-btn.on::before,
.wk-acts.spread .st-btn.on + .st-btn::before{display:none;}

/* The photo, or the drawn figure the customer file uses, so a name in the
   week is recognised at a glance. */
.wk-appt .avatar{width:34px;height:34px;}
/* A cancelled entry strikes its text through, so the picture fades with it
   instead of standing there at full strength. */
.wk-appt.is-cancelled .avatar,
.ml-row.is-cancelled .avatar{opacity:.55;}
/* On a narrow phone the figure gives a little room back to the name. */
@media (max-width:370px){
  .wk-appt .avatar{width:28px;height:28px;}
  
}
.wk-who{display:flex;flex-direction:column;min-width:0;}
/* Name und Zustand teilen sich die erste Zeile. Reicht der Platz nicht,
   rutscht die kleine Marke unter den Namen - der Name hat Vorrang. */
.wk-namezeile{display:flex;align-items:center;flex-wrap:wrap;gap:1px 6px;min-width:0;}
.wk-tag{
  flex:none;border-radius:999px;padding:2px 7px;
  font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.wk-tag.offen{background:var(--wait-soft);color:var(--wait);}
.wk-tag.ab{background:var(--off-soft);color:var(--off);}
.wk-appt .who{font-size:14px;font-weight:700;line-height:1.25;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wk-appt .what{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--ink-soft);
  margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


/* The state and the icons follow suit, so the whole card reads at one size. */
.wk-appt .tag-done,.wk-appt .tag-open,.wk-appt .tag-cancel{font-size:11px;padding:3px 9px;}
.wk-appt .cancel-why{font-size:12px;}
.wk-appt .st-btn svg{width:18px;height:18px;}