/* Site-wide layout container.
 *
 * A separate stylesheet rather than a Tailwind utility: static/base.css
 * is a frozen compiled bundle (see base.html), so a class it
 * never emitted renders as nothing at all.
 *
 * One width for the whole site. The tool at /ratio/ runs to 1600px, and while
 * the marketing pages stayed at Tailwind's max-w-7xl (1280px) the site read as
 * two different products bolted together — on a 1512px display the front page
 * sat in a narrow column with 232px of dead margin at each edge.
 *
 * The padding steps match Tailwind's px-4 / sm:px-6 / lg:px-8 so replacing those
 * utilities with this class changes the maximum width and nothing else.
 */
.ls-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .ls-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .ls-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ---------- header ------------------------------------------------------ */

/* Brand and nav as one left-hand group.
 *
 * With the nav as a middle child of a justify-between row, its position depended
 * on whether the page happened to carry a Subscribe button — centred on the
 * marketing pages, hard right on the tool, which read as two different headers.
 * Grouped, the nav starts at the same x on every page and the actions stay right.
 */
.ls-brandnav {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

@media (max-width: 767px) {
  .ls-brandnav { gap: 0; }
}

/* ---------- the two products -------------------------------------------- */

/* One column until there is room for two honest ones. Not a Tailwind grid: the
 * compiled sheet is frozen and never emitted lg:grid-cols-2, so that class would
 * have rendered as nothing and stacked the cards on every screen.
 */
.ls-products {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
  align-items: stretch;
}

/* Two live products side by side, the one that has not opened spanning beneath
   them.
 *
 * Three equal columns looked tidy and did not work: at 1200px each card was
 * 357px, which left the search field 187px of usable width — too narrow for the
 * placeholder to finish a sentence, let alone for a real query to be readable
 * while typing. A card containing a working input needs width the way a card
 * containing a paragraph does not, so the two that take input get the row.
 */
@media (min-width: 1000px) {
  .ls-products { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ls-product--soon { grid-column: 1 / -1; }
}

/* Equal weight, deliberately. One card styled as primary would answer a question
 * the visitor has not been asked yet — which product they came for.
 */
.ls-product {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-surface-300, #e3dfd9);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(31 29 26 / 0.05);
}

@media (min-width: 900px) { .ls-product { padding: 2.5rem; } }

.ls-product-kicker {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-brand-600, #486581);
}

.ls-product-name {
  margin: 0.625rem 0 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-surface-900, #1f1d1a);
}

.ls-product-lede {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-surface-600, #7d7870);
  /* Held near a readable measure; the card is wider than the prose wants. */
  max-width: 34rem;
}

/* Pushed to the bottom so both cards' actions line up however long the copy is. */
.ls-product-form {
  display: flex;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 1.75rem;
  flex-wrap: wrap;
}

.ls-field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-surface-800, #3d3a35);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-surface-300, #e3dfd9);
  border-radius: 10px;
}

.ls-field::placeholder { color: var(--color-surface-500, #a39e96); }

.ls-field:focus {
  outline: none;
  border-color: var(--color-brand-600, #486581);
  box-shadow: 0 0 0 3px rgb(72 101 129 / 0.15);
}

.ls-btn {
  flex: 0 0 auto;
  padding: 0.75rem 1.375rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-white, #fff);
  background: var(--color-brand-900, #1b2a4a);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

/* Square, and the same height as the text button beside it in the next card,
   so the two forms still read as a pair. */
.ls-btn--icon {
  padding: 0;
  width: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ls-btn--icon svg { width: 1.125rem; height: 1.125rem; }

.ls-btn:hover { background: var(--color-brand-800, #243b53); }
.ls-btn:focus-visible { outline: 2px solid var(--color-brand-900, #1b2a4a); outline-offset: 2px; }

.ls-product-foot {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-surface-500, #a39e96);
}

.ls-product-foot a {
  color: var(--color-brand-700, #334e68);
  font-weight: 500;
}

/* The product that has not opened. Quieter ground and no action, so it reads as
   an announcement beside two working things rather than a third door that
   sticks when pushed. */
.ls-product--soon {
  background: var(--color-surface-100, #faf7f2);
  border-style: dashed;
  box-shadow: none;
}

.ls-product--soon .ls-product-kicker { color: var(--color-surface-500, #a39e96); }
.ls-product--soon .ls-product-foot { margin-top: auto; padding-top: 1.25rem; }

/* Spanning the row, it is short and wide rather than tall and thin: the copy
   sits beside the link instead of leaving a column of empty card beneath it. */
@media (min-width: 1000px) {
  /* Three columns, and every child is placed in one explicitly. Setting only
     grid-row on each put all four in the same cell, so the name printed on top
     of the description. */
  .ls-product--soon {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    row-gap: 0.25rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .ls-product--soon .ls-product-kicker { grid-column: 1; grid-row: 1; }
  .ls-product--soon .ls-product-name {
    grid-column: 1; grid-row: 2;
    margin: 0; font-size: 1.5rem; white-space: nowrap;
  }
  .ls-product--soon .ls-product-lede {
    grid-column: 2; grid-row: 1 / 3;
    align-self: center; margin: 0; max-width: none; font-size: 0.9375rem;
  }
  .ls-product--soon .ls-product-foot {
    grid-column: 3; grid-row: 1 / 3;
    align-self: center; margin: 0; padding: 0; white-space: nowrap;
  }
}

/* ---------- the coming-soon page ---------------------------------------- */

.ls-soon {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--color-surface-100, #faf7f2);
  border: 1px solid var(--color-surface-300, #e3dfd9);
  border-radius: 14px;
}

.ls-soon-label {
  margin: 0 0 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-brand-600, #486581);
}

.ls-soon-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-surface-700, #5c5850);
}

.ls-soon-list li { padding-left: 1.25rem; position: relative; }

.ls-soon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-600, #486581);
}

.ls-soon-links {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) { .ls-soon-links { grid-template-columns: 1fr 1fr; } }

.ls-soon-links a {
  display: block;
  padding: 1.25rem;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-surface-300, #e3dfd9);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s;
}

.ls-soon-links a:hover { border-color: var(--color-brand-600, #486581); }

.ls-soon-links b {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.125rem;
  color: var(--color-surface-900, #1f1d1a);
}

.ls-soon-links span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-surface-600, #7d7870);
}

/* The hero headline.
 *
 * "For Indian lawyers who argue for a living" ran to about 960px of type in a
 * 672px column, so it always broke, and it broke badly — "a living" orphaned on
 * its own line. Shorter copy is the fix; balance is the guard, so that at any
 * width where it does wrap the lines come out even rather than leaving one word
 * stranded.
 */
.ls-hero {
  text-wrap: balance;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- account ------------------------------------------------------ */

/* Sits where a header action belongs, quiet enough that it is not competing
   with the nav. It answers a question the reader asks once — am I signed in,
   and how much is left — and should not keep asking for attention after that.
 */
.ls-account {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-surface-500, #a39e96);
  max-width: 16rem;
  white-space: nowrap;
}

.ls-account a,
.ls-account-in {
  color: var(--color-brand-700, #334e68);
  font-weight: 500;
  text-decoration: none;
}

.ls-account a:hover,
.ls-account-in:hover { color: var(--color-brand-900, #1b2a4a); }

.ls-account-in { font-size: 0.875rem; }

/* The count used to live here and be hidden on phones because the header is
   already logo and hamburger. It now sits on Ratio's search bar instead, so
   there is nothing left to hide -- and it is visible on a phone again, which
   is where knowing the balance before spending one matters most. */

/* ---------- ILB hero form ------------------------------------------------ */

.ls-hero-form {
  display: flex;
  gap: 0.625rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  max-width: 30rem;
}

.ls-hero-note {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-surface-500, #a39e96);
}

/* ---------- beta ---------------------------------------------------------- */

/* Says the product is early without shouting it. Set beside the name rather
   than in the copy, because someone deciding whether to rely on this should
   see it in the same glance as the name — not two paragraphs later.
 */
.ls-beta {
  display: inline-block;
  vertical-align: 0.28em;
  margin-left: 0.4375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--color-brand-100, #d9e2ec);
  color: var(--color-brand-800, #243b53);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}

.ls-beta--lg { vertical-align: 0.5em; font-size: 0.6875rem; }

/* ---------- social ------------------------------------------------------- */

/* Wellknown is the agent-to-agent discovery network — where a service is found
   by an AI, not a person. The footer links our listing there the way it would
   a LinkedIn or an X profile: an identity link, sat with the rest of the
   footer's identity. Colour comes from the footer's own utility classes so it
   matches the legal links exactly; this only handles the icon + label layout. */
.ls-social {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.15s;
}
.ls-social svg { width: 0.9375rem; height: 0.9375rem; flex: none; }

/* ---------- the case record, signed out and signed in --------------------- */

/* One case, two pages: the teaser a search engine and a shared link land on,
   and the full record behind sign-in. They were styled separately and drifted
   — the citation was a grey chip on one and muted text on the other, the
   cited-by count was a sentence on one and absent from the rail on the other.
   Defined once here so they cannot drift again, and matched to the result
   rail in icnc/tool.css (.icnc-neutral / .icnc-scr / .icnc-auth) so a case
   looks the same in the results as it does on its own page. The literal
   colours are tool.css's own values; neither of these pages loads that sheet. */

/* The identifiers get their own line under the title, each under a label
   saying what it is. The labels are the point, not decoration: a judgment
   has TWO citations and most readers do not know why. The neutral citation
   is assigned by the court itself and the S.C.R. one by the reporter, and
   naming them teaches that distinction without a paragraph explaining it.
   Neutral citations are recent in India, so this is genuinely new to people
   arriving from a web search. */
.case-meta {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 0.5rem 1.6rem; margin: 0 0 0.7rem;
}
.case-field { display: flex; flex-direction: column; gap: 0.1rem; }
.case-field-label {
  font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #a39e96; white-space: nowrap;
}
/* Marked as explicable, because "neutral citation" is the term a reader is
   most likely not to know. Dotted rather than solid so it reads as a
   definition, not a link. */
.case-field-label abbr {
  text-decoration: none; border-bottom: 1px dotted #c9bfae; cursor: help;
}

/* The neutral citation — the court's own identifier, so it reads darkest, and
   the string most often wanted from this page: it goes into a filing. So it
   carries a copy affordance you can SEE. Styled as text until hovered was too
   quiet — nothing said it could be clicked, and a control nobody knows is a
   control is not a feature. The glyph sits at low contrast and comes up on
   hover: present enough to invite, quiet enough not to compete with the
   actions below. */
.case-cite {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: inherit; font-size: 0.6875rem; font-weight: 600;
  color: #3d3a35; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  white-space: nowrap; background: none; border: 1px solid transparent;
  border-radius: 999px; padding: 0.125rem 0.4rem; margin-left: -0.4rem;
}
.case-cite svg { width: 0.72rem; height: 0.72rem; flex: none; opacity: 0.4; }
button.case-cite { cursor: pointer; }
button.case-cite:hover { background: #fffbf5; border-color: #e3dfd9; }
button.case-cite:hover svg { opacity: 0.85; }
button.case-cite:focus-visible { outline: 2px solid #1b2a4a; outline-offset: 1px; }
button.case-cite.is-copied {
  color: #2f5d3a; background: #e8efe9; border-color: transparent;
}
button.case-cite.is-copied svg { opacity: 1; }

/* The reporter's citation, quieter: the neutral one leads. */
.case-scr {
  font-size: 0.75rem; color: #7d7870;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Bench and date, as labelled fields rather than a bare line. "K. Vinod
   Chandran and J.B. Pardiwala JJ." with nothing above it told a reader
   nothing about what they were looking at -- a row of names is only obviously
   a bench to somebody who already knew. Wraps, unlike the citation beside it:
   a five-judge bench does not fit one line and must not force the row wide. */
.case-bench {
  font-size: 0.75rem; color: #7d7870; line-height: 1.5;
}

/* Authority as a pill — the one number on the row worth a glance. */
.case-auth {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: #1b2a4a; color: #fff; padding: 0.0625rem 0.5rem;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}

/* Status — good law, doubted, limited — reads the same on both pages. */
.case-flag {
  display: inline-block; font-size: 0.75rem; border-radius: 999px;
  padding: 0.15rem 0.6rem; background: #f7efd9; color: #8a6d1a;
}
.case-flag--doubted { color: #8c2f21; background: #f7e8e5; }
.case-flag--limited { color: #6a5a1e; background: #f5efdd; }