/* DigiLekha — one stylesheet, hand-written, no build step.
   Same shape as ../mahalaxmi_computer: the site is six pages and a form.
   A toolchain here would be more moving parts than the thing it builds.
   Colours come from brand/BRAND.md — keep them in step. */

:root {
  --orange-600: #F4511E;
  --orange-500: #FF6A1A;
  --orange-400: #FF8A2B;
  --amber-300:  #FFD54F;
  --ink-900:    #1F2933;
  --ink-600:    #52606D;
  --paper:      #FFF8F2;
  --line:       #E8DFD8;
  --max: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink-900);
  background: #fff;
}

header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 1.25rem;
}
header .bar { max-width: var(--max); margin: 0 auto; display: flex;
              align-items: center; gap: .8rem; flex-wrap: wrap; }
header img { height: 40px; width: auto; display: block; }
header nav { margin-inline-start: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
header nav a { color: var(--ink-600); text-decoration: none; font-size: .95rem; }
header nav a:hover { color: var(--orange-600); }

main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .6rem; }
h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
p, li { color: var(--ink-900); }
.lede { font-size: 1.15rem; color: var(--ink-600); margin-top: 0; }
.muted { color: var(--ink-600); font-size: .93rem; }

a { color: var(--orange-600); }

.btn {
  display: inline-block; padding: .8rem 1.4rem; border-radius: 10px;
  background: var(--orange-500); color: #fff; text-decoration: none;
  font-weight: 600; border: 0; cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--orange-600); }
.btn.quiet { background: #fff; color: var(--ink-900); border: 1px solid var(--line); }
.btn.danger { background: #B3261E; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.price {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1.4rem; background: var(--paper); margin: 1.2rem 0;
}
.price .amount { font-size: 2rem; font-weight: 700; }
.price .amount span { font-size: 1rem; font-weight: 400; color: var(--ink-600); }

.note {
  border-inline-start: 4px solid var(--amber-300);
  background: #FFFCF3; padding: .9rem 1.1rem; border-radius: 0 10px 10px 0;
  margin: 1.2rem 0;
}
.note.warn { border-inline-start-color: #B3261E; background: #FFF5F5; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: start; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--ink-600); font-weight: 600; }

label { display: block; margin: 1rem 0 .3rem; font-weight: 600; font-size: .95rem; }
input, textarea, select {
  width: 100%; padding: .7rem .8rem; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}

footer {
  border-top: 1px solid var(--line); padding: 2rem 1.25rem 3rem;
  color: var(--ink-600); font-size: .9rem;
}
footer .bar { max-width: var(--max); margin: 0 auto;
              display: flex; gap: 1.1rem; flex-wrap: wrap; }

#signed-out, #signed-in { display: none; }