/* jameslemieux.com — Windows 95 theme */
* { box-sizing: border-box; }
html { background: #008080; }
body {
  margin: 0;
  padding: 16px 12px 56px;
  font: 14px/1.45 "MS Sans Serif", Tahoma, Geneva, Arial, sans-serif;
  color: #000;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
[hidden] { display: none !important; }

.window {
  max-width: 760px;
  margin: 0 auto;
  background: #c0c0c0;
  padding: 3px;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
.titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font-weight: bold; padding: 3px 4px;
}
.titlebar .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbtn {
  width: 18px; height: 16px; line-height: 12px; text-align: center; font-size: 11px;
  background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #000 #000 #fff;
}
.menubar { padding: 2px 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 4px; padding: 4px; border-top: 1px solid #808080; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: 3px 12px; color: #000; text-decoration: none;
  background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #808080; font: inherit; cursor: pointer;
  min-height: 28px;
}
.btn:visited { color: #000; }
.btn:active { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px #808080; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn[disabled] { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
.btn.primary { font-weight: bold; }
.addr { flex: 1; min-width: 160px; background: #fff; padding: 3px 6px;
  border: 2px solid; border-color: #808080 #fff #fff #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content {
  background: #fff; margin: 3px; padding: 16px 20px 24px;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
  min-height: 60vh;
}
h1 { font: bold 26px/1.2 "Times New Roman", serif; margin: 0 0 4px; overflow-wrap: anywhere; }
h2 { font-size: 16px; margin: 20px 0 8px; background: #000080; color: #fff; padding: 2px 6px; }
.sub { color: #555; margin: 0 0 12px; }
.small { font-size: 12px; }
hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 14px 0; }

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 8px 4px; border-bottom: 1px dotted #808080; align-items: start; }
.files .ico { font-size: 20px; line-height: 1.2; }
.files .date { color: #555; font-size: 12px; white-space: nowrap; line-height: 1.8; }
.files a { font-weight: bold; overflow-wrap: anywhere; }
.files p { margin: 2px 0 0; color: #333; overflow-wrap: anywhere; }

article p { margin: 0 0 1em; max-width: 62ch; overflow-wrap: anywhere; }
figure { margin: 0; }
.photo {
  margin: 12px 0 16px; padding: 4px; background: #c0c0c0; display: inline-block; max-width: 100%;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.photo img { display: block; max-width: 100%; height: auto; }

.status { display: flex; gap: 4px; margin: 0 3px 3px; font-size: 12px; }
.status div { flex: 1; padding: 2px 6px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.status .zone { flex: 0 0 120px; }

.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px; background: #c0c0c0;
  border-top: 2px solid #fff; display: flex; align-items: center; gap: 6px; padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}
.start { font-weight: bold; }
.task { flex: 1; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 2px solid; border-color: #000 #fff #fff #000; padding: 3px 8px; background: #dfdfdf; }
.clock { margin-left: auto; padding: 4px 10px; border: 1px solid; border-color: #808080 #fff #fff #808080; font-size: 12px; min-width: 70px; text-align: center; }

@media (max-width: 520px) {
  body { padding: 6px 4px 52px; }
  .content { padding: 12px; }
  h1 { font-size: 22px; }
  .files li { grid-template-columns: auto 1fr; }
  .files .date { grid-column: 2; line-height: 1.4; }
  .task { display: none; }
}