/* laya house style — the allindia / dpkpnm look as ready-made tags, so every
   app (and every Gemini experiment, see PROMPT.md) looks like one family:
   warm paper, white rounded cards, big heavy type, small uppercase labels,
   pastel squircle icons with thin line drawings. Flat: no gradients, no
   glows, no drop shadows. Load after laya.css.

   <lphone> <lscreen>
     <ltitle>Today's <b>Plan</b></ltitle>
     <h2>Section</h2>
     <lcards> <lcard tint style="--t:var(--t-mint)"><lname>App</lname><strong>Big line</strong><small>detail</small></lcard> </lcards>
     <lrow><licon style="--t:var(--t-mint)"><svg>…</svg></licon><span><b>Title</b><small>detail</small></span></lrow>
     <lpills><button on>One</button><button>Two</button></lpills>
     <button big>Do the thing</button>
   </lscreen> </lphone>
   <lsheet hidden><lpanel><header><b>Title</b><button close>✕</button></header>…</lpanel></lsheet>  */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --paper: #f1f0ec; --card: #ffffff; --ink: #1b1b1d; --label: #6e6e73; --dim: #8a8a8e; --line: #dedcd5;
  /* pastel tints for icons and soft cards */
  --t-rose: #f7d5dc; --t-violet: #e3dbf7; --t-peach: #f8dccf; --t-mint: #d5ede0; --t-pink: #f9dcea; --t-sand: #fbe6c8;
  --t-sky: #d6e8f6; --t-teal: #d3e9ef; --t-amber: #f8e5cb; --t-red: #fbd9d3; --t-lemon: #f8edc6; --t-blue: #c9d8f5;
  --l-bg: var(--paper); --l-fg: var(--ink); --l-dim: var(--dim); --l-surface: var(--card); --l-border: var(--line); --l-mute: var(--paper);
  --l-font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --l-font-label: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --l-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
html[theme="dark"] {
    --paper: #0e0e10; --card: #1c1c1f; --ink: #f2f1ee; --label: #a1a1a6; --dim: #85858a; --line: #2a2a2e;
    --l-bg: var(--paper); --l-fg: var(--ink); --l-dim: var(--dim); --l-surface: var(--card); --l-border: var(--line); --l-mute: var(--paper);
}
@media (prefers-color-scheme: dark) {
  html:not([theme="light"]):not([theme="dark"]) {
    --paper: #0e0e10; --card: #1c1c1f; --ink: #f2f1ee; --label: #a1a1a6; --dim: #85858a; --line: #2a2a2e;
    --l-bg: var(--paper); --l-fg: var(--ink); --l-dim: var(--dim); --l-surface: var(--card); --l-border: var(--line); --l-mute: var(--paper);
  }
}

html, body { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--l-font-body); -webkit-tap-highlight-color: transparent; }
lphone { background: var(--paper); color: var(--ink); }
* { box-sizing: border-box; }

/* the page: scrolls inside the phone, 16px gutters */
lscreen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 34px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); overflow-y: auto; overscroll-behavior: contain; }
lscreen > * { flex-shrink: 0; }

/* big title — light and heavy words mixed, uppercase, like a calendar page */
ltitle { display: block; padding: 0 6px; font: 400 1.85rem/1.02 var(--l-font-display); letter-spacing: -.02em; text-transform: uppercase; }
ltitle b { font-weight: 900; }

/* section label */
lscreen h2 { margin: 26px 6px 12px; font: 800 .74rem var(--l-font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }

/* cards: two columns, 30px corners; [tall] spans two rows, [wide] two columns, [dark] inverts */
lcards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; grid-auto-flow: dense; gap: 12px; }
lcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px; border-radius: 30px; background: var(--card); color: var(--ink); overflow: hidden; cursor: pointer; transition: transform .18s var(--l-spring); }
lcard:active { transform: scale(.96); }
lcard[tall] { grid-row: span 2; }
lcard[wide] { grid-column: span 2; }
lcard[dark] { background: #1b1b1d; color: #fff; }
lcard[tint] { background: var(--t); color: #1b1b1d; }
lcard[tint] small, lcard[tint] lname { color: rgba(27,27,29,.62); }
lcard lname { position: absolute; top: 16px; left: 16px; font: 600 .78rem var(--l-font-label); color: var(--dim); }
lcard strong { font: 900 1.35rem/1.1 var(--l-font-display); letter-spacing: -.02em; }
lcard small { font: 500 .85rem/1.35 var(--l-font-label); color: var(--label); }
lcard[dark] small { color: rgba(255,255,255,.7); }
@media (prefers-color-scheme: dark) {
  html:not([theme="light"]):not([theme="dark"]) lcard[dark] { background: #f2f1ee; color: #1b1b1d; }
  html:not([theme="light"]):not([theme="dark"]) lcard[dark] small { color: rgba(27,27,29,.62); }
}
html[theme="dark"] lcard[dark] { background: #f2f1ee; color: #1b1b1d; }
html[theme="dark"] lcard[dark] small { color: rgba(27,27,29,.62); }

/* list rows: icon, title + detail — hairlines between, no boxes */
lrow { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
lrow:last-child { border-bottom: 0; }
lrow:active { opacity: .6; }
lrow > span { flex: 1; min-width: 0; }
lrow b { display: block; font: 700 1rem/1.3 var(--l-font-label); }
lrow small { display: block; font: 500 .85rem/1.35 var(--l-font-label); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* icon: a pastel squircle (--t) with a thin dark line drawing (24×24 viewBox) */
licon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 30%; background: var(--t, var(--t-sand)); color: #1b1b1d; }
licon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* pills: a choice among a few — outline, [on] filled */
lpills { display: flex; flex-wrap: wrap; gap: 8px; }
lpills button { padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 99px; background: none; color: var(--ink); font: 700 .9rem var(--l-font-label); cursor: pointer; }
lpills button[on] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* the one main action */
button[big] { display: block; width: 100%; padding: 16px; border: 0; border-radius: 99px; background: var(--ink); color: var(--paper); font: 800 1rem var(--l-font-display); cursor: pointer; transition: transform .18s var(--l-spring); }
button[big]:active { transform: scale(.97); }

/* bottom sheet over the screen */
lsheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0,0,0,.35); }
lsheet lpanel { display: block; width: 100%; max-height: calc(100% - env(safe-area-inset-top, 0px) - 24px); overflow-y: auto; padding: 22px 22px calc(env(safe-area-inset-bottom, 0px) + 28px); border-radius: 30px 30px 0 0; background: var(--paper); animation: lsheetup .28s cubic-bezier(.2,.8,.2,1); }
@keyframes lsheetup { from { transform: translateY(100%); } }
lsheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
lsheet header b { font: 900 1.9rem var(--l-font-display); letter-spacing: -.03em; }
lsheet header button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-size: 1rem; cursor: pointer; }

/* inputs */
lscreen input[type="search"], lscreen input[type="text"], lsheet input[type="text"] { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: 500 1rem var(--l-font-label); outline: none; -webkit-appearance: none; }