/* File: /css/ss-page.css */
/* SafeShare Page Styles — Master-Flow strict, Zero inline */
/* Version: v2026-02-05-14 */

:root{
  --bg-0:#050914;
  --bg-1:#0a1224;
  --card:rgba(255,255,255,.045);
  --card-strong:rgba(255,255,255,.06);
  --text:#eaf2ff;
  --muted:#b8c4d9;
  --muted2:#99a8c2;
  --border:rgba(255,255,255,.14);
  --accent:#2fe3b7;
  --accent-2:#22c7a0;
  --warn:#f4c46b;
  --warn-bg:rgba(244,196,107,.12);
  --ok-bg:rgba(47,227,183,.14);
  --shadow:0 10px 30px rgba(0,0,0,.30);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1100px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg-0:#f4f8ff;
    --bg-1:#eef4ff;
    --card:rgba(255,255,255,.82);
    --card-strong:rgba(255,255,255,.92);
    --text:#0f172a;
    --muted:#334155;
    --muted2:#475569;
    --border:rgba(15,23,42,.14);
    --ok-bg:rgba(15,118,110,.10);
    --warn-bg:rgba(161,98,7,.11);
    --shadow:0 10px 24px rgba(2,6,23,.10);
  }
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(47,227,183,.10), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(56,189,248,.10), transparent 55%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  line-height:1.45;
}

/* Layout */
.ss-main{
  width:min(var(--maxw), calc(100% - 24px));
  margin:18px auto 56px;
}

.ss-section{ margin:0 0 16px; }

.ss-card{
  background:linear-gradient(180deg,var(--card),rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  min-width:0;
}

.ss-card--inner{
  background:linear-gradient(180deg,var(--card-strong),rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  min-width:0;
}

.ss-hero{ padding:26px; }

/* Typography */
h1,h2,h3{
  margin:0 0 10px;
  line-height:1.15;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(30px,4.8vw,62px); }
h2{ font-size:clamp(24px,3.2vw,40px); }
h3{ font-size:clamp(20px,2.2vw,28px); }

p,li{ color:var(--text); font-size:clamp(16px,1.5vw,23px); margin:0 0 10px; }
ul,ol{ margin:0; padding-left:20px; }
li{ margin-bottom:6px; }

.ss-hero-kicker{
  color:var(--muted);
  font-size:clamp(18px,1.9vw,28px);
  font-weight:700;
}

.ss-muted{ color:var(--muted2); }
.ss-small{ font-size:14px; color:var(--muted2); }

/* Grids / stacks */
.ss-grid{
  display:grid;
  gap:12px;
  min-width:0;
}
.ss-grid > *{ min-width:0; }

.ss-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ss-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.ss-stack{
  display:grid;
  gap:12px;
  min-width:0;
}

/* Buttons / actions */
.ss-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.ss-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.01em;
}

.ss-btn:hover{ background:rgba(255,255,255,.08); }

.ss-btn--primary{
  border-color:rgba(47,227,183,.5);
  background:rgba(47,227,183,.16);
}

.ss-btn--primary:hover{
  background:rgba(47,227,183,.24);
}

.ss-btn--ghost{
  background:transparent;
}

/* Notes */
.ss-note{
  border:1px solid rgba(47,227,183,.5);
  background:var(--ok-bg);
  border-radius:16px;
  padding:12px 14px;
}

.ss-warn{
  border:1px solid rgba(244,196,107,.45);
  background:var(--warn-bg);
  border-radius:16px;
  padding:12px 14px;
}

/* Code / chips / mono */
code{
  display:inline-block;
  padding:.12em .45em;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.92em;

  /* long-token safety */
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-mono,
.ss-monoBlock,
.ss-mono code,
.ss-monoBlock code,
pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.01em;
  min-width:0;
}

.ss-mono{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-monoBlock{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:12px 14px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

/* ---------- Hero media (final) ---------- */
.ss-heroMedia{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,.16));
  background: rgba(0,0,0,.12);
}

.ss-heroMedia img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;      /* desktop/tablet */
  object-fit: cover;
  object-position: center;
}

@media (max-width: 980px){
  .ss-heroMedia img{
    max-height: 420px;
  }
}

@media (max-width: 760px){
  .ss-heroMedia img{
    max-height: 320px;    /* mobile */
  }
}

@media (prefers-color-scheme: light){
  .ss-heroMedia{
    background: rgba(17,24,39,.03);
  }
}

/* Utilities */
.ss-mt-6{ margin-top:6px; }
.ss-mt-8{ margin-top:8px; }
.ss-mt-10{ margin-top:10px; }
.ss-mt-12{ margin-top:12px; }
.ss-mt-14{ margin-top:14px; }
.ss-mt-16{ margin-top:16px; }

/* Responsive */
@media (max-width:980px){
  .ss-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .ss-main{ width:calc(100% - 16px); margin-top:14px; }
  .ss-card{ padding:16px; border-radius:16px; }
  .ss-card--inner{ padding:14px; border-radius:14px; }
  .ss-hero{ padding:18px; }
  .ss-grid--2,.ss-grid--3{ grid-template-columns:1fr; }
  .ss-btn{ width:100%; }
  .ss-actions{ align-items:stretch; }
}
.ss-grid > *{ min-width:0; }

.ss-mono,
.ss-monoBlock,
.ss-mono code,
.ss-monoBlock code,
code,
pre{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-mono,
.ss-monoBlock,
pre{
  white-space:pre-wrap;
}
/* ===== SafeShare App field layout fix ===== */
.ss-appField{
  display: block;
  width: 100%;
}

.ss-appField > textarea{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  float: none !important;
  clear: both !important;
  position: static !important;

  min-width: 0 !important;
  margin: 0 !important;

  line-height: 1.45;
  font-size: 16px; /* iOS zoom prevention */
  padding: 14px;
  border-radius: 12px;
  resize: vertical;
}

.ss-plan .ss-note{
  line-height: 1.45;
}
.ss-plan .ss-note strong{
  font-weight: 700;
}

#urlInput{ min-height: 220px !important; }
#urlOutput{ min-height: 170px !important; }

#urlInput,
#urlOutput{
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
}
/* =========================================================
   SafeShare App – Mode Switch (standard/strict)
   Drop-in block for /css/ss-page.css
   ========================================================= */

/* Container */
.ss-mode{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 14px;
  background: var(--card, rgba(255,255,255,.04));
}

/* Legend / label */
.ss-mode > .ss-label,
.ss-mode > legend{
  display: block;
  margin: 0 0 10px 0;
  padding: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text, rgba(255,255,255,.92));
}

/* Row/option */
.ss-radio{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border-radius: 10px;
  line-height: 1.35;
  color: var(--text, rgba(255,255,255,.92));
  cursor: pointer;
  user-select: none;
}

/* spacing between options */
.ss-radio + .ss-radio{
  margin-top: 6px;
}

/* hover/focus surface */
.ss-radio:hover{
  background: rgba(255,255,255,.05);
}
.ss-radio:focus-within{
  outline: 2px solid rgba(47,227,183,.45);
  outline-offset: 2px;
}

/* Force native radio visible (protect against global resets) */
.ss-radio input[type="radio"]{
  -webkit-appearance: radio !important;
  appearance: radio !important;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  position: static !important;
  opacity: 1 !important;
  clip: auto !important;
  pointer-events: auto;
  accent-color: var(--mint, #2fe3b7);
}

/* text */
.ss-radio > span{
  display: inline-block;
  font-size: .95rem;
  color: var(--text, rgba(255,255,255,.92));
}

/* selected option subtle highlight */
.ss-radio:has(input[type="radio"]:checked){
  background: rgba(47,227,183,.10);
  border: 1px solid rgba(47,227,183,.28);
}

/* fallback if :has is unsupported */
@supports not selector(:has(*)){
  .ss-radio input[type="radio"]:checked + span{
    font-weight: 700;
  }
}

/* Mobile tuning */
@media (max-width: 640px){
  .ss-mode{
    padding: 10px;
    border-radius: 12px;
  }
  .ss-radio{
    padding: 9px 10px;
  }
  .ss-radio > span{
    font-size: .93rem;
  }
}