/* ActSmall · apex /share-builder/ page-specific styles.
 *
 * Layered on top of /css/main.css (which already supplies .container,
 * .hero, .section, .btn, .muted, .small, .visually-hidden). We only
 * add the form-and-output styling that doesn't fit the shared
 * vocabulary, so this file stays small and the page keeps the same
 * typography and chrome as the rest of the apex secondary pages.
 */

.sb-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.sb-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .sb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.sb-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sb-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.sb-req {
  color: var(--danger-ink);
  margin-left: 0.15rem;
}

.sb-field input[type="text"],
.sb-field input[type="number"],
.sb-field select {
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.sb-field input:focus,
.sb-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sb-field select:disabled {
  background: var(--bg);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.sb-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.sb-pin .sb-pin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}
.sb-pin label { margin: 0; display: block; }

.sb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.2rem;
}

/* Output block.
   <output> is block-level by default in modern browsers but a few
   still treat it inline; force the block layout so the URL textarea
   and action row sit on their own lines. */
.sb-output {
  display: block;
  margin: 1.2rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--safe-bg);
  border: 1px solid #b5c8ad;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.sb-output[hidden] { display: none; }
.sb-output-label { margin: 0 0 0.5rem; }

.sb-url-box {
  margin: 0 0 0.6rem;
}

.sb-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  resize: vertical;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.4;
  box-sizing: border-box;
}
.sb-url:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sb-output-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.sb-copy-status {
  font-size: 0.85rem;
  color: var(--safe-ink);
  min-height: 1.1rem;
}

.sb-output-foot {
  margin: 0.8rem 0 0;
}

/* Presets list — visually distinct from the form (cards on a page
   background, not on the form's soft fill) so the eye reads them as
   "shortcuts to the form" rather than as a continuation of it. */
.sb-presets-section h2 { margin-top: 0; }

.sb-presets {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) {
  .sb-presets { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}

.sb-preset {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 1rem 1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: 100%;
}
.sb-preset h3 {
  margin: 0;
  font-size: 1.05rem;
}
.sb-preset .sb-preset-text > p {
  margin: 0.35rem 0 0;
}
.sb-preset .sb-preset-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Tighter spacing on very narrow viewports so the form does not
   become a wall of vertical padding. */
@media (max-width: 30rem) {
  .sb-form { padding: 0.9rem 0.9rem; gap: 0.9rem; }
  .sb-row { gap: 0.8rem; }
}