/* ===== What Did You Want To Be ===== */
/* Dark skin. Cormorant Garamond + Jost. Sage accent.
   The default .thing-shell has a slate background; we keep that and flip
   text colour to off-white so the page reads dark-on-light reversed.
   Layout is viewport-locked: shell is a 100vh flex column, marks dock to
   the bottom of the wrap via margin-top: auto. When the result renders
   the wrap grows past the viewport and the body scrolls normally. */

/* Paint the page slate so there's no bright strip in the iOS safe area
   or under the dynamic browser chrome when the shell is exactly 100vh.
   overscroll-behavior locks the bounce on mobile until content actually
   overflows — feels still on first load, scrolls normally once a result
   renders and the wrap grows past the viewport. */
html, body {
  background:          var(--slate);
  overscroll-behavior: none;
}

.thing-shell {
  background:      var(--slate);
  color:           var(--off-white);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
}

.thing-shell .thing-stage {
  flex:            1 1 auto;
  display:         flex;
  flex-direction:  column;
}

/* ----- Wrap + header ----- */

.wdywb-wrap {
  flex:            1 1 auto;
  display:         flex;
  flex-direction:  column;
  width:           100%;
  max-width:       600px;
  margin:          0 auto;
  padding:         40px 24px 24px;
  box-sizing:      border-box;
  position:        relative;
}

.wdywb-header {
  text-align:    center;
  margin-bottom: 40px;
}

.wdywb-title {
  font-family:    var(--serif);
  font-size:      32px;
  font-weight:    700;
  color:          var(--off-white);
  letter-spacing: -0.02em;
  margin:         0;
  line-height:    1.1;
}

/* ----- Input area ----- */

.wdywb-input-area {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.wdywb-textarea {
  width:        100%;
  font-family:  var(--sans);
  font-size:    16px;
  font-weight:  300;
  color:        var(--off-white);
  background:   rgba(255, 255, 255, 0.04);
  border:       0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding:      16px 18px;
  resize:       vertical;
  line-height:  1.6;
  outline:      none;
  transition:   border-color 0.15s;
  display:      block;
  box-sizing:   border-box;
  min-height:   72px;
}

.wdywb-textarea:focus { border-color: var(--sage); }

.wdywb-textarea::placeholder {
  color:      rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* ----- Disclosure ----- */

.wdywb-disclosure { margin: 0; }

.wdywb-disclosure-toggle {
  font-family:           var(--sans);
  font-size:             12px;
  font-weight:           300;
  color:                 rgba(255, 255, 255, 0.55);
  background:            none;
  border:                none;
  padding:               0;
  cursor:                pointer;
  text-decoration:       underline;
  text-underline-offset: 2px;
  display:               flex;
  align-items:           center;
  gap:                   4px;
  transition:            color 0.15s;
}

.wdywb-disclosure-toggle:hover { color: var(--off-white); }

.wdywb-disclosure-toggle::after {
  content:    '\25BE';
  font-size:  9px;
  transition: transform 0.2s;
}

.wdywb-disclosure-toggle[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}

.wdywb-disclosure-panel {
  margin-top:    10px;
  padding:       12px 14px;
  background:    rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  border:        0.5px solid rgba(255, 255, 255, 0.1);
}

.wdywb-disclosure-text {
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin:      0;
}

/* ----- Submit ----- */

.wdywb-submit {
  font-family:   var(--sans);
  font-size:     14px;
  font-weight:   500;
  background:    var(--sage);
  color:         var(--white);
  border:        none;
  border-radius: 4px;
  padding:       12px 32px;
  cursor:        pointer;
  transition:    opacity 0.15s;
  align-self:    flex-start;
}

.wdywb-submit:hover    { opacity: 0.85; }
.wdywb-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- Loading ----- */

.wdywb-loading {
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding:         64px 0;
}

.wdywb-loading-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--sage);
  animation:     wdywb-pulse 1.2s ease-in-out infinite;
}

@keyframes wdywb-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* ----- Response ----- */

.wdywb-result { margin-top: 32px; }

.wdywb-response {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  margin-bottom:  32px;
}

/* Base: all response blocks share the same size.
   Differentiation comes from weight, colour, and opacity only —
   size escalation would force the eye to the ending first, which
   breaks reading sequence. */
.wdywb-response-block {
  font-family:    var(--serif);
  font-size:      20px;
  font-weight:    400;
  color:          var(--off-white);
  line-height:    1.6;
  margin:         0;
  letter-spacing: -0.005em;
}

/* Opening sentence: muted, lighter weight. Present but quiet.
   Same size as the rest. Cold landing. */
.wdywb-response-block:first-child:not(:only-child) {
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* Final sentence: heavier weight only. No size change. */
.wdywb-response-block:last-child:not(:only-child) {
  font-weight: 500;
}

.wdywb-response-rascal {
  font-family: var(--serif);
  font-size:   22px;
  font-weight: 500;
  color:       var(--sage);
  line-height: 1.4;
  margin:      0;
  text-align:  center;
  padding:     24px 0;
}

/* ----- Actions (copy) ----- */

.wdywb-actions { margin-bottom: 28px; }

.wdywb-copy {
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   400;
  background:    transparent;
  color:         var(--off-white);
  border:        0.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  padding:       8px 20px;
  cursor:        pointer;
  transition:    all 0.15s;
  letter-spacing: 0.01em;
}

.wdywb-copy:hover {
  border-color: var(--sage);
  color:        var(--sage);
}

.wdywb-copy--done {
  border-color: var(--sage);
  color:        var(--sage);
}

/* ----- Passive invite ----- */

.wdywb-passive {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  font-style:     italic;
  color:          rgba(255, 255, 255, 0.55);
  background:     none;
  border:         none;
  padding:        0;
  cursor:         pointer;
  display:        block;
  margin:         0;
  text-align:     left;
  letter-spacing: 0.005em;
  transition:     color 0.2s;
}

.wdywb-passive:hover { color: rgba(255, 255, 255, 0.75); }

/* ----- Error ----- */

.wdywb-error { margin-top: 16px; }

.wdywb-error-text {
  font-size:  13px;
  color:      var(--rose);
  font-style: italic;
}

/* ----- Feedback widget gap + reset ----- */
/* feedback.css adds a border-top + 32px top padding to the host (it
   expects a divider rule above the widget). Our layout puts the only
   rule below the thumbs, so reset both here and use a clean 24px gap
   from the experience area. */

.wdywb-wrap #tool-feedback {
  margin-top:  24px;
  border-top:  none;
  padding:     0;
  display:     none;   /* hidden until a response renders; setState reveals it */
}

/* ----- Meta block (rule + marks + anon nudge + credit) ----- */
/* Docks to the bottom of the wrap as one unit via margin-top: auto.
   Internal spacing follows the standing layout pattern: 16px around the
   rule, 16px from marks to anon nudge, 24px from anon nudge to credit. */

.wdywb-meta {
  margin-top:     auto;
  display:        flex;
  flex-direction: column;
}

.wdywb-rule {
  border:        none;
  height:        0.5px;
  background:    rgba(255, 255, 255, 0.18);
  margin:        16px 0;
  width:         100%;
}

/* ----- Mark slots ----- */

.wdywb-marks {
  display:         flex;
  justify-content: center;
  align-items:     flex-start;     /* top-align circles regardless of name height */
  gap:             40px;
}

.wdywb-mark {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  width:          100px;   /* firm width so circles space evenly regardless of name length */
}

.wdywb-mark-circle {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  border:          1.5px dashed rgba(255, 255, 255, 0.28);
  background:      transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  transition:      all 0.3s;
}

.wdywb-mark-circle--earned {
  border:       1px solid var(--sage);
  background:   rgba(92, 138, 122, 0.15);
}

.wdywb-mark-circle img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.wdywb-mark-name {
  font-family:    var(--serif);
  font-size:      12px;
  font-weight:    500;
  font-style:     italic;
  color:          rgba(255, 255, 255, 0.72);
  text-align:     center;
  margin:         0;
  letter-spacing: 0.01em;
  line-height:    1.3;
  min-height:     14px;
}

/* Earned-for line. Tap-to-reveal: hidden until the user taps the
   wrapper, then this line appears with the canonical explanation of
   why the mark was earned. BRIEF-095 pattern. */
.wdywb-mark-earned-for {
  font-family: var(--sans);
  font-size:   11px;
  font-weight: 300;
  font-style:  italic;
  color:       rgba(255, 255, 255, 0.45);
  text-align:  center;
  margin:      4px 0 0;
  line-height: 1.4;
}

/* ----- Anonymous note ----- */
/* Sits tight to the marks as a caption. 8px is deliberately tighter
   than the 16px standing within-section rule because the note reads
   as part of the marks block, not a separate section. */

.wdywb-anon-note {
  text-align:     center;
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.42);
  margin:         8px 0 0;
  letter-spacing: 0.02em;
}

/* ----- Tim credit (always last) ----- */

.wdywb-credit {
  text-align:     center;
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.42);
  margin:         24px 0 0;
  letter-spacing: 0.02em;
}

.wdywb-credit a {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: 2px;
  transition:            color 0.15s;
}

.wdywb-credit a:hover { color: rgba(255, 255, 255, 0.75); }

/* ----- Input label (shown above response) ----- */

.wdywb-input-label {
  font-family:    var(--sans);
  font-size:      14px;
  font-weight:    600;
  color:          rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin:         0 0 20px;
  line-height:    1;
}

@media (max-width: 600px) {
  .wdywb-input-label {
    font-size: 11px;
  }
}

/* ----- Mobile ----- */

@media (max-width: 600px) {
  .wdywb-wrap        { padding: 20px; }
  .wdywb-header      { margin-bottom: 16px; }
  .wdywb-title       { font-size: 28px; }
  .wdywb-textarea    { font-size: 16px; min-height: 56px; }   /* 16px to prevent iOS zoom; 56px is one line */
  .wdywb-response-block                                { font-size: 18px; }
  .wdywb-response-block:first-child:not(:only-child)   { font-size: 18px; }
  .wdywb-response-block:last-child:not(:only-child)    { font-size: 18px; }
  .wdywb-marks       { gap: 30px; }         /* tuned so circle-to-circle gap ≈ circle-to-edge gap */
  .wdywb-mark        { width: 72px; }       /* firm column width — keeps circles evenly spaced; long names wrap inside */
  .wdywb-mark-circle { width: 56px; height: 56px; }
}

/* ----- Scrub button (inside the disclosure panel, auth users only) ----- */

.wdywb-scrub-wrap {
  margin-top:  12px;
  padding-top: 12px;
  border-top:  0.5px solid rgba(255, 255, 255, 0.1);
}

.wdywb-scrub-btn {
  font-family:           var(--sans);
  font-size:             12px;
  font-weight:           300;
  color:                 var(--rose);
  background:            none;
  border:                none;
  padding:               0;
  cursor:                pointer;
  text-decoration:       underline;
  text-underline-offset: 2px;
  transition:            opacity 0.15s;
  opacity:               0.7;
}

.wdywb-scrub-btn:hover    { opacity: 1; }
.wdywb-scrub-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.wdywb-scrub-confirm {
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.55);
  margin:      8px 0 0;
  font-style:  italic;
}