/* Matches tasks-board's active .view-tab: black/white, 8:16 padding at 14px,
   and a left icon expanding from 0 to 16px with a 6px gap over 200ms (ease).
   All lengths scale together. The smaller font-card actions use the same ratios. */
:root[data-study="quiet-cards"] { --action-surface:#000; --action-text:#fff; }
:root[data-study="quiet-cards"][data-theme="dark"] { --action-surface:#f3f5f6; --action-text:#111; }
[data-study="quiet-cards"] .tdl-action.tdl-action {
  --action-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:max-content;
  height:auto;
  min-height:0;
  padding:calc(var(--action-size) * 8 / 14) calc(var(--action-size) * 16 / 14);
  gap:0;
  border:calc(var(--action-size) / 14) solid var(--action-surface);
  border-radius:999px;
  background:var(--action-surface);
  color:var(--action-text);
  box-shadow:none;
  font:500 var(--action-size)/1.5 var(--mono);
  letter-spacing:normal;
  white-space:nowrap;
  text-decoration:none;
  user-select:none;
  opacity:1;
  cursor:pointer;
  transition:background .12s, color .2s;
}
[data-study="quiet-cards"] .tdl-action.tdl-action:disabled { cursor:default; }
/* Keep the sidebar's compact pill while sharing the official-link icon reveal. */
[data-study="quiet-cards"] .contact-button.tdl-action.tdl-action {
  --action-size:12px;
  --action-surface:var(--ink);
  --action-text:var(--bg);
  min-height:34px;
  padding:8px 15px;
  border:0;
  font-weight:400;
  line-height:1.4;
}
/* The copy action shares the official-link pill geometry and icon reveal. */
[data-study="quiet-cards"] .qd-copy-link.tdl-action,
[data-study="quiet-cards"] .tdl-action--secondary.tdl-action {
  --action-surface:#f4f4f4;
  --action-text:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 14%,var(--surface));
}
[data-study="quiet-cards"][data-theme="dark"] .qd-copy-link.tdl-action,
[data-study="quiet-cards"][data-theme="dark"] .tdl-action--secondary.tdl-action { --action-surface:#303030; }
[data-study="quiet-cards"] .qd-copy-link .tdl-action-icon { position:relative; overflow:hidden; }
[data-study="quiet-cards"] .tdl-action .tdl-action-icon {
  display:block;
  flex-shrink:0;
  width:0;
  height:calc(var(--action-size) * 16 / 14);
  opacity:0;
  overflow:visible;
  margin-right:0;
  transition:width .2s, opacity .2s, margin-right .2s;
}
[data-study="quiet-cards"] .tdl-action .tdl-action-icon svg {
  display:block;
  width:100%;
  height:100%;
  stroke-width:1.8;
}
[data-study="quiet-cards"] .tdl-action:hover .tdl-action-icon,
[data-study="quiet-cards"] .tdl-action:focus-visible .tdl-action-icon {
  width:calc(var(--action-size) * 16 / 14);
  opacity:1;
  margin-right:calc(var(--action-size) * 6 / 14);
}
/* The reference tab has no extra press scale or background inversion. */
[data-study="quiet-cards"] .qd-content .primary-button.tdl-action:active,
[data-study="quiet-cards"] .tdl-action.tdl-action:active { scale:1; transform:none; }
[data-study="quiet-cards"] .tdl-action:focus-visible { outline:2px solid var(--muted); outline-offset:3px; }
.font-module .fp-download-slot {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:6em;
  flex:none;
  font-size:12px;
}
[data-study="quiet-cards"] .font-module .tdl-action { --action-size:12px; }
.font-module .fp-mini-pack { grid-template-columns:44px minmax(0,1fr) auto; }
.qd-pack-actions { margin-top:24px; }
.fp-dialog-footer { justify-content:flex-start; flex-wrap:wrap; }
@container(max-width:300px) {
  .font-module .fp-download-slot { font-size:11px; }
  [data-study="quiet-cards"] .font-module .tdl-action { --action-size:11px; }
}
@container(max-width:240px) {
  .font-module .fp-mini-pack { grid-template-columns:44px minmax(0,1fr) auto; }
}
@media(max-width:759px) {
  [data-study="quiet-cards"] .tdl-action.tdl-action { --action-size:16px; }
  .font-module .fp-download-slot { font-size:16px; }
  .font-module .fp-mini-pack { grid-template-columns:44px minmax(0,1fr) auto; }
}
@media(prefers-reduced-motion:reduce) {
  [data-study="quiet-cards"] .tdl-action.tdl-action,
  [data-study="quiet-cards"] .tdl-action .tdl-action-icon { transition:none; }
}

/* The two secondary packs use quiet circles with an always-visible download icon. */
.font-module .fp-download-slot--circle { width:36px; }
.font-module .fp-circle-download {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f4f4f4;
  color:#777;
  box-shadow:none;
  transition:background-color 180ms ease, color 180ms ease;
}
.fp-circle-download .tdl-action-icon { display:block; width:16px; height:16px; transform:translateY(0); transition:transform 200ms cubic-bezier(.22,1,.36,1); }
.fp-circle-download .tdl-action-icon svg { width:100%; height:100%; }
.font-module .fp-circle-download:hover,
.font-module .fp-circle-download:focus-visible { background:#000; color:#fff; }
.fp-circle-download:hover .tdl-action-icon,
.fp-circle-download:focus-visible .tdl-action-icon { transform:translateY(-2px); }
[data-theme="dark"] .fp-circle-download { background:#2d2d2d; color:#aaa; }
[data-theme="dark"] .fp-circle-download:hover,
[data-theme="dark"] .fp-circle-download:focus-visible { background:#000; color:#fff; }
@media(max-width:759px) {
  .font-module .fp-download-slot--circle { width:40px; }
  .font-module .fp-circle-download { width:40px; height:40px; min-height:40px; }
}
@media(prefers-reduced-motion:reduce) {
  .font-module .fp-circle-download,
  .fp-circle-download .tdl-action-icon { transition:none; }
  .fp-circle-download:hover .tdl-action-icon,
  .fp-circle-download:focus-visible .tdl-action-icon { transform:none; }
}