/* PuffinRT web UI styles — extracted verbatim from web/index.html.
   Served at /app.css: by server.jl (@get "/app.css") locally and in Docker, and
   by Cloudflare Pages as a static file (Pages root dir is web/). */
  :root { --bg:#0f1620; --panel:#18222f; --line:#26344a; --txt:#dce6f2; --mut:#8aa0bd; --acc:#4fa3ff; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); }
  header { padding:14px 20px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; }
  header h1 { font-size:17px; margin:0; font-weight:600; }
  header .logo { height:52px; width:52px; object-fit:contain; align-self:center; background:#fff; border-radius:50%; padding:4px; box-sizing:border-box; }
  .swatch { display:flex; align-items:center; gap:11px; padding:2px 4px 9px; }
  .swatch .dot { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
  .swatch .cap { color:var(--mut); font-size:12px; line-height:1.35; }
  .swatch .cap b { color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums; }
  .swatch .sub2 { opacity:.7; font-size:11px; }
  header .sub { color:var(--mut); font-size:12px; }
  .wrap { display:grid; grid-template-columns:404px 1fr; gap:0; height:calc(100vh - 52px); }
  .controls { padding:16px; overflow-y:auto; border-right:1px solid var(--line); background:var(--panel); }
  .plots { padding:14px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px; }
  .card.full { grid-column:1 / -1; }
  /* Single "Initializing" overlay spanning the live-input grid (not per-card —
     hides the ~cold-start wait behind one message, cleared once, never re-shown). */
  .inputgrid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; grid-column:1 / -1; }
  .initov { position:absolute; inset:0; z-index:3; display:flex; flex-direction:row;
    align-items:center; justify-content:center; gap:6px; text-align:center; padding:18px;
    background:var(--bg); border:1px solid var(--line); border-radius:8px; white-space:nowrap; }
  .initov b { color:var(--txt); font-size:14px; font-weight:600; flex-shrink:0; }
  .initov b::after { content:"…"; animation:initdots 1.4s steps(4,end) infinite; }
  .initov span { color:var(--mut); font-size:12px; line-height:1.4; }
  @keyframes initdots { 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
  fieldset { border:1px solid var(--line); border-radius:8px; margin:0 0 14px; padding:10px 12px; }
  legend { color:var(--acc); font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:0 6px; }
  /* Sub-section heading inside a fieldset (e.g. Atmosphere within Geometry & atmosphere). */
  .subhead { color:var(--acc); font-size:12px; text-transform:uppercase; letter-spacing:.5px;
             margin:12px 0 8px; padding-top:10px; border-top:1px solid var(--line); }
  label { display:block; color:var(--mut); font-size:12px; margin:8px 0 2px; }
  input,select { width:100%; background:#0e1722; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:13px; }
  input.batchable { border-style:dashed; }
  input.batchable::placeholder { color:#4a5d78; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .seg { display:flex; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .seg button { flex:1; background:#0e1722; color:var(--mut); border:0; padding:7px; cursor:pointer; font-size:13px; }
  .seg button.on { background:var(--acc); color:#04101f; font-weight:600; }
  button.run { width:100%; background:var(--acc); color:#04101f; border:0; border-radius:7px; padding:11px; font-size:14px; font-weight:600; cursor:pointer; margin-top:4px; }
  button.run:disabled { opacity:.5; cursor:wait; }
  .ck { display:flex; align-items:center; gap:8px; margin-top:10px; }
  .ck input { width:auto; }
  .layer { border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:8px; position:relative; }
  .layer .rm { position:absolute; top:6px; right:6px; background:#3a2030; color:#ff9bb0; border:0; border-radius:4px; cursor:pointer; font-size:11px; padding:2px 6px; }
  .addbtn { width:100%; background:#13202e; color:var(--acc); border:1px dashed var(--line); border-radius:6px; padding:7px; cursor:pointer; }
  .meta { color:var(--mut); font-size:12px; margin-top:10px; min-height:18px; }
  .err { color:#ff8a8a; }
  h4 { margin:2px 0 4px 8px; color:var(--mut); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
  h4 + .row3 label { margin-top:0; }
  .dl { display:flex; gap:14px; margin-top:6px; }
  .dl a { color:var(--acc); font-size:12px; cursor:pointer; text-decoration:underline; }
  .hint { color:var(--mut); font-size:11px; margin:2px 0 0 2px; }
  header .ver { color:var(--acc); font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:5px; padding:1px 6px; margin-left:6px; }
  header .tag { color:var(--mut); font-size:11px; font-style:italic; }
  .fbbtn { margin-left:auto; background:#13202e; color:var(--acc); border:1px solid var(--line); border-radius:6px; padding:7px 12px; cursor:pointer; font-size:12px; align-self:center; }
  .fbbtn:hover { background:#1a2a3a; }
  .hbtn { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px; border-radius:50%; background:#13202e; color:var(--acc); border:1px solid var(--line); font-size:12px; font-weight:700; cursor:pointer; vertical-align:middle; }
  .hbtn:hover { background:var(--acc); color:#04101f; }
  /* Input-panel sup/sub read small at the base body font-size; bump them two
     units so exponents/subscripts (Chl^0.63, b_bp(550), …) stay legible in the
     control fieldsets. Graph text is Plotly-rendered and unaffected by this rule. */
  .controls sup, .controls sub { font-size: 1em; }
  .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:50; }
  .modal-bg.on { display:flex; }
  .modal { background:var(--panel); border:1px solid var(--line); border-radius:10px; max-width:540px; width:92%; max-height:84vh; overflow-y:auto; padding:20px 22px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
  .modal h3 { margin:0 0 10px; color:var(--acc); font-size:16px; }
  .modal h4 { margin:12px 0 2px 0; color:var(--txt); font-size:12px; text-transform:none; }
  .modal p { color:var(--txt); font-size:13px; margin:6px 0; }
  .modal .x { float:right; cursor:pointer; color:var(--mut); font-size:18px; line-height:1; border:0; background:none; }
  .modal textarea, .modal input, .modal select { width:100%; background:#0e1722; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:7px 8px; font-size:13px; margin-top:2px; }
  .modal textarea { min-height:90px; resize:vertical; font-family:inherit; }
  .modal label { color:var(--mut); font-size:12px; margin:10px 0 2px; display:block; }
  .modal .ok { width:100%; background:var(--acc); color:#04101f; border:0; border-radius:7px; padding:10px; font-size:14px; font-weight:600; cursor:pointer; margin-top:14px; }
  .modal .ok:disabled { opacity:.5; cursor:wait; }
  .modal .stat { font-size:12px; margin-top:8px; min-height:16px; }
  a { color:var(--txt); text-decoration:underline; }
  a:visited { color:var(--txt); }
  a:hover { color:var(--acc); }
  .sectiontitle { grid-column:1 / -1; display:flex; align-items:center; gap:10px;
    color:var(--mut); font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:.6px; padding-top:6px; margin-top:2px; border-top:1px solid var(--line); }
  .sectiontitle:first-child { border-top:0; padding-top:0; margin-top:0; }
  .atminputs { padding:6px 6px 4px; font-size:12px; color:var(--txt); }
  .atminputs .hd { font-weight:600; font-size:12px; margin-bottom:3px; }
  .atminputs .sub2 { color:var(--mut); font-size:11px; line-height:1.35; margin-bottom:6px; }
  .atmtab { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  .atmtab td { padding:2px 4px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .atmtab tr:last-child td { border-bottom:0; }
  .atmtab td:first-child { color:var(--mut); }
  .atmtab td.v { text-align:right; font-weight:600; white-space:nowrap; }
  .atmtab td:last-child { text-align:right; width:1%; white-space:nowrap; }
  .tg { display:inline-block; font-size:10px; font-weight:600; padding:1px 6px; border-radius:9px;
    text-transform:uppercase; letter-spacing:.3px; line-height:1.5; }
  .tg-ret { background:rgba(0,158,115,.18); color:#1FB98A; }
  .tg-asm { background:rgba(230,159,0,.18); color:#E69F00; }
  .tg-cmp { background:rgba(86,180,233,.18); color:#56B4E9; }
  .tg-usr { background:rgba(148,137,255,.18); color:#9489FF; }
  .atmlegend { margin-top:7px; color:var(--mut); font-size:10px; line-height:1.7; }
  /* "As seen by:" sensor selector above the Rrs graph. */
  .rsrbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
  .rsrbar label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.4px; }
  .rsrbar select { width:auto; min-width:190px; }
  .rsrbar .sub2 { color:var(--mut); font-size:10px; }
  .quizbtn { background:transparent; color:var(--acc); border:1px solid var(--acc); border-radius:8px; padding:6px 11px; font-size:12px; cursor:pointer; }
  .quizbtn:hover { background:rgba(79,163,255,.12); }
  #quizBox { position:fixed; top:84px; right:24px; width:346px; z-index:9000; background:var(--panel); border:1px solid var(--acc); border-radius:12px; box-shadow:0 14px 46px rgba(0,0,0,.55); display:none; }
  #quizBox.on { display:block; }
  #quizHead { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:move; user-select:none; }
  #quizHead b { font-size:13px; color:var(--txt); }
  #quizHead .qprog { margin-left:auto; color:var(--mut); font-size:11px; }
  #quizHead .qx { cursor:pointer; color:var(--mut); font-size:15px; line-height:1; padding:0 3px; }
  #quizHead .qx:hover { color:var(--txt); }
  #quizBody { padding:12px 14px; max-height:62vh; overflow-y:auto; font-size:13px; color:var(--txt); }
  #quizBody .qtopic { color:var(--acc); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
  #quizBody .qprompt { line-height:1.55; margin-bottom:12px; }
  .qchoice { display:block; width:100%; text-align:left; margin:0 0 8px; padding:9px 11px; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--txt); cursor:pointer; font-size:13px; }
  .qchoice:hover { border-color:var(--acc); }
  .qchoice:disabled { cursor:default; opacity:.65; }
  .qchoice.correct { border-color:#3ecb8f; background:rgba(62,203,143,.14); opacity:1; }
  .qchoice.wrong { border-color:#e0663e; background:rgba(224,102,62,.14); opacity:1; }
  .qnum { display:flex; gap:8px; margin-bottom:10px; }
  .qnum input { flex:1; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--txt); }
  .qnum button, .qhintbtn { background:var(--acc); border:none; color:#04121f; border-radius:8px; padding:8px 13px; font-size:12px; font-weight:600; cursor:pointer; }
  #quizFb { font-size:12px; line-height:1.5; margin:6px 0; }
  #quizFb.ok { color:#5fd6a0; } #quizFb.no { color:#f0996e; } #quizFb.hint { color:var(--mut); }
  .qbtns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
  .qbtns button { background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--txt); padding:7px 11px; font-size:12px; cursor:pointer; }
  .qbtns button:hover { border-color:var(--acc); }
  .qbtns button:disabled { opacity:.4; cursor:default; }
  .qbar { height:4px; background:var(--bg); border-radius:2px; margin-top:12px; overflow:hidden; }
  .qbar > div { height:100%; background:var(--acc); width:0; transition:width .3s; }
  .quiz-hl { animation:quizpulse 1.1s ease-in-out 3; border-radius:6px; }
  @keyframes quizpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(79,163,255,0);} 50%{ box-shadow:0 0 0 4px rgba(79,163,255,.65);} }