/* Google Calendar (portal/google-calendar.js): its section on Settings → Integrations, drawn with the Settings page's own
   pieces (settings.css: .st-section, .st-btn, .st-note) and the social accounts' row (.acct, .pill-btn in login.html).
   Only the colour tokens every theme defines. */
.st [data-icon="calendar"]{--ico:url(/icons/ui/calendar.svg)}
.st [data-icon="copy"]{--ico:url(/icons/ui/copy.svg)}
.st [data-icon="external"]{--ico:url(/icons/ui/external.svg)}
.st [data-icon="refresh"]{--ico:url(/icons/ui/refresh.svg)}

/* Google's mark is drawn on white in both themes, like the other brands' own colours; the inset line keeps the tile's
   edge on a white page. */
.gcal-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.gcal-logo img{display:block;width:24px;height:24px}
/* Grey (login.html's img rule) until it is connected, then in Google's own colours. */
.gcal-logo.linked img{filter:none}

/* What is said under the row lines up with the row's text, not with the logo. */
.gcal-details{padding-left:12px}
.gcal-details:empty{display:none}
.gcal-details .accounts-error{margin-top:12px}
.gcal-info{display:grid;gap:8px;margin-top:16px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap-style:pretty}
.gcal-sync[data-tone="warning"]{color:var(--warning-text)}
.gcal-info .st-note{margin-top:4px}
.gcal-info .st-actions{margin-top:8px}
.gcal-info a.st-btn{text-decoration:none}
.gcal-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.gcal-id code{min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);
  font:13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}