/* 入力欄の共通レイアウト。計算結果の表や図の幅は変更しない。 */
body.compact-inputs :is(.form,.ctl,.pbar,.cur) [hidden],
body.compact-inputs :is(.form,.ctl,.pbar,.cur)[hidden]{display:none!important}

body.compact-inputs :is(.form,.ctl){
  max-width:896px; margin:16px 0 12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(135deg,var(--card),var(--paper));
  box-shadow:0 2px 8px rgb(20 30 45 / 3%);
}
body.compact-inputs :is(.form,.ctl) .row{
  gap:8px 10px; margin:0 0 10px; align-items:flex-end;
}
body.compact-inputs :is(.form,.ctl) .row:last-child{margin-bottom:0}
body.compact-inputs :is(.form,.ctl) .fld{min-width:0;gap:4px;flex:0 1 auto}
body.compact-inputs :is(.form,.ctl) .fld label{
  font-size:12px;line-height:1.4;letter-spacing:.015em;color:var(--ink2);
}
body.compact-inputs :is(.form,.ctl) :is(input:not([type=checkbox],[type=radio],[type=range]),select){
  max-width:100%;min-width:0;height:38px;padding:7px 9px;
  font-size:15px;line-height:1.2;border-radius:7px;background:var(--field);
  font-family:inherit;color:var(--ink);border:1px solid var(--line);
}
body.compact-inputs :is(.form,.ctl) :is(input,select):disabled{
  background:var(--tint);color:var(--muted);cursor:not-allowed;
}
body.compact-inputs :is(.form,.ctl) .field-year{width:78px}
body.compact-inputs :is(.form,.ctl) .field-short{width:58px}
body.compact-inputs :is(.form,.ctl) .field-zone{width:106px}
body.compact-inputs :is(.form,.ctl) .field-coordinate{width:118px}
body.compact-inputs :is(.form,.ctl) .field-place{width:172px}
body.compact-inputs :is(.form,.ctl) .fld[class*="field-"]> :is(input,select){width:100%}
body.compact-inputs :is(.form,.ctl) .fld select{width:auto;min-width:130px;max-width:240px}
body.compact-inputs :is(.form,.ctl) .fld-city{flex:0 1 220px;min-width:160px;max-width:240px}
body.compact-inputs :is(.form,.ctl) .fld-city :is(input,.cityw){width:100%}
body.compact-inputs :is(.form,.ctl) .pnote{font-size:12px;line-height:1.5;margin:4px 0 0;max-width:32em}
body.compact-inputs :is(.form,.ctl) .chk{
  min-height:38px;padding:5px 0;gap:7px;font-size:13px;line-height:1.45;
}
body.compact-inputs :is(.form,.ctl) .chk input{flex:none;width:18px;height:18px;margin:0}
body.compact-inputs :is(.form,.ctl) :is(button,a.btn){
  min-height:38px;padding:7px 12px;font-size:13px;line-height:1.4;border-radius:7px;
}
body.compact-inputs :is(.form,.ctl) button.primary{padding-inline:16px;font-size:14px}
body.compact-inputs :is(.form,.ctl) .who{
  font-size:12px;line-height:1.4;letter-spacing:.1em;margin:0 0 9px;
}
body.compact-inputs :is(.form,.ctl) .note{font-size:12px;line-height:1.6;margin:0;max-width:75em}
body.compact-inputs .row.act{gap:8px;margin-top:12px;padding-top:12px;align-items:flex-end}
body.compact-inputs .row.act .sep{flex:0 0 12px}
body.compact-inputs .row.act #name{width:144px}
body.compact-inputs :is(.pbar,.cur){max-width:896px;line-height:1.6}
body.compact-inputs .pbar .who{min-width:0;overflow-wrap:anywhere}
body.input-tool-koyomi .form{width:fit-content;gap:10px;align-items:flex-end}
body.compact-inputs #tRow>.legend{flex-basis:100%;line-height:1.4}
body.compact-inputs #tRow>span:has(button){display:flex;flex-wrap:wrap;gap:5px}

/* 長い時差説明は読みたいときに開ける。説明文自体は省略しない。 */
body.compact-inputs :is(.input-help,.input-options){margin:2px 0 8px;font-size:12px;line-height:1.6;color:var(--muted)}
body.compact-inputs :is(.input-help,.input-options) summary{width:fit-content;min-height:32px;padding:6px 0;cursor:pointer;color:var(--accent)}
body.compact-inputs :is(.input-help,.input-options)[open]{padding-bottom:8px}
body.compact-inputs :is(.input-help,.input-options)[open] summary{margin-bottom:6px}
body.compact-inputs :is(.input-help,.input-options) summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.compact-inputs .input-save{margin-bottom:0}
body.compact-inputs .input-save:has(>#saveBox[hidden]),
body.compact-inputs .input-save:has(#save[hidden]){display:none}
body.compact-inputs .input-save .row.act{margin-top:0;padding-top:0;border-top:0}
body.compact-inputs .input-unknowns{margin-bottom:0;gap:10px 22px}
body.compact-inputs .input-options .fld{flex:none}
body.compact-inputs .input-core{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 24px}
body.compact-inputs .input-core>.row{flex:1 1 350px;min-width:0}
body.compact-inputs .input-core>.row:has(.field-place){flex-basis:330px;align-items:flex-start}
body.compact-inputs .input-core .fld-city{flex:1 1 150px;min-width:0}
body.compact-inputs .input-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-bottom:6px}
body.compact-inputs .input-meta>.input-unknowns{margin-bottom:0}
body.compact-inputs .input-meta>.input-options{margin:0}
body.compact-inputs .input-meta>.input-options[open]{flex-basis:100%;margin-top:4px}
body.compact-inputs .input-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-top:12px;border-top:1px solid var(--line)}
body.compact-inputs .input-footer>.row.act{margin:0;padding:0;border:0}
body.compact-inputs .input-footer>.input-save{margin:0}
body.compact-inputs .input-footer>.input-save[open]{flex-basis:100%}
body.compact-inputs .fld.field-year:has(select){width:172px}
body.compact-inputs #ringsRow .fld{flex:1 1 130px;max-width:240px}
body.compact-inputs #ringsRow .fld select{width:100%}
body.input-tool-ephemeris .form #at{width:184px}

@media(max-width:650px){
  body.compact-inputs :is(.form,.ctl){padding:12px;margin-top:12px}
  body.compact-inputs :is(.form,.ctl) .row{gap:8px;margin-bottom:10px}
  body.compact-inputs :is(.form,.ctl) .fld{gap:3px}
  body.compact-inputs :is(.form,.ctl) .fld label{font-size:11px;line-height:1.4}
  body.compact-inputs :is(.form,.ctl) :is(input:not([type=checkbox],[type=radio],[type=range]),select){height:40px;font-size:16px;padding:7px 8px}
  body.compact-inputs :is(.form,.ctl) .field-year{width:72px}
  body.compact-inputs :is(.form,.ctl) .field-short{width:48px}
  body.compact-inputs :is(.form,.ctl) .field-zone{width:100px}
  body.compact-inputs :is(.form,.ctl) .field-coordinate{width:calc((100% - 8px)/2);max-width:162px}
  body.compact-inputs :is(.form,.ctl) .field-place{width:calc((100% - 8px)/2)}
  body.compact-inputs :is(.form,.ctl) .fld select{min-width:0;max-width:100%}
  body.compact-inputs :is(.form,.ctl) .fld-city{flex:1 1 calc((100% - 8px)/2);min-width:0;max-width:none}
  body.compact-inputs :is(.form,.ctl) .chk{min-height:40px;padding:5px 0;font-size:12px}
  body.compact-inputs :is(.form,.ctl) :is(button,a.btn){min-height:40px;padding:8px 10px;font-size:13px}
  body.compact-inputs .row.act .sep{display:none}
  body.compact-inputs .row.act button.primary{flex-basis:100%;margin-bottom:2px}
  body.compact-inputs .input-footer>.row.act{flex-basis:100%}
  body.compact-inputs .row.act .fld:has(#name){flex:1;min-width:140px}
  body.compact-inputs .row.act #name{width:100%}
  body.compact-inputs .row.act #savedBox{flex-basis:calc(100% - 72px)}
  body.compact-inputs .row.act #saved{width:100%}
  body.compact-inputs .pbar .chg{min-height:36px;display:flex;align-items:center}
}
@media(max-width:359px){
  body.compact-inputs :is(.form,.ctl){padding:10px}
  body.compact-inputs :is(.form,.ctl) .row{column-gap:6px}
  body.compact-inputs :is(.form,.ctl) .field-year{width:68px}
  body.compact-inputs :is(.form,.ctl) .field-short{width:44px}
}
@media print{body.compact-inputs :is(.form,.ctl){display:none!important;box-shadow:none}}