/* Flagman Telecom C2C Connector portal. Apple-style design tokens, see design-system/connector/MASTER.md */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bg:#F5F5F7; --surface:#FFFFFF; --surface-2:#FAFAFA; --sidebar:rgba(246,246,248,.82);
  --label:#1D1D1F; --label-2:#6E6E73; --label-3:#98989D; --separator:rgba(60,60,67,.12); --separator-strong:rgba(60,60,67,.2);
  --blue:#0071E3; --blue-hover:#0077ED; --blue-press:#006EDB; --blue-tint:rgba(0,113,227,.10);
  --green:#34C759; --green-tint:rgba(52,199,89,.14); --red:#FF3B30; --red-tint:rgba(255,59,48,.12); --orange:#FF9F0A;
  --radius-sm:8px; --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.04); --shadow:0 2px 8px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --ring:0 0 0 4px rgba(0,113,227,.22);
  --sidebar-w:232px; --ease:cubic-bezier(.2,.8,.2,1); --t:160ms;
}
[x-cloak]{display:none!important}
*{box-sizing:border-box}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font:400 1rem/1.47 var(--font);color:var(--label);background:var(--bg);letter-spacing:-0.005em}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
a.danger{color:var(--red)}
h1{font-size:1.7rem;font-weight:700;letter-spacing:-0.022em;line-height:1.15;margin:0 0 .5rem}
h2{font-size:1.15rem;font-weight:600;letter-spacing:-0.014em;margin:2rem 0 .6rem}
h2:first-child{margin-top:0}
.lead{color:var(--label-2);margin:-.2rem 0 .9rem;max-width:62ch;font-size:.93rem}
.muted{color:var(--label-2);font-size:.87rem}
.err{color:var(--red);margin:.5rem 0;font-size:.93rem}
.flash{color:var(--green);margin:.5rem 0;font-size:.93rem;font-weight:500}
code{display:block;background:var(--surface);box-shadow:var(--shadow-sm);padding:.6rem .8rem;border-radius:var(--radius-sm);font:.84rem/1.55 var(--mono);word-break:break-all;margin:.5rem 0;color:var(--label)}
code[style*="inline"]{display:inline;padding:1px 7px;margin:0}
pre.snippet{background:var(--surface);box-shadow:var(--shadow-sm);padding:.6rem .8rem;border-radius:var(--radius-sm);font:.8rem/1.6 var(--mono);color:var(--label);margin:.5rem 0;white-space:pre;overflow-x:auto;max-height:260px}
.small{font-size:.78rem}
td input.phoneip{width:134px;display:block}

/* controls */
label{display:block;color:var(--label-2);font-size:.85rem;font-weight:500;margin:.8rem 0 0;letter-spacing:0}
input:not([type=checkbox]),select{display:block;width:100%;height:38px;margin-top:.3rem;font:inherit;font-size:.97rem;color:var(--label);padding:0 .8rem;border:1px solid var(--separator-strong);border-radius:var(--radius-sm);background:var(--surface);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
input:hover,select:hover{border-color:rgba(60,60,67,.32)}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .7rem center}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--separator-strong);border-radius:5px;background:var(--surface);margin:0;cursor:pointer;display:inline-grid;place-content:center;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
input[type=checkbox]::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform 120ms var(--ease);background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:focus-visible{box-shadow:var(--ring);outline:none}
label.check{display:flex;align-items:center;gap:.55rem;color:var(--label);font-weight:400;font-size:.95rem;cursor:pointer;min-height:38px;margin-top:.4rem}
button{font:inherit;font-weight:500;font-size:.95rem;height:38px;padding:0 1.05rem;border:0;background:var(--blue);color:#fff;border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-0.005em;transition:background var(--t) var(--ease),transform 100ms ease-out}
button:hover{background:var(--blue-hover)}
button:active{background:var(--blue-press);transform:scale(.97)}
button.ghost{background:var(--surface);color:var(--label);box-shadow:var(--shadow-sm)}
button.ghost:hover{background:var(--surface-2)}
button.ghost:active{background:var(--surface-2)}
button.secondary{background:var(--surface);color:var(--label);box-shadow:var(--shadow-sm)}
button.secondary:hover{background:var(--surface-2)}
button.danger{background:var(--surface);color:var(--red);box-shadow:var(--shadow-sm)}
button:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring)}
form.inline{display:flex;align-items:flex-end;gap:.7rem}
form.inline.wrap{flex-wrap:wrap}
form.inline label{margin:0}
form.stack{max-width:560px}
form.stack button{margin-top:1rem}
.row{display:flex;gap:.7rem;align-items:center;margin-top:1rem}

/* login */
.login{max-width:380px;margin:14vh auto;padding:2.2rem 2rem;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.login h1{display:flex;align-items:center;gap:.6rem;font-size:1.45rem}
.login h1 svg{width:26px;height:26px;color:var(--blue)}
.login button{width:100%;margin-top:1.2rem;height:42px;font-size:1rem}

/* shell */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
aside{background:var(--sidebar);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-right:1px solid var(--separator);padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.15rem;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.02rem;letter-spacing:-0.012em;padding:.35rem .6rem 1.1rem}
.brand svg{width:22px;height:22px;color:var(--blue)}
aside nav{display:flex;flex-direction:column;gap:2px}
aside nav a{display:flex;align-items:center;gap:.6rem;height:34px;padding:0 .65rem;border-radius:var(--radius-sm);color:var(--label);font-size:.93rem;font-weight:500;transition:background var(--t) var(--ease)}
aside nav a svg{width:17px;height:17px;color:var(--label-2);flex:none;stroke-width:2}
aside nav a:hover{background:rgba(0,0,0,.05);text-decoration:none}
aside nav a:active{background:rgba(0,0,0,.08)}
aside nav a.on{background:var(--blue);color:#fff}
aside nav a.on svg{color:#fff}
.navlabel{font-size:.7rem;font-weight:600;color:var(--label-3);text-transform:uppercase;letter-spacing:.06em;padding:1rem .65rem .35rem}
.who{margin-top:auto;padding:.8rem .6rem 0;border-top:1px solid var(--separator);font-size:.85rem;color:var(--label-2);display:flex;flex-direction:column;gap:2px}
.who strong{color:var(--label);font-weight:600}
main{padding:2rem 2.4rem 4rem;max-width:1120px;width:100%;min-width:0}

/* tables */
.tablewrap{overflow-x:auto;margin:.5rem 0 .2rem;padding:2px}
.tablewrap table{min-width:760px;margin:0}
.nowrap{white-space:nowrap}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);font-size:.92rem;overflow:hidden}
th,td{text-align:left;padding:0 .9rem;height:44px;border-bottom:1px solid var(--separator);vertical-align:middle}
th{color:var(--label-2);font-weight:500;font-size:.8rem;letter-spacing:0;background:var(--surface-2)}
tbody:last-child tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#FBFBFD}
table.rows td{padding:.72rem .9rem;height:auto;vertical-align:middle}
table.rows td.num{font-variant-numeric:tabular-nums}
table.rows td.strong,table.rows .strong{font-weight:600}
table.rows .sub{display:block;font-size:.78rem;color:var(--label-2);margin-top:1px}
table.rows tr.open > td{background:var(--surface-2)}
td.editor{background:var(--surface-2);padding:.9rem 1rem;height:auto}
tbody tr:hover td.editor{background:var(--surface-2)}
.actions{white-space:nowrap;text-align:right}.actions a{margin-right:.9rem;font-size:.87rem}
/* section heading with its primary action on the right */
.sechead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:1.8rem}
.sechead > div{min-width:0}
.sechead h2{margin-top:0}
.sechead .lead{margin-bottom:0}
.sechead > button{flex:none}
/* row editor and dialogs share one two column form */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.editor form{max-width:660px}
.checks{display:flex;flex-wrap:wrap;gap:0 1.6rem;margin-top:.5rem}
.checks .check{margin-top:.3rem}
details{margin-top:.9rem}
details summary{font-size:.87rem;color:var(--blue);cursor:pointer;width:fit-content}
details summary:hover{text-decoration:underline}
.dialog{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.dialog .scrim{position:absolute;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(3px)}
.dialog .panel{position:relative;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 24px 70px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);padding:1.2rem 1.4rem 1.4rem;width:min(600px,100%);max-height:88vh;overflow:auto}
.dialog h2{margin-top:0}
.dialog footer{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem}
.editfoot{display:flex;align-items:center;gap:1.1rem;margin-top:1.1rem}
.editfoot .spacer{flex:1}
.editfoot a{font-size:.87rem}
table.kv{width:auto;min-width:360px}table.kv th{width:150px;font-size:.87rem}

/* status */
button.pill{border:0;font:inherit;font-weight:500;cursor:pointer;background:rgba(60,60,67,.08);color:var(--label-2);box-shadow:none}
button.pill:hover{background:rgba(60,60,67,.14)}
button.pill.on{background:var(--green-tint);color:#1E8E3E}
button.pill.on:hover{background:rgba(52,199,89,.22)}
.conn{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.5rem 0}
.conn + .conn{border-top:1px solid var(--separator)}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;height:24px;padding:0 .65rem;border-radius:var(--radius-pill);font-size:.8rem;font-weight:500;background:rgba(60,60,67,.08);color:var(--label-2)}
.pill.on{background:var(--green-tint);color:#1E8E3E}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--label-3)}
.dot.on{background:var(--green)}

/* cards */
.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:.9rem 1.1rem;margin:.75rem 0}
.cardhead{display:flex;align-items:center;gap:.8rem;min-height:28px}
.cardhead .check{margin:0;min-height:0}
.spacer{flex:1}
.cardhead a{font-size:.87rem}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}
.card.type{margin:0}.card.type p{margin:.25rem 0 .8rem}
.card.type button{width:100%}

@media (max-width:820px){.shell{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}aside nav{flex-direction:row;flex-wrap:wrap}.who{margin:0 0 0 auto;border:0;padding:0}main{padding:1.2rem}table{display:block;overflow-x:auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}button:active{transform:none}}
@media (prefers-reduced-transparency:reduce){aside{background:#F6F6F8;backdrop-filter:none}}

/* footer: the Powered by mark and what is running (release and commit), as in timeclock */
.site-footer{margin-top:3.5rem;padding-top:1.3rem;border-top:1px solid var(--separator);text-align:center;color:var(--label-2);font-size:.8rem}
.powered-mark{height:26px;aspect-ratio:1169/261;margin:0 auto 8px;background:url("/powered-by-flagman.png") center/contain no-repeat;filter:brightness(0);opacity:.55}
.login .powered-mark{margin-top:1.6rem}
.mono{font-family:var(--mono);font-size:.95em}
button.linkish{background:none;color:var(--blue);height:auto;padding:0;font:inherit;box-shadow:none;border-radius:0}
button.linkish:hover{background:none;text-decoration:underline}
button.linkish:active{background:none;transform:none}
/* the changelog reads as a document, not a form */
.dialog .panel.wide{width:min(760px,100%)}
.md{max-height:60vh;overflow:auto;margin-top:.6rem;padding-right:.4rem}
.md h3{font-size:1.02rem;margin:1.2rem 0 .4rem}
.md h3:first-child{margin-top:.2rem}
.md h4{font-size:.93rem;margin:1rem 0 .25rem;color:var(--label)}
.md p{margin:.3rem 0 .6rem;color:var(--label-2);font-size:.92rem;line-height:1.55;max-width:70ch}
.md ul{margin:.3rem 0 .7rem 1.2rem;padding:0;color:var(--label-2);font-size:.92rem}
.md code{display:inline;padding:1px 6px;margin:0;box-shadow:none;background:rgba(60,60,67,.07)}