/* ===========================================================================
   Tier switch · guest / free / sovereign

   Lives in two very different rooms: the dark app chrome on Self, and the
   dawn-ground marketing pages. So every colour here is either a fern tint
   that reads on both grounds, or a token (--ink, --soft, --mist) that each
   room already scopes for itself. Nothing is hard-coded to one ground, and
   nothing is set outside .tsw.
   ========================================================================= */

.tsw {
  --tsw-line: rgba(126, 145, 105, 0.24);
  --tsw-tint: rgba(126, 145, 105, 0.08);
  --tsw-text: var(--ink, #12160f);
  --tsw-faint: var(--soft, var(--mist, #57646f));
  /* the fern that carries the small print. --fern-text is the dawn-ground
     value (#506244) and holds 4.5:1 there, but it lands at 2.5:1 on the
     evening ground the app renders on, so the rooms are scoped separately
     rather than sharing one green that only works in one of them. */
  --tsw-accent: var(--fern-text, #506244);
  /* the pause colour: the armed sign-out button and the QA strip. clay holds
     on dawn ground and lands at 3.6:1 on evening, so it is scoped too. */
  --tsw-warn: var(--clay, #b6502e);
  display: block;
  margin: 18px 0;
  text-align: left;
}

/* the app chrome: evening ground, so the accent lifts to moss */
.device .tsw,
[data-tsw-ground="dark"] .tsw,
.tsw[data-ground="dark"] {
  --tsw-accent: #a3b18a;
  --tsw-warn: #d98a66;
  --tsw-line: rgba(163, 177, 138, 0.28);
}

.tsw-head span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsw-accent);
}

.tsw-head h3 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tsw-text);
}

.tsw-head p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tsw-faint);
}

.tsw-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tsw-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  border: 1px solid var(--tsw-line);
  border-radius: 16px;
  background: transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.tsw-opt.is-here {
  border-color: rgba(126, 145, 105, 0.46);
  background: var(--tsw-tint);
}

.tsw-body {
  flex: 1 1 210px;
  min-width: 0;
}

.tsw-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.tsw-name {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsw-accent);
}

.tsw-price {
  font-size: 11px;
  color: var(--tsw-faint);
}

.tsw-price.free {
  color: var(--tsw-accent);
}

/* what it normally costs, kept visible rather than quietly deleted */
.tsw-price s {
  margin-left: 5px;
  color: var(--tsw-faint);
  opacity: 0.75;
  text-decoration-thickness: 1px;
}

.tsw-opt strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tsw-text);
}

.tsw-opt small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tsw-faint);
}

.tsw-act {
  flex: 0 0 auto;
  margin-left: auto;
}

.tsw-here {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(126, 145, 105, 0.18);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsw-accent);
}

.tsw-go {
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--tsw-line);
  background: transparent;
  color: var(--tsw-text);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.tsw-go:hover,
.tsw-go:focus-visible {
  border-color: rgba(126, 145, 105, 0.55);
  background: var(--tsw-tint);
}

/* armed = one more tap and you are signed out. it should look like a pause. */
.tsw-go.is-armed {
  border-color: rgba(182, 80, 46, 0.5);
  color: var(--tsw-warn);
  background: rgba(182, 80, 46, 0.08);
}

.tsw-go[disabled] {
  opacity: 0.5;
  cursor: default;
}

.tsw-fine {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--tsw-faint);
  opacity: 0.85;
}

.tsw-dimensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.9rem}.tsw-dimension{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;min-width:0;padding:.9rem;border:1px solid var(--tsw-line,rgba(237,231,214,.13));border-radius:18px;background:rgba(237,231,214,.035)}.tsw-dimension>span{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tsw-gold,#c4a574)}.tsw-dimension h4{margin:0;font-size:.96rem;font-weight:550;line-height:1.25;color:inherit}.tsw-dimension p{margin:0 0 .25rem;font-size:.76rem;line-height:1.48;color:var(--tsw-soft,rgba(237,231,214,.66))}.tsw-dimension small{font-size:.7rem;line-height:1.4;color:var(--tsw-soft,rgba(237,231,214,.58))}.tsw-dimension .tsw-go{margin-top:auto;width:100%}
@media(max-width:540px){.tsw-dimensions{grid-template-columns:1fr}.tsw-dimension{padding:.8rem}}

.tsw-dev {
  margin: 12px 0 0;
  padding: 9px 13px;
  border: 1px dashed rgba(182, 80, 46, 0.42);
  border-radius: 12px;
  font-size: 11px;
  color: var(--tsw-faint);
}

.tsw-dev strong {
  color: var(--tsw-warn);
  font-weight: 500;
}

.tsw-devoff {
  font-family: inherit;
  font-size: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tsw-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* the compact form: /pricing, where the page already carries the argument */
.tsw.compact .tsw-head p,
.tsw.compact .tsw-opt small {
  display: none;
}

.tsw.compact .tsw-opt {
  padding: 11px 14px;
}

@media (max-width: 420px) {
  .tsw-act {
    margin-left: 0;
    width: 100%;
  }

  /* the padding alone left a 34px target on a phone, which is the device
     almost everyone is holding here */
  .tsw-go {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsw-opt,
  .tsw-go {
    transition-duration: 0.01ms;
  }
}