/* Tweed Telecom portal — matched to www.tweedtel.co.uk.
   One stylesheet. Every colour in a rule comes from a token defined below,
   light and dark. Mobile-first: 390px works without sideways scroll; 44px tap
   targets. */

@font-face{
  font-family:"Manrope";
  src:url("/static/brand/fonts/manrope-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  color-scheme:light;

  /* brand tokens from the site */
  --red:#d7262e;
  --red-strong:#b81d24;
  --red-on-dark:#ff5a5f;
  --dark:#14171c;
  --dark-2:#1b1f26;
  --dark-line:#2b3039;

  /* light surfaces */
  --ink:#14171c;
  --ink-2:#4a515c;
  --ink-3:#6b7280;
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  /* the meta theme-color tags (templates.py, callfeatures/views.py) repeat --surface and --surface-dark as literal
     hex values, because browsers do not read var() there */
  --surface-dark:#14171c;
  --line:#e2e5ea;

  /* text on the dark header/footer */
  --on-dark:#f3f5f8;
  --on-dark-2:#b9c0cb;
  --on-dark-3:#8b93a1;

  --white:#ffffff;
  --input-bg:#ffffff;
  --code-bg:#0e1116;
  --red-tint:rgba(215,38,46,.08);
  --red-tint-2:rgba(215,38,46,.14);
  --red-line:rgba(215,38,46,.45);
  --focus:rgba(215,38,46,.35);
  --shadow:0 1px 2px rgba(20,23,28,.06), 0 10px 28px rgba(20,23,28,.08);

  --radius:14px;
  --wrap:1120px;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --ink:#f3f5f8;
    --ink-2:#b9c0cb;
    --ink-3:#8b93a1;
    --bg:#14171c;
    --bg-2:#1b1f26;
    --surface:#1b1f26;
    --surface-2:#20252e;
    --line:#2b3039;
    --input-bg:#101318;
    --red-tint:rgba(215,38,46,.16);
    --red-tint-2:rgba(215,38,46,.22);
    --red-line:rgba(215,38,46,.50);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg); color:var(--ink)}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 18px}
h1,h2,h3{font-family:var(--font); font-weight:800; line-height:1.15; margin:0 0 .5em;
  letter-spacing:-.02em; color:var(--ink)}
h1{font-size:1.65rem}
h2{font-size:1.15rem; font-weight:700; letter-spacing:-.01em}
a{color:var(--red)}
a:hover{color:var(--red-strong)}
@media (prefers-color-scheme:dark){
  a{color:var(--red-on-dark)}
  a:hover{color:var(--white)}
}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.skip{position:absolute; left:-999px}
.skip:focus{left:8px; top:8px; background:var(--surface); color:var(--ink); padding:8px; z-index:9}

/* masthead: near-black band, site lockup, thin hairlines */
.masthead{
  color:var(--on-dark);
  background:var(--dark);
  border-top:3px solid var(--red);
  border-bottom:1px solid var(--dark-line);
}
.masthead-inner{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  justify-content:space-between; padding:14px 18px}
.brand{display:flex; gap:12px; align-items:center; color:var(--on-dark);
  text-decoration:none; min-width:0}
.brand-lockup{display:block; flex:0 0 auto}
.brand-lockup img{display:block; height:34px; width:auto}
.brand-tag{color:var(--on-dark-3); font-size:.76rem; letter-spacing:.01em}
.nav{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center}
.nav-link{color:var(--on-dark-2); text-decoration:none; padding:10px 12px; border-radius:9px;
  font-family:var(--font); font-weight:600; font-size:.95rem; min-height:44px;
  display:inline-flex; align-items:center;
  border:1px solid transparent; transition:background .15s, color .15s, border-color .15s}
.nav-link:hover{background:var(--dark-2); color:var(--white); border-color:var(--dark-line)}
.nav-link-active{background:var(--red-tint-2); color:var(--red-on-dark);
  border-color:var(--red-line)}
.nav-signout{margin:0}
.link-button{background:none; border:1px solid transparent; color:var(--on-dark-2);
  font:inherit; font-weight:600; font-size:.95rem; cursor:pointer; padding:10px 12px;
  border-radius:9px; min-height:44px}
.link-button:hover{background:var(--dark-2); color:var(--white); border-color:var(--dark-line)}
.admin-nav{margin:0 0 16px}
.admin-nav .nav-link{color:var(--ink-2); border-color:var(--line)}
.admin-nav .nav-link:hover{background:var(--surface-2); color:var(--ink);
  border-color:var(--ink-3)}
.admin-nav .nav-link-active{background:var(--red-tint); color:var(--red);
  border-color:var(--red-line)}
@media (prefers-color-scheme:dark){
  .admin-nav .nav-link{color:var(--ink-2); border-color:var(--line)}
  .admin-nav .nav-link:hover{background:var(--surface-2); color:var(--ink)}
  .admin-nav .nav-link-active{background:var(--red-tint); color:var(--red-on-dark)}
}

main.wrap{padding-top:22px; padding-bottom:32px}
.banner:empty{display:none}
.notice{background:var(--surface-2); border:1px solid var(--line); border-left:5px solid var(--red);
  color:var(--ink); padding:12px 14px; border-radius:10px; margin:0 0 16px}
.notice-warn{background:var(--red-tint); border-color:var(--red-line); border-left-color:var(--red)}
.notice-ok{background:var(--surface-2); border-color:var(--line); border-left-color:var(--ink-3)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin:0 0 16px}
.grid{display:grid; gap:16px; grid-template-columns:1fr}
.cards{display:grid; gap:16px; grid-template-columns:1fr; margin:0 0 16px}
.lede{font-size:1.02rem; color:var(--ink-2); margin:.2em 0 .9em}
.help,.mut{color:var(--ink-3); font-size:.9rem}
.auth{display:grid; gap:18px; grid-template-columns:1fr; align-items:start}
.auth-narrow{max-width:520px; margin:0 auto}
.auth-card h1{margin-bottom:.2em}
.auth-aside{padding:4px 2px}
.ticks{list-style:none; padding:0; margin:0 0 12px}
.ticks li{padding-left:26px; position:relative; margin:.35em 0; color:var(--ink-2)}
.ticks li:before{content:""; position:absolute; left:0; top:.45em; width:12px; height:12px;
  border-radius:4px; background:var(--red)}

.form{display:flex; flex-direction:column; gap:6px; margin:6px 0 10px}
.form label{font-family:var(--font); font-size:.9rem; font-weight:600; color:var(--ink-2)}
.form input,.form select,.form textarea{font:inherit; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--input-bg);
  color:var(--ink); min-width:0; width:100%; min-height:44px}
.form input::placeholder{color:var(--ink-3)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:3px solid var(--focus); outline-offset:1px; border-color:var(--red)}
.form.inline{flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap; margin:0}
.form.inline select{width:auto; min-width:180px}

/* buttons: .btn is the dash component; .button kept for existing pages */
.btn,.button{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:700; font-size:1rem; padding:11px 18px;
  margin-top:8px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--ink); cursor:pointer; text-decoration:none;
  text-align:center; min-height:44px; transition:background .15s, border-color .15s}
.btn:hover,.button:hover{background:var(--surface-2); color:var(--ink);
  border-color:var(--ink-3)}
.btn.primary,.button:not(.button-ghost):not(.button-quiet){background:var(--red);
  border-color:var(--red); color:var(--white)}
.btn.primary:hover,.button:not(.button-ghost):not(.button-quiet):hover{
  background:var(--red-strong); border-color:var(--red-strong); color:var(--white)}
.btn.bad{background:var(--red-tint); border-color:var(--red-line); color:var(--red)}
.btn.bad:hover{background:var(--red); border-color:var(--red); color:var(--white)}
.btn[disabled],.button[disabled]{background:var(--surface-2); color:var(--ink-3);
  cursor:not-allowed; border-color:var(--line)}
.btn.ghost,.button-ghost,.button-quiet{background:transparent; color:var(--ink);
  border:1px solid var(--line)}
.btn.ghost:hover,.button-ghost:hover,.button-quiet:hover{background:var(--surface-2);
  color:var(--ink); border-color:var(--ink-3)}
@media (prefers-color-scheme:dark){
  .btn.primary,.button:not(.button-ghost):not(.button-quiet){background:var(--red-on-dark);
    border-color:var(--red-on-dark); color:var(--dark)}
  .btn.primary:hover,.button:not(.button-ghost):not(.button-quiet):hover{
    background:var(--red); border-color:var(--red); color:var(--white)}
  .btn.bad{color:var(--red-on-dark); border-color:var(--red-line)}
}

.stat{font-family:var(--font); font-weight:800; font-size:2rem; letter-spacing:-.02em;
  margin:.1em 0 .2em; color:var(--ink)}
.pill{display:inline-block; font-size:.78rem; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font); font-weight:600}
.pill.state{background:var(--red-tint); border-color:var(--red-line); color:var(--red)}
.pill-due{background:var(--red-tint); border-color:var(--red-line); color:var(--red)}
@media (prefers-color-scheme:dark){.pill.state,.pill-due{color:var(--red-on-dark)}}
.pill-wait{background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.pill-ok{background:var(--surface-2); color:var(--ink-2)}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.95rem}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-family:var(--font); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
td.num,th.num{text-align:right; white-space:nowrap}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.actions a{font-size:.9rem; padding:7px 11px; border-radius:9px; border:1px solid var(--line);
  text-decoration:none; background:transparent; color:var(--ink); font-weight:600}
.actions a:hover{border-color:var(--ink-3); background:var(--surface-2); color:var(--ink)}
.actions a.primary{background:var(--red); border-color:var(--red); color:var(--white)}
.actions a.primary:hover{background:var(--red-strong); border-color:var(--red-strong)}

.mockup{border:1px dashed var(--red-line); border-radius:var(--radius); padding:16px;
  background:linear-gradient(180deg,var(--red-tint),transparent 140px),var(--surface)}
.mockup-tag{display:inline-block; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; background:var(--red); color:var(--white); padding:3px 9px;
  border-radius:999px; font-weight:700}
.keybox{background:var(--code-bg); border:1px solid var(--line); border-radius:10px;
  padding:12px; color:var(--on-dark); font-family:ui-monospace,SFMono-Regular,Menlo,
  Consolas,monospace; font-size:.86rem; overflow-wrap:anywhere}
.steps{list-style:none; padding:0; margin:0 0 12px; counter-reset:step}
.steps li{position:relative; padding-left:34px; margin:.5em 0; color:var(--ink-2)}
.steps li:before{counter-increment:step; content:counter(step); position:absolute; left:0;
  top:.1em; width:22px; height:22px; border-radius:50%; background:var(--red-tint);
  color:var(--red); font-size:.78rem; font-weight:700; text-align:center; line-height:22px}
@media (prefers-color-scheme:dark){.steps li:before{color:var(--red-on-dark)}}

.footer{margin-top:26px; padding:22px 0 30px; background:var(--dark);
  border-top:1px solid var(--dark-line); color:var(--on-dark)}
.footer p{margin:.25em 0}
.footer-strong{font-family:var(--font); font-weight:700; color:var(--white)}
.footer a{color:var(--red-on-dark)}
.footer-towns{color:var(--on-dark-3); font-size:.86rem}
.footer-link{color:var(--on-dark-2); text-decoration:underline}
.footer-link:hover{color:var(--white)}
.footer-small{color:var(--on-dark-3); font-size:.82rem}

/* read-only while an admin views as a customer */
.view-as{display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; margin:0 0 16px; padding:12px 14px;
  border:1px solid var(--red-line); border-left:5px solid var(--red);
  border-radius:10px; background:var(--red-tint); color:var(--ink)}
.view-as p{margin:0}
.view-as-exit{margin:0}
.view-as-exit .btn{margin:0}
.readonly-lock{border:0; padding:0; margin:0; min-width:0}
.readonly-lock :is(input,button,select,textarea){opacity:.6}

.crumbs{font-size:.86rem; color:var(--ink-3); margin:2px 0 6px}
.crumbs a{color:var(--red)}
.progress{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:10px 0 16px}
.progress-step{flex:1 1 120px; min-width:0; padding:9px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--ink-2); font-size:.82rem;
  line-height:1.25}
.progress-step span{display:block}
.progress-done{background:var(--surface-2); border-color:var(--line); color:var(--ink-2)}
.progress-current{border-color:var(--red); background:var(--red); color:var(--white);
  font-weight:600}
.progress-rejected{background:var(--red-tint); border-color:var(--red-line);
  color:var(--red); font-weight:600}
.timeline{list-style:none; padding:0; margin:4px 0 0}
.timeline li{position:relative; padding:0 0 16px 16px; border-left:2px solid var(--line)}
.timeline li:last-child{padding-bottom:2px}
.timeline li:before{content:""; position:absolute; left:-5px; top:6px; width:8px; height:8px;
  border-radius:50%; background:var(--red)}
.timeline .when{display:block; font-size:.78rem; color:var(--ink-3)}
.timeline .note{display:block; font-size:.9rem; color:var(--ink-2); margin-top:2px}
.facts{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:5px 14px;
  margin:0 0 8px}
.facts dt{color:var(--ink-3); font-size:.86rem}
.facts dd{margin:0; overflow-wrap:anywhere}
.code{background:var(--code-bg); border:1px solid var(--line); border-radius:10px;
  padding:12px; overflow-x:auto; font-size:.76rem; line-height:1.45; max-height:420px;
  color:var(--on-dark)}
.check{flex-direction:row; align-items:flex-start; gap:9px}
.check input{width:20px; height:20px; margin-top:2px; flex:0 0 auto}
.form + .form{margin-top:8px}

/* call features (/call-forwarding, mounted module) */
.cf section{margin:0 0 14px}
.cf section > h2{margin-top:0}
.cf-exts{margin:0 0 16px}
.cf label{display:block; font-family:var(--font); font-size:.9rem; font-weight:600;
  color:var(--ink-2); margin:10px 0 4px}
.cf input[type=text],.cf input[type=number],.cf select{font:inherit; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--input-bg);
  color:var(--ink); width:100%; max-width:320px; min-width:0; min-height:44px}
.cf select{max-width:360px}
.cf input[type=text]:focus,.cf input[type=number]:focus,.cf select:focus{
  outline:3px solid var(--focus); outline-offset:1px; border-color:var(--red)}
.cf input[type=checkbox]{width:18px; height:18px; margin:0 7px 0 0; vertical-align:-3px;
  accent-color:var(--red)}
.cf .row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:8px 0}
.cf .row > div{flex:1 1 190px; min-width:0}
.cf .row .button{margin-top:0}
.cf .muted{color:var(--ink-3); font-size:.86rem}
.cf code{background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:1px 5px; color:var(--ink)}

@media (min-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:28px}
  h1{font-size:1.95rem}
}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:420px){
  /* 390px phones: single column, comfortable tap targets, no sideways scroll */
  .wrap{padding:0 14px}
  .masthead-inner{padding:12px 14px; gap:8px}
  .nav{gap:2px 4px; width:100%}
  .nav-link,.link-button{padding:8px 9px; font-size:.88rem}
  .card{padding:15px}
  h1{font-size:1.42rem}
  .stat{font-size:1.75rem}
  .button,.btn{width:100%; padding:13px 16px}
  .form.inline{flex-direction:column; align-items:stretch}
  .form.inline .btn{width:100%}
  .actions a{flex:1 1 auto; text-align:center; padding:9px 8px}
  th,td{padding:9px 6px; font-size:.9rem}
  .keybox{font-size:.78rem}
  .brand-tag{display:none}
  .progress-step{flex:1 1 100%}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}
@media print{
  .masthead,.nav,.footer,.actions{display:none}
  body{background:var(--bg); color:var(--ink)}
}