/* "Silokki terminal" theme for the web store: the look of silokki.fi.
   Dark screen, phosphor green, monospace, dashed rules, a blinking block cursor.
   Loaded after shop.css and only overrides it. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root[data-theme="terminal"] {
  --paper: #1a1a1a;
  --sheet: #1d1f1d;
  --ink: #30be2b;          /* body text, as on silokki.fi */
  --ink-2: #2aa626;
  --ink-3: #279522;
  --bright: #33ff10;       /* cursor, highlights */
  --logo: #75d321;         /* the logo green */
  --line: #2a5527;
  --frame: #30be2b;
  --accent: #33ff10;
  --on-accent: #111311;
  --ok: #33ff10;
  --ok-soft: #16300f;
  --warn: #e8c547;
  --warn-soft: #2e2a12;
  --err: #ff6b5e;
  --err-soft: #361a17;
  --head: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --body: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
/* one brand colour: product colours from the admin panel are not used here */
[data-theme="terminal"] [class*="pc-"] { --accent: #33ff10; }

[data-theme="terminal"] body { font-size: 15px; line-height: 1.6; background: var(--paper); }
[data-theme="terminal"] ::selection { background: var(--ink); color: var(--paper); }
[data-theme="terminal"] a { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
[data-theme="terminal"] a:hover { color: var(--bright); }
[data-theme="terminal"] :focus-visible { outline: 1px dashed var(--bright); outline-offset: 3px; }

/* ---- header: name with block cursor + tagline left, menu stacked right */
[data-theme="terminal"] .top { background: transparent; border-bottom: 1px dashed var(--ink); }
[data-theme="terminal"] .top-in { max-width: none; padding: 18px 30px; align-items: flex-start; }
[data-theme="terminal"] .brand { padding: 22px 0 0; gap: 18px; }
[data-theme="terminal"] .mark { font: 700 19px/1 var(--head); letter-spacing: .03em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
[data-theme="terminal"] .mark-cursor { display: inline-block; width: 8px; height: 17px; background: var(--bright);
  animation: blink 1.06s steps(1) infinite; }
[data-theme="terminal"] .mark-tag { font-size: 15px; color: var(--ink); }
[data-theme="terminal"] .top-nav { flex-direction: column; align-items: flex-end; gap: 0; }
[data-theme="terminal"] .top-nav a { text-transform: uppercase; color: var(--ink); padding: 1px 0; font-size: 17px;
  letter-spacing: .02em; border: 0; font-weight: 400; }
[data-theme="terminal"] .top-nav a:hover { color: var(--bright); }
[data-theme="terminal"] .top-nav a.on { color: var(--bright); border: 0; }
[data-theme="terminal"] .top-nav a.on::before { content: "> "; }

/* ---- front page: prompt line, cursor, big logo */
[data-theme="terminal"] .hero-logo { margin: 0 0 34px; gap: 30px; }
[data-theme="terminal"] .hero-logo .logo { width: 150px; }
[data-theme="terminal"] .hero-logo .prompt { display: block; margin: 0 0 10px; color: var(--ink-3); font-size: 14px; }
[data-theme="terminal"] .hero .cursor { display: inline-block; width: 10px; height: 20px; margin-left: 6px; background: var(--bright);
  vertical-align: -3px; animation: blink 1.06s steps(1) infinite; }
[data-theme="terminal"] .hero-logo h1 { font-size: clamp(16px, 2.2vw, 20px); font-weight: 400; line-height: 1.6;
  color: var(--ink); max-width: 60ch; margin: 0; }
[data-theme="terminal"] .hero-logo h1::before { content: "> "; color: var(--bright); }
[data-theme="terminal"] .top-nav a.home-site { color: var(--ink-3); margin-bottom: 6px; font-size: 15px; }
[data-theme="terminal"] .top-nav a.home-site:hover { color: var(--bright); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="terminal"] .cursor, [data-theme="terminal"] .mark-cursor { animation: none; }
}

/* ---- type */
[data-theme="terminal"] h1, [data-theme="terminal"] h2, [data-theme="terminal"] .tb-name,
[data-theme="terminal"] .plan-name, [data-theme="terminal"] .page-title { font-weight: 700; letter-spacing: 0; color: var(--bright); }
[data-theme="terminal"] .page-title { font-size: clamp(24px, 3.4vw, 32px); }
[data-theme="terminal"] .page-title::before, [data-theme="terminal"] h2.sec::before { content: "# "; color: var(--ink-3); }
[data-theme="terminal"] h2.sec { font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
[data-theme="terminal"] .lead { color: var(--ink); font-size: 16px; }
[data-theme="terminal"] .prose li { border-top: 1px dashed var(--line); padding-left: 24px; }
[data-theme="terminal"] .prose li:last-child { border-bottom: 1px dashed var(--line); }
[data-theme="terminal"] .prose li::before { content: ">"; background: none; width: auto; height: auto; top: 7px; left: 2px; color: var(--bright); }
[data-theme="terminal"] .crumb { text-transform: uppercase; font-size: 13px; letter-spacing: .03em; }
[data-theme="terminal"] .fine { color: var(--ink-3); }

/* ---- boxes: dashed frames, no fills */
[data-theme="terminal"] .tb, [data-theme="terminal"] .table-wrap, [data-theme="terminal"] .plans,
[data-theme="terminal"] .seg, [data-theme="terminal"] .product-img { background: transparent; border: 1px dashed var(--frame); }
[data-theme="terminal"] .tb-row, [data-theme="terminal"] .tb-foot, [data-theme="terminal"] .devices,
[data-theme="terminal"] .sum .sum-total, [data-theme="terminal"] .plan-row, [data-theme="terminal"] .sum dt,
[data-theme="terminal"] .sum dd, [data-theme="terminal"] .t td { border-top-style: dashed; }
[data-theme="terminal"] .tb-row, [data-theme="terminal"] .tb-foot, [data-theme="terminal"] .devices,
[data-theme="terminal"] .sum .sum-total { border-top-color: var(--frame); border-top-width: 1px; }
[data-theme="terminal"] .tb-head { border-bottom: 1px dashed var(--frame); }
[data-theme="terminal"] .tb-cell, [data-theme="terminal"] .plan-opt, [data-theme="terminal"] .seg label + label { border-left-style: dashed; }
[data-theme="terminal"] .tb-main { border-left: 0; }
[data-theme="terminal"] .tb-name { font-size: 24px; }
[data-theme="terminal"] .tb-name::before { content: "> "; color: var(--ink-3); }
[data-theme="terminal"] .tb-head { text-transform: uppercase; font-size: 14px; letter-spacing: .05em; color: var(--ink); }
[data-theme="terminal"] .tb-l { text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; }
[data-theme="terminal"] .tb-v { color: var(--bright); }
[data-theme="terminal"] .tb-go { background: transparent; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; border-left: 1px dashed var(--frame); }
[data-theme="terminal"] .tb-product:hover { border-color: var(--bright); }
[data-theme="terminal"] .tb-product:hover .tb-go { background: var(--bright); color: var(--on-accent); }
[data-theme="terminal"] .tb-product:hover .tb-name { text-decoration: none; }
[data-theme="terminal"] .tb-product:hover .tb-name::before { color: var(--bright); }
[data-theme="terminal"] .product-name { border-left: 0; margin-left: 0; padding-left: 0; }
[data-theme="terminal"] .product-name::before { content: "> "; color: var(--ink-3); }
[data-theme="terminal"] .plan-price b { color: var(--bright); }

/* ---- buttons: bracketed text, invert on hover */
[data-theme="terminal"] .btn { background: transparent; color: var(--bright); border: 1px solid var(--bright);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 14px; }
[data-theme="terminal"] .btn::before { content: "[ "; }
[data-theme="terminal"] .btn::after { content: " ]"; }
[data-theme="terminal"] .btn:hover { background: var(--bright); color: var(--on-accent); border-color: var(--bright); }
[data-theme="terminal"] .btn-ghost { color: var(--ink); border-color: var(--ink); }
[data-theme="terminal"] .btn-ghost:hover { background: var(--ink); color: var(--on-accent); }
[data-theme="terminal"] .copy { background: transparent; border: 1px dashed var(--ink); color: var(--ink); font-family: var(--mono); text-transform: uppercase; }
[data-theme="terminal"] .copy:hover { color: var(--bright); border-color: var(--bright); }

/* ---- forms */
[data-theme="terminal"] input[type=text], [data-theme="terminal"] input[type=email], [data-theme="terminal"] input[type=tel],
[data-theme="terminal"] input[type=number], [data-theme="terminal"] textarea {
  background: #141514; color: var(--bright); border: 1px solid var(--line); caret-color: var(--bright); font-size: 15px; }
[data-theme="terminal"] input::placeholder, [data-theme="terminal"] textarea::placeholder { color: #2c6a28; }
[data-theme="terminal"] input:focus, [data-theme="terminal"] textarea:focus { border-color: var(--bright); box-shadow: none; }
[data-theme="terminal"] legend { color: var(--bright); text-transform: uppercase; font-size: 16px; letter-spacing: .04em; }
[data-theme="terminal"] .step { border: 1px dashed var(--ink); color: var(--ink); font-size: 14px; }
[data-theme="terminal"] .field label { color: var(--ink); font-weight: 400; text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; }
[data-theme="terminal"] .plan-opt-body { border-top: 3px solid transparent; }
[data-theme="terminal"] .plan-opt input:checked + .plan-opt-body { background: #16240f; border-top-color: var(--bright); }
[data-theme="terminal"] .plan-opt input:checked + .plan-opt-body .plan-name::before { content: "> "; }
[data-theme="terminal"] .plan-opt-price { color: var(--bright); }
[data-theme="terminal"] .sum dd { color: var(--bright); }
[data-theme="terminal"] .sum .sum-total { color: var(--bright); }
[data-theme="terminal"] .check, [data-theme="terminal"] .seg label { color: var(--ink); }

/* ---- status and tables */
[data-theme="terminal"] .pill { background: transparent !important; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; border-style: dashed; }
[data-theme="terminal"] .t th { text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; border-bottom: 1px dashed var(--frame); }
[data-theme="terminal"] .flash { background: transparent; border: 1px dashed; border-left-width: 4px; border-left-style: solid; }
[data-theme="terminal"] .flash.ok { color: var(--bright); background: var(--ok-soft); }
[data-theme="terminal"] .flash.error { color: var(--err); background: var(--err-soft); }
[data-theme="terminal"] .err { color: var(--err); }
[data-theme="terminal"] .err::before { content: "! "; }

/* ---- footer: company left, links right like silokki.fi */
[data-theme="terminal"] .foot { background: transparent; border-top: 1px dashed var(--ink); color: var(--ink); font-size: 14px; }
[data-theme="terminal"] .foot-in { max-width: none; padding: 26px 30px 36px; }
[data-theme="terminal"] .foot b { color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
[data-theme="terminal"] .foot-links { align-items: flex-end; gap: 10px; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 700px) {
  [data-theme="terminal"] .top-in { padding: 14px 16px; }
  [data-theme="terminal"] .brand { padding-top: 6px; gap: 10px; }
  [data-theme="terminal"] .mark-tag { font-size: 13px; }
  [data-theme="terminal"] .top-nav a { font-size: 14px; }
  [data-theme="terminal"] .foot-in { padding: 22px 16px 30px; }
  [data-theme="terminal"] .foot-links { align-items: flex-start; }
  [data-theme="terminal"] .hero-logo { margin-top: 0; gap: 16px; align-items: flex-start; }
  [data-theme="terminal"] .hero-logo .logo { width: 92px; }
  [data-theme="terminal"] .hero-logo h1 { font-size: 15px; }
  [data-theme="terminal"] .top-nav a.home-site { font-size: 13px; }
  [data-theme="terminal"] .plan-opt { border-top-style: dashed; }
  [data-theme="terminal"] .tb-cell { border-top: 0 dashed var(--line); }
  [data-theme="terminal"] .tb-row-4 .tb-cell:nth-child(4) { border-top-width: 1px; }
  [data-theme="terminal"] .plan-opt-body { border-top: 0; border-left: 3px solid transparent; }
  [data-theme="terminal"] .plan-opt input:checked + .plan-opt-body { border-left-color: var(--bright); }
  [data-theme="terminal"] .tb-key { border-bottom-style: dashed; }
  [data-theme="terminal"] .tb-go { border-top: 1px dashed var(--frame); border-left: 0; }
}