/* ============================================================
   SayWork — phone mockup interior styles
   All sizes scale from --pw (phone width). Load after saywork.css.
   ============================================================ */
.sw-phone{ --u: calc(var(--pw,300px) / 100); } /* 1u = 1% of phone width */

.phone .p-body{ font-size: calc(var(--u) * 4); }
.phone .chip{ font-size: calc(var(--u) * 3.4); padding: calc(var(--u)*1.4) calc(var(--u)*2.8); gap: calc(var(--u)*1.4); border-radius:99px; }
.phone .chip svg{ width: calc(var(--u)*3.4); height: calc(var(--u)*3.4); }
.phone .state{ font-size: calc(var(--u) * 3.4); gap: calc(var(--u)*1.6); }
.phone .state .d{ width: calc(var(--u)*2); height: calc(var(--u)*2); }
.phone .m-label{ font-size: calc(var(--u)*3.6); font-weight:600; color:var(--ink-3); letter-spacing:.3px; margin: calc(var(--u)*5) calc(var(--u)*0.5) calc(var(--u)*2.4); }

/* ---- RECORD ---- */
.rec{ display:flex; flex-direction:column; height:100%; padding-bottom:0 !important; }
.rec-top{ padding: calc(var(--u)*1) calc(var(--u)*0.5) 0; }
.rec-top b{ font-size: calc(var(--u)*4.4); font-weight:700; }
.rec-hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: calc(var(--u)*1.5); }
.rec-timer{ font-size: calc(var(--u)*15); font-weight:300; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.rec-status{ font-size: calc(var(--u)*3.6); color:var(--ink-3); display:flex; align-items:center; gap: calc(var(--u)*1.8); }
.rec-status .dot{ width: calc(var(--u)*2.2); height: calc(var(--u)*2.2); border-radius:50%; background:var(--accent); animation:sw-blink 1.4s infinite; }
.rec-wave{ display:flex; align-items:center; gap: calc(var(--u)*1.2); height: calc(var(--u)*26); width:84%; margin: calc(var(--u)*3) 0; }
.rec-wave i{ flex:1; border-radius:99px; background:var(--accent); min-height: calc(var(--u)*2); }
.rec-auto{ display:flex; flex-direction:column; align-items:center; gap: calc(var(--u)*2.6); }
.rec-auto .lbl{ font-size: calc(var(--u)*3.4); color:var(--ink-3); font-weight:600; }
.rec-chips{ display:flex; flex-wrap:wrap; gap: calc(var(--u)*1.8); justify-content:center; max-width:86%; }
.rec-dock{ display:flex; align-items:center; justify-content:center; gap: calc(var(--u)*9); padding: calc(var(--u)*5) 0 calc(var(--u)*8); }
.rec-ctl .b{ width: calc(var(--u)*15); height: calc(var(--u)*15); border-radius:50%; background:var(--surface); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; color:var(--accent-deep); box-shadow:0 4px 12px -6px rgba(0,0,0,.2); }
.rec-ctl .b svg{ width:42%; height:42%; }
.rec-btn{ width: calc(var(--u)*24); height: calc(var(--u)*24); border-radius:50%; border:none; cursor:pointer; background:var(--accent);
  box-shadow:0 12px 30px -8px rgba(242,78,58,.65); display:flex; align-items:center; justify-content:center; }
.rec-btn .sq{ width:38%; height:38%; border-radius: calc(var(--u)*2.5); background:#fff; }

/* ---- LIBRARY ---- */
.lib{ padding-bottom: calc(var(--u)*16) !important; overflow:hidden; }
.p-title{ font-size: calc(var(--u)*8.2); font-weight:700; letter-spacing:-.5px; margin: calc(var(--u)*4) 0 calc(var(--u)*1); }
.m-search{ display:flex; align-items:center; gap: calc(var(--u)*2.4); background:var(--surface); border:1px solid var(--hair);
  border-radius: calc(var(--u)*3.6); padding: calc(var(--u)*3) calc(var(--u)*3.4); color:var(--ink-3); font-size: calc(var(--u)*4); margin-bottom: calc(var(--u)*3.5); }
.m-search svg{ width: calc(var(--u)*4.6); height: calc(var(--u)*4.6); flex:0 0 auto; }
.m-grouplabel{ font-size: calc(var(--u)*3.6); font-weight:600; color:var(--ink-3); letter-spacing:.3px; margin: calc(var(--u)*3) calc(var(--u)*0.5) calc(var(--u)*2.4); }
.m-note{ padding: calc(var(--u)*3.6) calc(var(--u)*4); margin-bottom: calc(var(--u)*3); }
.m-note-top{ display:flex; align-items:center; justify-content:space-between; gap: calc(var(--u)*2); margin-bottom: calc(var(--u)*2.4); }
.m-note-h{ font-size: calc(var(--u)*4.4); font-weight:600; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-note-p{ font-size: calc(var(--u)*3.7); line-height:1.4; color:var(--ink-2); margin-top: calc(var(--u)*1.2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-skel{ height: calc(var(--u)*3); border-radius:99px; background:#ECECE8; margin-top: calc(var(--u)*2); animation:sw-blink 1.4s infinite; }
.m-note-foot{ display:flex; align-items:center; gap: calc(var(--u)*2.4); margin-top: calc(var(--u)*2.6); color:var(--ink-3); font-size: calc(var(--u)*3.3); }
.m-thumb{ display:flex; align-items:flex-end; gap: calc(var(--u)*0.8); height: calc(var(--u)*4.5); }
.m-thumb i{ width: calc(var(--u)*0.8); border-radius:99px; background:var(--ink-3); opacity:.5; }

/* ---- DETAIL ---- */
.det{ padding-bottom: calc(var(--u)*5) !important; overflow:hidden; }
.m-nav{ display:flex; align-items:center; justify-content:space-between; padding: calc(var(--u)*1) 0 calc(var(--u)*2.5); }
.m-back{ display:flex; align-items:center; gap: calc(var(--u)*0.5); color:var(--accent-deep); font-size: calc(var(--u)*4.2); font-weight:500; }
.m-back svg{ width: calc(var(--u)*5); height: calc(var(--u)*5); }
.m-up{ width: calc(var(--u)*5); height: calc(var(--u)*5); color:var(--accent-deep); }
.det-chip{ }
.det-title{ font-size: calc(var(--u)*6.4); font-weight:700; letter-spacing:-.5px; line-height:1.16; margin: calc(var(--u)*2.6) 0 calc(var(--u)*1.4); }
.det-meta{ font-size: calc(var(--u)*3.5); color:var(--ink-3); }
.det-art{ overflow:hidden; }
.det-ah{ display:flex; align-items:center; gap: calc(var(--u)*3); padding: calc(var(--u)*3.6) calc(var(--u)*4); border-bottom:1px solid var(--hair); }
.det-doc{ width: calc(var(--u)*10); height: calc(var(--u)*10); border-radius: calc(var(--u)*2.6); background:var(--walk-bg); color:var(--walk-fg);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.det-doc svg{ width:52%; height:52%; }
.det-ah-t b{ font-size: calc(var(--u)*4); font-weight:600; display:block; }
.det-ah-t small{ font-size: calc(var(--u)*3.3); color:var(--ink-3); }
.det-li{ display:flex; align-items:center; gap: calc(var(--u)*3); padding: calc(var(--u)*3.2) calc(var(--u)*4); font-size: calc(var(--u)*3.9); }
.det-li + .det-li{ border-top:1px solid var(--hair); }
.det-li .box{ width: calc(var(--u)*5); height: calc(var(--u)*5); border-radius: calc(var(--u)*1.6); border:1.6px solid var(--hair-2); flex:0 0 auto; }
.det-player{ display:flex; align-items:center; gap: calc(var(--u)*3); padding: calc(var(--u)*3.4); }
.det-player .pbtn{ width: calc(var(--u)*11); height: calc(var(--u)*11); border-radius:50%; background:var(--accent-deep); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.det-player .pbtn svg{ width:46%; height:46%; }
.det-pwave{ flex:1; display:flex; align-items:center; gap: calc(var(--u)*0.9); height: calc(var(--u)*8); }
.det-pwave i{ flex:1; border-radius:99px; background:var(--ink-3); opacity:.32; min-height: calc(var(--u)*2); }
.det-pwave i.on{ background:var(--accent); opacity:1; }
.det-pt{ font-size: calc(var(--u)*3.2); color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }