/* Lens-specific additions on top of Meta's template styles.css.
   Display physics per display-guidelines: page bg #000 (transparent on the
   additive waveguide), UI surfaces #0a0a0f+, focus states scale the container. */

.lens-hint {
  font-size: 16px;
  color: #E4E6EB;
  margin: 8px 0 16px;
}

/* Action tiles on home: 88dp interactive height, three-state focus model */
.lens-tile {
  display: block;
  width: 100%;
  min-height: 88px;
  text-align: left;
  background: #131317;
  border: 1px solid #2a2c31;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 12px;
  color: #FFFFFF;
  cursor: pointer;
  transition:
    transform 475ms cubic-bezier(0.6, 0, 0.4, 1),
    border-color 300ms cubic-bezier(0.4, 0.04, 0.5, 1);
}
.lens-tile .lens-tile-title,
.lens-tile .lens-tile-sub { opacity: 0.8; transition: opacity 300ms cubic-bezier(0.4, 0.04, 0.5, 1); }
.lens-tile:focus { outline: none; border-color: #E4E6EB; transform: scale(calc(1 - 8/88)); }
.lens-tile:focus .lens-tile-title,
.lens-tile:focus .lens-tile-sub { opacity: 1; }
.lens-tile-title { display: block; font-size: 22px; font-weight: 700; }
.lens-tile-sub { display: block; font-size: 14px; color: #B0B3B8; margin-top: 4px; }

/* Text entry fields: composer opens on focus + tap */
#ask-input, #code-input {
  width: 100%;
  background: #131317;
  border: 1px solid #2a2c31;
  border-radius: 16px;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.4;
  padding: 14px 16px;
  box-sizing: border-box;
}
#ask-input:focus, #code-input:focus { outline: none; border-color: #E4E6EB; }

/* Answer cards: each paragraph is a focusable card so the D-pad walks the answer */
.answer-card {
  background: #131317;
  border: 1px solid #2a2c31;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.45;
  transition:
    transform 475ms cubic-bezier(0.6, 0, 0.4, 1),
    border-color 300ms cubic-bezier(0.4, 0.04, 0.5, 1);
}
.answer-card { opacity: 0.85; }
.answer-card:focus { outline: none; opacity: 1; border-color: #E4E6EB; transform: scale(calc(1 - 8/88)); }

/* Scrim on the scrolling answer list, per guidelines */
.list-container { position: relative; overflow-y: auto; }