/* Append after compact.css. Presentation only: JS owns hidden/aria-pressed.
   Goal markup: button > .goal-icon + span > strong + small.
   Each .goal-icon contains an inline SVG with viewBox="0 0 24 24",
   fill="none", stroke="currentColor", stroke-width="1.7",
   stroke-linecap="round", stroke-linejoin="round", aria-hidden="true".
   Smart: <path d="m12 3 7 3v5c0 5-7 10-7 10S5 16 5 11V6l7-3Z"/><path d="m9 12 2 2 4-4"/>
   All: <circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c4 5 4 13 0 18-4-5-4-13 0-18Z"/>
   Custom: <path d="M4 6h16M4 12h16M4 18h16"/><circle cx="8" cy="6" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="10" cy="18" r="2"/>
   Custom circles may use fill="var(--panel)".
   No duplicate data-* actions are required. Move the original action nodes.
*/

.compact-shell .connect-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0 18px;
  min-width: 0;
}
.compact-shell .connect-goals > button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  min-height: 100px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  text-align: left;
  line-height: 1.4;
  white-space: normal;
  transition: border-color .15s, background-color .15s;
}
.compact-shell .connect-goals > button:hover:not(:disabled) {
  border-color: var(--blue);
}
.compact-shell .connect-goals > button[aria-pressed="true"] {
  background: var(--blue-bg);
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.compact-shell .connect-goals > button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.compact-shell .connect-goals > button > span:not(.goal-icon) {
  min-width: 0;
}
.compact-shell .connect-goals strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.compact-shell .connect-goals small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}
.goal-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--panel);
  color: var(--blue);
  flex-shrink: 0;
}
.goal-icon svg { display: block; width: 21px; height: 21px; }

.connection-app-summary .app-options {grid-template-columns:1fr 1fr;margin:9px 0 0;max-width:320px}
.connection-app-summary details>summary {font-size:12px;color:var(--blue);cursor:pointer;margin-top:5px}
.connection-app-summary .app-options label>span {min-height:44px;justify-content:center;padding:10px}

.connection-app-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  min-width: 0;
}
.connection-app-summary > div { min-width: 0; flex: 1 1 180px; }
.connection-app-summary strong { display: block; font-size: 16px; }
.connection-app-summary small,
.connection-app-summary .small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.connection-app-summary .field,
.connection-app-summary .platform-picker { flex: 0 1 240px; margin: 0; min-width: 0; }
.connection-app-summary select { max-width: 100%; }

.setup-install,
.setup-import {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
}
.setup-install { background: var(--soft); margin-bottom: 12px; }
.setup-install h3,
.setup-import h3 { font-size: 15px; line-height: 1.45; margin: 0; }
.setup-install p,
.setup-import p { font-size: 13px; line-height: 1.55; margin: 7px 0 0; }
.setup-install .small { color: var(--muted); font-size: 12px; }
.install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.install-actions > .button { flex: 1 1 170px; width: auto; min-width: 0; }
.install-actions > .text-button { flex: 1 1 135px; min-width: 0; text-align: center; }
.setup-install .subtle-help { margin-top: 8px; }
/* An installation click is not proof of installation. Only the explicit
   already-installed control should set [data-install-panel].hidden=true. */
[data-install-panel][hidden] { display: none !important; }

.setup-ready,
.setup-policy-summary,
.selection-return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
  min-width: 0;
}
.setup-ready {
  padding: 3px 0 10px;
  color: var(--green);
  font-size: 13px;
}
.setup-ready > span,
.setup-ready > div { min-width: 0; flex: 1 1 170px; }
.setup-ready strong { font-size: 13px; }
.setup-ready .text-button { flex-shrink: 0; min-height: 44px; }
.setup-ready svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; }

.setup-import {
  background: var(--blue-bg);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
}
.setup-import > .button,
.setup-import > div > .button { margin-top: 12px; }
.setup-import .button-primary { min-height: 48px; font-size: 14px; }
.setup-import .key-open-button { margin-top: 10px; }
.setup-import .import-instruction,
.import-instruction {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}
.setup-import .import-instruction { margin-top: 12px; }
.import-instruction strong { font-weight: 650; }
.setup-import .small { font-size: 12px; color: var(--muted); }
.setup-import details { margin-top: 9px; }
.setup-import details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 12px; color: var(--blue); }

.setup-policy-summary {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.setup-policy-summary > div { min-width: 0; flex: 1 1 180px; }
.setup-policy-summary strong { display: block; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.setup-policy-summary small,
.setup-policy-summary .small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-policy-summary .button,
.setup-policy-summary .text-button { flex-shrink: 0; }
.setup-warning {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
  border-radius: 10px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.setup-warning p + p { margin-top: 5px; }
.setup-warning .text-button { color: inherit; }
.selection-return {
  margin: 0 0 12px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.selection-return .button,
.selection-return .text-button { min-height: 44px; font-size: 12px; }
.selection-return button { max-width: 100%; white-space: normal; }

/* Sticky only inside the visible rules pane; keep z-index below mobile nav.
   Use original data-save-policy and a separately named Save-and-connect action. */
.compact-shell [data-rules-view]:not([hidden]) > .policy-footer {
  position: sticky;
  bottom: 14px;
  z-index: 25;
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 -4px 18px #0000000d, 0 5px 18px #0000000d;
}
.compact-shell .policy-footer > p { margin: 0; font-size: 12px; line-height: 1.5; }
.compact-shell .policy-footer > p:empty { display: none; }
.policy-primary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 8px;
  min-width: 0;
}
.policy-primary-actions .button { width: 100%; min-width: 0; min-height: 46px; white-space: normal; line-height: 1.3; }
.policy-primary-actions > .text-button { min-width: 0; }
.policy-primary-actions > :only-child { grid-column: 1 / -1; }
.compact-shell .policy-footer .policy-buttons { gap: 8px; min-width: 0; }
.compact-shell [data-rules-view] .rule-check,
.compact-shell [data-rules-view] .domain-form { scroll-margin-bottom: 185px; }

/* Shortened modal: one import action, existing platform help stays readable.
   Deliberately does not hide existing installer/instructions through CSS. */
.managed-modal { width: min(510px, calc(100% - 28px)); }
.managed-modal > .muted { font-size: 13px; line-height: 1.6; }
.managed-modal > .field { margin: 13px 0; }
.managed-modal .managed-steps { margin: 15px 0; gap: 12px; padding-left: 20px; }
.managed-modal .managed-steps strong { margin-bottom: 7px; font-size: 14px; }
.managed-modal .managed-steps p { margin: 6px 0; font-size: 13px; line-height: 1.6; }
.managed-modal .managed-steps .button { margin: 8px 0; }
.managed-modal .import-instruction { margin: 10px 0; }
.managed-modal [data-managed-url] { font-size: 13px; min-width: 0; max-width: 100%; }
.managed-modal [data-copy-managed] { min-height: 48px; }
.managed-modal .notice { margin: 12px 0; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.managed-modal .notice strong,
.managed-modal .notice p { font-size: 12px; }
.managed-modal > .small { font-size: 12px; line-height: 1.6; }
.managed-modal .managed-more { margin-top: 12px; padding-top: 10px; }
.managed-modal .managed-more > summary { font-size: 13px; }
.managed-modal .managed-more p { margin: 9px 0; font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
  .compact-shell [data-rules-view]:not([hidden]) > .policy-footer {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .compact-shell [data-rules-view] .rule-check,
  .compact-shell [data-rules-view] .domain-form {
    scroll-margin-bottom: calc(240px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 600px) {
  .compact-shell .connect-goals { grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 12px 0 15px; }
  .compact-shell .connect-goals > button { min-height: 64px; padding: 10px 12px; align-items: center; gap: 10px; }
  .compact-shell .connect-goals small { margin-top: 2px; font-size: 12px; }
  .connection-app-summary { gap: 9px; padding-bottom: 12px; margin-bottom: 12px; }
  .connection-app-summary > div { flex-basis: 100%; }
  .connection-app-summary .field,
  .connection-app-summary .platform-picker { flex: 1 1 100%; max-width: none; }
  .setup-install,
  .setup-import { padding: 12px; }
  .setup-ready { gap: 4px 8px; }
  .setup-ready > span,
  .setup-ready > div { flex-basis: 155px; }
  .setup-policy-summary { padding: 9px 11px; gap: 5px 8px; }
  .setup-policy-summary > div { flex-basis: 145px; }
  .setup-policy-summary .button { padding: 8px 10px; font-size: 12px; }
  .selection-return { padding: 7px 9px; gap: 3px 8px; }
  .compact-shell [data-rules-view]:not([hidden]) > .policy-footer { padding: 10px; gap: 7px; }
  .compact-shell .policy-footer .policy-primary-actions .button { padding: 9px 10px; font-size: 12px; }
  .managed-modal { padding: 20px 16px; }
}
@media (max-width: 390px) {
  .compact-shell .connect-goals > button { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; gap: 9px; }
  .compact-shell .connect-goals strong { font-size: 13px; }
  .compact-shell .connect-goals small { font-size: 11px; }
  .goal-icon { width: 30px; height: 30px; }
  .install-actions { gap: 5px; }
  .install-actions > .button,
  .install-actions > .text-button { flex-basis: 100%; }
  .setup-install h3,
  .setup-import h3 { font-size: 14px; }
  .setup-install p,
  .setup-import .import-instruction { font-size: 12px; }
  .compact-shell .policy-footer .policy-primary-actions { gap: 6px; }
  .compact-shell .policy-footer .policy-primary-actions .button { padding: 8px 7px; font-size: 12px; }
  .compact-shell .policy-footer > p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .compact-shell .connect-goals > button { transition: none; }
}

.connect-goal-description{display:none}
.policy-footer-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.policy-footer-heading p{margin:0}
.compact-shell .policy-footer-heading .text-button{min-height:30px;padding:3px;font-size:12px}
.policy-primary-actions:has([data-save-connect][hidden]){grid-template-columns:1fr}
.policy-result:empty{display:none}
.compact-shell .connect-goals>button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){
  .compact-shell .connect-goals{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:7px}
  .compact-shell .connect-goals>button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:89px;padding:10px 4px;gap:6px;text-align:center}
  .compact-shell .connect-goals strong{font-size:12px;line-height:1.35}
  .compact-shell .connect-goals small{display:none}
  .connect-goal-description{display:block;font-size:12px;line-height:1.5;margin:0 0 14px}
  .connection-app-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
  .connection-app-summary .field{min-width:0}
  .connection-app-summary .field select{font-size:13px;padding:10px 8px}
  .connection-app-summary strong{font-size:14px}
  .connection-app-summary .app-options{display:flex;flex-direction:column}
  .connection-app-summary .app-options strong{font-size:12px}
  .setup-ready{padding:7px 10px}
  .compact-shell .setup-ready .text-button{min-height:32px}
}