/*
 * Trecastelli — Forno design layer (round 4)
 *
 * I hold the shared tokens, type and components for every Trecastelli web page:
 * public site, dashboard sign-in and, as screens are rebuilt, the dashboard.
 * Values come from Design/Trecastelli/CLAUDE.md ("Chosen direction: 1a Forno").
 *
 * Author: Maré Greyling (Thevertex) <mare.greyling@gmail.com> — https://mare-greyling.com
 * Project: Trecastelli Loyalty Platform
 */

:root {
  --tc-bg: #FBF4E6;
  --tc-surface: #FFFBF2;
  --tc-line: #EADBC0;
  --tc-line-strong: #D8C6A2;
  --tc-ink: #411F1E;
  --tc-body: #5A4A3A;
  --tc-muted: #736550;
  --tc-faint: #A8957A;
  --tc-gold: #E6A84C;
  --tc-gold-text: #A8742A;
  --tc-cream: #F9E1A4;
  --tc-cream-soft: #F1E2B8;
  --tc-tint: #F6E7C4;
  --tc-dashed: #C9B48D;
  --tc-dark: #2B1514;
  --tc-skeleton: #F1E6CF;
  --tc-red: #9B2C2C;
  --tc-red-tint: #F6DDD5;

  --tc-script: 'Herr Von Muellerhoff', cursive;
  --tc-serif: 'Merriweather', Georgia, serif;
  --tc-caps: 'Montserrat', system-ui, sans-serif;

  --tc-radius: 16px;
  --tc-radius-sm: 12px;
  --tc-shadow: 0 30px 60px -20px rgba(65, 31, 30, .35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.tc {
  margin: 0;
  background: var(--tc-bg);
  color: var(--tc-ink);
  font-family: var(--tc-serif);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.tc a { color: var(--tc-gold-text); }
.tc a:hover { color: #8A5E1F; }
.tc img { max-width: 100%; display: block; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.tc-script { font-family: var(--tc-script); font-weight: 400; line-height: .8; color: var(--tc-gold-text); }
.tc-caps { font-family: var(--tc-caps); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.tc-eyebrow { font-family: var(--tc-caps); font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--tc-muted); text-transform: uppercase; }
.tc-sample { font-family: var(--tc-caps); font-size: 9px; font-weight: 700; letter-spacing: .18em; color: var(--tc-faint); text-transform: uppercase; }
.tc-muted { color: var(--tc-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--tc-caps); font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  background: var(--tc-ink); color: var(--tc-cream);
}
.tc .tc-btn, .tc .tc-btn:hover { color: var(--tc-cream); }
.tc-btn--block { width: 100%; }
.tc-btn--outline { background: transparent; color: var(--tc-ink); border: 1.5px solid var(--tc-ink); }
.tc .tc-btn--outline, .tc .tc-btn--outline:hover { color: var(--tc-ink); }
.tc-btn[aria-disabled="true"] { cursor: default; }

/* Store badges (not live in the demo) */
.tc-store {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px;
  border-radius: var(--tc-radius-sm); font-family: var(--tc-caps); font-weight: 600; font-size: 13px;
  background: var(--tc-cream); color: var(--tc-ink);
}
.tc-store--ghost { background: transparent; border: 1.5px solid var(--tc-cream); color: var(--tc-cream); }
.tc-store i { font-size: 22px; }

/* ── Sample tag ───────────────────────────────────────────────────────── */
.tc-tag {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  background: rgba(65, 31, 30, .8); color: var(--tc-cream);
  font-family: var(--tc-caps); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}

/* ── Global chrome: footer credit + help button ───────────────────────── */
.tc-credit {
  padding: 16px; text-align: center; border-top: 1px solid var(--tc-line);
  font-family: var(--tc-caps); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--tc-faint);
}
.tc .tc-credit a { color: inherit; text-decoration: underline; }
.tc-credit--dark { border-top: 0; color: var(--tc-dashed); }
.tc .tc-credit--dark a { color: var(--tc-gold); }

.tc-help { position: fixed; left: 20px; bottom: 24px; z-index: 60; }
.tc-help__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--tc-ink); color: var(--tc-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(65, 31, 30, .6);
}
.tc-help__btn i { font-size: 26px; }
.tc-help__menu {
  position: absolute; left: 0; bottom: 60px; width: 290px; padding: 8px;
  background: var(--tc-surface); border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow); display: none;
}
.tc-help[data-open="true"] .tc-help__menu { display: block; }
.tc-help__item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px; border: 0; border-radius: 12px;
  background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--tc-ink); text-decoration: none;
}
.tc .tc-help__item { color: var(--tc-ink); }
.tc-help__item:hover { background: var(--tc-tint); }
.tc-help__item i { font-size: 22px; color: var(--tc-gold-text); margin-top: 2px; }
.tc-help__title { font-family: var(--tc-caps); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tc-help__note { font-size: 13px; color: var(--tc-muted); line-height: 1.5; }

/* ── Public site ──────────────────────────────────────────────────────── */
.tc-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 36px; }
.tc-nav__logo img { width: 170px; height: auto; }
.tc-nav__links { display: flex; align-items: center; gap: 26px; font-family: var(--tc-caps); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tc .tc-nav__links a { color: var(--tc-body); text-decoration: none; }
.tc .tc-nav__links a.tc-nav__cta { padding: 9px 16px; border-radius: 999px; background: var(--tc-ink); color: var(--tc-cream); }

.tc-hero { position: relative; min-height: 420px; overflow: hidden; display: flex; align-items: center; }
.tc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 21, 20, .86), rgba(43, 21, 20, .35)); }
.tc-hero .tc-tag { position: absolute; top: 16px; right: 16px; }
.tc-hero__body { position: relative; padding: 40px 52px; max-width: 620px; color: var(--tc-cream); display: flex; flex-direction: column; gap: 18px; }
.tc-hero__script { font-size: 76px; color: var(--tc-gold); }
.tc-hero__title { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 300; }
.tc-hero__lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tc-cream-soft); max-width: 460px; }
.tc-hero__stores { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.tc-hero .tc-sample { color: #E7D4A6; }

.tc-section { padding: 48px 52px; display: flex; flex-direction: column; gap: 28px; }
.tc-section__script { font-size: 52px; }
.tc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tc-step { display: flex; flex-direction: column; gap: 10px; }
.tc-step__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--tc-tint); display: flex; align-items: center; justify-content: center; }
.tc-step__icon i { font-size: 26px; color: var(--tc-gold-text); }
.tc-step__icon--gold { background: var(--tc-gold); }
.tc-step__icon--gold i { color: var(--tc-ink); }
.tc-step__title { font-size: 18px; }
.tc-step__text { font-size: 14px; color: var(--tc-muted); line-height: 1.6; }

.tc-stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.tc-storecard { border-radius: var(--tc-radius); overflow: hidden; position: relative; height: 160px; }
.tc-storecard img { width: 100%; height: 100%; object-fit: cover; }
.tc-storecard__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(rgba(43, 21, 20, 0), rgba(43, 21, 20, .82)); color: var(--tc-cream); font-size: 15px; }

.tc-footer { background: var(--tc-ink); color: var(--tc-cream-soft); padding: 30px 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tc-footer__brand { font-size: 13px; line-height: 1.8; }
.tc .tc-footer a { color: var(--tc-gold); }

/* Card pages (referral, privacy) */
.tc-page { min-height: 100vh; display: flex; flex-direction: column; }
.tc-page__main { flex: 1; width: 100%; margin: 0 auto; }
.tc-card { max-width: 560px; margin: 40px auto; background: var(--tc-bg); border-radius: 14px; overflow: hidden; box-shadow: var(--tc-shadow), 0 0 0 1px var(--tc-line-strong); }
.tc-card__photo { position: relative; height: 200px; overflow: hidden; }
.tc-card__photo > img.tc-card__bg { width: 100%; height: 100%; object-fit: cover; }
.tc-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(43, 21, 20, .3), rgba(43, 21, 20, .75)); }
.tc-card__logo { position: absolute; left: 28px; bottom: 20px; width: 150px; z-index: 1; }
.tc-card__body { padding: 32px 36px 40px; display: flex; flex-direction: column; gap: 18px; text-align: center; align-items: center; }
.tc-card__badge { width: 72px; height: 72px; border-radius: 50%; background: var(--tc-tint); display: flex; align-items: center; justify-content: center; margin-top: -62px; position: relative; box-shadow: 0 0 0 6px var(--tc-bg); }
.tc-card__badge i { font-size: 34px; color: var(--tc-gold-text); }
.tc-card__badge--plain { margin-top: 0; width: 80px; height: 80px; box-shadow: none; }
.tc-card__badge--plain i { font-size: 38px; }
.tc-card__script { font-size: 56px; }
.tc-card__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 400; }
.tc-card__text { margin: 0; font-size: 15px; color: var(--tc-muted); line-height: 1.7; max-width: 380px; }

.tc-doc { max-width: 900px; margin: 40px auto; background: var(--tc-bg); border-radius: 14px; overflow: hidden; box-shadow: var(--tc-shadow), 0 0 0 1px var(--tc-line-strong); }
.tc-doc__body { padding: 44px 64px 40px; display: flex; flex-direction: column; gap: 20px; }
.tc-doc__script { font-size: 56px; margin-top: 8px; }
.tc-doc__cols { columns: 2; column-gap: 40px; font-size: 14px; line-height: 1.75; color: var(--tc-body); }
.tc-doc__cols p { margin: 0 0 14px; break-inside: avoid; }
.tc-doc__cols b { color: var(--tc-ink); }

/* ── Phone widths ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tc-nav { padding: 16px; }
  .tc-nav__logo img { width: 130px; }
  .tc-nav__links a:not(.tc-nav__cta) { display: none; }
  .tc-hero { min-height: 520px; }
  .tc-hero__body { padding: 40px 16px; }
  .tc-hero__script { font-size: 56px; }
  .tc-hero__title { font-size: 30px; }
  .tc-section { padding: 36px 16px; }
  .tc-section__script { font-size: 44px; }
  .tc-steps { grid-template-columns: 1fr 1fr; }
  .tc-stores { grid-template-columns: 1fr; }
  .tc-footer { padding: 24px 16px; }
  .tc-card, .tc-doc { margin: 0; border-radius: 0; box-shadow: none; }
  .tc-card__body { padding: 28px 16px 32px; }
  .tc-doc__body { padding: 32px 16px; }
  .tc-doc__cols { columns: 1; }
  .tc-help { left: 16px; bottom: 16px; }
  /* Room at the end of every page so the help button never covers the last text or button. */
  .tc-footer, .tc-page__main { padding-bottom: 84px; }
}
@media (max-width: 480px) {
  .tc-steps { grid-template-columns: 1fr; }
}

/* ── Help widget panel (kit §7) ── */
.tc-help__panel { position: absolute; left: 0; bottom: 60px; width: 340px; max-width: calc(100vw - 32px);
  max-height: 72vh; overflow-y: auto; padding: 16px; background: var(--tc-surface);
  border: 1px solid var(--tc-line); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow); }
.tc-help__tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tc-help__tab { flex: 1; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-family: var(--tc-caps);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--tc-line); background: transparent; color: var(--tc-ink); }
.tc-help__tab.is-active { background: var(--tc-ink); color: var(--tc-bg); border-color: var(--tc-ink); }
.tc-help__label { display: block; font-family: var(--tc-caps); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tc-muted); margin: 10px 0 4px; }
.tc-help__input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--tc-line);
  border-radius: 8px; background: var(--tc-bg); font-family: var(--tc-serif); font-size: 14px; color: var(--tc-ink); }
textarea.tc-help__input { resize: vertical; }
.tc-help__sharpen { margin-top: 10px; background: transparent; border: 1.5px solid var(--tc-gold-text);
  color: var(--tc-gold-text); border-radius: 999px; padding: 6px 14px; font-family: var(--tc-caps);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.tc-help__aioff { margin-top: 8px; font-size: 12px; color: var(--tc-muted); }
.tc-help__shot { font-size: 12px; color: var(--tc-muted); }
.tc-help__shotrow { display: flex; align-items: center; gap: 8px; background: var(--tc-bg);
  border: 1px solid var(--tc-line); border-radius: 8px; padding: 6px 10px; }
.tc-help__shotrow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tc-ink); }
.tc-help__shotx { border: none; background: transparent; cursor: pointer; font-size: 16px; color: var(--tc-muted); }
.tc-help__attach { display: inline-block; margin-top: 10px; font-family: var(--tc-caps); font-size: 11px;
  font-weight: 700; letter-spacing: .08em; color: var(--tc-gold-text); cursor: pointer; }
.tc-help__err { color: #b23b2e; font-size: 13px; font-weight: 700; margin-top: 10px; }
.tc-help__send { margin-top: 14px; width: 100%; padding: 11px 0; border: none; border-radius: 999px;
  background: var(--tc-ink); color: var(--tc-bg); font-family: var(--tc-caps); font-size: 12px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tc-help__foot { margin-top: 10px; font-size: 11px; color: var(--tc-muted); }
.tc-help__done { padding: 24px 0; text-align: center; font-family: var(--tc-serif); font-size: 15px; color: var(--tc-ink); }
.tc-help__guide { background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.tc-help__guide-t { font-family: var(--tc-caps); font-size: 13px; font-weight: 700; color: var(--tc-ink); margin-bottom: 3px; }
.tc-help__guide-b { font-family: var(--tc-serif); font-size: 13px; line-height: 1.5; color: var(--tc-body); }
.tc-help__listen { margin-top: 8px; background: transparent; border: 1px solid var(--tc-gold-text);
  color: var(--tc-gold-text); border-radius: 999px; padding: 4px 12px; font-family: var(--tc-caps);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }

.tc-help__points { list-style: none; margin: 10px 0 4px; padding: 0; }
.tc-help__point { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 13.5px; line-height: 1.45; color: #4a3b2c; }
.tc-help__tick { flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--tc-gold-text); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
.tc-help__showme { display: block; width: 100%; margin-top: 12px; background: var(--tc-ink, #411F1E); color: #fff; border: none; border-radius: 12px; padding: 12px 16px; font-family: var(--tc-caps); font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.tc-help__showme:disabled { opacity: .45; cursor: default; }
[data-tc-help][data-touring="true"] .tc-help__btn { display: none; }

.tc-tour { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.tc-tour::before { content: ''; position: absolute; inset: 0; background: rgba(40,28,20,.55); pointer-events: auto; }
.tc-tour__ring { position: fixed; border: 3px solid var(--tc-gold-text, #E6A84C); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(40,28,20,.55); transition: top .25s, left .25s, width .25s, height .25s; pointer-events: none; }
.tc-tour__cap { position: fixed; max-width: min(360px, 88vw); background: #fff; color: #3a2c1e; border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(40,28,20,.3); pointer-events: auto; z-index: 2147483001; }
.tc-tour__count { font-family: var(--tc-caps); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--tc-gold-text, #E6A84C); text-transform: uppercase; margin-bottom: 6px; }
.tc-tour__txt { font-size: 14.5px; line-height: 1.5; margin-bottom: 12px; }
.tc-tour__bar { display: flex; justify-content: space-between; gap: 10px; }
.tc-tour__close { background: transparent; border: none; color: #8a7a68; font-size: 13px; cursor: pointer; padding: 6px 4px; }
.tc-tour__next { background: var(--tc-ink, #411F1E); color: #fff; border: none; border-radius: 999px; padding: 9px 22px; font-family: var(--tc-caps); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }

/* TestFlight request + Android APK on P1 */
button.tc-store { cursor: pointer; font: inherit; }
.tc-tf { margin-top: 18px; max-width: 420px; background: rgba(255, 251, 242, .97); color: var(--tc-ink, #411F1E); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tc-tf[hidden] { display: none; }
.tc-tf__title { font-family: 'Merriweather', Georgia, serif; font-size: 18px; }
.tc-tf__text { margin: 0; font-size: 14px; line-height: 1.5; color: #5A4A3A; }
.tc-tf__input { padding: 12px 14px; border-radius: 12px; border: 1px solid #EADBC0; background: #FBF4E6; font: 15px 'Merriweather', Georgia, serif; color: #411F1E; }
.tc-tf__send { padding: 13px; border: 0; border-radius: 999px; background: #411F1E; color: #F9E1A4; font: 700 12px 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.tc-tf__send:disabled { opacity: .6; }
.tc-tf__err { color: #B23B2E; font-size: 13px; }
.tc-tf__done { color: #3d6b3a; font-size: 14px; }