/* perrycs.com/link (link.html): make the code that links a copy of UPS Monitor
   to this account.

   Built on appMenu.css's group box and category header, the same as My
   Remote Control, so it reads as part of the account side of the site.

   Tokens only, never a colour: it has to look right in all eight themes.
   Sizes through --font-scale for the same reason.

   Added 2026-10-08. */

/* The shared styles set display on buttons and links, and an element with
   its own display ignores the hidden attribute. The page is built out of
   hidden blocks, so this is load-bearing. */
.link [hidden] {
  display: none !important;
}

.link__status {
  margin: 24px 0;
  color: var(--ink-muted);
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.link-steps {
  margin: 0 0 4px;
  padding-left: 22px;
  color: var(--ink);
  font-size: calc(0.98rem * var(--font-scale, 1));
  line-height: 1.6;
}

.link-steps code {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--code-ink);
}

.link-hint {
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.88rem * var(--font-scale, 1));
  line-height: 1.5;
}

.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

.link-buttons button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The "Open My UPS" link wears the button's clothes. */
.link-buttons a.product-btn {
  text-decoration: none;
}

/* ------------------------------------------------------------ the code */

.link-made {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

/* The code, as big as the page allows: it is read on this screen and typed
   on another, character by character, sometimes from across a desk. */
.link-big {
  margin: 0;
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: calc(2.6rem * var(--font-scale, 1));
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  user-select: all;
}

/* Expired: still on the screen, so nobody wonders where it went, but plainly
   no longer something to type. */
.link-big.is-spent {
  color: var(--ink-faint);
  text-decoration: line-through;
}

.link-status {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
}

/* ------------------------------------------------------------- notices */

.link-notice {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--ink);
}

.link-notice p {
  margin: 0;
}

.link-notice--ok {
  background: var(--ok-soft);
  border-left: 4px solid var(--ok);
}

.link-notice--warn {
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
}

.link-notice--danger {
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
}

/* UPS Monitor Cloud's line above the steps: trial days, the paid-until date,
   and the computer count (2026-10-09). */
.link-sub {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: calc(0.92rem * var(--font-scale, 1));
}

.link-sub:empty {
  display: none;
}

#sub-block {
  margin: 0 0 14px;
}