/* ============================================================================
   🍡 团子的成长日记 · 二期「家长编辑工作台」样式 (css/studio.css)
   ----------------------------------------------------------------------------
   工作室组 · 配合 js/studio.js 使用（入口 #open-studio 由接线组放置）。
   纪律：
   - 颜色零硬编码：只允许 var(--…) 与 color-mix(in srgb, var(…) …%, …)；
   - 层级高于灯箱：calc(var(--z-lightbox, 2000) + 10)，旧浏览器兜底 3000；
   - 抽屉滑入动画尊重 prefers-reduced-motion；打印时整个工作室根节点 display:none；
   - 触达目标 ≥44px；hover 态一律包裹 @media (hover: hover)。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 面板打开时的背景滚动锁
   -------------------------------------------------------------------------- */
html.studio-lock {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. 根节点：遮罩容器（z-index 高于灯箱，兜底 3000）
   -------------------------------------------------------------------------- */
.studio-root {
  position: fixed;
  inset: 0;
  z-index: 3000;                                   /* 不支持 var/calc 的兜底 */
  z-index: calc(var(--z-lightbox, 2000) + 10);     /* 契约要求：高于灯箱 */
}

.studio-root:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.studio-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-primary-soft) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  animation: studio-fade var(--t-base) var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   2. 面板本体（桌面：居中大面板；≤700px：底部抽屉）
   -------------------------------------------------------------------------- */
.studio-panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86vh, 840px);
  max-height: min(86dvh, 840px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: studio-pop var(--t-med) var(--ease-spring) both;
}

.studio-panel:focus {
  outline: none; /* 焦点态由内部控件与面板边框承担 */
}

@media (max-width: 700px) {
  .studio-root:not([hidden]) {
    align-items: flex-end;
    padding: 0;
  }

  .studio-panel {
    width: 100%;
    max-width: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    max-height: 92vh;
    max-height: 92dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: studio-rise var(--t-med) var(--ease-out) both; /* 底部滑出抽屉 */
  }
}

/* --------------------------------------------------------------------------
   3. 头部：标题 + 完成并刷新
   -------------------------------------------------------------------------- */
.studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--c-primary-soft) 28%, var(--surface));
  border-bottom: 1px solid var(--line);
}

.studio-title {
  font-size: var(--fs-xl);
  font-family: var(--font-round);
  color: var(--ink-1);
}

.studio-done {
  flex: none;
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--bg);
  font-family: var(--font-round);
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

@media (hover: hover) {
  .studio-done:hover {
    background: var(--c-primary-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

/* --------------------------------------------------------------------------
   4. 页签条
   -------------------------------------------------------------------------- */
.studio-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-bottom: 1px solid var(--line);
}

.studio-tab {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.studio-tab[aria-selected="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--bg);
  box-shadow: var(--shadow-md);
}

@media (hover: hover) {
  .studio-tab:hover {
    background: color-mix(in srgb, var(--c-primary-soft) 45%, var(--surface));
    border-color: var(--c-primary-soft);
    color: var(--ink-1);
  }

  .studio-tab[aria-selected="true"]:hover {
    background: var(--c-primary-strong);
    border-color: var(--c-primary-strong);
    color: var(--bg);
  }
}

.studio-tabs::-webkit-scrollbar,
.studio-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.studio-tabs::-webkit-scrollbar-thumb,
.studio-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-primary-soft) 85%, transparent);
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   5. 内容区 / 说明文字 / 黄条警告
   -------------------------------------------------------------------------- */
.studio-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 28px;
  background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
}

.studio-desc {
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink-2);
}

.studio-warn {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--c-sun-strong) 70%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-sun) 42%, var(--surface));
  color: var(--ink-1);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.studio-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   6. 卡片 / 字段 / 输入控件（触达 ≥44px）
   -------------------------------------------------------------------------- */
.studio-card {
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.studio-h3 {
  margin: 18px 0 10px;
  font-size: var(--fs-lg);
  font-family: var(--font-round);
  color: var(--c-primary-strong);
}

.studio-h3:first-child {
  margin-top: 4px;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px;
}

.studio-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
}

.studio-field {
  display: block;
  min-width: 0;
}

.studio-lbl {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink-2);
}

.studio-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-1);
  font-size: var(--fs-md); /* ≥16px，避免 iOS 聚焦缩放 */
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.studio-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}

textarea.studio-area {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.studio-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}

.studio-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-primary-strong);
}

.studio-check-gold input {
  accent-color: var(--c-sun-strong);
}

/* 照片墙卡片：缩略图 + 字段 */
.studio-photo-top {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 520px) {
  .studio-photo-top {
    grid-template-columns: 1fr;
  }
}

.studio-thumb {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-3) 60%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.studio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-thumb-emoji {
  font-size: 46px;
  line-height: 1;
}

/* 成长数据行 */
.studio-line {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 118px 44px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.studio-line-4 {
  grid-template-columns: 64px minmax(80px, 1fr) minmax(80px, 1fr) 44px;
}

@media (max-width: 520px) {
  .studio-line {
    grid-template-columns: minmax(70px, 1fr) 96px 44px;
  }

  .studio-line-4 {
    grid-template-columns: 56px minmax(64px, 1fr) minmax(64px, 1fr) 44px;
  }
}

/* --------------------------------------------------------------------------
   7. 按钮体系：常规 / 危险 / 武装态 / 方形删除 / 新增
   -------------------------------------------------------------------------- */
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.studio-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--c-primary-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.studio-btn-danger {
  border-color: var(--c-primary-strong);
  color: var(--c-primary-strong);
}

.studio-btn.is-armed {
  background: var(--c-primary-strong);
  border-color: var(--c-primary-strong);
  color: var(--bg);
  box-shadow: var(--shadow-md);
  animation: studio-arm .9s ease-in-out infinite;
}

.studio-del-sq {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-lg);
  line-height: 1;
}

.studio-add {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 10px 16px;
  border: 2px dashed color-mix(in srgb, var(--c-primary) 55%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-primary-soft) 16%, var(--surface));
  color: var(--c-primary-strong);
  font-size: var(--fs-md);
  font-weight: 800;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

@media (hover: hover) {
  .studio-btn:hover {
    background: color-mix(in srgb, var(--c-primary-soft) 42%, var(--surface));
  }

  .studio-btn-danger:hover,
  .studio-btn.is-armed:hover {
    background: var(--c-primary-strong);
    color: var(--bg);
  }

  .studio-del-sq:hover {
    transform: translateY(-1px);
  }

  .studio-add:hover {
    background: color-mix(in srgb, var(--c-primary-soft) 38%, var(--surface));
    border-color: var(--c-primary);
  }
}

/* 备份页签：整宽按钮纵列 */
.studio-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.studio-stack .studio-btn {
  justify-content: center;
}

.studio-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. 关键帧 & 动效尊重 prefers-reduced-motion
   -------------------------------------------------------------------------- */
@keyframes studio-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes studio-pop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes studio-rise {
  from { opacity: .4; transform: translateY(48px); } /* 移动端底部抽屉滑入 */
  to   { opacity: 1; transform: none; }
}

@keyframes studio-arm {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-scrim,
  .studio-panel {
    animation: none;
  }

  .studio-btn.is-armed {
    animation: none;
  }

  .studio-done,
  .studio-tab,
  .studio-btn,
  .studio-add,
  .studio-input {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   9. 打印：整个工作室根节点不参与打印
   -------------------------------------------------------------------------- */
@media print {
  .studio-root {
    display: none !important;
  }

  html.studio-lock {
    overflow: auto;
  }
}

/* ─────────────── 10.【三期 round-21】页签切换入场过渡 ─────────────── */
.studio-pane.pane-in {
  animation: pane-in .3s var(--ease-out, cubic-bezier(.33, 1, .68, 1)) both;
}
@keyframes pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-pane.pane-in { animation: none; }
}