/* GST calculator styles for aczen.live, loaded after styles.css.
   Scope: only what sits INSIDE .calc-form and .calc-result. The section box and .calc-grid belong to styles.css.
   Design idea: the form is a quiet input panel; the result is the tax block at the foot of a real GST invoice,
   with one decorative touch (a perforated top edge), so the "memorable thing" is the familiar invoice itself. */

/* ---------- Input panel ---------- */

/* White panel lifts the inputs off the --paper-deep section background so they read as one group. */
.calc-form {
  /* Paper-white matches the invoice block beside it, pairing the two as "input" and "document". */
  background: var(--paper, #FFFFFF);
  /* A hairline border instead of a shadow keeps it flat and avoids the generic card-with-shadow look. */
  border: 1px solid var(--rule, #E5E7EB);
  /* Largest radius is reserved for the two top-level panels, marking them as the section's containers. */
  border-radius: var(--radius-lg, 16px);
  /* Generous inner space so 44px targets never crowd the panel edge. */
  padding: clamp(1.25rem, 3vw, 1.75rem);
  /* Stack the three groups vertically with even rhythm without margin bookkeeping. */
  display: grid;
  /* One consistent gap between field groups. */
  gap: 1.5rem;
  /* Lets the panel shrink inside a narrow grid track instead of forcing horizontal scroll on phones. */
  min-width: 0;
}

/* Label wraps its input, so stack text above control. */
.calc-field {
  /* Grid gives a predictable gap between label text and input. */
  display: grid;
  /* Tight coupling so the label visibly belongs to its input. */
  gap: 0.5rem;
}

/* Small semibold label; sentence case because all-caps labels shout and read as template chrome. */
.calc-label {
  /* Small enough to rank below the value, large enough to read at arm's length on a phone. */
  font-size: 0.875rem;
  /* Semibold gives hierarchy without needing colour or caps. */
  font-weight: 600;
  /* Full ink, not soft grey, so the label passes contrast on white comfortably. */
  color: var(--ink, #111827);
  /* Undo any inherited letter-spacing or transforms from base styles. */
  text-transform: none;
  /* Same reason: keep normal tracking. */
  letter-spacing: normal;
  /* Legends default to some odd padding in some browsers; zero it so both label kinds align. */
  padding: 0;
}

/* The amount is the thing people type, so it is the largest text in the panel. */
#calc-amount {
  /* Stretch to the panel so long amounts like 1,00,00,000 still fit. */
  width: 100%;
  /* Include border and padding in that width so it never overflows the panel. */
  box-sizing: border-box;
  /* Big figure echoes how the amount dominates an invoice line. */
  font-size: 1.625rem;
  /* Inherit Inter from the page rather than the browser's default input font. */
  font-family: inherit;
  /* Medium weight keeps large digits from looking heavy. */
  font-weight: 500;
  /* Equal-width digits so the number does not jiggle as you type. */
  font-variant-numeric: tabular-nums;
  /* Ink colour for the value itself. */
  color: var(--ink, #111827);
  /* Inputs default to grey backgrounds in some UAs; force paper. */
  background: var(--paper, #FFFFFF);
  /* Hairline border matching the panel, strengthened only on focus/invalid. */
  border: 1px solid var(--rule, #E5E7EB);
  /* Smaller radius than the panel, so nesting reads correctly (inner radius < outer radius). */
  border-radius: var(--radius-sm, 8px);
  /* Vertical padding brings the field comfortably above the 44px touch minimum. */
  padding: 0.625rem 0.875rem;
  /* Tight leading keeps the box height predictable at the large size. */
  line-height: 1.2;
  /* Smooth the focus/invalid colour change; transitions of colour are not motion, so no reduced-motion gate. */
  transition: border-color 120ms var(--ease-out, ease-out), box-shadow 120ms var(--ease-out, ease-out);
}

/* Focus: a 2px brand edge plus a soft ring, so keyboard users can find the field at a glance. */
#calc-amount:focus {
  /* The border colour carries half of the 2px edge. */
  border-color: var(--brand, #0A5CF5);
  /* Inset 1px supplies the second pixel without changing layout; the outer 3px ring is the soft halo. */
  box-shadow: inset 0 0 0 1px var(--brand, #0A5CF5), 0 0 0 3px #D6E4FF;
  /* Transparent outline survives in Windows forced-colours mode (where box-shadow is dropped), so focus stays visible there. */
  outline: 2px solid transparent;
}

/* Invalid amount: the deadline colour signals "fix this" without the alarm of pure red. */
#calc-amount[aria-invalid="true"] {
  /* Deadline-text orange-brown has enough contrast against white for a meaningful border. */
  border-color: var(--deadline-text, #B54708);
}

/* Invalid and focused together: keep the warning colour instead of letting focus blue hide it. */
#calc-amount[aria-invalid="true"]:focus {
  /* Same 2px construction as normal focus, in the warning colour. */
  box-shadow: inset 0 0 0 1px var(--deadline-text, #B54708), 0 0 0 3px #FDE7D6;
}

/* Inline reason under the field, inserted by calculator.js and wired via aria-describedby. */
.calc-error {
  /* Pull it up toward the field it describes, closing the grid gap. */
  margin: -1rem 0 0;
  /* Matches the label size so the panel keeps one small-text size. */
  font-size: 0.875rem;
  /* Same warning colour as the border ties the message to the field. */
  color: var(--deadline-text, #B54708);
  /* Readable line height if it wraps on a narrow phone. */
  line-height: 1.4;
}

/* ---------- Segmented controls (rate, place of supply) ---------- */

/* Fieldset reset: the group is a row of joined segments, not a boxed form group. */
.calc-choice {
  /* Remove the default groove border. */
  border: 0;
  /* Remove default inset padding. */
  padding: 0;
  /* Remove default side margins. */
  margin: 0;
  /* Fieldsets have min-width: min-content by default, which blocks shrinking on phones. */
  min-width: 0;
  /* Flex lays segments side by side; the rendered legend stays outside the flex flow, above it. */
  display: flex;
}

/* Legend spacing above the segments. */
.calc-choice > legend {
  /* Same gap as label-to-input so both field types share rhythm. */
  margin-bottom: 0.5rem;
}

/* Each option label is one segment of the control. */
.calc-choice > label {
  /* Anchor for the visually hidden radio positioned inside it. */
  position: relative;
  /* Segments share the row equally so "In another state" and "In my state" read as a pair. */
  flex: 1 1 0;
  /* Centre the text inside the segment. */
  display: flex;
  /* Horizontal centring. */
  justify-content: center;
  /* Vertical centring. */
  align-items: center;
  /* 44px minimum touch target (WCAG 2.5.5 / Apple HIG). */
  min-height: 44px;
  /* Side padding so text never touches the dividing borders. */
  padding: 0.5rem 0.75rem;
  /* Hairline edge matches every other control. */
  border: 1px solid var(--rule, #E5E7EB);
  /* White segment by default so the selected brand segment stands out. */
  background: var(--paper, #FFFFFF);
  /* Soft ink for unselected options, full ink would compete with the selected one. */
  color: var(--ink-soft, #4B5563);
  /* Same label size as the rest of the panel. */
  font-size: 0.9375rem;
  /* Medium weight keeps short labels like "5%" from looking flimsy. */
  font-weight: 500;
  /* Equal-width digits so 5% / 18% / 40% align. */
  font-variant-numeric: tabular-nums;
  /* Keep "In another state" on one line where space allows; wraps only if the row truly can't fit. */
  text-align: center;
  /* Whole segment is clickable, so show it. */
  cursor: pointer;
  /* Prevent double-tap text selection on quick taps. */
  user-select: none;
  /* Colour-only transition, not movement. */
  transition: background-color 120ms var(--ease-out, ease-out), color 120ms var(--ease-out, ease-out);
}

/* Overlap neighbouring borders so two hairlines never sit side by side as one thick line. */
.calc-choice > label + label {
  /* Pull each subsequent segment left by the border width. */
  margin-left: -1px;
}

/* Round only the outer corners so the segments read as one control. */
.calc-choice > label:first-of-type {
  /* Left corners. */
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
}

/* Right end of the control. */
.calc-choice > label:last-of-type {
  /* Right corners. */
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

/* Hover hint on unselected segments only, for pointer users. */
.calc-choice > label:hover:not(:has(:checked)) {
  /* The section's own tint, so hover feels native to this block. */
  background: var(--paper-deep, #EDF3FF);
  /* Promote to full ink to signal "this is clickable". */
  color: var(--ink, #111827);
}

/* The radio stays in the DOM and in tab order but is visually hidden; the label is its visible face. */
.calc-choice input[type="radio"] {
  /* Remove from flow so it does not push the text. */
  position: absolute;
  /* Fully transparent but still focusable and announced (unlike display:none). */
  opacity: 0;
  /* Collapse its box so it can't catch stray clicks. */
  width: 1px;
  /* Same. */
  height: 1px;
  /* Clear default margins that would offset the absolute box. */
  margin: 0;
  /* Pin to the segment's corner, inside the label. */
  inset: 0;
  /* Never intercept pointer events; the label forwards clicks. */
  pointer-events: none;
}

/* Selected segment: brand fill, white text, the one strong colour in the panel. */
.calc-choice > label:has(:checked) {
  /* Brand blue fill makes the current choice unmistakable. */
  background: var(--brand, #0A5CF5);
  /* Matching border so the edge does not show a grey hairline around the blue. */
  border-color: var(--brand, #0A5CF5);
  /* White on #0A5CF5 is about 5:1, passing AA for this text size. */
  color: #FFFFFF;
  /* Lift above neighbours so its border covers the overlapped hairline. */
  z-index: 1;
}

/* Keyboard focus ring on the visible label, because the real radio is invisible. */
.calc-choice > label:has(:focus-visible) {
  /* Same 3px soft ring as the amount field, plus a brand edge, so focus looks identical everywhere. */
  box-shadow: 0 0 0 2px var(--paper, #FFFFFF), 0 0 0 4px var(--brand, #0A5CF5);
  /* Transparent outline keeps focus visible in forced-colours mode. */
  outline: 2px solid transparent;
  /* Keep the ring above the next segment. */
  z-index: 2;
}

/* ---------- Invoice tax block ---------- */

/* The result reads as the bottom of a GST invoice: white paper, hairline edge, perforated top. */
.calc-result {
  /* Paper-white like a printed invoice. */
  background: var(--paper, #FFFFFF);
  /* Hairline edge matches the input panel. */
  border: 1px solid var(--rule, #E5E7EB);
  /* Same top-level radius as the form so the pair balances. */
  border-radius: var(--radius-lg, 16px);
  /* Extra top padding clears the perforation bites. */
  padding: 1.75rem clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  /* Stack the lines and the CTA with even rhythm. */
  display: grid;
  /* Space between the tax table and the button. */
  gap: 1.5rem;
  /* Allow shrinking in narrow grid tracks. */
  min-width: 0;
  /* The perforation: a row of small half-circles bitten out of the top edge, like a tear-off invoice stub.
     A mask (not a background) so the bites are true holes that show the section colour behind. */
  -webkit-mask-image: radial-gradient(circle 4px at 50% 0, transparent 98%, #000 100%);
  /* Standard property for browsers that support unprefixed masks. */
  mask-image: radial-gradient(circle 4px at 50% 0, transparent 98%, #000 100%);
  /* Each 14px tile holds one bite; the full height keeps the rest of the tile opaque. */
  -webkit-mask-size: 14px 100%;
  /* Unprefixed twin. */
  mask-size: 14px 100%;
  /* Repeat only along the top edge. */
  -webkit-mask-repeat: repeat-x;
  /* Unprefixed twin. */
  mask-repeat: repeat-x;
  /* Centre the row so bites are symmetric at both corners. */
  -webkit-mask-position: center top;
  /* Unprefixed twin. */
  mask-position: center top;
}

/* Definition list reset; the rows are laid out by .calc-line. */
.calc-lines {
  /* Browsers add default margins to <dl>. */
  margin: 0;
  /* Single column of rows. */
  display: grid;
}

/* One tax head per row: name left, amount right, like an invoice's tax summary. */
.calc-line {
  /* Name and amount on one baseline, pushed to opposite edges. */
  display: flex;
  /* Opposite edges. */
  justify-content: space-between;
  /* Align text baselines rather than box centres, so the larger total aligns with its label. */
  align-items: baseline;
  /* Allows a long label to wrap on very narrow screens rather than overflow. */
  gap: 1rem;
  /* Vertical breathing room per row; horizontal padding gives the update flash a visible shape. */
  padding: 0.75rem 0.5rem;
  /* Negative side margin cancels the horizontal padding so text still lines up with the panel edge. */
  margin: 0 -0.5rem;
  /* Rounded flash background instead of a hard rectangle. */
  border-radius: var(--radius-sm, 8px);
}

/* Thin dashed rules between rows, the way invoice line items are separated on paper. */
.calc-line + .calc-line {
  /* Dashed, not solid, so only the total's solid rule reads as "sum". */
  border-top: 1px dashed var(--rule, #E5E7EB);
  /* A row with a top rule should not round its top corners into the line. */
  border-top-left-radius: 0;
  /* Same for the right side. */
  border-top-right-radius: 0;
}

/* Rows toggled by calculator.js must really disappear.
   !important because a later "display: flex/grid" from any stylesheet would otherwise override the hidden attribute. */
.calc-line[hidden] {
  /* Remove from layout and from the accessibility tree. */
  display: none !important;
}

/* Tax head name. */
.calc-line dt {
  /* Soft ink so amounts, not labels, carry the visual weight. */
  color: var(--ink-soft, #4B5563);
  /* Body size for comfortable reading. */
  font-size: 0.9375rem;
}

/* Rate next to the head name, e.g. "CGST 9%". */
.calc-line dt span {
  /* Tabular digits keep 2.5% / 9% / 20% from shifting the label. */
  font-variant-numeric: tabular-nums;
  /* Full ink makes the rate the scannable part of the label. */
  color: var(--ink, #111827);
  /* Medium weight separates the rate from the head name without a second colour. */
  font-weight: 500;
}

/* Amount column. */
.calc-line dd {
  /* <dd> is indented by default. */
  margin: 0;
  /* Right-aligned, as currency is on every invoice. */
  text-align: right;
}

/* The live values themselves. */
.calc-line output {
  /* Equal-width digits so columns of rupees line up by place value. */
  font-variant-numeric: tabular-nums;
  /* Full ink: the numbers are the answer. */
  color: var(--ink, #111827);
  /* Medium weight for legibility at body size. */
  font-weight: 500;
  /* Body size. */
  font-size: 0.9375rem;
  /* Amounts must never break across lines. */
  white-space: nowrap;
}

/* Grand total: solid 2px ink rule above, larger bold figure, like the "Total" line under an invoice's tax summary.
   Two classes so this beats `.calc-line + .calc-line` (also two classes) by coming later. */
.calc-line.calc-total {
  /* Solid heavy rule means "everything above sums to this". */
  border-top: 2px solid var(--ink, #111827);
  /* A little extra room above the total so the rule breathes. */
  padding-top: 1rem;
  /* Keep a small gap before the rule so the rule sits between rows, not on the previous row's text. */
  margin-top: 0.25rem;
}

/* Total label. */
.calc-line.calc-total dt {
  /* Full ink: the total label ranks above other heads. */
  color: var(--ink, #111827);
  /* Semibold matches .calc-label weight so the section uses one emphasis weight. */
  font-weight: 600;
  /* Slightly larger than rows. */
  font-size: 1rem;
}

/* Total amount: the biggest number in the block. */
.calc-line.calc-total output {
  /* Clearly larger than line amounts, still smaller than the section title. */
  font-size: 1.375rem;
  /* Bold for the one figure people act on. */
  font-weight: 700;
  /* Slightly tighter tracking keeps large digits compact. */
  letter-spacing: -0.01em;
}

/* CTA under the table; its look comes from .btn .btn-ink in styles.css, this only positions it. */
.calc-result > .btn {
  /* Align to the start edge like the invoice text rather than stretching a wide bar. */
  justify-self: start;
}

/* On phones, the CTA spans the width so it is an easy thumb target. */
@media (max-width: 480px) {
  /* Full width button on narrow screens. */
  .calc-result > .btn {
    /* Stretch across the panel. */
    justify-self: stretch;
    /* Centre its label once it is wide. */
    text-align: center;
  }
}

/* ---------- Update highlight (user-triggered motion) ---------- */

/* Only animate for people who haven't asked to reduce motion; the values still update instantly for everyone. */
@media (prefers-reduced-motion: no-preference) {
  /* Row that just changed gets a brief tint that fades out, pointing the eye at what moved. */
  .calc-line.is-updated {
    /* ~500ms is long enough to notice, short enough not to lag behind fast typing. */
    animation: calc-flash 500ms var(--ease-out, ease-out);
  }
}

/* Flash from the section tint to nothing. */
@keyframes calc-flash {
  /* Start on --paper-deep so the flash is in the page's own colour family. */
  from {
    /* Tint. */
    background-color: var(--paper-deep, #EDF3FF);
  }
  /* End transparent so the row returns to paper. */
  to {
    /* Clear. */
    background-color: transparent;
  }
}