html{
    min-height: 100%;
}
:root{
--bg:#f8f8f5;
--text:#252525;
--muted:#777;
--faint:#aaa;
--line:#cfcfc8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font:13px/1.7 "Courier New",Courier,monospace;-webkit-text-size-adjust:100%}
a{color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
a:hover,a:active{color:var(--text);text-decoration:underline}
.shell{width:100%;max-width:760px;margin:0 auto;padding:28px 17px 60px}
header{padding:0;margin:0 0 18px;display:flex;justify-content:space-between;align-items:center}
.site-title{font:600 15px/1.3 "Courier New",Courier,monospace;color:var(--text);text-decoration:none}
.lock-link{display:inline-block;width:18px;height:18px;color:#111;font:10px/18px Arial,sans-serif;text-align:center;text-decoration:none}
.lock-link:hover{color:#111;text-decoration:none}
.backup-tools{
display:flex;
flex-direction:column;
align-items:center;
gap:1px;
}
.export-link,.import-link{
display:block;
min-width:32px;
min-height:30px;
padding:6px 5px;
color:#111;
font:12px/18px Arial,sans-serif;
text-align:center;
text-decoration:none;
}
.export-link:hover,.import-link:hover{color:#111;text-decoration:none}

.admin-only{display:none}
body.admin .admin-only{display:block}
body.admin .entry-actions{display:block}

.new{margin:0 0 16px}
.new-link{display:inline-block;color:var(--text);font:16px/1 "Courier New",Courier,monospace;text-decoration:none;padding:2px 4px 2px 0}
.new-link:hover{text-decoration:underline}

.auth-panel{display:none;margin:0 0 18px;font:13px/1.7 "Courier New",Courier,monospace}
.auth-panel.show{display:block}
.auth-panel input{
display:block;width:100%;height:36px;margin:0;padding:6px 10px;
border:1px solid var(--line);border-radius:2px;outline:none;
background:var(--bg);color:var(--text);
font:13px/1.7 "Courier New",Courier,monospace;
-webkit-appearance:none;appearance:none;
}
.auth-panel input:focus{border-color:#999}
.auth-panel .composer-meta{justify-content:flex-start}
.auth-panel a{color:var(--muted);text-decoration:none}
#authSubmit{margin-left:10px}

.composer{display:none;margin:0 0 18px}
.composer.show{display:block}
.composer[hidden]{display:none !important}
textarea{
display:block;width:100%;min-height:76px;margin:0;padding:7px 10px;resize:vertical;
border:1px solid var(--line);border-radius:2px;outline:none;
background:var(--bg);color:var(--text);
font:13px/1.7 "Courier New",Courier,monospace;
-webkit-appearance:none;appearance:none;
}
textarea:focus{border-color:#999}
.image-url{
width:100%;
box-sizing:border-box;
margin-top:8px;
padding:6px 0;
border:0;
border-bottom:1px solid #ddd;
background:transparent;
color:inherit;
font:inherit;
outline:none;
}
.image-url:focus{border-bottom-color:#999}
.entry-image{
display:block;
width:auto;
max-width:360px;
max-height:320px;
height:auto;
margin-top:10px;
}
.composer-meta{
display:flex;justify-content:flex-end;align-items:center;min-height:20px;
margin-top:3px;color:var(--faint);font:10px/1.4 "Courier New",Courier,monospace;
}
.composer-meta a{color:var(--muted);text-decoration:none}
.composer-meta a:hover{text-decoration:underline}
.send-link{display:none}
#sendBtn{margin-left:10px}

.entry{padding:0 0 7px;margin:0 0 7px}
.timestamp{display:block;margin:0 0 3px;color:var(--muted);font:10px/1.4 "Courier New",Courier,monospace}
.content{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:var(--text)}
.content strong{font-weight:bold}
.content em{font-style:italic}
.entry-actions{display:none;margin-top:4px;font:9px/1 "Courier New",Courier,monospace;opacity:.55}
.entry-actions a{display:inline-block;margin-right:7px;color:var(--muted)}
.empty{color:var(--muted);font-size:12px;padding:3px 0}


.day-nav{
display:flex;
justify-content:flex-start;
align-items:center;
gap:7px;
margin:0 0 10px;
min-height:20px;
font:10px/1.4 "Courier New",Courier,monospace;
}
.day-nav a{
color:var(--muted);
text-decoration:none;
min-width:0;
}
.day-nav a:hover{text-decoration:underline}
.day-nav .day-label{
color:var(--faint);
text-align:center;
}
.time-filter{
display:flex;
align-items:center;
justify-content:flex-start;
gap:6px;
margin:0 0 10px;
font:10px/1.4 "Courier New",Courier,monospace;
vertical-align:middle;
}
.time-filter a{
color:var(--muted);
text-decoration:none;
min-width:12px;
text-align:center;
}
.time-filter a.active{
color:var(--text);
}
.time-filter a:hover{text-decoration:underline}

.day-nav .prev,
.day-nav .next{
width:12px;
text-align:center;
}
.day-nav .time-filter{margin:0 0 0 8px}
.time-filter.is-hidden{display:none}


@media(max-width:600px){
.shell{padding:25px 17px 55px}
.send-link{display:inline-block;font-size:13px}
.shortcut-hint{display:none}
.composer .composer-meta{justify-content:flex-start}
.entry-actions{opacity:.65}
}

/* cohesive mobile tap areas */
.header-tools{
display:flex;
align-items:center;
justify-content:flex-end;
gap:0;
}
.lock-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
box-sizing:border-box;
}
.export-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
min-height:28px;
padding:4px;
box-sizing:border-box;
}
.new-link{
display:inline-block;
padding:5px 7px 5px 0;
}
.day-nav a,
.time-filter a{
display:inline-block;
padding:5px 3px;
}
.day-nav .prev,
.day-nav .next{
width:18px;
padding-left:0;
padding-right:0;
}
.auth-panel .composer-meta a,
.composer .composer-meta a{
display:inline-block;
padding:5px 3px;
}
.entry-actions a{
display:inline-block;
margin-right:7px;
padding:5px 2px;
}


/* two-column log entries: timestamp left, observation beside it */
.entry{
display:grid;
grid-template-columns:82px minmax(0,1fr);
column-gap:6px;
padding:0 0 7px;
margin:0 0 7px;
}
.timestamp{
grid-column:1;
grid-row:1;
margin:0;
align-self:start;
line-height:1.7;
}
.content{
grid-column:2;
grid-row:1;
margin:0;
min-width:0;
line-height:1.7;
}
.entry-actions{
grid-column:2;
grid-row:2;
margin-top:4px;
}


/* baseline/top-edge alignment */
.entry{
align-items:start;
}
.timestamp,
.content{
align-self:start;
margin-top:0 !important;
padding-top:0 !important;
}
.content{
position:relative;
top:-3px;
}


/* refined theme + equal header controls */
:root{
--bg:#f5f4f1;
--text:#4a4a4a;
--muted:#6f6f6f;
--faint:#999;
--line:#d5d3cf;
}
body{
background:var(--bg);
color:var(--text);
}
.lock-link,
.export-link,
.theme-link{
width:30px;
height:30px;
min-width:30px;
min-height:30px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
body.dark{
--bg:#292a2b;
--text:#d8d8d6;
--muted:#a5a5a2;
--faint:#7d7d7a;
--line:#464748;
    min-height: 100vh;
}
body.dark .lock-link,
body.dark .export-link,
body.dark .theme-link{
color:var(--text);
}
body.dark .auth-panel input,
body.dark textarea{
background:var(--bg);
color:var(--text);
border-color:var(--line);
}
.theme-link{
color:var(--text);
font:12px/1 Arial,sans-serif;
text-decoration:none;
}
.theme-link:hover,
.theme-link:active{
color:var(--text);
text-decoration:none;
}


/* visually balanced header icons */
.lock-link,
.export-link,
.theme-link{
width:30px !important;
height:30px !important;
min-width:30px !important;
min-height:30px !important;
padding:0 !important;
display:inline-flex !important;
align-items:center;
justify-content:center;
box-sizing:border-box;
line-height:30px;
}
.lock-link{
font-size:11px;
}
.export-link{
font-size:11px;
}
.theme-link{
font-size:7px;
}

/*Style 2*/

/* Mobile / tablet responsive layout */
* { box-sizing: border-box; }

html, body {
max-width: 100%;
overflow-x: hidden;
}

img {
max-width: 100%;
height: auto;
}

@media (max-width: 700px) {
body {
min-width: 0 !important;
padding: 12px !important;
}

/* Keep the main Woods layout inside the viewport. */
.container, .wrap, .page, main, #app {
max-width: 100% !important;
width: 100% !important;
}

header, nav, .header, .topbar, .toolbar {
flex-wrap: wrap !important;
gap: 8px !important;
}

/* Don't let controls force horizontal scrolling. */
button, input, textarea, select {
max-width: 100%;
}

textarea, input[type="text"], input[type="url"], input[type="password"] {
width: 100% !important;
}

/* Comfortable tap targets. */
button {
min-height: 42px;
}

/* Logs remain readable on narrow screens. */
.entry, .log, .post, .card, article {
max-width: 100% !important;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Preserve image aspect ratio and prevent oversized linked images. */
.entry img, .log img, .post img, .card img, article img {
display: block;
max-width: 100% !important;
height: auto !important;
}

/* Composer controls stack rather than squeezing together. */
#composer {
max-width: 100% !important;
}

#composer input,
#composer textarea {
width: 100% !important;
max-width: 100% !important;
}
}

@media (max-width: 420px) {
body {
padding: 8px !important;
}

button {
min-height: 44px;
}

/* Avoid tiny fixed-width UI elements on phones. */
[style*="width"],
[style*="min-width"] {
max-width: 100%;
}
}

/*Style 3*/

@media (max-width: 700px) {
/* Admin page itself must stay inside the viewport. */
body.admin,
body:has(#admin),
#admin {
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
overflow-x: hidden !important;
}

#admin {
padding-left: 8px !important;
padding-right: 8px !important;
}

/* Catch common admin wrapper/panel layouts without changing desktop sizing. */
#admin > *,
#admin .panel,
#admin .admin-panel,
#admin .admin-content,
#admin .admin-page,
#admin .admin-wrap {
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}

#admin input,
#admin textarea,
#admin select {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}

#admin textarea {
resize: vertical;
}

#admin button {
max-width: 100%;
}

#admin img,
#admin video,
#admin iframe {
max-width: 100% !important;
height: auto !important;
}

/* Prevent long URLs / IDs from widening the admin page. */
#admin,
#admin * {
overflow-wrap: anywhere;
word-break: break-word;
}

/* Rows of admin controls can stack on a phone. */
#admin .row,
#admin .controls,
#admin .actions,
#admin .toolbar,
#admin .form-row {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
}

#admin .row > *,
#admin .controls > *,
#admin .actions > *,
#admin .toolbar > *,
#admin .form-row > * {
max-width: 100% !important;
}
}

@media (max-width: 420px) {
#admin {
padding-left: 4px !important;
padding-right: 4px !important;
}

#admin button {
min-height: 42px;
}
}

/*Style 4*/

@media (max-width: 700px) {
html, body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}

body {
margin: 0 !important;
padding: 8px !important;
}

/* Any fixed-width shell/panel revealed by the square must shrink to the
    viewport instead of creating a horizontal page scroll. */
#admin,
#admin .panel,
#admin .admin-panel,
#admin .admin-content,
#admin .admin-page,
#admin .admin-wrap,
#admin form,
#admin fieldset {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}

/* Password box: override desktop/fixed widths and prevent padding from
    making it wider than the viewport. */
#admin input[type="password"],
#admin input[type="text"],
#admin input[type="url"],
#admin textarea,
#composer input,
#composer textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

/* The composer should hug the same mobile width as visitor content. */
#composer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

#composer * {
max-width: 100% !important;
box-sizing: border-box !important;
}

/* Keep rows from forcing the password/composer outside the screen. */
#admin .row,
#admin .controls,
#admin .actions,
#admin .toolbar,
#admin .form-row,
#composer .row,
#composer .controls,
#composer .actions {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex-wrap: wrap !important;
}

/* If a desktop rule uses inline width, these inputs still remain fluid. */
#admin input,
#admin textarea,
#composer input,
#composer textarea {
flex: 1 1 auto !important;
}

/* Prevent long content/URLs from widening the page. */
#admin *,
#composer * {
overflow-wrap: anywhere;
word-break: break-word;
}
}

@media (max-width: 420px) {
body {
padding: 6px !important;
}

#admin,
#composer {
padding-left: 0 !important;
padding-right: 0 !important;
}

#admin input[type="password"] {
font-size: 16px !important; /* avoids iOS zoom when entering password */
}
}


/*Style 5*/

/* Final mobile layout: target the actual Woods elements, not a non-existent
  #admin wrapper. This applies on every refresh because it is CSS in the file. */
html {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

body {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}

@media (max-width: 700px) {
body {
margin: 0 !important;
padding: 0 !important;
}

.shell {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 18px 12px 40px !important;
overflow-x: hidden !important;
}

header,
.header-tools {
max-width: 100% !important;
min-width: 0 !important;
}

.header-tools {
flex: 0 0 auto;
}

/* This is the actual password panel shown after clicking the square. */
#authPanel {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
}

#authPanel input#passwordInput,
#authPanel input#emailInput {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 36px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}

#authPanel .composer-meta {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}

/* The actual composer. */
#composer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}

#composer textarea#body,
#composer input#imageUrl {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

#composer textarea#body {
min-height: 76px !important;
}

#composer .composer-meta {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex-wrap: wrap !important;
}

/* Log content must never determine the page width. */
#log,
#log * {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: anywhere;
word-break: break-word;
}

#log img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
}

/* Long URLs and generated content should wrap rather than widen the page. */
a,
span,
div,
p {
max-width: 100%;
}
}

@media (max-width: 420px) {
.shell {
padding: 14px 8px 32px !important;
}

#authPanel input#passwordInput,
#authPanel input#emailInput {
font-size: 16px !important;
}
}


/*Style 6*/

@media (max-width: 700px) {
html, body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}

/* Small breathing room from the physical screen edges. */
.shell {
width: calc(100% - 6px) !important;
max-width: calc(100% - 6px) !important;
margin-left: 3px !important;
margin-right: 3px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

/* Admin/password area stays aligned with visitor content. */
.auth-panel,
.auth-panel input,
.auth-panel .composer-meta {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

.auth-panel input#passwordInput {
width: 100% !important;
}

/* Composer gets the exact available mobile width. */
#composer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

#composer textarea#body,
#composer input#imageUrl {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

#composer textarea#body {
display: block !important;
}

#composer input#imageUrl {
display: block !important;
}

#composer .composer-meta {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
flex-wrap: wrap !important;
}

/* Never let post content create horizontal overflow. */
#log,
#log * {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: anywhere;
word-break: break-word;
}
}


/*Style 7*/

@media (max-width: 700px) {
html, body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}

/* 6px breathing room throughout the mobile site. */
body {
padding-left: 6px !important;
padding-right: 6px !important;
}

.shell {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

/*
  * iOS Safari zooms when focusing form controls whose computed font size
  * is below 16px. Force every admin/composer form control to 16px.
  * This fixes the "click + then everything zooms" behavior without
  * disabling user pinch-zoom.
  */
#authPanel input,
#authPanel textarea,
#authPanel select,
#composer input,
#composer textarea,
#composer select,
#passwordInput,
#body,
#imageUrl {
font-size: 16px !important;
line-height: 1.35 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

#composer,
#authPanel {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

#composer .composer-meta,
#authPanel .composer-meta {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
flex-wrap: wrap !important;
}

#log,
#log * {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: anywhere;
word-break: break-word;
}

#log img {
display: block !important;
max-width: 100% !important;
height: auto !important;
}
}

@media (max-width: 420px) {
body {
padding-left: 6px !important;
padding-right: 6px !important;
}
}