/* Secure Send: page layout on top of 98.css + the shared looks in themes.css */
html, body { background: #008080; }
body { margin: 0; min-height: 100vh; padding: 40px 10px 50px; font-family: "Pixelated MS Sans Serif", Arial, sans-serif; font-size: 11px; box-sizing: border-box; }
.window { max-width: 420px; margin: 0 auto; }
.window.wide { max-width: 760px; }
.head { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.head b { display: block; }
.logo { flex: none; width: 32px; height: 32px; background: #000080; color: #fff; display: flex; align-items: center; justify-content: center;
  font: bold 13px "Times New Roman", serif; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
fieldset { margin-bottom: 8px; min-width: 0; }
body.send fieldset { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
.dropzone input[type=file] { width: 100%; min-width: 0; }
.est { display: grid; grid-template-columns: 76px 1fr; gap: 4px 8px; }
.details { gap: 6px 8px; }
.details b, .details span { word-break: break-word; }
.msg { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 10px; }
.msg svg { flex: none; }
.msg p { margin: 0 0 6px; }
.buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
form.inline { display: inline; margin: 0; }
.pwform { margin: 4px 0 0; }
.pwform label { display: block; margin: 8px 0 4px; }
.pwform input[type=text], .pwform input[type=email], .pwform input[type=password], .pwform textarea { width: 100%; box-sizing: border-box; }
.pwform textarea { resize: vertical; min-height: 48px; font: inherit; }
.otp { font-size: 1.6em !important; letter-spacing: .3em; text-align: center; font-family: "Courier New", monospace !important; height: auto !important; padding: 4px !important; }
.pwerr { min-height: 0; margin: 6px 0; color: #c00000; font-weight: bold; }
.pwerr:empty { display: none; }
.shake { animation: lfs-shake .4s; }
@keyframes lfs-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.formerr { padding: 6px 8px; border: 1px solid currentColor; }
.flash { padding: 6px 8px; margin: 0 0 8px; border: 1px solid currentColor; background: rgba(255,255,160,.35); }
.flash.warn { background: rgba(255,200,0,.25); }
.small { font-size: .92em; opacity: .85; margin: 6px 0; }
.note { white-space: pre-wrap; margin: 4px 0; }
.again { margin: 10px 0 0; }
.linkish { min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.hidden { display: none !important; }
.bad { color: #c00000; }
code, .secret { font-family: "Courier New", monospace; }
.secret { font-size: 1.15em; font-weight: bold; letter-spacing: .05em; word-break: break-all; }

/* sender pages */
.sendnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid rgba(128,128,128,.5); }
.sendnav a { font-weight: bold; color: inherit; }
.sendnav .who { margin-left: auto; opacity: .8; }
.tablewrap { overflow-x: auto; padding: 0 !important; margin: 0 0 8px; height: auto !important; }
table.drops { width: 100%; border-collapse: collapse; }
table.drops th, table.drops td { text-align: left; padding: 5px 6px; vertical-align: top; border-bottom: 1px solid rgba(128,128,128,.35); }
table.drops th { font-weight: bold; white-space: nowrap; }
table.drops td a { color: inherit; font-weight: bold; word-break: break-word; }
table.drops .sub { display: block; opacity: .7; font-size: .92em; margin-top: 2px; }
table.drops tr.off { opacity: .55; }
.pill { display: inline-block; padding: 1px 6px; border: 1px solid currentColor; border-radius: 8px; font-size: .92em; }
table.drops td:nth-child(2) { word-break: break-word; }
html[data-theme] body.send table.drops td, html[data-theme] body.send table.drops .pill { white-space: normal !important; }
/* sender pages need more room than the shared .window.wide (620px, sized for the main site's privacy page) */
html[data-theme] body.send .window.wide { max-width: 860px; }
.s-ready { color: #00701a; } .s-uploading { color: #8a6d00; }
.s-revoked, .s-used_up, .s-expired, .s-abandoned { opacity: .75; }
.opts { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
.opts label { margin: 0 !important; }
.opts input, .opts select { width: 100%; box-sizing: border-box; }
.dropzone { display: block !important; border: 2px dashed rgba(128,128,128,.8); padding: 18px 10px; text-align: center; cursor: pointer; margin: 4px 0 !important; }
.dropzone.over { background: rgba(0,0,128,.08); }
.dropzone input { display: block; margin: 8px auto 0; max-width: 100%; }
#filelabel { font-weight: bold; word-break: break-word; }
.linkrow { display: flex; gap: 6px; margin: 2px 0 6px; }
.linkrow input { flex: 1; min-width: 0; font-family: "Courier New", monospace; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 0 10px; padding: 5px 0; border-bottom: 1px dotted rgba(128,128,128,.5); }
.timeline li:last-child { border-bottom: 0; }
.timeline .t { grid-row: span 3; opacity: .8; white-space: nowrap; }
.timeline .e { font-weight: bold; }
.timeline .ip, .timeline .d { opacity: .75; font-size: .92em; word-break: break-word; }
.timeline .ev-download\.completed .e, .timeline li.ev-recipient\.verified .e { color: #00701a; }
.timeline li.ev-recipient\.email_wrong .e, .timeline li.ev-recipient\.code_wrong .e, .timeline li.ev-download\.interrupted .e { color: #a35a00; }
.qrwrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.qr { background: #fff; padding: 6px; image-rendering: pixelated; flex: none; }
#progress, #dlprog { margin: 8px 0; }
label.check { display: flex !important; align-items: center; gap: 6px; font-weight: bold; }
#pass { font-family: "Courier New", monospace; letter-spacing: .05em; }

.foot { text-align: center; color: #fff; margin: 8px 0 0; }
.foot a { color: inherit; }
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 28px; background: silver; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
  display: flex; align-items: center; gap: 3px; padding: 2px; z-index: 5; box-sizing: border-box; }
.taskbar button { min-width: 0; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; font-weight: bold; }
.taskbar .lf { width: 14px; height: 14px; background: #000080; color: #fff; font: bold 8px/14px "Times New Roman", serif; text-align: center; }
.task { width: 160px; height: 22px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  background: repeating-conic-gradient(silver 0 25%, #fff 0 50%) 0 0 / 2px 2px; font-weight: bold; }
.tray { margin-left: auto; height: 22px; padding: 0 8px; display: flex; align-items: center; gap: 6px; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; }

/* Cyberdelic: its stylesheet relabels every main button "Download" (made for the main site's download page).
   Here the real labels are kept, except the recipient's Download and the passphrase Unlock button. */
html[data-theme="cyber"] body.send button.default:not(#dl):not(#ppform #lockedbtn) { font-size: 15px; line-height: 1.2; }
html[data-theme="cyber"] body.send button.default:not(#dl):not(#ppform #lockedbtn)::after { content: none; }
html[data-theme="cyber"] body.send .linkrow button, html[data-theme="cyber"] body.send form.inline button { white-space: nowrap; }

/* dark looks: keep status colours readable */
html[data-theme=terminal] .s-ready, html[data-theme=cyber] .s-ready, html[data-theme=next] .s-ready { color: #5dff7a; }
html[data-theme=terminal] .timeline .e, html[data-theme=cyber] .timeline .e { color: inherit !important; }
html[data-theme=terminal] .bad, html[data-theme=cyber] .bad, html[data-theme=terminal] .pwerr { color: #ff6b6b; }

@media (max-width: 520px) {
  body { padding-top: 10px; }
  .task { display: none; }
  .sendnav .who { margin-left: 0; width: 100%; }
  .opts { grid-template-columns: 1fr; }
  .linkrow { flex-wrap: wrap; }
  .linkrow input { flex-basis: 100%; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline .t { grid-row: auto; }
  table.drops th:nth-child(n+4), table.drops td:nth-child(n+4) { display: none; }
}