/* The API keys setup cards and the missing-key notices (pipeline item #50).
   Built from the .ds- classes in design-system.css; this file holds only the layout around
   them and uses tokens, never raw colours (tests/design-system.test.js enforces that).

   Item #59 restyled the whole API settings screen from here. api-settings.js and
   api-settings.css are not edited (both changed on main), so the page frame and the
   "Other connections" cards are brought into line by rules scoped under #api-settings-view.
   The id outweighs the legacy rules that would otherwise win, notably navigation-shell.css's
   iPad rule main>.view input:not(...) (40px), and the field-less browser defaults.
   Motion: colour, border, shadow and opacity only, 200ms or less, and none at all under
   prefers-reduced-motion. design-system.css has no motion tokens, so durations are literal. */

.api-keys-setup{display:grid;gap:var(--ds-space-4);margin-bottom:var(--ds-space-5)}
.api-keys-setup>.ds-page-header h2{font-size:var(--ds-text-lg)}
.api-keys-grid{align-items:start}
.api-keys-card{display:grid;gap:var(--ds-space-3);transition:border-color 160ms ease,box-shadow 160ms ease}
.api-keys-card:hover,.api-keys-card:focus-within{border-color:var(--ds-line-strong);box-shadow:var(--ds-shadow)}
/* This sheet loads before design-system.css, so a rule that must beat .ds-card, .ds-card-head,
   .ds-field or .ds-btn carries a second class (measured in the #59 browser check: a single class lost). */
.api-keys-card.api-keys-card-off{border-color:var(--ds-warning-line);background:var(--ds-warning-wash)}
.api-keys-card .api-keys-head{align-items:flex-start;padding-bottom:var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
.api-keys-title{display:grid;gap:var(--ds-space-1);min-width:0}
.api-keys-title .ds-eyebrow{margin:0}
.api-keys-card h3{margin:0;font-family:var(--ds-font-heading);font-size:var(--ds-text-lg);color:var(--ds-ink-strong)}
.api-keys-state{display:flex;flex-shrink:0;gap:var(--ds-space-2);align-items:center}
.api-keys-state .ds-badge{padding:var(--ds-space-1) var(--ds-space-3)}
.api-keys-state .ds-badge::before{content:"";width:8px;height:8px;border-radius:var(--ds-radius-pill);background:currentColor;opacity:.8}
.api-keys-intro{margin:0;color:var(--ds-text-muted);font-size:var(--ds-text-sm);line-height:1.5}

/* "How to set this up": closed by default, a plain summary line with a turning marker. */
.api-keys-howto{border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.api-keys-howto>summary,.api-keys-advanced>summary{display:flex;align-items:center;gap:var(--ds-space-2);min-height:var(--ds-touch);padding:0 var(--ds-space-3);border-radius:var(--ds-radius-sm);color:var(--ds-ink);font-size:var(--ds-text-sm);font-weight:700;cursor:pointer;list-style:none;transition:background-color 150ms ease,color 150ms ease}
.api-keys-howto>summary::-webkit-details-marker,.api-keys-advanced>summary::-webkit-details-marker{display:none}
.api-keys-howto>summary::before,.api-keys-advanced>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.7}
.api-keys-howto[open]>summary::before,.api-keys-advanced[open]>summary::before{transform:rotate(45deg)}
.api-keys-howto>summary:hover,.api-keys-advanced>summary:hover{background:var(--ds-surface-alt)}
.api-keys-howto>summary:focus-visible,.api-keys-advanced>summary:focus-visible{outline:0;box-shadow:var(--ds-focus)}
.api-keys-howto[open]{padding-bottom:var(--ds-space-3)}
.api-keys-howto .ds-btn-link{margin:var(--ds-space-2) var(--ds-space-3) 0}
.api-keys-steps{margin:0;padding:0 var(--ds-space-3) 0 var(--ds-space-7);display:grid;gap:var(--ds-space-2);color:var(--ds-ink);font-size:var(--ds-text-sm);line-height:1.5}
.api-keys-advanced>summary{padding:0;color:var(--ds-text-muted);font-weight:600}
.api-keys-advanced[open]{display:grid;gap:var(--ds-space-2)}

/* Fields: a visible label above, a 44px input (glove mode's --ds-touch when on), a helper line. */
.api-keys-fields{display:grid;gap:var(--ds-space-4)}
.api-keys-card .api-keys-field{gap:var(--ds-space-2)}
.api-keys-field>label{color:var(--ds-ink);font-size:var(--ds-text-sm);font-weight:700}
.api-keys-help{color:var(--ds-text-muted);font-size:var(--ds-text-xs);font-weight:500;line-height:1.4}
.api-keys-key-row{display:flex;gap:var(--ds-space-2);align-items:stretch}
.api-keys-key-row input{flex:1 1 auto;min-width:0}
.api-keys-reveal{flex:0 0 auto;min-width:76px}

/* Actions: Save and Test on the left, the switch and Disconnect on the right. */
.api-keys-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:flex-start;justify-content:space-between;padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
.api-keys-actions-main,.api-keys-actions-side{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center}
.api-keys-actions-main{flex:1 1 180px}
.api-keys-actions-side{justify-content:flex-end}
.api-keys-test-note{flex-basis:100%;color:var(--ds-text-muted);font-size:var(--ds-text-xs);line-height:1.4}
.api-keys-card .api-keys-confirming{border-color:var(--ds-warning);color:var(--ds-warning-strong);background:var(--ds-warning-soft)}
.api-keys-card .api-keys-disconnect{border-color:var(--ds-danger-line);background:var(--ds-white);color:var(--ds-danger-strong)}
.api-keys-card .api-keys-disconnect:hover:not(:disabled){background:var(--ds-danger-wash);border-color:var(--ds-danger)}
.api-keys-message{margin:0;padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-sm);background:var(--ds-surface-alt);color:var(--ds-ink-soft);font-size:var(--ds-text-sm);line-height:1.4}
.api-keys-message:empty{display:none}
.api-settings-other-heading{margin:var(--ds-space-5) 0 var(--ds-space-3);font-family:var(--ds-font-heading);font-size:var(--ds-text-lg);color:var(--ds-ink-strong)}

/* The notice a call site shows when its provider is not set up or turned off. It is
   information only: it never hides or disables a manual-entry route. */
.integration-notice:empty{display:none}
.integration-notice{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;margin:var(--ds-space-2) 0;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-warning-line);border-radius:var(--ds-radius-sm);background:var(--ds-warning-wash);color:var(--ds-warning-ink);font-size:var(--ds-text-sm)}
.integration-notice-text{margin:0}
.integration-notice-link{min-height:auto;padding:0}

/* ---- The whole API settings screen (#59), scoped so no other screen changes ---- */
#api-settings-view{font-family:var(--ds-font-body);color:var(--ds-ink)}
#api-settings-view .api-settings-header{margin-bottom:var(--ds-space-5)}
#api-settings-view .api-settings-header h1{margin:0}

/* Every field on the screen: the .ds-field look, at full touch height, above the legacy rules. */
#api-settings-view .ds-field input,
#api-settings-view .integration-fields input:not([type="checkbox"]),
#api-settings-view .api-url-row input{box-sizing:border-box;width:100%;min-height:var(--ds-touch);margin:0;padding:0 var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-white);color:var(--ds-ink);font:500 var(--ds-text-sm) var(--ds-font-body);box-shadow:none;transition:border-color 150ms ease,box-shadow 150ms ease}
#api-settings-view .ds-field input::placeholder,
#api-settings-view .integration-fields input::placeholder{color:var(--ds-text-subtle)}
#api-settings-view .ds-field input:hover,
#api-settings-view .integration-fields input:not([type="checkbox"]):hover,
#api-settings-view .api-url-row input:hover{border-color:var(--ds-text-muted)}
#api-settings-view input:focus-visible,
#api-settings-view .integration-fields input:not([type="checkbox"]):focus-visible{outline:0;border-color:var(--ds-primary);box-shadow:var(--ds-focus)}
#api-settings-view .ds-btn,
#api-settings-view .integration-actions button{transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,opacity 150ms ease}
#api-settings-view .ds-btn:focus-visible,
#api-settings-view .integration-actions button:focus-visible{outline:0;box-shadow:var(--ds-focus)}
#api-settings-view .ds-btn:disabled{opacity:.55;cursor:not-allowed}

/* The Backend connection panel. */
#api-settings-view .api-settings-grid{gap:var(--ds-space-4);align-items:start}
#api-settings-view .api-status-panel{display:grid;gap:var(--ds-space-3);padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-white);box-shadow:var(--ds-shadow-sm)}
#api-settings-view .api-status-panel .panel-head{padding:0 0 var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
#api-settings-view .api-status-panel .panel-head h3{margin:0 0 var(--ds-space-1);font:800 var(--ds-text-md)/1.3 var(--ds-font-heading);color:var(--ds-ink)}
#api-settings-view .api-status-panel .panel-head p{margin:0;color:var(--ds-text-muted);font-size:var(--ds-text-xs);line-height:1.4}
#api-settings-view .api-status-card{gap:var(--ds-space-3)}
#api-settings-view .api-url-row{grid-template-columns:1fr;gap:var(--ds-space-2)}
#api-settings-view .api-url-row .ds-btn{justify-self:start}
#api-settings-view .api-url-row .ds-field{gap:var(--ds-space-2);color:var(--ds-ink);font-size:var(--ds-text-sm)}
#api-settings-view .api-status-pill{gap:var(--ds-space-2);padding:var(--ds-space-1) var(--ds-space-3);background:var(--ds-surface-alt);color:var(--ds-text-muted);font-size:var(--ds-text-xs)}
#api-settings-view .api-status-pill::before{background:var(--ds-text-subtle)}
#api-settings-view .api-status-pill.online{background:var(--ds-success-soft);color:var(--ds-success-strong)}
#api-settings-view .api-status-pill.online::before{background:var(--ds-success)}
#api-settings-view .api-status-pill.offline{background:var(--ds-danger-soft);color:var(--ds-danger-strong)}
#api-settings-view .api-status-pill.offline::before{background:var(--ds-danger)}
#api-settings-view .integration-note{margin:0;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-text-muted);font-size:var(--ds-text-xs);line-height:1.4}

/* The "Other connections" cards drawn by api-settings.js. */
#api-settings-view .integration-list{gap:var(--ds-space-4)}
#api-settings-view .integration-card{padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-white);box-shadow:var(--ds-shadow-sm);transition:border-color 160ms ease,box-shadow 160ms ease}
#api-settings-view .integration-card:focus-within{border-color:var(--ds-line-strong);box-shadow:var(--ds-shadow)}
#api-settings-view .integration-card header{margin-bottom:var(--ds-space-4);padding-bottom:var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
#api-settings-view .integration-card h3{margin:0 0 var(--ds-space-1);font:800 var(--ds-text-md)/1.3 var(--ds-font-heading);color:var(--ds-ink)}
#api-settings-view .integration-card p{color:var(--ds-text-muted);font-size:var(--ds-text-xs)}
#api-settings-view .integration-card-off{border-style:dashed;background:var(--ds-surface)}
#api-settings-view .integration-configured,
#api-settings-view .integration-disabled{padding:var(--ds-space-1) var(--ds-space-3);font-size:var(--ds-text-xs);letter-spacing:0;text-transform:none;background:var(--ds-danger-soft);color:var(--ds-danger-strong)}
#api-settings-view .integration-configured.ready{background:var(--ds-success-soft);color:var(--ds-success-strong)}
#api-settings-view .integration-disabled{background:var(--ds-warning-soft);color:var(--ds-warning-strong)}
#api-settings-view .integration-fields{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ds-space-4);align-items:start}
#api-settings-view .integration-fields>label:not(.smtp-secure){display:grid;gap:var(--ds-space-2);margin:0;color:var(--ds-ink);font-size:var(--ds-text-sm);font-weight:700}
#api-settings-view .integration-fields .smtp-secure{align-self:end;min-height:var(--ds-touch);border-color:var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-ink);font-size:var(--ds-text-sm)}
#api-settings-view .integration-sender-preview{color:var(--ds-text-muted);font-size:var(--ds-text-xs);font-weight:500}
#api-settings-view .integration-actions{flex-wrap:wrap;gap:var(--ds-space-2);margin-top:var(--ds-space-4);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
#api-settings-view .integration-actions .primary,
#api-settings-view .integration-actions .secondary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ds-touch);padding:0 var(--ds-space-4);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-white);color:var(--ds-ink);font:700 var(--ds-text-sm)/1 var(--ds-font-body);box-shadow:none}
#api-settings-view .integration-actions .primary{border-color:var(--ds-primary);background:var(--ds-primary);color:var(--ds-white)}
#api-settings-view .integration-actions .secondary:hover{background:var(--ds-surface)}
#api-settings-view .integration-actions .primary:hover{background:var(--ds-primary-bright)}
#api-settings-view .integration-message{margin-top:var(--ds-space-3);color:var(--ds-ink-soft);font-size:var(--ds-text-sm)}

/* iPad (both orientations): one column for the side panel, full touch height everywhere. */
@media (max-width:1180px){
 #api-settings-view .api-settings-grid{grid-template-columns:1fr}
 #api-settings-view .api-url-row{grid-template-columns:1fr auto;align-items:end}
 #api-settings-view .ds-btn,
 #api-settings-view .integration-actions button,
 #api-settings-view .ds-field input,
 #api-settings-view .integration-fields input:not([type="checkbox"]),
 #api-settings-view .api-url-row input{min-height:var(--ds-touch)}
 .api-keys-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
 #api-settings-view .integration-actions{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
 .api-keys-card,.api-keys-howto>summary,.api-keys-advanced>summary,
 #api-settings-view .ds-btn,#api-settings-view .integration-actions button,
 #api-settings-view input,#api-settings-view .integration-card{transition:none}
}