/*
  The one font of the app and the site: Baloo Bhaijaan 2 (SIL OFL),
  self-hosted in assets/fonts/baloo-bhaijaan-2/ — same two faces as the
  site's tokens.css (Arabic-script file for Persian, Latin file for
  English, each loaded only when its characters appear). Variable,
  weights 400–800.
*/
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../../assets/fonts/baloo-bhaijaan-2/BalooBhaijaan2-Arabic-VF.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../../assets/fonts/baloo-bhaijaan-2/BalooBhaijaan2-Latin-VF.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
  Brand palette: https://coolors.co/palette/000000-14213d-fca311-e5e5e5-ffffff
  — same tokens as the marketing site's tokens.css, swapped in here too so
  the demo matches it graphically (repo owner's request). --primary flips
  per theme for contrast, same accessible-pair pattern as tokens.css'
  --color-accent: navy-on-white in light, orange-on-black in dark (plain
  orange text/bg fails WCAG against both white and black). --on-primary is
  the text color for anything with background:var(--primary).
*/
:root{
  /* Without this, native form controls (the week-start-day <select>'s
     own dropdown list, scrollbars, etc.) default to the OS/browser's
     light chrome regardless of our custom colors — a plain white
     dropdown panel popping up over this otherwise all-dark app. */
  color-scheme: dark;
  --bg:#000000;
  --bg-soft:#0D0D0D;
  --card:#14213D;
  --primary:#FCA311;
  --primary-soft:rgba(252,163,17,0.16);
  --on-primary:#000000;
  --secondary:#FFFFFF;
  --text:#FFFFFF;
  --text-muted:rgba(255,255,255,0.6);
  --border:rgba(255,255,255,0.12);
  --nav-bg:#0D0D0D;
  --nav-icon:rgba(255,255,255,0.45);
  --overlay:rgba(0,0,0,0.55);
  --shadow:0 10px 30px rgba(0,0,0,0.45);
  --danger:#E08578;
  --danger-soft:rgba(224,133,120,0.16);
  --pms:#E0A458;
  --pms-soft:rgba(224,164,88,0.16);
  /* Selected task/subtask/habit row (long-press / right-click) and task
     date ranges on the calendar: brand orange in both themes. */
  --select-ring:rgba(252,163,17,0.85);
  --select-glow:rgba(252,163,17,0.45);
  --select-lift:0 16px 34px -12px rgba(0,0,0,0.65);
  --range-band:rgba(252,163,17,0.16);
  --period-ring-rest:rgba(255,255,255,0.14);
  /* header buttons sit on the navy banner in both themes */
  --on-banner:#FFFFFF;
  --banner-btn-bg:rgba(255,255,255,0.12);
  --banner-btn-bg-hover:rgba(255,255,255,0.22);
  --banner-btn-border:rgba(255,255,255,0.35);
  --range-mark:#FCA311;
  --on-range-mark:#000000;
  /* Google's brand button is fixed white/dark-grey by their own brand
     guidelines, independent of app theme — not a themed surface. */
  --google-btn-bg:#FFFFFF;
  --google-btn-text:#1F1F1F;
  /* Theme picker previews (Settings > General): each palette's own four
     colors, fixed whatever palette is active. */
  --swatch-toojibee-1:#2E2910; --swatch-toojibee-2:#2C5745; --swatch-toojibee-3:#EBE3A7; --swatch-toojibee-4:#EB7D00;
  --swatch-classic-1:#000000; --swatch-classic-2:#14213D; --swatch-classic-3:#E5E5E5; --swatch-classic-4:#FCA311;
  --holiday:#E08578;
  /* Period phase colors (period.css' palette), also needed outside the
     period desk: the calendar's phase capsules (calendar.css). */
  --period-flow:#FF84BA; --period-pms:#FFDF82; --period-fertile:#99C2FF;
  --phase-capsule-strength:13%; /* just a shadow of the phase color */
  --phase-focus-strength:26%;   /* the phase picked on the period ring */
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#E5E5E5;
  --bg-soft:#EFEFEF;
  --card:#FFFFFF;
  --primary:#14213D;
  --primary-soft:rgba(20,33,61,0.12);
  --on-primary:#FFFFFF;
  --secondary:#FCA311;
  --text:#000000;
  --text-muted:rgba(0,0,0,0.6);
  --border:rgba(20,33,61,0.16);
  --nav-bg:#FFFFFF;
  --nav-icon:rgba(0,0,0,0.45);
  --overlay:rgba(0,0,0,0.35);
  --shadow:0 10px 30px rgba(20,33,61,0.18);
  /* The dark-theme coral/amber are too pale for text on white (~2-2.6:1);
     darker shades of the same hues reach ~4.5:1. */
  --danger:#C0492F;
  --danger-soft:rgba(192,73,47,0.14);
  --pms:#A86A12;
  --pms-soft:rgba(168,106,18,0.14);
  --select-ring:rgba(232,137,10,0.9);
  --select-glow:rgba(252,163,17,0.40);
  --select-lift:0 16px 30px -12px rgba(20,33,61,0.35);
  --range-band:rgba(252,163,17,0.20);
  --period-ring-rest:rgba(20,33,61,0.12);
  --holiday:#C0492F;
  --phase-capsule-strength:20%;
  --phase-focus-strength:36%;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  font-family:'Baloo Bhaijaan 2',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; min-height:100dvh; color:var(--text);
  box-sizing:border-box;
}
/* Base text-align default for fa — inherited, so plain paragraphs,
   card descriptions and labels read right-aligned like Persian text
   expects, without touching layout/flex-direction at all (unlike dir
   or the `direction` property, which would re-trigger the same
   flex-reordering domino this file already hit once — see the fixes
   above this). Anything that needs to stay centered or left (empty-
   hint, URLs, numeric/LTR fields) already sets its own explicit
   text-align, which wins over this inherited default regardless. */
.device.lang-fa{ font-family:'Baloo Bhaijaan 2',system-ui,Tahoma,sans-serif; text-align:right; }
/* Hint paragraphs are plain text: let each take its direction from its
   own words so a Persian sentence's final "." lands on the left. */
.device.lang-fa .empty-hint{ unicode-bidi:plaintext; }
/* Full-bleed at every width — no phone-bezel chrome, no visible frame
   around the app, matching body background so there's no seam even
   when centered under the desktop max-width below. Exactly the real
   viewport height so the page itself never needs to scroll — 100vh on
   a real mobile browser is the height with the address bar collapsed,
   taller than what's actually visible on load, which pushed the
   bottom-fixed nav (FAB/profile/capsule, all positioned relative to
   this element) below the fold until the user scrolled once. 100dvh
   tracks the real visible height instead; the 100vh above it is just
   the fallback for browsers that don't support dvh yet. */
.device{
  width:100%; height:100vh; height:100dvh; background:var(--bg);
  position:relative; overflow:hidden; border-radius:0; box-shadow:none;
  display:flex; flex-direction:column;
}
.hidden{ display:none !important; }
:root[data-theme="light"] .theme-toggle-btn .icon-sun{ opacity:0; transform:translate(-50%,-50%) rotate(90deg) scale(.4); }
:root[data-theme="light"] .theme-toggle-btn .icon-moon{ opacity:1; transform:translate(-50%,-50%) rotate(0deg) scale(1); }
:root[data-theme="light"] .brand-mark-img{ filter:invert(1); }
/* ===== Desktop layout (>=960px): calendar + home side by side =====
   Below 960px, #page-home is the single merged Calendar+Home page (see
   .home-cal-widget), Menu opens from the hamburger as a full-screen
   overlay, and Add is a floating button. At 960px+ the phone chrome
   drops, #page-calendar reappears as its own column next to #page-home,
   Menu becomes a right-edge icon rail + slide-in panel, and Add stays a
   floating button. Both breakpoints render everything into the DOM on
   every render() call — only CSS decides what's visible where. */
@media (min-width: 960px){
/* The whole app shell is viewport-locked here too (no outer scroll) —
   each column scrolls internally, same principle as the phone frame. */
body{ align-items:flex-start; }
.device{
  width:100%; max-width:1200px; height:100vh; max-height:none;
  border-radius:0; box-shadow:none; overflow:hidden;
}
}