/* =========================================================================
wa2text — app styles
Ivory + navy + deep-ink. Newsreader serif + Inter + IBM Plex Mono.
Fonts loaded via in layout.php .
All class names from the previous stylesheet are preserved so the PHP
templates and app.js hooks keep working. Legacy landing-page classes
(.lp-*) have been removed — the landing now lives in landing.css.
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
--ink: #0c1422;
--ink-2: #222b3d;
--ink-soft: #5b6578;
--ink-faint: #8e95a4;
--paper: #f4efe0;
--paper-2: #ebe5d2;
--paper-3: #dfd7bf;
--navy: #16243f;
--navy-2: #1d2e50;
--navy-deep: #0a1220;
--accent: var(--navy);
--accent-soft: rgba(22, 36, 63, .10);
--accent-strong: var(--navy-2);
--border: rgba(12, 20, 34, .15);
--border-strong: rgba(12, 20, 34, .28);
--rule-soft: rgba(12, 20, 34, .07);
/* Muted editorial signals — newspaper palette, not tech-neon */
--ok: #5c7a3c;
--ok-bg: rgba(92, 122, 60, .12);
--warn: #8c6a1f;
--warn-bg: rgba(140, 106, 31, .12);
--err: #8e2e2e;
--err-bg: rgba(142, 46, 46, .10);
--radius: 4px;
--radius-sm: 3px;
--serif: "Newsreader", "Times New Roman", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
html, body {
margin: 0; padding: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Subtle paper grain — matches landing */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none; z-index: 1;
opacity: .18;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3, h4 {
font-family: var(--serif);
font-variation-settings: "opsz" 72;
font-weight: 500;
letter-spacing: -.015em;
margin-top: 0;
color: var(--ink);
}
h1 { font-size: 1.9rem; line-height: 1.15; }
h2 { font-size: 1.35rem; line-height: 1.2; }
h3 { font-size: 1.15rem; line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; }
p { margin: 0 0 .8rem; }
/* ==============================================================
Utilities
============================================================== */
.mb-0 { margin-bottom: 0 !important; }
.accent { color: var(--navy); font-weight: 500; }
.small { font-size: .85rem; color: var(--ink-soft); }
.subtle { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
/* ==============================================================
Shell
============================================================== */
main { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
/* Nav (layout.php) */
.nav {
display: flex; justify-content: space-between; align-items: center;
padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.nav .logo {
font-family: var(--serif);
font-variation-settings: "opsz" 72;
font-weight: 500;
font-size: 1.35rem;
letter-spacing: -.02em;
color: var(--ink);
text-decoration: none;
}
.nav .logo .accent { color: var(--ink); }
.nav .logo .b-sep { color: var(--ink-soft); font-weight: 400; }
.nav nav {
display: flex; gap: 1.5rem; align-items: center;
font-size: .92rem; font-weight: 500;
}
.nav nav a, .nav nav .link {
color: var(--ink-soft);
text-decoration: none;
transition: color .12s;
position: relative;
padding: .15rem 0;
}
.nav nav a:hover, .nav nav .link:hover { color: var(--ink); }
.nav nav a.is-active {
color: var(--ink);
}
.nav nav a.is-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -.55rem;
height: 2px;
background: var(--ink);
}
/* Support contact strip — full-bleed navy bar above the nav for signed-in
users. Whole bar is the tel: link so mobile gets a generous tap zone. */
.support-strip {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
padding: .55rem 1.25rem;
background: var(--navy);
color: var(--paper);
font-size: .85rem;
letter-spacing: .01em;
text-decoration: none;
border-bottom: 1px solid var(--navy-deep);
transition: background .15s;
}
.support-strip:hover { background: var(--navy-2); }
.support-strip-glyph {
display: inline-flex; align-items: center;
color: var(--paper-3);
flex: 0 0 auto;
}
.support-strip-text {
font-family: var(--serif);
font-style: italic;
font-size: .95rem;
color: var(--paper-2);
}
.support-strip-num {
font-family: var(--mono);
font-weight: 500;
letter-spacing: .02em;
border-bottom: 1px solid rgba(244, 239, 224, .4);
padding-bottom: 1px;
transition: border-color .15s;
}
.support-strip:hover .support-strip-num { border-color: var(--paper); }
@media (max-width: 640px) {
.support-strip {
padding: .5rem 1rem;
font-size: .8rem;
flex-wrap: wrap;
gap: .4rem .6rem;
text-align: center;
}
.support-strip-text { font-size: .85rem; }
}
.foot {
text-align: center;
padding: 2.5rem 1rem;
color: var(--ink-soft);
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }
@media (max-width: 600px) {
.nav { padding: 1rem 1.25rem; flex-wrap: wrap; gap: .6rem 1rem; }
.nav nav { gap: 1rem; font-size: .88rem; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 420px) {
.nav { flex-direction: column; align-items: flex-start; }
.nav nav { gap: .9rem; width: 100%; padding-top: .15rem; }
}
/* ==============================================================
Cards / panels
============================================================== */
.card {
max-width: 720px; margin: 1rem auto;
padding: 1.9rem 1.9rem 2.1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
}
.card.narrow { max-width: 420px; }
.card.card-wide { max-width: 860px; }
.page-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.page-head h1 {
font-family: var(--serif);
font-variation-settings: "opsz" 72;
font-weight: 500;
font-size: 1.75rem;
letter-spacing: -.02em;
line-height: 1.1;
margin: 0;
}
.backlink {
display: inline-block;
font-family: var(--mono);
color: var(--ink-soft);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: .4rem;
text-decoration: none;
}
.backlink:hover { color: var(--ink); text-decoration: none; }
.panel {
margin-top: 1.5rem;
padding: 1.4rem 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper-2);
}
.panel:first-child { margin-top: 0; }
.panel h2 {
font-family: var(--serif);
font-size: 1.4rem; margin: 0 0 .4rem;
letter-spacing: -.015em;
}
.panel h3 {
margin: 0 0 .5rem;
font-size: 1.05rem;
display: flex; align-items: center; gap: .5rem;
}
.panel h4 { margin: 0 0 .5rem; font-size: .95rem; }
/* ==============================================================
Sections (settings rhythm)
============================================================== */
.section { margin-top: 2rem; }
.section:first-of-type { margin-top: 1rem; }
.section-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0 .15rem 1rem;
border-bottom: 1px solid var(--border);
margin-bottom: .5rem;
}
.section-head h2 {
font-family: var(--mono);
font-size: .72rem; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
}
.section-body { display: flex; flex-direction: column; }
/* ==============================================================
Rows (iOS-style settings)
============================================================== */
.row-static, .row-field, .row-toggle, .row-nav {
display: flex; align-items: center; gap: 1rem;
padding: .95rem .2rem; min-height: 54px;
}
.row-static { justify-content: space-between; }
.row-label {
color: var(--ink);
font-size: .98rem;
font-weight: 500;
}
.row-value {
color: var(--ink-soft);
font-size: .92rem;
font-family: var(--mono);
}
.row-hint {
color: var(--ink-soft);
font-size: .84rem;
margin: .2rem 0 0;
line-height: 1.5;
}
.row-label-group {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.row-divider { height: 1px; background: var(--border); margin: 0 -.2rem; }
.row-field .row-input { display: flex; gap: .5rem; align-items: center; }
.row-field input[type=tel],
.row-field input[type=text],
.row-field input[type=email] {
padding: .55rem .75rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
font-family: var(--mono);
font-size: .92rem;
width: 220px; max-width: 55vw;
}
.row-field input:focus {
border-color: var(--navy);
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}
/* Timezone picker — matches the input styling in .row-field rows. */
.tz-select {
padding: .55rem 2rem .55rem .75rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: .92rem;
max-width: 55vw;
cursor: pointer;
}
.tz-select:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.tz-preview {
display: inline-block;
margin-top: .15rem;
font-family: var(--mono);
font-size: .82rem;
color: var(--ink-soft);
}
/* Navigation row (clickable link rows) */
.row-nav {
cursor: pointer; color: inherit;
text-decoration: none;
margin: 0 -.2rem;
padding-left: .2rem; padding-right: .2rem;
border-radius: var(--radius-sm);
transition: background .12s;
}
.row-nav:hover { background: rgba(12, 20, 34, .04); text-decoration: none; }
.row-nav .chev {
color: var(--ink-soft);
font-size: 1.4rem; line-height: 1;
margin-left: .5rem;
font-family: var(--serif);
}
.row-nav:hover .chev { color: var(--ink); }
.row-nav-cta {
background: var(--paper-3);
border-left: 3px solid var(--navy);
padding-left: calc(.2rem + 3px);
}
.row-nav-cta:hover { background: var(--paper-3); }
.row-actions {
display: flex; gap: .6rem; align-items: center;
flex-wrap: wrap; padding: .85rem 0 0;
}
/* ==============================================================
Toggle switch
============================================================== */
.switch, .switch-readonly {
position: relative; display: inline-block;
width: 46px; height: 26px;
background: var(--paper-3);
border-radius: 999px;
border: 1px solid var(--border);
padding: 0; cursor: pointer;
transition: background .2s, border-color .2s;
flex-shrink: 0;
}
.switch .switch-knob, .switch-readonly .switch-knob {
position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--paper);
box-shadow: 0 1px 2px rgba(12, 20, 34, .25);
transition: transform .2s;
}
.switch-on,
.switch.switch-on,
.switch-readonly.switch-on {
background: var(--navy);
border-color: var(--navy);
}
.switch-on .switch-knob,
.switch.switch-on .switch-knob,
.switch-readonly.switch-on .switch-knob {
transform: translateX(20px);
background: var(--paper);
}
.switch-readonly { pointer-events: none; }
/* ==============================================================
Buttons
============================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
padding: .6rem 1.1rem;
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
font-family: var(--sans);
font-weight: 600;
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: background .12s, color .12s, transform .05s, box-shadow .1s;
white-space: nowrap;
text-decoration: none;
}
.btn:hover {
background: var(--ink);
color: var(--paper);
text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
opacity: .4; cursor: not-allowed;
background: var(--paper); color: var(--ink);
}
.btn-primary {
background: var(--navy);
color: var(--paper);
border-color: var(--navy);
box-shadow: 0 2px 0 0 var(--navy-deep);
}
.btn-primary:hover {
background: var(--navy-2);
color: var(--paper);
border-color: var(--navy-2);
}
.btn-primary:active {
transform: translateY(2px);
box-shadow: 0 0 0 0 var(--navy-deep);
}
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--ink-soft);
}
.btn-ghost:hover {
color: var(--ink);
background: rgba(12, 20, 34, .05);
border-color: transparent;
}
.btn-google {
background: #fff;
color: #1f1f1f;
border-color: #dadce0;
letter-spacing: .04em;
text-transform: none;
font-size: .92rem;
padding: .7rem 1.25rem;
}
.btn-google:hover {
background: #f8f9fa;
color: #1f1f1f;
border-color: #dadce0;
}
.btn-small { padding: .42rem .8rem; font-size: .72rem; }
.link {
background: transparent; border: 0;
color: var(--ink-soft);
cursor: pointer; font: inherit;
padding: 0;
font-weight: 500;
text-decoration: none;
transition: color .12s;
}
.link:hover { color: var(--ink); }
/* ==============================================================
Flash + banners
============================================================== */
.flash {
padding: .75rem .95rem;
background: var(--paper-3);
border: 1px solid var(--border);
border-left: 3px solid var(--navy);
border-radius: var(--radius-sm);
margin: 0 0 1rem;
font-size: .92rem;
}
.banner {
padding: .9rem 1.1rem;
border-radius: var(--radius-sm);
margin: 0 0 1.25rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
border: 1px solid var(--border);
}
/* The default `display: flex` above overrides the `hidden` HTML attribute,
so [hidden] needs an explicit reset to actually hide. The settings page
pre-renders the paused-banner with `hidden` so the AJAX master switch
can show it without a reload. */
.banner[hidden] { display: none; }
.banner-info {
background: var(--paper-3);
border-left: 3px solid var(--navy);
}
.banner-warn {
background: var(--warn-bg);
border-color: rgba(140, 106, 31, .35);
border-left: 3px solid var(--warn);
}
.banner-danger {
background: var(--err-bg);
border-color: rgba(142, 46, 46, .35);
border-left: 3px solid var(--err);
}
/* Sync-health modal (sync_banner partial) */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .45);
display: flex; align-items: center; justify-content: center;
z-index: 200;
padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 6px 6px 0 0 var(--ink);
max-width: 440px; width: 100%;
padding: 1.5rem 1.6rem;
}
.modal-card h3 { margin: 0 0 .75rem; font-size: 1.2rem; }
.modal-card ol { padding-left: 1.2rem; line-height: 1.6; }
.modal-card .form-actions { margin-top: 1rem; justify-content: flex-end; }
/* Global billing banner (layout.php) — shown on EVERY authed page when the
user is past_due / cancelled / suspended. Deliberately loud so it can't
be missed. */
.billing-banner {
max-width: 760px;
margin: 1rem auto 0;
padding: .95rem 1.1rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
background: var(--err-bg);
color: var(--err);
border: 1px solid rgba(142, 46, 46, .35);
border-left: 3px solid var(--err);
border-radius: var(--radius-sm);
font-size: .94rem;
line-height: 1.5;
}
.billing-banner > div { flex: 1; min-width: 220px; }
.billing-banner .btn { flex-shrink: 0; }
/* ==============================================================
Status indicators
============================================================== */
.dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-soft);
vertical-align: middle;
}
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.dot-off { background: var(--ink-soft); }
.pill {
display: inline-flex; align-items: center;
padding: .22rem .65rem;
border-radius: 2px;
font-family: var(--mono);
font-size: .68rem; font-weight: 600;
letter-spacing: .15em; text-transform: uppercase;
background: var(--paper-3);
color: var(--ink-soft);
border: 1px solid var(--border);
}
.pill-trial { background: var(--paper-3); color: var(--ink); border-color: var(--border-strong); }
.pill-active { background: var(--ok-bg); color: var(--ok); border-color: rgba(92, 122, 60, .4); }
.pill-past_due { background: var(--warn-bg); color: var(--warn); border-color: rgba(140, 106, 31, .4); }
.pill-suspended,
.pill-cancelled { background: var(--err-bg); color: var(--err); border-color: rgba(142, 46, 46, .4); }
.badge {
display: inline-block;
padding: .1rem .5rem;
border-radius: 2px;
font-family: var(--mono);
font-size: .64rem; font-weight: 600;
letter-spacing: .15em; text-transform: uppercase;
margin-left: .4rem;
vertical-align: middle;
}
.badge-warn {
background: var(--warn-bg);
color: var(--warn);
border: 1px solid rgba(140, 106, 31, .4);
}
/* ==============================================================
Plan cards (plan_picker partial)
============================================================== */
.plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; margin-top: 1rem;
}
.plan {
position: relative;
padding: 1.5rem 1.25rem 1.35rem;
border: 1px solid var(--ink);
border-radius: var(--radius-sm);
background: var(--paper);
text-align: center;
display: flex; flex-direction: column;
transition: transform .15s, box-shadow .15s;
}
.plan:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 0 0 var(--ink);
}
.plan.featured {
background: var(--paper-2);
border-width: 2px;
padding: calc(1.5rem - 1px) calc(1.25rem - 1px) calc(1.35rem - 1px);
}
.plan.current { border-color: var(--ok); }
.plan .tag {
position: absolute; top: -10px; left: 50%;
transform: translateX(-50%);
background: var(--navy);
color: var(--paper);
font-family: var(--mono);
font-size: .64rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
padding: .2rem .65rem;
white-space: nowrap;
}
.plan .tag-current { background: var(--ok); }
.plan h4 {
font-family: var(--mono);
margin: 0 0 .6rem;
font-size: .72rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.plan .price {
font-family: var(--serif);
font-variation-settings: "opsz" 72;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: -.025em;
line-height: 1;
margin: .15rem 0 1rem;
color: var(--ink);
}
.plan .price span {
font-family: var(--mono);
font-size: .68rem;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
margin-left: .3rem;
vertical-align: middle;
}
.plan ul {
text-align: left;
list-style: none;
padding: 0;
margin: .25rem 0 1.1rem;
color: var(--ink-2);
font-size: .9rem;
flex: 1;
}
.plan ul li {
padding: .35rem 0 .35rem 1.25rem;
position: relative;
border-bottom: 1px solid var(--rule-soft);
line-height: 1.4;
}
.plan ul li:last-child { border-bottom: 0; }
.plan ul li::before {
content: "✓";
position: absolute; left: 0; top: .4rem;
color: var(--ink);
font-weight: 600;
font-size: .85rem;
}
/* CTA inside plan cards: fill the card width and allow the label to
wrap to two lines when it's long (e.g. "Switch to Standard & start
paying"). Overrides the nowrap on the base .btn. */
.plan form { width: 100%; }
.plan .btn {
width: 100%;
white-space: normal;
line-height: 1.25;
font-size: .72rem;
padding: .55rem .75rem;
letter-spacing: .06em;
}
/* Inline plan pickers (trial banner / settings) */
.plan-change, .inline-picker { display: inline-block; }
.plan-change summary,
.inline-picker summary {
list-style: none; cursor: pointer;
display: inline-flex;
}
.plan-change summary::-webkit-details-marker,
.inline-picker summary::-webkit-details-marker { display: none; }
.plan-change[open] summary { border-color: var(--navy); }
.picker-body { margin-top: 1rem; }
.picker-body h4 { margin: 0 0 .5rem; }
/* ==============================================================
Plan summary + connection hero (settings)
============================================================== */
.plan-summary {
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.25rem;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 1.25rem;
}
.plan-summary h3 {
font-family: var(--serif);
font-size: 1.5rem;
margin: 0;
letter-spacing: -.02em;
font-weight: 500;
}
.conn-hero {
display: flex; align-items: center; gap: 1.25rem;
padding: 1.1rem 1.25rem;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.conn-indicator {
display: inline-flex; align-items: center; gap: .55rem;
padding: .45rem .9rem;
border-radius: 999px;
font-family: var(--mono);
font-size: .7rem; font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
background: var(--paper-3);
border: 1px solid var(--border);
color: var(--ink-soft);
}
.conn-indicator .dot { width: 9px; height: 9px; }
.conn-indicator.conn-ok { color: var(--ok); border-color: rgba(92, 122, 60, .4); background: var(--ok-bg); }
.conn-indicator.conn-ok .dot { background: var(--ok); }
.conn-indicator.conn-warn { color: var(--warn); border-color: rgba(140, 106, 31, .4); background: var(--warn-bg); }
.conn-indicator.conn-warn .dot { background: var(--warn); }
/* ==============================================================
Usage + progress bar
============================================================== */
.usage-block { padding: .25rem 0 .5rem; }
.usage-line, .usage-row {
display: flex; justify-content: space-between;
font-family: var(--mono);
font-size: .82rem;
letter-spacing: .04em;
margin-top: .85rem;
color: var(--ink);
}
.usage-line span:last-child, .usage-row span:last-child {
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.bar {
height: 6px;
background: var(--paper-3);
border-radius: 999px;
margin: .45rem 0 .3rem;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: var(--navy);
transition: width .3s;
}
/* ==============================================================
KV grid (dashboard)
============================================================== */
.kv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .6rem;
margin-top: .75rem;
}
.kv {
display: flex; flex-direction: column; gap: .2rem;
padding: .6rem .85rem;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: .92rem;
}
.kv span:first-child {
color: var(--ink-soft);
font-family: var(--mono);
font-size: .64rem;
text-transform: uppercase;
letter-spacing: .15em;
font-weight: 500;
}
.kv code {
background: none; padding: 0;
color: var(--ink);
font-family: var(--mono);
font-size: .92rem;
font-weight: 500;
}
/* ==============================================================
Stacked forms (dashboard setup)
============================================================== */
.stacked-form {
display: flex; flex-direction: column;
gap: 1rem;
margin-top: .75rem;
}
.stacked-form label {
display: flex; flex-direction: column; gap: .35rem;
}
.stacked-form label > span:first-child {
font-family: var(--mono);
font-size: .7rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.stacked-form input[type=tel],
.stacked-form input[type=text],
.stacked-form input[type=email] {
padding: .75rem .9rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font-family: var(--mono);
font-size: .98rem;
}
.stacked-form input:focus {
border-color: var(--navy);
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}
.stacked-form small {
color: var(--ink-soft);
font-size: .84rem;
}
.stacked-form code {
font-family: var(--mono);
background: var(--paper-3);
padding: .05rem .35rem;
border-radius: 2px;
}
.form-actions {
display: flex; gap: .6rem; align-items: center;
flex-wrap: wrap;
margin-top: 1rem;
}
/* ==============================================================
QR + pair stage
============================================================== */
.qr-box {
display: flex; flex-direction: column;
align-items: center;
padding: 1.25rem;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
border-radius: var(--radius);
min-height: 272px;
min-width: 272px;
justify-content: center;
box-shadow: 4px 4px 0 0 var(--ink);
}
.qr-box img { max-width: 248px; display: block; }
.qr-skeleton {
width: 248px; height: 248px;
border-radius: var(--radius-sm);
background: linear-gradient(120deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
background-size: 200% 100%;
animation: qr-shimmer 1.6s ease-in-out infinite;
}
@keyframes qr-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: -200% 50%; }
}
.qr-done {
font-size: 4rem;
color: var(--ok);
line-height: 1;
font-weight: 700;
}
.pair-stage {
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2.25rem 2rem;
}
.pair-head {
margin: 0 0 1.85rem;
text-align: center;
}
.pair-head h2 {
font-family: var(--serif);
font-size: 1.75rem;
margin: 0 0 .5rem;
letter-spacing: -.02em;
font-weight: 500;
}
.pair-head .subtle { margin: 0; font-size: .95rem; }
.pair-head code {
font-family: var(--mono);
background: var(--paper-3);
padding: .15rem .5rem;
border-radius: 2px;
font-size: .9em;
border: 1px solid var(--border);
}
.pair-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 2.5rem;
align-items: start;
}
@media (max-width: 720px) {
.pair-grid { grid-template-columns: 1fr; gap: 1.75rem; }
.pair-qr-col { order: -1; }
}
.pair-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 1.25rem;
}
.pair-steps li {
display: flex; gap: 1rem;
align-items: flex-start;
}
.step-n {
flex: 0 0 28px; height: 28px;
border-radius: 50%;
background: var(--paper);
color: var(--ink);
border: 1.5px solid var(--ink);
font-family: var(--mono);
font-weight: 600;
font-size: .82rem;
display: inline-flex; align-items: center; justify-content: center;
margin-top: .1rem;
}
.pair-steps h4 {
font-family: var(--serif);
font-size: 1.05rem;
margin: 0 0 .25rem;
font-weight: 500;
letter-spacing: -.01em;
}
.pair-steps p {
margin: 0;
color: var(--ink-soft);
font-size: .92rem;
line-height: 1.5;
}
.pair-qr-col {
display: flex; flex-direction: column;
align-items: center;
gap: 1rem;
}
.pair-status {
display: inline-flex; align-items: center; gap: .6rem;
padding: .55rem 1.1rem;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 999px;
font-family: var(--mono);
font-size: .78rem;
font-weight: 500;
letter-spacing: .05em;
color: var(--ink-soft);
transition: all .2s;
}
.pair-status .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ink-soft);
}
.pair-status.is-waiting { color: var(--navy); border-color: var(--navy); background: var(--paper); }
.pair-status.is-waiting .dot { background: var(--navy); }
.pair-status.is-working { color: var(--warn); border-color: rgba(140, 106, 31, .4); background: var(--warn-bg); }
.pair-status.is-working .dot { background: var(--warn); }
.pair-status.is-ok { color: var(--ok); border-color: rgba(92, 122, 60, .4); background: var(--ok-bg); }
.pair-status.is-ok .dot { background: var(--ok); }
.pair-status.is-err { color: var(--err); border-color: rgba(142, 46, 46, .4); background: var(--err-bg); }
.pair-status.is-err .dot { background: var(--err); }
.dot-pulse { position: relative; }
.dot-pulse::after {
content: ""; position: absolute; inset: -4px;
border-radius: 50%; background: inherit;
opacity: .5;
animation: dot-pulse 1.4s ease-out infinite;
pointer-events: none;
}
@keyframes dot-pulse {
0% { transform: scale(.6); opacity: .6; }
100% { transform: scale(2); opacity: 0; }
}
.pair-actions {
display: flex; gap: .5rem;
flex-wrap: wrap; justify-content: center;
margin-top: .4rem;
}
.pair-actions form { margin: 0; }
/* ==============================================================
Tabs (contacts, settings)
============================================================== */
.tabs {
display: flex; gap: 0;
row-gap: .25rem; /* breathing room if tabs ever wrap */
border-bottom: 1px solid var(--border);
margin: 1.1rem 0 0;
flex-wrap: wrap;
}
.tab {
padding: .8rem .95rem; /* tightened so 5 tabs fit a 760px row */
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--ink-soft);
font-family: var(--mono);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: .4rem;
margin-bottom: -1px;
text-decoration: none;
transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
}
.tab-count {
display: inline-block;
padding: .06rem .5rem;
background: var(--paper-3);
border-radius: 999px;
font-size: .64rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--ink-soft);
}
.tab.active .tab-count {
background: var(--ink);
color: var(--paper);
}
.tab-panel { padding-top: 1.25rem; }
.tab-panel[hidden] { display: none; }
/* Tighten tab padding + font-size so 5 tabs fit one row on narrower
viewports (kicks in earlier than the original 600px to catch mid-size
windows where Connection was wrapping to a 2nd row). */
@media (max-width: 720px) {
.tabs { gap: 0; }
.tab {
padding: .65rem .55rem;
font-size: .62rem;
letter-spacing: .08em;
gap: .3rem;
}
.tab-count {
font-size: .58rem;
padding: .04rem .35rem;
letter-spacing: .04em;
}
}
/* Tables in tab panels overflow on phones (5+ columns x ~75px each).
Wrapping in .table-scroll lets the table itself scroll horizontally
without breaking the card boundary. No effect on desktop where the
table fits naturally. */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll .table {
min-width: 100%;
}
/* Sub-tabs — pill-style segmented control. Used inside a tab panel for a
secondary view toggle (e.g. Contacts → Active vs Phonebook) so it reads
visually distinct from the main tab nav above. */
.subtabs {
display: inline-flex;
gap: .15rem;
background: var(--paper-3);
border-radius: 999px;
padding: .25rem;
margin: .9rem 0 0;
}
.subtab {
padding: .4rem .95rem;
border-radius: 999px;
font-family: var(--mono);
font-size: .68rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
background: transparent;
border: 0;
cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: .4rem;
transition: color .12s, background .12s;
}
.subtab:hover { color: var(--ink); text-decoration: none; }
.subtab.active {
background: var(--paper);
color: var(--ink);
box-shadow: 0 1px 2px rgba(12, 20, 34, .07);
}
.subtab-count {
display: inline-block;
padding: .04rem .42rem;
background: rgba(12, 20, 34, .07);
border-radius: 999px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--ink-soft);
}
.subtab.active .subtab-count {
background: var(--ink);
color: var(--paper);
}
/* ==============================================================
Toolbar + search input
============================================================== */
.toolbar {
display: flex; gap: .5rem;
align-items: center;
padding: .5rem 0 .85rem;
flex-wrap: wrap;
}
.search-input {
flex: 1; min-width: 200px;
padding: .65rem .9rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: .95rem;
}
.search-input:focus {
border-color: var(--navy);
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}
.toolbar-hint {
color: var(--ink-soft);
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .08em;
}
.toolbar-hint code {
font-family: var(--mono);
background: var(--paper-3);
padding: 0 .3rem;
border-radius: 2px;
letter-spacing: 0;
}
/* ==============================================================
Lists (groups, contacts)
============================================================== */
.list {
list-style: none;
margin: .3rem 0 0;
padding: 0;
}
.list-item { border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item-btn-form { margin: 0; }
.list-item-btn {
width: 100%;
display: flex; align-items: center; gap: .9rem;
padding: .85rem .3rem;
background: transparent;
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background .1s;
}
.list-item-btn:hover { background: rgba(12, 20, 34, .03); }
/* Compact contact rows — toggle + alias on a single horizontal line so
the user can scan many contacts at once. Long names wrap inside the
title without pushing the controls around (controls have flex-shrink:0). */
.list-item.contact-item {
display: flex;
align-items: center;
gap: .5rem;
padding: .25rem .25rem;
}
.contact-item .list-item-btn-form { flex: 1; min-width: 0; }
.contact-item .list-item-btn {
padding: .35rem .25rem;
gap: .65rem;
}
.contact-item .avatar {
width: 30px; height: 30px;
font-size: .85rem;
}
.contact-item .list-title {
white-space: normal;
overflow: visible;
text-overflow: clip;
word-break: break-word;
line-height: 1.25;
font-size: .92rem;
gap: .35rem;
}
.contact-item .list-title .code-chip {
font-size: .65rem;
padding: .04rem .35rem;
}
.contact-item .list-sub {
font-size: .72rem;
margin-top: .05rem;
}
.contact-item .alias-inline { flex-shrink: 0; }
.contact-item .alias-inline input[type=text] {
width: 78px;
padding: .28rem .45rem;
font-size: .76rem;
}
.contact-item .alias-inline .btn {
padding: .28rem .55rem;
font-size: .72rem;
}
.contact-item .switch-readonly {
/* slightly smaller than default so it doesn't dominate the row */
transform: scale(.85);
transform-origin: center;
}
@media (max-width: 600px) {
.contact-item .alias-inline input[type=text] { width: 60px; }
.contact-item .list-sub { font-size: .68rem; }
}
/* Phonebook filter row: pills on the left, overflow ⋯ on the right.
Pills mirror .subtab styling but are smaller — they're a secondary
nav inside the Phonebook sub-tab. */
.filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin: .9rem 0 .35rem;
flex-wrap: wrap;
}
.filter-pills {
display: flex;
gap: .25rem;
flex-wrap: wrap;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .65rem;
border-radius: 999px;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
transition: background .12s, color .12s;
}
.filter-pill:hover { background: var(--paper-3); color: var(--ink); }
.filter-pill.active {
background: var(--paper-3);
color: var(--ink);
font-weight: 500;
}
.filter-pill-count {
font-family: var(--mono);
font-size: .7rem;
font-variant-numeric: tabular-nums;
padding: .04rem .42rem;
border-radius: 999px;
background: var(--paper);
color: var(--ink-soft);
border: 1px solid var(--border);
}
.filter-pill.active .filter-pill-count {
background: var(--navy);
color: var(--paper);
border-color: var(--navy);
}
/* Overflow ⋯ menu — universal "rare actions on this list" affordance.
Trigger is a 32px square button; popover is a small panel that drops
down right-anchored under the trigger. JS in app.js toggles `open`. */
.overflow-menu { position: relative; flex-shrink: 0; }
.overflow-trigger {
width: 32px; height: 32px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--paper);
color: var(--ink-soft);
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.overflow-trigger:hover {
background: var(--paper-3);
color: var(--ink);
border-color: var(--border-strong);
}
.overflow-popover {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 160px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 4px 14px rgba(12, 20, 34, .08);
padding: .25rem;
z-index: 20;
}
.overflow-popover form { margin: 0; }
.overflow-item {
display: block;
width: 100%;
padding: .45rem .65rem;
background: transparent;
border: 0;
color: var(--ink);
font: inherit;
font-size: .85rem;
text-align: left;
cursor: pointer;
border-radius: 3px;
}
.overflow-item:hover { background: var(--paper-3); }
/* Brief opacity dip while an AJAX list swap is in flight — barely visible
on fast networks, signals "something's happening" on slow ones. */
#contacts-body.is-swapping { opacity: .6; transition: opacity .12s; }
.avatar {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--paper-3);
color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
font-family: var(--serif);
font-weight: 500;
font-size: 1.05rem;
letter-spacing: -.02em;
}
.avatar-accent {
background: var(--navy);
color: var(--paper);
}
.list-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
gap: .15rem;
overflow: hidden;
}
.list-title {
font-weight: 500;
font-size: .98rem;
color: var(--ink);
display: flex; align-items: center; gap: .5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-sub {
color: var(--ink-soft);
font-family: var(--mono);
font-size: .76rem;
letter-spacing: .02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.code-chip {
display: inline-block;
padding: .06rem .45rem;
background: var(--paper-3);
color: var(--ink);
border: 1px solid var(--border);
border-radius: 2px;
font-family: var(--mono);
font-size: .7rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.alias-inline {
display: flex; gap: .4rem;
align-items: center;
flex-shrink: 0;
}
.alias-inline input[type=text] {
padding: .38rem .6rem;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--paper);
color: var(--ink);
font-family: var(--mono);
font-size: .82rem;
width: 110px;
}
.alias-inline input[type=text]:focus {
border-color: var(--navy);
outline: none;
}
/* ==============================================================
Empty state
============================================================== */
.empty-state {
padding: 3rem 1rem;
text-align: center;
background: var(--paper-2);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
margin: 1rem 0;
}
.empty-state h3 {
font-family: var(--serif);
margin: 0 0 .5rem;
font-size: 1.2rem;
font-weight: 500;
}
.empty-state p {
margin: 0;
color: var(--ink-soft);
font-size: .94rem;
max-width: 440px;
margin-inline: auto;
line-height: 1.55;
}
/* ==============================================================
Callout (rules-of-replies highlight)
============================================================== */
.callout {
padding: .95rem 1.1rem;
background: var(--paper-3);
border: 1px solid var(--border);
border-left: 3px solid var(--navy);
border-radius: var(--radius-sm);
margin: .35rem 0 1.25rem;
font-size: .94rem;
line-height: 1.55;
}
.callout p { margin: 0 0 .5rem; }
.callout p:last-child { margin-bottom: 0; }
/* ==============================================================
Example list (cheat sheet)
============================================================== */
.group-title {
font-family: var(--mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--ink-soft);
margin: 1.5rem 0 .6rem;
font-weight: 600;
}
.example-list {
list-style: none; padding: 0; margin: 0;
}
.example-list li {
display: flex; gap: 1rem;
padding: .65rem 0;
border-bottom: 1px solid var(--rule-soft);
align-items: baseline;
font-size: .92rem;
}
.example-list li:last-child { border-bottom: 0; }
.example-list li > *:first-child {
flex: 0 0 40%;
max-width: 40%;
word-break: break-word;
}
.example-list li > span:last-child {
color: var(--ink-soft);
flex: 1;
}
.example-list code {
font-family: var(--mono);
background: var(--paper-3);
padding: .15rem .5rem;
border-radius: 2px;
border: 1px solid var(--border);
font-size: .86em;
color: var(--ink);
}
.hint-inline {
color: var(--ink-soft);
font-style: italic;
font-size: .85em;
}
/* ==============================================================
Dashboard-specific
============================================================== */
.dashboard-hero,
.flex-head {
display: flex; justify-content: space-between;
align-items: center; gap: .8rem;
margin-bottom: .5rem;
flex-wrap: wrap;
}
.flex-head h2, .dashboard-hero h2 {
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 500;
letter-spacing: -.02em;
margin: 0;
}
/* ==============================================================
Spinner + loading button
============================================================== */
.spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin .7s linear infinite;
opacity: .85;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ==============================================================
Top progress bar — global "something is loading" signal.
Editorial gold strip slides across the top of the viewport during
AJAX submits, non-AJAX form submits, and internal nav clicks.
Warm hue contrasts the cool navy/paper palette so it's unmissable
without screaming. JS pushes its `top` below the support strip when
that strip is rendered (see app.js progressBar.ensure).
============================================================== */
.top-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, #c8932b 0%, #e6b54a 60%, #c8932b 100%);
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: width .25s ease-out, opacity .2s linear;
box-shadow: 0 0 8px rgba(200, 147, 43, .55), 0 1px 0 rgba(140, 106, 31, .35);
}
.top-progress.is-active { opacity: 1; }
/* ==============================================================
Switch busy pulse — shows next to a toggle while its AJAX is
in flight. Switches use data-noloading (so we don't replace the
knob with a "Saving…" label), so this is the only signal users
get for the 200–500ms round-trip on group/contact/preference toggles.
============================================================== */
.switch.switch-busy::before,
.switch-readonly.switch-busy::before {
content: "";
position: absolute;
top: 50%; left: -14px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-soft, #5b6578);
transform: translateY(-50%);
animation: switchPulse 1s ease-in-out infinite;
}
.switch, .switch-readonly { position: relative; }
@keyframes switchPulse {
0%, 100% { opacity: .25; transform: translateY(-50%) scale(.85); }
50% { opacity: 1; transform: translateY(-50%) scale(1.1); }
}
.btn[data-loading="1"],
a[data-loading="1"] {
cursor: progress;
opacity: .8;
display: inline-flex;
align-items: center; justify-content: center;
gap: .5rem;
}
.btn-label { white-space: nowrap; }
/* ==============================================================
Toast
============================================================== */
#toast-host {
position: fixed; z-index: 100;
bottom: 1.25rem; right: 1.25rem;
display: flex; flex-direction: column;
gap: .5rem;
pointer-events: none;
}
.toast {
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
border-radius: var(--radius-sm);
padding: .75rem 1.1rem;
font-family: var(--sans);
font-size: .88rem;
font-weight: 500;
box-shadow: 4px 4px 0 0 var(--ink);
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
max-width: 340px;
pointer-events: auto;
}
.toast.in { opacity: 1; transform: none; }
.toast-ok { border-color: var(--ok); }
.toast-err { border-color: var(--err); background: var(--err); }
/* ==============================================================
Modal
============================================================== */
dialog.modal {
position: fixed; inset: 0; margin: auto;
max-width: 620px;
width: calc(100vw - 2rem);
max-height: calc(100vh - 2rem);
overflow: auto;
padding: 0;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
border-radius: var(--radius);
box-shadow:
0 40px 80px -20px rgba(12, 20, 34, .35),
0 20px 40px -10px rgba(12, 20, 34, .25);
}
dialog.modal::backdrop {
background: rgba(12, 20, 34, .55);
backdrop-filter: blur(4px);
}
dialog.modal[open] { animation: modalIn .22s cubic-bezier(.22, .61, .36, 1); }
@keyframes modalIn {
from { transform: translateY(16px) scale(.97); opacity: 0; }
to { transform: none; opacity: 1; }
}
.modal-header {
padding: 1.4rem 3.25rem 1.1rem 1.5rem;
border-bottom: 1px solid var(--border);
position: relative;
background: var(--paper-2);
}
.modal-header h3 {
font-family: var(--serif);
margin: 0 0 .4rem;
font-size: 1.35rem;
font-weight: 500;
letter-spacing: -.015em;
}
.modal-header .subtle {
margin: 0;
font-size: .93rem;
line-height: 1.5;
}
.modal-body { padding: 1.5rem; }
.modal-close {
position: absolute; top: .85rem; right: .85rem;
margin: 0; z-index: 1;
}
.modal-close button {
appearance: none;
-webkit-appearance: none;
width: 32px; height: 32px;
padding: 0;
border: 1px solid transparent;
background: transparent;
color: var(--ink-soft);
font-size: 1.3rem; line-height: 1;
font-weight: 400;
border-radius: 2px;
cursor: pointer;
display: inline-flex;
align-items: center; justify-content: center;
transition: background .12s, color .12s, border-color .12s;
}
.modal-close button:hover {
background: rgba(12, 20, 34, .06);
color: var(--ink);
border-color: var(--border);
}
.modal-close button:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
/* Compact plan cards inside modal */
dialog.modal .plans {
grid-template-columns: repeat(3, 1fr);
gap: .85rem; margin: 0;
}
dialog.modal .plan {
padding: 1.25rem 1rem;
text-align: center;
display: flex; flex-direction: column;
}
dialog.modal .plan .tag { font-size: .6rem; top: -9px; padding: .16rem .55rem; }
dialog.modal .plan h4 { margin: .25rem 0 .5rem; }
dialog.modal .plan .price { font-size: 1.75rem; margin: 0 0 .9rem; }
dialog.modal .plan .price span { font-size: .65rem; }
dialog.modal .plan ul {
margin: 0 0 .9rem;
font-size: .84rem;
line-height: 1.55;
}
dialog.modal .plan .btn { font-size: .7rem; padding: .55rem .75rem; width: 100%; }
@media (max-width: 560px) {
dialog.modal { width: calc(100vw - 1rem); }
dialog.modal .plans { grid-template-columns: 1fr; }
dialog.modal .plan { text-align: left; }
}
/* ==============================================================
Plan-confirm modal — shown before charging the saved card on
trial→paid conversion and on upgrades. Reuses dialog.modal frame.
============================================================== */
dialog.modal.plan-confirm { max-width: 460px; }
.plan-confirm .modal-body { padding: 1.4rem 1.5rem 1.5rem; }
.confirm-amount {
text-align: center;
padding: 1.1rem 1rem 1.2rem;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 1rem;
}
.confirm-amount-label {
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .35rem;
}
.confirm-amount-value {
font-family: var(--serif);
font-size: 2.4rem;
font-weight: 500;
letter-spacing: -.02em;
color: var(--ink);
line-height: 1;
}
.confirm-amount-sub {
font-size: .82rem;
color: var(--ink-soft);
margin-top: .45rem;
}
.confirm-card {
display: flex;
align-items: center;
gap: .85rem;
padding: .85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
margin-bottom: 1rem;
}
.confirm-card-icon {
flex: 0 0 auto;
width: 44px; height: 30px;
border-radius: 3px;
background: var(--navy);
color: #fff;
display: inline-flex;
align-items: center; justify-content: center;
font-size: .58rem;
font-weight: 700;
letter-spacing: .04em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.confirm-card-icon.brand-visa { background: #1a1f71; }
.confirm-card-icon.brand-mastercard { background: #eb001b; }
.confirm-card-icon.brand-amex { background: #006fcf; }
.confirm-card-icon.brand-discover { background: #ff6000; }
.confirm-card-icon.brand-missing { background: var(--err); font-size: 1rem; }
.confirm-card-text {
flex: 1 1 auto;
min-width: 0;
}
.confirm-card-line {
font-size: .92rem;
color: var(--ink);
font-weight: 500;
}
.confirm-card-sub {
font-size: .75rem;
color: var(--ink-soft);
margin-top: .15rem;
}
.confirm-card-manage {
flex: 0 0 auto;
font-size: .8rem;
color: var(--navy);
text-decoration: none;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 1px;
white-space: nowrap;
transition: color .12s, border-color .12s;
}
.confirm-card-manage:hover {
color: var(--navy-deep);
border-color: var(--navy);
}
.confirm-fineprint {
font-size: .76rem;
color: var(--ink-soft);
text-align: center;
margin: 0 0 1.2rem;
line-height: 1.5;
}
.confirm-actions {
display: flex;
gap: .6rem;
justify-content: flex-end;
}
.confirm-actions .btn { min-width: 110px; }
@media (max-width: 480px) {
.confirm-card { flex-wrap: wrap; }
.confirm-card-manage { width: 100%; text-align: right; padding-top: .15rem; }
.confirm-actions { flex-direction: column-reverse; }
.confirm-actions .btn { width: 100%; }
}
/* ==============================================================
Advanced (collapsible settings section)
Wraps fine-grained toggles so the Forwarding tab stays short.
============================================================== */
.advanced-settings {
margin-top: 1.25rem;
border-top: 1px solid var(--border);
padding-top: .9rem;
}
.advanced-settings > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: .6rem .2rem;
user-select: none;
}
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary::after {
content: "›";
font-family: var(--mono);
font-size: 1.25rem;
color: var(--ink-soft);
transition: transform .2s ease;
}
.advanced-settings[open] > summary::after { transform: rotate(90deg); }
.advanced-settings > summary .row-label { font-weight: 500; }
.advanced-settings > summary .row-hint {
display: block;
font-size: .8rem;
color: var(--ink-soft);
font-weight: 400;
margin-top: .15rem;
}
.advanced-settings > summary > :first-child { flex: 1; }
.advanced-settings .advanced-body {
padding-top: .8rem;
border-top: 1px dashed var(--border);
margin-top: .3rem;
}
.advanced-settings .advanced-body .group-title:first-child { margin-top: 0; }
/* ==============================================================
Credit strap — shared credit explainer + CTAs
Keeps dashboard / settings / buy-credits / plan_picker consistent.
============================================================== */
.credit-strap {
margin-top: 1.25rem;
padding: 1rem 1.15rem 1.1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
}
.credit-strap-compact { margin-top: .75rem; padding: .85rem 1rem; }
.credit-strap-facts {
display: flex;
flex-wrap: wrap;
gap: .4rem .55rem;
margin: 0 0 .55rem;
padding: 0;
list-style: none;
}
.credit-strap-facts li {
font-size: .84rem;
color: var(--ink);
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: .3rem .7rem;
white-space: nowrap;
}
.credit-strap-facts li strong { font-weight: 600; }
.credit-strap-facts li em { font-style: normal; color: var(--ink-soft); }
.credit-strap-note {
margin: 0 0 .7rem;
color: var(--ink-soft);
font-size: .85rem;
}
.credit-strap-actions {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
/* ==============================================================
Responsive polish
============================================================== */
@media (max-width: 520px) {
.credit-strap-facts li { white-space: normal; }
.row-static, .row-field, .row-toggle, .row-nav {
flex-wrap: wrap;
align-items: flex-start;
}
.row-field .row-input {
width: 100%;
margin-top: .3rem;
}
.row-field input[type=tel],
.row-field input[type=text] {
flex: 1;
width: auto;
}
.list-title { white-space: normal; }
.alias-inline input[type=text] { width: 90px; }
.example-list li { flex-direction: column; gap: .25rem; }
.example-list li > *:first-child { max-width: 100%; }
.verify-row { flex-direction: column; align-items: stretch; }
.verify-row .verify-phone-input { width: 100%; }
.verify-row .btn { width: 100%; }
.digit-row { gap: .35rem; }
.digit-box { width: 2.4rem; height: 3rem; font-size: 1.4rem; }
.verified-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
.verified-row-actions { flex-wrap: wrap; }
}
/* ==============================================================
SMS-destination verification panel
============================================================== */
.sms-dest-block { margin: 0; }
.sms-dest-current {
display: flex; align-items: center; gap: .8rem;
flex-wrap: wrap;
}
.sms-dest-value {
font-family: var(--mono);
font-size: 1.02rem;
letter-spacing: .02em;
color: var(--ink);
}
.sms-dest-empty {
color: var(--ink-faint);
font-style: italic;
font-size: .92rem;
}
.sms-dest-verify {
margin-top: .75rem;
padding: 1rem 1.1rem 1.1rem;
background: var(--paper-2);
border: 1px solid var(--border);
border-left: 3px solid var(--navy);
border-radius: var(--radius-sm);
animation: verify-fade-in .22s ease-out both;
}
@keyframes verify-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.sms-dest-cancel-btn {
margin-top: .6rem;
}
/* Verify panel core — reused at onboarding and in Settings */
.verify-panel {
display: block;
}
.verify-head { margin-bottom: .9rem; }
.verify-heading {
margin: 0 0 .2rem;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -.01em;
}
.verify-sub {
margin: 0;
color: var(--ink-soft);
font-size: .92rem;
line-height: 1.5;
}
.verify-label {
display: block;
font-family: var(--mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--ink-soft);
margin-bottom: .4rem;
font-weight: 600;
}
.verify-row {
display: flex;
gap: .5rem;
align-items: stretch;
}
.verify-phone-input {
flex: 1;
padding: .6rem .75rem;
font-size: 1rem;
font-family: var(--mono);
letter-spacing: .02em;
border: 1px solid var(--border-strong);
background: var(--paper);
color: var(--ink);
border-radius: var(--radius-sm);
transition: border-color .15s, box-shadow .15s;
}
.verify-phone-input:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.verify-send {
white-space: nowrap;
}
.verify-send[disabled] {
opacity: .6;
cursor: wait;
}
.verify-hint {
margin: .5rem 0 0;
font-size: .82rem;
color: var(--ink-faint);
}
.verify-error {
margin: .55rem 0 0;
padding: .5rem .7rem;
background: rgba(160, 40, 40, .08);
border-left: 2px solid #a02828;
color: #7a1f1f;
font-size: .88rem;
border-radius: 2px;
}
/* Code entry */
.verify-sent {
margin: 0 0 .8rem;
font-size: .92rem;
color: var(--ink-soft);
}
.verify-sent-phone {
color: var(--ink);
font-family: var(--mono);
letter-spacing: .02em;
}
.verify-change-number {
margin-left: .3rem;
}
.digit-row {
display: flex;
gap: .5rem;
justify-content: flex-start;
margin: .2rem 0 .9rem;
}
.digit-box {
width: 2.8rem;
height: 3.4rem;
text-align: center;
font-family: var(--mono);
font-size: 1.55rem;
font-weight: 600;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
caret-color: var(--navy);
transition: border-color .12s, box-shadow .12s, transform .08s;
}
.digit-box:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.digit-box.has-value {
background: var(--paper-3);
}
.verify-panel.is-error .digit-box {
border-color: #a02828;
animation: verify-shake .38s ease-in-out;
}
@keyframes verify-shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(3px); }
}
.verify-actions {
display: flex;
align-items: baseline;
gap: .6rem;
font-size: .88rem;
color: var(--ink-soft);
}
.verify-resend-timer {
font-variant-numeric: tabular-nums;
}
/* Success */
.verify-done {
display: flex; align-items: center; gap: .75rem;
padding: .2rem 0;
}
.verify-check {
display: inline-flex;
align-items: center; justify-content: center;
width: 2rem; height: 2rem;
border-radius: 50%;
background: var(--ok);
color: var(--paper);
font-weight: 700;
font-size: 1.1rem;
animation: verify-pop .3s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes verify-pop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.verify-done-title {
display: block;
font-size: 1rem;
color: var(--ink);
}
.verify-done-sub {
margin: .1rem 0 0;
color: var(--ink-soft);
font-size: .88rem;
}
/* Verified numbers list */
.verified-list {
margin-top: 1.1rem;
padding-top: .8rem;
border-top: 1px solid var(--rule-soft);
}
.verified-list-ul {
list-style: none;
padding: 0;
margin: 0;
}
.verified-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .55rem 0;
border-bottom: 1px solid var(--rule-soft);
}
.verified-row:last-child { border-bottom: 0; }
.verified-row-main {
display: flex; align-items: center; gap: .6rem;
}
.verified-row-phone {
font-family: var(--mono);
font-size: .98rem;
color: var(--ink);
letter-spacing: .02em;
}
.verified-row-badge {
font-family: var(--mono);
font-size: .66rem;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--ok);
border: 1px solid var(--ok);
padding: .1rem .45rem;
border-radius: 999px;
background: var(--ok-bg);
}
.verified-row-actions {
display: flex;
align-items: center;
gap: .75rem;
}
.verified-row-actions form { margin: 0; }
.verified-list-hint {
margin: .55rem 0 0;
font-size: .82rem;
color: var(--ink-faint);
}
.link-btn {
background: none;
border: 0;
padding: 0;
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--border-strong);
text-underline-offset: 3px;
cursor: pointer;
font: inherit;
}
.link-btn:hover { text-decoration-color: var(--ink); }
.link-btn[disabled] {
color: var(--ink-faint);
cursor: default;
text-decoration: none;
}
.link-btn-danger { color: #7a1f1f; text-decoration-color: rgba(122, 31, 31, .4); }
.link-btn-danger:hover { text-decoration-color: #7a1f1f; }
/* ==============================================================
Mobile audit fixes — strictly inside @media (max-width:560px) so
desktop CSS stays byte-identical. Audit baseline 2026-05-01.
============================================================== */
/* Default-state rules for the new hamburger button (hidden on desktop). */
.nav-toggle { display: none; }
/* Default-state for the mobile pagination "Show more" button — JS only
inserts these when matchMedia('(max-width:560px)') matches, but make
sure the button isn't visible should one ever leak onto desktop. */
.mobile-show-more { display: none; }
@media (max-width: 560px) {
/* ---- E. Tab strips: allow wrap so all tabs are visible without scroll.
Tighten padding more aggressively than the existing 720px rule so 5
tabs (Forwarding/Groups/Contacts/Preferences/Connection) usually fit
in one row, with 2 rows being the worst case. ---- */
.tabs {
flex-wrap: wrap;
row-gap: .15rem;
}
.tab {
padding: .55rem .45rem;
font-size: .58rem;
letter-spacing: .06em;
gap: .25rem;
}
.tab-count {
font-size: .55rem;
padding: .04rem .3rem;
letter-spacing: .03em;
}
/* Sub-tabs (pill segmented control) keep horizontal scroll — they're
short and pill-shaped, scrolling reads fine here. */
.subtabs {
max-width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab { flex: 0 0 auto; }
/* ---- A. Contact rows: stack alias-input on its own row below the
toggle so the name column doesn't collapse to 1 character wide. ---- */
.list-item.contact-item {
flex-wrap: wrap;
row-gap: .35rem;
padding: .5rem .25rem .55rem;
}
.contact-item .list-item-btn-form { flex: 1 1 100%; min-width: 0; }
.contact-item .alias-inline {
flex: 1 1 100%;
display: flex;
gap: .4rem;
padding-left: 38px; /* align under the avatar */
}
.contact-item .alias-inline input[type=text] {
flex: 1 1 auto;
width: auto !important; /* beat the desktop 78px / 600px 60px caps */
min-width: 0;
}
.contact-item .alias-inline .btn { flex: 0 0 auto; }
.contact-item .switch-readonly { transform: scale(1); }
/* ---- B. Usage table → stacked cards. Drop the column header row;
cells render labelled rows pulled from data-label attributes. ---- */
.table-scroll { overflow-x: visible; }
.table-scroll .table,
.table-scroll .table thead,
.table-scroll .table tbody,
.table-scroll .table tr,
.table-scroll .table th,
.table-scroll .table td {
display: block;
width: 100%;
}
.table-scroll .table thead { display: none; }
.table-scroll .table tr {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin: 0 0 .55rem;
padding: .55rem .75rem;
background: var(--paper);
}
.table-scroll .table td {
border: 0;
padding: .18rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: .75rem;
font-size: .88rem;
}
.table-scroll .table td::before {
content: attr(data-label);
color: var(--ink-soft);
font-family: var(--mono);
font-size: .65rem;
letter-spacing: .08em;
text-transform: uppercase;
flex: 0 0 auto;
}
.table-scroll .table td:empty,
.table-scroll .table td[data-label=""] { display: none; }
/* ---- B/C. Mobile pagination — JS adds .mobile-show-more buttons
and toggles .mobile-hidden on overflow rows. ---- */
.mobile-hidden { display: none !important; }
.mobile-show-more {
display: block;
width: 100%;
margin: .9rem 0 .25rem;
padding: .7rem .9rem;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--ink);
font-family: var(--mono);
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
}
.mobile-show-more:hover { background: var(--paper-3); }
/* ---- D. Hamburger nav. Drawer is in-flow (pushes page down) rather
than position:absolute — avoids stacking-context issues with .panel.
flex-direction:row is asserted to override the existing @420px column
rule (the drawer handles narrow viewports now, no need to stack). ---- */
.nav {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: 1rem 1.25rem;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--ink);
cursor: pointer;
padding: 0;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav nav {
flex-basis: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
border-top: 1px solid var(--border);
display: none;
}
.nav.is-open nav { display: flex; }
.nav nav a,
.nav nav .link {
width: 100%;
padding: .85rem .15rem;
border-bottom: 1px solid var(--border);
font-size: 1rem;
text-align: left;
}
.nav nav form { width: 100%; margin: 0; }
.nav nav form .link { padding: .85rem .15rem; border-bottom: 0; }
.nav nav a:last-of-type { border-bottom: 1px solid var(--border); }
/* Suppress the desktop active-underline pseudo inside the drawer. */
.nav nav a.is-active::after { display: none; }
.nav nav a.is-active {
color: var(--ink);
font-weight: 600;
}
}
/* ==============================================================
Email + password auth forms
Used by /signup.php, /login.php, /verify-email.php, /forgot-password.php.
Styled to match the editorial / iOS-settings tone of the rest of the
portal — labels above full-width inputs, no fancy floating, mono input
font for keyboard rhythm.
============================================================== */
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1rem; }
.auth-field { display: flex; flex-direction: column; gap: .35rem; }
.auth-field label {
font-family: var(--mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--ink-soft);
font-weight: 600;
}
.auth-field input[type=email],
.auth-field input[type=password],
.auth-field input[type=text] {
width: 100%;
padding: .65rem .8rem;
font: inherit;
font-family: var(--mono);
font-size: .98rem;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
transition: border-color .12s, box-shadow .12s;
}
.auth-field input[type=email]:focus,
.auth-field input[type=password]:focus,
.auth-field input[type=text]:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-hint {
font-size: .8rem;
color: var(--ink-faint);
line-height: 1.55;
}
.auth-hint .ok { color: var(--ok); }
.auth-actions { display: flex; gap: .6rem; margin-top: .25rem; }
.auth-actions .btn { flex: 1; }
.auth-foot {
margin: 1.1rem 0 0;
font-size: .9rem;
color: var(--ink-soft);
display: flex; flex-wrap: wrap; gap: .35rem .6rem;
}
.auth-foot a { color: var(--ink); }
.auth-divider {
display: flex; align-items: center; gap: .8rem;
margin: 1.4rem 0 1rem;
font-family: var(--mono);
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-faint);
}
.auth-divider::before, .auth-divider::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-error {
margin: 0 0 1rem;
padding: .65rem .85rem;
background: var(--err-bg);
border: 1px solid rgba(142, 46, 46, .25);
border-left: 3px solid var(--err);
border-radius: var(--radius-sm);
color: #6c1e1e;
font-size: .92rem;
}
.auth-success {
margin: 0 0 1rem;
padding: .65rem .85rem;
background: var(--ok-bg);
border: 1px solid rgba(92, 122, 60, .3);
border-left: 3px solid var(--ok);
border-radius: var(--radius-sm);
color: #3d5128;
font-size: .92rem;
}
/* Code-entry on /verify-email.php and step 2 of /forgot-password.php.
Reuses the .digit-row / .digit-box styling already proven on the SMS
destination flow, but mounted standalone (no phone input above it). */
.code-target {
font-family: var(--mono);
font-size: .92rem;
color: var(--ink);
letter-spacing: .02em;
word-break: break-all;
}
/* Mobile: digit boxes are sized for desktop in the existing rules
(2.8rem × 3.4rem). On phones <420px the row needs to shrink so all 6
stay on a single line — they're easier to skim than wrapping. */
@media (max-width: 420px) {
.digit-row { gap: .35rem; }
.digit-box {
width: 2.2rem;
height: 2.85rem;
font-size: 1.3rem;
}
}