/* நிலா நலம் — amalyagulasamy.com/nilanalam */

:root{
  color-scheme: light dark;

  --ink:#14263a;
  --ink-soft:#4a6076;
  --ink-faint:#7b8fa3;
  --bg:#f6f9fc;
  --surface:#ffffff;
  --surface-2:#eef4f9;
  --line:#dbe6ef;

  --navy:#0e3355;
  --sky:#1f7ab8;
  --ocean:#2e6fa8;
  --violet:#7b6cc9;
  --leaf:#2b8a63;
  --amber:#e0992c;
  --orange:#e0761a;

  /* the whole site reads in the cover's sky blue */
  --accent:var(--sky);
  --accent-soft:#e3f1fb;
  --accent-on:#ffffff;        /* text that sits on top of --accent */

  --wrap:min(72ch, 100% - 2.5rem);
  --wide:min(104ch, 100% - 2.5rem);
  --radius:18px;
  --shadow:0 1px 2px rgb(14 51 85 / .05), 0 12px 30px -18px rgb(14 51 85 / .35);

  --font-display:"Anek Tamil", system-ui, sans-serif;
  --font-body:"Noto Serif Tamil", Georgia, serif;
}

html[data-tone="sky"]   { --accent:var(--sky);    --accent-soft:#e3f1fb; }
/* kept so an older page still renders if one is ever opened on its own */
html[data-tone="ocean"] { --accent:var(--ocean);  --accent-soft:#e8f1f9; }
html[data-tone="violet"]{ --accent:var(--violet); --accent-soft:#efecfa; }
html[data-tone="leaf"]  { --accent:var(--leaf);   --accent-soft:#e6f3ed; }
html[data-tone="amber"] { --accent:var(--amber);  --accent-soft:#fbf1de; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef5; --ink-soft:#a9bccd; --ink-faint:#7d93a8;
    --bg:#0c1520; --surface:#121e2c; --surface-2:#162434; --line:#22364a;
    --accent:#5fb3e8; --accent-on:#0c1520;
    --accent-soft:#16283c; --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -20px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef5; --ink-soft:#a9bccd; --ink-faint:#7d93a8;
  --bg:#0c1520; --surface:#121e2c; --surface-2:#162434; --line:#22364a;
  --accent:#5fb3e8; --accent-on:#0c1520;
    --accent-soft:#16283c; --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -20px rgb(0 0 0 / .8);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.02rem, .97rem + .28vw, 1.16rem);
  line-height:1.95;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.kicker,.brand,.card-k,.n{ font-family:var(--font-display); }
h1,h2,h3{ line-height:1.35; font-weight:700; letter-spacing:-.005em; }

a{ color:var(--accent); text-underline-offset:3px; }
img{ max-width:100%; height:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:.7rem 1rem; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------ progress bar */
.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60; background:transparent; pointer-events:none; }
.progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--orange)); transition:width .1s linear; }

/* ----------------------------------------------------------------- top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem clamp(.8rem, 3vw, 1.4rem);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; flex-direction:column; line-height:1.15; text-decoration:none; color:var(--ink); margin-inline:auto; text-align:center; }
.brand b{ font-size:1.12rem; font-weight:800; letter-spacing:.01em; }
.brand span{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-display); }

.icon{
  display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink); cursor:pointer; padding:0;
}
.icon:hover{ border-color:var(--accent); color:var(--accent); }
.icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.icon .moon{ display:none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .icon .sun{ display:none; } :root:not([data-theme="light"]) .icon .moon{ display:block; } }
:root[data-theme="dark"] .icon .sun{ display:none; }
:root[data-theme="dark"] .icon .moon{ display:block; }

/* ------------------------------------------------------------------ drawer */
.scrim{ position:fixed; inset:0; background:rgb(6 18 30 / .5); z-index:55; border:0; }
.drawer{
  position:fixed; z-index:56; inset:0 auto 0 0; width:min(21rem, 86vw);
  background:var(--surface); border-right:1px solid var(--line);
  padding:1.1rem 1rem 2rem; overflow:auto;
  box-shadow:0 0 60px -10px rgb(6 18 30 / .45);
}
.drawer[hidden]{ display:none; }
.drawer-title{ font-family:var(--font-display); font-weight:800; margin:.2rem 0 .9rem; font-size:1.05rem; }
.toc{ list-style:none; margin:0; padding:0; }
.toc a{
  display:grid; grid-template-columns:2.1rem 1fr; gap:.65rem; align-items:baseline;
  padding:.5rem .55rem; border-radius:11px; text-decoration:none; color:var(--ink);
  font-size:.96rem; line-height:1.5;
}
.toc a:hover{ background:var(--surface-2); }
.toc a[aria-current]{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.toc .n{ font-weight:800; color:var(--ink-faint); font-size:.86rem; text-align:right; }
.toc a[aria-current] .n{ color:var(--accent); }

/* -------------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(120% 140% at 88% -20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    linear-gradient(180deg, var(--accent-soft), var(--bg));
  border-bottom:1px solid var(--line);
  padding:clamp(2.4rem, 7vw, 4.6rem) 0 clamp(1.8rem, 5vw, 3rem);
  position:relative; overflow:hidden;
}
.hero-in{ width:var(--wrap); margin-inline:auto; position:relative; }
.kicker{
  font-family:var(--font-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.74rem; color:var(--accent); margin:0 0 .5rem;
}
.hero h1{ margin:0; font-size:clamp(1.9rem, 1.3rem + 3.1vw, 3.1rem); font-weight:800; }
.bignum{
  position:absolute; right:-.4rem; top:50%; transform:translateY(-52%);
  font-family:var(--font-display); font-weight:800; font-size:clamp(6rem, 18vw, 11rem);
  line-height:.8; color:var(--accent); opacity:.1; pointer-events:none; user-select:none;
}

/* -------------------------------------------------------------- cover page */
.cover{ background:linear-gradient(180deg, var(--accent-soft), var(--bg)); border-bottom:1px solid var(--line); padding:clamp(1.6rem,5vw,3.4rem) 0; }
.cover-in{ width:var(--wide); margin-inline:auto; display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .cover-in{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
.cover-img{ width:100%; max-width:22rem; margin-inline:auto; display:block; border-radius:14px; box-shadow:var(--shadow); }
.cover-txt h1{ margin:.1rem 0 .1rem; font-size:clamp(2.4rem, 1.6rem + 4.4vw, 4rem); font-weight:800; color:var(--navy); }
:root[data-theme="dark"] .cover-txt h1, :root:not([data-theme="light"]) .cover-txt h1{ color:var(--ink); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cover-txt h1{ color:var(--navy); } }
.rom{ margin:0 0 1rem; font-family:var(--font-display); letter-spacing:.26em; text-transform:uppercase; font-size:.8rem; color:var(--ink-faint); }
.three{ margin:.2rem 0 .1rem; font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem,.9rem+1.1vw,1.5rem); color:var(--orange); }
.three-en{ margin:0 0 1rem; font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--orange); opacity:.85; }
.tagline{ margin:0 0 1.5rem; color:var(--ink-soft); font-size:1rem; }
.cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0; }
.cta a{
  display:inline-block; padding:.72rem 1.3rem; border-radius:999px; text-decoration:none;
  background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem;
  border:1px solid var(--navy);
}
.cta a:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }
.cta .ghost{ background:transparent; color:var(--accent); border-color:var(--line); }
.cta .ghost:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }

/* ------------------------------------------------------------------- prose */
main{ padding:clamp(1.6rem, 5vw, 3rem) 0 1rem; }
.prose{ width:var(--wrap); margin-inline:auto; }
.prose > .tablewrap.grid, .prose > .shot{ width:var(--wide); margin-inline:calc(50% - 50vw); margin-inline:auto; max-width:var(--wide); }
.prose p{ margin:0 0 1.15em; }
.prose h2.sub{
  margin:2.6rem 0 .9rem; font-size:clamp(1.3rem,1.1rem+.9vw,1.65rem); font-weight:800;
  padding-top:1.4rem; border-top:2px solid var(--line);
}
.prose h3.sec{
  margin:2.1rem 0 .7rem; font-size:clamp(1.12rem,1rem+.6vw,1.34rem); color:var(--accent);
  scroll-margin-top:5rem; font-weight:700;
}
.prose ul, .prose ol{ margin:0 0 1.2em; padding-inline-start:1.35rem; }
.prose li{ margin:0 0 .5em; }
.prose ul{ list-style:none; padding-inline-start:1.3rem; }
.prose ul > li{ position:relative; }
.prose ul > li::before{
  content:""; position:absolute; inset-inline-start:-1.05rem; top:.82em;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--accent);
}

.callout{
  background:var(--accent-soft); border-inline-start:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.15rem; margin:1.7rem 0; font-weight:500;
}
.xref{
  font-size:.9rem; color:var(--ink-soft); margin:-.55em 0 1.5em;
  padding-inline-start:1.35rem; position:relative; font-style:italic;
}
.xref::before{ content:"→"; position:absolute; inset-inline-start:0; font-style:normal; color:var(--accent); }

.kural{
  margin:1.9rem 0; padding:1.1rem 1.3rem; border:0;
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); border-inline-start:4px solid var(--orange);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.06rem,1rem+.4vw,1.22rem); line-height:1.7; color:var(--ink);
}
.kural span{ display:block; }
.kural span + span{ padding-inline-start:1.6rem; }

.theend{ text-align:center; font-family:var(--font-display); font-weight:800; letter-spacing:.3em; color:var(--ink-faint); margin:3rem 0 1rem; }

.jump{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.05rem 1.2rem; margin:0 0 2.2rem; box-shadow:var(--shadow);
}
.jump p{ margin:0 0 .5rem; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.jump ol{ margin:0; padding-inline-start:1.2rem; font-size:.96rem; }
.jump li{ margin:.25rem 0; }
.jump a{ text-decoration:none; }
.jump a:hover{ text-decoration:underline; }

/* ------------------------------------------------------------------ tables */
.tablewrap{ margin:1.8rem 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.tablewrap.grid{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:.95rem; line-height:1.7; }
thead th{
  background:var(--accent); color:var(--accent-on); text-align:start; font-family:var(--font-display); font-weight:700;
  padding:.7rem .85rem; font-size:.9rem; white-space:nowrap;
}
tbody td, tbody th{ padding:.72rem .85rem; border-top:1px solid var(--line); vertical-align:top; text-align:start; }
tbody th[scope="row"]{
  font-family:var(--font-display); font-weight:700; color:var(--accent);
  background:var(--surface-2); width:34%; min-width:8.5rem;
}
.tablewrap.grid table{ min-width:36rem; }
.tablewrap.grid tbody th[scope="row"]{ width:auto; }
td p{ margin:0 0 .5em; }
td p:last-child, td ol:last-child{ margin-bottom:0; }
td ol{ margin:0; padding-inline-start:1.15rem; }
td li{ margin:.18em 0; }
tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* ------------------------------------------------------------------ figure */
.shot{ margin:2.2rem 0; text-align:center; }
.zoom{ display:block; padding:0; border:0; background:none; cursor:zoom-in; width:100%; }
.shot img{ border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); }
figcaption{ margin-top:.7rem; font-size:.88rem; color:var(--ink-faint); font-family:var(--font-display); }

.lightbox{ position:fixed; inset:0; z-index:70; background:rgb(6 14 22 / .92); display:grid; place-items:center; padding:1.2rem; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:92vh; border-radius:10px; }
.lightbox button{ position:absolute; top:1rem; inset-inline-end:1rem; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:#14263a; font-size:1.6rem; line-height:1; cursor:pointer; }

/* ------------------------------------------------------------------- cards */
.cards{ display:grid; gap:.85rem; grid-template-columns:1fr; margin:0 0 2.4rem; }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{
  display:block; padding:1.05rem 1.15rem; border-radius:var(--radius); text-decoration:none;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--ink); border-top:3px solid var(--sky); transition:transform .15s ease, border-color .15s ease;
}
.card[data-tone="sky"]{ border-top-color:var(--sky); }
.card[data-tone="ocean"]{ border-top-color:var(--ocean); }
.card[data-tone="violet"]{ border-top-color:var(--violet); }
.card[data-tone="leaf"]{ border-top-color:var(--leaf); }
.card[data-tone="amber"]{ border-top-color:var(--amber); }
.card:hover{ transform:translateY(-2px); }
.card-k{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.card-t{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:.15rem 0 .35rem; line-height:1.4; }
.card-s{ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.6; }

.disc-box{
  border:1px dashed var(--line); border-radius:var(--radius); padding:1rem 1.15rem;
  font-size:.94rem; color:var(--ink-soft); background:var(--surface);
}

/* ------------------------------------------------------------------- pager */
.pager{
  width:var(--wide); margin:2.6rem auto 0; display:grid; gap:.8rem; grid-template-columns:1fr;
}
@media (min-width:640px){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{
  display:block; padding:1rem 1.15rem; border-radius:var(--radius); text-decoration:none;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow);
}
.pager a:hover{ border-color:var(--accent); }
.pager span{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-display); font-weight:700; }
.pager b{ display:block; font-family:var(--font-display); font-weight:700; margin-top:.2rem; line-height:1.45; }
.pager .next{ text-align:end; }

/* -------------------------------------------------------------------- foot */
.foot{
  margin-top:3.5rem; padding:2.2rem 1.25rem 3rem; text-align:center;
  border-top:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:.92rem;
}
.foot p{ margin:.25rem 0; }
.foot b{ font-family:var(--font-display); color:var(--ink); }
.foot .disc{ margin-top:1rem; font-size:.84rem; color:var(--ink-faint); max-width:46ch; margin-inline:auto; }

.totop{
  position:fixed; inset-block-end:1.1rem; inset-inline-end:1.1rem; z-index:40;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:1.15rem; cursor:pointer;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.totop.on{ opacity:1; pointer-events:auto; }

/* ------------------------------------------------------------------- print */
@media print{
  .topbar,.drawer,.scrim,.pager,.totop,.progress,.jump,.cta,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; line-height:1.6; }
  .hero{ background:none; border:0; padding:0 0 1rem; }
  .prose,.hero-in{ width:100%; }
  .tablewrap,.card,.kural,.shot img{ box-shadow:none; }
  h2.sub,h3.sec{ break-after:avoid; }
  .tablewrap,.shot,.kural{ break-inside:avoid; }
}

/* ------------------------------------------- long Tamil words must not clip */
h1,h2,h3,.card-t,.pager b,.toc a,.jump a{ overflow-wrap:break-word; word-break:normal; }
.prose p,.prose li,td,th{ overflow-wrap:break-word; }

/* -------------------------------------- two-level "in this chapter" listing */
.jump ol{ list-style:none; padding-inline-start:0; }
.jump li{ position:relative; padding-inline-start:1.5rem; }
/* headings already carry their own numbering, so no counter here */
.jump li.l2{ font-weight:600; }
.jump li.l2::before{ content:""; position:absolute; inset-inline-start:.3rem; top:.85em; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); }
.jump li.l3::before{ content:"—"; position:absolute; inset-inline-start:.15rem; color:var(--ink-faint); }
.jump.long ol{ columns:2; column-gap:1.6rem; }
@media (max-width:640px){ .jump.long ol{ columns:1; } }

/* ------------------------------------------------------------ buy line */
.buy{ margin:.9rem 0 0; font-size:.95rem; color:var(--ink-faint); }
.buy a{ font-weight:600; }

/* =====================================================================
   The amalautomation.com header — the same bar, in the same order, as on
   every other page of the site: photo and name, the menu with the login,
   then the language and light/dark switches. /assets/app.js drives the
   menu and the theme switch here exactly as it does there. Deliberately
   not sticky: the book's own bar underneath it is.
   ===================================================================== */
.sitebar{
  display:flex; align-items:center; gap:1rem;
  padding:.6rem clamp(1rem,4vw,2rem);
  background:var(--surface); border-bottom:1px solid var(--line);
  font-family:var(--font-display); position:relative; z-index:46;
}
.sitebar .site-brand{
  display:flex; align-items:center; gap:.35rem; text-decoration:none;
  color:inherit; margin-inline-end:auto;
}
.sitebar .brand-img{ width:40px; height:40px; border-radius:50%; object-fit:cover; margin-inline-end:.3rem; border:2px solid var(--line); flex:none; }
.sitebar .site-brand b{ font-weight:800; font-size:1.18rem; letter-spacing:-.01em; }
.sitebar .site-brand span{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

.sitebar .burger{
  display:none; width:40px; height:40px; border-radius:11px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  place-items:center;
}
.sitebar .burger svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.sitebar nav > ul{ list-style:none; display:flex; align-items:center; gap:.2rem; margin:0; padding:0; }
.sitebar nav ul{ list-style:none; margin:0; padding:0; }
.sitebar nav a{
  display:block; padding:.5rem .8rem; border-radius:10px; text-decoration:none;
  color:var(--ink-soft); font-weight:600; font-size:.98rem;
}
.sitebar nav a:hover{ background:var(--accent-soft); color:var(--accent); }
.sitebar nav a[aria-current]{ color:var(--accent); background:var(--accent-soft); }
.sitebar .ext{ font-size:.78em; opacity:.7; }
.sitebar .caret{ font-size:.7em; opacity:.6; }

.sitebar .has-sub{ position:relative; }
.sitebar .has-sub > .sub-toggle{
  position:absolute; inset-block:0; inset-inline-end:0; width:2rem;
  background:none; border:0; cursor:pointer; color:transparent;
}
.sitebar .sub{
  position:absolute; inset-inline-start:0; top:calc(100% + .3rem); min-width:14rem;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:.35rem; display:none; flex-direction:column; gap:.1rem; z-index:50;
}
.sitebar .has-sub:hover .sub,
.sitebar .has-sub:focus-within .sub,
.sitebar .has-sub.open .sub{ display:flex; }
.sitebar .sub a{ padding:.55rem .7rem; font-weight:500; }

/* login, or the reader's name once /assets/app.js has asked who is here */
.sitebar nav a.acct-login{ border:1.5px solid var(--accent); color:var(--accent); }
.sitebar .acct .sub{ inset-inline:auto 0; }
.sitebar .acct-dot{
  display:inline-grid; place-items:center; width:26px; height:26px; margin-inline-end:.4rem; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.8rem; font-weight:800; vertical-align:middle;
}
.sitebar .linkish{
  display:block; width:100%; text-align:start; padding:.55rem .7rem; border:0; border-radius:10px; background:none;
  color:var(--ink-soft); font:500 .98rem var(--font-display); cursor:pointer;
}
.sitebar .linkish:hover{ background:var(--accent-soft); color:var(--accent); }

.sitebar .tools{ display:flex; align-items:center; gap:.4rem; margin-inline-start:.5rem; flex:none; }
.sitebar .tool{
  display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 .65rem; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; text-decoration:none;
  font:700 .9rem/1 var(--font-display);
}
.sitebar .tool:hover{ color:var(--accent); border-color:var(--accent); }
.sitebar .tool svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.theme-switch .ic-sun{ display:none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-switch .ic-sun{ display:block; } :root:not([data-theme="light"]) .theme-switch .ic-moon{ display:none; } }
:root[data-theme="dark"] .theme-switch .ic-sun{ display:block; }
:root[data-theme="dark"] .theme-switch .ic-moon{ display:none; }

@media (max-width:760px){
  .sitebar .burger{ display:grid; }
  .sitebar .tools{ margin-inline-start:auto; }
  .sitebar .site-brand{ margin-inline-end:0; }
  .sitebar .site-brand span{ display:none; }
  .sitebar nav{ display:none; position:absolute; inset-inline:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem; z-index:45; }
  .sitebar nav.open{ display:block; }
  .sitebar nav > ul{ flex-direction:column; align-items:stretch; gap:.1rem; }
  .sitebar .sub{ position:static; display:flex; border:0; box-shadow:none; padding:0 0 .3rem 1rem; }
  .sitebar .has-sub > .sub-toggle{ display:none; }
}

/* ------------------------------------------------- share, in the book bar */
.topbar .share{
  display:inline-flex; align-items:center; gap:.35rem; height:36px; padding:0 .75rem; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font:700 .85rem var(--font-display);
}
.topbar .share:hover{ color:var(--accent); border-color:var(--accent); }
.topbar .share svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.topbar .share{ margin-inline-start:auto; }
.topbar .bookpct:not([hidden]) + .share{ margin-inline-start:.6rem; }
@media (max-width:520px){ .topbar .share span{ display:none; } .topbar .share{ padding:0 .55rem; } }

.share-panel{
  position:fixed; z-index:70; inset-inline-end:1rem; top:1rem; width:min(380px, calc(100% - 2rem));
  padding:1rem 1.1rem; border-radius:16px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-top:4px solid var(--accent); box-shadow:0 18px 50px -18px rgb(0 0 0 / .45);
  font-family:var(--font-display);
}
.share-panel[hidden]{ display:none; }
.share-panel p{ margin:0 2rem .6rem 0; font-weight:800; }
.share-panel input{ width:100%; box-sizing:border-box; padding:.5rem .6rem; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:500 .85rem ui-monospace, Consolas, monospace; }
.share-panel .share-ok{ margin:.5rem 0 .7rem; font-size:.88rem; color:var(--ink-soft); font-weight:500; }
.share-panel .share-to{ display:flex; flex-wrap:wrap; gap:.45rem; }
.share-panel .share-to a, .share-panel .share-to button{
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-soft); text-decoration:none; font:700 .84rem var(--font-display); cursor:pointer;
}
.share-panel .share-to a:hover, .share-panel .share-to button:hover{ color:var(--accent); border-color:var(--accent); }
.share-panel .share-x{ position:absolute; top:.45rem; inset-inline-end:.5rem; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--ink-faint); font-size:1.4rem; line-height:1; cursor:pointer; }

/* Tamil does not survive letter-spacing or capitals: the small spaced-out
   labels keep it for Latin text only (the English book quotes the Tamil
   title, the Tamil book gives its author in Tamil). */
.brand span:lang(ta), .cover-txt .rom:lang(ta), .cover-txt .three-en:lang(ta), .cover-txt .kicker:lang(ta), .edition h3 small:lang(ta){
  letter-spacing:0; text-transform:none;
}
.cover-txt .rom:lang(ta), .cover-txt .three-en:lang(ta){ font-size:1rem; }

/* --------------------------------------------- both editions on Amazon */
.editions{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); margin:1rem 0 0; }
.edition{ padding:.85rem 1rem; border-radius:14px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); }
.edition h3{ margin:0 0 .6rem; font-size:1rem; line-height:1.4; }
.edition h3 small{ display:block; font-weight:600; color:var(--ink-faint); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.edition-stores{ display:flex; gap:.7rem; flex-wrap:wrap; }
.edition-store{ display:grid; justify-items:center; gap:.3rem; padding:.45rem; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:#1f4d77; font:700 .84rem var(--font-display); background:#fff; }
.edition-store:hover{ border-color:var(--accent); }
.edition-store img{ width:104px; height:104px; display:block; }

/* ------------------------------------------------- justified body text */
/* Headings, captions and table headers stay ranged left; only running
   text is justified, or short lines open up into gaps.
   Not below 700px: Tamil does not hyphenate, so justifying a phone-width
   column tears rivers of white space through the paragraph. Ragged right
   is the lesser of the two evils there. */
@media (min-width:700px){
  .prose > p, .prose li{ text-align:justify; text-justify:inter-word; }
  .prose > p.callout, .prose > p.xref, .kural p, figcaption{ text-align:start; }
}

/* ------------------------------------------------------- the buy block */
.buy-qr{ display:flex; flex-wrap:wrap; gap:1.4rem; margin:1rem 0 0; align-items:flex-start; }
.buy-qr figure{ margin:0; text-align:center; }
.buy-qr img{ width:118px; height:118px; display:block; background:#fff; padding:6px; border:1px solid var(--line); border-radius:10px; }
.buy-qr figcaption{ margin-top:.35rem; font-size:.84rem; font-family:var(--font-display); font-weight:700; }

/* --------------------------------------------- how far through the book */
.bookpct{
  display:flex; flex-direction:column; align-items:center; line-height:1.1;
  flex:0 0 auto; padding:.2rem .55rem; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-display); user-select:none;
}
/* display:flex above would otherwise beat the UA rule for [hidden], and the
   readout would sit at 0% on the contents page, which is not part of the book. */
.bookpct[hidden]{ display:none; }
.bookpct b{ font-size:.92rem; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.bookpct span{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }

/* The title stays optically centred whatever sits on either side of it.
   (.topbar is sticky, which is positioned enough to anchor it.) */
.topbar .brand{ position:absolute; left:50%; transform:translateX(-50%); margin-inline:0; }
/* the light/dark choice is made in the site header (amalautomation.com) and read here */
.topbar .bookpct{ margin-inline-start:auto; }
@media (max-width:460px){
  .topbar .brand{ position:static; transform:none; margin-inline:auto; }
  .bookpct span{ display:none; }
}