/*
 * main.css — legacy base styles that the design system still builds on.
 * Loads AFTER design-system.css. Pruned 2026-07-18: the W3-era layout
 * classes (.wrapper/.sidebar/...), ml-btn-*, ml-card-stat, ml-tag-*,
 * ml-flash-*, ml-form-card, and the plain will_paginate styles were all
 * unused after the redesign and were removed. What remains is the global
 * reset + base typography (several design-system rules deliberately
 * override these) and the few ml- helpers still referenced from views/JS:
 * ml-text-danger, the carrier tags, the SIM status dot, and .honeypot.
 */
@media screen {
  /* --- Reset Styles --- */
  * {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    width: 100%;
  }

  body {
    color: #333;
    /* Match the design system's base font so bare headings/text inherit it
       (this rule loads last, so it must agree with design-system.css). */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 18px;
  }

  h1 {
    font-size: 36px;
    line-height: 54px;
  }

  h2 {
    border-bottom: 2px solid #ccc;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 16px;
  }

  h3 {
    font-size: 18px;
    line-height: 36px;
  }

  p {
    margin-bottom: 18px;
  }

  /* --- Legacy color tokens still referenced by the rules/views below --- */
  :root {
    --ml-secondary: #2d6a8a;   /* steel blue — SIM usage stat numbers */
    --ml-success: #2e7d32;
    --ml-danger: #c62828;
    --ml-warning: #e65100;
    --ml-medium: #78909c;
  }

  /* --- Utility text colors (JS-assigned error text in device modals) --- */
  .ml-text-danger { color: var(--ml-danger) !important; }

  /* --- Carrier Tags --- */
  span.ml-carrier-tag {
    display: inline-block !important;
    border-radius: 4px;
    padding: 0px 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    letter-spacing: 0.3px;
    line-height: 1.5 !important;
    transition: opacity 0.2s;
  }
  span.ml-carrier-tag:hover {
    opacity: 0.75;
  }
  span.ml-carrier-tag.ml-carrier-tag-att {
    background-color: #00A8E0 !important;
    color: white !important;
  }
  span.ml-carrier-tag.ml-carrier-tag-firstnet {
    background-color: #003a63 !important;
    color: white !important;
  }
  span.ml-carrier-tag.ml-carrier-tag-verizon {
    background-color: #cd040b !important;
    color: white !important;
  }
  span.ml-carrier-tag.ml-carrier-tag-tmobile {
    background-color: #e20074 !important;
    color: white !important;
  }
  span.ml-carrier-tag.ml-carrier-tag-unknown {
    background-color: var(--ml-medium) !important;
    color: white !important;
  }
  span.ml-carrier-tag.ml-carrier-tag-mismatch {
    outline: 2px solid var(--ml-warning);
    outline-offset: 1px;
  }
  span.ml-carrier-tag.ml-carrier-tag-inactive {
    opacity: 0.5;
  }

  .ml-sim-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .ml-sim-status-dot.active { background-color: var(--ml-success); }
  .ml-sim-status-dot.inactive { background-color: var(--ml-danger); }
  .ml-sim-status-dot.mismatch { background-color: var(--ml-warning); }

  /* --- Spam-trap field on the registration form --- */
  .honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 24px;
    line-height: 36px;
  }

  h2 {
    font-size: 18px;
    line-height: 24px;
  }
}