:root{
  --bg:#f8f7f4;--surface:#fff;--ink:#25252a;--muted:#6f7078;--line:#ece9e5;
  --blush:#f6e6e8;--butter:#f8f1d9;--mint:#e8f1e8;--lilac:#eee9f5;--rose:#8e6671;
  --shadow:0 12px 34px rgba(52,46,48,.07);--shadow-soft:0 6px 20px rgba(52,46,48,.045);
  font-family:"Tajawal","SF Pro Display","SF Pro Text",system-ui,-apple-system,sans-serif
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 100% 0,#fff 0,transparent 26rem),linear-gradient(180deg,#fbfaf8 0,#f7f5f1 100%);color:var(--ink)}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}button,input,textarea{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-shell{width:min(100%,760px);margin:auto;min-height:100dvh;padding:24px 20px 118px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.topbar>div:first-child{display:flex;flex-direction:column;gap:3px}.eyebrow{margin:0;color:var(--muted);font-size:.88rem}h1{font-size:1.55rem;line-height:1.25;margin:0;font-weight:800}.icon-btn{width:40px;height:40px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft);display:grid;place-items:center}.sync-dot{display:block;width:9px;height:9px;border-radius:50%;background:#7f9d83}.sync-dot.offline{background:#c79a61}.sync-dot.error{background:#b96e71}.view{display:flex;flex-direction:column;gap:22px}
.hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffdfc 0%,#fcf5f3 100%);border:1px solid #eee5e2;border-radius:30px;padding:24px 22px 22px;box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;left:-34px;top:-36px;width:126px;height:126px;border-radius:44% 56% 62% 38%;background:var(--blush);opacity:.9;transform:rotate(18deg)}.hero:after{content:"✦";position:absolute;left:28px;top:24px;color:#c9aeb5;font-size:1.35rem}.hero>*{position:relative;z-index:1}.hero-label{font-size:.82rem;color:var(--rose);font-weight:800;margin-bottom:11px}.hero h2{margin:0 0 7px;font-size:1.55rem;line-height:1.5;font-weight:800;max-width:90%}.reason{color:var(--muted);font-size:.9rem;margin-bottom:18px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{border-radius:999px;padding:10px 15px;border:1px solid var(--line);background:white;color:var(--ink);font-weight:700}.actions .done{background:var(--mint);border-color:transparent;color:#4e6550}.actions .help{background:var(--lilac);border-color:transparent;color:#6e627d}.actions .swap{background:transparent;color:var(--muted)}
.section{display:flex;flex-direction:column;gap:10px}.section-title{display:flex;justify-content:space-between;align-items:center;padding:0 2px}.section-title h2{margin:0;font-size:1.04rem;font-weight:800}.section-title button{border:0;background:none;color:var(--rose);font-size:.86rem;padding:6px 0}.card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:16px 17px;box-shadow:var(--shadow-soft)}.list-stack{display:flex;flex-direction:column;gap:9px}.task-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.task-title{font-weight:800;line-height:1.5;font-size:.98rem}.meta{color:var(--muted);font-size:.81rem;margin-top:4px}.inline-actions{display:flex;gap:6px}.mini-btn{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:13px;color:var(--ink)}.soft-card{background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.6),transparent 32%),linear-gradient(145deg,var(--butter),#fbf7e9)}
.rest-preview{min-height:150px;overflow:hidden;position:relative;background:radial-gradient(circle at 88% 16%,rgba(255,255,255,.9) 0 8%,transparent 9%),radial-gradient(circle at 80% 26%,#dce9dc 0 16%,transparent 17%),linear-gradient(145deg,#f8eee9,#eef2e9 68%,#f7f1df);cursor:pointer}.rest-preview:before{content:"";position:absolute;left:18px;bottom:14px;width:74px;height:58px;border-radius:10px 10px 28px 28px;background:#e7d4c5;box-shadow:30px 3px 0 -8px #dce6d8}.rest-preview:after{content:"";position:absolute;left:38px;bottom:64px;width:8px;height:36px;background:#9cae96;border-radius:999px;box-shadow:17px -6px 0 -1px #b5c1ad}.rest-preview .art{font-size:1.55rem;margin-bottom:17px;letter-spacing:.3rem}.rest-preview h3{margin:0 0 5px;font-size:1rem;max-width:72%}.rest-preview p{margin:0;color:var(--muted);font-size:.84rem;max-width:72%;line-height:1.55}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));z-index:20;width:min(720px,calc(100% - 22px));display:grid;grid-template-columns:1fr 1fr 70px 1fr 1fr;align-items:end;padding:9px 10px 8px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px) saturate(1.15);border:1px solid rgba(227,223,218,.9);border-radius:26px;box-shadow:0 16px 50px rgba(48,43,45,.11)}.nav-item{border:0;background:none;color:#8d898d;display:flex;flex-direction:column;gap:4px;align-items:center;padding:7px 2px}.nav-item span{font-size:1.12rem}.nav-item small{font-size:.7rem}.nav-item.active{color:var(--ink);font-weight:800}.add-main{width:58px;height:58px;border-radius:21px;border:0;background:#2c2c30;color:#fff;font-size:1.7rem;box-shadow:0 12px 25px rgba(37,37,42,.18);transform:translateY(-11px)}
.sheet{border:0;border-radius:30px 30px 0 0;padding:0;width:min(760px,100%);margin:auto 0 0;background:#fff;color:var(--ink);box-shadow:0 -20px 60px rgba(0,0,0,.14)}.sheet::backdrop{background:rgba(42,38,41,.28);backdrop-filter:blur(4px)}.sheet form,.sheet>div:not(.sheet-handle){padding:0 22px 26px}.sheet-handle{width:40px;height:5px;background:#ded9d5;border-radius:99px;margin:10px auto 5px}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{font-size:1.28rem;margin:18px 0}.text-btn{border:0;background:none;color:var(--rose);padding:8px}textarea{width:100%;resize:none;border:1px solid var(--line);border-radius:20px;padding:16px;background:#fbfaf7;color:var(--ink);outline:none;line-height:1.6}textarea:focus,input:focus{border-color:#cbb8bd;box-shadow:0 0 0 3px #f6eef0}.field-label{display:block;margin:20px 0 9px;font-weight:800}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;color:var(--ink)}.chip.active{background:var(--blush);border-color:transparent;color:#684f57;font-weight:800}.date-wrap{margin-top:12px}.date-wrap input{width:100%;padding:12px;border:1px solid var(--line);border-radius:15px;background:white}.hidden{display:none!important}.primary{border:0;background:#2c2c30;color:white;border-radius:17px;padding:13px 16px;font-weight:800}.secondary{border:1px solid var(--line);color:var(--ink);background:white;border-radius:17px;padding:13px 16px;font-weight:800}.wide{width:100%;margin-top:18px}.help-step{background:linear-gradient(145deg,#fbf8f5,#f7f1ed);border:1px solid var(--line);border-radius:22px;padding:19px;margin:8px 0 15px}.help-step strong{display:block;font-size:1.08rem;line-height:1.55;margin-top:7px}.help-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.page-title{margin:2px 0 3px;font-size:1.55rem;font-weight:850}.page-subtitle{margin:-2px 0 14px;color:var(--muted);font-size:.9rem}.empty{text-align:center;padding:42px 20px;color:var(--muted)}.empty-art{font-size:2.7rem;margin-bottom:10px}.empty h3{color:var(--ink);margin:0 0 5px}
.rest-hero{position:relative;overflow:hidden;min-height:265px;border-radius:30px;padding:24px;background:radial-gradient(circle at 20% 20%,#dce9df 0 16%,transparent 17%),radial-gradient(circle at 75% 25%,#f1ddd9 0 18%,transparent 19%),linear-gradient(145deg,#f7eee7,#edf2e8 70%,#f8f1df);display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);box-shadow:var(--shadow)}.rest-hero:before{content:"";position:absolute;left:36px;bottom:38px;width:110px;height:74px;border-radius:17px 17px 38px 38px;background:#ead9ca;box-shadow:40px -9px 0 -22px #d5e1d5}.rest-hero:after{content:"";position:absolute;left:60px;bottom:103px;width:10px;height:70px;background:#94a990;border-radius:999px;transform:rotate(-8deg);box-shadow:28px 12px 0 -2px #b6c3af}.rest-hero .scene{font-size:2rem;margin-bottom:auto;position:relative;z-index:2}.rest-hero h2,.rest-hero p{position:relative;z-index:2}.rest-hero h2{margin:0;font-size:1.9rem}.rest-hero p{margin:6px 0 0;color:#69676a;max-width:72%;line-height:1.55}.rest-item{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center}.rest-icon{width:54px;height:54px;border-radius:17px;background:linear-gradient(145deg,#f7efeb,#f1ebe8);display:grid;place-items:center;font-size:1.45rem}.progress{height:6px;background:#efebe8;border-radius:999px;overflow:hidden;margin-top:8px}.progress>i{display:block;height:100%;background:#99aa94;border-radius:inherit}@media (min-width:700px){.app-shell{padding:34px 28px 128px}.hero{padding:28px}.view{gap:24px}}

/* V3 — real illustrated background asset */
html,body{background:#f7f3ed}
.app-shell{position:relative}
.app-shell::before{
  content:"";
  display:block;
  height:clamp(240px,42vh,390px);
  margin:-24px -20px 18px;
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02) 48%,#f7f3ed 100%),url('/images/morning-nook.png?v=5');
  background-size:cover;
  background-position:center 42%;
  border-radius:0 0 34px 34px;
}
.topbar{
  position:absolute;top:max(24px,env(safe-area-inset-top));right:20px;left:20px;z-index:3;
  padding:15px 16px;border-radius:20px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(55,45,40,.08);border:1px solid rgba(255,255,255,.7)
}
.view{position:relative;z-index:2}
.hero:before,.hero:after{display:none}
.rest-preview{background-image:linear-gradient(90deg,rgba(255,253,250,.96) 0%,rgba(255,253,250,.78) 58%,rgba(255,253,250,.22) 100%),url('/images/morning-nook.png?v=5');background-size:cover;background-position:center 65%}
.rest-preview:before,.rest-preview:after{display:none}
.rest-hero{
  min-height:300px;
  background-image:linear-gradient(to top,rgba(250,247,242,.94) 0%,rgba(250,247,242,.42) 48%,rgba(250,247,242,.04) 100%),url('/images/morning-nook.png?v=5');
  background-size:cover;background-position:center 48%;
}
.rest-hero:before,.rest-hero:after{display:none}
.rest-hero .scene{visibility:hidden}
@media (min-width:700px){
  .app-shell::before{margin:-34px -28px 22px;height:390px}
  .topbar{right:28px;left:28px;top:34px}
}

/* V4 — distinct illustrated scenes per main space */
.app-shell::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02) 46%,#f7f3ed 100%),url('/images/morning-nook.png?v=5');
}
.app-shell[data-view="rest"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02) 48%,#f7f3ed 100%),url('/images/rest-nook.png?v=5');
  background-position:center 46%;
}
.app-shell[data-view="upcoming"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02) 48%,#f7f3ed 100%),url('/images/upcoming-desk.png?v=5');
  background-position:center 43%;
}
.app-shell[data-view="things"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02) 48%,#f7f3ed 100%),url('/images/things-shelves.png?v=5');
  background-position:center 43%;
}

/* Home preview points to the actual Rest scene, not the home artwork. */
.rest-preview{
  background-image:linear-gradient(90deg,rgba(255,253,250,.97) 0%,rgba(255,253,250,.82) 54%,rgba(255,253,250,.2) 100%),url('/images/rest-nook.png?v=5');
  background-position:center 50%;
}

/* Rest screen gets its own cozy scene; cards stay readable over a clean surface. */
.rest-hero{
  min-height:310px;
  background-image:linear-gradient(to top,rgba(250,247,242,.95) 0%,rgba(250,247,242,.38) 45%,rgba(250,247,242,.02) 100%),url('/images/rest-nook.png?v=5');
  background-position:center 50%;
}

/* Upcoming and Things: image is atmosphere, UI remains real HTML below it. */
.app-shell[data-view="upcoming"] .page-title,
.app-shell[data-view="things"] .page-title{
  margin-top:-6px;
}

/* Add/help sheets intentionally remain image-free. */
.sheet{background:#fffdfb}


/* V6 — scene-led layout: one illustration per page, closer to the approved mockup */
html,body{background:#f8f5ef}
.app-shell{
  padding:0 18px 112px;
  overflow-x:hidden;
}

/* One page scene only */
.app-shell::before{
  height:clamp(220px,34vh,300px);
  margin:0 -18px 0;
  border-radius:0 0 28px 28px;
  background-size:cover;
  background-position:center 50%;
  box-shadow:none;
}

/* Home scene composition */
.app-shell[data-view="today"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 62%,#f8f5ef 100%),url('/images/morning-nook.png?v=6');
  background-position:center 55%;
}

/* Dedicated scenes */
.app-shell[data-view="rest"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 66%,#f8f5ef 100%),url('/images/rest-nook.png?v=6');
  background-position:center 46%;
}
.app-shell[data-view="upcoming"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 66%,#f8f5ef 100%),url('/images/upcoming-desk.png?v=6');
  background-position:center 47%;
}
.app-shell[data-view="things"]::before{
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 66%,#f8f5ef 100%),url('/images/things-shelves.png?v=6');
  background-position:center 45%;
}

/* Greeting sits naturally below the home scene instead of floating over it */
.topbar{
  position:static;
  margin:4px 2px 22px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  align-items:flex-start;
}
.topbar .eyebrow{font-size:.82rem;color:#898086;margin-bottom:3px}
.topbar h1{font-size:1.7rem;line-height:1.2}
.icon-btn{
  width:34px;height:34px;border-radius:12px;
  background:#fff;border:1px solid #ece7e2;box-shadow:none
}

/* Other pages already have their own page titles; don't repeat the global greeting */
.app-shell[data-view="rest"] .topbar,
.app-shell[data-view="upcoming"] .topbar,
.app-shell[data-view="things"] .topbar{
  display:none;
}

.view{
  gap:18px;
  margin-top:0;
}

/* Home cards: lighter and less oversized */
.hero{
  border-radius:24px;
  padding:20px 19px;
  box-shadow:0 8px 22px rgba(52,46,48,.055);
}
.hero h2{font-size:1.35rem}
.card{
  border-radius:19px;
  padding:14px 15px;
  box-shadow:0 5px 18px rgba(52,46,48,.04);
}
.section{gap:9px}
.list-stack{gap:8px}

/* Home rest preview is now a small visual card, not another full-screen repeat */
.rest-preview{
  min-height:125px;
  background-image:
    linear-gradient(90deg,rgba(255,253,250,.98) 0%,rgba(255,253,250,.88) 52%,rgba(255,253,250,.16) 100%),
    url('/images/rest-nook.png?v=6');
  background-size:cover;
  background-position:center 52%;
  border-radius:21px;
}

/* REST — the page-level scene is the hero. No second image */
.rest-hero{
  min-height:0;
  padding:4px 2px 2px;
  border:0;
  border-radius:0;
  background:none !important;
  box-shadow:none;
  overflow:visible;
}
.rest-hero .scene{display:none}
.rest-hero h2{
  margin:0 0 5px;
  font-size:1.75rem;
}
.rest-hero p{
  margin:0;
  max-width:100%;
  color:#6f7078;
  font-size:.92rem;
}
.app-shell[data-view="rest"] .section:first-of-type{
  margin-top:2px;
}

/* Upcoming/Things feel attached to the scene, like a clean sheet rising beneath it */
.app-shell[data-view="upcoming"] .view,
.app-shell[data-view="things"] .view{
  margin-top:-8px;
  background:#f8f5ef;
  border-radius:26px 26px 0 0;
  padding:22px 2px 0;
}
.app-shell[data-view="upcoming"] .page-title,
.app-shell[data-view="things"] .page-title{
  margin:0 0 4px;
  font-size:1.75rem;
}
.page-subtitle{
  margin:0 0 14px;
  font-size:.9rem;
}

/* Bottom nav: slimmer and lower so it doesn't cover the content */
.bottom-nav{
  width:min(720px,calc(100% - 20px));
  bottom:max(4px,env(safe-area-inset-bottom));
  min-height:70px;
  padding:6px 8px 5px;
  border-radius:23px;
  box-shadow:0 10px 30px rgba(48,43,45,.10);
}
.nav-item{padding:5px 2px}
.nav-item small{font-size:.67rem}
.add-main{
  width:54px;height:54px;
  border-radius:19px;
  transform:translateY(-8px);
}

/* Give content enough breathing room above fixed nav */
.view{padding-bottom:18px}

@media (min-width:700px){
  .app-shell{padding:0 26px 122px}
  .app-shell::before{margin:0 -26px 0;height:330px}
  .topbar{margin:7px 2px 24px}
}


/* V7 — show the artwork instead of cropping it */
.app-shell::before{
  height:auto !important;
  margin:0 -18px 0;
  border-radius:0 0 28px 28px;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-color:#f8f5ef;
}

.app-shell[data-view="today"]::before{
  aspect-ratio:16/11;
  background-image:url('/images/morning-nook.png?v=7') !important;
}
.app-shell[data-view="rest"]::before{
  aspect-ratio:4/3;
  background-image:url('/images/rest-nook.png?v=7') !important;
}
.app-shell[data-view="upcoming"]::before{
  aspect-ratio:16/11;
  background-image:url('/images/upcoming-desk.png?v=7') !important;
}
.app-shell[data-view="things"]::before{
  aspect-ratio:4/3;
  background-image:url('/images/things-shelves.png?v=7') !important;
}

/* Keep content visually attached to the artwork */
.topbar,
.app-shell[data-view="upcoming"] .view,
.app-shell[data-view="things"] .view,
.app-shell[data-view="rest"] .view{
  position:relative;
  z-index:2;
}

@media (max-width:699px){
  .app-shell[data-view="today"]::before,
  .app-shell[data-view="upcoming"]::before{
    min-height:285px;
  }
  .app-shell[data-view="rest"]::before,
  .app-shell[data-view="things"]::before{
    min-height:320px;
  }
}

@media (min-width:700px){
  .app-shell::before{
    margin:0 -26px 0;
    max-height:430px;
  }
}


/* V8 — purpose-built horizontal scene assets */
.app-shell::before{
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:1.30 / 1 !important;
  margin:0 -18px 0 !important;
  border-radius:0 0 28px 28px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#f8f5ef !important;
}
.app-shell[data-view="today"]::before{
  background-image:url('/images/morning-header.jpg?v=57') !important;
}
.app-shell[data-view="rest"]::before{
  background-image:url('/images/rest-header.jpg?v=60') !important;
}
.app-shell[data-view="upcoming"]::before{
  background-image:url('/images/upcoming-header.jpg?v=57') !important;
}
.app-shell[data-view="things"]::before{
  background-image:url('/images/things-header.jpg?v=63') !important;
}

/* gentle visual join, without washing out the artwork */
.app-shell::after{
  content:"";
  display:block;
  height:22px;
  margin:-22px -18px 0;
  position:relative;
  z-index:1;
  background:linear-gradient(to bottom,rgba(248,245,239,0),#f8f5ef);
  pointer-events:none;
}

@media (min-width:700px){
  .app-shell::before{
    margin:0 -26px 0 !important;
    aspect-ratio:1.65 / 1 !important;
    background-size:cover !important;
  }
  .app-shell::after{margin:-22px -26px 0}
}


/* V9 — seamless full-bleed illustrated pages */
.app-shell{
  position:relative;
  padding:0 18px 112px !important;
  overflow-x:hidden;
  background:#f8f5ef;
}

/* Artwork is no longer a card/box. It bleeds edge-to-edge and fades into the page. */
.app-shell::before{
  content:"" !important;
  display:block !important;
  width:100vw !important;
  height:clamp(300px,43vh,390px) !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 calc(50% - 50vw) -68px !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#f8f5ef !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.78) 79%,rgba(0,0,0,.28) 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.78) 79%,rgba(0,0,0,.28) 91%,transparent 100%);
  position:relative;
  z-index:0;
}

/* remove the previous synthetic join strip entirely */
.app-shell::after{
  display:none !important;
  content:none !important;
}

.app-shell[data-view="today"]::before{
  background-image:url('/images/morning-header.jpg?v=57') !important;
  background-position:center 48% !important;
}
.app-shell[data-view="rest"]::before{
  background-image:url('/images/rest-header.jpg?v=60') !important;
  background-position:center 49% !important;
}
.app-shell[data-view="upcoming"]::before{
  background-image:url('/images/upcoming-header.jpg?v=57') !important;
  background-position:center 48% !important;
}
.app-shell[data-view="things"]::before{
  background-image:url('/images/things-header.jpg?v=63') !important;
  background-position:center 48% !important;
}

/* Home greeting is part of the composition, not a separate panel */
.topbar{
  position:relative !important;
  z-index:3 !important;
  margin:0 4px 18px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.topbar h1{font-size:1.75rem !important}
.topbar .eyebrow{color:#7a7276 !important}
.icon-btn{
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(235,230,225,.9) !important;
  box-shadow:0 4px 14px rgba(50,45,48,.05) !important;
}

/* Other page content rises gently into the faded artwork */
.app-shell[data-view="rest"] .view,
.app-shell[data-view="upcoming"] .view,
.app-shell[data-view="things"] .view{
  position:relative;
  z-index:3;
  margin-top:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  padding-top:0 !important;
}

.rest-hero{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 2px 8px !important;
}
.rest-hero h2,
.app-shell[data-view="upcoming"] .page-title,
.app-shell[data-view="things"] .page-title{
  font-size:1.8rem !important;
  margin-top:0 !important;
}

/* Keep cards clean so the illustration remains the visual anchor */
.card,.hero{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* The small Rest preview on home should no longer repeat the full illustration. */
.rest-preview{
  min-height:112px !important;
  background:
    linear-gradient(135deg,#f4ece7 0%,#eef2e9 58%,#f8f1df 100%) !important;
}
.rest-preview:before,
.rest-preview:after{display:none !important}

/* Bottom navigation visually lighter, still floating above content */
.bottom-nav{
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}

@media (max-width:699px){
  .app-shell::before{
    height:clamp(300px,42vh,365px) !important;
  }
}
@media (min-width:700px){
  .app-shell{padding:0 26px 122px !important}
  .app-shell::before{
    width:min(100vw,900px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:400px !important;
  }
}

/* V10 — real-use task cycle + denser mockup-inspired UI */
.quick-add{
  display:flex;align-items:center;gap:10px;margin:-3px 0 17px;
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:18px;
  padding:8px 9px 8px 14px;box-shadow:0 5px 16px rgba(52,46,48,.045)
}
.quick-add input{flex:1;border:0;background:transparent;outline:0;color:var(--ink);min-width:0;padding:5px 2px}
.quick-add input::placeholder{color:#aaa3a5}.quick-add button{border:0;width:38px;height:38px;border-radius:14px;background:#b66f79;color:#fff;font-size:1.45rem;line-height:1}
.task-row[data-open-task]{cursor:pointer}.task-row[data-open-task]:active{opacity:.72}
.hero{padding:18px 18px 17px!important;border-radius:22px!important}.hero h2{font-size:1.28rem!important;margin-bottom:4px}.hero-label{margin-bottom:7px}.reason{margin-bottom:13px!important}
.actions button{padding:8px 13px!important;font-size:.9rem}.card{padding:12px 14px!important;border-radius:18px!important}.task-title{font-size:.94rem!important}.meta{font-size:.77rem!important}.mini-btn{width:34px!important;height:34px!important;min-width:34px!important;border-radius:12px!important;padding:0!important}.section{gap:8px!important}.view{gap:16px!important}.section-title h2{font-size:1rem!important}
.danger-text{border:0;background:transparent;color:#a95e62;font-weight:700;padding:12px;margin-top:8px!important}.danger{border:0;background:#a95e62;color:white;border-radius:15px;padding:12px 18px;font-weight:800}
.confirm-dialog{border:0;background:transparent;padding:18px;width:min(100%,420px)}.confirm-dialog::backdrop{background:rgba(42,38,41,.34);backdrop-filter:blur(3px)}.confirm-card{background:#fff;border-radius:24px;padding:22px;box-shadow:0 22px 60px rgba(0,0,0,.18)}.confirm-card h2{margin:0 0 7px;font-size:1.2rem}.confirm-card p{margin:0 0 20px;color:var(--muted);line-height:1.6}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.undo-toast{position:fixed;z-index:60;left:50%;bottom:96px;transform:translate(-50%,18px);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:18px;background:#2c2c30;color:#fff;border-radius:16px;padding:12px 15px;box-shadow:0 14px 35px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.2s ease}.undo-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.undo-toast button{border:0;background:transparent;color:#f3d5da;font-weight:800;padding:2px 0}
@media(max-width:699px){.bottom-nav{min-height:64px!important}.add-main{width:50px!important;height:50px!important}.nav-item span{font-size:1rem!important}}


/* V12 — stable interaction fixes */
#syncButton,.sync-dot{display:none !important}

/* Greeting should breathe below the illustration */
.app-shell[data-view="today"] .topbar{
  margin-top:24px !important;
  margin-bottom:22px !important;
}

/* Keep Undo unmistakably visible above both nav and Safari chrome */
.undo-toast{
  bottom:150px !important;
  z-index:999 !important;
}
.undo-toast.show{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Delete confirmation stays visually separate from the edit sheet */
.confirm-dialog{
  z-index:1000;
}
.confirm-dialog::backdrop{
  background:rgba(35,31,33,.42) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}


/* V14 — task lifecycle + true bottom-sheet editor */
.hero[data-open-task],
.task-row[data-open-task]{cursor:pointer}
.hero[data-open-task]:active,
.task-row[data-open-task]:active{opacity:.78}

.completed-card{background:rgba(255,255,255,.76)!important}
.completed-title{color:#777278}
.restore-btn{
  border:0;background:#f3e7ea;color:#8b5963;
  min-width:68px;padding:9px 12px;border-radius:13px;font-weight:800
}

/* Center all sheets at the bottom instead of letting Safari pin them sideways */
dialog.sheet{
  position:fixed!important;
  inset:auto 0 0 0!important;
  margin:0 auto!important;
  width:min(100%,760px)!important;
  max-width:760px!important;
  max-height:min(82dvh,720px)!important;
  overflow:auto!important;
  border-radius:28px 28px 0 0!important;
}

/* Cleaner edit sheet */
#editDialog{background:#fffdfb!important}
#editDialog #editForm{
  padding:0 20px calc(24px + env(safe-area-inset-bottom))!important
}
#editDialog .sheet-head{
  position:sticky;top:0;z-index:2;
  background:rgba(255,253,251,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  margin:0 -20px 8px;padding:0 20px
}
#editDialog .sheet-head h2{margin:15px 0 13px!important}
#editDialog textarea{min-height:88px;background:#fff}
#editDialog .field-label{margin-top:17px}
#editDialog #saveEdit{margin-top:22px!important;min-height:48px}
#editDialog #deleteTask{margin-top:10px!important;padding:11px!important}

@media(max-width:699px){
  dialog.sheet{width:100%!important;max-width:none!important}
}
@media(min-width:700px){
  dialog.sheet{
    width:min(680px,calc(100% - 32px))!important;
    border-radius:28px 28px 0 0!important
  }
}


/* V15 — Upcoming: list + week */
.upcoming-head{display:flex;flex-direction:column;gap:13px;margin-bottom:4px}
.upcoming-head .page-subtitle{margin-bottom:0}
.view-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:4px;background:rgba(235,230,224,.72);border-radius:16px
}
.view-switch button{
  border:0;background:transparent;color:var(--muted);
  border-radius:12px;padding:9px 14px;font-weight:800
}
.view-switch button.active{
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 3px 12px rgba(60,52,56,.07)
}
#upcomingContent{display:flex;flex-direction:column;gap:22px}
.timeline-group{display:flex;flex-direction:column;gap:9px}
.timeline-label{font-size:.92rem;font-weight:850;color:var(--ink);padding:0 3px}
.timeline-note{margin:-5px 3px 2px;color:var(--muted);font-size:.78rem}
.soon-group{padding-top:4px}
.week-strip{display:flex;flex-direction:column;gap:9px}
.week-day{
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  border-radius:20px;padding:13px 14px;box-shadow:var(--shadow-soft)
}
.week-day.today{background:linear-gradient(145deg,rgba(250,241,239,.95),rgba(255,255,255,.9))}
.week-day-head{display:flex;justify-content:space-between;align-items:center}
.week-day-head>div{display:flex;align-items:baseline;gap:8px}
.week-day-head strong{font-size:.94rem}
.week-day-head span{font-size:.76rem;color:var(--muted)}
.week-day-head b{
  min-width:24px;height:24px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;background:var(--blush);color:#72555d;font-size:.72rem
}
.week-items{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.week-task{
  width:100%;border:0;background:#faf8f5;border-radius:14px;
  padding:10px 11px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;text-align:right;color:var(--ink)
}
.week-task span{font-weight:750;line-height:1.4}
.week-task small{color:var(--muted);white-space:nowrap}
.week-empty{height:8px;color:#c5bfbb;font-size:.8rem;margin-top:2px}
.soon-reminder{
  width:100%;border:1px dashed #d9cfca;background:rgba(255,255,255,.55);
  border-radius:17px;padding:12px 14px;color:#756b70;font-size:.82rem
}
@media(min-width:700px){
  .upcoming-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .view-switch{width:210px}
}


/* V16 — Things as the organizer's memory */
.things-head{margin-bottom:15px}
.things-head .page-subtitle{margin-bottom:0}
.things-search{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.88);border:1px solid var(--line);
  border-radius:17px;padding:0 13px;margin-bottom:10px;
  box-shadow:0 5px 18px rgba(60,52,56,.045)
}
.things-search>span{font-size:1.25rem;color:#9a9295;transform:rotate(-15deg)}
.things-search input{
  width:100%;border:0;outline:0;background:transparent;
  color:var(--ink);font:inherit;padding:13px 0
}
.things-search input::placeholder{color:#aaa2a5}
.things-filters{
  display:flex;gap:7px;overflow:auto;padding:1px 0 4px;margin-bottom:16px;
  scrollbar-width:none
}
.things-filters::-webkit-scrollbar{display:none}
.things-filters button{
  border:1px solid var(--line);background:rgba(255,255,255,.58);
  color:var(--muted);border-radius:999px;padding:8px 13px;
  white-space:nowrap;font-weight:750
}
.things-filters button.active{
  background:#fff;color:var(--ink);
  box-shadow:0 4px 12px rgba(60,52,56,.06)
}
.things-results{min-height:180px}
.things-empty{
  background:rgba(255,255,255,.55);border:1px dashed #d9d1cc;
  border-radius:20px;padding:28px 20px;text-align:center;
  display:flex;flex-direction:column;gap:6px
}
.things-empty strong{font-size:.94rem}
.things-empty span{font-size:.8rem;color:var(--muted);line-height:1.55}

/* V17 — Rest is leisure, not obligations */
.rest-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:17px}
.rest-head .page-subtitle{margin-bottom:0;max-width:340px}
.rest-add{border:0;background:rgba(255,255,255,.88);color:var(--ink);border-radius:14px;padding:9px 12px;font-weight:800;box-shadow:0 5px 16px rgba(60,52,56,.06);white-space:nowrap}
.rest-library{display:grid;gap:11px}
.rest-item{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:21px;padding:14px;box-shadow:var(--shadow-soft)}
.rest-item-main{display:flex;gap:11px;align-items:center}.rest-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#f3ece9;color:#8a7075;flex:none}
.rest-copy{min-width:0;flex:1}.rest-copy h3{margin:0 0 3px;font-size:.96rem}.rest-copy p{margin:0;color:var(--muted);font-size:.79rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rest-progress{display:flex;align-items:center;gap:8px;margin-top:12px}.rest-progress>div{height:5px;background:#eee8e4;border-radius:999px;overflow:hidden;flex:1}.rest-progress i{display:block;height:100%;background:#b8c9bd;border-radius:inherit}.rest-progress span{font-size:.7rem;color:var(--muted)}
.rest-actions{display:flex;gap:7px;margin-top:11px}.rest-continue{flex:1;border:0;background:#f4e8eb;color:#765861;border-radius:13px;padding:9px;font-weight:800}.rest-more{width:42px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:13px;font-weight:900}
.rest-empty{background:rgba(255,255,255,.57);border:1px dashed #d8d0ca;border-radius:22px;padding:29px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}.rest-empty span{color:var(--muted);font-size:.8rem;line-height:1.55}.rest-empty button{margin-top:7px;border:0;background:#f1e4e8;color:#765861;border-radius:14px;padding:10px 14px;font-weight:800}
.rest-dialog .sheet-form{padding:0 20px calc(24px + env(safe-area-inset-bottom))}.rest-dialog .field-label span{font-weight:500;color:var(--muted);font-size:.72rem}
.rest-progress-input{background:#faf7f4;border:1px solid var(--line);border-radius:16px;padding:12px 13px;margin-top:6px}.rest-progress-input input{width:100%}.rest-progress-input span{display:block;text-align:center;color:var(--muted);font-size:.7rem;margin-top:3px}.delete-link{width:100%;border:0;background:transparent;color:#a06065;padding:12px;margin-top:7px;font-weight:750}

/* V18 — Rest cleanup: no invented progress, compact cards and sheet */
.rest-item{padding:13px 14px;overflow:hidden}
.rest-item-main{display:grid;grid-template-columns:40px minmax(0,1fr) 38px;gap:11px;align-items:center}
.rest-copy{min-width:0;overflow:hidden}
.rest-copy h3{
  margin:0 0 4px;font-size:.96rem;line-height:1.45;
  white-space:normal;overflow-wrap:anywhere
}
.rest-copy p{
  margin:0;color:var(--muted);font-size:.78rem;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.rest-more{width:38px;height:38px;padding:0;align-self:center}
.rest-progress,.rest-actions{display:none!important}
.rest-dialog{padding:0;border:0;background:transparent}
.rest-dialog::backdrop{background:rgba(43,39,40,.28);backdrop-filter:blur(2px)}
.rest-sheet-form{
  width:min(100%,520px);margin:auto;background:#fffaf7;
  border-radius:26px 26px 0 0;padding:8px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 45px rgba(52,45,47,.12)
}
.rest-sheet-form .sheet-head{align-items:flex-start;margin:0 0 16px}
.rest-sheet-form .sheet-head h2{font-size:1.08rem;line-height:1.5;max-width:82%;margin:0}
.rest-title-input,.rest-note-input{
  width:100%;box-sizing:border-box;border:1px solid #e4ddd8;background:#fff;
  color:var(--ink);font:inherit;outline:none
}
.rest-title-input{border-radius:17px;padding:15px 14px;font-weight:700;font-size:.95rem}
.rest-note-wrap{margin-top:13px}
.rest-note-wrap label{display:block;font-size:.76rem;font-weight:750;margin:0 3px 6px}
.rest-note-wrap label span{font-weight:500;color:var(--muted);font-size:.69rem}
.rest-note-input{border-radius:14px;padding:12px 13px;font-size:.84rem}
.rest-title-input:focus,.rest-note-input:focus{border-color:#cbbec0;box-shadow:0 0 0 3px rgba(203,190,192,.14)}
.rest-save{margin-top:16px}
@media(min-width:700px){
  .rest-dialog{width:100%;max-width:none;height:100%;max-height:none}
  .rest-sheet-form{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
}

/* V19 — compact Rest rows */
.rest-library{
  display:grid;
  gap:8px;
}
.rest-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 32px;
  align-items:center;
  gap:9px;
  min-height:0;
  padding:9px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:none;
}
.rest-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  font-size:.9rem;
}
.rest-copy{
  min-width:0;
}
.rest-copy h3{
  margin:0;
  font-size:.9rem;
  line-height:1.35;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rest-copy p{
  margin:3px 0 0;
  font-size:.72rem;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rest-more{
  width:32px;
  height:32px;
  border-radius:10px;
  font-size:.8rem;
  background:transparent;
  border:0;
}

/* V20 — rule-based home intelligence */
.calm-hero{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(224,216,211,.82);
  box-shadow:none;
}
.calm-hero h2{font-size:1.04rem;margin-bottom:5px}
.calm-hero .reason{max-width:360px}

/* V21 — Waiting is a state, not a due date */
.waiting-editor{margin:14px 0}
.waiting-toggle{
  width:100%;display:flex;align-items:center;gap:11px;text-align:right;
  border:1px solid var(--line);background:#fff;border-radius:16px;padding:11px 12px;color:var(--ink)
}
.waiting-toggle-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#f2eee8;color:#82766e;flex:none}
.waiting-toggle span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.waiting-toggle strong{font-size:.86rem}.waiting-toggle small{font-size:.71rem;color:var(--muted);line-height:1.45}
.waiting-toggle.active{background:#f5f0e8;border-color:#d9cec0}
.waiting-toggle.active .waiting-toggle-icon{background:#e7ddd0}
.waiting-follow{padding:10px 10px 0}
.waiting-follow label{display:block;font-size:.74rem;font-weight:750;margin-bottom:6px}
.waiting-follow label span,.waiting-follow>small{color:var(--muted);font-weight:500}
.waiting-follow input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;font:inherit}
.waiting-follow>small{display:block;font-size:.68rem;line-height:1.45;margin-top:6px}
.waiting-pill{font-size:.67rem;font-weight:800;color:#7c6b59;background:#f2ece3;border-radius:999px;padding:5px 8px;white-space:nowrap}
.waiting-row{background:rgba(250,247,241,.72)}

/* V22 — event date vs deadline */
.date-meaning{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.date-type{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 9px;text-align:right;color:var(--ink);font:inherit}
.date-type strong{display:block;font-size:.78rem;margin-bottom:3px}.date-type small{display:block;font-size:.65rem;line-height:1.4;color:var(--muted)}
.date-type.active{background:#f3eee7;border-color:#d6c9bb}.date-type.active strong{color:#6f5d50}

/* V25 — calm information architecture */
.calm-upcoming{display:flex;flex-direction:column;gap:12px}
.collapsed-zone{margin-top:10px;border-top:1px solid rgba(95,96,104,.10);padding-top:10px}
.section-gate,.memory-gate{width:100%;border:0;background:rgba(255,255,255,.66);border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;text-align:right;color:var(--ink);font:inherit}
.section-gate>span{display:flex;flex-direction:column;gap:2px;flex:1}.section-gate strong{font-size:.82rem}.section-gate small{font-size:.68rem;color:var(--muted)}
.section-gate>b{font-size:1rem;font-weight:500;color:var(--muted)}.section-gate.static{cursor:default}
.gate-content{margin-top:9px}
.mini-preview{display:flex;flex-direction:column;margin-top:7px}
.mini-preview-row{border:0;border-bottom:1px solid rgba(95,96,104,.08);background:transparent;padding:9px 3px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;color:var(--ink);font:inherit}
.mini-preview-row span{font-size:.78rem;line-height:1.35}.mini-preview-row small{font-size:.64rem;color:var(--muted);white-space:nowrap}
.quiet-link{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.7rem;padding:8px 2px}

.things-hub{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.memory-gate{min-height:62px}.memory-icon{width:34px;height:34px;border-radius:11px;background:#f2eee8;display:grid;place-items:center;flex:none;color:#807369}
.memory-gate>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.memory-gate strong{font-size:.82rem}.memory-gate small{font-size:.66rem;color:var(--muted);line-height:1.35}
.memory-gate>b{min-width:26px;height:26px;border-radius:999px;background:#f4f0ea;display:grid;place-items:center;font-size:.68rem;color:var(--muted)}
.recent-things{margin-top:18px}.section-title-row,.things-section-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.section-title-row strong,.things-section-head strong{font-size:.78rem;flex:1}.section-title-row span,.things-section-head span{font-size:.65rem;color:var(--muted)}
.things-section-head{margin-top:12px}.back-to-hub{border:0;background:transparent;padding:3px 0 3px 8px;color:var(--muted);font:inherit;font-size:.72rem}

.rest-picks{margin-top:8px}.rest-picks-title{display:flex;flex-direction:column;gap:2px;margin:0 2px 8px}
.rest-picks-title strong{font-size:.88rem}.rest-picks-title small{font-size:.68rem;color:var(--muted)}
.rest-all-zone{margin-top:12px}
.rest-all-zone .rest-library{margin-top:8px}

/* V26 — Upcoming as a week glance, Things as a natural list, Rest favorites */
.upcoming-head.simple{margin-bottom:10px}
.week-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:7px;background:rgba(255,255,255,.62);border-radius:18px;margin-bottom:12px}
.day-pick{border:0;background:transparent;border-radius:13px;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:inherit;min-width:0}
.day-pick span{font-size:.56rem;white-space:nowrap}.day-pick strong{font-size:.8rem;color:var(--ink)}.day-pick i{width:4px;height:4px;border-radius:50%;background:transparent}
.day-pick i.has-items{background:#9a897a}.day-pick.active{background:#f0e9df}.day-pick.active span,.day-pick.active strong{color:#67594e}
.selected-day-panel{background:rgba(255,255,255,.58);border-radius:18px;padding:12px}
.selected-day-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.selected-day-title strong{font-size:.86rem}.selected-day-title span{font-size:.64rem;color:var(--muted)}
.day-clear{min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted)}
.day-clear span{font-size:1.35rem}.day-clear strong{font-size:.78rem;color:var(--ink)}.day-clear small{font-size:.66rem}
.upcoming-secondary{margin-top:11px}.soon-foot{width:100%;border:0;background:transparent;padding:12px 3px 3px;display:flex;justify-content:space-between;color:var(--muted);font:inherit;font-size:.68rem}.soon-foot b{font-weight:700}

.things-filters.compact{gap:5px;overflow-x:auto;padding-bottom:2px}.things-filters.compact button{white-space:nowrap;padding:7px 10px;font-size:.68rem}
.things-natural{margin-top:13px}.things-list-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px}
.things-list-heading strong{font-size:.78rem}.things-list-heading span{font-size:.64rem;color:var(--muted)}
.show-more-things{width:100%;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.7rem;padding:12px 4px}

.rest-item-actions{display:flex;align-items:center;gap:2px;flex:none}
.rest-favorite{border:0;background:transparent;width:31px;height:31px;border-radius:50%;font:inherit;font-size:1.05rem;color:#9c9188;display:grid;place-items:center}
.rest-favorite.active{color:#8a655f;background:#f4eae7}

/* V27 */
.calendar-open{border:0;background:rgba(255,255,255,.68);border-radius:12px;padding:8px 10px;font:inherit;font-size:.68rem;color:var(--ink)}
.soon-zone{margin-top:12px;background:rgba(255,255,255,.58);border-radius:17px;padding:12px}.soon-zone-head{display:flex;justify-content:space-between;align-items:center}.soon-zone-head>div{display:flex;flex-direction:column;gap:2px}.soon-zone-head strong{font-size:.8rem}.soon-zone-head small{font-size:.65rem;color:var(--muted)}.soon-zone-head>span{font-size:.65rem;color:var(--muted)}
.later-flat{margin-top:8px}.calendar-page-head{display:flex;align-items:flex-start;gap:10px}.calendar-back{border:0;background:transparent;font:inherit;color:var(--muted);padding:7px 0}
.month-card{margin-top:12px;background:rgba(255,255,255,.65);border-radius:19px;padding:12px}.month-nav{display:flex;align-items:center;justify-content:space-between}.month-nav button{border:0;background:transparent;font:inherit;font-size:1.15rem}.month-nav strong{font-size:.84rem}
.month-weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.month-weekdays{margin:12px 0 5px}.month-weekdays span{text-align:center;font-size:.55rem;color:var(--muted)}
.month-day{aspect-ratio:1;border:0;background:transparent;border-radius:11px;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.month-day strong{font-size:.72rem}.month-day i{width:4px;height:4px;border-radius:50%}.month-day i.has-items{background:#917e6d}.month-day.active{background:#eee5da}.month-day.today strong{text-decoration:underline}
.calendar-today{display:block;margin:9px auto 0;border:0;background:transparent;font:inherit;font-size:.65rem;color:var(--muted)}.calendar-day-items{margin-top:12px;background:rgba(255,255,255,.55);border-radius:17px;padding:12px}.day-clear.compact{min-height:65px}
.things-filters.simple{justify-content:flex-start}.rest-suggestion{margin-top:9px}.rest-suggestion-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.rest-suggestion-head>div{display:flex;flex-direction:column}.rest-suggestion-head strong{font-size:.86rem}.rest-suggestion-head small{font-size:.64rem;color:var(--muted)}.rest-suggestion-head button{border:0;background:transparent;font:inherit;font-size:.7rem;color:var(--muted)}
.rest-favorite-field{display:flex!important;align-items:center;gap:10px;background:#f7f2ed;border-radius:13px;padding:10px;margin-top:8px}.rest-favorite-field input{width:18px;height:18px}.rest-favorite-field span{display:flex;flex-direction:column;gap:2px}.rest-favorite-field strong{font-size:.76rem}.rest-favorite-field small{font-size:.62rem;color:var(--muted)}

/* V28 */
.calendar-open{font-weight:700;padding:9px 12px}
.calendar-page-head.clear{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.calendar-back.clear{background:rgba(255,255,255,.72);border-radius:12px;padding:8px 10px;font-weight:700;color:var(--ink)}
.calendar-today.clear{background:#f0e9df;border-radius:11px;padding:7px 12px;color:var(--ink);font-weight:700}
.soon-zone{margin-top:10px}
.upcoming-secondary{margin-top:12px}
.rest-favorite-field{display:flex!important;visibility:visible!important;opacity:1!important}

/* V29 — Rest add/edit fixes */
.rest-favorite-field{
  display:flex!important;align-items:center;gap:10px;
  width:100%;box-sizing:border-box;margin:10px 0 4px;
  padding:11px 12px;border-radius:14px;background:#f6f0e9;
  cursor:pointer;visibility:visible!important;opacity:1!important;
}
.rest-favorite-field input{width:19px;height:19px;flex:0 0 auto;margin:0}
.rest-favorite-copy{display:flex;flex-direction:column;gap:2px;text-align:right}
.rest-favorite-copy strong{font-size:.78rem;color:var(--ink)}
.rest-favorite-copy small{font-size:.63rem;color:var(--muted)}
.rest-heart{font-size:1rem;vertical-align:-1px}
.rest-favorite-field:has(input:checked){background:#eee4d9}
.rest-favorite-field:has(input:checked) .rest-heart::before{content:"♥";font-size:1rem}
.rest-favorite-field:has(input:checked) .rest-heart{font-size:0}

/* V34 coherent UI */
:root{--g-bg:#F6F1E9;--g-panel:#EFE7DC;--g-card:#FFFDFC;--g-ink:#25252A;--g-muted:#686970;--g-line:rgba(37,37,42,.09);--g-sky:#DDECF0;--g-sky2:#BFD9E0}
html,body{background:var(--g-bg);color:var(--g-ink)}button,input,textarea,select{font:inherit;color:inherit}button{-webkit-appearance:none;appearance:none;text-decoration:none}
.view{box-sizing:border-box;width:100%;padding-inline:16px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.page-title{margin:0;font-size:1.3rem}.page-subtitle{margin:4px 0 0;font-size:.7rem;color:var(--g-muted)}.section-explain{display:block;margin-top:3px;font-size:.61rem;color:var(--g-muted)}
.card,.soft-card,.rest-card{border:1px solid var(--g-line);border-radius:14px;background:var(--g-card);box-shadow:none}
.upcoming-group,.things-natural,.rest-suggestion,.rest-all-zone,.month-card,.calendar-day-items,[data-screen="screen-today"] .attention-section,[data-screen="screen-today"] .light-section,[data-screen="screen-today"] .upcoming-home-section,[data-screen="screen-today"] .rest-home-section{border:1px solid var(--g-line);border-inline-start:3px solid var(--g-sky2);border-radius:16px;background:var(--g-panel);box-shadow:none}
/* Today */
[data-screen="screen-today"] .today-intro{display:none!important}[data-screen="screen-today"] .greeting{margin:0 0 16px;padding:0 2px}[data-screen="screen-today"] .greeting h1{margin:0;font-size:1.25rem}[data-screen="screen-today"] .greeting p{margin:5px 0 0;font-size:.68rem;color:var(--g-muted)}
[data-screen="screen-today"] .quick-add{width:100%;box-sizing:border-box;margin:0 0 17px;padding:6px 7px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-card);box-shadow:none}
[data-screen="screen-today"] .hero{box-sizing:border-box;width:100%;padding:16px;border:1px solid var(--g-line);border-radius:20px;background:var(--g-card);box-shadow:none}
[data-screen="screen-today"] .section{margin-top:18px}[data-screen="screen-today"] .attention-section,[data-screen="screen-today"] .light-section,[data-screen="screen-today"] .upcoming-home-section,[data-screen="screen-today"] .rest-home-section{padding:12px 14px}
[data-screen="screen-today"] .attention-section .card,[data-screen="screen-today"] .light-section .soft-card,[data-screen="screen-today"] .upcoming-home-section .card,[data-screen="screen-today"] .rest-home-section .rest-preview{margin-top:7px;padding:11px 12px;border:1px solid var(--g-line);border-radius:13px;background:var(--g-card)}
/* Upcoming */
[data-screen="screen-upcoming"] .upcoming-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}[data-screen="screen-upcoming"] .calendar-open{border:1px solid var(--g-line);border-radius:12px;background:var(--g-sky);padding:8px 11px;font-size:.68rem;font-weight:700}
[data-screen="screen-upcoming"] .week-picker{width:100%;box-sizing:border-box;padding:6px;border:1px solid var(--g-line);border-radius:18px;background:var(--g-card)}
[data-screen="screen-upcoming"] .day-pick{min-width:0;border:0;border-radius:12px;background:transparent;color:var(--g-ink)!important}[data-screen="screen-upcoming"] .day-pick span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.6rem}[data-screen="screen-upcoming"] .day-pick.active{background:var(--g-sky)}
[data-screen="screen-upcoming"] .upcoming-group{margin-top:12px;padding:13px 14px}[data-screen="screen-upcoming"] .selected-day-panel .card,[data-screen="screen-upcoming"] .later-flat .card{margin-top:7px;padding:10px 12px;border:1px solid var(--g-line);border-radius:13px;background:var(--g-card)}
[data-screen="screen-upcoming"] .section-gate{width:100%;padding:0;border:0;background:transparent;color:var(--g-ink)}[data-screen="screen-upcoming"] .mini-preview{margin-top:7px}[data-screen="screen-upcoming"] .mini-preview-row{width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;border:1px solid var(--g-line);border-radius:12px;background:var(--g-card);text-align:right}
/* Calendar */
[data-screen="screen-calendar"] .calendar-page-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}[data-screen="screen-calendar"] .calendar-back.clear{padding:7px 9px;border:1px solid var(--g-line);border-radius:11px;background:var(--g-card);color:var(--g-ink)!important}
[data-screen="screen-calendar"] .month-card{padding:14px}[data-screen="screen-calendar"] .month-weekdays span{text-align:center;font-size:.62rem;font-weight:700;color:var(--g-muted)}
[data-screen="screen-calendar"] .month-nav button,[data-screen="screen-calendar"] .month-day,[data-screen="screen-calendar"] .calendar-today{color:var(--g-ink)!important;-webkit-text-fill-color:var(--g-ink);text-decoration:none!important}[data-screen="screen-calendar"] .month-day{border:0;background:transparent;border-radius:11px}[data-screen="screen-calendar"] .month-day.active{background:var(--g-sky)}
[data-screen="screen-calendar"] .calendar-today.clear{display:block;margin:10px auto 0;padding:7px 11px;border:1px solid var(--g-line);border-radius:11px;background:var(--g-sky);font-size:.66rem;font-weight:700}[data-screen="screen-calendar"] .calendar-day-items{margin-top:12px;padding:14px}
/* Things */
[data-screen="screen-things"] .things-search{width:100%;box-sizing:border-box;margin:0 0 10px;padding:9px 11px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-card);box-shadow:none}[data-screen="screen-things"] .things-filters{display:flex;gap:4px;padding:4px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-panel)}
[data-screen="screen-things"] .things-filters button{flex:1;border:0;border-radius:10px;background:transparent;padding:7px 6px;color:var(--g-muted)}[data-screen="screen-things"] .things-filters button.active{background:var(--g-card);color:var(--g-ink)}[data-screen="screen-things"] .things-natural{margin-top:12px;padding:12px 14px}[data-screen="screen-things"] .things-natural .card{margin-top:7px;padding:10px 12px;background:var(--g-card)}
/* Rest */
[data-screen="screen-rest"] .rest-add{border:1px solid var(--g-line);border-radius:12px;background:var(--g-sky);padding:8px 10px}[data-screen="screen-rest"] .rest-suggestion,[data-screen="screen-rest"] .rest-all-zone{padding:14px}[data-screen="screen-rest"] .rest-suggestion .rest-card,[data-screen="screen-rest"] .rest-library .rest-card{margin-top:7px;padding:10px 12px;background:var(--g-card)}
/* Dialogs */
dialog input,dialog textarea,dialog select{box-sizing:border-box;width:100%;border:1px solid var(--g-line)!important;border-radius:12px!important;background:var(--g-card)!important;color:var(--g-ink)!important}.rest-favorite-field{border:1px solid var(--g-line)!important;border-radius:12px!important;background:var(--g-panel)!important}

/* ==========================================================
   V36 — layout reset: fewer containers, clearer hierarchy
   ========================================================== */
:root{
  --bg:#FBFAF7;
  --paper:#FFFFFF;
  --ink:#25252A;
  --muted:#6B6C72;
  --line:rgba(37,37,42,.085);
  --sky:#DCECF0;
  --sky-strong:#BFDCE3;
  --rose:#E8D3D8;
  --sage:#D6E4DA;
}
html,body{background:var(--bg)!important;color:var(--ink)}
.view{padding-inline:18px!important}
.page-title{font-size:1.28rem!important}
.section-title{margin-bottom:9px}
.section-title h2{font-size:.92rem}
.section-explain{font-size:.61rem;color:var(--muted)}

/* Kill the "container inside container" look */
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-things"] .things-natural{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
[data-screen="screen-today"] .attention-section .card,
[data-screen="screen-today"] .upcoming-home-section .card,
[data-screen="screen-things"] .things-natural .card{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:12px 2px!important;
  margin:0!important;
  box-shadow:none!important;
}
[data-screen="screen-today"] .attention-section .card:last-child,
[data-screen="screen-today"] .upcoming-home-section .card:last-child,
[data-screen="screen-things"] .things-natural .card:last-child{border-bottom:0!important}

/* Header breathing room */
[data-screen="screen-today"] .greeting{
  margin:0 0 28px!important;
  padding:0 2px!important;
}
[data-screen="screen-today"] .quick-add{
  margin:0 0 22px!important;
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  box-shadow:none!important;
}

/* Hero is ONE card. Note stays on same white surface. */
[data-screen="screen-today"] .hero{
  background:var(--paper)!important;
  border:1px solid rgba(37,37,42,.11)!important;
  border-radius:20px!important;
  padding:17px 16px!important;
  box-shadow:none!important;
}
.hero-note-inline{
  margin:5px 0 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:var(--muted)!important;
  font-size:.68rem!important;
  line-height:1.55!important;
  font-weight:400!important;
}
[data-screen="screen-today"] .hero .reason{
  margin-top:5px;
  color:var(--muted);
  font-size:.65rem;
}

/* One special block only for truly different content */
[data-screen="screen-today"] .light-section{
  background:var(--sky)!important;
  border:0!important;
  border-radius:16px!important;
  padding:12px 13px!important;
}
[data-screen="screen-today"] .light-section .soft-card{
  background:transparent!important;
  border:0!important;
  padding:2px 0!important;
  margin:0!important;
}
[data-screen="screen-today"] .rest-home-section{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-inline-start:3px solid var(--rose)!important;
  border-radius:14px!important;
  padding:12px 13px!important;
}

/* Upcoming: week card + flat selected-day list + independent later/soon blocks */
[data-screen="screen-upcoming"] .week-picker{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  padding:6px!important;
}
[data-screen="screen-upcoming"] .selected-day-panel{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin-top:18px!important;
  border-radius:0!important;
}
[data-screen="screen-upcoming"] .selected-day-panel .card{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:12px 2px!important;
  margin:0!important;
}
[data-screen="screen-upcoming"] .selected-day-panel .card:last-child{border-bottom:0!important}
[data-screen="screen-upcoming"] .later-group{
  background:transparent!important;
  border:1px solid var(--line)!important;
  border-inline-start:3px solid var(--sage)!important;
  border-radius:14px!important;
  padding:12px 13px!important;
  margin-top:18px!important;
}
[data-screen="screen-upcoming"] .soon-group{
  background:transparent!important;
  border:1px solid var(--line)!important;
  border-inline-start:3px solid var(--rose)!important;
  border-radius:14px!important;
  padding:12px 13px!important;
  margin-top:14px!important;
}
[data-screen="screen-upcoming"] .soon-action-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  padding:10px 11px!important;
}
[data-screen="screen-upcoming"] .soon-actions button{
  background:#F7F7F5!important;
}
[data-screen="screen-upcoming"] .soon-actions button:first-child{
  background:var(--sky)!important;
}

/* Monthly calendar: white calendar, no beige slab */
[data-screen="screen-calendar"] .month-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-inline-start:0!important;
  border-radius:18px!important;
  padding:14px!important;
}
[data-screen="screen-calendar"] .calendar-day-items{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  margin-top:18px!important;
}
[data-screen="screen-calendar"] .calendar-day-items .card{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:12px 2px!important;
}

/* Things: image -> search -> tabs -> one flat list */
[data-screen="screen-things"] .things-search{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
[data-screen="screen-things"] .things-filters{
  background:#F4F3EF!important;
  border:1px solid var(--line)!important;
}
[data-screen="screen-things"] .things-filters button.active{
  background:var(--paper)!important;
}

/* Rest: keep the scene, simplify below it */
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-rest"] .rest-all-zone{
  background:transparent!important;
  border:1px solid var(--line)!important;
  border-inline-start:3px solid var(--rose)!important;
  border-radius:14px!important;
  padding:12px 13px!important;
}
[data-screen="screen-rest"] .rest-suggestion .rest-card,
[data-screen="screen-rest"] .rest-library .rest-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
}

/* Note preview is typography, never a competing visual block */
.task-note-preview{
  color:var(--muted)!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin-top:3px!important;
  font-size:.66rem!important;
  line-height:1.45!important;
}

/* Dialogs/sheets: cleaner and tappable backdrop */
dialog{
  padding:0!important;
  background:rgba(37,37,42,.18)!important;
}
dialog::backdrop{background:rgba(37,37,42,.18)}
dialog .dialog-card,dialog .sheet,dialog form{
  background:var(--paper)!important;
  border-radius:22px!important;
}

/* V37 — ordered surfaces + interaction cleanup */
:root{--v37-sky:#DCECF0;--v37-rose:#E8D3D8;--v37-sage:#D6E4DA;--v37-bg:#FBFAF7;--v37-paper:#fff;--v37-line:rgba(37,37,42,.09)}
.app-shell[data-view="today"] .topbar{margin-bottom:38px!important}
.app-shell[data-view="today"] .view{gap:22px!important}
.hero-label{color:#4E6870!important;font-weight:850!important;font-size:.78rem!important}
.section-title button,.rest-head button,.quiet-link,.section-gate b{color:#4E6870!important;font-weight:750!important}
.section-title{align-items:flex-end!important}
.section-title h2{color:var(--ink)!important}
.section-surface{
  background:var(--v37-paper)!important;border:1px solid var(--v37-line)!important;
  border-radius:16px!important;padding:5px 13px!important;box-shadow:none!important;
}
.attention-section,.upcoming-home-section,.rest-home-section{padding:0!important;background:transparent!important;border:0!important}
.attention-section .section-surface .card,
.upcoming-home-section .section-surface .card{background:transparent!important;border:0!important;border-bottom:1px solid var(--v37-line)!important;border-radius:0!important;padding:11px 0!important}
.attention-section .section-surface .card:last-child,.upcoming-home-section .section-surface .card:last-child{border-bottom:0!important}
.light-section{background:transparent!important;border:0!important;padding:0!important}
.light-section .light-surface{background:var(--v37-sky)!important;border-color:transparent!important;padding:11px 13px!important}
.rest-home-section .rest-preview{margin-top:0!important;min-height:0!important;padding:13px 14px!important;background:#FCF7F8!important;border-inline-start:3px solid var(--v37-rose)!important}
.rest-home-section .section-title{margin-bottom:8px!important}
.rest-home-section .art{margin-bottom:4px!important}

/* Upcoming gets explicit vertical rhythm, not floating slabs */
[data-screen="screen-upcoming"] .upcoming-head{margin-bottom:14px!important}
[data-screen="screen-upcoming"] .week-picker{margin-bottom:20px!important}
[data-screen="screen-upcoming"] .selected-day-panel{background:transparent!important;border:0!important;padding:0!important;margin-top:0!important}
[data-screen="screen-upcoming"] .selected-day-title{margin-bottom:7px!important}
[data-screen="screen-upcoming"] .selected-day-panel .list-stack{
  background:#fff;border:1px solid var(--v37-line);border-radius:16px;padding:4px 13px;gap:0!important
}
[data-screen="screen-upcoming"] .selected-day-panel .card{padding:11px 0!important;border-bottom:1px solid var(--v37-line)!important}
[data-screen="screen-upcoming"] .later-group{margin-top:18px!important;background:#F8FBF9!important;border-inline-start:3px solid var(--v37-sage)!important}
[data-screen="screen-upcoming"] .soon-group{margin-top:12px!important;background:#FCF8F9!important;border-inline-start:3px solid var(--v37-rose)!important}

/* Things: five filters can scroll instead of squeezing */
[data-screen="screen-things"] .things-filters{overflow-x:auto;scrollbar-width:none;justify-content:flex-start!important}
[data-screen="screen-things"] .things-filters::-webkit-scrollbar{display:none}
[data-screen="screen-things"] .things-filters button{flex:0 0 auto!important;min-width:68px!important}
[data-screen="screen-things"] .things-action-card{padding:12px 13px!important}
.things-soon-actions{margin-top:10px!important}
.waiting-done{background:#fff!important;border:1px solid var(--v37-line)!important}

/* Rest: no beige-on-beige nesting */
[data-screen="screen-rest"] .rest-suggestion{background:#FCF7F8!important;border:1px solid var(--v37-line)!important;border-inline-start:3px solid var(--v37-rose)!important}
[data-screen="screen-rest"] .rest-suggestion .rest-item{background:#fff!important;border:1px solid var(--v37-line)!important;border-radius:14px!important;padding:11px 12px!important}
[data-screen="screen-rest"] .rest-all-zone{background:#F8FBF9!important;border:1px solid var(--v37-line)!important;border-inline-start:3px solid var(--v37-sage)!important}
[data-screen="screen-rest"] .rest-library{background:transparent!important}
[data-screen="screen-rest"] .rest-library .rest-item{background:#fff!important;border:1px solid var(--v37-line)!important;border-radius:14px!important;padding:11px 12px!important;margin-top:8px}

/* Help is calmer and asks why the suggested step missed */
.help-context{color:var(--muted);font-size:.78rem;line-height:1.6;margin:0 0 10px}
.help-step{background:#F5FAFB!important;border-color:#D8E9ED!important}
.text-help{display:block;margin:12px auto 0;border:0;background:transparent;color:#4E6870;font-weight:750;padding:8px}
.help-choice-list{display:grid;gap:8px}
.help-choice-list button{padding:13px;text-align:right;border:1px solid var(--v37-line);border-radius:13px;background:#fff;font-weight:700}
.help-breakdown{display:grid;gap:8px}
.help-breakdown-row{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;padding:10px 0;border-bottom:1px solid var(--v37-line)}
.help-breakdown-row b{width:26px;height:26px;border-radius:9px;background:var(--v37-sky);display:grid;place-items:center}

/* Safari focus: don't leave a blue box on utility close buttons */
.text-btn:focus,.text-btn:focus-visible,#closeEdit:focus,#closeHelp:focus,#cancelTask:focus{outline:none!important;box-shadow:none!important}

dialog{background:transparent!important}

/* =========================================================
   V38 — one visual system, one surface per group
   ========================================================= */
:root{
  --v38-bg:#FBFAF7;
  --v38-paper:#FFFFFF;
  --v38-ink:#25252A;
  --v38-muted:#6D6E73;
  --v38-line:#E7E5E0;
  --v38-accent:#4F6F78;       /* same family as + capture */
  --v38-sky:#E7F1F3;
  --v38-sky-line:#C9E0E5;
  --v38-rose:#F8F3F4;         /* intentionally very muted */
  --v38-rose-line:#E8DADD;
  --v38-sage:#F4F7F4;         /* intentionally very muted */
  --v38-sage-line:#DCE6DF;
}
html,body{background:var(--v38-bg)!important}

/* Accent text is consistent everywhere */
.hero-label,
.section-title button,
.rest-head button,
.quiet-link,
.section-gate b,
.calendar-open,
.show-more-things,
#restAdd,
#anotherRest{
  color:var(--v38-accent)!important;
  opacity:1!important;
}

/* TODAY: every section is one complete card, including its heading */
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .rest-home-section{
  background:var(--v38-paper)!important;
  border:1px solid var(--v38-line)!important;
  border-radius:18px!important;
  padding:15px 15px 8px!important;
  margin:0 0 18px!important;
}
[data-screen="screen-today"] .attention-section .section-title,
[data-screen="screen-today"] .upcoming-home-section .section-title,
[data-screen="screen-today"] .rest-home-section .section-title{
  margin:0 0 7px!important;padding:0!important;
}
[data-screen="screen-today"] .section-surface{
  background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;
}
[data-screen="screen-today"] .attention-section .card,
[data-screen="screen-today"] .upcoming-home-section .card{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--v38-line)!important;
  border-radius:0!important;padding:11px 0!important;
}
[data-screen="screen-today"] .attention-section .card:last-child,
[data-screen="screen-today"] .upcoming-home-section .card:last-child{border-bottom:0!important}
[data-screen="screen-today"] .light-section{
  background:var(--v38-sky)!important;border:1px solid var(--v38-sky-line)!important;
  border-radius:18px!important;padding:14px 15px!important;margin-bottom:18px!important;
}
[data-screen="screen-today"] .light-section .section-title{margin-bottom:7px!important}
[data-screen="screen-today"] .light-section .light-surface{background:transparent!important;border:0!important;padding:0!important}
[data-screen="screen-today"] .rest-home-section .rest-preview{
  background:transparent!important;border:0!important;border-radius:0!important;padding:8px 0 10px!important;
}
/* actual extra breathing space under greeting */
[data-screen="screen-today"] .greeting{margin-bottom:34px!important}
[data-screen="screen-today"] .quick-add{margin-top:0!important}

/* THINGS: one background for the whole filtered result list */
[data-screen="screen-things"] .things-filters{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:visible!important;padding:4px!important;gap:2px!important;
}
[data-screen="screen-things"] .things-filters button{
  min-width:0!important;width:100%!important;padding:9px 3px!important;font-size:.64rem!important;
}
[data-screen="screen-things"] .things-natural{
  background:var(--v38-paper)!important;border:1px solid var(--v38-line)!important;
  border-radius:18px!important;padding:14px!important;
}
[data-screen="screen-things"] .things-list-heading{margin:0 0 5px!important}
[data-screen="screen-things"] .things-natural .list-stack{background:transparent!important;gap:0!important}
[data-screen="screen-things"] .things-natural .card{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--v38-line)!important;
  border-radius:0!important;padding:13px 0!important;margin:0!important;
}
[data-screen="screen-things"] .things-natural .card:last-child{border-bottom:0!important}
[data-screen="screen-things"] .things-action-card .task-row{margin-bottom:9px}
.task-done,.waiting-done{
  flex:0 0 38px!important;width:38px!important;height:38px!important;border:1px solid var(--v38-line)!important;
  border-radius:12px!important;background:#fff!important;font-size:1rem!important;
}

/* ONE polished scheduling control used in Things and Upcoming */
.schedule-actions{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;
  width:100%!important;margin-top:8px!important;
}
.schedule-actions button{
  appearance:none!important;-webkit-appearance:none!important;
  min-height:36px!important;padding:7px 5px!important;
  border:1px solid var(--v38-line)!important;border-radius:10px!important;
  background:#F8F8F6!important;color:var(--v38-ink)!important;
  font:inherit!important;font-size:.66rem!important;font-weight:700!important;
  line-height:1!important;text-align:center!important;box-shadow:none!important;
}
.schedule-actions button:first-child{
  background:var(--v38-sky)!important;border-color:var(--v38-sky-line)!important;color:#355761!important;
}

/* UPCOMING: selected day, later, soon each = one complete card.
   No card-inside-card styling. */
[data-screen="screen-upcoming"] .selected-day-panel,
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group{
  border-radius:18px!important;padding:14px!important;margin-top:14px!important;
  box-shadow:none!important;
}
[data-screen="screen-upcoming"] .selected-day-panel{
  background:var(--v38-paper)!important;border:1px solid var(--v38-line)!important;
}
[data-screen="screen-upcoming"] .selected-day-panel .list-stack{
  background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;
}
[data-screen="screen-upcoming"] .selected-day-panel .card{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--v38-line)!important;
  border-radius:0!important;padding:12px 0!important;
}
[data-screen="screen-upcoming"] .later-group{
  background:var(--v38-sage)!important;border:1px solid var(--v38-sage-line)!important;
}
[data-screen="screen-upcoming"] .later-group .card{
  background:transparent!important;border:0!important;border-top:1px solid var(--v38-sage-line)!important;
  border-radius:0!important;padding:12px 0!important;
}
[data-screen="screen-upcoming"] .soon-group{
  background:var(--v38-rose)!important;border:1px solid var(--v38-rose-line)!important;
}
[data-screen="screen-upcoming"] .soon-action-card{
  background:transparent!important;border:0!important;border-top:1px solid var(--v38-rose-line)!important;
  border-radius:0!important;padding:12px 0!important;margin:0!important;
}

/* MONTH: tasks under selected date share one surface */
[data-screen="screen-calendar"] .calendar-day-items{
  background:var(--v38-paper)!important;border:1px solid var(--v38-line)!important;
  border-radius:18px!important;padding:14px!important;margin-top:16px!important;
}
[data-screen="screen-calendar"] .calendar-day-items .list-stack{gap:0!important}
[data-screen="screen-calendar"] .calendar-day-items .card{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--v38-line)!important;
  border-radius:0!important;padding:12px 0!important;
}
[data-screen="screen-calendar"] .calendar-day-items .card:last-child{border-bottom:0!important}

/* REST: remove almost-identical nested tint. Outer section carries tint, row is white. */
[data-screen="screen-rest"] .rest-suggestion{
  background:var(--v38-rose)!important;border:1px solid var(--v38-rose-line)!important;
  border-radius:18px!important;padding:14px!important;
}
[data-screen="screen-rest"] .rest-all-zone{
  background:var(--v38-sage)!important;border:1px solid var(--v38-sage-line)!important;
  border-radius:18px!important;padding:14px!important;
}
[data-screen="screen-rest"] .rest-suggestion .rest-item,
[data-screen="screen-rest"] .rest-library .rest-item{
  background:var(--v38-paper)!important;border:1px solid var(--v38-line)!important;
  border-radius:14px!important;padding:11px 12px!important;
}
[data-screen="screen-rest"] .rest-all-zone .section-gate{
  background:transparent!important;border:0!important;padding:0!important;
}
[data-screen="screen-rest"] .rest-library{background:transparent!important;padding-top:8px!important}

/* HELP: the sheet itself is 100% opaque. Only the backdrop is translucent. */
#helpDialog{background:transparent!important}
#helpDialog form,
#helpDialog .dialog-card,
#helpDialog .sheet-inner{
  background:#FFFFFF!important;
  opacity:1!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#helpDialog::backdrop{background:rgba(37,37,42,.28)!important}
#helpDialog .help-step{background:#F3F8F9!important;border:1px solid #D7E7EA!important}
#helpDialog .sheet-head .text-btn{color:var(--v38-accent)!important}

/* No browser-default square buttons anywhere in schedule actions */
button[data-soon-move],button[data-soon-date]{
  appearance:none!important;-webkit-appearance:none!important;
}

/* Keep headings visually attached to their content */
.section-title,.selected-day-title,.things-list-heading,.rest-suggestion-head{
  position:relative!important;z-index:1!important;
}

#helpDialog .help-form{background:#fff!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* =========================================================
   V39 — exact bug fixes from real iPhone screenshots
   ========================================================= */
:root{
  /* dusty muted red sampled conceptually from the + capture / illustrations */
  --dusty:#9B7478;
  --dusty-soft:#F6F0F0;
  --dusty-line:#E5D7D8;
  --sage-neutral:#F5F6F3;
  --sage-neutral-line:#E1E4DE;
}

/* Filters must sit above any decorative layer and always receive taps */
[data-screen="screen-things"] .things-filters{
  position:relative!important;z-index:20!important;pointer-events:auto!important;
}
[data-screen="screen-things"] .things-filters button{
  position:relative!important;z-index:21!important;pointer-events:auto!important;touch-action:manipulation!important;
}

/* HELP: dialog itself covers viewport, this inner surface is the actual opaque sheet */
#helpDialog{
  background:transparent!important;
  padding:0!important;
  border:0!important;
}
#helpDialog .help-sheet-surface{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:#FFF!important;
  opacity:1!important;
  border-radius:26px 26px 0 0!important;
  padding:12px 22px calc(24px + env(safe-area-inset-bottom))!important;
  box-shadow:0 -10px 35px rgba(37,37,42,.08)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#helpDialog #helpContent,
#helpDialog .sheet-head{background:#FFF!important;opacity:1!important}
#helpDialog::backdrop{background:rgba(37,37,42,.32)!important}

/* Dusty accent replaces the candy pink */
[data-screen="screen-upcoming"] .soon-group,
[data-screen="screen-rest"] .rest-suggestion{
  background:var(--dusty-soft)!important;
  border-color:var(--dusty-line)!important;
}
[data-screen="screen-rest"] .rest-all-zone{
  background:var(--sage-neutral)!important;
  border-color:var(--sage-neutral-line)!important;
}
.rest-favorite.active,.rest-heart{color:var(--dusty)!important}
[data-screen="screen-today"] .rest-home-section{border-color:var(--dusty-line)!important}

/* "في بالك قريبًا": deliberately designed list, no browser-button/title artifacts */
[data-screen="screen-upcoming"] .soon-group{
  padding:15px!important;border-radius:18px!important;
}
[data-screen="screen-upcoming"] .soon-group .section-gate,
[data-screen="screen-upcoming"] .soon-group .section-title{
  margin-bottom:4px!important;
}
[data-screen="screen-upcoming"] .soon-action-card{
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--dusty-line)!important;
  border-radius:0!important;
  padding:13px 0!important;
  margin:0!important;
}
[data-screen="screen-upcoming"] .soon-action-card:first-child{border-top:0!important}
.soon-task-head{
  display:block!important;
  padding:0!important;margin:0 0 10px!important;
  background:transparent!important;border:0!important;
  color:#25252A!important;text-align:right!important;
}
.soon-task-head strong{
  display:block!important;background:transparent!important;
  font-size:.78rem!important;line-height:1.45!important;font-weight:800!important;
}
.soon-task-head small{
  display:block!important;background:transparent!important;color:#73747A!important;
  margin-top:3px!important;font-size:.62rem!important;
}

/* Scheduling control: no grey rectangles behind labels, one calm segmented bar */
.schedule-actions{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:0!important;width:100%!important;
  border:1px solid #DEDCD7!important;border-radius:11px!important;
  overflow:hidden!important;background:#FFF!important;
}
.schedule-actions button{
  min-height:36px!important;margin:0!important;padding:7px 4px!important;
  border:0!important;border-inline-start:1px solid #E5E2DD!important;
  border-radius:0!important;background:#FFF!important;
  color:#3E3F43!important;font-size:.65rem!important;font-weight:700!important;
  box-shadow:none!important;outline:none!important;
}
.schedule-actions button:last-child{border-inline-start:0!important}
.schedule-actions button:first-child{
  background:#E7F1F3!important;color:#3D6069!important;
}

/* Things "قريب" keeps same control, within one shared list surface */
[data-screen="screen-things"] .things-action-card{
  background:transparent!important;
}
[data-screen="screen-things"] .things-soon-actions{margin-top:9px!important}

/* Dusty accent only where a warm accent is actually useful */
[data-screen="screen-rest"] #anotherRest,
[data-screen="screen-rest"] #restAdd{
  color:var(--dusty)!important;
}

/* V40 — calmer palette + cleaner controls */
:root{
  --dusty:#A88386;
  --dusty-soft:#F7F2F2;
  --dusty-line:#E9DEDF;
  --sage:#EEF4EF;
  --sage-line:#DCE8DF;
  --sky:#E6F1F3;
  --sky-line:#CFE3E7;
  --ink:#25252A;
  --muted:#6E7075;
}
.greeting-line{
  margin:6px 0 0!important;
  color:var(--muted)!important;
  font-size:.68rem!important;
  line-height:1.55!important;
  font-weight:500!important;
}
[data-screen="screen-today"] .greeting{margin-bottom:26px!important}
.section-title .section-explain{display:none!important}

[data-screen="screen-rest"] .rest-suggestion{
  background:var(--dusty-soft)!important;
  border-color:var(--dusty-line)!important;
}
[data-screen="screen-rest"] .rest-all-zone{
  background:var(--sage)!important;
  border-color:var(--sage-line)!important;
}
[data-screen="screen-rest"] #restAdd{color:#4E6870!important}
[data-screen="screen-rest"] #anotherRest{color:#6C7277!important}
[data-screen="screen-rest"] .rest-favorite.active,
[data-screen="screen-rest"] .rest-heart{color:var(--dusty)!important}

.schedule-actions{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
  width:100%!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
}
.schedule-actions button{
  min-height:36px!important;
  margin:0!important;
  padding:7px 8px!important;
  border:1px solid #DFDDD8!important;
  border-radius:11px!important;
  background:#FFF!important;
  color:#3F4145!important;
  font-size:.66rem!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.schedule-actions button:first-child{
  background:var(--sky)!important;
  border-color:var(--sky-line)!important;
  color:#3D6069!important;
}

.mini-btn.task-done,
.mini-btn.waiting-done,
.inline-actions .done,
.hero .done,
button[data-done]{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  border:1.5px solid #DDDAD4!important;
  border-radius:50%!important;
  background:#FFF!important;
  display:grid!important;
  place-items:center!important;
  color:transparent!important;
  font-size:0!important;
}
button[data-done] span{
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:transparent!important;
}

.bottom-nav .nav-icon{
  font-family:system-ui,-apple-system,sans-serif!important;
  font-size:1.18rem!important;
  line-height:1!important;
}
.bottom-nav .add-main{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:22px!important;
  font-size:2rem!important;
  transform:translateY(-8px)!important;
}
.bottom-nav{
  padding-top:9px!important;
  padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
}

[data-screen="screen-upcoming"] .soon-group{
  background:var(--dusty-soft)!important;
  border-color:var(--dusty-line)!important;
}

/* V42 targeted device fixes */
:root{
  --v42-bg:#FBFAF7;
  --v42-paper:#FFFFFF;
  --v42-ink:#25252A;
  --v42-line:#E6E3DE;
  --v42-sky:#E6F1F3;
  --v42-sky-line:#CFE2E6;
  --v42-dusty:#A98286;
}

/* Neutral cards; no unwanted pink/green slabs */
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-rest"] .rest-all-zone,
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group{
  background:var(--v42-paper)!important;
  border-color:var(--v42-line)!important;
}
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-upcoming"] .soon-group{
  border-inline-start:3px solid rgba(169,130,134,.55)!important;
}
[data-screen="screen-rest"] .rest-all-zone,
[data-screen="screen-upcoming"] .later-group{
  border-inline-start:3px solid var(--v42-sky-line)!important;
}
[data-screen="screen-rest"] #restAdd{color:#4E6870!important}

/* Small empty completion circles only for list check controls */
.inline-actions button[data-done],
.mini-btn.task-done,
.mini-btn.waiting-done{
  width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;
  padding:0!important;border:1.25px solid #D8D5CF!important;border-radius:50%!important;
  background:#FFF!important;color:transparent!important;font-size:0!important;box-shadow:none!important;
}
.inline-actions button[data-done] span,
.mini-btn.task-done span,
.mini-btn.waiting-done span{display:none!important}

/* Hero "تم" stays a normal action */
.hero .hero-done{
  width:auto!important;height:auto!important;min-width:68px!important;min-height:38px!important;
  padding:8px 15px!important;border:1px solid var(--v42-line)!important;border-radius:12px!important;
  background:#FFF!important;color:var(--v42-ink)!important;font-size:.72rem!important;font-weight:800!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}

/* Really smaller add button */
.bottom-nav .add-main{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  border-radius:15px!important;font-size:1.45rem!important;line-height:1!important;
  transform:translateY(-4px)!important;padding:0!important;
}

/* Filters: robust two-row layout with larger tap targets */
[data-screen="screen-things"] .things-filters{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;overflow:visible!important;pointer-events:auto!important;
}
[data-screen="screen-things"] .things-filters button{
  min-width:0!important;width:100%!important;min-height:38px!important;
  padding:8px 5px!important;border-radius:10px!important;pointer-events:auto!important;touch-action:manipulation!important;
}

/* Scheduling buttons: separate rounded controls and always fit */
.schedule-actions{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  border:0!important;overflow:visible!important;background:transparent!important;
}
.schedule-actions button{
  min-width:0!important;width:100%!important;box-sizing:border-box!important;
  border:1px solid #DFDDD8!important;border-radius:11px!important;background:#FFF!important;
  padding:7px 6px!important;
}
.schedule-actions button:first-child{
  background:var(--v42-sky)!important;border-color:var(--v42-sky-line)!important;
}
.things-action-card,.soon-action-card{overflow:visible!important}

/* =========================================================
   V43 — interaction + add-sheet cleanup
   ========================================================= */

/* Things filters: back to one horizontal scrolling row */
[data-screen="screen-things"] .things-filters{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  padding:4px!important;
  position:relative!important;
  z-index:30!important;
}
[data-screen="screen-things"] .things-filters::-webkit-scrollbar{display:none!important}
[data-screen="screen-things"] .things-filters button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:66px!important;
  min-height:36px!important;
  padding:8px 11px!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:31!important;
}

/* Add date controls stay visually inside the add sheet */
#taskDialog form{overflow-x:hidden!important}
#taskDialog .add-date-panel{
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:10px!important;
  padding:11px!important;
  background:#F8F7F4!important;
  border:1px solid #E8E5DF!important;
  border-radius:15px!important;
}
#taskDialog .add-date-panel .date-meaning{
  width:100%!important;
  box-sizing:border-box!important;
}
#taskDialog .add-date-panel input{
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:8px!important;
}
.add-waiting{margin-top:12px!important}
.compact-waiting{padding:10px 11px!important}

/* Smaller completion circles */
.inline-actions button[data-done],
.mini-btn.task-done,
.mini-btn.waiting-done,
.task-row .mini-btn[data-done]{
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  min-height:21px!important;
  border-width:1.2px!important;
}

/* Smaller bottom navigation and add button */
.bottom-nav{
  min-height:0!important;
  padding:6px 9px calc(6px + env(safe-area-inset-bottom))!important;
  border-radius:22px!important;
  grid-template-columns:1fr 1fr 54px 1fr 1fr!important;
}
.bottom-nav .nav-item{padding:4px 2px!important;gap:2px!important}
.bottom-nav .nav-item small{font-size:.62rem!important}
.bottom-nav .nav-icon{font-size:1rem!important}
.bottom-nav .add-main{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  border-radius:14px!important;
  font-size:1.3rem!important;
  transform:translateY(-3px)!important;
}

/* Separate scheduling pills, with a little inset so the right edge can never be clipped */
.schedule-actions{
  width:100%!important;
  box-sizing:border-box!important;
  padding-inline:2px!important;
  gap:7px!important;
  overflow:visible!important;
}
.schedule-actions button{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #DDDAD5!important;
  border-radius:11px!important;
  background:#FFF!important;
}

/* Current palette: neutral cards + sky; dusty red only as a tiny line, no green/pink fills */
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-rest"] .rest-all-zone,
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group{
  background:#FFF!important;
}
[data-screen="screen-rest"] .rest-all-zone,
[data-screen="screen-upcoming"] .later-group{
  border-inline-start-color:#CFE2E6!important;
}
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-upcoming"] .soon-group{
  border-inline-start-color:rgba(169,130,134,.45)!important;
}

/* =========================================================
   V44 — device-driven layout fixes
   ========================================================= */

/* More usable width: app shell already has outer padding, so don't double it */
.view{
  padding-inline:7px!important;
}
@media(max-width:699px){
  .app-shell{padding-left:14px!important;padding-right:14px!important}
}

/* Horizontal filter strip stays one row; padding keeps edge labels/taps clear */
[data-screen="screen-things"] .things-filters{
  margin-inline:-2px!important;
  padding:4px 3px 7px!important;
  gap:6px!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x!important;
}
[data-screen="screen-things"] .things-filters button{
  min-width:70px!important;
  min-height:34px!important;
  padding:7px 12px!important;
}

/* Date choice inside Add: compact, contained, never a giant blank iOS field */
#taskDialog .add-date-panel{
  padding:10px!important;
  overflow:hidden!important;
}
#taskDialog .add-date-panel .date-meaning{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
#taskDialog .add-date-panel .date-type{
  min-width:0!important;
  padding:9px 7px!important;
}
#taskDialog #taskDate{
  display:block!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:8px 0 0!important;
  padding:7px 11px!important;
  box-sizing:border-box!important;
  border:1px solid #DEDAD4!important;
  border-radius:11px!important;
  background:#FFF!important;
  line-height:1.2!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

/* Scheduling pills: keep a real border on all four sides */
.schedule-actions{
  padding:0 3px!important;
  column-gap:8px!important;
}
.schedule-actions button{
  border:1px solid #D9D6D1!important;
  outline:0!important;
  border-radius:11px!important;
  overflow:visible!important;
}
.schedule-actions button:first-child,
.schedule-actions button:last-child{
  border-inline-start:1px solid #D9D6D1!important;
  border-inline-end:1px solid #D9D6D1!important;
}

/* Completion circles: smaller and visually lighter */
.inline-actions button[data-done],
.mini-btn.task-done,
.mini-btn.waiting-done,
.task-row .mini-btn[data-done]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  border:1px solid #D6D3CD!important;
}

/* Bottom nav can be more compact */
.bottom-nav{
  width:min(720px,calc(100% - 26px))!important;
  padding:4px 7px calc(4px + env(safe-area-inset-bottom))!important;
  border-radius:20px!important;
}
.bottom-nav .nav-item{
  min-height:43px!important;
  padding:2px!important;
}
.bottom-nav .add-main{
  width:39px!important;
  height:39px!important;
  min-width:39px!important;
  min-height:39px!important;
  border-radius:13px!important;
  font-size:1.2rem!important;
  transform:translateY(-2px)!important;
}

/* V45 — functional bug guard only */
.render-error{
  background:#fff;border:1px solid rgba(37,37,42,.09);border-radius:16px;
  padding:18px;text-align:center;display:grid;gap:5px
}
.render-error span{font-size:.75rem;color:#6b6c72}

/* =========================================================
   V47 — visual polish pass before real-life testing
   ========================================================= */
:root{
  --ui-bg:#F8F5EF;
  --ui-paper:#FFFFFF;
  --ui-ink:#25252A;
  --ui-muted:#6C6D72;
  --ui-line:#E5E1DB;
  --ui-line-strong:#D9D4CD;
  --ui-sky:#E6F1F3;
  --ui-sky-text:#46666F;
  --ui-dusty:#A98588;
}

/* Global rhythm */
.view{
  gap:18px!important;
  padding-inline:5px!important;
}
.page-title{
  font-size:1.42rem!important;
  line-height:1.3!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
}
.page-subtitle{
  font-size:.78rem!important;
  line-height:1.55!important;
  color:var(--ui-muted)!important;
}
.task-title{
  font-size:.92rem!important;
  line-height:1.55!important;
  font-weight:780!important;
}
.meta,.task-note-preview{
  font-size:.72rem!important;
  line-height:1.5!important;
}

/* Main surfaces feel intentional, not boxy */
[data-screen="screen-things"] .things-natural,
[data-screen="screen-upcoming"] .selected-day-panel,
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group,
[data-screen="screen-calendar"] .calendar-day-items{
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--ui-line)!important;
  border-radius:17px!important;
  box-shadow:0 5px 16px rgba(37,37,42,.025)!important;
}

/* Upcoming hierarchy: restore comfortable text size */
[data-screen="screen-upcoming"] .section-gate{
  min-height:58px!important;
  padding:12px 13px!important;
  border-radius:13px!important;
  background:transparent!important;
}
[data-screen="screen-upcoming"] .section-gate strong{
  font-size:.96rem!important;
  line-height:1.35!important;
  font-weight:820!important;
}
[data-screen="screen-upcoming"] .section-gate small{
  margin-top:3px!important;
  font-size:.72rem!important;
  line-height:1.4!important;
  color:var(--ui-muted)!important;
}
[data-screen="screen-upcoming"] .section-gate b{
  font-size:1.12rem!important;
}
.soon-task-head strong{
  font-size:.91rem!important;
  line-height:1.5!important;
  font-weight:800!important;
}
.soon-task-head small{
  font-size:.70rem!important;
  line-height:1.45!important;
}
[data-screen="screen-upcoming"] .soon-action-card{
  padding:14px 0!important;
}
[data-screen="screen-upcoming"] .later-group .task-title{
  font-size:.9rem!important;
}

/* Scheduling actions are three equal choices — none is pre-highlighted */
.schedule-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  padding:0 2px!important;
}
.schedule-actions button,
.schedule-actions button:first-child,
.schedule-actions button:last-child{
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  box-sizing:border-box!important;
  border:1px solid var(--ui-line-strong)!important;
  border-radius:11px!important;
  background:#FFF!important;
  color:#45464B!important;
  font-size:.72rem!important;
  font-weight:760!important;
  box-shadow:none!important;
}
.schedule-actions button:active{
  background:var(--ui-sky)!important;
  color:var(--ui-sky-text)!important;
}

/* Edit/Add date areas: contained inside sheet on iPhone */
#editDialog,
#taskDialog{
  overflow-x:hidden!important;
}
#editDialog #editForm,
#taskDialog #taskForm{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}
#editDateWrap,
#dateWrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  margin-inline:0!important;
}
#editDateWrap .date-meaning,
#dateWrap .date-meaning{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
#editDateWrap .date-type,
#dateWrap .date-type{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#editDate,
#taskDate{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
  margin:8px 0 0!important;
  padding:6px 10px!important;
  border:1px solid var(--ui-line-strong)!important;
  border-radius:11px!important;
  background:#FFF!important;
  overflow:hidden!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#editDate::-webkit-date-and-time-value,
#taskDate::-webkit-date-and-time-value{
  text-align:right!important;
}

/* Date meaning: cleaner selected state, no beige slab */
.date-type{
  border:1px solid var(--ui-line)!important;
  background:#FFF!important;
  border-radius:12px!important;
  padding:10px 9px!important;
}
.date-type.active{
  background:var(--ui-sky)!important;
  border-color:#CADFE4!important;
}
.date-type.active strong{
  color:var(--ui-sky-text)!important;
}
.date-type strong{
  font-size:.78rem!important;
}
.date-type small{
  font-size:.65rem!important;
}

/* Things filters: one calm horizontal row */
[data-screen="screen-things"] .things-filters{
  padding:3px 2px 6px!important;
  gap:6px!important;
}
[data-screen="screen-things"] .things-filters button{
  min-height:34px!important;
  padding:7px 12px!important;
  font-size:.74rem!important;
  border-radius:999px!important;
}
[data-screen="screen-things"] .things-filters button.active{
  border-color:#D7D2CB!important;
  box-shadow:0 2px 8px rgba(37,37,42,.04)!important;
}

/* Small completion circles */
.inline-actions button[data-done],
.mini-btn.task-done,
.mini-btn.waiting-done,
.task-row .mini-btn[data-done]{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  min-height:17px!important;
  border:1px solid #D3D0CA!important;
}

/* Bottom nav: slimmer and calmer */
.bottom-nav{
  width:min(720px,calc(100% - 30px))!important;
  padding:3px 7px calc(3px + env(safe-area-inset-bottom))!important;
  border-radius:19px!important;
  min-height:55px!important;
}
.bottom-nav .nav-item{
  min-height:40px!important;
  gap:1px!important;
}
.bottom-nav .nav-item small{
  font-size:.6rem!important;
}
.bottom-nav .nav-icon{
  font-size:.96rem!important;
}
.bottom-nav .add-main{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:12px!important;
  font-size:1.15rem!important;
  transform:translateY(-2px)!important;
}

/* Preserve scene-led identity; cards can breathe wider */
@media(max-width:699px){
  .app-shell{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* V48 — compact waiting state in Add sheet */
#taskDialog .add-status-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:13px!important;
  padding:0 1px!important;
}
#taskDialog .add-status-label{
  font-size:.76rem!important;
  font-weight:750!important;
  color:#5F6068!important;
}
#taskDialog .waiting-chip{
  width:auto!important;
  min-width:0!important;
  min-height:34px!important;
  padding:7px 14px!important;
  border:1px solid #DDD9D3!important;
  border-radius:999px!important;
  background:#FFF!important;
  color:#55565B!important;
  font-size:.74rem!important;
  font-weight:780!important;
  box-shadow:none!important;
}
#taskDialog .waiting-chip.active{
  background:#E6F1F3!important;
  border-color:#C9DEE3!important;
  color:#46666F!important;
}
#taskDialog .add-waiting-follow{
  margin-top:8px!important;
  padding:10px 11px!important;
  border:1px solid #E5E1DB!important;
  border-radius:12px!important;
  background:#FAF9F6!important;
}

/* =========================================================
   V49 — Today section headers + Rest nav cleanup
   ========================================================= */

/* Keep the approved rose quick-add button exactly in its warm accent family */
[data-screen="screen-today"] .today-capture button{
  background:#BE737F!important;
  color:#FFF!important;
}

/* Today sections: one card, but with a distinct soft header band */
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .rest-home-section{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
  border:1px solid #E3DFD9!important;
  border-inline-start:1px solid #E3DFD9!important;
  border-radius:18px!important;
  box-shadow:0 5px 16px rgba(37,37,42,.025)!important;
}

[data-screen="screen-today"] .attention-section > .section-title,
[data-screen="screen-today"] .upcoming-home-section > .section-title,
[data-screen="screen-today"] .rest-home-section > .section-title{
  margin:0 -14px 7px!important;
  padding:12px 14px 11px!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}

/* Cool sky header for practical sections */
[data-screen="screen-today"] .attention-section > .section-title,
[data-screen="screen-today"] .upcoming-home-section > .section-title{
  background:#EEF5F6!important;
}

/* A barely warm header for Rest — still calm and very light */
[data-screen="screen-today"] .rest-home-section > .section-title{
  background:#FAF3F4!important;
}

[data-screen="screen-today"] .section-title h2{
  font-size:1.01rem!important;
  line-height:1.35!important;
  font-weight:830!important;
}

[data-screen="screen-today"] .section-title button{
  padding:4px 0!important;
  font-size:.76rem!important;
  font-weight:760!important;
  color:#58737B!important;
}

/* Content no longer looks like a second white card inside the section */
[data-screen="screen-today"] .attention-section .section-surface,
[data-screen="screen-today"] .upcoming-home-section .section-surface,
[data-screen="screen-today"] .rest-home-section .section-surface{
  margin-top:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

[data-screen="screen-today"] .attention-section .card{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #E8E4DF!important;
  border-radius:0!important;
  padding:13px 0!important;
  margin:0!important;
}
[data-screen="screen-today"] .attention-section .card:last-child{
  border-bottom:0!important;
}

[data-screen="screen-today"] .upcoming-home-section .task-title{
  padding-top:4px!important;
}

[data-screen="screen-today"] .rest-home-section .rest-preview{
  min-height:116px!important;
  padding:10px 0 4px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview:before,
[data-screen="screen-today"] .rest-home-section .rest-preview:after{
  display:none!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview .art{
  margin-bottom:9px!important;
  font-size:1.25rem!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview h3{
  max-width:100%!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview p{
  max-width:100%!important;
}

/* Headphones icon: line icon, same visual weight as the other nav symbols */
.bottom-nav .rest-nav-icon{
  width:19px!important;
  height:19px!important;
  display:grid!important;
  place-items:center!important;
}
.bottom-nav .rest-nav-icon svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Only the heart remains as the explicit Rest-card action */
[data-screen="screen-rest"] .rest-item-actions{
  min-width:32px!important;
  justify-content:center!important;
}
[data-screen="screen-rest"] .rest-favorite{
  margin:0!important;
}

/* =========================================================
   V50 — complete visual header language + unified nav icons
   ========================================================= */
:root{
  --header-sky:#EDF5F6;
  --header-beige:#F5F0E8;
  --header-butter:#F8F3D9;
  --header-rose:#F7E9E8;
  --header-rose-text:#8D5E64;
}

/* All navigation symbols now use one line-icon language */
.bottom-nav .line-nav-icon,
.bottom-nav .rest-nav-icon{
  width:19px!important;height:19px!important;
  display:grid!important;place-items:center!important;
}
.bottom-nav .line-nav-icon svg,
.bottom-nav .rest-nav-icon svg{
  width:18px!important;height:18px!important;
  fill:none!important;stroke:currentColor!important;
  stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}

/* TODAY — three distinct calm header colors */
[data-screen="screen-today"] .attention-section > .section-title{
  background:var(--header-sky)!important;
}
[data-screen="screen-today"] .upcoming-home-section > .section-title{
  background:var(--header-beige)!important;
}
[data-screen="screen-today"] .rest-home-section > .section-title{
  background:var(--header-butter)!important;
}

/* Compact Rest preview: it no longer has empty-card height */
[data-screen="screen-today"] .rest-home-section{
  padding-bottom:9px!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview{
  min-height:0!important;
  padding:7px 0 3px!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview .art{
  display:inline-block!important;
  margin:0 0 5px!important;
  font-size:1.05rem!important;
  letter-spacing:.12rem!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview h3{
  margin:0 0 2px!important;
  font-size:.91rem!important;
}
[data-screen="screen-today"] .rest-home-section .rest-preview p{
  margin:0!important;
  font-size:.71rem!important;
}

/* UPCOMING — header bands inside the surfaces that actually need separation */
[data-screen="screen-upcoming"] .selected-day-panel,
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
  border:1px solid #E3DFD9!important;
}
[data-screen="screen-upcoming"] .selected-day-panel > .selected-day-title,
[data-screen="screen-upcoming"] .later-group > .section-gate,
[data-screen="screen-upcoming"] .soon-group > .section-gate{
  margin:0 -14px 7px!important;
  padding:12px 14px 11px!important;
  min-height:0!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}
[data-screen="screen-upcoming"] .selected-day-panel > .selected-day-title{
  background:var(--header-sky)!important;
}
[data-screen="screen-upcoming"] .later-group > .section-gate{
  background:var(--header-beige)!important;
}
[data-screen="screen-upcoming"] .soon-group > .section-gate{
  background:var(--header-butter)!important;
}
[data-screen="screen-upcoming"] .selected-day-panel .list-stack,
[data-screen="screen-upcoming"] .later-group .list-stack,
[data-screen="screen-upcoming"] .soon-group .mini-preview{
  margin-top:0!important;
}

/* MONTH — selected-day content gets a soft sky header, grid itself stays clean */
[data-screen="screen-calendar"] .calendar-day-items{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
}
[data-screen="screen-calendar"] .calendar-day-items > .selected-day-title{
  margin:0 -14px 7px!important;
  padding:12px 14px 11px!important;
  background:var(--header-sky)!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}

/* THINGS — the unified task surface gets a clear header band */
[data-screen="screen-things"] .things-natural{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
}
[data-screen="screen-things"] .things-list-heading{
  margin:0 -14px 5px!important;
  padding:12px 14px 11px!important;
  background:var(--header-sky)!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}
[data-screen="screen-things"] .things-list-heading strong{
  font-size:.92rem!important;
  font-weight:820!important;
}

/* REST — header bands only where there is a header/content relationship */
[data-screen="screen-rest"] .rest-suggestion,
[data-screen="screen-rest"] .rest-all-zone{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
  border:1px solid #E3DFD9!important;
  border-inline-start:1px solid #E3DFD9!important;
}
[data-screen="screen-rest"] .rest-suggestion > .rest-suggestion-head,
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  margin:0 -14px 8px!important;
  padding:12px 14px 11px!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}
[data-screen="screen-rest"] .rest-suggestion > .rest-suggestion-head{
  background:var(--header-butter)!important;
}
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  background:var(--header-beige)!important;
}
[data-screen="screen-rest"] .rest-suggestion .rest-item,
[data-screen="screen-rest"] .rest-all-zone .rest-item{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #E8E4DF!important;
  border-radius:0!important;
}
[data-screen="screen-rest"] .rest-all-zone .rest-item:last-child{
  border-bottom:0!important;
}

/* =========================================================
   V51 — behavior + visual polish from real-device review
   ========================================================= */
:root{
  --header-warm-rose:#F7E9E7;
  --header-cool-butter:#F7F1D8;
  --action-beige:#F5F1EA;
}

/* Replace washed-out beige with a warm, very pale rose tied to the + accent */
[data-screen="screen-today"] .upcoming-home-section > .section-title,
[data-screen="screen-upcoming"] .later-group > .section-gate,
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  background:var(--header-warm-rose)!important;
}

/* Collapsible headers: full-width, clean top edge, no strange blank strip */
[data-screen="screen-upcoming"] .later-group > .section-gate,
[data-screen="screen-upcoming"] .soon-group > .section-gate,
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  width:calc(100% + 28px)!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0 -14px 8px!important;
  border-radius:17px 17px 0 0!important;
  overflow:hidden!important;
}
[data-screen="screen-upcoming"] .later-group > .section-gate{background:var(--header-warm-rose)!important}
[data-screen="screen-upcoming"] .soon-group > .section-gate{background:var(--header-cool-butter)!important}

/* Scheduling choices: equal, light beige buttons */
.schedule-actions{
  gap:7px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  padding:0!important;
}
.schedule-actions button,
.schedule-actions button:first-child,
.schedule-actions button:last-child{
  background:var(--action-beige)!important;
  border:1px solid #DDD6CB!important;
  color:#49484A!important;
  border-radius:11px!important;
}

/* Quick-add feedback + clickable upcoming preview */
.upcoming-preview-task{cursor:pointer;padding:5px 0 2px}
.upcoming-preview-task:active{opacity:.72}

/* Hero actions now have clear but calm roles */
.hero .hero-done{
  background:#E5F1F3!important;
  border-color:#CFE2E6!important;
  color:#44656E!important;
}
.hero .help{
  background:#EEE9F6!important;
  border-color:#E0D8EE!important;
  color:#6D627C!important;
}
.hero .swap{
  background:var(--action-beige)!important;
  border-color:#DED7CD!important;
  color:#68625C!important;
}

/* Add and Edit share the same compact waiting-state pattern */
#taskDialog .add-status-row,
#editDialog .edit-status-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:14px!important;
  padding:0 1px!important;
}
#taskDialog .add-status-label,
#editDialog .edit-status-label{
  font-size:.76rem!important;
  font-weight:760!important;
  color:#5F6068!important;
}
#taskDialog .waiting-chip,
#editDialog .waiting-chip{
  width:auto!important;
  min-width:0!important;
  min-height:35px!important;
  padding:7px 15px!important;
  border:1px solid #DDD8D1!important;
  border-radius:999px!important;
  background:#FFF!important;
  color:#59595E!important;
  font-size:.74rem!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#taskDialog .waiting-chip.active,
#editDialog .waiting-chip.active{
  background:#E5F1F3!important;
  border-color:#C8DEE3!important;
  color:#45656D!important;
}
#taskDialog .waiting-chip.disabled,
#taskDialog .waiting-chip:disabled{
  opacity:.38!important;
}
#taskDialog .add-waiting-follow,
#editDialog .edit-waiting-follow{
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:9px!important;
  padding:10px 11px!important;
  border:1px solid #E3DED6!important;
  border-radius:12px!important;
  background:#FAF8F4!important;
  overflow:hidden!important;
}
#taskDialog .add-waiting-follow input,
#editDialog .edit-waiting-follow input{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:44px!important;
  box-sizing:border-box!important;
  margin-top:7px!important;
  padding:6px 10px!important;
  border:1px solid #DDD8D1!important;
  border-radius:10px!important;
  background:#FFF!important;
}

/* When waiting is on, timing remains remembered but is intentionally inactive. */
#whenChips.waiting-disabled,
#editWhenChips.waiting-disabled{
  opacity:.38!important;
}
#whenChips.waiting-disabled .chip,
#editWhenChips.waiting-disabled .chip{
  pointer-events:none!important;
}

/* =========================================================
   V52 — hierarchy + collapsible cleanup + real-life polish
   ========================================================= */
:root{
  --header-warm-blush:#F7E5E0;   /* warm dusty rose, not mauve */
  --header-sky:#EDF5F6;
  --header-butter:#F8F2D7;
  --action-soft:#F3EEE6;
}

/* Replace the washed beige header with a warmer Ghaimah blush */
[data-screen="screen-today"] .upcoming-home-section > .section-title,
[data-screen="screen-upcoming"] .later-group > .section-gate,
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  background:var(--header-warm-blush)!important;
}

/* Home: upcoming is now the short glance immediately after the hero */
[data-screen="screen-today"] .upcoming-home-section{
  cursor:pointer;
}
[data-screen="screen-today"] .upcoming-home-section:active{
  transform:scale(.998);
}

/* Add/Edit status visually behaves like the other form fields */
#taskDialog .status-field,
#editDialog .status-field{
  display:block!important;
  margin-top:17px!important;
  padding:0!important;
}
#taskDialog .status-label,
#editDialog .status-label{
  display:block!important;
  margin:0 0 9px!important;
  padding:0!important;
  font-size:.86rem!important;
  line-height:1.35!important;
  font-weight:820!important;
  color:#25252A!important;
}
#taskDialog .status-field .waiting-chip,
#editDialog .status-field .waiting-chip{
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Waiting means timing is temporarily inactive; don't leave a pink active chip visible */
#whenChips.waiting-disabled .chip,
#editWhenChips.waiting-disabled .chip{
  opacity:.5!important;
  background:#FAF8F5!important;
  border-color:#E3DED7!important;
  color:#8A8783!important;
}
#whenChips.waiting-disabled .chip.active,
#editWhenChips.waiting-disabled .chip.active{
  background:#FAF8F5!important;
  color:#8A8783!important;
  border-color:#E3DED7!important;
}

/* Scheduling buttons: light beige, calm, equal */
.schedule-actions button,
.schedule-actions button:first-child,
.schedule-actions button:last-child{
  background:var(--action-soft)!important;
  border-color:#DED5CA!important;
}

/* Collapsible cards: no width hacks, no stray white side strip */
[data-screen="screen-upcoming"] .later-group,
[data-screen="screen-upcoming"] .soon-group,
[data-screen="screen-rest"] .rest-all-zone{
  padding:0!important;
  overflow:hidden!important;
}
[data-screen="screen-upcoming"] .later-group > .section-gate,
[data-screen="screen-upcoming"] .soon-group > .section-gate,
[data-screen="screen-rest"] .rest-all-zone > .section-gate{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:13px 14px 12px!important;
  border-radius:17px 17px 0 0!important;
  box-sizing:border-box!important;
}
[data-screen="screen-upcoming"] .gate-body,
[data-screen="screen-rest"] .gate-body{
  padding:7px 14px 13px!important;
}
[data-screen="screen-upcoming"] .later-group:not(:has(.gate-body)) > .section-gate,
[data-screen="screen-upcoming"] .soon-group:not(:has(.gate-body)) > .section-gate,
[data-screen="screen-rest"] .rest-all-zone:not(:has(.gate-body)) > .section-gate{
  border-radius:17px!important;
  border-bottom:0!important;
}

/* Monthly calendar gets a dedicated month/year header */
[data-screen="screen-calendar"] .month-card{
  padding:0 12px 12px!important;
  overflow:hidden!important;
}
[data-screen="screen-calendar"] .month-header{
  margin:0 -12px 10px!important;
  padding:12px 14px!important;
  background:var(--header-sky)!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}
[data-screen="screen-calendar"] .month-header strong{
  font-size:.98rem!important;
  font-weight:840!important;
}

/* Keep the month arrows visually secondary */
[data-screen="screen-calendar"] .month-header button{
  background:rgba(255,255,255,.72)!important;
  border:1px solid #DDE8EA!important;
  border-radius:10px!important;
}

/* Hero actions: clear roles without looking disconnected */
.hero .hero-done{
  background:#E3F0F2!important;
  border-color:#CBDDE1!important;
  color:#3E626A!important;
}
.hero .swap{
  background:#F4EEE7!important;
  border-color:#DED4C9!important;
  color:#655E58!important;
}

/* V54 — Ghaimah voice + sourced Quran/Hadith greetings */
.greeting-line span{display:block}
.greeting-line small{
  display:block;
  margin-top:4px;
  font-size:.68rem;
  font-weight:650;
  color:#77777D;
}
.greeting-line.sourced-greeting span{
  font-family:inherit;
  line-height:1.75;
}


/* V56 — automatic day/night scene artwork only.
   The UI itself stays light; only the illustrated page scene changes. */
html[data-scene-time="night"] .app-shell[data-view="today"]::before{
  background-image:url('/images/morning-header-night.jpg?v=57') !important;
}
html[data-scene-time="night"] .app-shell[data-view="upcoming"]::before{
  background-image:url('/images/upcoming-header-night.jpg?v=64') !important;
}
html[data-scene-time="night"] .app-shell[data-view="things"]::before{
  background-image:url('/images/things-header-night.jpg?v=57') !important;
}
html[data-scene-time="night"] .app-shell[data-view="rest"]::before{
  background-image:url('/images/rest-header-night.jpg?v=57') !important;
}

/* Explicit day URLs so all four approved morning scenes are used too. */
html[data-scene-time="day"] .app-shell[data-view="today"]::before{
  background-image:url('/images/morning-header.jpg?v=57') !important;
}
html[data-scene-time="day"] .app-shell[data-view="upcoming"]::before{
  background-image:url('/images/upcoming-header.jpg?v=57') !important;
}
html[data-scene-time="day"] .app-shell[data-view="things"]::before{
  background-image:url('/images/things-header.jpg?v=63') !important;
}
html[data-scene-time="day"] .app-shell[data-view="rest"]::before{
  background-image:url('/images/rest-header.jpg?v=60') !important;
}


/* V57 — show substantially more of the portrait scene artwork.
   Today / Upcoming / Things use the FULL supplied portrait images.
   Rest is intentionally left exactly as it looked in V56. */
.app-shell[data-view="today"]::before,
.app-shell[data-view="upcoming"]::before,
.app-shell[data-view="things"]::before{
  height:clamp(410px,51vh,455px) !important;
  background-size:cover !important;
}

/* Gentle per-scene framing so the important artwork stays visible. */
.app-shell[data-view="today"]::before{
  background-position:center 46% !important;
}
.app-shell[data-view="upcoming"]::before{
  background-position:center 48% !important;
}
.app-shell[data-view="things"]::before{
  background-position:center 52% !important;
}

/* On short iPhones, keep the scene generous without swallowing the page. */
@media (max-height:740px){
  .app-shell[data-view="today"]::before,
  .app-shell[data-view="upcoming"]::before,
  .app-shell[data-view="things"]::before{
    height:390px !important;
  }
}


/* V58 — Today scene only: reveal the top wall note.
   Same image, same header size; only the crop position changes. */
.app-shell[data-view="today"]::before{
  background-position:center 39% !important;
}


/* V59 — Today scene: keep the wall note fully inside the visible crop. */
html body .app-shell[data-view="today"]::before{
  background-position:center 10% !important;
}


/* V61 — QA behavior + hierarchy fixes */
[data-screen="screen-today"] .soon-home-section{
  padding:12px 14px;
  border:1px solid var(--g-line);
  border-radius:16px;
  background:var(--g-panel);
}
[data-screen="screen-today"] .home-soon-list{padding:0!important;overflow:hidden}
[data-screen="screen-today"] .home-soon-card{padding:11px 2px;border-bottom:1px solid rgba(95,96,104,.09)}
[data-screen="screen-today"] .home-soon-card:last-child{border-bottom:0}
[data-screen="screen-today"] .home-soon-card .schedule-actions{margin-top:8px}

.past-group{margin-top:14px}
.past-flat{padding:4px 12px 10px}
.past-action-card{padding:10px 0;border-bottom:1px solid rgba(95,96,104,.09)}
.past-action-card:last-child{border-bottom:0}
.upcoming-empty-inline{padding:13px 2px;color:var(--g-muted);font-size:.75rem}

#editDialog .edit-waiting-follow,
#taskDialog .add-waiting-follow{
  display:block!important;
  position:relative!important;
  width:auto!important;
  max-width:100%!important;
  margin:10px 0 0!important;
  padding:11px 12px!important;
  transform:none!important;
  inset:auto!important;
  align-self:stretch!important;
  overflow:hidden!important;
  direction:rtl!important;
}
#editDialog .edit-waiting-follow label,
#taskDialog .add-waiting-follow label{
  display:block!important;width:100%!important;box-sizing:border-box!important;
  text-align:right!important;margin:0 0 7px!important;
}
#editDialog .edit-waiting-follow input,
#taskDialog .add-waiting-follow input{
  display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
  margin:0!important;box-sizing:border-box!important;transform:none!important;
}
#editWhenChips.waiting-disabled{opacity:1!important}
#editWhenChips.waiting-disabled .chip{pointer-events:auto!important}

.rest-favorite-field{
  position:relative;
  margin:14px 0 4px!important;
  border:1px solid #E0D6CA;
  background:#F7F2EC!important;
}
.rest-favorite-field input{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
}
.rest-favorite-field .rest-heart{
  display:inline-grid;place-items:center;width:25px;height:25px;border-radius:999px;
  margin-left:5px;background:#fff;color:#A97982;font-size:1rem;
}
.rest-favorite-field:has(input:checked){border-color:#D8BEC3;background:#F5E9E9!important}
.rest-favorite-field:has(input:checked) .rest-heart{background:#A97982;color:#fff;font-size:0}
.rest-favorite-field:has(input:checked) .rest-heart::before{content:"♥";font-size:.8rem}
.rest-save{margin-top:10px!important}


/* =========================================================
   V62 — bucket order + consistent card language + Things fade
   ========================================================= */

/* Home: "في بالك قريب" and "لما أفضى" now use the same card system
   as Upcoming / Attention / Rest instead of a one-off surface. */
[data-screen="screen-today"] .soon-home-section,
[data-screen="screen-today"] .free-home-section{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
  border:1px solid #E3DFD9!important;
  border-inline-start:1px solid #E3DFD9!important;
  border-radius:18px!important;
  box-shadow:0 5px 16px rgba(37,37,42,.025)!important;
}
[data-screen="screen-today"] .soon-home-section > .section-title,
[data-screen="screen-today"] .free-home-section > .section-title{
  margin:0 -14px 7px!important;
  padding:12px 14px 11px!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
}
[data-screen="screen-today"] .soon-home-section > .section-title{
  background:var(--header-butter)!important;
}
[data-screen="screen-today"] .free-home-section > .section-title{
  background:var(--header-sky)!important;
}
[data-screen="screen-today"] .soon-home-section .section-surface,
[data-screen="screen-today"] .free-home-section .section-surface{
  margin-top:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
[data-screen="screen-today"] .home-soon-card{
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid #E8E4DF!important;
  border-radius:0!important;
  background:transparent!important;
}
[data-screen="screen-today"] .home-soon-card:last-child{border-bottom:0!important}
[data-screen="screen-today"] .free-home-section .card{
  margin:0!important;
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid #E8E4DF!important;
  border-radius:0!important;
  background:transparent!important;
}
[data-screen="screen-today"] .free-home-section .card:last-child{border-bottom:0!important}

/* Upcoming: "من الأيام اللي فاتت" is a peer card, not a special one-off. */
[data-screen="screen-upcoming"] .past-group{
  padding:0 14px 13px!important;
  overflow:hidden!important;
  background:#FFF!important;
  border:1px solid #E3DFD9!important;
  border-radius:17px!important;
  box-shadow:0 5px 16px rgba(37,37,42,.025)!important;
}
[data-screen="screen-upcoming"] .past-group > .section-gate{
  width:auto!important;
  max-width:none!important;
  margin:0 -14px 7px!important;
  padding:12px 14px 11px!important;
  min-height:0!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(37,37,42,.055)!important;
  background:var(--header-sky)!important;
}
[data-screen="screen-upcoming"] .past-group .past-flat{
  padding:0!important;
}
[data-screen="screen-upcoming"] .past-group .past-action-card{
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid #E8E4DF!important;
  border-radius:0!important;
  background:transparent!important;
}
[data-screen="screen-upcoming"] .past-group .past-action-card:last-child{
  border-bottom:0!important;
}

/* Aشيائي: stronger image-to-page fade so the artwork never ends in a hard line. */
.app-shell[data-view="things"]::before{
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,.88) 66%,
    rgba(0,0,0,.55) 76%,
    rgba(0,0,0,.20) 88%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,.88) 66%,
    rgba(0,0,0,.55) 76%,
    rgba(0,0,0,.20) 88%,
    transparent 100%
  )!important;
}

/* With six Things filters, keep the horizontal strip comfortable. */
[data-screen="screen-things"] .things-filters button{
  min-width:auto!important;
  padding-inline:11px!important;
}


/* =========================================================
   V63 — date fix + Things scene framing
   ========================================================= */

/* أشيائي had a baked-in white footer in the source image.
   V63 removes that footer from the asset and uses a shorter, softer scene. */
.app-shell[data-view="things"]::before{
  height:clamp(340px,40vh,370px)!important;
  margin-bottom:-86px!important;
  background-position:center 48%!important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0,0,0,.92) 57%,
    rgba(0,0,0,.68) 69%,
    rgba(0,0,0,.38) 80%,
    rgba(0,0,0,.14) 91%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0,0,0,.92) 57%,
    rgba(0,0,0,.68) 69%,
    rgba(0,0,0,.38) 80%,
    rgba(0,0,0,.14) 91%,
    transparent 100%
  )!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}


/* =========================================================
   V65 — one vertical rhythm across all main screens
   ========================================================= */

/* The old 24px shell padding created an extra blank strip above the artwork.
   Keep iOS' own safe area, but remove our duplicated top gap. */
.app-shell{
  padding-top:0!important;
}

/* All four main scenes occupy the same visual stage.
   Their artwork/crop may differ, but page content now starts from one baseline. */
.app-shell::before,
.app-shell[data-view="today"]::before,
.app-shell[data-view="upcoming"]::before,
.app-shell[data-view="things"]::before,
.app-shell[data-view="rest"]::before{
  height:clamp(390px,44vh,420px)!important;
  margin-top:0!important;
  margin-bottom:-72px!important;
}

/* Keep Things' custom soft fade, but not its old shorter/taller page geometry. */
.app-shell[data-view="things"]::before{
  height:clamp(390px,44vh,420px)!important;
  margin-bottom:-72px!important;
}

/* Each page content area begins at the same point under the scene. */
.app-shell[data-view="today"] .view,
.app-shell[data-view="upcoming"] .view,
.app-shell[data-view="things"] .view,
.app-shell[data-view="rest"] .view{
  margin-top:0!important;
  padding-top:0!important;
}

/* Remove accumulated mixed gap systems. One consistent rhythm instead. */
.view{
  gap:0!important;
}

/* TODAY */
[data-screen="screen-today"] .quick-add{
  margin-bottom:16px!important;
}
[data-screen="screen-today"] .hero{
  margin-bottom:0!important;
}
[data-screen="screen-today"] .section{
  margin-top:16px!important;
}

/* UPCOMING */
[data-screen="screen-upcoming"] .upcoming-head{
  margin-bottom:14px!important;
}
[data-screen="screen-upcoming"] .week-picker{
  margin-bottom:0!important;
}
[data-screen="screen-upcoming"] .upcoming-group{
  margin-top:16px!important;
}

/* THINGS */
[data-screen="screen-things"] .things-head{
  margin-bottom:14px!important;
}
[data-screen="screen-things"] .things-search{
  margin:0 0 14px!important;
}
[data-screen="screen-things"] .things-filters{
  margin-top:0!important;
  margin-bottom:14px!important;
}
[data-screen="screen-things"] .things-natural{
  margin-top:0!important;
}

/* REST */
[data-screen="screen-rest"] .rest-head{
  margin-bottom:16px!important;
}
[data-screen="screen-rest"] .rest-suggestion{
  margin-top:0!important;
  margin-bottom:16px!important;
}
[data-screen="screen-rest"] .rest-all-zone{
  margin-top:0!important;
}

/* On shorter phones, preserve the same baseline instead of shrinking one
   scene differently from the others. */
@media(max-height:740px){
  .app-shell::before,
  .app-shell[data-view="today"]::before,
  .app-shell[data-view="upcoming"]::before,
  .app-shell[data-view="things"]::before,
  .app-shell[data-view="rest"]::before{
    height:380px!important;
    margin-bottom:-68px!important;
  }
}


/* =========================================================
   V66 — Today baseline alignment
   ========================================================= */

/* Today was still pushed lower by old greeting margins from V12/V37.
   Align the greeting block with the same post-scene baseline as the other pages. */
.app-shell[data-view="today"] .topbar{
  margin-top:0!important;
  margin-bottom:18px!important;
}

/* Keep the first Home control immediately after the greeting, without the old extra view gap. */
.app-shell[data-view="today"] .view{
  margin-top:0!important;
  padding-top:0!important;
}


/* =========================================================
   V67 — Home spacing matched to Upcoming
   ========================================================= */

/* Use the same 12px card rhythm that already feels right on Upcoming. */
[data-screen="screen-today"] .quick-add{
  margin:0 0 12px!important;
}
[data-screen="screen-today"] .hero{
  margin:0!important;
}
[data-screen="screen-today"] .section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .soon-home-section,
[data-screen="screen-today"] .free-home-section,
[data-screen="screen-today"] .light-section,
[data-screen="screen-today"] .rest-home-section{
  margin-top:12px!important;
  margin-bottom:0!important;
}

/* Remove old extra margins hiding inside the special Home blocks. */
[data-screen="screen-today"] .light-section{
  margin-bottom:0!important;
}
[data-screen="screen-today"] .section-title{
  margin-bottom:0!important;
}
[data-screen="screen-today"] .section-surface{
  margin-top:0!important;
}


/* =========================================================
   V68 — clean Today layout reset
   ========================================================= */

/* Today should begin on the same baseline as the titles on the other pages.
   The greeting IS the page header, so keep it directly under the scene. */
.app-shell[data-view="today"] .topbar{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  margin:0 5px 12px!important;
  padding:0!important;
}

/* Keep the motivational line inside the greeting block only — never drifting
   into the quick-add field below it. */
.app-shell[data-view="today"] .topbar > div{
  display:block!important;
  width:100%!important;
}
.app-shell[data-view="today"] .topbar .eyebrow{
  margin:0 0 3px!important;
}
.app-shell[data-view="today"] .topbar h1{
  margin:0!important;
}
.app-shell[data-view="today"] .greeting-line{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:6px 0 0!important;
  padding:0!important;
  line-height:1.55!important;
  transform:none!important;
}
.app-shell[data-view="today"] .greeting-line span,
.app-shell[data-view="today"] .greeting-line small{
  position:static!important;
}

/* One spacing system for every direct block on Home.
   Old accumulated per-section margins are neutralized here. */
.app-shell[data-view="today"] .view{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin:0!important;
  padding-top:0!important;
}
.app-shell[data-view="today"] .view > *{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* The quick add is just another block in the flow, not a spacing exception. */
[data-screen="screen-today"] .quick-add{
  margin:0!important;
}

/* Kill leftover margins inside Home sections that made some gaps look doubled. */
[data-screen="screen-today"] .section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .soon-home-section,
[data-screen="screen-today"] .free-home-section,
[data-screen="screen-today"] .light-section,
[data-screen="screen-today"] .rest-home-section{
  margin:0!important;
}


/* =========================================================
   V69 — Home baseline + spacing matched to the other pages
   ========================================================= */

/* Home is the only page whose title/greeting lives in .topbar.
   Pull that block upward into the same visual baseline used by
   القادم / أشيائي / استراحة, instead of letting it consume
   an extra row below the scene. */
.app-shell[data-view="today"] .topbar{
  margin:-58px 5px 16px!important;
  padding:0!important;
}

/* Keep the greeting stack compact and self-contained. */
.app-shell[data-view="today"] .topbar .eyebrow{
  margin:0 0 2px!important;
}
.app-shell[data-view="today"] .topbar h1{
  margin:0!important;
  line-height:1.25!important;
}
.app-shell[data-view="today"] .greeting-line{
  margin:5px 0 0!important;
  line-height:1.5!important;
}

/* The previous V68 10px rhythm was too tight on real iPhone.
   Match the calmer spacing seen on Upcoming. */
.app-shell[data-view="today"] .view{
  gap:18px!important;
}

/* All direct Home blocks participate in that one gap system only. */
.app-shell[data-view="today"] .view > *{
  margin:0!important;
}

/* Prevent old internal section margins from reappearing. */
[data-screen="screen-today"] .section,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .soon-home-section,
[data-screen="screen-today"] .free-home-section,
[data-screen="screen-today"] .light-section,
[data-screen="screen-today"] .rest-home-section{
  margin:0!important;
}

/* Quick add / hero also rely on the same outer 18px rhythm. */
[data-screen="screen-today"] .quick-add,
[data-screen="screen-today"] .hero{
  margin:0!important;
}


/* =========================================================
   V70 — structural Home fix (not another margin patch)
   ========================================================= */

/* The old global topbar is now hidden on Home too.
   Home's title/greeting lives inside #view just like the other pages,
   so all page content truly starts from the same baseline. */
.app-shell[data-view="today"] > .topbar{
  display:none!important;
}

/* Home page header now follows the exact same document flow as
   القادم / أشيائي / استراحة. */
[data-screen="screen-today"] .today-page-head{
  margin:0!important;
  padding:0 2px!important;
}
[data-screen="screen-today"] .today-page-date{
  margin:0 0 3px!important;
  color:#6F7078!important;
  font-size:.78rem!important;
  line-height:1.4!important;
}
[data-screen="screen-today"] .today-page-head h1{
  margin:0!important;
  font-size:1.42rem!important;
  line-height:1.3!important;
  font-weight:850!important;
  color:#25252A!important;
}
[data-screen="screen-today"] .today-page-line{
  margin:5px 0 0!important;
  color:#5F6068!important;
  font-size:.78rem!important;
  line-height:1.5!important;
}
[data-screen="screen-today"] .today-page-line small{
  display:block!important;
  margin-top:3px!important;
  color:#77777D!important;
  font-size:.68rem!important;
}

/* Match Upcoming's comfortable vertical rhythm. */
.app-shell[data-view="today"] .view{
  gap:16px!important;
}
.app-shell[data-view="today"] .view > *{
  margin:0!important;
}


/* =========================================================
   V71 — Home contrast + clearer card separation
   ========================================================= */

/* The date was too pale against the faded scene. */
[data-screen="screen-today"] .today-page-date{
  color:#4F5057!important;
  font-weight:700!important;
}

/* Give Home a little more breathing room without going back to the huge gaps. */
.app-shell[data-view="today"] .view{
  gap:18px!important;
}

/* Make each Home surface read as its own card with a subtle lift.
   No heavy shadow, just enough separation from the next card. */
[data-screen="screen-today"] .hero,
[data-screen="screen-today"] .upcoming-home-section,
[data-screen="screen-today"] .attention-section,
[data-screen="screen-today"] .soon-home-section,
[data-screen="screen-today"] .free-home-section,
[data-screen="screen-today"] .light-section,
[data-screen="screen-today"] .rest-home-section{
  box-shadow:0 5px 14px rgba(37,37,42,.045)!important;
  border-color:#DEDAD4!important;
}

/* Quick add should still feel lighter than the cards below it. */
[data-screen="screen-today"] .quick-add{
  box-shadow:0 3px 10px rgba(37,37,42,.025)!important;
  border-color:#E3DED8!important;
}

/* A tiny visual break under each card helps when several pale cards stack. */
[data-screen="screen-today"] .hero::after,
[data-screen="screen-today"] .upcoming-home-section::after,
[data-screen="screen-today"] .attention-section::after,
[data-screen="screen-today"] .soon-home-section::after,
[data-screen="screen-today"] .free-home-section::after,
[data-screen="screen-today"] .light-section::after,
[data-screen="screen-today"] .rest-home-section::after{
  content:""!important;
  display:block!important;
  height:1px!important;
  margin:10px 18px -12px!important;
  background:rgba(95,96,104,.055)!important;
  border:0!important;
  position:static!important;
}

/* V75 — lightweight settings */
[data-screen="screen-things"] .things-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important}
.settings-open{width:40px;height:40px;flex:0 0 40px;border:1px solid #dedad4;border-radius:13px;background:#fff;color:#586b72;font-size:1.1rem}
.settings-sheet{background:#fbfaf7!important;padding:18px 16px calc(24px + env(safe-area-inset-bottom))!important}
.settings-card{background:#fff;border:1px solid #e4e0db;border-radius:18px;padding:14px;margin-top:12px}
.settings-card strong{display:block;font-size:.92rem}.settings-card small{display:block;margin-top:4px;color:#6e6f76;font-size:.72rem;line-height:1.55}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-link-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.account-link-box input{min-width:0;width:100%;border:1px solid #e3dfd9;border-radius:12px;background:#f8f6f2;padding:10px;font-size:.66rem;direction:ltr;text-align:left}
.account-link-box button,.settings-secondary{border:1px solid #d7e4e7;background:#eaf3f4;color:#46636b;border-radius:12px;padding:10px 12px;font-weight:800;font-size:.72rem}
.settings-secondary{width:100%;margin-top:12px}
.sync-status-badge{border-radius:999px;padding:6px 9px;font-size:.66rem;font-weight:800;background:#f1f0ed;color:#66676d}
.sync-status-badge[data-state="ok"]{background:#e8f1ea;color:#55705c}.sync-status-badge[data-state="offline"]{background:#f6ede1;color:#8a6b49}.sync-status-badge[data-state="syncing"]{background:#eaf3f4;color:#4e6870}
.settings-note{margin:12px 4px 0;color:#77777d;font-size:.69rem;line-height:1.65}


/* V76 — mandatory first-use email recovery */
.account-gate{
  position:fixed;
  inset:0;
  z-index:5000;
  background:#f8f5ef;
  padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
  overflow:auto;
}
.account-gate[hidden]{display:none!important}
.account-gate-card{
  width:min(100%,430px);
  min-height:calc(100dvh - 48px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 8px;
}
.account-gate-cloud{
  width:58px;height:58px;
  display:grid;place-items:center;
  margin:0 auto 18px;
  border-radius:18px;
  background:#eaf3f4;
  font-size:30px;
}
.gate-step{text-align:right}
.gate-step h1{
  margin:4px 0 8px;
  font-size:1.55rem;
  color:#25252a;
}
.gate-step>p{
  margin:0 0 20px;
  color:#666870;
  line-height:1.75;
  font-size:.88rem;
}
.gate-kicker{
  display:block;
  color:#6c858c;
  font-size:.72rem;
  font-weight:800;
}
.gate-field span{
  display:block;
  font-size:.74rem;
  font-weight:800;
  margin:0 2px 7px;
  color:#52535a;
}
.gate-field input,.gate-code{
  width:100%;
  box-sizing:border-box;
  border:1px solid #ddd9d2;
  background:#fff;
  border-radius:15px;
  min-height:49px;
  padding:0 14px;
  color:#25252a;
  outline:none;
  font-size:.9rem;
}
.gate-field input:focus,.gate-code:focus{
  border-color:#adc7cd;
  box-shadow:0 0 0 3px rgba(173,199,205,.18);
}
.gate-code{
  direction:ltr;
  text-align:center;
  letter-spacing:9px;
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:12px;
}
.gate-primary,.gate-secondary,.gate-text{
  width:100%;
  border:0;
  border-radius:15px;
  min-height:49px;
  font-weight:800;
  font-family:inherit;
}
.gate-primary{
  margin-top:12px;
  background:#dcebed;
  color:#36555e;
}
.gate-secondary{
  margin-top:9px;
  background:#fff;
  border:1px solid #dedad4;
  color:#55575d;
}
.gate-text{
  margin-top:8px;
  background:transparent;
  color:#6b6c72;
  min-height:40px;
}
.gate-primary:disabled,.gate-secondary:disabled{opacity:.6}
.gate-help{
  margin-top:10px!important;
  font-size:.71rem!important;
  color:#85868b!important;
}
.gate-message{
  margin-top:14px;
  padding:10px 12px;
  border-radius:12px;
  background:#f7e9e7;
  color:#8a514c;
  font-size:.75rem;
  line-height:1.5;
  text-align:center;
}
.gate-message[data-type="success"]{
  background:#e8f1ea;
  color:#55705c;
}
.linked-email-check{
  min-width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:999px;
  background:#e8f1ea;
  color:#55705c;
  font-weight:900;
}


/* V77 — visible settings entry + Spam/Junk notice */
.settings-open-labeled{
  width:auto!important;
  min-width:92px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  font-size:.73rem!important;
  font-weight:800!important;
  white-space:nowrap;
}
.settings-open-labeled > span:first-child{
  font-size:1rem;
  line-height:1;
}
.settings-subtitle{
  margin:3px 0 0;
  color:#777980;
  font-size:.7rem;
}
.gate-mail-warning{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #eadfce;
  background:#fbf6ee;
  border-radius:13px;
  color:#6f6254;
  font-size:.73rem;
  line-height:1.55;
}
.gate-mail-warning strong{
  display:block;
  margin-bottom:3px;
  color:#5d5145;
}
.gate-mail-warning span{
  display:block;
}
.gate-mail-warning b{
  direction:ltr;
  unicode-bidi:isolate;
}




/* V79 — discreet app menu */
.today-page-head{position:relative}
.app-menu-wrap{
  position:absolute;
  top:0;
  left:0;
  z-index:12;
}
.app-menu-btn{
  width:36px;
  height:36px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.78);
  color:#62656b;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  line-height:1;
  padding:0 0 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.app-menu-popover{
  position:absolute;
  top:42px;
  left:0;
  min-width:138px;
  padding:6px;
  border:1px solid #e3dfd8;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(41,43,47,.10);
}
.app-menu-popover[hidden]{display:none!important}
.app-menu-popover button{
  width:100%;
  border:0;
  background:transparent;
  border-radius:10px;
  padding:10px 12px;
  text-align:right;
  color:#3f4248;
  font-family:inherit;
  font-size:.78rem;
  font-weight:800;
}
.app-menu-popover button:active{
  background:#f4f2ee;
}
[data-screen="screen-things"] .things-head{display:block!important}


/* V80 — email can be linked later */
.gate-later{
  color:#76787e;
  margin-top:4px;
}
#linkEmailFromSettings[hidden],
#linkedEmailCheck[hidden]{
  display:none!important;
}


/* V81 — cleaner top-left overflow button */
.app-menu-wrap{
  top:-2px!important;
  left:4px!important;
}
.app-menu-btn{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0 0 9px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#C86F78!important;
  border-radius:0!important;
  font-size:1.55rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.app-menu-btn:active{
  transform:scale(.94);
  opacity:.72;
}


/* V82 — fixes */
.gate-later-visible{
  display:block!important;
  width:100%!important;
  margin-top:9px!important;
  background:#fff!important;
  border:1px solid #dedad4!important;
  color:#666970!important;
  min-height:47px!important;
  font-weight:800!important;
}
.app-menu-wrap{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 6px)!important;
  left:10px!important;
  right:auto!important;
  z-index:999!important;
}
.app-menu-btn{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0 0 9px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#C86F78!important;
  border-radius:0!important;
  font-size:1.6rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.app-menu-popover{
  top:38px!important;
  left:0!important;
}


/* V83 — top menu stays with page, not viewport */
.app-menu-wrap{
  position:absolute!important;
  top:calc(env(safe-area-inset-top) + 6px)!important;
  left:10px!important;
  right:auto!important;
  z-index:999!important;
}
.gate-start-later{
  margin-top:4px!important;
  color:#74767c!important;
  font-weight:800!important;
}

/* V84 — true top-left menu */
body{position:relative!important}
.app-menu-wrap{
  position:absolute!important;
  top:calc(env(safe-area-inset-top) + 6px)!important;
  left:10px!important;
  right:auto!important;
  z-index:5000!important;
}
.app-menu-btn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#C86F78!important;
}


/* V86 — full-bleed top artwork; settings menu only on Today */
html,body{
  padding-top:0!important;
  margin-top:0!important;
}
body{
  padding-top:0!important;
}
.app-shell,
#app,
#view,
.screen,
.page,
.today-page{
  padding-top:0!important;
  margin-top:0!important;
}
.scene,
.page-scene,
.header-scene,
.hero-scene,
.today-scene,
.top-scene,
.screen-hero,
.page-hero{
  margin-top:0!important;
  top:0!important;
}
.today-page-head{
  position:relative!important;
}
.today-page-head .app-menu-wrap{
  position:absolute!important;
  top:8px!important;
  left:10px!important;
  right:auto!important;
  z-index:50!important;
}
.app-menu-btn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#C86F78!important;
}


/* V87 — real top alignment, no fake safe-area gap */
html,body{
  margin:0!important;
  padding-top:0!important;
}
body{
  padding:0 0 env(safe-area-inset-bottom) 0!important;
}
.app-shell{
  padding-top:0!important;
}
.app-shell::before{
  margin-top:0!important;
}
.topbar{
  top:12px!important;
}
@media (min-width:700px){
  .topbar{
    top:18px!important;
  }
}

/* Global menu shown only on Home, anchored at real top-left of app */
#appMenuWrap.app-menu-wrap,
.app-menu-wrap#appMenuWrap{
  position:absolute!important;
  top:10px!important;
  left:10px!important;
  z-index:999!important;
}
.app-menu-btn{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#C86F78!important;
  font-size:1.65rem!important;
  line-height:1!important;
  font-weight:900!important;
  padding:0 0 8px!important;
}
.app-menu-popover{
  top:36px!important;
  left:0!important;
}


/* =========================================================
   V88 — true full-bleed iOS header + clean bottom navigation
   ========================================================= */

/* The scene itself extends behind iPhone's status bar.
   Safe-area is used only for tappable controls, not as blank space. */
html,body{
  margin:0!important;
  padding:0!important;
  min-height:100%!important;
}
body{
  padding-bottom:env(safe-area-inset-bottom)!important;
}
.app-shell{
  padding-top:0!important;
  margin-top:0!important;
}
.app-shell::before{
  margin-top:0!important;
}

/* Three-dot control sits below the status icons while the IMAGE stays behind them. */
#appMenuWrap.app-menu-wrap{
  position:absolute!important;
  top:calc(env(safe-area-inset-top) + 5px)!important;
  left:12px!important;
  z-index:999!important;
}

/* Bottom navigation: one clean baseline, equal spacing, smaller/lighter shell. */
.bottom-nav{
  position:fixed!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  width:calc(100% - 28px)!important;
  max-width:520px!important;
  height:70px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  gap:0!important;
  padding:6px 8px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(222,218,214,.95)!important;
  box-shadow:0 10px 30px rgba(45,42,45,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.bottom-nav .nav-item{
  height:56px!important;
  padding:5px 2px 4px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:0!important;
  background:transparent!important;
  color:#969399!important;
  line-height:1!important;
  transform:none!important;
}
.bottom-nav .nav-item .nav-icon{
  width:23px!important;
  height:23px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  font-size:0!important;
}
.bottom-nav .nav-item .nav-icon svg{
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.bottom-nav .nav-item small{
  margin:0!important;
  font-size:.66rem!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  font-weight:600!important;
}
.bottom-nav .nav-item.active{
  color:#303038!important;
  font-weight:800!important;
}
.bottom-nav .nav-item.active small{
  font-weight:800!important;
}

/* Center add button belongs to the same visual system instead of floating black box. */
.bottom-nav .add-main{
  justify-self:center!important;
  align-self:center!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:17px!important;
  background:#C86F78!important;
  color:#fff!important;
  font-size:1.7rem!important;
  line-height:1!important;
  font-weight:400!important;
  box-shadow:0 7px 18px rgba(200,111,120,.22)!important;
}

/* enough content clearance for the refined navigation */
.app-shell{
  padding-bottom:calc(98px + env(safe-area-inset-bottom))!important;
}


/* V90 — narrower bottom navigation */
.bottom-nav{
  width:calc(100% - 72px)!important;
  max-width:420px!important;
  height:64px!important;
  padding:5px 7px!important;
  border-radius:22px!important;
  bottom:calc(9px + env(safe-area-inset-bottom))!important;
}
.bottom-nav .nav-item{
  height:52px!important;
  gap:2px!important;
  padding:4px 1px 3px!important;
}
.bottom-nav .nav-item .nav-icon{
  width:21px!important;
  height:21px!important;
}
.bottom-nav .nav-item .nav-icon svg{
  width:20px!important;
  height:20px!important;
}
.bottom-nav .nav-item small{
  font-size:.61rem!important;
}
.bottom-nav .add-main{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  border-radius:15px!important;
  font-size:1.55rem!important;
}
.app-shell{
  padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
}


/* =========================================================
   V91 — Upcoming empty state + navigation vertical-only trim
   ========================================================= */

/* Keep the bar wide like V89, but slimmer vertically. */
.bottom-nav{
  width:calc(100% - 28px)!important;
  max-width:520px!important;
  height:60px!important;
  padding:4px 8px!important;
  border-radius:22px!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
}
.bottom-nav .nav-item{
  height:48px!important;
  padding:3px 2px!important;
  gap:2px!important;
}
.bottom-nav .nav-item .nav-icon{
  width:20px!important;
  height:20px!important;
}
.bottom-nav .nav-item .nav-icon svg{
  width:19px!important;
  height:19px!important;
}
.bottom-nav .nav-item small{
  font-size:.61rem!important;
}
.bottom-nav .add-main{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-radius:14px!important;
  font-size:1.5rem!important;
}
.app-shell{
  padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
}

/* The Later empty state belongs in the content area, not the card header. */
[data-screen="screen-upcoming"] .upcoming-empty-inline{
  padding:12px 2px 4px!important;
  color:var(--g-muted)!important;
  font-size:.73rem!important;
  line-height:1.5!important;
}


/* =========================================================
   V92 — Later header cleanup + remove empty Home tail
   ========================================================= */

/* Safe area is already handled by the fixed navigation. */
body{
  padding-bottom:0!important;
}

/* Keep just enough clearance for the nav, without a large empty tail. */
.app-shell{
  min-height:100svh!important;
  padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
}

/* Home has no reason to carry the larger page tail when its content is short. */
.app-shell[data-view="today"]{
  padding-bottom:calc(66px + env(safe-area-inset-bottom))!important;
}

/* If Later has no items, the heading stays clean: title + expand/collapse only. */
[data-screen="screen-upcoming"] .later-group .section-gate span > small:empty{
  display:none!important;
}

/* =========================================================
   V94 — calendar preference + truly viewport-fixed nav
   ========================================================= */

/* The nav now lives directly under body so page height/content can never move it. */
body > .bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  width:calc(100% - 28px)!important;
  max-width:520px!important;
  height:60px!important;
  z-index:9000!important;
}

.calendar-settings-card{display:flex;align-items:center;justify-content:space-between;gap:14px}
.calendar-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#f3f1ee;padding:4px;border-radius:13px;min-width:145px}
.calendar-mode-toggle button{border:0;background:transparent;color:var(--g-muted,#6e6f76);padding:8px 12px;border-radius:10px;font:inherit;font-size:.72rem;font-weight:700}
.calendar-mode-toggle button.active{background:#fff;color:var(--g-ink,#25252a);box-shadow:0 1px 4px rgba(40,38,40,.08)}

.calendar-native-hidden{display:none!important}
.hijri-date-field{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);font:inherit;text-align:right;min-height:46px}
.hijri-date-field[hidden]{display:none!important}
.hijri-date-dialog .hijri-picker-inner{padding:0 22px 26px}
.hijri-select-grid{display:grid;grid-template-columns:.75fr 1.35fr 1fr;gap:8px;margin-top:8px}
.hijri-select-grid label{display:flex;flex-direction:column;gap:6px}
.hijri-select-grid label span{font-size:.68rem;color:var(--muted);font-weight:700}
.hijri-select-grid select{width:100%;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);padding:11px 8px;font:inherit;font-size:.78rem}
.hijri-picker-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:18px}
.hijri-picker-actions .settings-secondary,.hijri-picker-actions .primary{margin:0;width:100%;padding:12px 10px}
@media(max-width:420px){
  .calendar-settings-card{align-items:flex-start;flex-direction:column}
  .calendar-mode-toggle{width:100%}
  .hijri-select-grid{grid-template-columns:.7fr 1.3fr 1fr}
}


/* V96 — safe short-page viewport fix */
.app-shell{
  min-height:100dvh!important;
}

.hero-empty-guide{
  margin:4px 0 0!important;
  font-size:.82rem!important;
  line-height:1.65!important;
  font-weight:500!important;
  color:var(--muted,#6f7078)!important;
}


/* V98 — exactly one date control is visible in add/edit sheets */
input.calendar-native-hidden,
input[type="date"][hidden],
.hijri-date-field[hidden]{
  display:none!important;
}
.hijri-date-field{
  display:block;
  width:100%!important;
  box-sizing:border-box!important;
  min-height:48px!important;
  margin-top:8px!important;
  text-align:right!important;
}


/* V99 — Hijri calendar date picker */
.hijri-date-dialog .hijri-picker-inner{
  padding:0 18px calc(22px + env(safe-area-inset-bottom));
}
.hijri-calendar-picker{
  margin-top:4px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:14px 12px 12px;
}
.hijri-picker-nav{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.hijri-picker-nav strong{
  text-align:center;
  font-size:.92rem;
}
.hijri-picker-nav button{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f6f3f0;
  color:var(--ink);
  font:inherit;
  font-size:1.05rem;
}
.hijri-picker-weekdays,
.hijri-picker-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
}
.hijri-picker-weekdays{
  margin-bottom:6px;
}
.hijri-picker-weekdays span{
  text-align:center;
  font-size:.66rem;
  font-weight:700;
  color:var(--muted);
  padding:5px 0;
}
.hijri-picker-grid{
  direction:rtl;
}
.hijri-picker-day,
.hijri-picker-empty{
  aspect-ratio:1/1;
}
.hijri-picker-day{
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.82rem;
  display:grid;
  place-items:center;
}
.hijri-picker-day.today{
  box-shadow:inset 0 0 0 1px #c8dfe5;
}
.hijri-picker-day.selected{
  background:#dfeff3;
  color:#385b65;
  font-weight:800;
  box-shadow:none;
}
.hijri-picker-actions{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:8px;
  margin-top:14px;
}
.hijri-picker-actions .settings-secondary,
.hijri-picker-actions .primary{
  margin:0;
  width:100%;
  padding:12px 10px;
}

/* V101 — OneSignal push settings */
.push-settings-note{
  display:block;
  margin-top:8px;
  line-height:1.6;
  color:var(--muted);
  font-size:.72rem;
}
#enablePushNotifications:disabled{
  opacity:.65;
  cursor:default;
}


/* V102 — task reminders */
.task-time-wrap{
  margin-top:10px;
}
.task-time-wrap label,
.custom-reminder-wrap label{
  display:block;
  margin-bottom:6px;
  font-size:.76rem;
  font-weight:700;
  color:var(--muted);
}
.task-time-wrap input,
.custom-reminder-wrap input{
  width:100%;
  box-sizing:border-box;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  padding:8px 12px;
  font:inherit;
  color:var(--ink);
}
.reminder-wrap{
  margin:15px 0 4px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.66);
}
.reminder-label{
  margin:0 0 9px!important;
}
.reminder-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.reminder-chips .chip{
  flex:0 0 auto;
}
.reminder-chips .chip:disabled,
.reminder-chips .chip.disabled{
  opacity:.38;
}
.custom-reminder-wrap{
  margin-top:10px;
}
.reminder-hint{
  display:block;
  min-height:1.2em;
  margin-top:7px;
  color:var(--muted);
  font-size:.69rem;
  line-height:1.5;
}


/* V103 — iPhone datetime-local containment */
.sheet form,
.reminder-wrap,
.custom-reminder-wrap{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.custom-reminder-wrap{
  width:100%!important;
  overflow:hidden!important;
}
.custom-reminder-wrap input[type="datetime-local"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  -webkit-appearance:none;
  appearance:none;
}
.push-test-button{
  margin-top:8px!important;
}

/* V106 — simpler reminder UI */
.task-time-wrap{display:none!important;}
.reminder-wrap{padding:12px 13px!important;}
.reminder-hint{margin-top:6px!important;}

/* V108 — clean reminder control, no emoji */
.simple-reminder{
  padding:0!important;
  overflow:hidden!important;
}
.simple-reminder-toggle{
  width:100%;
  border:0;
  background:transparent;
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
  text-align:right;
}
.reminder-line-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
}
.reminder-line-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.reminder-line-copy{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.reminder-line-copy strong{font-size:.9rem;}
.reminder-line-copy small{font-size:.68rem;color:var(--muted);}
.reminder-switch{
  width:38px;
  height:22px;
  border-radius:999px;
  background:#e7e5e3;
  position:relative;
  transition:.18s ease;
}
.reminder-switch::after{
  content:"";
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:.18s ease;
}
.simple-reminder-toggle.active .reminder-switch{background:#d8afb8;}
.simple-reminder-toggle.active .reminder-switch::after{transform:translateX(-16px);}
.simple-reminder-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  padding:0 13px 13px;
}
.simple-reminder-field{min-width:0;}
.simple-reminder-field label{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
}
.simple-reminder-field input{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:8px 10px;
  font:inherit;
  color:var(--ink);
}
.reminder-hidden-datetime{display:none!important;}
.add-status-field.hidden,
.edit-status-field.hidden{display:none!important;}


/* V110 — safe UI-only fix */

/* The old stylesheet had a later display:block!important rule that overrode .hidden.
   Hidden follow-up dates must actually stay hidden until متابعة is enabled. */
#taskDialog .add-waiting-follow.hidden,
#editDialog .edit-waiting-follow.hidden{
  display:none!important;
}

/* One native date+time picker on mobile/desktop, while legacy split fields remain
   in the DOM only so the already-stable JS can keep working unchanged. */
.single-reminder-picker{
  grid-template-columns:1fr!important;
}
.single-reminder-picker .reminder-legacy-part{
  display:none!important;
}
.single-reminder-picker .reminder-native-picker{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.single-reminder-picker .reminder-native-picker input[type="datetime-local"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  min-height:46px!important;
  margin:0!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
}


/* V112 — install prompt */
.install-banner{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 8px);
  left:14px;
  right:14px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 8px 7px 10px;
  border:1px solid rgba(92,104,110,.12);
  border-radius:16px;
  background:rgba(249,251,251,.96);
  box-shadow:0 8px 24px rgba(40,49,54,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.install-banner[hidden]{display:none!important;}
.install-banner-main{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px;
  color:var(--ink);
  text-align:right;
  font:inherit;
}
.install-banner-main span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:1px;
}
.install-banner-main strong{font-size:.78rem;}
.install-banner-main small{font-size:.64rem;color:var(--muted);}
.install-banner-icon{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#e6f2f5;color:#587983;font-size:.9rem;
}
.install-banner-close{
  border:0;background:transparent;color:var(--muted);
  width:30px;height:30px;font-size:1.15rem;
}
.install-help-body,.push-help-body{
  padding:4px 4px 12px;
  line-height:1.8;
}
.install-help-body p,.push-help-body p{margin:0 0 8px;}
.install-help-body small,.push-help-body small{color:var(--muted);}

/* V112 — reminder permission warning */
.reminder-push-warning{
  display:block;
  margin:0 13px 12px;
  padding:8px 10px;
  border-radius:11px;
  background:#fff6e8;
  color:#7a6548;
  font-size:.69rem;
  line-height:1.55;
}
.reminder-push-warning[hidden]{display:none!important;}

/* Recovery shortcut */
#recoverLinkedEmail[hidden]{display:none!important;}

.reminder-frequency{display:flex;gap:7px;padding:0 13px 10px;}
.reminder-frequency.hidden{display:none!important;}
.reminder-frequency .chip{flex:0 0 auto;}

/* V114 — contact row */
.settings-row-button{
  width:100%;
  border:0;
  background:transparent;
  font:inherit;
  color:inherit;
  text-align:right;
}
.settings-row-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.settings-row-copy small{
  color:var(--muted);
  font-size:.68rem;
}
.settings-row-arrow{
  margin-inline-start:auto;
  color:var(--muted);
  font-size:1.15rem;
}


/* V115 — opaque helper sheets on iPhone */
.install-help-dialog,
.push-help-dialog{
  background:#fffdfb!important;
  color:var(--ink)!important;
  opacity:1!important;
  border:0!important;
  box-shadow:0 -10px 40px rgba(30,34,38,.14)!important;
}
.install-help-dialog::backdrop,
.push-help-dialog::backdrop{
  background:rgba(30,34,38,.32)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.install-help-dialog .sheet-head,
.push-help-dialog .sheet-head{
  padding-inline:22px!important;
}
.install-help-body,
.push-help-body{
  padding:4px 22px 22px!important;
}
.install-help-body p,
.push-help-body p{
  color:var(--ink)!important;
}

/* Contact belongs with the rest of Settings, not in the header */
.contact-settings-card{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  text-align:right!important;
  color:var(--ink)!important;
  font:inherit!important;
  cursor:pointer;
}
.contact-settings-card .settings-row-copy{
  align-items:flex-start;
}
.contact-settings-card .settings-row-arrow{
  flex:0 0 auto;
  font-size:1.25rem;
}

/* Reminder picker: prevent iOS native time/datetime controls from overflowing */
.simple-reminder{
  min-width:0!important;
}
.single-reminder-picker{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding-inline:13px!important;
}
.single-reminder-picker .reminder-native-picker{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.single-reminder-picker .reminder-native-picker input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:9px 10px!important;
  min-height:46px!important;
  direction:ltr!important;
  text-align:left!important;
  overflow:hidden!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
}
#addReminderHint,
#editReminderHint{
  display:block!important;
  width:auto!important;
  max-width:calc(100% - 26px)!important;
  box-sizing:border-box!important;
  margin:0 13px 12px!important;
  padding:0!important;
  line-height:1.65!important;
  white-space:normal!important;
  overflow:visible!important;
}


/* V116 — compact reminder picker on iPhone */
.single-reminder-picker{
  overflow:visible!important;
}
.single-reminder-picker .reminder-native-picker{
  width:auto!important;
  max-width:100%!important;
}
.native-reminder-control{
  position:relative;
  width:220px;
  max-width:100%;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  box-sizing:border-box;
  overflow:hidden;
}
.native-reminder-placeholder{
  display:block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
  color:var(--ink);
  font-size:.82rem;
  pointer-events:none;
}
.native-reminder-control input[type="datetime-local"],
.native-reminder-control input[type="time"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
  z-index:2!important;
}
.single-reminder-picker .reminder-native-picker label{
  margin-bottom:7px!important;
}
@media (max-width:430px){
  .native-reminder-control{
    width:210px;
  }
}

/* Helper dialog copy stays clear and platform-specific */
#installHelpText{
  margin:0!important;
}


/* V117 — unified date/time field color */
:root{
  --date-time-field-bg:#FBF4DE;
  --date-time-field-border:#E8DDB9;
}

/* Task date field shown under "في هذا اليوم / قبل هذا اليوم" */
#taskDateWrap input[type="date"],
#editDateWrap input[type="date"],
#taskDate,
#editDate{
  background:var(--date-time-field-bg)!important;
  border-color:var(--date-time-field-border)!important;
}

/* Reminder field shown under "مرة واحدة / كل يوم" */
.native-reminder-control{
  background:var(--date-time-field-bg)!important;
  border-color:var(--date-time-field-border)!important;
}

/* Follow-up dates use the same family for consistency */
#addWaitingFollowDate,
#waitingFollowDate{
  background:var(--date-time-field-bg)!important;
  border-color:var(--date-time-field-border)!important;
}


/* V118 — softer unified date/time field tone */
:root{
  --date-time-field-bg:#F7F3EA;
  --date-time-field-border:#E7E0D5;
}

#taskDateWrap input[type="date"],
#editDateWrap input[type="date"],
#taskDate,
#editDate,
.native-reminder-control,
#addWaitingFollowDate,
#waitingFollowDate{
  background:var(--date-time-field-bg)!important;
  border-color:var(--date-time-field-border)!important;
}

.native-reminder-control{
  box-shadow:none!important;
}


/* V120 — clear account-conflict flow */
.gate-conflict-notice{
  margin:0 0 14px;
  padding:13px 14px;
  border-radius:14px;
  background:#F7E7E4;
  color:#83514C;
  text-align:right;
  line-height:1.55;
}
.gate-conflict-notice[hidden],
.gate-conflict-actions[hidden]{
  display:none!important;
}
.gate-conflict-notice strong,
.gate-conflict-notice span{
  display:block;
}
.gate-conflict-notice span{
  margin-top:2px;
  font-size:.78rem;
}
.gate-conflict-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.gate-conflict-actions small{
  display:block;
  color:var(--muted);
  line-height:1.6;
  font-size:.72rem;
  padding-inline:4px;
}


/* V121 — visible relink request status */
.relink-status{
  padding:10px 12px;
  border-radius:12px;
  background:#F8F2E8;
  color:#74624E;
  font-size:.74rem;
  line-height:1.55;
}
.relink-status[hidden]{display:none!important;}


/* V122 — clearer "more items" control below card lists */
.home-more-button{
  display:block;
  width:max-content;
  max-width:100%;
  margin:9px auto 0;
  padding:7px 12px;
  border:0;
  background:transparent;
  color:var(--secondary,#5F6068);
  font:inherit;
  font-size:.74rem;
  font-weight:700;
  text-align:center;
}
.home-more-button:active{
  opacity:.65;
}


/* V127 — privacy info */
.privacy-dialog-body{
  padding:4px 2px 10px;
}
.privacy-dialog-body p{
  margin:0 0 12px;
  line-height:1.9;
  color:var(--primary,#25252A);
  font-size:.9rem;
}
.privacy-dialog-body p:last-child{
  margin-bottom:0;
}
.privacy-settings-card{
  align-items:stretch;
}


/* V128 — privacy sheet must be fully opaque like the other helper sheets */
.privacy-dialog{
  background:#fffdfb!important;
  color:var(--ink)!important;
  opacity:1!important;
  border:0!important;
  box-shadow:0 -10px 40px rgba(30,34,38,.14)!important;
}
.privacy-dialog::backdrop{
  background:rgba(30,34,38,.32)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.privacy-dialog .sheet-head{
  padding-inline:22px!important;
}
.privacy-dialog-body{
  padding:4px 22px 22px!important;
  background:#fffdfb!important;
}


/* V129 — share product link */
.share-product-card{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  text-align:right!important;
  color:var(--ink)!important;
  font:inherit!important;
  cursor:pointer;
}
.share-product-card .settings-row-copy{
  align-items:flex-start;
}
.share-product-card .settings-row-arrow{
  flex:0 0 auto;
  font-size:1.25rem;
}


/* V130 — iPad / tablet responsive polish
   Goal: preserve mobile behavior, improve layout from ~700px to ~1180px.
   No redesign, no content/logic changes. */

@media (min-width: 700px) and (max-width: 1180px){

  body{
    padding-inline:24px;
  }

  /* Keep primary app content centered and comfortably wide. */
  .app-shell,
  main,
  .page,
  .view,
  .screen,
  #app,
  #pageRoot{
    max-width:980px;
    margin-inline:auto;
  }

  /* Home / page sections: wider but not stretched edge-to-edge. */
  .content,
  .page-content,
  .home-content,
  .upcoming-content,
  .things-content,
  .rest-content{
    max-width:940px;
    margin-inline:auto;
  }

  /* Keep headers balanced on tablet. */
  .topbar,
  .page-head,
  .home-head,
  .upcoming-head{
    max-width:940px;
    margin-inline:auto;
  }

  /* Let section cards breathe on iPad. */
  .section{
    margin-top:18px;
    margin-bottom:18px;
  }

  .section-surface,
  .hero,
  .card,
  .soon-action-card,
  .week-day,
  .settings-card{
    border-radius:24px;
  }

  /* Main dashboard: use a restrained 2-column layout only where sections
     already behave as independent blocks. */
  .home-sections,
  .dashboard-sections,
  .home-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }

  /* Hero/quick-add style sections should remain full width. */
  .home-sections > .hero,
  .home-sections > .quick-add,
  .home-sections > .rest-home-section,
  .dashboard-sections > .hero,
  .dashboard-sections > .quick-add,
  .dashboard-sections > .rest-home-section,
  .home-grid > .hero,
  .home-grid > .quick-add,
  .home-grid > .rest-home-section{
    grid-column:1 / -1;
  }

  /* If no wrapper grid exists in a build, individual sections remain unchanged.
     Narrow task rows slightly for readability. */
  .task-row{
    min-height:64px;
  }

  .task-title{
    font-size:1rem;
    line-height:1.6;
  }

  .meta,
  .task-note-preview{
    font-size:.8rem;
  }

  /* "Ashiay" filters/search become more comfortable on tablet. */
  .things-search,
  .search-wrap,
  .filters,
  .filter-row,
  .chips{
    max-width:940px;
  }

  /* Calendar / upcoming layouts should not become overly wide. */
  .calendar-wrap,
  .month-view,
  .week-strip,
  #upcomingContent,
  #thingsContent,
  #restContent{
    max-width:940px;
    margin-inline:auto;
  }

  /* Bottom navigation: tablet width and spacing, still floating and familiar. */
  .bottom-nav{
    width:min(720px,calc(100% - 56px))!important;
    max-width:720px!important;
    height:64px!important;
    padding:8px 12px!important;
    grid-template-columns:1fr 1fr 78px 1fr 1fr!important;
    border-radius:28px!important;
    bottom:max(16px,env(safe-area-inset-bottom))!important;
  }

  .nav-item{
    min-height:48px;
    justify-content:center;
  }

  .nav-item small{
    font-size:.66rem;
  }

  .add-main{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
    transform:none!important;
    align-self:center!important;
  }

  /* Give pages a little more room above the nav. */
  .app-shell,
  main,
  .page,
  .view,
  .screen{
    padding-bottom:96px;
  }

  /* Bottom sheets/dialogs: centered, wider and calmer on tablet. */
  dialog.sheet{
    width:min(680px,calc(100% - 48px))!important;
    max-width:680px!important;
    max-height:min(82dvh,760px)!important;
    border-radius:28px 28px 0 0!important;
  }

  #settingsDialog,
  #taskDialog,
  #editDialog,
  #privacyDialog,
  #installHelpDialog,
  #pushHelpDialog,
  #hijriDateDialog{
    width:min(680px,calc(100% - 48px))!important;
    max-width:680px!important;
  }

  /* Account gate: avoid a tiny phone card in the middle of an iPad screen. */
  .account-gate{
    padding:32px!important;
  }

  .account-gate-card{
    width:min(620px,100%)!important;
    max-width:620px!important;
    padding:28px!important;
    border-radius:28px!important;
  }

  /* Hero scenes: preserve crop but reduce extreme height on landscape tablets. */
  .home-scene,
  .scene-hero,
  .rest-hero,
  .things-hero,
  .upcoming-hero{
    max-height:360px;
  }
}

@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape){
  body{
    padding-inline:36px;
  }

  .app-shell,
  main,
  .page,
  .view,
  .screen,
  #app,
  #pageRoot{
    max-width:1040px;
  }

  .content,
  .page-content,
  .home-content,
  .upcoming-content,
  .things-content,
  .rest-content,
  .topbar,
  .page-head,
  .home-head,
  .upcoming-head,
  .calendar-wrap,
  .month-view,
  .week-strip,
  #upcomingContent,
  #thingsContent,
  #restContent{
    max-width:1000px;
  }

  .bottom-nav{
    width:min(760px,calc(100% - 72px))!important;
    max-width:760px!important;
  }

  dialog.sheet,
  #settingsDialog,
  #taskDialog,
  #editDialog,
  #privacyDialog,
  #installHelpDialog,
  #pushHelpDialog,
  #hijriDateDialog{
    width:min(720px,calc(100% - 72px))!important;
    max-width:720px!important;
  }
}


/* V131 — tablet width correction
   Use the iPad canvas properly instead of keeping the old 760px phone shell.
   Also restore the Upcoming title/month button to their original edges. */

@media (min-width:700px) and (max-width:1180px){

  html,body{
    width:100%;
    overflow-x:hidden;
  }

  body{
    padding-inline:0!important;
  }

  .app-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 28px 118px!important;
  }

  /* Let the illustrated scene reach the tablet edges while content keeps
     a comfortable inner gutter. */
  .app-shell::before{
    margin-left:-28px!important;
    margin-right:-28px!important;
    width:auto!important;
    border-radius:0 0 32px 32px!important;
  }

  /* The previous pass constrained these as if they were still a phone page.
     On tablet the actual page should use the available width. */
  .view,
  .content,
  .page-content,
  .home-content,
  .upcoming-content,
  .things-content,
  .rest-content,
  #upcomingContent,
  #thingsContent,
  #restContent{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }

  .view{
    padding-inline:0!important;
  }

  /* Header blocks should align with page edges, not shrink-wrap in the center. */
  .topbar,
  .page-head,
  .home-head,
  .upcoming-head{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }

  /* Restore Upcoming's original right/left placement:
     title on the right, "عرض الشهر" on the opposite edge. */
  [data-screen="screen-upcoming"] .upcoming-head.simple{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:right!important;
  }

  [data-screen="screen-upcoming"] .upcoming-head.simple > div{
    margin:0!important;
    flex:0 0 auto!important;
  }

  [data-screen="screen-upcoming"] .upcoming-head.simple .page-title{
    margin:0!important;
    text-align:right!important;
  }

  [data-screen="screen-upcoming"] .calendar-open{
    margin:0!important;
    flex:0 0 auto!important;
  }

  /* Tablet cards can grow naturally; keep readable inner padding rather
     than narrowing the whole page. */
  [data-screen="screen-today"] .hero,
  [data-screen="screen-today"] .section,
  [data-screen="screen-upcoming"] .upcoming-group,
  [data-screen="screen-things"] .things-natural,
  [data-screen="screen-rest"] .rest-suggestion,
  [data-screen="screen-rest"] .rest-all-zone{
    width:100%!important;
    max-width:none!important;
  }

  .bottom-nav{
    width:min(760px,calc(100% - 64px))!important;
    max-width:760px!important;
  }
}

@media (min-width:900px) and (max-width:1180px) and (orientation:landscape){

  .app-shell{
    padding-left:40px!important;
    padding-right:40px!important;
  }

  .app-shell::before{
    margin-left:-40px!important;
    margin-right:-40px!important;
  }

  /* Landscape gets a genuinely tablet-sized canvas. */
  .view,
  .content,
  .page-content,
  .home-content,
  .upcoming-content,
  .things-content,
  .rest-content,
  #upcomingContent,
  #thingsContent,
  #restContent{
    width:100%!important;
    max-width:none!important;
  }

  .bottom-nav{
    width:min(820px,calc(100% - 96px))!important;
    max-width:820px!important;
  }

  dialog.sheet,
  #settingsDialog,
  #taskDialog,
  #editDialog,
  #privacyDialog,
  #installHelpDialog,
  #pushHelpDialog,
  #hijriDateDialog{
    width:min(760px,calc(100% - 96px))!important;
    max-width:760px!important;
  }
}