/* Calendario de campañas v2: estilos de las vistas de P4b (Año, Registro, Cómo funciona y Equipo).
   Siguen docs/DISENO.md tal cual: los tokens, la letra y las piezas (botones, campos, barras, listas, avisos) son los de
   style.css; aquí solo va lo propio de estas cuatro vistas. Tamaños de letra solo de la escala (--f-*), el móvil cuelga
   de html[data-layout="mobile"] (no de @media de anchura) y nunca el color solo: cada estado lleva su palabra. */

/* Verde para texto: el --green (#2e7d4f) da 4,45:1 sobre el papel y no llega al AA de texto (4,5:1, PLAN §11). Mezclado con
   la tinta sube en claro y en oscuro (la tinta es lo que más contrasta con el papel en los dos modos), como el
   --amber-text del ámbar. tests/web/test_p4b_units.py mide el contraste en los dos modos. */
:root { --green-text: color-mix(in srgb, var(--green) 80%, var(--ink)); }

/* --- Año: doce meses en horizontal, un carril por país --- */

.ym-range { margin-top: 6px; font-size: var(--f-17); }
.ym-toolbar .ym-zoom { flex-wrap: nowrap; }
.strip.ym { padding: 0 0 6px; }
.ym-chart { position: relative; }
.ym-inner { position: relative; padding-top: 44px; overflow: hidden; border-radius: var(--r-box) var(--r-box) 0 0; }
.ym-months { position: absolute; top: 0; left: var(--label-w); right: 12px; height: 44px; display: flex; }
.ym-month { flex: 1 1 0; min-width: 0; padding: 12px 0 0 8px; white-space: nowrap; overflow: hidden; }
.ym-month-name { font-size: var(--f-13); font-weight: 600; color: var(--ink); }
.ym-month-year { font-size: var(--f-13); color: var(--grey); }
.ym-month.now .ym-month-name { color: var(--purple); }
.ym-grid { position: absolute; top: 0; bottom: 0; left: var(--label-w); right: 12px; pointer-events: none; }
.ym-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ym-grid .ym-today { top: 34px; }
.ym-grid .ym-today span { top: -2px; }
.ym-lane .lane-track { min-height: 0; }

/* Un momento: el nombre encima; debajo, la línea de puntos de sus plazos hacia atrás (con una raya por plazo), la ventana
   en gris (como en la tira: un momento no es una campaña, y en verde se confundiría con una general) y el día marcado con
   un punto. */
.ym-moment { position: absolute; height: 28px; cursor: pointer; border-radius: var(--r-bar); z-index: 2; }
.ym-moment-name {
  position: absolute; top: 0; left: 0; white-space: nowrap; font-size: var(--f-13); font-weight: 500; line-height: 16px;
  color: var(--grey);
}
.ym-lead { position: absolute; left: 0; top: 19px; height: 0; border-top: 2px dotted var(--grey); }
.ym-window { position: absolute; top: 16px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--grey) 30%, var(--surface)); }
.ym-tick { position: absolute; top: 14px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--grey); }
.ym-day {
  position: absolute; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--surface);
}
.ym-moment:hover .ym-moment-name, .ym-moment[aria-expanded="true"] .ym-moment-name { color: var(--ink); }
.ym-moment[aria-expanded="true"] .ym-window { background: color-mix(in srgb, var(--grey) 60%, var(--surface)); }
.ym-moment:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; z-index: 6; }
.ym-empty { position: absolute; left: 8px; font-size: var(--f-13); color: var(--grey); }

/* El semáforo de cada campaña, en palabra y con su forma: a tiempo (visto), justa (rombo), tarde (triángulo). */
.ym-light.ok { color: var(--green-text); }
.ym-light.tight { color: var(--amber-text); }
.ym-light.late { color: var(--red); }
.bar .tag .ym-light { font-weight: 600; }
.bar .tag .light-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.light-icon { width: 16px; height: 16px; }
.ym-legend .ym-light { color: var(--grey); }
.ym-legend .ym-light .light-icon { width: 16px; height: 16px; }
.ym-legend .ym-light.ok .light-icon { color: var(--green-text); }
.ym-legend .ym-light.tight .light-icon { color: var(--amber-text); }
.ym-legend .ym-light.late .light-icon { color: var(--red); }
.ym-sample { display: inline-flex; align-items: center; width: 40px; height: 10px; }
.ym-sample-lead { width: 12px; border-top: 2px dotted var(--grey); }
.ym-sample-window { flex: 1; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--grey) 30%, var(--surface)); }

/* La ficha de un momento: flota bajo su banda (en el móvil, abierta dentro de la lista). */
.ym-card {
  position: absolute; z-index: 10; width: 384px; max-width: calc(100% - 16px); padding: 16px 18px 18px;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-box);
  box-shadow: 0 18px 48px rgba(29, 22, 48, 0.18); animation: rise 140ms ease-out;
}
.ym-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ym-card h3 { font-size: var(--f-20); margin-top: 6px; overflow-wrap: anywhere; }
.ym-card h4 { font-size: var(--f-13); font-weight: 600; color: var(--grey); margin: 14px 0 6px; }
.ym-facts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 10px; font-size: var(--f-13); }
.ym-markets, .ym-steps { list-style: none; margin: 0; padding: 0; }
.ym-markets li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.ym-mk { font-weight: 600; }
.ym-steps { border-left: 2px dotted var(--grey); margin-left: 5px; padding-left: 14px; }
.ym-steps li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 3px 0; position: relative; }
.ym-steps li::before {
  content: ""; position: absolute; left: -20px; top: 10px; width: 10px; height: 2px; background: var(--grey);
}
.ym-steps li.start { font-weight: 600; }
.ym-steps li.start::before { background: var(--ink); height: 10px; width: 10px; border-radius: 50%; top: 6px; left: -21px; }
.ym-steps li.past { color: var(--grey); }
.ym-steps li.past .ym-step-day { text-decoration: line-through; }
.ym-step-day { font-weight: 600; white-space: nowrap; }
.ym-why { margin-top: 12px; font-size: var(--f-13); }
.ym-card .note { font-size: var(--f-13); }
.ym-card .actions { margin: 14px 0 0; }

/* --- Registro: lo hecho, agrupado por acción --- */

.au-lead { margin-top: 6px; max-width: 70ch; }
.au-toolbar { margin-bottom: 8px; }
.au-toggle { display: none; }
.au-filters {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 156px 156px minmax(0, 1.2fr);
  gap: 12px 14px; align-items: end; padding: 16px 18px; border-radius: var(--r-box); background: var(--surface);
}
/* Todos los controles a la misma altura (WebKit da 47 px a un campo de fecha y 44 a un desplegable): las etiquetas, en
   la misma línea. En el móvil manda el mínimo de 48 px de style.css. */
.au-filters select, .au-filters input { height: 44px; }
.au-filters input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* Un campo de fecha vacío se ve vacío: WebKit pinta la fecha de hoy con color de valor y parecería un filtro puesto. */
.au-date { position: relative; display: block; }
.au-date input { display: block; }
.au-date-hint { display: none; position: absolute; left: 13.5px; top: 50%; transform: translateY(-50%); color: var(--grey); pointer-events: none; }
.au-date.au-blank:not(:focus-within) .au-date-hint { display: block; }
.au-date.au-blank:not(:focus-within) input::-webkit-datetime-edit { color: transparent; }
.au-date.au-blank:not(:focus-within) input { color: transparent; }
.au-date.au-blank:not(:focus-within) input::-webkit-datetime-edit-text { color: transparent; }
.au-date.au-blank:not(:focus-within) input::-webkit-datetime-edit-day-field { color: transparent; }
.au-date.au-blank:not(:focus-within) input::-webkit-datetime-edit-month-field { color: transparent; }
.au-date.au-blank:not(:focus-within) input::-webkit-datetime-edit-year-field { color: transparent; }
.au-filter-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.au-count { margin: 18px 0 0; color: var(--grey); font-size: var(--f-13); min-height: 19px; }
.au-day { font-size: var(--f-17); margin: 22px 0 0; padding: 0 8px 8px; border-bottom: 1px solid var(--line-strong); }
.au-groups { list-style: none; margin: 0; padding: 0; }
.au-head {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline;
  width: 100%; min-height: 48px; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; cursor: pointer; color: var(--ink);
}
.au-head:hover { background: var(--surface); }
.au-head[aria-expanded="true"] { background: var(--surface); border-bottom-color: transparent; }
.au-time { font-weight: 600; color: var(--grey); }
.au-what { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.au-summary { font-weight: 500; overflow-wrap: anywhere; }
.au-alert { width: 16px; height: 16px; align-self: center; }
.au-kind { font-size: var(--f-13); font-weight: 600; color: var(--grey); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.au-more-word { font-size: var(--f-13); color: var(--grey); white-space: nowrap; }
.au-detail { padding: 2px 8px 16px 78px; background: var(--surface); border-bottom: 1px solid var(--line); }
.au-detail .changes { margin: 0; font-size: var(--f-15); }
.au-detail .changes li { overflow-wrap: anywhere; }
.au-detail > p { margin-top: 8px; }
.au-open { color: var(--purple); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.au-net { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: var(--f-13); }
.au-net dt { color: var(--grey); font-weight: 600; }
.au-net dd { margin: 0; overflow-wrap: anywhere; }
/* Lo hecho por fuera del panel, en rojo: canto, icono y frase (y la palabra que lo dice al desplegarlo). */
.au-group.outside .au-head { box-shadow: inset 4px 0 0 var(--red); }
.au-group.outside .au-summary, .au-group.outside .au-alert { color: var(--red); }
.au-group.outside .au-summary { font-weight: 600; }
.au-group.outside .au-detail { box-shadow: inset 4px 0 0 var(--red); }
.au-outside-note { display: flex; gap: 6px; align-items: center; color: var(--red); font-weight: 600; }
.au-outside-note .icon { width: 16px; height: 16px; }
.au-more { margin-top: 18px; }

/* --- Cómo funciona: una página para leer, con su índice --- */

.hw-lead { margin-top: 6px; max-width: 70ch; font-size: var(--f-17); }
.hw { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.hw-index { position: sticky; top: calc(var(--top-h) + 20px); }
.hw-index ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.hw-index a {
  display: flex; align-items: center; min-height: 40px; padding: 4px 12px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--grey); text-decoration: none; font-weight: 500;
}
.hw-index a:hover { color: var(--ink); border-left-color: var(--purple); }
.hw-body { max-width: 900px; min-width: 0; }
.hw-section { margin-bottom: 48px; scroll-margin-top: calc(var(--top-h) + 16px); }
.hw-section > h2 { font-size: var(--f-26); margin-bottom: 14px; }
.hw-prose { max-width: 68ch; font-size: var(--f-17); margin-bottom: 14px; }
.hw-list { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.hw-list li { position: relative; padding: 8px 0 8px 20px; font-size: var(--f-17); border-bottom: 1px solid var(--line); }
.hw-list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; border-radius: 2px; background: var(--purple); }
.hw-types { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-types li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-radius: var(--r-ctl);
  background: var(--surface); border-left: 4px solid var(--tc);
}
.hw-types p { grid-column: 1 / -1; color: var(--grey); }
.hw-type-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--f-17); }
/* La letra es la del código de campaña, un identificador: en AeionMono, como el código. */
.hw-letter { font-family: var(--mono); font-size: var(--f-15); padding: 0 8px; border-radius: 6px; background: var(--paper); align-self: center; }
.hw-rules { list-style: none; margin: 0; padding: 0; }
.hw-rule { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hw-rule .sev-word { grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
.hw-rule h3 { font-size: var(--f-17); }
.hw-why { max-width: 68ch; }
.hw-source { font-size: var(--f-13); color: var(--grey); }
.hw-table-wrap { background: var(--surface); border-radius: var(--r-box); overflow: hidden; }
.hw-table { width: 100%; border-collapse: collapse; }
.hw-table th, .hw-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hw-table thead th { font-size: var(--f-13); font-weight: 600; color: var(--grey); }
.hw-table tbody tr:last-child th, .hw-table tbody tr:last-child td { border-bottom: 0; }
.hw-table tbody th { font-weight: 400; width: 34%; }
.hw-m-name { display: block; font-weight: 600; }
.hw-table .hw-source { display: block; margin-top: 2px; }
.hw-m-local { display: block; font-weight: 500; }
.hw-legal { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 72ch; }
.hw-legal .note { margin: 0; }
.hw-legal h3 { font-size: var(--f-15); margin-bottom: 4px; }

/* --- Equipo (solo admin) --- */

.tm-invite-box:not(:empty) { margin-bottom: 28px; }
.tm-invite-box .inline-form, .tm-done { background: var(--surface); border-radius: var(--r-box); padding: 18px 20px 20px; max-width: 760px; }
.tm-form h2, .tm-done h2 { font-size: var(--f-20); }
.tm-done { display: grid; gap: 12px; }
.tm-copy { display: grid; gap: 6px; }
.tm-copy .label { font-size: var(--f-13); font-weight: 600; color: var(--grey); }
.tm-copy-row { display: flex; gap: 10px; align-items: stretch; }
.tm-copy-row .tm-copy-field { flex: 1 1 auto; min-width: 0; font-size: var(--f-15); }
.tm-section { margin-top: 30px; }
.tm-section > h2 { font-size: var(--f-26); }
.tm-people, .tm-jobs { margin-top: 2px; }
.tm-person {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 150px minmax(0, 1.4fr); gap: 8px 18px; align-items: center;
  padding: 12px 8px; border-bottom: 1px solid var(--line);
}
.tm-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tm-name { font-weight: 600; font-size: var(--f-17); }
.tm-mail, .tm-access { font-size: var(--f-13); color: var(--grey); overflow-wrap: anywhere; }
.tm-access.pending { color: var(--amber-text); font-weight: 600; }
.tm-person.off .tm-name { color: var(--grey); }
.tm-role .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tm-role select { min-height: 40px; }
.tm-role select[disabled] { opacity: 0.6; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tm-tokens, .tm-row-msg, .tm-row-extra { grid-column: 1 / -1; }
.tm-row-extra:empty, .tm-row-msg:empty { display: none; }
.tm-row-extra .inline-form { margin-top: 4px; background: var(--surface); }
.tm-tokens { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.tm-tokens li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 4px 0; }
.tm-token-label { font-weight: 500; }
.tm-tokens li.revoked .tm-token-label { text-decoration: line-through; color: var(--grey); }
.tm-job { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 6px 18px; padding: 12px 8px; border-bottom: 1px solid var(--line); align-items: center; }
.tm-job-state { display: flex; flex-direction: column; gap: 2px; font-size: var(--f-13); }
.tm-detail { grid-column: 1 / -1; font-size: var(--f-13); color: var(--grey); overflow-wrap: anywhere; max-width: 90ch; }
.tm-job.bad .tm-name { color: var(--red); }
.sev-word.ok { color: var(--green-text); }

/* --- móvil: otro diseño, no el del ordenador encogido --- */

/* Año: mes a mes hacia abajo, con un selector de país. */
html[data-layout="mobile"] .ym-range { font-size: var(--f-15); }
html[data-layout="mobile"] .ym-toolbar .ym-zoom { flex-wrap: wrap; width: 100%; }
html[data-layout="mobile"] .ym-toolbar .pager .btn { flex: 1 1 0; }
html[data-layout="mobile"] .ym-country { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
html[data-layout="mobile"] .ym-country legend { width: 100%; }
html[data-layout="mobile"] .ym-month-block > h2 { font-size: var(--f-20); margin: 22px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
html[data-layout="mobile"] .ym-month-block.now > h2 { border-bottom-color: var(--purple); }
html[data-layout="mobile"] .ym-month-block .empty { font-size: var(--f-15); padding: 10px 0; }
html[data-layout="mobile"] .ym-item {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
  color: var(--ink); padding-bottom: 14px;
}
html[data-layout="mobile"] .ym-item-name { font-weight: 600; }
html[data-layout="mobile"] .ym-item .state { display: inline-flex; align-items: center; gap: 4px; }
html[data-layout="mobile"] .ym-mini { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 3px; background: var(--line); margin-top: 4px; }
html[data-layout="mobile"] .ym-mini i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--tc); min-width: 5px; }
html[data-layout="mobile"] .ym-mini.moment i { background: color-mix(in srgb, var(--grey) 45%, var(--surface)); }
html[data-layout="mobile"] .ym-item[aria-expanded="true"] { background: var(--surface); border-bottom-color: transparent; }
html[data-layout="mobile"] .ym-open .ym-card {
  position: static; width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; animation: none;
  border-bottom: 1px solid var(--line); padding: 4px 4px 16px;
}
html[data-layout="mobile"] .ym-card h3 { display: none; }
html[data-layout="mobile"] .ym-card .actions .btn { width: 100%; white-space: normal; min-height: 48px; }
html[data-layout="mobile"] .ym-markets li { grid-template-columns: 1fr; gap: 0; padding: 6px 0; }
html[data-layout="mobile"] .ym-steps li { grid-template-columns: 96px minmax(0, 1fr); }
html[data-layout="mobile"] .ym-why, html[data-layout="mobile"] .ym-card .note, html[data-layout="mobile"] .ym-facts { font-size: var(--f-15); }

/* Registro: los filtros recogidos tras «Filtros», un campo por línea; cada acción a lo ancho. */
html[data-layout="mobile"] .au-toggle { display: inline-flex; width: 100%; }
html[data-layout="mobile"] .au-toolbar:not(.open) .au-filters { display: none; }
html[data-layout="mobile"] .au-filters { grid-template-columns: minmax(0, 1fr); margin-top: 10px; padding: 14px; }
html[data-layout="mobile"] .au-filter-actions .btn { flex: 1 1 0; }
html[data-layout="mobile"] .page-head > .btn { width: 100%; }
html[data-layout="mobile"] .au-head { grid-template-columns: 50px minmax(0, 1fr); padding: 12px 4px; }
html[data-layout="mobile"] .au-kind, html[data-layout="mobile"] .au-more-word { grid-column: 2; justify-self: start; }
html[data-layout="mobile"] .au-detail { padding: 2px 8px 16px 68px; }
html[data-layout="mobile"] .au-net { grid-template-columns: 1fr; font-size: var(--f-15); }
html[data-layout="mobile"] .au-count { font-size: var(--f-15); }

/* Cómo funciona: sin índice; los momentos como lista en vez de tabla. */
html[data-layout="mobile"] .hw { grid-template-columns: minmax(0, 1fr); gap: 0; }
html[data-layout="mobile"] .hw-section > h2 { font-size: var(--f-20); }
html[data-layout="mobile"] .hw-types { grid-template-columns: minmax(0, 1fr); }
html[data-layout="mobile"] .hw-rule { grid-template-columns: minmax(0, 1fr); }
html[data-layout="mobile"] .hw-rule .sev-word { grid-row: auto; }
/* Lo que se lee (el porqué de cada momento, de dónde sale cada regla) a la letra del cuerpo del móvil. */
html[data-layout="mobile"] .hw-source { font-size: var(--f-17); }
html[data-layout="mobile"] .hw-moments { list-style: none; margin: 0; padding: 0; }
html[data-layout="mobile"] .hw-moments li { padding: 12px 0; border-bottom: 1px solid var(--line); }
html[data-layout="mobile"] .hw-moments h3 { font-size: var(--f-17); margin-bottom: 4px; }
html[data-layout="mobile"] .hw-moments dl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; margin: 0 0 4px; }
html[data-layout="mobile"] .hw-moments dt { font-weight: 600; }
html[data-layout="mobile"] .hw-moments dd { margin: 0; }

/* Equipo: una persona por bloque, el rol y los botones debajo. */
html[data-layout="mobile"] .page-head .tm-invite { width: 100%; min-height: 48px; }
html[data-layout="mobile"] .tm-person, html[data-layout="mobile"] .tm-job { grid-template-columns: minmax(0, 1fr); padding: 14px 4px; }
html[data-layout="mobile"] .tm-actions { justify-content: flex-start; }
html[data-layout="mobile"] .tm-actions .btn { flex: 1 1 auto; }
html[data-layout="mobile"] .tm-role select { min-height: 48px; }
html[data-layout="mobile"] .tm-mail, html[data-layout="mobile"] .tm-access, html[data-layout="mobile"] .tm-job-state,
html[data-layout="mobile"] .tm-detail { font-size: var(--f-15); }
html[data-layout="mobile"] .tm-copy-row { flex-direction: column; }
html[data-layout="mobile"] .tm-section > h2 { font-size: var(--f-20); }
/* Los subtítulos de grupo, al menos del tamaño del texto que encabezan (17 px en el móvil). */
html[data-layout="mobile"] .tm-section .group > h3 { font-size: var(--f-17); }
html[data-layout="mobile"] .tm-actions .btn { font-size: var(--f-15); }
html[data-layout="mobile"] .tm-invite-box .inline-form, html[data-layout="mobile"] .tm-done { padding: 16px 14px 18px; }
html[data-layout="mobile"] .tm-tokens li .btn { min-height: 44px; }