/* SQLly Embedded page - page-specific rules ONLY. Shared primitives
   (tokens, body, headings, links, buttons, eyebrows, plan cards, terms strip)
   come from site.css; do not re-declare them here. */
.feat-hero { padding: 64px 0 24px; text-align: center; }
.feat-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 14px 0 18px; }
.feat-hero h1 em { font-style: normal; color: var(--pink-deep); }
.feat-hero > .wrap > p { max-width: 760px; margin: 0 auto 18px; font-size: 1.08rem; line-height: 1.65; color: var(--ink); }
.feat-hero .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0 10px; }
.feat-hero .hero-status { font-size: .95rem; color: var(--muted); }
.status { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; margin-right: 8px; white-space: nowrap; }
.status.ok { color: var(--green); background: var(--green-soft); }

.grp { padding: 48px 0; }
.grp-head { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.grp-head h2 { margin: 10px 0 12px; }
.grp-head p { color: var(--muted); line-height: 1.6; }

.emb-diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; margin: 0 auto; max-width: 1040px; }
.emb-node { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.emb-node h3 { font-size: 1.15rem; margin: 4px 0 8px; }
.emb-node p { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 0; }
.emb-sub { font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--pink-ink); }
.emb-link { align-self: center; text-align: center; font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.diagram-caption { text-align: center; color: var(--muted); font-size: .95rem; max-width: 760px; margin: 22px auto 0; line-height: 1.6; }

.emb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.emb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.emb-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.emb-card p { color: var(--muted); font-size: .96rem; line-height: 1.55; margin: 0; }

.emb-limits { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; }
.emb-limits li { padding: 14px 0 14px 28px; position: relative; border-bottom: 1px solid var(--line); line-height: 1.6; color: var(--ink); }
.emb-limits li::before { content: "→"; position: absolute; left: 0; color: var(--pink-deep); font-weight: 700; }
.emb-limits li:last-child { border-bottom: none; }

/* Owner + admin management pages */
.emb-key-reveal { font-family: "JetBrains Mono", monospace; font-size: 1.02rem; word-break: break-all; background: var(--blue-soft); border-radius: var(--radius); padding: 14px 18px; margin: 10px 0; }
.emb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 14px 0 18px; }
.emb-stat { background: var(--blue-soft); border-radius: var(--radius); padding: 12px 16px; }
.emb-stat .emb-stat-label { font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--muted); display: block; }
.emb-stat .emb-stat-value { font-weight: 600; font-size: 1.05rem; }
.emb-inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.emb-inline-form input[type=text], .emb-inline-form input[type=number] { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); min-width: 160px; font: inherit; font-size: .95rem; }

/* Owner page (/embedded/manage) */
.emb-manage-head .lede { max-width: 66ch; }
section.emb-manage { padding-top: 40px; }
.emb-manage code { font-family: "JetBrains Mono", monospace; font-size: .86em; background: var(--blue-soft); color: var(--ink); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.emb-summary { margin: 0 0 28px; }
.emb-summary ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.emb-summary li + li { border-top: 1px solid var(--line); }
.emb-summary a { display: grid; grid-template-columns: auto minmax(10ch, 1fr) minmax(10ch, 1fr) 2fr; gap: 6px 14px; align-items: baseline; padding: 12px 20px; color: var(--ink); text-decoration: none; }
.emb-summary a:hover { background: var(--blue-soft); }
.emb-summary-name { font-weight: 600; color: var(--heading); }
.emb-summary-domain { font-family: "JetBrains Mono", monospace; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.emb-summary-health { font-size: .92rem; color: var(--muted); }
.emb-summary .tone-warn .emb-summary-health, .emb-summary .tone-bad .emb-summary-health { color: var(--ink); font-weight: 500; }

/* Health dot: the sentence beside it carries the meaning; the dot is a scan aid. */
.emb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; transform: translateY(-1px); }
.tone-ok .emb-dot { background: var(--green); }
.tone-warn .emb-dot { background: var(--amber-dot); }
.tone-bad .emb-dot { background: var(--pink-strong); }
.tone-idle .emb-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }

.emb-lic { scroll-margin-top: 96px; }
.emb-lic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; }
.emb-lic-head h2 { margin: 0 0 4px; }
.emb-lic-id { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0; font-size: .9rem; color: var(--muted); }
.emb-lic-domain { font-family: "JetBrains Mono", monospace; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.emb-lic-domain.is-unset { color: var(--muted); font-weight: 400; font-style: italic; }
.emb-lic-id code { font-size: .8rem; }
.emb-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.emb-manage .pill { font-size: .8rem; }
.emb-health { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 18px; font-weight: 500; color: var(--ink); line-height: 1.5; }
.emb-health .emb-dot { transform: translateY(-1px); }

.emb-stat { margin: 0; }
.emb-stat dd { margin: 0; }
.emb-stat .emb-stat-note { font-size: .84rem; color: var(--muted); margin-top: 2px; }
.emb-stat.is-over { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-line); }
.emb-stat.is-over .emb-stat-note { color: var(--amber-ink); font-weight: 500; }
.emb-stat.is-over .emb-stat-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.emb-sec { padding: 22px 0 0; margin-top: 22px; border-top: 1px solid var(--line); }
.emb-sec h3 { font-size: 1.08rem; margin: 0 0 8px; }
.emb-help { margin: 0 0 12px; color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 72ch; }
.emb-help strong { color: var(--ink); }
.emb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; }
.emb-impact { font-size: .86rem; color: var(--muted); }

.emb-key-reveal { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.emb-key-reveal span { overflow-wrap: anywhere; min-width: 0; }
.emb-cmd { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 10px 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.emb-cmd pre { flex: 1; min-width: 0; margin: 0; font-family: "JetBrains Mono", monospace; font-size: .86rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.emb-domain-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; max-width: 560px; }
.emb-domain-form label { grid-column: 1 / -1; font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--muted); }
.emb-domain-form input[type=text] { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-family: "JetBrains Mono", monospace; font-size: .92rem; min-width: 0; }
.emb-domain-form .emb-hint { grid-column: 1 / -1; font-size: .84rem; color: var(--muted); }
.btn-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9rem; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--pink-ink); }

.emb-rows { border-top: 1px solid var(--line); }
.emb-rows .device-row { padding-left: 0; padding-right: 0; }
.emb-rows .device-meta code { font-size: .82rem; }
.device-row .device-meta.emb-waiting { color: var(--amber-ink); margin-top: 4px; }
.emb-waiting a { color: inherit; text-decoration: underline; }

.emb-past { margin: 8px 0 26px; }
.emb-past > summary { cursor: pointer; padding: 12px 0; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--heading); }
.emb-past > summary span { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: .9rem; color: var(--muted); margin-left: 6px; }
.emb-past .emb-lic { margin-top: 10px; }

.emb-more { color: var(--muted); font-size: .95rem; margin: 8px 0 0; }

@media (max-width: 720px) {
    .emb-summary a { grid-template-columns: auto 1fr; }
    .emb-summary-domain, .emb-summary-health { grid-column: 2; }
    .emb-lic.panel { padding: 22px 18px; }
    .emb-cmd { flex-direction: column; align-items: stretch; }
    .emb-cmd .btn { align-self: flex-start; }
    .emb-domain-form { grid-template-columns: 1fr; }
    .emb-domain-form .btn { justify-self: start; }
}

@media (max-width: 900px) {
    .emb-diagram { grid-template-columns: 1fr; }
    .emb-link { padding: 4px 0; }
}

/* Admin: license parameter form (issue + edit) */
.emb-param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; margin: 12px 0 14px; }
.emb-param-grid label, .panel form > label { display: flex; flex-direction: column; gap: 4px; font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--muted); }
.emb-param-grid .emb-param-wide { grid-column: 1 / -1; }
.emb-param-grid .emb-unlimited { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.emb-param-grid .emb-unlimited span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.emb-param-grid .emb-unlimited input { padding: 0; width: auto; }
.emb-param-grid:has(.emb-unlimited input:checked) .emb-limited { opacity: .4; pointer-events: none; }
.emb-param-grid input, .emb-param-grid select, .panel form > label input { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-family: Inter, system-ui, sans-serif; font-size: .95rem; min-width: 0; }

.emb-saas-note { margin-top: 22px; color: var(--muted); font-size: .97rem; line-height: 1.6; }
.emb-saas-note strong { color: var(--ink); }

/* The reason a disabled action is blocked, right under its button. */
.emb-blocked { margin: 6px 0 0; color: var(--ink); font-size: .9rem; line-height: 1.5; }