/* AKC BlobDrive live demo: a simulation of the Windows app and File Explorer, in the Andy Kemp copper look
   (the same tokens as the AppDeploy and Win11 Image Prep demos). */
@font-face { font-family: Inter; src: url(/fonts/Inter-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #efe8e1;
  --win: #ffffff;
  --soft: #f7f3ef;
  --raised: #f4ede6;
  --text: #302923;
  --heading: #201a16;
  --muted: #625850;
  --border: #75401f30;
  --border-strong: #75401f6b;
  --copper: #8a4e2e;
  --copper-dark: #60351f;
  --ok: #2f6b3a;
  --ok-bg: #e7f2e8;
  --warn: #8a5a00;
  --warn-bg: #fdf3dc;
  --sky: #2b6cb0;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 Inter, "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--bg); display: flex; flex-direction: column; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
[hidden] { display: none !important; }

.demo-banner { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: #201a16; color: #fff; font-size: 13px; text-align: center; }
.demo-banner a { color: #f2c4a3; }
.demo-banner button { background: none; border: 1px solid #f2c4a399; color: #f2c4a3; border-radius: 6px; padding: 3px 10px; cursor: pointer; }

.desk { flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 18px 28px; max-width: 1640px; width: 100%; margin: 0 auto; }
@media (max-width: 1180px) { .desk { grid-template-columns: 1fr; } }

.window { background: var(--win); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 24px 60px rgba(60, 30, 10, .16); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.titlebar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 0 0 12px; border-bottom: 1px solid var(--border); background: var(--soft); font-size: 13px; flex: none; }
.title { font-weight: 700; color: var(--heading); }
.ver { color: var(--muted); }
.app-icon { width: 18px; height: 18px; background: url("app-icon.png") center / contain no-repeat; flex: none; display: inline-block; }
.app-icon.big { width: 38px; height: 38px; }
.folder-icon { width: 18px; height: 14px; border-radius: 2px; background: linear-gradient(#f3c95c, #e0a92e); flex: none; }
.winctl { margin-left: auto; display: flex; height: 100%; }
.winctl i { width: 44px; display: block; position: relative; }
.winctl i::after { content: ""; position: absolute; left: 17px; top: 17px; width: 10px; height: 1px; background: var(--muted); }
.winctl i:nth-child(2)::after { top: 12px; height: 10px; background: none; border: 1px solid var(--muted); }
.winctl i:nth-child(3)::after { transform: rotate(45deg); }
.winctl i:nth-child(3)::before { content: ""; position: absolute; left: 17px; top: 17px; width: 10px; height: 1px; background: var(--muted); transform: rotate(-45deg); }
.x { margin-left: auto; width: 44px; height: 100%; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.x:hover { background: #c42b1c; color: #fff; }

.btn { border-radius: 8px; padding: 7px 14px; border: 1px solid var(--border-strong); background: #fff; color: var(--copper-dark); cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--raised); }
.btn.primary { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--copper-dark); }
.btn.danger { color: #9b2c1d; border-color: #9b2c1d80; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.wide { width: 100%; }

/* Menu bar, as the AKC desktop tools */
.menubar { display: flex; gap: 2px; padding: 2px 6px; border-bottom: 1px solid var(--border); background: var(--soft); flex: none; position: relative; z-index: 5; }
.menu { position: relative; }
.menu > button { border: 0; background: none; padding: 4px 10px; border-radius: 5px; cursor: pointer; color: var(--text); font-size: 13px; }
.menu > button:hover, .menu > button[aria-expanded="true"] { background: var(--raised); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 12px 30px rgba(60, 30, 10, .18); padding: 5px; display: flex; flex-direction: column; }
.dropdown button, .dropdown a { display: flex; justify-content: space-between; gap: 18px; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 5px; cursor: pointer; color: var(--text); font-size: 13px; text-decoration: none; }
.dropdown button:hover, .dropdown a:hover { background: var(--raised); }
.dropdown hr, .ctx hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
kbd { font: 12px Inter, sans-serif; color: var(--muted); }

/* Brand header */
.brand { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: #fff; flex: none; }
.brand .akc { height: 34px; width: auto; }
.brand .sep { width: 1px; height: 34px; background: var(--border); margin: 0 4px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 17px; color: var(--heading); line-height: 1.2; }
.brand-text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand.small { padding: 10px 16px; }
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--muted); background: var(--soft); white-space: nowrap; }
.pill i, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.dot.busy, .pill.busy i { background: var(--copper); animation: pulse 1s ease-in-out infinite; }
.dot.paused, .pill.paused i { background: #b9afa6; }
@keyframes pulse { 50% { opacity: .35; } }

.app-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 600px; background: var(--soft); }
.drives { background: #fff; border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.drives .label { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 6px 4px; }
.drives ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.drives li button { width: 100%; display: flex; gap: 9px; text-align: left; border: 0; border-left: 3px solid transparent; background: none; border-radius: 8px; padding: 8px 8px; cursor: pointer; color: var(--text); }
.drives li button:hover { background: var(--soft); }
.drives li.current button { background: var(--raised); border-left-color: var(--copper); }
.drives li .app-icon { width: 26px; height: 26px; }
.drives li strong { display: block; color: var(--heading); font-size: 13px; }
.drives li small { display: block; color: var(--muted); font-size: 11.5px; }
.drives li .st { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 2px; }

.drive { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow: auto; }
.drive-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.drive-head h2 { margin: 0; font-size: 22px; color: var(--heading); }
.drive-head .line { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; margin-top: 2px; }
.drive-head .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.card h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.meter { height: 10px; border-radius: 6px; background: var(--raised); overflow: hidden; border: 1px solid var(--border); }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper), #bd7448); width: 0; transition: width .4s ease; }
.meter-text { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 7px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.activity { list-style: none; margin: 0; padding: 0; font-size: 12.5px; max-height: 150px; overflow: auto; }
.activity li { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.activity li:last-child { border: 0; }
.activity time { color: var(--muted); flex: none; width: 46px; }
.cache-row { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.cache-row select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; }

.statusbar { display: flex; justify-content: space-between; gap: 12px; padding: 5px 14px; border-top: 1px solid var(--border); background: var(--soft); font-size: 12px; color: var(--muted); flex: none; }
.statusbar a { color: var(--copper); font-weight: 700; text-decoration: none; }

/* File Explorer */
.ex-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e5e5e5; background: #fafafa; flex: none; }
.crumbs { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; background: #fff; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Same height as the app window beside it */
.ex-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); height: 677px; font-family: "Segoe UI", Inter, system-ui, sans-serif; }
.ex-nav { border-right: 1px solid #eee; padding: 10px 6px; font-size: 13px; color: #333; }
.ex-nav div { padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 7px; }
.ex-nav .on { background: #e5f1fb; }
.ex-nav .sub { padding-left: 24px; cursor: pointer; }
.ex-nav .sub:hover { background: #f2f8fd; }
.ex-files { overflow: auto; padding: 0 4px; }
.ex-files table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-files th { text-align: left; font-weight: 400; color: #555; padding: 7px 8px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; }
.ex-files td { padding: 5px 8px; white-space: nowrap; color: #222; }
.ex-files td.num, .ex-files th.num { text-align: right; }
.ex-files tr { cursor: default; user-select: none; }
.ex-files tbody tr:hover { background: #f2f8fd; }
.ex-files tbody tr.sel { background: #cce8ff; }
.ex-files .nm { display: flex; align-items: center; gap: 8px; }
.ex-files .thumb { width: 18px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, #7c8f6a, #c9b18a 60%, #e9dcc3); flex: none; }
.ex-files .thumb.dir { background: linear-gradient(#f3c95c, #e0a92e); }
.ex-files .when { color: #666; }
.ex-hint { font-size: 12px; color: #666; padding: 10px 8px 14px; margin: 0; }
.state { display: inline-flex; align-items: center; gap: 6px; }
.ico { width: 16px; height: 16px; display: inline-block; flex: none; }
.ico.cloud { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 12.5h7.2a2.8 2.8 0 0 0 .4-5.6 4 4 0 0 0-7.6-1A3.3 3.3 0 0 0 4.5 12.5z' fill='none' stroke='%232b6cb0' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ico.local { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23107c10' stroke-width='1.3'/%3E%3Cpath d='M5 8.2l2 2 4-4.2' fill='none' stroke='%23107c10' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ico.pinned { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23107c10'/%3E%3Cpath d='M5 8.2l2 2 4-4.2' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ico.sync { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 0 1-8.6 3.5M3 8a5 5 0 0 1 8.6-3.5' fill='none' stroke='%232b6cb0' stroke-width='1.4'/%3E%3Cpath d='M11 2v3h3M5 14v-3H2' fill='none' stroke='%232b6cb0' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { width: 70px; height: 5px; background: #e6e6e6; border-radius: 3px; overflow: hidden; display: inline-block; }
.bar i { display: block; height: 100%; width: 0; background: var(--sky); }

.ctx { position: fixed; z-index: 40; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 4px; min-width: 230px; display: flex; flex-direction: column; font-family: "Segoe UI", Inter, sans-serif; }
.ctx button { text-align: left; border: 0; background: none; padding: 7px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #222; }
.ctx button:hover { background: #f0f0f0; }
.ctx button.checked::before { content: "✓"; display: inline-block; width: 16px; margin-left: -4px; }

/* Add a drive */
.modal-back { position: fixed; inset: 0; z-index: 30; background: rgba(32, 26, 22, .45); display: grid; place-items: center; padding: 16px; }
.dialog { width: min(860px, 100%); max-height: calc(100vh - 32px); }
.add-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 380px; background: var(--soft); }
.rail { list-style: none; margin: 0; padding: 16px 10px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.rail li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; }
.rail li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1.5px solid var(--border-strong); color: var(--copper-dark); background: #fff; flex: none; }
.rail li.current { background: var(--raised); color: var(--heading); font-weight: 700; }
.rail li.current b, .rail li.done b { background: var(--copper); border-color: var(--copper); color: #fff; }
.add-page { padding: 18px 22px; overflow: auto; }
.add-page h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 17px; color: var(--heading); }
.add-page h3 b { width: 26px; height: 26px; border-radius: 50%; background: var(--copper); color: #fff; display: grid; place-items: center; font-size: 13px; }
.add-page > p { margin: 0 0 12px 36px; color: var(--muted); font-size: 13px; }
.form { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.form label.l { padding-top: 6px; font-weight: 700; font-size: 13px; color: var(--heading); }
.form input[type=text], .form input[type=password] { width: 100%; font: inherit; font-size: 13px; color: var(--text); padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; }
.form .radios { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-top: 4px; }
.form .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.result { margin-top: 10px; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.result.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #2f6b3a40; }
.result.busy { background: var(--raised); color: var(--copper-dark); border: 1px solid var(--border); }
.add-foot { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); background: #fff; }
.grow { flex: 1; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 340px; display: flex; gap: 12px; align-items: flex-start; background: #2b2b2b; color: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-size: 13px; animation: rise .25s ease; }
.toast .app-icon { width: 28px; height: 28px; }
.toast strong { display: block; margin-bottom: 2px; }
.toast span { color: #ddd; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }

@media (max-width: 1180px) { .app-body, .ex-body { height: auto; max-height: 720px; } }
@media (max-width: 720px) {
  .app-body, .ex-body, .add-body { grid-template-columns: 1fr; }
  .drives, .ex-nav, .rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .brand .akc, .brand .sep { display: none; }
  .form, .kv { grid-template-columns: 1fr; }
}