/* =========================================================
   Shared Camtree Flask App Styles
   Canonical, responsive, maintainable
   ========================================================= */

/* -------------------------------
   Design tokens
-------------------------------- */
:root{
  --primary:#447799;
  --accent:#447799;
  --bg-footer:#1b2f52;
  --text:#222;
  --muted:#666;

  --card-border:#ddd;
  --flash-bg:#fff3cd;
  --flash-border:#ffeeba;
  --flash-text:#856404;

  --title-size:32px;
  --title-mobile:20px;
  --title-mobile-small:16px;

  --container-padding:20px 40px;
  --container-padding-mobile:14px 12px;
}

/* -------------------------------
   Global reset & base
-------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* Mobile-first type scaling */
@media (max-width:600px){
  body{font-size:90%}
}

/* -------------------------------
   Header / title bar
   (keeps the more open style from styles1.css)
-------------------------------- */
#title-bar{
  background-color:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  min-height:60px;
}

#logo{
  width:50px;
  height:50px;
  background:#fff;
  border-radius:5px;
  margin-left:40px;
  margin-right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

#title-bar h1{
  margin:0;
  font-size:var(--title-size);
  flex-grow:1;
  text-align:left;
  min-width:0;
}

/* Header responsiveness */
@media (max-width:600px){
  #title-bar{
    padding:8px 12px;
  }
  #logo{
    width:36px;
    height:36px;
    margin-left:10px;
    margin-right:8px;
  }
  #title-bar h1{
    font-size:var(--title-mobile);
    line-height:1.1;
    white-space:normal;
  }
}

/* -------------------------------
   Main content containers
-------------------------------- */
#main-content{
  margin:0 20px;
  padding:var(--container-padding);
}

@media (max-width:600px){
  #main-content{
    margin:0 10px;
    padding:var(--container-padding-mobile);
  }
}

/* Two-column layout used in preview apps */
.container{
  display:flex;
  gap:24px;
  padding:var(--container-padding);
  align-items:flex-start;
}

.left,.right{
  width:50%;
}

.left{min-width:260px}

@media (max-width:900px){
  .container{
    flex-direction:column;
    padding:12px;
    gap:12px;
  }
  .left,.right{width:100%}
}

/* -------------------------------
   Typography
-------------------------------- */
.instructions{font-size:1rem;margin-bottom:1rem}

h1{font-size:1.4rem;margin-top:0}
h2{font-size:1.2rem;margin-top:.5rem}
h3{font-size:1rem;margin-top:.5rem;margin-bottom:.3rem}

@media (max-width:600px){
  h2{font-size:1.1rem}
  h3{font-size:.95rem}
}

/* -------------------------------
   Forms & inputs
-------------------------------- */
form{display:grid;gap:.75rem}

.row{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width:600px){
  .row{gap:.5rem}
}

input[type="text"]{
  padding:.6rem;
  font-size:1rem;
  width:100%;
  border:1px solid #ccc;
  border-radius:4px;
}

@media (max-width:600px){
  input[type="text"]{
    padding:.5rem;
    font-size:.95rem;
  }
}

/* Handle field width */
#handle-input{
  width:50%;
  max-width:600px;
}
@media (max-width:900px){
  #handle-input{width:100%}
}

/* -------------------------------
   Buttons
-------------------------------- */
button,
button[type="submit"],
.copy-btn{
  background-color:var(--primary);
  color:#fff;
  border:none;
  padding:10px 20px;
  font-size:16px;
  cursor:pointer;
  border-radius:5px;
}

@media (max-width:600px){
  button,
  button[type="submit"],
  .copy-btn{
    padding:8px 12px;
    font-size:14px;
  }
}

/* Clear / secondary button */
#clear-btn{
  background:#f0f2f4;
  color:#222;
  border:1px solid #d0d0d0;
}

/* -------------------------------
   Fieldsets
-------------------------------- */
fieldset{
  border:none;
  padding:0;
  margin-top:0;
}

@media (max-width:600px){
  fieldset label{
    display:block;
    margin:6px 0;
  }
}

/* -------------------------------
   Flash messages
-------------------------------- */
.flash{
  background:var(--flash-bg);
  border:1px solid var(--flash-border);
  padding:.5rem .75rem;
  margin-top:.5rem;
  color:var(--flash-text);
  border-radius:4px;
}

/* -------------------------------
   Citation blocks
-------------------------------- */
.citation-box{
  width:100%;
  border:1px solid #e6e6e6;
  background:#d3eced;
  padding:12px;
  border-radius:6px;
  margin-top:12px;
  font-size:1rem;
  line-height:1.45;
  word-break:break-word;
}

@media (max-width:600px){
  .citation-box{
    font-size:.92rem;
    padding:10px;
  }
}

.citation-toolbar{
  margin-top:8px;
  text-align:left;
}

/* -------------------------------
   Preview column (from styles2.css)
-------------------------------- */
.preview-container{
  border:1px solid var(--card-border);
  padding:.5rem;
  border-radius:4px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 170px);
}

.preview-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
}

.preview-iframe{
  width:100%;
  max-width:700px;
  height:80vh;
  border:1px solid #ccc;
  background:#fff;
}

@media (max-width:900px){
  .preview-container{height:auto}
  .preview-iframe{height:60vh}
}

@media (max-width:480px){
  .preview-iframe{height:45vh}
}

/* -------------------------------
   Footer
-------------------------------- */
#footer{
  text-align:center;
  padding:20px;
  background:var(--bg-footer);
  color:#fff;
}

#footer a,
#footer a:visited{
  color:#fff;
}