/* ==========================================================================
   HSC Smart Study Planner — style.css
   একটা "পড়ার রুটিন শিট": সাদা কাগজ, নীল বলপেন, আর একটা লাল কারেকশন রুল।
   রং বা স্পেসিং বদলাতে চাইলে নিচের :root ব্লকটাই যথেষ্ট।
   ========================================================================== */

/* ---------- ১. ফন্ট (নিজের ফোল্ডারে রাখা, তাই নেট ছাড়াও কাজ করে) ---------- */

@font-face {
  font-family: 'Noto Serif Bengali';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-serif-bengali-600-bengali.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
    U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
  font-family: 'Noto Serif Bengali';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-serif-bengali-600-latin.woff2') format('woff2');
  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-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/noto-sans-bengali-bengali.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
    U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/noto-sans-bengali-latin.woff2') format('woff2');
  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-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- ২. রং ও মাপ (ডিজাইন টোকেন) ---------- */

:root {
  color-scheme: light;

  /* কাগজ আর কালি */
  --paper: #ffffff;
  --desk: #e9eff9;
  --ink: #0f2544;
  --ink-soft: #4c6182;
  --ink-faint: #5d7192;
  --rule: #ccd9ea;

  /* রুটিনের নীল — সব প্রধান কাজ এই রঙে */
  --blue: #1a46c8;
  --blue-deep: #123089;
  --blue-wash: #e8eefc;

  /* কারেকশন লাল — শুধু মুছে ফেলা আর ভুলের জন্য, সাজসজ্জার জন্য নয় */
  --red: #b3251d;
  --red-wash: #fdeceb;

  --radius: 14px;          /* কার্ড */
  --radius-control: 11px;  /* ইনপুট, বাটন */
  --shadow: 0 1px 2px rgba(15, 37, 68, .06), 0 6px 16px -8px rgba(15, 37, 68, .18);
  --shadow-lift: 0 2px 5px rgba(15, 37, 68, .08), 0 13px 26px -12px rgba(15, 37, 68, .28);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-body: 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Noto Serif Bengali', 'Noto Sans Bengali', Georgia, serif;
}

/* ---------- ৩. বেসিক সেটআপ ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  padding: 18px 14px 30px;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;              /* বাংলা অক্ষরের জন্য একটু বেশি লাইন-হাইট */
  font-variant-numeric: tabular-nums;
}

/* ব্রাউজারের নিজের অংশগুলোও এই রঙের দুনিয়ার */
::selection { background: var(--blue); color: #fff; }
input, button { caret-color: var(--blue); accent-color: var(--blue); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.sheet { width: 100%; max-width: 34rem; margin: 0 auto; }

/* ---------- ৪. মাথার অংশ + দুই লাইনের নোটিস রুল ---------- */

.masthead { padding-bottom: 16px; }

.masthead__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 5.4vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.masthead__subtitle {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 500;
}

/* নোটিসের নিচের দাগ: মোটা কালি, তারপর চুলের মতো সরু রুল */
.masthead::after {
  content: '';
  display: block;
  margin-top: 14px;
  height: 3px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* ---------- ৫. মোট পড়ার সময় (শিটের যোগফল) ---------- */

.total {
  margin: 18px 0;
  padding: 12px 16px;
  background: var(--blue-wash);
  border-block: 1px solid var(--blue);
}

.total__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.total__label { font-size: .95rem; font-weight: 600; }

.total__value { color: var(--blue-deep); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

.total__unit { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }

/* মোট সংখ্যা বদলালে সেটা গড়িয়ে আসে — বাড়লে উপরে ওঠে, কমলে নিচে নামে */
.total__value.is-swapping { animation-duration: 400ms; animation-timing-function: var(--ease); }
.total__value.is-swapping.is-rolling-up { animation-name: roll-up; }
.total__value.is-swapping.is-rolling-down { animation-name: roll-down; }

@keyframes roll-up {
  from { opacity: 0; transform: translateY(.55em); }
  to   { opacity: 1; transform: none; }
}

@keyframes roll-down {
  from { opacity: 0; transform: translateY(-.55em); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ৬. কার্ড ---------- */

.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card + .card { margin-top: 16px; }

.card__label { font-size: .95rem; font-weight: 700; margin-bottom: 13px; }

/* ---------- ৭. ফর্ম ---------- */

.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; position: relative; }

/* ইনপুটে ক্লিক করলে নিচে নীল দাগ টানা হয় — যেন কলম দিয়ে দাগ কাটা হচ্ছে */
.field::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease), background-color 200ms var(--ease);
}

.field:focus-within::after { transform: scaleX(1); }

/* ভুল থাকলে দাগটা লাল — কলমের রং বদলায় */
.field:has(input[aria-invalid='true'])::after { background: var(--red); }

.field label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }

.field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;               /* ১rem না হলে iPhone-এ লেখার সময় স্ক্রিন জুম হয় */
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.field input::placeholder { color: var(--ink-faint); }

.field input:hover { border-color: #b3c5df; }

.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 70, 200, .18);
}

/* ভুল লেখা হলে ইনপুটে লাল দাগ */
.field input[aria-invalid='true'] {
  border-color: var(--red);
  background: var(--red-wash);
}

.button {
  border: 0;
  border-radius: var(--radius-control);
  padding: 15px 18px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.button:active { transform: translateY(1px); }

.button:focus-visible { outline-color: var(--blue-deep); }

.error {
  background: var(--red-wash);
  border: 1px solid var(--red);
  border-radius: var(--radius-control);
  color: var(--red);
  font-size: .88rem;
  font-weight: 600;
  padding: 11px 13px;
}

/* ---------- ৮. কাজের তালিকা (রুল টানা শিটের লাইনগুলো) ---------- */

.rows { list-style: none; }

/* লাইনটা একটা grid: ভাঁজ করার সময় track-টা 1fr থেকে 0fr হয়ে শূন্য হয়,
   তাই height বা padding অ্যানিমেট করতে হয় না (স্ক্রল আটকায় না)। */
.row {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms var(--ease), opacity 200ms var(--ease);
}

.row__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  transition: border-color 240ms var(--ease);
}

.row__info { flex: 1; min-width: 0; padding-block: 13px; }

.row:first-child .row__info { padding-top: 3px; }
.row:last-child .row__info { padding-bottom: 3px; }
.row:last-child .row__inner { border-bottom: 0; }

.row__subject {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* মুছে ফেলার সময় বিষয়ের নামের উপর লাল দাগ */
.row__subject::after {
  content: '';
  position: absolute;
  left: -.15em;
  right: -.15em;
  top: .62em;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms var(--ease), opacity 220ms var(--ease);
}

/* নতুন লাইন যোগ হলে: নিচে নেমে আসে আর একবার নীল কালির ছোঁয়া লাগে */
.row.is-new { animation: row-in 300ms var(--ease); }
.row.is-new .row__inner { animation: ink-sweep 700ms var(--ease); }

@keyframes row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ink-sweep {
  from { background-color: var(--blue-wash); }
  to   { background-color: transparent; }
}

/* মুছে ফেলার ধাপ ১: লাল দাগ টানা হয় */
.row.is-struck .row__subject::after { transform: scaleX(1); opacity: 1; }
.row.is-struck .row__subject { color: var(--ink-soft); }

/* মুছে ফেলার ধাপ ২: লাইনটা ভাঁজ হয়ে মিলিয়ে যায় */
.row.is-folded { grid-template-rows: 0fr; opacity: 0; }
.row.is-folded .row__inner { border-color: transparent; }

.row__minutes { display: block; color: var(--ink-soft); font-size: .85rem; }

.row__delete {
  flex: none;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  color: var(--red);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 170ms var(--ease), border-color 170ms var(--ease);
}

.row__delete:focus-visible { outline-color: var(--red); }

/* ---------- ৯. খালি অবস্থা ---------- */

.empty {
  color: var(--ink-soft);
  font-size: .93rem;
  padding: 20px 2px 8px;
  text-align: center;
  text-wrap: balance;
}

/* খালি তালিকায় একটা ছোট ড্যাশ-দাগ */
.empty::before {
  content: '';
  display: block;
  width: 46px;
  margin: 0 auto 14px;
  border-top: 1px dashed var(--rule);
}

.card__label + .empty { margin-top: -6px; }

/* ---------- ১০. পাদটীকা ---------- */

.foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
}

/* ---------- ১১. মাউস থাকলে হোভার (ফোনে আটকে থাকা হোভার এড়াতে) ---------- */

@media (hover: hover) {
  .button:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
  .button:active { transform: translateY(0); box-shadow: none; }
  .row__delete:hover { background: var(--red-wash); border-color: var(--red); }

  /* মুছুন বাটনে হাত রাখলে বিষয়ের উপর হালকা লাল দাগ আগেই দেখা যায় —
     কী হতে যাচ্ছে সেটা হাত না রাখলেও বোঝা যায় */
  .row:not(.is-struck):has(.row__delete:hover) .row__subject::after {
    transform: scaleX(.34);
    opacity: .5;
  }
}

/* ---------- ১২. বড় স্ক্রিন: বাঁয়ে ফর্ম, ডানে মোট আর তালিকা ---------- */

@media (min-width: 40rem) {
  body { padding: 30px 20px 40px; }
  .sheet { max-width: 40rem; }
}

@media (min-width: 64rem) {
  body { padding: 52px 24px 60px; }

  .sheet {
    max-width: 66rem;
    display: grid;
    grid-template-columns: 21rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 26px;
    align-items: start;
  }

  .masthead { grid-column: 1 / -1; grid-row: 1; }
  .total    { grid-column: 2; grid-row: 2; margin: 18px 0 20px; }
  .entry    { grid-column: 1; grid-row: 2 / span 2; }
  .list     { grid-column: 2; grid-row: 3; }
  .foot     { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- ১৩. ইন্ট্রো: শিট লেখা হয়ে নেমে আসে ---------- */

/* ইন্ট্রো শুধু প্রথমবার দেখানোর জন্য। html-এ is-intro ক্লাসটা ইনলাইন
   স্ক্রিপ্ট দিয়ে বসে, তাই JS না চললে বা স্টোরেজ বন্ধ থাকলে সোজা খোলে। */
.cover { display: none; }

html.is-intro .cover {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 5;
  place-content: center;
  justify-items: center;
  gap: 20px;
  background: var(--desk);
  pointer-events: none; /* কখনোই ক্লিক আটকাবে না, শুধু চোখের জন্য */
  animation: cover-out 1150ms var(--ease) forwards;
}

@keyframes cover-out {
  0%, 62% { clip-path: inset(0 0 0 0); }
  100%    { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

.cover__mark { width: 128px; height: auto; stroke: var(--ink); stroke-width: 2; }

/* ইন্ট্রোর শিটটা সাদা কাগজ, ডেস্কের উপরে পড়ে আছে */
.cover__sheet { fill: var(--paper); stroke: var(--rule); }

html.is-intro .cover__mark { animation: mark-in 480ms var(--ease) both; }

@keyframes mark-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* নীল দাগগুলো একটার পর একটা টানা হয় (pathLength="1" জন্য dash হিসাব সহজ) */
.cover__line {
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html.is-intro .cover__line { animation: line-draw 430ms var(--ease) forwards; }
html.is-intro .cover__line--1 { animation-delay: 150ms; }
html.is-intro .cover__line--2 { animation-delay: 250ms; }
html.is-intro .cover__line--3 { animation-delay: 350ms; }

@keyframes line-draw { to { stroke-dashoffset: 0; } }

.cover__caption {
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
}

html.is-intro .cover__caption { animation: mark-in 480ms var(--ease) 420ms both; }

/* শিটের অংশগুলো একটা একটা করে জায়গায় বসে (একটাই ধারা, আলাদা আলাদা ইফেক্ট নয়) */
html.is-intro .masthead__title { animation: rise-in 500ms var(--ease) 560ms both; }
html.is-intro .masthead__subtitle { animation: rise-in 500ms var(--ease) 620ms both; }
html.is-intro .total { animation: rise-in 520ms var(--ease) 720ms both; }
html.is-intro .entry { animation: rise-in 520ms var(--ease) 790ms both; }
html.is-intro .list { animation: rise-in 520ms var(--ease) 860ms both; }
html.is-intro .foot { animation: rise-in 520ms var(--ease) 930ms both; }

/* নোটিসের দুই লাইনের রুলটা বাঁ থেকে ডানে টানা হয় */
html.is-intro .masthead::after {
  transform: scaleX(0);
  transform-origin: left center;
  animation: rule-draw 620ms var(--ease) 640ms forwards;
}

@keyframes rule-draw { to { transform: scaleX(1); } }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ১৪. কম অ্যানিমেশন চাইলে (সব কিছু সাথে সাথে দেখা যায়) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}