/* Shared field styling. Keep these rules after the layout and palette sheets. */
:root{
  --field-height:42px;
  --field-padding:10px 13px;
  --field-radius:10px;
  --field-font-size:14px;
  --field-fill:var(--paper);
  --field-edge:color-mix(in srgb,var(--line) 78%,var(--muted));
  --field-focus:var(--accent);
  --field-error:#b34e40;
  --field-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent);
  --field-ring:0 0 0 3px color-mix(in srgb,var(--field-focus) 15%,transparent);
}

/* Range sliders, buttons, and the hidden reading-tool fallback retain their layout. */
:root :is(input:where(:not([type=range],[type=checkbox],[type=radio],[type=hidden],[type=file],[type=button],[type=submit],[type=reset],[type=color])),textarea,select:where(:not([aria-hidden=true]))),
:root .sync-panel .sync-token-input,
:root .ai-connect-form input,
:root .reader-side-content .ai-connect-form input,
:root #ai-question,
:root .ai-sheet .ai-composer #ai-question,
:root .reader-side-content .ai-composer #ai-question{
  min-width:0;
  max-width:100%;
  min-height:var(--field-height);
  padding:var(--field-padding);
  border:1px solid var(--field-edge);
  border-radius:var(--field-radius);
  background-color:var(--field-fill);
  color:var(--ink);
  font-family:inherit;
  font-size:var(--field-font-size);
  font-weight:400;
  line-height:1.5;
  box-shadow:var(--field-shadow);
  outline:none;
  caret-color:var(--accent);
  -webkit-tap-highlight-color:transparent;
}

:root :is(input,textarea)::placeholder{
  color:var(--muted);
  opacity:.85;
}

:root :is(input,textarea,select):enabled:hover{
  --field-edge:color-mix(in srgb,var(--line) 45%,var(--muted));
}

:root :is(input,textarea,select):focus{
  --field-edge:var(--field-focus);
  --field-shadow:var(--field-ring);
}

:root :is(input,textarea,select):disabled{
  --field-fill:var(--bg);
  --field-shadow:none;
  opacity:.55;
  cursor:not-allowed;
}

:root :is(input,textarea)[readonly]{
  --field-fill:var(--bg);
  --field-shadow:none;
  color:var(--muted);
  cursor:text;
}

:root :is(input,textarea,select)[aria-invalid=true],
:root :is(input,textarea,select):user-invalid{
  --field-focus:var(--field-error);
  --field-edge:var(--field-error);
}

/* Search is one field: its wrapper owns the border and focus ring. */
:root .search-box{
  min-height:var(--field-height);
  padding:0 13px;
  gap:9px;
  border:1px solid var(--field-edge);
  border-radius:var(--field-radius);
  background:var(--field-fill);
  box-shadow:var(--field-shadow);
}

:root .search-box:hover{
  --field-edge:color-mix(in srgb,var(--line) 45%,var(--muted));
}

:root .search-box:focus-within{
  --field-edge:var(--field-focus);
  --field-shadow:var(--field-ring);
}

:root .search-box:focus-within svg{color:var(--accent)}

:root .search-box input,
:root .search-box input:focus,
:root .search-box input:focus-visible{
  width:100%;
  min-height:calc(var(--field-height) - 2px);
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:var(--field-font-size);
  line-height:1.5;
  box-shadow:none;
  outline:none;
}

:root input[type=search]{-webkit-appearance:none;appearance:none}
:root input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
:root input[type=search]::-webkit-search-cancel-button{cursor:pointer;opacity:.65}

:root .search-box:has(input:disabled){opacity:.55;cursor:not-allowed}
:root .search-box:has(input[aria-invalid=true]){--field-edge:var(--field-error);--field-focus:var(--field-error)}

/* CSS chevrons follow every palette while the native select menu remains available. */
:root select:where(:not([aria-hidden=true])),
:root .note-editor select,
:root .note-filters select,
:root .queue-filters select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}

:root select option{background:var(--paper);color:var(--ink)}
:root select:disabled{cursor:not-allowed}

:root textarea,
:root .note-editor textarea{
  display:block;
  width:100%;
  min-height:160px;
  line-height:1.8;
  resize:vertical;
  overflow-wrap:break-word;
}

:root #ai-question{min-height:120px;line-height:1.75}
:root .ai-sheet .ai-composer #ai-question{height:96px;min-height:80px;resize:vertical}
:root .reader-side-content .ai-composer #ai-question{height:76px;min-height:64px;max-height:180px;resize:vertical}

:root .sync-panel .sync-token-input,
:root .ai-connect-form input,
:root .reader-side-content .ai-connect-form input{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.02em;
}

:root .queue-time-label input{font-variant-numeric:tabular-nums}

:root :is(input[type=checkbox],input[type=radio]){
  -webkit-appearance:none;
  appearance:none;
  display:inline-grid;
  place-content:center;
  width:18px;
  height:18px;
  margin:0;
  flex-shrink:0;
  border:1px solid var(--field-edge);
  border-radius:5px;
  background:var(--field-fill);
  color:var(--paper);
  accent-color:var(--accent);
  vertical-align:middle;
  cursor:pointer;
}

:root :is(input[type=checkbox],input[type=radio])::before{
  content:"";
  display:block;
  visibility:hidden;
}

:root input[type=checkbox]::before{
  width:9px;
  height:5px;
  border:solid currentColor;
  border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg);
}

:root input[type=radio]{border-radius:50%}
:root input[type=radio]::before{width:8px;height:8px;border-radius:50%;background:currentColor}

:root :is(input[type=checkbox],input[type=radio]):checked{
  --field-edge:var(--accent);
  --field-fill:var(--accent);
}

:root :is(input[type=checkbox],input[type=radio]):checked::before{visibility:visible}

:root input[type=checkbox]:indeterminate{
  --field-edge:var(--accent);
  --field-fill:var(--accent);
}

:root input[type=checkbox]:indeterminate::before{
  width:8px;
  height:0;
  border-width:0 0 2px;
  transform:none;
  visibility:visible;
}

:root :is(input[type=checkbox],input[type=radio]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

:root :is(input[type=checkbox],input[type=radio]):disabled{cursor:not-allowed}
:root .queue-category-options{gap:8px}
:root .queue-category-options label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  max-width:100%;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--muted);
  line-height:1.5;
  overflow-wrap:anywhere;
  cursor:pointer;
}
:root .queue-category-options label:hover{border-color:var(--muted)}
:root .queue-category-options label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
:root .queue-category-options label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
:root .queue-category-options input:focus-visible{outline:none}
:root .queue-category-options label:has(input:disabled){cursor:not-allowed;opacity:.65}

.field-label,.sync-token-label,.ai-question-label{
  display:block;
  font-size:12px;
  font-weight:500;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:8px;
}

.input-keyboard-hint{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.input-keyboard-hint kbd{
  display:inline-block;
  margin:0 2px;
  padding:0 4px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg);
  color:var(--muted);
  font:inherit;
}

@media screen and (min-width:900px){
  :root{
    --field-height:34px;
    --field-padding:7px 10px;
    --field-radius:7px;
    --field-font-size:13px;
  }
  :root .search-box{padding:0 10px;gap:8px}
  :root .search-box input{padding:6px 0}
  :root .reader-side-content .ai-composer #ai-question{height:64px;min-height:56px;padding:8px 10px}
  :root .note-editor textarea{min-height:160px}
  :root .queue-category-options label{min-height:32px;padding:5px 9px;border-radius:7px}
  .field-label,.sync-token-label,.ai-question-label{font-size:11px}
}

@media screen and (max-width:899px),(pointer:coarse){
  :root{--field-height:44px;--field-font-size:16px}
  :root .search-box input{font-size:16px}
  :root .ai-sheet .ai-composer #ai-question{height:96px;min-height:80px}
  :root .queue-category-options label{min-height:44px;padding:9px 11px}
}

/* E-ink fields use solid monochrome boundaries without soft shadows. */
:root[data-theme=eink]{
  --field-radius:3px;
  --field-fill:#fff;
  --field-edge:#777;
  --field-focus:#000;
  --field-error:#000;
  --field-shadow:none;
  --field-ring:0 0 0 1px #000;
}

:root[data-theme=eink] :is(input,textarea,select):enabled:hover,
:root[data-theme=eink] .search-box:hover{--field-edge:#000}
:root[data-theme=eink] :is(input,textarea)::placeholder{color:#666;opacity:1}
:root[data-theme=eink] :is(input,textarea,select):disabled{opacity:1;color:#777;--field-edge:#aaa}
:root[data-theme=eink] :is(input,textarea,select)[aria-invalid=true],
:root[data-theme=eink] :is(input,textarea,select):user-invalid{border-style:dashed}
:root[data-theme=eink] select:where(:not([aria-hidden=true])){appearance:auto;background-image:none;padding-right:10px}
:root[data-theme=eink] .queue-category-options label{border-radius:3px}
:root[data-theme=eink] .input-keyboard-hint kbd{border-radius:2px}

@media (forced-colors:active){
  :root :is(input,textarea,select):focus,
  :root .search-box:focus-within{outline:2px solid Highlight;outline-offset:2px}
  :root .search-box input:focus{outline:none}
  :root select:where(:not([aria-hidden=true])){appearance:auto;background-image:none;padding-right:10px}
  :root :is(input[type=checkbox],input[type=radio]){appearance:auto;background:none;border:0;color:CanvasText}
  :root :is(input[type=checkbox],input[type=radio])::before{display:none}
  :root .queue-category-options label:has(input:checked){border-color:Highlight;color:Highlight}
}