/* 场景答题卡：一张纸。
   停靠时它是页面右栏里的一张便条，浮在插画上时是压在画上的一张纸——
   同一材质，只是阴影随位置变重变轻。没有折射、没有高光、没有镜面反光。 */
@layer pages {

  .scene-experience .object-popover[data-anchored],
  .supplemental-experience .object-popover[data-anchored] {
    /* 旧名沿用：卡片内部还有几处按这套变量取色，这里把它们指回纸面的墨 */
    --glass-ink: var(--ink);
    --glass-muted: var(--muted);
    --glass-control: color-mix(in srgb, var(--leaf) 9%, transparent);
    --glass-control-edge: var(--line);
    --glass-glow: transparent;

    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow:
      0 1px 2px rgb(31 42 38 / .07),
      0 18px 38px -16px rgb(31 42 38 / .45);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 没有玻璃就没有反光层和箭头 */
  .scene-experience .object-popover[data-anchored]::before,
  .supplemental-experience .object-popover[data-anchored]::before,
  .scene-experience .object-popover[data-anchored]::after,
  .supplemental-experience .object-popover[data-anchored]::after {
    display: none;
    content: none;
  }

  /* 输入框是一条可以写字的横线 */
  .object-popover[data-anchored] .popover-input,
  .object-popover[data-anchored] .answer-input {
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    box-shadow: none;
  }

  .object-popover[data-anchored] .popover-input::placeholder,
  .object-popover[data-anchored] .answer-input::placeholder { color: var(--muted); opacity: .9; }

  .object-popover[data-anchored] .popover-input:focus-visible,
  .object-popover[data-anchored] .answer-input:focus-visible {
    outline: none;
    border-bottom-color: var(--leaf);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--leaf) 22%, transparent);
  }

  /* 选项同样是印刷清单：一行一条，靠墨色发丝线分隔 */
  .object-popover[data-anchored] .phrase-option {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    box-shadow: none;
  }

  .object-popover[data-anchored] .phrase-option:hover { background: color-mix(in srgb, var(--leaf) 7%, transparent); }

  .object-popover[data-anchored] .phrase-option.correct {
    background: color-mix(in srgb, var(--leaf) 12%, transparent);
    border-color: var(--leaf);
  }

  .object-popover[data-anchored] .phrase-option.incorrect {
    background: color-mix(in srgb, var(--rust) 10%, transparent);
    border-color: var(--rust);
  }

  .object-popover[data-anchored] .popover-close,
  .object-popover[data-anchored] .btn.secondary:not(.full) {
    background: none;
    border: 0;
    color: var(--muted);
    box-shadow: none;
  }

  .object-popover[data-anchored] .popover-help button { color: var(--muted); }
  .object-popover[data-anchored] .popover-help button:hover { color: var(--leaf); }

  .object-popover[data-anchored] .popover-input,
  .object-popover[data-anchored] .btn { border-radius: var(--r-sm); }

  .object-popover[data-anchored] h2,
  .object-popover[data-anchored] label,
  .object-popover[data-anchored] .popover-answer { color: var(--ink); }

  .object-popover[data-anchored] .popover-definition,
  .object-popover[data-anchored] .phrase-translation { color: var(--muted); }

  /* 主操作是一行，不是一颗浮起的按钮 */
  .object-popover[data-anchored] > .btn.full {
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    color: var(--leaf);
  }

  .scene-experience .object-popover[data-anchored] > .btn.secondary.full { color: var(--ink); }

  @media (forced-colors: active) {
    .scene-experience .object-popover[data-anchored],
    .supplemental-experience .object-popover[data-anchored] {
      background: Canvas;
      color: CanvasText;
      border: 1px solid CanvasText;
      box-shadow: none;
    }
  }
}