/* Appltech — site styles (layered on Bootstrap 5)
 *
 * Theme: the 2007 appltech.net look (DotNetNuke "DNTS.FactoryGrey" skin, Wayback snapshot 2007-02-02).
 * Original colours are kept as --legacy-* variables; where an original pairing fails WCAG AA contrast for
 * normal text, the working token below it uses an adjusted shade (noted inline). Graphics in /img/legacy/.
 */
:root {
    /* --- Original 2007 palette (from skin.css, default.css and the skin GIFs) --- */
    --legacy-factory-blue: #034573;  /* top bar, selected menu tab, menu text, band stripe */
    --legacy-factory-grey: #94928E;  /* page / menu bar / sub-menu / footer background */
    --legacy-steel-blue: #A5BDCE;    /* banner (header_bg.gif) and menu highlight */
    --legacy-steel-mid: #6B94B5;     /* banner gears */
    --legacy-steel-light: #A0B8CA;   /* logo background */
    --legacy-logo-slate: #46637D;    /* logo lettering */
    --legacy-bevel-dark: #575654;    /* menu bar bevel */
    --legacy-bevel-light: #A19F9C;   /* band bevel */
    --legacy-rule: #333333;          /* dark rule under the band / footer edge */
    --legacy-link: #003366;          /* default.css A:link */
    --legacy-link-hover: #FF0000;    /* default.css A:hover — 4.0:1 on white, fails AA */
    --legacy-h1: #666644;            /* default.css H1 */
    --legacy-panel: #EEEEEE;         /* default.css panels */

    /* --- Working tokens --- */
    --ink-900: #1a1a1a;
    --ink-800: #222222;
    --ink-700: #333333;
    --ink-500: #555555;
    --ink-300: #d9d8d5;
    --paper: #ffffff;
    --surface: #ffffff;
    --line: #c9d6df;
    --accent: var(--legacy-factory-blue);
    --accent-hover: #022f4f;
    --link: var(--legacy-link);
    --link-hover: #c00000;           /* adjusted from #FF0000: 6.5:1 on white */
    --menu-text: #012238;            /* adjusted from #034573: 3.2:1 on #94928E → 5.3:1 */
    --footer-bg: var(--legacy-bevel-dark); /* white on #94928E is 3.1:1; white on #575654 is 7.3:1 */
    --success: #166534;
    --warning: #92400e;
    --radius: 3px;
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, .08);
    --shadow-md: 2px 3px 0 rgba(0, 0, 0, .18);
    --font-sans: Tahoma, Verdana, "Segoe UI", Geneva, "DejaVu Sans", Arial, Helvetica, sans-serif;
    --font-display: "Arial Black", "Arial Bold", Gadget, "Helvetica Neue", Arial, Helvetica, sans-serif;
    --font-ui: Arial, Helvetica, "Liberation Sans", sans-serif;
    --font-mono: "Lucida Console", Consolas, "Courier New", ui-monospace, monospace;
}

html { font-size: 16px; }
body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink-800);
    display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); font-weight: 900; letter-spacing: 0; }
code { font-family: var(--font-mono); color: var(--accent); }
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border: 2px solid var(--accent); }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 0; box-shadow: 0 0 0 5px #1a1a1a; } /* yellow + near-black ring: visible on white, blue and grey */

/* ---------------------------------------------------------------- Header (2007 layout) */
.site-header { background: var(--legacy-factory-grey); }

/* Top bar: dark blue strip with the date (left) and sign-in links (right). 2007: 42px, Arial 12px bold white. */
.topbar { background: var(--legacy-factory-blue); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: .875rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; }
.topbar-links { list-style: none; display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; }
.topbar a, .topbar-button { color: #fff; text-decoration: none; font: inherit; }
.topbar a:hover, .topbar a.active, .topbar-button:hover { color: #fff; text-decoration: underline; }
.topbar-button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Menu bar: bevelled grey tile, Arial Black menu items aligned right; selected tab = blue with white text. */
.menubar {
    background: var(--legacy-factory-grey) url("../img/legacy/menu_tile.gif") left top repeat-x; /* flat 1-column tile: constant band height at any width */
    min-height: 31px; padding: 6px 0 0;
}
.menubar .navbar-nav { gap: 2px; }
.menubar .nav-link {
    /* Same family as the home "defined..." heading (1.05rem), one step smaller. */
    font-family: var(--font-display); font-weight: 900; font-size: 1rem; letter-spacing: 0;
    color: var(--menu-text); padding: .15rem .7rem !important; line-height: 1.2;
}
.menubar .nav-link:hover, .menubar .nav-link:focus { color: #fff; background: var(--legacy-factory-blue); text-decoration: none; }
/* Selected tab: light steel highlight with navy text (#012238 on #DCE6EE is ~14:1); hover stays solid navy. */
.menubar .nav-link.active { color: var(--menu-text); background: #DCE6EE; box-shadow: inset 0 -3px 0 var(--legacy-factory-blue); }
.menubar .nav-link.active:hover, .menubar .nav-link.active:focus { color: #fff; background: var(--legacy-factory-blue); box-shadow: none; }
.menubar .navbar-toggler { border-color: rgba(0, 0, 0, .35); padding: .15rem .5rem; margin: 0 0 4px; }
.lock-hint { margin-left: .2rem; vertical-align: -1px; }

/* Banner: the steel-blue gear graphic with the logo on the left. 2007: 111px. */
.banner {
    background: var(--legacy-steel-blue) url("../img/legacy/header_bg.gif") center top no-repeat;
    min-height: 111px; display: flex; align-items: center;
}
.brand { display: inline-flex; align-items: center; gap: .9rem; color: var(--legacy-factory-blue); text-decoration: none; }
.brand:hover { color: var(--legacy-factory-blue); text-decoration: none; }
/* Company name as real text beside the gear mark: navy, bold italic like the 2007 logo lettering. A soft light halo
   keeps it readable where it crosses the darker gears in header_bg.gif. #034573-ish on #A0B8CA-ish is > 4.5:1. */
.brand-name { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-style: italic; font-size: 1.85rem;
    line-height: 1.1; color: var(--legacy-factory-blue); letter-spacing: .005em;
    text-shadow: 0 0 6px rgba(220, 230, 238, .95), 0 0 2px rgba(220, 230, 238, .95); }

/* Band: grey/blue bevel strip under the banner (image1.gif). 2007: 48px. */
.band {
    height: 48px;
    background: var(--legacy-factory-grey) url("../img/legacy/band_tile.gif") left top repeat-x; /* flat tile, no stepped edges */
    border-bottom: 2px solid var(--legacy-rule);
}

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: var(--radius); }
.btn-accent {
    background: var(--legacy-factory-blue); color: #fff; border: 1px solid #022f4f;
    font-family: var(--font-ui); font-weight: 700; padding: .45rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-accent:hover, .btn-accent:focus { color: #fff; background: var(--accent-hover); text-decoration: none; }
.btn-outline-light-ghost { color: var(--legacy-factory-blue); background: #fff; border: 1px solid var(--legacy-factory-blue); font-family: var(--font-ui); font-weight: 700; }
.btn-outline-light-ghost:hover { color: #fff; background: var(--legacy-factory-blue); text-decoration: none; }
.btn-soft { background: var(--legacy-panel); color: var(--ink-800); border: 1px solid #b9b7b3; font-family: var(--font-ui); font-weight: 700; }
.btn-soft:hover { background: #dedcd8; color: var(--ink-900); text-decoration: none; }

/* ---------------------------------------------------------------- Hero / page titles
   The 2007 content area was white with "Arial Black" module titles; titles get a factory-blue rule. */
.hero { position: relative; background: #fff; color: var(--ink-800); padding: 2.75rem 0 2.25rem; border-bottom: 1px solid var(--line); }
.hero h1 { color: var(--ink-900); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; }
.hero .lead { color: var(--ink-700); font-size: 1.1rem; max-width: 40rem; }
.hero-photo { max-width: 100%; height: auto; }
.gradient-text { color: var(--legacy-factory-blue); }
.eyebrow {
    display: inline-block; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--legacy-factory-blue); padding: .2rem .6rem;
}
.page-hero { background: #fff; color: var(--ink-700); padding: 2.25rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.page-hero h1 { color: var(--legacy-factory-blue); font-size: clamp(1.6rem, 3.5vw, 2.3rem); padding-bottom: .4rem; border-bottom: 3px solid var(--legacy-factory-blue); display: table; } /* block-level, rule as wide as the text */
.page-hero .lead { color: var(--ink-700); max-width: 44rem; }
.back-link { color: var(--link); font-family: var(--font-ui); font-weight: 700; }
.back-link:hover { color: var(--link-hover); }

/* ---------------------------------------------------------------- Sections & cards ("modules") */
.section { padding: 3rem 0; }
.section-tight { padding: 2rem 0; }
.section-title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: .5rem; color: var(--ink-900); }
.section-sub { color: var(--ink-500); max-width: 42rem; }
.card-soft {
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--legacy-factory-blue);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem; height: 100%;
}
/* Stacked sidebar cards must size to their content: height:100% made the first card as tall as the row, pushing
   the next card out of the column and under the footer. */
.project-sidebar .card-soft { height: auto; }
a.card-soft { color: inherit; display: block; text-decoration: none; }
a.card-soft:hover, .card-soft.hoverable:hover { box-shadow: var(--shadow-md); border-color: var(--legacy-steel-mid); color: inherit; }
.card-soft h3 { font-size: 1.05rem; margin-bottom: .4rem; color: var(--ink-900); }
.card-soft p { color: var(--ink-500); margin-bottom: 0; }
.icon-pill {
    width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 1rem;
    background: var(--legacy-steel-blue); color: #012238; font-family: var(--font-display); font-weight: 900;
    border: 1px solid var(--legacy-steel-mid);
}
.prose { max-width: 46rem; font-size: 1rem; line-height: 1.7; color: var(--ink-800); }
.prose h2 { margin-top: 2rem; font-size: 1.35rem; color: var(--legacy-factory-blue); }
.prose h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.prose blockquote { border-left: 4px solid var(--legacy-factory-blue); background: #eef3f7; padding: .75rem 1rem; color: var(--ink-800); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose pre { background: #1f1f1f; color: #f0f0f0; padding: 1rem; border-radius: var(--radius); }
.prose pre code { color: inherit; }

.placeholder-note { border: 1px dashed #b45309; background: #fff8eb; color: #78350f; padding: .7rem 1rem; font-size: .9rem; }

/* ---------------------------------------------------------------- Tags / badges */
.tag {
    display: inline-block; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; padding: .15rem .55rem;
    background: #e3ebf1; color: #023459; border: 1px solid var(--legacy-steel-blue); margin: 0 .25rem .25rem 0;
}
.tag-sample { background: #fff4e0; color: #7c4a03; border-color: #f2c98a; }
.status { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-idea { background: #ececeb; color: #3f3f3e; }
.status-active { background: #e8f5ec; color: var(--success); }
.status-paused { background: #fff4e0; color: var(--warning); }
.status-shipped { background: #e3ebf1; color: var(--legacy-factory-blue); }
.stack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.stack-list li { font-family: var(--font-mono); font-size: .76rem; background: var(--legacy-panel); color: var(--ink-900); border: 1px solid #c8c6c2; padding: .2rem .5rem; }

/* ---------------------------------------------------------------- Timeline (Journey) */
.timeline { position: relative; list-style: none; padding: 0 0 0 1.75rem; margin: 0; max-width: 52rem; }
.timeline::before { content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--legacy-factory-grey); }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
    content: ""; position: absolute; left: -1.75rem; top: 1.75rem; width: 14px; height: 14px;
    background: var(--surface); border: 3px solid var(--legacy-factory-blue);
}
.timeline-date { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-500); }

/* ---------------------------------------------------------------- Forms */
.form-control, .form-select { border-radius: var(--radius); border-color: #9fa9b1; padding: .55rem .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--legacy-factory-blue); box-shadow: 0 0 0 .2rem rgba(3, 69, 115, .2); }
.form-label { font-family: var(--font-ui); font-weight: 700; color: var(--ink-800); }
.field-validation-error, .validation-summary-errors { color: #b00000; font-size: .875rem; }
.input-validation-error { border-color: #b00000; }
.auth-card { max-width: 440px; margin: 0 auto; }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }
.link-list .label { font-weight: 700; color: var(--ink-800); flex-shrink: 0; text-align: left; }
.link-list a, .link-list span { overflow-wrap: anywhere; text-align: right; }

/* ---------------------------------------------------------------- Admin */
.admin-nav .nav-link { border-radius: var(--radius); color: var(--link); font-family: var(--font-ui); font-weight: 700; }
.admin-nav .nav-link.active { background: var(--legacy-factory-blue); color: #fff; }
.admin-table th { font-family: var(--font-ui); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); white-space: nowrap; }
.admin-table td, .admin-table th { padding: .7rem 1rem; }
.temp-password input { letter-spacing: .05em; }

/* Pagination (download log) in the 2007 palette */
.pagination .page-link { color: var(--link); border-color: #b9c6d0; font-family: var(--font-ui); font-weight: 700; border-radius: 0; }
.pagination .page-link:hover { color: #fff; background: var(--legacy-factory-blue); border-color: var(--legacy-factory-blue); text-decoration: none; }
.pagination .page-item.disabled .page-link { color: #555; background: var(--legacy-panel); border-color: #c8c6c2; }
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { border-radius: var(--radius); }

/* ---------------------------------------------------------------- Project launch / downloads */
.project-indicators { display: flex; flex-wrap: wrap; gap: .4rem; }
.indicator { font-family: var(--font-ui); font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border: 1px solid var(--line); }
.indicator-launch { background: #e8f5ec; color: #14532d; border-color: #a7d8b5; }
.indicator-download { background: #e3ebf1; color: #023459; border-color: var(--legacy-steel-blue); }
.downloads-table th { font-family: var(--font-ui); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.downloads-table td, .downloads-table th { padding: .7rem 1rem; }
.downloads-table code.sha { font-size: .8rem; }

/* ---------------------------------------------------------------- Footer
   2007: a grey strip (footer_tile.gif) with the copyright on the left, Terms / Privacy on the right and the bevel
   graphic (footer_image.gif) in the corner. The link columns above it use the darker bevel grey for contrast. */
.site-footer { background: var(--footer-bg); color: #f2f2f1; margin-top: 3rem; border-top: 2px solid var(--legacy-rule); }
.site-footer > .container { padding-top: 2.5rem; padding-bottom: 2rem; }
.site-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
.site-footer a:hover { color: #fff; text-decoration-color: #fff; }
.brand-footer { color: #fff; }
.brand-footer .brand-text { color: #fff; }
.footer-tagline { margin-top: .75rem; max-width: 26rem; }
.footer-heading { color: #fff; font-family: var(--font-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .4rem; }
.footer-bottom {
    background: var(--legacy-factory-grey) url("../img/legacy/footer_tile.gif") left top repeat-x;
    color: #111; font-family: var(--font-ui); font-weight: 700; font-size: .8rem;
}
.footer-bottom-inner {
    min-height: 35px; display: flex; align-items: center; padding-top: 4px; padding-right: 170px;
    background: url("../img/legacy/footer_image.gif") right 4px no-repeat;
}

/* ---------------------------------------------------------------- Responsive */
/* Narrow desktop/tablet (expanded menu, 768-991px): tighten spacing so all items stay on one line. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .menubar .nav-link { font-size: .95rem; padding: .15rem .5rem !important; }
}
@media (max-width: 767.98px) {
    .menubar { background-image: none; border-top: 1px solid var(--legacy-bevel-dark); padding: 4px 0; }
    .menubar .navbar-nav { padding: .5rem 0; }
    .menubar .nav-link { font-size: 1rem; min-height: 44px; display: flex; align-items: center; padding: .5rem .75rem !important; }
    .banner { min-height: 0; padding: .75rem 0; background-position: 30% top; }
    .brand { gap: .6rem; }
    .brand-name { font-size: 1.3rem; }
    .band { height: 16px; background-position: left bottom; }
    .hero { padding: 2rem 0 1.75rem; }
}
@media (max-width: 400px) {
    .brand-name { font-size: 1.1rem; }
}
@media (max-width: 575.98px) {
    .topbar-inner { min-height: 34px; }
    .topbar-date { display: none; }
    .topbar-links { margin-left: auto; }
    .footer-bottom-inner { padding-right: 0; background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- "defined..." module (2007 home page)
 * Mirrors the DNN FactoryGrey container on the 2007 home page: an Arial Black ("Head") title, then each term in bold
 * followed by its definition in italics. Rendered as a <dl>; stacks naturally on narrow screens. */
.legacy-module { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--legacy-factory-blue); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1rem 1.25rem 1.1rem; }
.legacy-module-head { font-family: var(--font-display); font-weight: normal; font-size: 1.05rem; color: #000; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--legacy-factory-grey); }
.definitions { margin: 0; }
.definition + .definition { margin-top: .6rem; }
.definitions dt { display: inline; font-weight: 700; color: var(--ink-900); }
.definitions dd { display: inline; margin: 0 0 0 .35rem; font-style: italic; color: var(--ink-700); }
.definition-sep { margin-left: .05em; }
@media (max-width: 575.98px) {
    .definitions dt, .definitions dd { display: block; }
    .definitions dd { margin: .1rem 0 0; }
}

/* ---------------------------------------------------------------- Animated logo (see _AnimatedLogo.cshtml)
 * The GIF keeps the layout box (size, 1px border, alt text). Once site.js adds .gears-ready, the vector SVG covers the
 * GIF's content box (inside the border) with an opaque background, so only the vector art is seen; the GIF stays
 * underneath for its alt text and layout. Without JS the GIF shows as before.
 * Reduced motion: the SVG still shows, it just doesn't move (site.js skips the animation). */
.brand-logo-wrap { display: inline-block; flex: none; line-height: 0; }
.brand-gears { display: block; width: 106px; height: auto; pointer-events: none; }
@media (max-width: 767.98px) { .brand-gears { width: 64px; } }
@media (max-width: 400px) { .brand-gears { width: 60px; } }

/* Contact form honeypot: off-screen, not display:none (some bots skip hidden fields). */
.contact-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Admin contact inbox */
.admin-badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .3em; border-radius: 9px;
  background: #c0392b; color: #fff; font-size: .75em; font-weight: bold; line-height: 1.5; text-align: center; vertical-align: middle; }
.contact-row-unread td { font-weight: bold; }
.contact-message-body { white-space: pre-wrap; word-break: break-word; font-family: inherit; background: #f7f9fb;
  border: 1px solid #c9d6e2; padding: 12px; margin: 0; }

/* Members agile coach chat (2007 grey/steel look) */
.chat-container { max-width: 820px; }
.chat-log { max-height: 60vh; overflow-y: auto; background: #f7f9fb; }
.chat-empty { color: var(--ink-500); margin: 0; }
.chat-msg { border: 1px solid #c9d2dc; padding: .5rem .75rem; margin-bottom: .6rem; background: #fff; }
.chat-user { border-left: 4px solid var(--legacy-steel-mid, #6b8bb0); margin-left: 2rem; }
.chat-assistant { border-left: 4px solid #8a8f96; margin-right: 2rem; background: linear-gradient(#fdfdfd, #eef1f4); }
.chat-who { font-weight: bold; font-size: .8rem; text-transform: uppercase; color: #4a5866; }
.chat-text { white-space: pre-wrap; word-break: break-word; }