/* ============================================================
   周工作台 · 昼夜手绘
   纸 + 墨 + 硬投影。手绘感只给纸面外框 / 开关 / 今日圈，
   卡片用不规则圆角做"手抖"，避免十几张卡各挂一个 SVG 滤镜。
   ============================================================ */

:root{
  color-scheme: light;

  /* 纸 */
  --paper:#E4E2DB;
  --sheet:#EFEDE6;
  --note:#FAF8F2;
  --field:#F7F5EE;

  /* 墨 */
  --ink:#1A1A18;
  --ink-2:rgba(26,26,24,.62);
  --ink-3:rgba(26,26,24,.32);
  --line:#1A1A18;
  --shadow:rgba(26,26,24,.22);
  --shadow-soft:rgba(26,26,24,.14);

  /* 昼夜 */
  --sun:#F5C518;
  --moon:#D8D4C0;
  --sky:#5CAAD4;
  --sky-deep:#4A92BD;

  /* 时段便签（上午 / 下午 / 晚上）：夜里收敛成同一深色，只靠点区分 */
  --am:#FAF2D6;
  --pm:#F8E8DC;
  --eve:#EAE8F4;
  --am-dot:#E0A11C;
  --pm-dot:#D07C42;
  --eve-dot:#7C74BC;
  --danger:#BE423B;

  /* 字 */
  --font-display:"ZCOOL KuaiLe","LXGW WenKai","Kaiti SC","KaiTi","STKaiti","楷体",serif;
  --font-body:"Nunito","MiSans","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-num:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;

  --r-lg:24px;
  --r-md:15px;

  /* 曲线：起步回拉、收尾过冲 */
  --ease-knob:cubic-bezier(0,-.02,.35,1.17);
  --ease-scene:cubic-bezier(0,-.02,.4,1.25);
}

[data-theme="dark"]{
  color-scheme: dark;
  --paper:#12152A;
  --sheet:#1B2040;
  --note:#262C4E;
  --field:#141834;

  --ink:#EDE8D6;
  --ink-2:rgba(237,232,214,.64);
  --ink-3:rgba(237,232,214,.26);
  --line:rgba(216,212,192,.38);
  --shadow:rgba(0,0,0,.55);
  --shadow-soft:rgba(0,0,0,.4);

  /* 夜里的便签要比纸亮一层 —— 纸上的东西是浮起来的，不是挖下去的 */
  --am:#36342A;
  --pm:#39302A;
  --eve:#312F50;
  --am-dot:#F0C34A;
  --pm-dot:#EE9A6B;
  --eve-dot:#A79FE2;
  --danger:#E17A72;
}

*{box-sizing:border-box}

html,body{margin:0}

body{
  background-color:var(--paper);
  background-image:var(--bg-img);
  color:var(--ink);
  font:15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color 500ms var(--ease-scene), color 500ms var(--ease-scene);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
[data-theme="day"] body{
  --bg-img:radial-gradient(130% 70% at 50% -10%, #EDEBE3 0%, #E4E2DB 55%, #DFDCD4 100%);
}
/* 夜里不铺星：整页被纸盖住，星没地方落。只留一团月光在开关背后 */
[data-theme="dark"] body{
  --bg-img:
    radial-gradient(58% 34% at 89% 2%, rgba(216,212,192,.10) 0%, rgba(216,212,192,0) 62%),
    radial-gradient(130% 70% at 50% -10%, #1E2344 0%, #151932 45%, #10131F 100%);
}

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px dashed var(--line);outline-offset:3px}

/* ============================ 顶栏 ============================ */

.bar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 26px;
  background:var(--paper);
  border-bottom:2px dashed var(--ink-3);
  transition:background-color 500ms var(--ease-scene), border-color 500ms var(--ease-scene);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:21px;
  line-height:1;
  letter-spacing:.04em;
  color:var(--ink);
  white-space:nowrap;
}
.brand .mark{
  width:21px;height:21px;flex:none;
  fill:var(--sun);
  stroke:var(--line);
  stroke-width:1.7;
  stroke-linejoin:round;
  transform:rotate(-6deg);
}

.nav{display:flex;align-items:center;gap:8px;margin-left:auto}

/* 手绘小方块按钮：墨环 + 硬投影，按下沉 */
.ic{
  width:30px;height:30px;
  display:grid;place-items:center;
  padding-bottom:3px;
  font-size:17px;line-height:1;
  color:var(--ink);
  background:var(--note);
  border-radius:9px 11px 10px 10px;
  box-shadow:0 0 0 2px var(--line), 2px 2px 0 var(--shadow-soft);
  transition:transform 110ms ease, box-shadow 110ms ease, background-color 500ms var(--ease-scene);
}
.ic:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2px var(--line), 3px 3px 0 var(--shadow-soft)}
.ic:active{transform:translate(1px,2px);box-shadow:0 0 0 2px var(--line), 0 0 0 var(--shadow-soft)}

.wk{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:5px 12px 6px;
  border-radius:11px 12px 10px 12px;
  transition:background-color 130ms ease, box-shadow 130ms ease;
}
.wk:hover{background:var(--note);box-shadow:0 0 0 2px var(--ink-3)}
.wk-key{
  font-family:var(--font-num);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.wk-range{
  font-family:var(--font-num);
  font-size:12.5px;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

.tag{
  padding:4px 13px 5px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--ink-2);
  border-radius:999px;
  box-shadow:0 0 0 2px var(--ink-3);
  transition:box-shadow 130ms ease, color 130ms ease, background-color 130ms ease;
}
.tag:hover{color:var(--ink);box-shadow:0 0 0 2px var(--line)}
.tag.on{
  color:#1A1A18;
  background:var(--sun);
  box-shadow:0 0 0 2px var(--line), 2px 2px 0 var(--shadow-soft);
}

/* ======================= 昼夜手绘开关 =======================
   照 Uiverse 源码（Hari Bro）1:1，零 JS。
   尺寸只改 --toggle-size 一处；内部一律 em。
   ========================================================== */

.hs{
  --toggle-size:28px;
  --w:5.625em; --h:2.5em; --radius:.38em;
  --knob:2.125em; --glow:3.375em;
  display:inline-block;
  font-size:var(--toggle-size);
  margin-left:12px;
  flex:none;
}
.hs *{box-sizing:border-box;margin:0;padding:0;font-size:inherit}

.hs__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.hs__container{
  width:var(--w);height:var(--h);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  background-color:var(--sky);
  background-image:linear-gradient(to bottom,var(--sky) 0%,var(--sky-deep) 100%);
  transition:background-color 500ms var(--ease-scene);
  box-shadow:0 0 0 2.5px #1a1a1a, 3px 4px 0 2.5px rgba(26,26,26,.22);
  transform:rotate(-.7deg);
  filter:url(#sketchy);
}
.hs__container::before{
  content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
  background-image:repeating-linear-gradient(-50deg,transparent 0 7px,rgba(255,255,255,.04) 7px 8px);
}

.hs__glow{
  width:var(--glow);height:var(--glow);
  position:absolute;
  left:calc((var(--glow) - var(--h))/2 * -1);
  top:calc((var(--glow) - var(--h))/2 * -1);
  border-radius:var(--radius);
  background-color:rgba(255,255,255,.1);
  box-shadow:0 0 0 .625em rgba(255,255,255,.1), 0 0 0 1.25em rgba(255,255,255,.1);
  display:flex;
  pointer-events:none;
  transition:left 300ms var(--ease-knob);
}
.hs__glow::before{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  width:calc(var(--glow) + 1.5em);height:calc(var(--glow) + 1.5em);
  left:-.75em;top:-.75em;
  background:conic-gradient(
    transparent 0deg 8deg,rgba(245,197,24,.52) 8deg 22deg,
    transparent 22deg 53deg,rgba(245,197,24,.52) 53deg 67deg,
    transparent 67deg 98deg,rgba(245,197,24,.52) 98deg 112deg,
    transparent 112deg 143deg,rgba(245,197,24,.52) 143deg 157deg,
    transparent 157deg 188deg,rgba(245,197,24,.52) 188deg 202deg,
    transparent 202deg 233deg,rgba(245,197,24,.52) 233deg 247deg,
    transparent 247deg 278deg,rgba(245,197,24,.52) 278deg 292deg,
    transparent 292deg 323deg,rgba(245,197,24,.52) 323deg 337deg,
    transparent 337deg 360deg);
  animation:rays 14s linear infinite;
  transition:opacity 500ms var(--ease-scene);
  filter:url(#sketchy-sm);
}
@keyframes rays{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.hs__sun{
  position:relative;z-index:2;
  width:var(--knob);height:var(--knob);
  margin:auto;
  border-radius:var(--radius);
  background-color:var(--sun);
  overflow:hidden;
  box-shadow:
    .062em .062em .062em 0 rgba(254,255,239,.61) inset,
    0 -.062em .062em 0 #A1872A inset,
    .1em .13em 0 .04em #1a1a1a;
  filter:url(#sketchy-sm) drop-shadow(.062em .125em .125em rgba(0,0,0,.25));
  transition:transform 500ms var(--ease-scene);
}
.hs__sun:hover{transform:scale(1.06) rotate(4deg)}

.hs__moon{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:inherit;
  background-color:var(--moon);
  transform:translateX(100%);
  box-shadow:
    .062em .062em .062em 0 rgba(254,255,239,.61) inset,
    0 -.062em .062em 0 #969696 inset;
  transition:transform 500ms var(--ease-scene);
}
.hs__moon:hover{transform:translateX(0) rotate(8deg)}

.hs__spot{
  position:absolute;top:.75em;left:.312em;
  width:.75em;height:.75em;
  border-radius:var(--radius);
  background-color:#9B9787;
  box-shadow:0 .0312em .062em rgba(0,0,0,.25) inset;
  filter:url(#sketchy-sm);
}
.hs__spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}
.hs__spot:nth-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}

.hs__clouds{
  width:1.25em;height:1.25em;
  background-color:#F4F4F4;
  border-radius:var(--radius);
  position:absolute;bottom:-.625em;left:.312em;
  filter:url(#sketchy-sm);
  box-shadow:
    .937em .312em #F4F4F4, -.312em -.312em #BACFE0,
    1.437em .375em #F4F4F4, .5em -.125em #BACFE0,
    2.187em 0 #F4F4F4, 1.25em -.062em #BACFE0,
    2.937em .312em #F4F4F4, 2em -.312em #BACFE0,
    3.625em -.062em #F4F4F4, 2.625em 0 #BACFE0,
    4.5em -.312em #F4F4F4, 3.375em -.437em #BACFE0,
    4.625em -1.75em 0 .437em #F4F4F4, 4em -.625em #BACFE0,
    4.125em -2.125em 0 .437em #BACFE0;
  transition:bottom 500ms var(--ease-scene);
}

.hs__stars{
  position:absolute;
  color:#FFF8E1;
  top:-100%;left:.312em;
  width:2.75em;height:auto;
  transition:top 500ms var(--ease-scene), transform 500ms var(--ease-scene);
}

.hs__cluster{position:absolute;inset:0;opacity:0;transition:opacity 300ms ease}
.hs__cluster i{
  position:absolute;width:2px;height:2px;
  background:#fff;border-radius:50%;
  box-shadow:0 0 4px 1px #fff;
  animation:twinkle 1s ease-in-out infinite;
}
.hs__cluster i:nth-child(1){top:20%;left:20%}
.hs__cluster i:nth-child(2){top:30%;left:55%;animation-delay:.3s}
.hs__cluster i:nth-child(3){top:40%;left:80%;animation-delay:.6s}
.hs__cluster i:nth-child(4){top:62%;left:30%;animation-delay:.9s}
.hs__cluster i:nth-child(5){top:72%;left:65%;animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

.hs__aurora{
  position:absolute;left:0;right:0;top:0;height:20px;
  opacity:0;filter:blur(4px);
  background:linear-gradient(90deg,rgba(0,255,255,0) 0%,rgba(0,255,255,.2) 25%,
    rgba(128,0,255,.2) 50%,rgba(0,255,255,.2) 75%,rgba(0,255,255,0) 100%);
  transform:translateY(-100%);
  transition:opacity 300ms ease;
}

.hs__comets{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 300ms ease}
.hs__comets i{
  position:absolute;width:2px;height:2px;border-radius:50%;filter:blur(1px);
  background:linear-gradient(90deg,#fff 0%,transparent 90%);
}
.hs__comets i:nth-child(1){top:30%;left:-10%;animation:comet 4s linear infinite}
.hs__comets i:nth-child(2){top:52%;left:-10%;animation:comet 6s linear infinite 2s}
@keyframes comet{
  0%{transform:translate(0,0) rotate(-45deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(200px,200px) rotate(-45deg) scale(.2);opacity:0}
}

/* 夜 */
.hs__input:checked + .hs__container{
  background-color:#1B1E36;
  background-image:linear-gradient(to bottom,#1B1E36 0%,#252A4A 100%);
}
.hs__input:checked + .hs__container .hs__glow{
  left:calc(100% - ((var(--glow) - var(--h))/2 * -1) - var(--glow));
}
.hs__input:checked + .hs__container .hs__glow::before{opacity:0}
.hs__input:checked + .hs__container .hs__moon{transform:translateX(0)}
.hs__input:checked + .hs__container .hs__clouds{bottom:-4.062em}
.hs__input:checked + .hs__container .hs__stars{top:50%;transform:translateY(-50%)}
.hs__input:checked + .hs__container .hs__cluster,
.hs__input:checked + .hs__container .hs__comets{opacity:1}
.hs__input:checked + .hs__container .hs__aurora{opacity:1;animation:auroraWave 8s linear infinite}
@keyframes auroraWave{
  0%{transform:translateY(-100%) translateX(-50%)}
  100%{transform:translateY(-100%) translateX(50%)}
}
.hs__input:focus-visible + .hs__container{outline:2px dashed rgba(26,26,24,.5);outline-offset:6px}

/* ---- 紧凑档（页头用） ----
   1:1 复刻的 180×80 缩到 1/4 时，云和太阳光会先糊成一片噪点。
   所以小尺寸做降级：只留「蓝天+太阳 / 夜空+月亮+星」，
   描边 2.5px→2px 对齐旁边 30px 方钮，滤镜幅度按 0.45 倍重配（seed 不变）。 */
.hs--sm{
  --toggle-size:16px;
  margin-left:10px;
}
.hs--sm .hs__container{
  box-shadow:0 0 0 2px #1a1a1a, 2px 3px 0 2px rgba(26,26,26,.2);
  filter:url(#sketchy-c);
}
.hs--sm .hs__sun{
  filter:url(#sketchy-k) drop-shadow(.05em .1em .1em rgba(0,0,0,.22));
}
.hs--sm .hs__spot{filter:url(#sketchy-k)}
/* 光晕的几道同心环在 40px 高会显成一条竖带，去掉，让天空是干净的渐变 */
.hs--sm .hs__glow{background:transparent;box-shadow:none}
/* 云 15 层 box-shadow 在这个尺度是噪点；改成两团平涂的小云，保住"天空"这层意思 */
.hs--sm .hs__clouds{
  width:.95em;height:.95em;
  left:2.95em;
  bottom:.34em;
  background:#F4F4F4;
  box-shadow:.8em .16em #F4F4F4, .42em -.32em 0 -.06em #EDEDED;
  transition:bottom 500ms var(--ease-scene);
}
.hs--sm .hs__input:checked + .hs__container .hs__clouds{bottom:-3.6em}
.hs--sm .hs__glow::before,
.hs--sm .hs__aurora,
.hs--sm .hs__comets{display:none}
.hs--sm .hs__cluster i{width:1.5px;height:1.5px;box-shadow:0 0 3px .5px #fff}

/* ======================= 主舞台 / 周计划纸 ======================= */

.stage{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:20px 22px 34px;
}

.sheet{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  max-width:1460px;
  width:100%;
  margin:0 auto;
  padding:8px 10px 16px;
  border-radius:var(--r-lg);
}
/* 纸面外框走真滤镜：整张纸只有这一处手抖。桌面是整周那张，手机是当天那张 */
.sheet::before,
.phone-paper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:var(--r-lg);
  background:var(--sheet);
  box-shadow:0 0 0 3px var(--line), 6px 7px 0 var(--shadow);
  filter:url(#sketchy);
  transition:background-color 500ms var(--ease-scene), box-shadow 500ms var(--ease-scene);
}
/* 纸纹 */
.sheet::after,
.phone-paper::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:var(--r-lg);
  pointer-events:none;
  background-image:repeating-linear-gradient(-50deg,transparent 0 7px,var(--grain) 7px 8px);
  transition:opacity 500ms ease;
}
[data-theme="day"] .sheet::after,
[data-theme="day"] .phone-paper::after{--grain:rgba(255,255,255,.5)}
[data-theme="dark"] .sheet::after,
[data-theme="dark"] .phone-paper::after{--grain:rgba(255,255,255,.035)}

.day{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0 3px;
}

/* 列间撕口：从日期分隔线往下，一直拉到底 */
.day + .day::before{
  content:"";
  position:absolute;
  left:-5px;
  top:54px;
  bottom:4px;
  border-left:2px dashed var(--ink-3);
  pointer-events:none;
  transition:border-color 500ms ease;
}

.day-head{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:12px 8px 8px;
  margin:0 4px 4px;
  border-bottom:2px dashed var(--ink-3);
  transition:border-color 500ms ease;
}
.day-head .dow{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--ink-2);
}
.day-head .dnum{
  font-family:var(--font-num);
  font-size:12.5px;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.day-head .cnt{
  margin-left:auto;
  font-family:var(--font-num);
  font-size:11px;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* 今天：圈住日期，不是刷一片底色 */
.day.today .day-head .dow{color:var(--ink);font-weight:400}
.day.today .dnum{
  position:relative;
  color:var(--ink);
  padding:1px 5px;
}
.day.today .dnum::after{
  content:"";
  position:absolute;
  inset:-5px -3px -4px -3px;
  border:2.5px solid var(--sun);
  border-radius:52% 48% 46% 54% / 58% 52% 48% 42%;
  transform:rotate(-2.4deg);
  pointer-events:none;
}

.stack{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:8px;
  padding:8px 4px 4px;
  min-height:88px;
}

/* ============================ 日程卡 ============================ */

.card{
  position:relative;
  padding:8px 10px 9px;
  background:var(--note);
  border-radius:13px 15px 12px 14px / 14px 12px 15px 13px;
  box-shadow:0 0 0 2px var(--line), 2px 3px 0 var(--shadow-soft);
  cursor:pointer;
  transform:rotate(var(--tilt,0deg));
  transition:transform 140ms ease, box-shadow 140ms ease, background-color 500ms var(--ease-scene);
  word-break:break-word;
}
.card.am{background:var(--am)}
.card.pm{background:var(--pm)}
.card.eve{background:var(--eve)}

.card:hover{
  transform:rotate(0deg) translateY(-2px);
  box-shadow:0 0 0 2px var(--line), 4px 5px 0 var(--shadow-soft);
  z-index:3;
}
.card:active{transform:rotate(0deg) translateY(0);box-shadow:0 0 0 2px var(--line), 1px 1px 0 var(--shadow-soft)}

.card .meta{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-2);
}
.card .sdot{
  width:6px;height:6px;flex:none;
  border-radius:2px 3px 2px 3px;
  background:var(--slot-dot);
}
.card.am{--slot-dot:var(--am-dot)}
.card.pm{--slot-dot:var(--pm-dot)}
.card.eve{--slot-dot:var(--eve-dot)}

.card .title{
  margin:4px 0 0;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  text-wrap:pretty;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.card .note{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-2);
  text-wrap:pretty;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.acts{
  position:absolute;
  top:4px;
  right:5px;
  display:flex;
  gap:1px;
  opacity:0;
  transition:opacity 130ms ease;
}
.card:hover .acts, .card:focus-within .acts{opacity:1}
.acts button{
  width:18px;height:18px;
  display:grid;place-items:center;
  font-size:11px;line-height:1;
  color:var(--ink-3);
  background:transparent;
  border-radius:6px 7px 6px 7px;
  transition:background-color 120ms ease, color 120ms ease;
}
.acts button:hover{background:var(--sun);color:#1A1A18}
.acts button[disabled]{opacity:.4;cursor:default}
.acts button[disabled]:hover{background:transparent;color:var(--ink-3)}

/* 空态 + 添加 */
/* 空态只是一句话，不画框 —— 再画一个虚线圈就和下面的「＋」撞成两个空盒子 */
.empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0;
  padding:0 6px;
  text-align:center;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.18em;
  color:var(--ink-3);
  transition:color 150ms ease;
}
.day:hover .empty{color:var(--ink-2)}

.add{
  display:grid;
  place-items:center;
  height:32px;
  font-size:16px;
  line-height:1;
  color:var(--ink-2);
  border:2px dashed var(--ink-3);
  border-radius:10px 12px 11px 11px;
  transition:color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.day:hover .add, .stack:hover .add{color:var(--ink);border-color:var(--ink-2)}
.add:hover{
  color:#1A1A18;
  background:var(--sun);
  border-color:var(--line);
}

/* ============================ 手机视图 ============================ */
/* 手机不是把七列竖着堆起来，而是「周条 + 当天那张纸」：
   周条负责选天 / 翻周，下面一张纸只装当天的事 —— 和桌面同一张纸，只是摊开的是一天。 */

.phone{display:none;width:100%;max-width:560px;margin:0 auto}

/* --- 周条 --- */
.phone-week{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 0 10px;
}
.phone-week .ic{width:26px;height:26px;font-size:15px;flex:none}
.strip{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;
  flex:1;
  min-width:0;
}
.chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 0 5px;
  border-radius:9px 11px 10px 10px;
  color:var(--ink-2);
  font-size:11.5px;
  letter-spacing:.04em;
  transition:background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.chip b{
  font-family:var(--font-num);
  font-size:13.5px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.chip:hover{background:var(--note);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.chip.today b{
  padding:0 3px;
  box-shadow:inset 0 0 0 1.5px var(--sun);
  border-radius:50% 48% 52% 50% / 52% 50% 48% 50%;
}
.chip.on{
  background:var(--sun);
  color:#1A1A18;
  box-shadow:0 0 0 2px var(--line), 2px 2px 0 var(--shadow-soft);
}
.chip.on b{color:#1A1A18;box-shadow:none;padding:0}

/* --- 当天那张纸 --- */
.phone-paper{
  position:relative;
  isolation:isolate;
  padding:11px 12px 13px;
  border-radius:var(--r-lg);
}

.phone-day{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:1px 3px 9px;
  margin-bottom:5px;
  border-bottom:2px dashed var(--ink-3);
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:.06em;
}
.phone-day small{
  font-family:var(--font-num);
  font-size:13px;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.phone-day .back{
  margin-left:auto;
  align-self:center;
  padding-bottom:1px;
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-2);
  border-bottom:1.5px dashed var(--ink-3);
}
.phone-day .back:hover{color:var(--ink);border-color:var(--line)}

.phone-list{display:flex;flex-direction:column;gap:8px}
.phone-list .slot-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:11px 3px 1px;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-2);
}
.phone-list .slot-head::before{
  content:"";
  width:7px;height:7px;
  border-radius:2px 3px 2px 3px;
  background:var(--slot,var(--ink-3));
}
.phone-list .slot-head[data-slot="am"]{--slot:var(--am-dot)}
.phone-list .slot-head[data-slot="pm"]{--slot:var(--pm-dot)}
.phone-list .slot-head[data-slot="eve"]{--slot:var(--eve-dot)}
.phone-list .slot-head::after{
  content:"";
  flex:1;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 5px,transparent 5px 9px);
}

/* ============================ 编辑弹层 ============================ */

.editor{
  padding:0;
  border:0;
  width:min(392px, calc(100vw - 32px));
  color:var(--ink);
  background:var(--note);
  border-radius:18px 20px 17px 19px / 19px 17px 20px 18px;
  box-shadow:0 0 0 3px var(--line), 8px 9px 0 var(--shadow);
}
.editor::backdrop{background:rgba(26,26,24,.34)}
[data-theme="dark"] .editor::backdrop{background:rgba(4,6,14,.66)}

.editor form{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 16px;
}

.ed-date{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 2px;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:.05em;
}
.ed-date span{
  font-family:var(--font-num);
  font-size:12.5px;
  color:var(--ink-2);
  letter-spacing:.02em;
}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;pointer-events:none}
.seg span{
  display:block;
  text-align:center;
  padding:7px 0 8px;
  font-size:13.5px;
  letter-spacing:.04em;
  color:var(--ink-2);
  border-radius:10px 12px 11px 11px;
  box-shadow:inset 0 0 0 2px var(--ink-3);
  transition:background-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.seg label:hover span{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-2)}
.seg input:checked + span{
  color:#1A1A18;
  background:var(--sun);
  font-weight:700;
  box-shadow:0 0 0 2px var(--line), 2px 2px 0 var(--shadow-soft);
}
.seg input:focus-visible + span{outline:2px dashed var(--line);outline-offset:3px}

.in{
  width:100%;
  padding:9px 11px;
  font:inherit;
  font-size:14.5px;
  color:var(--ink);
  background:var(--field);
  border:0;
  border-radius:11px 13px 12px 12px;
  box-shadow:inset 0 0 0 2px var(--line);
  outline:none;
  resize:none;
  transition:box-shadow 140ms ease, background-color 500ms var(--ease-scene);
}
.in::placeholder{color:var(--ink-2)}
.in:focus{box-shadow:inset 0 0 0 2px var(--line), 0 0 0 4px rgba(245,197,24,.35)}

.err{margin:0;font-size:12.5px;color:var(--danger)}

.foot{display:flex;align-items:center;gap:8px;margin-top:4px}
.spacer{flex:1}

.btn{
  padding:7px 15px 8px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  background:var(--note);
  border-radius:11px 13px 12px 12px;
  box-shadow:0 0 0 2px var(--line), 3px 3px 0 var(--shadow-soft);
  transition:transform 110ms ease, box-shadow 110ms ease, background-color 130ms ease;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2px var(--line), 4px 4px 0 var(--shadow-soft)}
.btn:active{transform:translate(1px,2px);box-shadow:0 0 0 2px var(--line), 0 0 0 var(--shadow-soft)}
.btn.primary{background:var(--sun);color:#1A1A18}
.btn.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--ink-3)}
.btn.ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-2)}
.btn.danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 2px var(--danger)}
.btn.danger:hover{background:var(--danger);color:var(--note)}
.btn.wide{width:100%;margin-top:6px;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--ink-3)}
.btn.wide:hover{color:#1A1A18;background:var(--sun);box-shadow:0 0 0 2px var(--line), 2px 2px 0 var(--shadow-soft)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* ============================ 轻提示 ============================ */

.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translate(-50%,10px);
  z-index:90;
  padding:8px 16px 9px;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--paper);
  background:var(--ink);
  border-radius:11px 13px 12px 12px;
  box-shadow:0 0 0 2px var(--line), 4px 5px 0 var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity 200ms ease, transform 200ms ease;
}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* ============================ 响应式 ============================ */

@media (max-width:1180px){
  /* 只在七列窄栏里收备注；手机是宽栏，备注要留着 */
  .sheet .card .note{display:none}
  .day-head{flex-wrap:wrap;gap:2px 6px}
}

@media (max-width:900px){
  .bar{padding:9px 14px;gap:8px}
  .brand{font-size:18px}
  .brand .mark{width:18px;height:18px}
  .nav{gap:5px}
  .wk{padding:4px 6px;gap:0}
  .wk-key{font-size:14px}
  .wk-range{display:none}
  .tag{display:none}
  /* 周导航交给下面的周条，页头只留品牌 + 开关 */
  .nav{display:none}
  .hs--sm{--toggle-size:15px;margin-left:auto}

  .stage{padding:12px 12px 26px}
  .sheet{display:none}
  .phone{display:flex;flex-direction:column;flex:1;min-height:0}
  .phone-paper{flex:1}

  /* 卡片：文字在左，排序钮收成右侧一条竖列，用虚线隔开 */
  .card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:48px;
    padding:9px 44px 10px 11px;
    transform:none;
  }
  .card .meta{display:none}
  .card.solo{padding-right:12px}
  .card .title{font-size:15.5px;-webkit-line-clamp:2}
  .card .note{
    display:-webkit-box;
    font-size:12.5px;
    -webkit-line-clamp:2;
  }
  .acts{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    flex-direction:column;
    gap:4px;
    padding:0 6px 0 7px;
    border-left:2px dashed var(--ink-3);
    opacity:1;
  }
  .acts button{
    width:24px;height:24px;
    font-size:13px;
    color:var(--ink-2);
    background:transparent;
    box-shadow:none;
  }
  .acts button:active{background:var(--sun);color:#1A1A18}
  .add{opacity:1}
}

/* 窄屏：开关单独占右上，周导航落到第二行 —— 不去挤压任何一边 */
@media (max-width:620px){
  .bar{flex-wrap:wrap;row-gap:6px;padding:9px 14px 7px}
  .brand{order:1}
  .hs{order:2;margin-left:auto}
  .nav{order:3;width:100%;margin-left:0;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .hs *, .sheet, .card, .btn, .ic{
    animation:none!important;
  }
  .hs__container, .hs__glow, .hs__sun, .hs__moon, .hs__clouds, .hs__stars,
  .hs__glow::before, .hs__aurora, .hs__cluster, .hs__comets{
    transition-duration:160ms!important;
    animation-duration:160ms!important;
  }
  .card, .btn, .ic, .add{transition-duration:160ms!important}
}

/* ============================ 等待反馈 ============================
   一个来回可能要一两秒（跨境链路尤甚），没这层反馈就只剩「点了没反应」。
   进度线走 body::before，内容压暗走 body.busy —— 都不新增 DOM 节点，
   这样渲染结果的比对（scripts/smoke.sh）不受影响。 */

body::before{
  content:"";
  position:fixed;
  top:0;left:0;
  height:3px;width:0;
  z-index:99;
  background:var(--sun);
  opacity:0;
  pointer-events:none;
  transition:width .3s ease, opacity .2s ease;
}
body.busy::before{opacity:1;width:72%}

.stage{transition:opacity .15s ease}
body.busy .stage{opacity:.5;pointer-events:none}