and data-label="..." to each | ; the label prints above its value.
A | with no data-label (e.g. an actions cell) shows just its content. The
!important widths override any inline widths set by the resizable-table JS. */
table.responsive-table { display: block; width: 100% !important; }
table.responsive-table thead { display: none; }
table.responsive-table tbody { display: block; }
table.responsive-table tr { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin: 0 0 12px; padding: 4px 0; }
table.responsive-table td { display: block; width: auto !important; border: none; padding: 7px 14px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
table.responsive-table td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
table.responsive-table td:not([data-label])::before { display: none; }
}
/* ── Social sign-in buttons (login + register) ──────────────────────────────── */
.oauth-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.oauth-btn {
flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
background: #fff; color: #1f1f1f; font-weight: 600; font-size: 0.92rem;
text-decoration: none; white-space: nowrap; cursor: pointer;
}
.oauth-btn:hover { background: #f7f7f7; text-decoration: none; }
.oauth-ico { display: inline-flex; width: 18px; height: 18px; }
.oauth-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 0.8rem; margin: 0 0 16px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.oauth-divider span { padding: 0 12px; }
/* Phones: stack the buttons full-width. Placed AFTER the base rules so it wins on
source order — otherwise the base `flex: 1 1 160px` bleeds through and, in a
column, its 160px basis becomes the button HEIGHT (giant buttons). `flex: 0 0 auto`
resets that so height is content-sized; align-items:stretch makes them full-width. */
@media (max-width: 768px) {
.oauth-row { flex-direction: column; }
.oauth-btn { flex: 0 0 auto; }
}
/* ============================================================
FLAT BUTTONS · light outer shadow (replaces the old 3D keycap)
Solid fills + a soft neutral drop shadow — no gradient, ledge,
or press. The shadow matches the field-placer tiles.
============================================================ */
.btn {
transition: box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
box-shadow: 0 1px 4px rgba(28,24,21,.15);
}
.btn:hover { box-shadow: 0 2px 7px rgba(28,24,21,.18); }
.btn:active { box-shadow: 0 1px 3px rgba(28,24,21,.13); }
.btn-secondary:hover { border-color: var(--seal); color: var(--seal-dark); }
.btn-danger:hover { background: var(--danger-tint); }
/* Disabled buttons stay flat (no shadow) */
.btn[disabled], .btn:disabled { box-shadow: none; }
/* ── Premium-feature lock badge + upgrade CTA ────────────────────────────────
Shared treatment for gated features (views/partials/upgrade-lock.ejs).
Spec: PREMIUM_LOCK_STANDARDIZATION_SPEC.md. The whole badge is one tap target
linking to /billing — a visible "Premium · Upgrade" cue (no hover/title needed). */
.feat-lock {
display: inline-flex; align-items: center; gap: 6px;
color: var(--seal-dark); text-decoration: none; line-height: 1;
border: 1px solid var(--seal); background: var(--seal-tint);
border-radius: 999px; font-weight: 700; letter-spacing: .01em;
text-transform: none; /* immune to uppercase table headers etc. */
transition: background .12s ease, border-color .12s ease;
}
.feat-lock:hover { background: #f2d3ce; border-color: var(--seal-dark); text-decoration: none; }
.feat-lock:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.feat-lock__glyph { display: inline-flex; color: var(--seal); }
.feat-lock__tag { text-transform: uppercase; }
/* Inline pill — for row menus, table cells, next to a button. */
.feat-lock--inline { padding: 3px 10px; font-size: 0.7rem; }
.feat-lock--inline .feat-lock__cta { color: var(--seal-dark); opacity: .85; }
.feat-lock--inline .feat-lock__cta::before { content: '·'; margin-right: 6px; opacity: .6; }
/* Block CTA — for cards (payment ask, settings, empty-state affordances). */
.feat-lock--block {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 14px 16px; border-radius: var(--radius); font-weight: 600;
}
.feat-lock--block .feat-lock__glyph { align-self: flex-start; margin-top: 2px; }
.feat-lock--block .feat-lock__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.feat-lock--block .feat-lock__title { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.feat-lock--block .feat-lock__tag {
font-size: 0.6rem; padding: 2px 7px; border-radius: 999px;
background: var(--seal); color: #fff; letter-spacing: .06em;
}
.feat-lock--block .feat-lock__sub { font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; }
.feat-lock--block .feat-lock__cta {
flex: none; align-self: center; padding: 8px 16px; border-radius: 7px;
background: var(--seal); color: #fff; font-weight: 700; font-size: 0.85rem;
}
.feat-lock--block:hover .feat-lock__cta { background: var(--seal-dark); }
/* A control rendered inert because the tenant isn't entitled: dim it, kill pointer
events, and let the sibling .feat-lock carry the affordance. Applied to a wrapper
around the real (disabled) control so the layout is preserved. */
.is-locked { opacity: .55; pointer-events: none; filter: grayscale(0.3); }
.locked-wrap { display: flex; flex-direction: column; gap: 8px; }
.locked-wrap--row { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
|