/* =====================================================================
   காட்சி ஓட்டம்

   ----------------------------------------------------------------------
   அளவும் நிறமும் **CSS மாறிகளால்**

   அமைப்புப் பலகை JavaScript-ல் `--ss-size` போன்ற மாறியை மட்டும்
   மாற்றுகிறது; ஒவ்வொரு கூற்றையும் தனியே தொடுவதில்லை. எனவே
   புதிதொரு கூறு சேர்த்தால் அது தானாகவே அமைப்புகளுக்குக்
   கீழ்ப்படியும் — மறந்துவிட வாய்ப்பில்லை.
   ===================================================================== */
:root {
    --ss-fg: #f4f1ea;
    --ss-bg: #14100c;
    --ss-size: 42px;          /* உள்ளடக்கம் — **பெரிது** */
    --ss-small: 17px;         /* விளக்கமும் விவரமும் — **சிறிது** */
    --ss-font: inherit;
    --ss-align: center;   /* தலைப்பு · விவரம் — இவை மடியலாம் */
    --ss-cml: auto;       /* உள்ளடக்கப் பத்தியின் இடது விளிம்பு */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

.ss-body {
    margin: 0;
    background: var(--ss-bg);
    color: var(--ss-fg);
    font-family: var(--ss-font, system-ui, sans-serif);
    overflow: hidden;
    transition: background .5s ease, color .5s ease;
}

/* ---------- மேடை ---------- */
.ss-stage {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* விளிம்பு சிறியது — அகலம் முழுவதும் செய்யுளுக்கே */
    padding: clamp(.9rem, 2.5vw, 2.5rem);
    outline: none;
}

/*  சீட்டு மாறும் விதம் — **குறுக்கு மங்கல்**
    ------------------------------------------------------------------
    முன்பு புது சீட்டு மட்டும் மென்மையாக நுழைந்தது; பழையது
    திடீரென மறைந்தது. கண்ணுக்கு அது ஒரு உலுக்கல்.

    இப்போது பழையது மங்கி வெளியேறி, பிறகுதான் புதியது நுழைகிறது.
    வெளியேறுவது நுழைவதைவிடச் சற்று விரைவு — காத்திருப்பு
    தெரியாமல் இருக்க.

    `transform: translate3d` — உலாவி இதைக் கிராஃபிக் அட்டைக்குக்
    கொடுக்கும்; பெரிய எழுத்துருவிலும் அசைவு தடங்கலின்றி ஓடும். */
.ss-slide {
    /* அகலம் முழுவதும் — செய்யுளின் நீளமான வரிக்கு இடம் வேண்டும் */
    max-width: 100%;
    width: 100%;
    text-align: var(--ss-align);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .34s ease, transform .34s ease;
    will-change: opacity, transform;
}
.ss-slide.ss-out {                      /* வெளியேறும் — மேல்நோக்கி */
    opacity: 0;
    transform: translate3d(0, -.7rem, 0);
    transition-duration: .26s;
}
.ss-slide.ss-in {                       /* நுழையத் தயார் — கீழிருந்து */
    opacity: 0;
    transform: translate3d(0, .9rem, 0);
    transition: none;
}

/* அசைவு வேண்டாதவருக்கு — உலாவியே சொல்கிறது */
@media (prefers-reduced-motion: reduce) {
    .ss-slide { transition: none; }
    .ss-body  { transition: none; }
}

.ss-meta {
    font-size: calc(var(--ss-small) * .85);
    letter-spacing: .04em;
    opacity: .6;
    margin: 0 0 .9rem;
}
.ss-meta span + span::before { content: ' · '; opacity: .6; }

.ss-title {
    font-size: calc(var(--ss-small) * 1.5);
    font-weight: 600;
    opacity: .82;
    margin: 0 0 1.6rem;
    line-height: 1.35;
}
.ss-sub {
    font-size: var(--ss-small);
    opacity: .6;
    margin: -1.1rem 0 1.6rem;
}

/*  உள்ளடக்கம் — கேட்கப்பட்டபடி **பெரிதாக**, மேலும் **எழுதியபடியே**.
    ------------------------------------------------------------------
    இது `style.css`-ன் `.single-body.is-verse` விதியின் அதே நகல்.
    படைப்புப் பக்கத்தில் ஒரு வடிவமும் காட்சி ஓட்டத்தில் வேறொரு
    வடிவமும் இருக்கக் கூடாது.

    · white-space: pre   → வரி எங்கும் தானாக மடங்காது; இடைவெளிகளும்
                            ஆசிரியர் விட்டபடியே
    · text-align: left   → வரி முன் விட்ட இடைவெளி (indent) சிதையாது.
                            நடுவில் சீரமைத்தால் ஒவ்வொரு வரியும்
                            தன் நீளத்துக்கேற்ப நகர்ந்து அமைப்பே மாறும்.
    · width: fit-content → பத்தி தன் அகலத்தை மட்டும் எடுக்கும்;
                            திரையின் நடுவில் வைக்க வெளிப்புற
                            விளிம்பே (margin) போதும்
    ஆகவே "நடுவில்" என்ற அமைப்பு **பத்தியை** நடுவில் வைக்கிறது,
    வரிகளை அல்ல.

    ------------------------------------------------------------------
    உருள்பட்டை **இல்லை** — மாறாக எழுத்து சுருங்குகிறது

    வரி மடங்கக் கூடாது; அதே நேரம் நீளமான வரி திரையைத் தாண்டி
    உருள்பட்டையைக் கொண்டுவரவும் கூடாது. இரண்டையும் ஒருங்கே
    செய்ய ஒரே வழி — **எழுத்தளவைக் குறைப்பது**. அதை JavaScript
    அளந்து செய்கிறது (`fit()`), இங்கே `font-size` இடப்படுவதில்லை.

    எனவே அமைப்பில் தரும் அளவு ஓர் **உச்ச வரம்பு**: அவ்வளவு
    பெரிதாகக் காட்ட முடிந்தால் காட்டும், முடியாவிட்டால் பொருந்தும்
    வரை சுருக்கும். */
/*  நீளமான செய்யுள் — **கீழிருந்து மேல் நகர்தல்**
    ------------------------------------------------------------------
    திரைக்கு அடங்காத நீளத்துக்கு இரண்டு வழி: எழுத்தைச் சுருக்குவது,
    அல்லது நகர்த்துவது. சுருக்கினால் நீளமான படைப்பு படிக்க முடியாத
    அளவுக்குச் சிறிதாகும் — எனவே **அகலத்துக்கு மட்டும்** சுருக்கம்,
    **உயரத்துக்கு நகர்வு**.

    இச்சட்டகம் நிலையாக நின்று வெட்டுகிறது; உள்ளே `<pre>` மட்டும்
    மேல்நோக்கி நகர்கிறது. நகர்வின் நேரத்தை JavaScript கணக்கிடுகிறது —
    வரிக்கு ஏறத்தாழ ஒன்றரை வினாடி என்ற படிக்கும் வேகத்தில். எனவே
    நீளமான படைப்புக்குச் சீட்டு தானாகவே நீண்ட நேரம் நிற்கும். */
.ss-scroll {
    overflow: hidden;
    margin: 0 auto 0 var(--ss-cml, auto);
    width: fit-content;
    max-width: 100%;
}

.ss-content {
    font-family: inherit;
    font-size: var(--ss-size);   /* JavaScript இதைத் தேவைப்படின் மீறும் */
    line-height: 1.62;
    margin: 0;
    white-space: pre;
    text-align: left;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;            /* உருள்பட்டை வேண்டாம் */
    letter-spacing: .005em;
}

/* விளக்கமும் மூலமும் — **சிறியதாக**, தெளிவாக இரண்டாம் நிலை */
.ss-meaning {
    font-size: var(--ss-small);
    line-height: 1.7;
    opacity: .68;
    margin: 2rem auto 0;
    max-width: 46rem;
    border-top: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 18%, transparent);
    padding-top: 1.1rem;
}
.ss-source {
    font-size: calc(var(--ss-small) * .85);
    opacity: .45;
    margin: .8rem 0 0;
}

.ss-empty, .ss-load { opacity: .55; font-size: var(--ss-small); }

/* ---------- கட்டுப்பாட்டுப் பட்டை ---------- */
.ss-bar {
    position: fixed;
    left: 50%;
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ss-fg) 10%, transparent);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 20;
}
.ss-bar.on, .ss-bar:hover, .ss-bar:focus-within { opacity: 1; }

.ss-bar button, .ss-bar a {
    all: unset;
    cursor: pointer;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ss-fg);
    opacity: .75;
}
.ss-bar button:hover, .ss-bar a:hover,
.ss-bar button:focus-visible, .ss-bar a:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--ss-fg) 14%, transparent);
}
.ss-bar :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ss-pos { font-size: .8rem; opacity: .55; padding: 0 .5rem; font-variant-numeric: tabular-nums; }

/* ---------- அமைப்புப் பலகை ---------- */
.ss-panel {
    position: fixed;
    top: 0; right: 0;
    width: min(21rem, 92vw);
    height: 100dvh;
    overflow-y: auto;
    padding: 1.1rem 1.2rem 2rem;
    background: color-mix(in srgb, var(--ss-bg) 92%, var(--ss-fg));
    color: var(--ss-fg);
    border-left: 1px solid color-mix(in srgb, var(--ss-fg) 16%, transparent);
    z-index: 30;
    font-size: .9rem;
}
.ss-panel[hidden] { display: none; }

.ss-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: .6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ss-fg) 16%, transparent);
}
.ss-panel-head button {
    all: unset; cursor: pointer; opacity: .7; padding: .3rem;
}
.ss-panel-head button:hover { opacity: 1; }

.ss-grp { margin-bottom: 1rem; }
.ss-grp > label { display: block; margin-bottom: .35rem; opacity: .75; font-size: .82rem; }
.ss-grp select, .ss-grp input[type="search"] {
    width: 100%; padding: .45rem .6rem; border-radius: .4rem;
    background: color-mix(in srgb, var(--ss-fg) 8%, transparent);
    color: var(--ss-fg);
    border: 1px solid color-mix(in srgb, var(--ss-fg) 22%, transparent);
    font: inherit;
}
.ss-grp select option { background: #1b1b1b; color: #eee; }
.ss-grp input[type="range"] { width: 100%; accent-color: currentColor; }
.ss-grp input[type="color"] {
    width: 100%; height: 2.2rem; padding: 0; border: none;
    background: none; cursor: pointer;
}
.ss-grp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ss-checks label { display: block; margin-bottom: .45rem; opacity: .85; cursor: pointer; }
.ss-checks input { margin-inline-end: .4rem; }

.ss-sug {
    margin-top: .3rem; max-height: 12rem; overflow-y: auto;
    border-radius: .4rem;
    border: 1px solid color-mix(in srgb, var(--ss-fg) 22%, transparent);
}
.ss-sug button {
    all: unset; display: block; width: 100%; cursor: pointer;
    padding: .45rem .6rem; font-size: .85rem;
}
.ss-sug button:hover { background: color-mix(in srgb, var(--ss-fg) 12%, transparent); }

.ss-grp input[type="text"] {
    width: 100%; padding: .45rem .6rem; border-radius: .4rem;
    background: color-mix(in srgb, var(--ss-fg) 8%, transparent);
    color: var(--ss-fg);
    border: 1px solid color-mix(in srgb, var(--ss-fg) 22%, transparent);
    font: inherit; font-size: .78rem;
}
.ss-copy {
    all: unset; cursor: pointer; margin-top: .4rem;
    padding: .35rem .7rem; border-radius: .4rem; font-size: .82rem;
    background: color-mix(in srgb, var(--ss-fg) 12%, transparent);
}
.ss-copy:hover { background: color-mix(in srgb, var(--ss-fg) 20%, transparent); }

.ss-panel-foot { margin-top: 1.4rem; }
.ss-reset {
    all: unset; cursor: pointer; font-size: .82rem; opacity: .6;
    text-decoration: underline; text-underline-offset: 3px;
}
.ss-reset:hover { opacity: 1; }

/* ---------- கவனச் சிதறல் இல்லாத நிலை ---------- */
.ss-body.ss-quiet .ss-bar { opacity: 0; }
.ss-body.ss-quiet { cursor: none; }

/* ---------- கைபேசி ---------- */
@media (max-width: 600px) {
    .ss-stage { padding: 1.2rem 1rem 5rem; }
    .ss-meaning { margin-top: 1.4rem; }
}