/* migrated from suggest.html — remap legacy font tokens to the new design fonts (loaded by BaseLayout) */
.sg-wrap{--font-display:"Newsreader",Georgia,serif;--mono:"Spline Sans Mono",ui-monospace,monospace;--font-body:"Newsreader",Georgia,serif}

    .sg-wrap {
      max-width: 640px; margin: 0 auto; padding: 56px 24px 80px;
    }
    .sg-back {
      font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted);
      text-decoration: none; letter-spacing: .06em; display: inline-block;
      margin-bottom: 28px; transition: color .15s;
    }
    .sg-back:hover { color: var(--color-accent); }
    .sg-kicker {
      font-family: var(--font-ui, 'Hanken Grotesk', sans-serif); font-size: 12px; font-weight: 700;
      color: var(--color-accent); text-transform: uppercase; letter-spacing: .12em;
      margin-bottom: 10px;
    }
    .sg-h1 {
      font-family: var(--font-display); font-size: clamp(36px, 6vw, 52px);
      color: var(--color-text-heading); line-height: .95; letter-spacing: .01em;
      margin-bottom: 14px;
    }
    .sg-deck {
      font-family: var(--font-body); font-style: italic; font-size: 15px;
      color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 40px;
    }

    /* form */
    .sg-form { display: flex; flex-direction: column; gap: 20px; }
    .sg-field { display: flex; flex-direction: column; gap: 6px; }
    .sg-label {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .12em;
    }
    .sg-label span { color: var(--color-accent); margin-left: 2px; }
    .sg-input, .sg-select, .sg-textarea {
      background: var(--color-bg-surface); border: 1px solid var(--color-border-emphasis);
      color: var(--color-text-primary); font-family: var(--font-mono); font-size: 13px;
      padding: 11px 14px; outline: none; width: 100%;
      -webkit-appearance: none; appearance: none; transition: border-color .15s;
    }
    .sg-input:focus, .sg-select:focus, .sg-textarea:focus {
      border-color: rgba(70, 90, 46,0.35);
    }
    .sg-input::placeholder, .sg-textarea::placeholder { color: var(--color-text-muted); }
    .sg-select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5040'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
    }
    .sg-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
    .sg-hint {
      font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted);
      font-style: italic; margin-top: 4px;
    }
    .sg-submit {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0 28px; height: 46px; background: var(--color-accent); color: #f3eee2;
      font-family: var(--font-mono); font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .10em; border: none; cursor: pointer;
      transition: background .15s; width: 100%;
    }
    .sg-submit:hover { background: #374826; }
    .sg-divider {
      border: none; border-top: 1px solid var(--color-border-default); margin: 8px 0;
    }

    /* success state */
    .sg-success {
      display: none; text-align: center; padding: 48px 24px;
      border: 1px solid var(--color-border-default);
    }
    .sg-success h2 {
      font-family: var(--font-display); font-size: 40px;
      color: var(--color-text-heading); margin-bottom: 12px;
    }
    .sg-success p {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--color-text-secondary); line-height: 1.6;
    }
    .sg-success a {
      color: var(--color-accent); text-decoration: none; transition: opacity .15s;
    }
    .sg-success a:hover { opacity: .7; }