/* ============================================================================
   05 · views.css — 四个视图各自的纸上装饰 + 零散部件
   ----------------------------------------------------------------------------
   只放"某个视图才有的样子"和少量通用零件（装饰光斑、图标符号表、存储提示）。
   颜色一律走令牌，这里不出现 #hex / rgb() / hsl()。
   ========================================================================== */

/* ==========================================================================
   1. 图标符号表：藏起来但仍然可 <use>
   ========================================================================== */

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   2. 装饰性光斑：三团被阳光晒过的薄荷 / 淡金
   ========================================================================== */

.deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.deco__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.deco__blob--1 {
  top: -12vh;
  left: -8vw;
  width: 42vw;
  height: 42vw;
  background-image: radial-gradient(circle at 40% 40%, var(--c-primary-soft), transparent 68%);
  opacity: .5;
}

.deco__blob--2 {
  right: -10vw;
  bottom: -14vh;
  width: 46vw;
  height: 46vw;
  background-image: radial-gradient(circle at 55% 45%, var(--c-gold-soft), transparent 66%);
  opacity: .55;
}

.deco__blob--3 {
  top: 26vh;
  right: 18vw;
  width: 26vw;
  height: 26vw;
  background-image: radial-gradient(circle at 50% 50%, var(--c-primary-tint-2), transparent 70%);
  opacity: .35;
}

/* ==========================================================================
   3. 云端存储提示条（房间没对上 / 本地兜底时会出现）
   ========================================================================== */

.storage-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  background-color: var(--c-gold-soft);
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   4. 每个视图各自的纸上小记号
   ========================================================================== */

/* 共同日记：标题下的荧光笔是薄荷绿（默认），筛选区贴右 */
#panel-shared .view__title::after {
  background-color: var(--c-primary-soft);
}

/* 私人日记：整页偏"米纸"，标题的荧光笔换成淡金，列表卡片像夹在牛皮纸里 */
#panel-private .view__title::after {
  background-color: var(--c-gold);
}

#panel-private .list-col .entry {
  background-color: var(--c-paper-tint);
}

/* 迷你日记：卡片跟共同日记一样是白便签纸（不再改成淡薄荷底），只有标题荧光笔浅一层 */
#panel-mini .view__title::after {
  background-color: var(--c-primary-tint-2);
}

/* 互动：问题卡片留白更大，答案块像另贴上去的一小张纸（米纸 + 实线边 = 已揭开） */
#panel-quiz .view__title::after {
  background-color: var(--c-gold-soft);
}

#panel-quiz .qa__block--answer {
  background-color: var(--c-paper-tint);
  border-style: solid;
  border-color: var(--c-line-soft);
}

/* 说明文字里的 <code>：等宽、像本子上的标签 */
.view__sub code {
  padding: 1px var(--sp-1);
  color: var(--c-primary-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background-color: var(--c-primary-tint);
  border-radius: var(--r-sm);
}

/* 私密视图页头的小封印：跟标题在同一行，别被挤到换行 */
#panel-private .view__head {
  align-items: center;
}

/* ==========================================================================
   5. 窄屏：装饰光斑收一收，免得挤到文字
   ========================================================================== */

@media (max-width: 720px) {
  .deco__blob--1,
  .deco__blob--3 {
    display: none;
  }

  .storage-note {
    margin-bottom: var(--sp-5);
  }
}