/* Resources pane, integration and customization pages, settings (ResourcesPane.swift, IntegrationsPane.swift, ProductPage.swift). */

/* Links that name where they go */
.rs-link { text-decoration: none; }
.rs-link:hover { text-decoration: underline; }

/* Flat steppers for the container pool size */
.rs-stepper { display: inline-flex; border: 1px solid rgba(255,255,255,0.5); }
.rs-stepper button { width: 22px; height: 20px; border: 0; background: none; color: #fff; font: 400 13px/1 var(--nf); cursor: pointer; display: grid; place-items: center; }
.rs-stepper button + button { border-left: 1px solid rgba(255,255,255,0.5); }
.rs-stepper button:active:not(:disabled) { background: var(--accent); color: #000; }
.rs-stepper button:disabled { opacity: 0.35; cursor: default; }

/* Another Mac's live screen */
.rs-screen { flex: 1; min-width: 0; height: 190px; display: flex; padding: 0; border: 1.5px solid var(--accent); background: #05121A; cursor: pointer; }

/* Credentials: adaptive cards, at least 240 pt wide */
.rs-cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.rs-cred { display: flex; flex-direction: column; gap: 7px; min-height: 108px; padding: 12px; background: #141414; border: 1px solid var(--rule); }

/* Customization page */
.rs-kind { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.rs-kind svg { width: 17px; height: 17px; }
.rs-get { padding: 14px; border: 1.5px solid var(--accent); animation: rs-drop 0.25s ease-out; }
@keyframes rs-drop { from { opacity: 0; transform: translateY(-8px); } }
.rs-target { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(255,255,255,0.7); background: none; color: #fff; font: 400 13px var(--nf); cursor: pointer; white-space: nowrap; transition: transform 0.22s cubic-bezier(.3,1.5,.5,1); }
.rs-target.on { background: var(--accent); color: #000; border-color: transparent; }
.rs-target:active:not(:disabled) { transform: perspective(600px) scale(0.965) rotate3d(1, -0.6, 0, 7deg); }
.rs-target:disabled { opacity: 0.38; cursor: default; }
.rs-target svg { width: 10px; height: 10px; }
.rs-folders { display: inline-flex; align-self: flex-start; border: 1px solid rgba(255,255,255,0.5); }
.rs-folders button { height: 26px; padding: 0 10px; border: 0; background: none; color: var(--dim); font: 400 12px var(--nf); cursor: pointer; }
.rs-folders button.on { background: #fff; color: #000; }

/* Preview */
.rs-source { margin: 0; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; user-select: text; }
.rs-meta { margin: 0; font-size: 11px; line-height: 1.4; color: var(--dim); white-space: pre-wrap; user-select: text; }
.rs-md { font-size: 13px; line-height: 1.5; user-select: text; }
.rs-md > :first-child { margin-top: 0; }
.rs-md h1, .rs-md h2, .rs-md h3 { font-weight: 600; margin: 18px 0 8px; line-height: 1.25; }
.rs-md h1 { font-size: 20px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.rs-md h2 { font-size: 17px; }
.rs-md h3 { font-size: 15px; }
.rs-md p { margin: 0 0 10px; }
.rs-md ul, .rs-md ol { margin: 0 0 10px; padding-left: 22px; }
.rs-md li { margin: 2px 0; }
.rs-md code { font-size: 12px; background: #1d1d1d; padding: 0 4px; }
.rs-md pre { margin: 0 0 10px; padding: 10px; background: #141414; font-size: 12px; white-space: pre-wrap; }