/* ==========================================================================
   Creator funnel - the paste-your-blog box, the preview it renders, and the
   waitlist behind it. Shared by /creators/, /compare/*, and /preview/.

   Same paper-and-ink rules as the consumer landing (styles.css), restated
   here rather than imported: these pages address bloggers, load standalone,
   and should not break because a consumer stylesheet moved.
   ========================================================================== */

.tc {
    --paper: #f7f3ea;
    --paper-raised: #fffdf6;
    --ink: #1d1915;
    --ink-soft: #57504a;
    --ink-faint: #8b8378;
    --rule: #d9d1c1;
    --rule-strong: #b8ad99;
    --red: #f9504b;
    --red-deep: #c23a31;
    --serif: 'Charter', 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Source Code Pro', Menlo, Consolas, monospace;
    /* Replaced with the blogger's own theme-color once we have read it. */
    --theirs: #1d1915;

    font-family: var(--serif);
    margin: 2.5rem 0;
}

.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }
.tc [hidden] { display: none !important; }

.tc-label {
    display: block; font-family: var(--mono); font-size: .6875rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: .4rem;
}
.tc-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.tc input[type=url], .tc input[type=email], .tc textarea {
    flex: 1 1 18rem; min-width: 0; padding: .7rem .8rem;
    border: 1px solid var(--rule-strong); background: var(--paper-raised);
    font-family: var(--mono); font-size: .95rem; color: var(--ink);
    border-radius: 2px; width: 100%;
}
.tc textarea { font-family: var(--serif); min-height: 4.5rem; resize: vertical; }
.tc button {
    padding: .7rem 1.2rem; border: 1px solid var(--ink); background: var(--ink);
    color: var(--paper); font-family: var(--serif); font-size: 1rem;
    cursor: pointer; border-radius: 2px;
}
.tc button:hover:not(:disabled) { background: var(--red-deep); border-color: var(--red-deep); }
.tc button:disabled { opacity: .55; cursor: progress; }
.tc-note { font-size: .85rem; color: var(--ink-faint); margin: .6rem 0 0; }
.tc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tc-status, .tc-error {
    margin: 1.5rem 0 0; padding: .9rem 1rem; border-left: 3px solid var(--rule-strong);
    background: var(--paper-raised); font-size: .95rem;
}
.tc-error { border-left-color: var(--red); }
.tc-elapsed { font-family: var(--mono); color: var(--ink-faint); font-size: .8125rem; }

.tc-result { margin-top: 2.5rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .tc-result { grid-template-columns: 1fr 21rem; align-items: start; } }

.tc-figure {
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--red-deep); margin-bottom: .3rem;
}
.tc h3 { font-size: 1.2rem; margin: 0 0 .5rem; font-weight: 600; }
.tc-apparatus { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0 1.5rem; }
.tc-apparatus th, .tc-apparatus td { text-align: left; padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--rule); }
.tc-apparatus th { font-family: var(--mono); font-size: .72rem; font-weight: 400; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.tc-apparatus td { font-family: var(--mono); text-align: right; }

.tc-phone {
    border: 10px solid #14110e; border-radius: 28px; background: var(--paper-raised);
    overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.13); max-width: 21rem; margin: 0 auto;
}
.tc-head {
    background: var(--theirs); color: #fff; padding: .8rem 1rem;
    display: flex; align-items: center; gap: .6rem; min-height: 56px;
}
.tc-mark {
    width: 32px; height: 32px; border-radius: 6px; flex: 0 0 auto;
    background: rgba(255,255,255,.16); color: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.tc-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.tc-head .n { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.tc-head .s { font-family: var(--mono); font-size: .625rem; opacity: .82; letter-spacing: .08em; text-transform: uppercase; }
.tc-screen { max-height: 28rem; overflow-y: auto; }
/* `.tc button` (0,1,1) outspecifies a bare `.tc-rec` (0,1,0), so these two
   have to be qualified or the recipe rows render as dark buttons. */
/* The app's RecipeCard: rounded card, soft shadow, 4px cuisine rail.
   Geometry mirrors src/components/RecipeCard.js (borderRadius 12, rail 4,
   padding 16, name 16/bold, description 12, meta 12). */
.tc-screen { padding: 10px; background: var(--paper); }
.tc button.tc-rec {
    position: relative; display: block; width: 100%; text-align: left;
    background: var(--paper-raised); border: 0; border-radius: 12px;
    margin-bottom: 12px; overflow: hidden; padding: 0;
    color: var(--ink); font-family: var(--serif); cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.tc button.tc-rec:hover { background: #fff; }
.tc-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.tc-cardbody { display: block; padding: 14px 14px 16px; }
.tc-rec .t { font-size: .95rem; font-weight: 700; display: block; margin-bottom: 4px; }
.tc-rec .d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .78rem; color: var(--ink-soft); margin-bottom: 8px;
}
.tc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .72rem; color: var(--ink-soft); }
.tc-mi-item { display: inline-flex; align-items: center; gap: 4px; }
.tc-mi { flex: 0 0 auto; }
.tc-chip { display: inline-flex; align-items: center; gap: 4px; }
.tc-chip .tc-flag { border-radius: 2px; display: block; }

.tc-tabs {
    display: flex; border-top: 1px solid var(--rule); background: var(--paper-raised);
}
.tc-tab {
    flex: 1; text-align: center; padding: .55rem .2rem .7rem;
    font-family: var(--mono); font-size: .625rem; letter-spacing: .04em;
    color: var(--ink-faint); text-transform: uppercase;
}
.tc-tab.on { color: var(--theirs); font-weight: 700; }
.tc-detail { padding: .9rem .9rem 1.4rem; }
.tc-detail h4 { margin: 0 0 .2rem; font-size: 1.05rem; }
.tc-detail .m { font-family: var(--mono); font-size: .6875rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.tc-detail h5 { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-deep); margin: 1rem 0 .35rem; }
.tc-detail ul, .tc-detail ol { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.tc-detail li { margin-bottom: .3rem; }
.tc button.tc-back { font-family: var(--mono); font-size: .75rem; background: none; border: 0; color: var(--red-deep); padding: .6rem .9rem; cursor: pointer; }
.tc button.tc-back:hover { background: none; color: var(--ink); }
.tc-thin { font-family: var(--mono); font-size: .7rem; color: var(--red-deep); }

.tc-colour { text-align: center; margin-top: .5rem; }
.tc-colour label { display: inline-flex; align-items: center; gap: .4rem; }
.tc-colour input[type=color] {
    width: 2rem; height: 1.4rem; padding: 0; border: 1px solid var(--rule-strong);
    background: none; cursor: pointer; border-radius: 2px; flex: 0 0 auto;
}

.tc-waitlist { margin-top: 2rem; border-top: 1px solid var(--rule-strong); padding-top: 1.25rem; }
.tc-waitlist p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .95rem; }
.tc-done { border-left: 3px solid var(--ink); background: var(--paper-raised); padding: .9rem 1rem; font-size: .95rem; }